@onesy/style-react/style.js

Onesy CSS in JS styling solution for React

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = style;
exports.propsAreNew = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _is = _interopRequireDefault(require("@onesy/utils/is"));
var _merge = _interopRequireDefault(require("@onesy/utils/merge"));
var _style = require("@onesy/style");
var _ = require("./");
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 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, _.useOnesyStyle)();
    const onesyTheme = (0, _.useOnesyTheme)();
    const refs = {
      update: _react.default.useRef(undefined),
      remove: _react.default.useRef(remove),
      onesyStyle: _react.default.useRef(onesyStyle),
      onesyTheme: _react.default.useRef(onesyTheme)
    };
    refs.onesyStyle.current = onesyStyle;
    refs.onesyTheme.current = onesyTheme;
    const resolve = (theme = onesyTheme) => {
      var _onesyTheme$ui;
      let valueNew = value;
      if ((0, _is.default)('function', value)) valueNew = value(theme);

      // Add style add & overrides
      if ((_onesyTheme$ui = onesyTheme.ui) !== null && _onesyTheme$ui !== void 0 && (_onesyTheme$ui = _onesyTheme$ui.elements) !== null && _onesyTheme$ui !== void 0 && (_onesyTheme$ui = _onesyTheme$ui[name]) !== null && _onesyTheme$ui !== void 0 && _onesyTheme$ui.style) {
        const {
          add,
          override
        } = onesyTheme.ui.elements[name].style;

        // Add
        if (add) {
          const object = (0, _is.default)('function', add) ? add(theme) : add;
          valueNew = (0, _merge.default)(object, valueNew, {
            copy: true
          });
        }

        // Override
        if (override) {
          const object_0 = (0, _is.default)('function', override) ? override(theme) : override;
          valueNew = _objectSpread(_objectSpread({}, valueNew), object_0);
        }
      }
      return valueNew;
    };

    // Updates for onesyTheme
    const method = (updateValue, updatedTheme) => {
      if ((0, _is.default)('function', value)) {
        const valueNew_0 = resolve(updatedTheme);

        // Update
        if ((response === null || response === void 0 ? void 0 : response.update) !== undefined) response.update(valueNew_0);
      }
    };
    const makeResponse = () => {
      // Object
      let response_ = (0, _is.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.style)(resolve(), (0, _merge.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.default.useState(makeResponse())[0];
    let props = props_;
    if ((0, _is.default)('object', props)) {
      const newProps = {};
      const allowed = Object.keys(props).filter(prop => (0, _is.default)('array', props[prop]) ? !props[prop].some(item_0 => /*#__PURE__*/_react.default.isValidElement(item_0)) : ! /*#__PURE__*/_react.default.isValidElement(props[prop]));
      allowed.forEach(prop_0 => newProps[prop_0] = props[prop_0]);
      props = newProps;
    }
    const [values, setValues] = _react.default.useState(() => response.add(props));

    // Add
    _react.default.useEffect(() => {
      if (!values || ['refresh'].includes(refs.update.current)) setValues(() => {
        refs.update.current = undefined;
        return response.add(props);
      });

      // Clean up
      return () => {
        var _values$ids, _response$onesy_style;
        // 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 || response.remove(values === null || values === void 0 || (_values$ids = values.ids) === null || _values$ids === void 0 ? void 0 : _values$ids.dynamic);

        // Refresh
        refs.update.current = 'refresh';

        // Remove response from the responses
        // if users is 0 in onesyStyleSheetManager
        if (toRemove && !(response !== null && response !== void 0 && (_response$onesy_style = response.onesy_style_sheet_manager) !== null && _response$onesy_style !== void 0 && _response$onesy_style.users)) {
          const index = responses.findIndex(item_1 => item_1.onesyTheme.id === onesyTheme.id);
          if (index > -1) {
            responses.splice(index, 1);

            // Unsubscribe
            if (onesyTheme) onesyTheme.subscriptions.update.unsubscribe(method);
          }
        }
      };
    }, []);

    // Update props
    _react.default.useEffect(() => {
      if (response !== undefined && values !== null && values !== void 0 && values.ids) response.props = {
        ids: values.ids.dynamic,
        props
      };
      // Only 1 lvl of values
    }, [propsAreNew(props)]);
    return values;
  }
  return useStyle;
}