aesthetic-react/lib/index.js

React hooks, composers, and more for styling components with Aesthetic.

'use strict';

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

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var getDirection = _interopDefault(require('direction'));
var aesthetic = _interopDefault(require('aesthetic'));
var uuid = require('uuid');
var hoistNonReactStatics = _interopDefault(require('hoist-non-react-statics'));

var DirectionContext = React__default.createContext('ltr');

function DirectionProvider(_ref) {
  var children = _ref.children,
      dir = _ref.dir,
      inline = _ref.inline,
      value = _ref.value;
  var Tag = inline ? 'span' : 'div';
  var direction = dir || getDirection(value);

  if (!direction || direction === 'neutral') {
    direction = aesthetic.options.rtl ? 'rtl' : 'ltr';
  }

  return React__default.createElement(DirectionContext.Provider, {
    value: direction
  }, React__default.createElement(Tag, {
    dir: direction
  }, children));
}

var ThemeContext = React__default.createContext('');

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;
}

function _extends() {
  _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  return _extends.apply(this, arguments);
}

function _inheritsLoose(subClass, superClass) {
  subClass.prototype = Object.create(superClass.prototype);
  subClass.prototype.constructor = subClass;
  subClass.__proto__ = superClass;
}

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

function _assertThisInitialized(self) {
  if (self === void 0) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }

  return self;
}

var ThemeProvider = function (_React$PureComponent) {
  _inheritsLoose(ThemeProvider, _React$PureComponent);

  function ThemeProvider() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;

    _defineProperty(_assertThisInitialized(_this), "state", {
      themeName: _this.props.name || aesthetic.options.theme
    });

    return _this;
  }

  var _proto = ThemeProvider.prototype;

  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    var _this$props = this.props,
        name = _this$props.name,
        propagate = _this$props.propagate;

    if (name && name !== prevProps.name) {
      if (propagate) {
        aesthetic.changeTheme(name);
      }

      this.setState({
        themeName: name
      });
    }
  };

  _proto.render = function render() {
    return React__default.createElement(ThemeContext.Provider, {
      value: this.state.themeName
    }, this.props.children);
  };

  return ThemeProvider;
}(React__default.PureComponent);

var useSideEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
function useStyles(styleSheet, options) {
  if (options === void 0) {
    options = {};
  }

  var _options = options,
      customName = _options.styleName;
  var adapter = aesthetic.getAdapter();
  var ref = React.useRef();
  var dir = React.useContext(DirectionContext);
  var theme = React.useContext(ThemeContext);
  var name = '';

  if (ref.current) {
    name = ref.current;
  } else {
    name = customName || uuid.v4();
    ref.current = name;

    if (!aesthetic.styleSheets[name]) {
      aesthetic.registerStyleSheet(name, styleSheet);
    }
  }

  var _useState = React.useState(function () {
    if (process.env.NODE_ENV === 'test') {
      return adapter.createStyleSheet(name, {
        dir: dir,
        name: name,
        theme: theme
      });
    }

    return {};
  }),
      sheet = _useState[0],
      setSheet = _useState[1];

  useSideEffect(function () {
    setSheet(adapter.createStyleSheet(name, {
      dir: dir,
      name: name,
      theme: theme
    }));
    adapter.flushStyles(name);
  }, [dir, name, theme]);

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

    return adapter.transformStyles(styles, {
      dir: dir,
      name: name,
      theme: theme
    });
  };

  return [sheet, cx, name];
}

function useTheme() {
  var themeName = React.useContext(ThemeContext);
  return aesthetic.getTheme(themeName);
}

