@onesy/style-react
Version:
Onesy CSS in JS styling solution for React
141 lines (140 loc) • 6.84 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.propsAreNew = void 0;
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 propsAreNew = (props) => props && Object.keys(props).reduce((result, item) => result += item + String(props[item]), '');
exports.propsAreNew = propsAreNew;
function style(value, options_ = {}, responses_) {
const responses = responses_ || [];
const { name, remove } = options_;
function useStyle(props_) {
const onesyStyle = (0, _1.useOnesyStyle)();
const onesyTheme = (0, _1.useOnesyTheme)();
const refs = {
update: react_1.default.useRef(undefined),
remove: react_1.default.useRef(remove),
onesyStyle: react_1.default.useRef(onesyStyle),
onesyTheme: react_1.default.useRef(onesyTheme)
};
refs.onesyStyle.current = onesyStyle;
refs.onesyTheme.current = onesyTheme;
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.style)(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;
// If in the iframe
// don't remove the elements by default
const toRemove = refs.remove.current !== undefined ? refs.remove.current : refs.onesyStyle.current.remove !== undefined ? refs.onesyStyle.current.remove : true;
// Remove
if (toRemove)
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 (toRemove && !((_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, exports.propsAreNew)(props)]);
return values;
}
return useStyle;
}
exports.default = style;