@dyst/native/dist/index.js

Dynamic Css-in-Js styles engine, based on Emotion for React-Native

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var native = require('@emotion/native');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

class NativeStyleSheet {
  constructor() {
    var _config$key;

    var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

    _defineProperty(this, "useTheme", void 0);

    _defineProperty(this, "key", void 0);

    this.key = (_config$key = config.key) !== null && _config$key !== void 0 ? _config$key : 'dystn';
    this.useTheme = typeof config.theme !== 'function' ? () => config.theme || {} : config.theme;
  }

  withParams() {
    return {
      create: styles => this.createStyles(true, styles)
    };
  }

  withoutParams() {
    return {
      create: styles => this.createStyles(false, styles)
    };
  }

  create(styles) {
    return this.createStyles(true, styles);
  }

  createStyles(withParams, styles) {
    var _this = this;

    var getStyles = typeof styles === 'function' ? styles : () => styles;
    return function () {
      var _config$styles;

      var paramsOrConfig = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
      var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

      var _config = withParams ? config : paramsOrConfig;

      var _params = withParams ? paramsOrConfig : undefined;

      var expandedStyles = (_config$styles = _config.styles) !== null && _config$styles !== void 0 ? _config$styles : {};
      var name = _config.name;

      var theme = _this.useTheme();

      var getStylesConfig = withParams ? {
        theme,
        params: _params
      } : {
        theme
      };

      var _styles = getStyles(getStylesConfig);

      var _expandedStyles = typeof expandedStyles === 'function' ? expandedStyles(theme) : expandedStyles;

      return React__default["default"].useMemo(() => {
        var styles = {};

        for (var key of Object.keys(_styles)) {
          styles[key] = [typeof _styles[key] !== 'string' ? native.css(_styles[key]) : _styles[key]];

          if (_expandedStyles[key] != null) {
            styles[key].push(typeof _expandedStyles[key] !== 'string' ? native.css(_expandedStyles[key]) : _expandedStyles[key]);
          }
        }

        return {
          styles,
          theme,
          cx: function cx() {
            for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
              args[_key] = arguments[_key];
            }

            return args.map(value => typeof value !== 'string' ? native.css(value) : value);
          }
        };
      }, [_styles, _expandedStyles, name]);
    };
  }

}

function createStyleSheet() {
  var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  return new NativeStyleSheet(config);
}

exports.NativeStyleSheet = NativeStyleSheet;
exports.createStyleSheet = createStyleSheet;
//# sourceMappingURL=index.js.map