@onesy/style-react
Version:
Onesy CSS in JS styling solution for React
210 lines (194 loc) • 9.93 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _is = _interopRequireDefault(require("@onesy/utils/is"));
var _merge = _interopRequireDefault(require("@onesy/utils/merge"));
var _hash = _interopRequireDefault(require("@onesy/utils/hash"));
var _isEnvironment = _interopRequireDefault(require("@onesy/utils/isEnvironment"));
var _style = require("@onesy/style");
var _Context = _interopRequireDefault(require("./Context"));
var _useOnesyTheme = _interopRequireDefault(require("./useOnesyTheme"));
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["ref", "root", "value", "addCssVariables", "children"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
const l = value => value;
const hashValue = value => {
const allowed = ['direction', 'preference', 'mode', 'palette', 'shape', 'breakpoints', 'space', 'shadows', 'typography', 'transitions', 'z_index'];
const valueNew = {};
Object.keys(value).filter(item => allowed.includes(item)).forEach(item => valueNew[item] = value[item]);
return (0, _hash.default)(valueNew);
};
const resolveValue = value => {
const notAllowed = ['subscriptions', 'id', 'element', 'updateWithRerender'];
const valueNew = {};
Object.keys(value).filter(item => !notAllowed.includes(item)).forEach(item => valueNew[item] = value[item]);
return valueNew;
};
const Theme = props => {
var _valueParent$palette;
const [init, setInit] = _react.default.useState(false);
const {
ref,
root = false,
value: valueLocal = {},
addCssVariables = true,
children
} = props,
other = (0, _objectWithoutProperties2.default)(props, _excluded);
const refs = {
root: _react.default.useRef(undefined),
init: _react.default.useRef(undefined),
id: _react.default.useId(),
styleSheet: _react.default.useRef(undefined)
};
refs.init.current = init;
const valueParent = (0, _useOnesyTheme.default)() || {};
const [value, setValue] = _react.default.useState(() => new _style.OnesyTheme((0, _merge.default)(resolveValue((0, _is.default)('function', valueLocal) ? valueLocal(valueParent) : valueLocal), resolveValue(valueParent), {
copy: true
})));
const addCssVariablesMethod = () => {
if (!refs.styleSheet.current) {
refs.styleSheet.current = window.document.createElement('style');
refs.styleSheet.current.setAttribute('data-onesy', 'true');
refs.styleSheet.current.setAttribute('data-version', 'static');
refs.styleSheet.current.setAttribute('data-name', 'vars');
window.document.head.append(refs.styleSheet.current);
}
const values = [];
const prefix = 'onesy';
// Palette
// Color
Object.keys(value.palette.color).forEach(item => {
var _value$palette$color$, _value$palette$color$2;
const itemValue = ((_value$palette$color$ = value.palette.color[item]) === null || _value$palette$color$ === void 0 ? void 0 : _value$palette$color$.main) || ((_value$palette$color$2 = value.palette.color[item]) === null || _value$palette$color$2 === void 0 ? void 0 : _value$palette$color$2[50]);
if (itemValue) values.push(`--${prefix}-palette-color-${item}: ${itemValue}`);
});
// Text
Object.keys(value.palette.text).filter(item_0 => ['default'].includes(item_0)).forEach(item_1 => {
Object.keys(value.palette.text[item_1]).forEach(itemValue_0 => {
values.push(`--${prefix}-palette-text-${itemValue_0}: ${value.palette.text[item_1][itemValue_0]}`);
});
});
Object.keys(value.palette.text).filter(item_2 => ['active', 'divider', 'disabled', 'hover', 'focus', 'selected'].includes(item_2)).forEach(item_3 => {
values.push(`--${prefix}-palette-text-${item_3}: ${value.palette.text[item_3]}`);
});
// Background
Object.keys(value.palette.background).filter(item_4 => ['default'].includes(item_4)).forEach(item_5 => {
Object.keys(value.palette.background[item_5]).forEach(itemValue_1 => {
values.push(`--${prefix}-palette-background-${itemValue_1}: ${value.palette.background[item_5][itemValue_1]}`);
});
});
// Visual contrast
// Object.keys(value.palette.visual_contrast).forEach(item => {
// Object.keys(value.palette.visual_contrast[item].opacity).forEach(itemValue => {
// values.push(`--${prefix}-palette-visual-contrast-${item}-opacity-${itemValue}: ${value.palette.visual_contrast[item].opacity[itemValue]}`);
// });
// });
// Shape
values.push(`--${prefix}-shape-radius-unit: ${value.shape.radius.unit}`);
Object.keys(value.shape.radius.values).forEach(item_6 => {
values.push(`--${prefix}-shape-radius-${item_6}: ${value.shape.radius.values[item_6]}`);
});
// Space
values.push(`--${prefix}-space-unit: ${value.space.unit}`);
Object.keys(value.space.values).forEach(item_7 => {
values.push(`--${prefix}-space-${item_7}: ${value.space.values[item_7]}`);
});
// Shadows
Object.keys(value.shadows.values).filter(item_8 => ['default'].includes(item_8)).forEach(item_9 => {
Object.keys(value.shadows.values[item_9]).forEach(itemValue_2 => {
values.push(`--${prefix}-shadows-${itemValue_2}: ${value.shadows.values[item_9][itemValue_2]}`);
});
});
// Typography
Object.keys(value.typography.font_family).forEach(item_10 => values.push(`--${prefix}-typography-font-family-${item_10}: ${value.typography.font_family[item_10]}`));
values.push(`--${prefix}-typography-font-size-html: ${value.typography.font_size.html}`);
values.push(`--${prefix}-typography-unit: ${value.typography.unit}`);
// Transitions
Object.keys(value.transitions.duration).forEach(item_11 => values.push(`--${prefix}-transitions-duration-${item_11}: ${value.transitions.duration[item_11]}`));
Object.keys(value.transitions.timing_function).forEach(item_12 => values.push(`--${prefix}-transitions-timing-function-${item_12}: ${value.transitions.timing_function[item_12]}`));
// zIndex
Object.keys(value.z_index).forEach(item_13 => values.push(`--${prefix}-z-index-${item_13}: ${value.z_index[item_13]}`));
// Add to styleSheet innerHTML
refs.styleSheet.current.innerHTML = `
${refs.root.current ? `#${refs.id}` : ':root'} {
${values.map(item_14 => `\t${item_14};`).join('\n')}
}
`;
};
_react.default.useEffect(() => {
if (refs.root.current) {
const onesyTheme = new _style.OnesyTheme(value, {
element: refs.root.current
});
onesyTheme.id = value.id;
onesyTheme.subscriptions = value.subscriptions;
// Init
setValue(onesyTheme);
}
setInit(true);
}, []);
_react.default.useEffect(() => {
addCssVariablesMethod();
}, [refs.root.current, valueParent, value]);
_react.default.useEffect(() => {
if (init) {
var _refs$root;
value.update((0, _merge.default)(resolveValue((0, _is.default)('function', valueLocal) ? valueLocal(valueParent) : valueLocal), resolveValue(valueParent), {
copy: true
}));
const onesyTheme_0 = new _style.OnesyTheme(value, {
element: (_refs$root = refs.root) === null || _refs$root === void 0 ? void 0 : _refs$root.current
});
onesyTheme_0.id = value.id;
onesyTheme_0.subscriptions = value.subscriptions;
setValue(onesyTheme_0);
}
}, [hashValue(valueLocal), valueParent === null || valueParent === void 0 || (_valueParent$palette = valueParent.palette) === null || _valueParent$palette === void 0 ? void 0 : _valueParent$palette.light]);
const update = updateValue => {
if (updateValue !== undefined) {
var _refs$root2;
// Update
value.update(updateValue);
const onesyTheme_1 = new _style.OnesyTheme(value, {
element: ((_refs$root2 = refs.root) === null || _refs$root2 === void 0 ? void 0 : _refs$root2.current) || (0, _isEnvironment.default)('browser') && window.document.body
});
onesyTheme_1.id = value.id;
onesyTheme_1.subscriptions = value.subscriptions;
// Init
setValue(onesyTheme_1);
return value;
}
};
// Update method
value.updateWithRerender = update;
// locale method
value.l = value.l || l;
if (root) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Context.default.Provider, {
value: value,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
ref: item_15 => {
refs.root.current = item_15;
if (ref !== null && ref !== void 0 && ref.current) ref.current = item_15;
}
}, other), {}, {
id: refs.id,
className: (0, _style.classNames)(other === null || other === void 0 ? void 0 : other.className),
children: children
}))
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Context.default.Provider, {
value: value,
children: children
});
};
var _default = exports.default = Theme;