aesthetic-react - npm Package Compare versions

Comparing version 1.0.0-alpha.2 to 1.0.0-alpha.3

esm/DirectionProvider.js

@@ -1,2 +0,1 @@
-import _pt from "prop-types";
 import React from 'react';
@@ -6,8 +5,14 @@ import getDirection from 'direction';
 export default function DirectionProvider(_ref) {
-  var children = _ref.children,
+  var aesthetic = _ref.aesthetic,
+      children = _ref.children,
       dir = _ref.dir,
       inline = _ref.inline,
       value = _ref.value;
-  var direction = dir || getDirection(value) || 'neutral';
   var Tag = inline ? 'span' : 'div';
+  var direction = dir || getDirection(value);
+
+  if (!direction || direction === 'neutral') {
+    direction = aesthetic.options.rtl ? 'rtl' : 'ltr';
+  }
+
   return React.createElement(DirectionContext.Provider, {
@@ -18,8 +23,2 @@ value: direction
   }, children));
-}
-DirectionProvider.propTypes = {
-  children: _pt.any.isRequired,
-  dir: _pt.any,
-  inline: _pt.bool,
-  value: _pt.string
-};
+}

esm/ThemeProvider.js

@@ -1,3 +0,1 @@
-import _pt from "prop-types";
-
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
@@ -77,8 +75,2 @@
 
-_defineProperty(ThemeProvider, "propTypes", {
-  aesthetic: _pt.any.isRequired,
-  children: _pt.any.isRequired,
-  name: _pt.any
-});
-
 export { ThemeProvider as default };

esm/withStylesFactory.js

@@ -0,5 +1,5 @@
+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 _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 _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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
@@ -16,2 +16,3 @@
 import DirectionContext from './DirectionContext';
