@onesy/style-react/pure.js

Onesy CSS in JS styling solution for React

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const is_1 = __importDefault(require("@onesy/utils/is"));
const merge_1 = __importDefault(require("@onesy/utils/merge"));
const style_1 = require("@onesy/style");
const _1 = require(".");
const style_2 = require("./style");
function pure(value, options_ = {}) {
    const responses = [];
    const { name } = options_;
    function usePure(props_) {
        const onesyStyle = (0, _1.useOnesyStyle)();
        const onesyTheme = (0, _1.useOnesyTheme)();
        const refs = {
            update: react_1.default.useRef(undefined)
        };
        const resolve = (theme = onesyTheme) => {
            var _a, _b, _c;
            let valueNew = value;
            if ((0, is_1.default)('function', value))
                valueNew = value(theme);
            // Add style add & overrides
            if ((_c = (_b = (_a = onesyTheme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b[name]) === null || _c === void 0 ? void 0 : _c.style) {
                const { add, override } = onesyTheme.ui.elements[name].style;
                // Add
                if (add) {
                    const object = (0, is_1.default)('function', add) ? add(theme) : add;
                    valueNew = (0, merge_1.default)(object, valueNew, { copy: true });
                }
                // Override
                if (override) {
                    const object = (0, is_1.default)('function', override) ? override(theme) : override;
                    valueNew = Object.assign(Object.assign({}, valueNew), object);
                }
            }
            return valueNew;
        };
        // Updates for onesyTheme
        const method = react_1.default.useCallback((updateValue, updatedTheme) => {
            if ((0, is_1.default)('function', value)) {
                const valueNew = resolve(updatedTheme);
                // Update
                if ((response === null || response === void 0 ? void 0 : response.update) !== undefined)
                    response.update(valueNew);
            }
        }, []);
        const makeResponse = () => {
            // Object
            let response_ = (0, is_1.default)('object', value) && responses[0];
            if (response_)
                return response_;
            // Method
            // If it's a new instance of onesyTheme
            // make a new responses with it
            response_ = responses.find((item) => item.onesyTheme.id === onesyTheme.id);
            if (response_)
                return response_;
            // If there's not add a new response and use it
            const options = {
                onesy_style: { value: undefined },
                onesy_theme: { value: undefined },
            };
            // OnesyStyle
            if (onesyStyle !== undefined)
                options.onesy_style.value = onesyStyle;
            // OnesyTheme
            if (onesyTheme !== undefined)
                options.onesy_theme.value = onesyTheme;
            response_ = (0, style_1.pure)(resolve(), (0, merge_1.default)(options, options_, { copy: true }));
            // Add the onesyTheme to the response_
            response_.onesyTheme = onesyTheme;
            // Add value to the responses
            responses.push(response_);
            // Update
            if (onesyTheme)
                onesyTheme.subscriptions.update.subscribe(method);
            return response_;
        };
        const response = react_1.default.useState(makeResponse())[0];
        let props = props_;
        if ((0, is_1.default)('object', props)) {
            const newProps = {};
            const allowed = Object.keys(props).filter((prop) => (0, is_1.default)('array', props[prop]) ? !(props[prop].some((item) => react_1.default.isValidElement(item))) : !react_1.default.isValidElement(props[prop]));
            allowed.forEach((prop) => newProps[prop] = props[prop]);
            props = newProps;
        }
        const [values, setValues] = react_1.default.useState(() => response.add(props));
        // Add
        react_1.default.useEffect(() => {
            if (!values || ['refresh'].includes(refs.update.current))
                setValues(() => {
                    refs.update.current = undefined;
                    return response.add(props);
                });
            // Clean up
            return () => {
                var _a, _b;
                // Remove
                response === null || response === void 0 ? void 0 : response.remove((_a = values === null || values === void 0 ? void 0 : values.ids) === null || _a === void 0 ? void 0 : _a.dynamic);
                // Refresh
                refs.update.current = 'refresh';
                // Remove response from the responses
                // if users is 0 in onesyStyleSheetManager
                if (!((_b = response === null || response === void 0 ? void 0 : response.onesy_style_sheet_manager) === null || _b === void 0 ? void 0 : _b.users)) {
                    const index = responses.findIndex((item) => item.onesyTheme.id === onesyTheme.id);
                    if (index > -1) {
                        responses.splice(index, 1);
                        // Unsubscribe
                        if (onesyTheme)
                            onesyTheme.subscriptions.update.unsubscribe(method);
                    }
                }
            };
        }, []);
        // Update props
        react_1.default.useEffect(() => {
            if (response !== undefined && (values === null || values === void 0 ? void 0 : values.ids))
                response.props = { ids: values.ids.dynamic, props };
            // Only 1 lvl of values
        }, [(0, style_2.propsAreNew)(props)]);
        return values;
    }
    return usePure;
}
exports.default = pure;