@onesy/style-react/ThemeProvider/Theme.js

Onesy CSS in JS styling solution for React

"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const is_1 = __importDefault(require("@onesy/utils/is"));
const merge_1 = __importDefault(require("@onesy/utils/merge"));
const hash_1 = __importDefault(require("@onesy/utils/hash"));
const isEnvironment_1 = __importDefault(require("@onesy/utils/isEnvironment"));
const style_1 = require("@onesy/style");
const Context_1 = __importDefault(require("./Context"));
const useOnesyTheme_1 = __importDefault(require("./useOnesyTheme"));
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_1.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 = react_1.default.forwardRef((props, ref) => {
    var _a;
    const [init, setInit] = react_1.default.useState(false);
    const { root = false, value: valueLocal = {}, addCssVariables = true, children } = props, other = __rest(props, ["root", "value", "addCssVariables", "children"]);
    const refs = {
        root: react_1.default.useRef(undefined),
        init: react_1.default.useRef(undefined),
        id: react_1.default.useId(),
        styleSheet: react_1.default.useRef(undefined)
    };
    refs.init.current = init;
    const valueParent = (0, useOnesyTheme_1.default)() || {};
    const [value, setValue] = react_1.default.useState(() => new style_1.OnesyTheme((0, merge_1.default)(resolveValue((0, is_1.default)('function', valueLocal) ? valueLocal(valueParent) : valueLocal), resolveValue(valueParent), { copy: true })));
    const addCssVariablesMethod = react_1.default.useCallback(() => {
        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 => {
            Object.keys(value.palette.color[item]).forEach(itemValue => {
                values.push(`--${prefix}-palette-color-${item}-${itemValue}: ${value.palette.color[item][itemValue]}`);
            });
        });
        // Text
        Object.keys(value.palette.text).filter(item => !['active', 'divider', 'disabled', 'hover', 'focus', 'selected'].includes(item)).forEach(item => {
            Object.keys(value.palette.text[item]).forEach(itemValue => {
                values.push(`--${prefix}-palette-text-${item}-${itemValue}: ${value.palette.text[item][itemValue]}`);
            });
        });
        Object.keys(value.palette.text).filter(item => ['active', 'divider', 'disabled', 'hover', 'focus', 'selected'].includes(item)).forEach(item => {
            values.push(`--${prefix}-palette-text-${item}: ${value.palette.text[item]}`);
        });
        // Background
        Object.keys(value.palette.background).forEach(item => {
            Object.keys(value.palette.background[item]).forEach(itemValue => {
                values.push(`--${prefix}-palette-background-${item}-${itemValue}: ${value.palette.background[item][itemValue]}`);
            });
        });
        // 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 => {
            values.push(`--${prefix}-shape-radius-values-${item}: ${value.shape.radius.values[item]}`);
        });
        // Space
        values.push(`--${prefix}-space-unit: ${value.space.unit}`);
        Object.keys(value.space.values).forEach(item => {
            values.push(`--${prefix}-space-values-${item}: ${value.space.values[item]}`);
        });
        // Shadows
        Object.keys(value.shadows.values).forEach(item => {
            Object.keys(value.shadows.values[item]).forEach(itemValue => {
                values.push(`--${prefix}-shadows-${item}-${itemValue}: ${value.shadows.values[item][itemValue]}`);
            });
        });
        // Typography
        Object.keys(value.typography.font_family).forEach(item => values.push(`--${prefix}-typography-font-family-${item}: ${value.typography.font_family[item]}`));
        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 => values.push(`--${prefix}-transitions-duration-${item}: ${value.transitions.duration[item]}`));
        Object.keys(value.transitions.timing_function).forEach(item => values.push(`--${prefix}-transitions-timing-function-${item}: ${value.transitions.timing_function[item]}`));
        // zIndex
        Object.keys(value.z_index).forEach(item => values.push(`--${prefix}-z-index-${item}: ${value.z_index[item]}`));
        // Add to styleSheet innerHTML
        refs.styleSheet.current.innerHTML = `
${refs.root.current ? `#${refs.id}` : ':root'} {
${values.map(item => `\t${item};`).join('\n')}
}
`;
    }, [value]);
    react_1.default.useEffect(() => {
        if (refs.root.current) {
            const onesyTheme = new style_1.OnesyTheme(value, { element: refs.root.current });
            onesyTheme.id = value.id;
            onesyTheme.subscriptions = value.subscriptions;
            // Init
            setValue(onesyTheme);
        }
        setInit(true);
    }, []);
    react_1.default.useEffect(() => {
        addCssVariablesMethod();
    }, [refs.root.current, valueParent, value]);
    react_1.default.useEffect(() => {
        var _a;
        if (init) {
            value.update((0, merge_1.default)(resolveValue((0, is_1.default)('function', valueLocal) ? valueLocal(valueParent) : valueLocal), resolveValue(valueParent), { copy: true }));
            const onesyTheme = new style_1.OnesyTheme(value, { element: (_a = refs.root) === null || _a === void 0 ? void 0 : _a.current });
            onesyTheme.id = value.id;
            onesyTheme.subscriptions = value.subscriptions;
            setValue(onesyTheme);
        }
    }, [hashValue(valueLocal), (_a = valueParent === null || valueParent === void 0 ? void 0 : valueParent.palette) === null || _a === void 0 ? void 0 : _a.light]);
    const update = (updateValue) => {
        var _a;
        if (updateValue !== undefined) {
            // Update
            value.update(updateValue);
            const onesyTheme = new style_1.OnesyTheme(value, { element: ((_a = refs.root) === null || _a === void 0 ? void 0 : _a.current) || ((0, isEnvironment_1.default)('browser') && window.document.body) });
            onesyTheme.id = value.id;
            onesyTheme.subscriptions = value.subscriptions;
            // Init
            setValue(onesyTheme);
            return value;
        }
    };
    // Update method
    value.updateWithRerender = update;
    // locale method
    value.l = value.l || l;
    if (root) {
        return ((0, jsx_runtime_1.jsx)(Context_1.default.Provider, Object.assign({ value: value }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ ref: (item) => {
                    refs.root.current = item;
                    if (ref === null || ref === void 0 ? void 0 : ref.current)
                        ref.current = item;
                } }, other, { id: refs.id, className: (0, style_1.classNames)(other === null || other === void 0 ? void 0 : other.className) }, { children: children })) })));
    }
    return ((0, jsx_runtime_1.jsx)(Context_1.default.Provider, Object.assign({ value: value }, { children: children })));
});
exports.default = Theme;