+import ThemeContext from './ThemeContext';
 export default function withStylesFactory(aesthetic) {
@@ -47,23 +48,34 @@ return function withStyles(styleSheet, options) {
 
-        WithStyles.extendStyles = function extendStyles(customStyleSheet, extendOptions) {
-          if (extendOptions === void 0) {
-            extendOptions = {};
-          }
+        function WithStyles(props) {
+          var _this;
 
-          if ("production" !== process.env.NODE_ENV) {
-            if (!extendable) {
-              throw new Error(baseName + " is not extendable.");
+          _this = _Component.call(this, props) || this;
+
+          _defineProperty(_assertThisInitialized(_this), "createStyleSheet", function (mount) {
+            if (mount === void 0) {
+              mount = false;
             }
-          }
 
-          return withStyles(customStyleSheet, _extends({}, options, extendOptions, {
-            extendFrom: styleName
-          }))(WrappedComponent);
-        };
+            var dir = _this.props.dir;
+            var opts = {
+              name: styleName,
+              rtl: isRTL(dir)
+            };
+            var state = {
+              dir: dir,
+              options: opts,
+              styles: aesthetic.createStyleSheet(styleName, opts)
+            };
 
-        function WithStyles(props, dir) {
-          var _this;
+            if (mount) {
+              return state;
+            }
 
-          _this = _Component.call(this, props) || this;
+            _this.setState(state, function () {
+              aesthetic.flushStyles(styleName);
+            });
 
+            return state;
+          });
+
           _defineProperty(_assertThisInitialized(_this), "transformStyles", function () {
@@ -77,11 +89,3 @@ for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
 
-          var opts = {
-            name: styleName,
-            rtl: isRTL(dir)
-          };
-          _this.state = {
-            dir: dir,
-            options: opts,
-            styles: aesthetic.createStyleSheet(styleName, opts)
-          };
+          _this.state = _this.createStyleSheet(true);
           return _this;
@@ -96,17 +100,9 @@ }
 
-        _proto.componentDidUpdate = function componentDidUpdate() {
-          var dir = this.context;
+        _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+          var _this$props = this.props,
+              dir = _this$props.dir,
+              themeName = _this$props.themeName;
 
-          if (dir !== this.state.dir) {
-            var opts = {
-              name: styleName,
-              rtl: isRTL(dir)
-            };
-            this.setState({
-              dir: dir,
-              options: opts,
-              styles: aesthetic.createStyleSheet(styleName, opts)
-            }, function () {
-              aesthetic.flushStyles(styleName);
-            });
+          if (dir !== prevProps.dir || themeName !== prevProps.themeName) {
+            this.createStyleSheet();
           }
@@ -118,5 +114,7 @@ };
 
-          var _this$props = this.props,
-              wrappedRef = _this$props.wrappedRef,
-              props = _objectWithoutPropertiesLoose(_this$props, ["wrappedRef"]);
+          var _this$props2 = this.props,
+              dir = _this$props2.dir,
+              themeName = _this$props2.themeName,
+              wrappedRef = _this$props2.wrappedRef,
+              props = _objectWithoutPropertiesLoose(_this$props2, ["dir", "themeName", "wrappedRef"]);
 
@@ -135,14 +133,53 @@ var extraProps = (_extraProps = {}, _extraProps[cxPropName] = this.transformStyles, _extraProps[stylesPropName] = this.state.styles, _extraProps.ref = wrappedRef, _extraProps);
 
-      _defineProperty(WithStyles, "contextType", DirectionContext);
+      var WithStylesConsumer = function (_React$Component) {
+        _inheritsLoose(WithStylesConsumer, _React$Component);
 
-      _defineProperty(WithStyles, "displayName", "withStyles(" + baseName + ")");
+        function WithStylesConsumer() {
+          return _React$Component.apply(this, arguments) || this;
+        }
 
-      _defineProperty(WithStyles, "styleName", styleName);
+        WithStylesConsumer.extendStyles = function extendStyles(customStyleSheet, extendOptions) {
+          if (extendOptions === void 0) {
+            extendOptions = {};
+          }
 
-      _defineProperty(WithStyles, "WrappedComponent", WrappedComponent);
+          if ("production" !== process.env.NODE_ENV) {
+            if (!extendable) {
+              throw new Error(baseName + " is not extendable.");
+            }
+          }
 
-      hoistNonReactStatics(WithStyles, WrappedComponent);
-      return WithStyles;
+          return withStyles(customStyleSheet, _extends({}, options, extendOptions, {
+            extendFrom: styleName
+          }))(WrappedComponent);
+        };
+
+        var _proto2 = WithStylesConsumer.prototype;
+
+        _proto2.render = function render() {
+          var _this2 = this;
+
+          return React.createElement(ThemeContext.Consumer, null, function (theme) {
+            return React.createElement(DirectionContext.Consumer, null, function (dir) {
+              return React.createElement(WithStyles, _extends({}, _this2.props, {
+                dir: dir,
+                themeName: theme.themeName
+              }));
+            });
+          });
+        };
+
+        return WithStylesConsumer;
+      }(React.Component);
+
+      _defineProperty(WithStylesConsumer, "displayName", "withStyles(" + baseName + ")");
+
+      _defineProperty(WithStylesConsumer, "styleName", styleName);
+
+      _defineProperty(WithStylesConsumer, "WrappedComponent", WrappedComponent);
+
+      hoistNonReactStatics(WithStylesConsumer, WrappedComponent);
+      return WithStylesConsumer;
     };
   };
 }

lib/DirectionProvider.d.ts

@@ -1,9 +0,3 @@
-import React from 'react';
-import { Direction } from 'aesthetic';
-export interface DirectionProviderProps {
-    children: NonNullable<React.ReactNode>;
-    dir?: Exclude<Direction, 'neutral'>;
-    inline?: boolean;
-    value?: string;
-}
+/// <reference types="react" />
+import { DirectionProviderProps } from './types';
 /**
@@ -13,3 +7,3 @@ * Explicitly define a direction or automatically infer a direction based on a string of text.
  */
-export default function DirectionProvider({ children, dir, inline, value, }: DirectionProviderProps): JSX.Element;
+export default function DirectionProvider({ aesthetic, children, dir, inline, value, }: DirectionProviderProps): JSX.Element;
 //# sourceMappingURL=DirectionProvider.d.ts.map

lib/DirectionProvider.js

@@ -6,4 +6,2 @@ "use strict";
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
@@ -18,8 +16,14 @@
 function DirectionProvider(_ref) {
-  var children = _ref.children,
+  var aesthetic = _ref.aesthetic,
+      children = _ref.children,
       dir = _ref.dir,
       inline = _ref.inline,
       value = _ref.value;
-  var direction = dir || (0, _direction.default)(value) || 'neutral';
   var Tag = inline ? 'span' : 'div';
+  var direction = dir || (0, _direction.default)(value);
+
+  if (!direction || direction === 'neutral') {
+    direction = aesthetic.options.rtl ? 'rtl' : 'ltr';
+  }
+
   return _react.default.createElement(_DirectionContext.default.Provider, {
@@ -30,9 +34,2 @@ value: direction
   }, children));
-}
-
-DirectionProvider.propTypes = {
-  children: _propTypes.default.any.isRequired,
-  dir: _propTypes.default.any,
-  inline: _propTypes.default.bool,
-  value: _propTypes.default.string
-};
+}

lib/ThemeProvider.d.ts

 import React from 'react';
-import Aesthetic, { ThemeName } from 'aesthetic';
-import { ThemeContextShape } from './types';
-export interface ThemeProviderProps {
-    aesthetic: Aesthetic<any, any, any>;
-    children: NonNullable<React.ReactNode>;
-    name?: ThemeName;
-}
-export interface ThemeProviderState {
-    theme: ThemeName;
-}
+import { ThemeContextShape, ThemeProviderProps, ThemeProviderState } from './types';
 export default class ThemeProvider extends React.PureComponent<ThemeProviderProps, ThemeProviderState> {
@@ -13,0 +4,0 @@ ctx?: ThemeContextShape;

lib/ThemeProvider.js

@@ -6,4 +6,2 @@ "use strict";
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
@@ -86,8 +84,2 @@
 
-exports.default = ThemeProvider;
-
-_defineProperty(ThemeProvider, "propTypes", {
-  aesthetic: _propTypes.default.any.isRequired,
-  children: _propTypes.default.any.isRequired,
-  name: _propTypes.default.any
-});
+exports.default = ThemeProvider;

lib/types.d.ts

 import React from 'react';
-import { ClassNameTransformer, Direction, SheetMap, StyleName, StyleSheetDefinition, ThemeName, TransformOptions } from 'aesthetic';
+import Aesthetic, { ClassNameTransformer, Direction, SheetMap, StyleName, StyleSheetDefinition, ThemeName, TransformOptions } from 'aesthetic';
 import { Omit } from 'utility-types';
+export interface DirectionProviderProps {
+    aesthetic: Aesthetic<any, any, any>;
+    children: NonNullable<React.ReactNode>;
+    dir?: Exclude<Direction, 'neutral'>;
+    inline?: boolean;
+    value?: string;
+}
 export interface ThemeContextShape {
@@ -8,2 +15,10 @@ changeTheme: (theme: ThemeName) => void;
 }
+export interface ThemeProviderProps {
+    aesthetic: Aesthetic<any, any, any>;
+    children: NonNullable<React.ReactNode>;
+    name?: ThemeName;
+}
+export interface ThemeProviderState {
+    theme: ThemeName;
+}
 export interface WithThemeWrapperProps {
@@ -25,2 +40,6 @@ /** Gain a reference to the wrapped component. Provided by `withTheme`. */
 }
+export interface WithStylesContextProps {
+    dir: Direction;
+    themeName: ThemeName;
+}
 export interface WithStylesWrapperProps {
@@ -27,0 +46,0 @@ /** Gain a reference to the wrapped component. Provided by `withStyles`. */

lib/withStylesFactory.js

@@ -16,8 +16,10 @@ "use strict";
 
+var _ThemeContext = _interopRequireDefault(require("./ThemeContext"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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 _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 _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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
@@ -59,23 +61,34 @@
 
-        WithStyles.extendStyles = function extendStyles(customStyleSheet, extendOptions) {
-          if (extendOptions === void 0) {
-            extendOptions = {};
-          }
+        function WithStyles(props) {
+          var _this;
 
-          if ("production" !== process.env.NODE_ENV) {
-            if (!extendable) {
-              throw new Error(baseName + " is not extendable.");
+          _this = _Component.call(this, props) || this;
+
+          _defineProperty(_assertThisInitialized(_this), "createStyleSheet", function (mount) {
+            if (mount === void 0) {
+              mount = false;
             }
-          }
 
-          return withStyles(customStyleSheet, _extends({}, options, extendOptions, {
-            extendFrom: styleName
-          }))(WrappedComponent);
-        };
+            var dir = _this.props.dir;
+            var opts = {
+              name: styleName,
+              rtl: (0, _aestheticUtils.isRTL)(dir)
+            };
+            var state = {
+              dir: dir,
+              options: opts,
+              styles: aesthetic.createStyleSheet(styleName, opts)
+            };
 
-        function WithStyles(props, dir) {
-          var _this;
+            if (mount) {
+              return state;
+            }
 
-          _this = _Component.call(this, props) || this;
+            _this.setState(state, function () {
+              aesthetic.flushStyles(styleName);
+            });
 
+            return state;
+          });
+
           _defineProperty(_assertThisInitialized(_this), "transformStyles", function () {
@@ -89,11 +102,3 @@ for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
 
-          var opts = {
-            name: styleName,
-            rtl: (0, _aestheticUtils.isRTL)(dir)
-          };
-          _this.state = {
-            dir: dir,
-            options: opts,
-            styles: aesthetic.createStyleSheet(styleName, opts)
-          };
+          _this.state = _this.createStyleSheet(true);
           return _this;
@@ -108,17 +113,9 @@ }
 
-        _proto.componentDidUpdate = function componentDidUpdate() {
-          var dir = this.context;
+        _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+          var _this$props = this.props,
+              dir = _this$props.dir,
+              themeName = _this$props.themeName;
 
-          if (dir !== this.state.dir) {
-            var opts = {
-              name: styleName,
-              rtl: (0, _aestheticUtils.isRTL)(dir)
-            };
-            this.setState({
-              dir: dir,
-              options: opts,
-              styles: aesthetic.createStyleSheet(styleName, opts)
-            }, function () {
-              aesthetic.flushStyles(styleName);
-            });
+          if (dir !== prevProps.dir || themeName !== prevProps.themeName) {
+            this.createStyleSheet();
           }
@@ -130,5 +127,7 @@ };
 
-          var _this$props = this.props,
-              wrappedRef = _this$props.wrappedRef,
-              props = _objectWithoutPropertiesLoose(_this$props, ["wrappedRef"]);
+          var _this$props2 = this.props,
+              dir = _this$props2.dir,
+              themeName = _this$props2.themeName,
+              wrappedRef = _this$props2.wrappedRef,
+              props = _objectWithoutPropertiesLoose(_this$props2, ["dir", "themeName", "wrappedRef"]);
 
@@ -147,14 +146,53 @@ var extraProps = (_extraProps = {}, _extraProps[cxPropName] = this.transformStyles, _extraProps[stylesPropName] = this.state.styles, _extraProps.ref = wrappedRef, _extraProps);
 
-      _defineProperty(WithStyles, "contextType", _DirectionContext.default);
+      var WithStylesConsumer = function (_React$Component) {
+        _inheritsLoose(WithStylesConsumer, _React$Component);
 
-      _defineProperty(WithStyles, "displayName", "withStyles(" + baseName + ")");
+        function WithStylesConsumer() {
+          return _React$Component.apply(this, arguments) || this;
+        }
 
-      _defineProperty(WithStyles, "styleName", styleName);
+        WithStylesConsumer.extendStyles = function extendStyles(customStyleSheet, extendOptions) {
+          if (extendOptions === void 0) {
+            extendOptions = {};
+          }
 
-      _defineProperty(WithStyles, "WrappedComponent", WrappedComponent);
+          if ("production" !== process.env.NODE_ENV) {
+            if (!extendable) {
+              throw new Error(baseName + " is not extendable.");
+            }
+          }
 
-      (0, _hoistNonReactStatics.default)(WithStyles, WrappedComponent);
-      return WithStyles;
+          return withStyles(customStyleSheet, _extends({}, options, extendOptions, {
+            extendFrom: styleName
+          }))(WrappedComponent);
+        };
+
+        var _proto2 = WithStylesConsumer.prototype;
+
+        _proto2.render = function render() {
+          var _this2 = this;
+
+          return _react.default.createElement(_ThemeContext.default.Consumer, null, function (theme) {
+            return _react.default.createElement(_DirectionContext.default.Consumer, null, function (dir) {
+              return _react.default.createElement(WithStyles, _extends({}, _this2.props, {
+                dir: dir,
+                themeName: theme.themeName
+              }));
+            });
+          });
+        };
+
+        return WithStylesConsumer;
+      }(_react.default.Component);
+
+      _defineProperty(WithStylesConsumer, "displayName", "withStyles(" + baseName + ")");
+
+      _defineProperty(WithStylesConsumer, "styleName", styleName);
+
+      _defineProperty(WithStylesConsumer, "WrappedComponent", WrappedComponent);
+
+      (0, _hoistNonReactStatics.default)(WithStylesConsumer, WrappedComponent);
+      return WithStylesConsumer;
     };
   };
 }

package.json

 {
   "name": "aesthetic-react",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.3",
   "description": "React hooks, composers, and more for styling components with Aesthetic.",
@@ -24,3 +24,3 @@ "keywords": [
     "@types/react": "*",
-    "aesthetic-utils": "^2.0.0-alpha.1",
+    "aesthetic-utils": "^2.0.0-alpha.2",
     "direction": "^1.0.3",
@@ -43,3 +43,3 @@ "hoist-non-react-statics": "^3.3.0",
   },
-  "gitHead": "b86eeb31550445983a67cd9e59fa17c257d85707"
+  "gitHead": "1beab3706615f06dc77be1b68c446fd84e2ceb64"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

52291

increased by4.69%

Lines of code

823

increased by5.11%

Dependency changes

• Updatedaesthetic-utils@^2.0.0-alpha.2