function withStyles(styleSheet, options) {
  if (options === void 0) {
    options = {};
  }

  var _options = options,
      _options$cxPropName = _options.cxPropName,
      cxPropName = _options$cxPropName === void 0 ? aesthetic.options.cxPropName : _options$cxPropName,
      _options$extendable = _options.extendable,
      extendable = _options$extendable === void 0 ? aesthetic.options.extendable : _options$extendable,
      _options$extendFrom = _options.extendFrom,
      extendFrom = _options$extendFrom === void 0 ? '' : _options$extendFrom,
      _options$passThemePro = _options.passThemeProp,
      passThemeProp = _options$passThemePro === void 0 ? aesthetic.options.passThemeProp : _options$passThemePro,
      _options$stylesPropNa = _options.stylesPropName,
      stylesPropName = _options$stylesPropNa === void 0 ? aesthetic.options.stylesPropName : _options$stylesPropNa,
      _options$themePropNam = _options.themePropName,
      themePropName = _options$themePropNam === void 0 ? aesthetic.options.themePropName : _options$themePropNam;
  return function withStylesComposer(WrappedComponent) {
    var baseName = WrappedComponent.displayName || WrappedComponent.name;
    var styleName = baseName + "-" + uuid.v4();
    aesthetic.registerStyleSheet(styleName, styleSheet, extendFrom);
    var WithStyles = React__default.memo(function WithStyles(_ref) {
      var _extraProps;

      var wrappedRef = _ref.wrappedRef,
          props = _objectWithoutPropertiesLoose(_ref, ["wrappedRef"]);

      var themeName = React.useContext(ThemeContext);

      var _useStyles = useStyles(styleSheet, {
        styleName: styleName
      }),
          styles = _useStyles[0],
          cx = _useStyles[1];

      var extraProps = (_extraProps = {}, _extraProps[cxPropName] = cx, _extraProps[stylesPropName] = styles, _extraProps.ref = wrappedRef, _extraProps);

      if (passThemeProp) {
        extraProps[themePropName] = aesthetic.getTheme(themeName);
      }

      return React__default.createElement(WrappedComponent, _extends({}, props, extraProps));
    });
    hoistNonReactStatics(WithStyles, WrappedComponent);
    WithStyles.displayName = "withStyles(" + baseName + ")";
    WithStyles.styleName = styleName;
    WithStyles.WrappedComponent = WrappedComponent;

    WithStyles.extendStyles = function (customStyleSheet, extendOptions) {
      if ("production" !== process.env.NODE_ENV) {
        if (!extendable) {
          throw new Error(baseName + " is not extendable.");
        }
      }

      return withStyles(customStyleSheet, _extends({}, options, {}, extendOptions, {
        extendFrom: styleName
      }))(WrappedComponent);
    };

    return WithStyles;
  };
}

function withTheme(options) {
  if (options === void 0) {
    options = {};
  }

  var _options = options,
      _options$themePropNam = _options.themePropName,
      themePropName = _options$themePropNam === void 0 ? aesthetic.options.themePropName : _options$themePropNam;
  return function withThemeComposer(WrappedComponent) {
    var baseName = WrappedComponent.displayName || WrappedComponent.name;

    function WithTheme(_ref) {
      var _extraProps;

      var wrappedRef = _ref.wrappedRef,
          props = _objectWithoutPropertiesLoose(_ref, ["wrappedRef"]);

      var themeName = React.useContext(ThemeContext);
      var extraProps = (_extraProps = {}, _extraProps[themePropName] = aesthetic.getTheme(themeName), _extraProps.ref = wrappedRef, _extraProps);
      return React__default.createElement(WrappedComponent, _extends({}, props, extraProps));
    }

    hoistNonReactStatics(WithTheme, WrappedComponent);
    WithTheme.displayName = "withTheme(" + baseName + ")";
    WithTheme.WrappedComponent = WrappedComponent;
    return WithTheme;
  };
}

exports.DirectionContext = DirectionContext;
exports.DirectionProvider = DirectionProvider;
exports.ThemeContext = ThemeContext;
exports.ThemeProvider = ThemeProvider;
exports.useStyles = useStyles;
exports.useTheme = useTheme;
exports.withStyles = withStyles;
exports.withTheme = withTheme;