chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
124 lines (120 loc) • 5 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _colors = require("@chayns/colors");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/**
* @component
*/
/**
* Adjusts the color scheme for all child components.
*/
const ColorScheme = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
let {
color: colorProp = null,
colorMode: colorModeProp = null,
secondaryColor: secondaryColorProp = null,
children,
style = {},
cssVariables = {},
...otherProps
} = _ref;
let color = colorProp;
let colorMode = colorModeProp;
let secondaryColor = secondaryColorProp;
if (color !== null || secondaryColor !== null || colorMode !== null) {
if (typeof chayns !== 'undefined') {
if (color === null) {
color = chayns.env.site.color;
}
if (colorMode === null) {
colorMode = 0;
}
} else {
if (color === null) {
color = '#8e8e8e';
}
if (colorMode === null) {
colorMode = 0;
}
}
if (secondaryColor === null) {
secondaryColor = color;
}
}
const colorStyles = (0, _react.useMemo)(() => {
if (color) {
const primaryRgbColor = (0, _colors.hexToRgb255)(color);
const bgRgbColor = (0, _colors.hexToRgb255)((0, _colors.getColorFromPalette)('100', {
color,
secondaryColor,
colorMode
}));
const styles = {
color: 'var(--chayns-color--text)',
'--chayns-color-rgb': `${primaryRgbColor.r}, ${primaryRgbColor.g}, ${primaryRgbColor.b}`,
'--chayns-bg-rgb': `${bgRgbColor.r}, ${bgRgbColor.g}, ${bgRgbColor.b}`
};
// eslint-disable-next-line no-restricted-syntax
for (const colorName of (0, _colors.getAvailableColorList)()) {
const hexColor = (0, _colors.getColorFromPalette)(colorName, {
color,
secondaryColor,
colorMode
});
styles[`--chayns-color--${colorName}`] = hexColor;
const rgbColor = (0, _colors.hexToRgb255)(hexColor);
styles[`--chayns-color-rgb--${colorName}`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;
}
return styles;
}
return null;
}, [color, secondaryColor, colorMode]);
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
ref: ref,
"data-colormode": colorMode,
"data-color": color,
"data-secondarycolor": secondaryColor,
style: {
...style,
...colorStyles,
...cssVariables
}
}, otherProps), children);
});
ColorScheme.propTypes = {
/**
* The color to use for child components in hex format.
*/
color: _propTypes.default.string,
/**
* A secondary color to use for child components in hex format.
*/
secondaryColor: _propTypes.default.string,
/**
* A color mode to use for child components.
*/
colorMode: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/**
* Children of the component.
*/
children: _propTypes.default.node.isRequired,
/**
* Styles to be set on the wrapper `<div>`-element.
*/
style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])),
/**
* An object of CSS variables that should be set on the `<div>`-wrapper.
* Should look like this: `{ "--my-css-var": 100 }`.
*/
cssVariables: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))
};
ColorScheme.displayName = 'ColorScheme';
var _default = ColorScheme;
exports.default = _default;
//# sourceMappingURL=ColorScheme.js.map