wix-style-react/dist/src/ThemeProvider/ThemeProvider.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
var _ThemeContext = require("./ThemeContext");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/ThemeProvider/ThemeProvider.js";
/** ThemeProvider */
class ThemeProvider extends _react.default.PureComponent {
  _parseTheme(theme) {
    var style = {};
    for (var [key, value] of Object.entries(theme)) {
      if (key !== 'className' && key !== 'icons' && key !== 'componentWrapper') {
        style["--wsr-".concat((0, _kebabCase.default)(key))] = value;
      }
    }
    return style;
  }
  render() {
    var {
      dataHook,
      theme = {},
      children
    } = this.props;
    return /*#__PURE__*/_react.default.createElement("div", {
      className: theme.className,
      style: this._parseTheme(theme),
      "data-hook": dataHook,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 26,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, {
      value: {
        icons: theme.icons,
        className: theme.className
      },
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 31,
        columnNumber: 9
      }
    }, theme.componentWrapper ? theme.componentWrapper({
      children
    }) : children));
  }
}
ThemeProvider.displayName = 'ThemeProvider';
ThemeProvider.propTypes = {
  /** Applied as data-hook HTML attribute that can be used in the tests */
  dataHook: _propTypes.default.string,
  /** A theme object */
  theme: _propTypes.default.shape({
    className: _propTypes.default.string,
    // Applies a main class on the root element, useful when theming with the stylable approach
    icons: _propTypes.default.object,
    // an object of icons mapping per component
    componentWrapper: _propTypes.default.func,
    // a function that returns a component to be placed between the theme and the children
    color00: _propTypes.default.string,
    color05: _propTypes.default.string,
    color10: _propTypes.default.string,
    color20: _propTypes.default.string,
    color30: _propTypes.default.string,
    color40: _propTypes.default.string,
    color50: _propTypes.default.string,
    color60: _propTypes.default.string,
    textColorPrimary: _propTypes.default.string,
    textColorSecondary: _propTypes.default.string,
    textColorPrimaryLight: _propTypes.default.string,
    textColorSecondaryLight: _propTypes.default.string,
    dividerColor: _propTypes.default.string,
    borderRadius02: _propTypes.default.string,
    borderRadius04: _propTypes.default.string,
    borderRadius06: _propTypes.default.string,
    borderRadius08: _propTypes.default.string,
    // Button
    buttonBorderRadius: _propTypes.default.string
  })
};
ThemeProvider.defaultProps = {};
var _default = exports.default = ThemeProvider;
//# sourceMappingURL=ThemeProvider.js.map