@onesy/style-react
Version:
Onesy CSS in JS styling solution for React
199 lines (184 loc) • 8.48 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
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) { _defineProperty(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; }
import React from 'react';
import is from '@onesy/utils/is';
import merge from '@onesy/utils/merge';
import hash from '@onesy/utils/hash';
import isEnvironment from '@onesy/utils/isEnvironment';
import { OnesyTheme, classNames } from '@onesy/style';
import ThemeContext from './Context';
import useOnesyTheme from './useOnesyTheme';
import { jsx as _jsx } from "react/jsx-runtime";
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 hash(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 => {
const [init, setInit] = React.useState(false);
const {
ref,
root = false,
value: valueLocal = {},
addCssVariables = true,
children
} = props,
other = _objectWithoutProperties(props, _excluded);
const refs = {
root: React.useRef(undefined),
init: React.useRef(undefined),
id: React.useId(),
styleSheet: React.useRef(undefined)
};
refs.init.current = init;
const valueParent = useOnesyTheme() || {};
const [value, setValue] = React.useState(() => new OnesyTheme(merge(resolveValue(is('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 => {
const itemValue = value.palette.color[item]?.main || value.palette.color[item]?.[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.useEffect(() => {
if (refs.root.current) {
const onesyTheme = new OnesyTheme(value, {
element: refs.root.current
});
onesyTheme.id = value.id;
onesyTheme.subscriptions = value.subscriptions;
// Init
setValue(onesyTheme);
}
setInit(true);
}, []);
React.useEffect(() => {
addCssVariablesMethod();
}, [refs.root.current, valueParent, value]);
React.useEffect(() => {
if (init) {
value.update(merge(resolveValue(is('function', valueLocal) ? valueLocal(valueParent) : valueLocal), resolveValue(valueParent), {
copy: true
}));
const onesyTheme_0 = new OnesyTheme(value, {
element: refs.root?.current
});
onesyTheme_0.id = value.id;
onesyTheme_0.subscriptions = value.subscriptions;
setValue(onesyTheme_0);
}
}, [hashValue(valueLocal), valueParent?.palette?.light]);
const update = updateValue => {
if (updateValue !== undefined) {
// Update
value.update(updateValue);
const onesyTheme_1 = new OnesyTheme(value, {
element: refs.root?.current || isEnvironment('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__*/_jsx(ThemeContext.Provider, {
value: value,
children: /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
ref: item_15 => {
refs.root.current = item_15;
if (ref?.current) ref.current = item_15;
}
}, other), {}, {
id: refs.id,
className: classNames(other?.className),
children: children
}))
});
}
return /*#__PURE__*/_jsx(ThemeContext.Provider, {
value: value,
children: children
});
};
export default Theme;