wix-style-react
Version:
wix-style-react
58 lines • 2.44 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import kebabCase from 'lodash/kebabCase';
import { ThemeContext } from './ThemeContext';
/** ThemeProvider */
class ThemeProvider extends React.PureComponent {
_parseTheme(theme) {
const style = {};
for (const [key, value] of Object.entries(theme)) {
if (key !== 'className' &&
key !== 'icons' &&
key !== 'componentWrapper') {
style[`--wsr-${kebabCase(key)}`] = value;
}
}
return style;
}
render() {
const { dataHook, theme = {}, children } = this.props;
return (React.createElement("div", { className: theme.className, style: this._parseTheme(theme), "data-hook": dataHook },
React.createElement(ThemeContext.Provider, { value: { icons: theme.icons, className: theme.className } }, 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.string,
/** A theme object */
theme: PropTypes.shape({
className: PropTypes.string, // Applies a main class on the root element, useful when theming with the stylable approach
icons: PropTypes.object, // an object of icons mapping per component
componentWrapper: PropTypes.func, // a function that returns a component to be placed between the theme and the children
color00: PropTypes.string,
color05: PropTypes.string,
color10: PropTypes.string,
color20: PropTypes.string,
color30: PropTypes.string,
color40: PropTypes.string,
color50: PropTypes.string,
color60: PropTypes.string,
textColorPrimary: PropTypes.string,
textColorSecondary: PropTypes.string,
textColorPrimaryLight: PropTypes.string,
textColorSecondaryLight: PropTypes.string,
dividerColor: PropTypes.string,
borderRadius02: PropTypes.string,
borderRadius04: PropTypes.string,
borderRadius06: PropTypes.string,
borderRadius08: PropTypes.string,
// Button
buttonBorderRadius: PropTypes.string,
}),
};
ThemeProvider.defaultProps = {};
export default ThemeProvider;
//# sourceMappingURL=ThemeProvider.js.map