@dyst/native/dist/esm/NativeStyleSheet.js

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

import React from 'react';
import { css } from '@emotion/native';

class NativeStyleSheet {
  constructor(config = {}) {
    var _a;
    this.key = (_a = config.key) != null ? _a : "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) {
    const getStyles = typeof styles === "function" ? styles : () => styles;
    return (paramsOrConfig = {}, config = {}) => {
      var _a;
      const _config = withParams ? config : paramsOrConfig;
      const _params = withParams ? paramsOrConfig : void 0;
      const expandedStyles = (_a = _config.styles) != null ? _a : {};
      const name = _config.name;
      const theme = this.useTheme();
      const getStylesConfig = withParams ? { theme, params: _params } : { theme };
      const _styles = getStyles(getStylesConfig);
      const _expandedStyles = typeof expandedStyles === "function" ? expandedStyles(theme) : expandedStyles;
      return React.useMemo(() => {
        const styles2 = {};
        for (const key of Object.keys(_styles)) {
          styles2[key] = [
            typeof _styles[key] !== "string" ? css(_styles[key]) : _styles[key]
          ];
          if (_expandedStyles[key] != null) {
            styles2[key].push(typeof _expandedStyles[key] !== "string" ? css(_expandedStyles[key]) : _expandedStyles[key]);
          }
        }
        return {
          styles: styles2,
          theme,
          cx: (...args) => args.map((value) => typeof value !== "string" ? css(value) : value)
        };
      }, [_styles, _expandedStyles, name]);
    };
  }
}

export { NativeStyleSheet };