aesthetic - npm Package Compare versions

Comparing version 2.2.4 to 2.3.0

CHANGELOG.md

@@ -0,1 +1,8 @@
+# 2.3.0 - 04/17/18
+#### 🚀 New
+* Added a `wrappedRef` prop to access the underlying wrapped component.
+
+#### 🐞 Fixed
+* Fixed an issue in which styles would transform infinitely on update.
+
 # 2.2.4 - 04/16/18
@@ -2,0 +9,0 @@ #### 🐞 Fixed

esm/style.js

@@ -82,9 +82,11 @@ import _extends from 'babel-runtime/helpers/extends';
         key: 'componentDidUpdate',
-        value: function componentDidUpdate() {
-          this.transformStyles();
+        value: function componentDidUpdate(prevProps) {
+          if (this.getThemeName(this.props) !== this.getThemeName(prevProps)) {
+            this.transformStyles();
+          }
         }
       }, {
         key: 'getThemeName',
-        value: function getThemeName() {
-          return this.props.themeName || this.context.themeName || aesthetic.options.defaultTheme || '';
+        value: function getThemeName(props) {
+          return props.themeName || this.context.themeName || aesthetic.options.defaultTheme || '';
         }
@@ -94,3 +96,3 @@ }, {
         value: function transformStyles() {
-          var themeName = this.getThemeName();
+          var themeName = this.getThemeName(this.props);
 
@@ -112,3 +114,11 @@ if (this.state.firstMount || themeName !== this.state.themeName) {
 
-          return React.createElement(Component, _extends({}, this.props, state));
+          var _props = this.props,
+              wrappedRef = _props.wrappedRef,
+              props = _objectWithoutProperties(_props, ['wrappedRef']);
+
+          if (wrappedRef) {
+            props.ref = wrappedRef;
+          }
+
+          return React.createElement(Component, _extends({}, props, state));
         }
@@ -143,6 +153,8 @@ }], [{
     StyledComponent.propTypes = {
-      themeName: PropTypes.string
+      themeName: PropTypes.string,
+      wrappedRef: PropTypes.func
     };
     StyledComponent.defaultProps = {
-      themeName: ''
+      themeName: '',
+      wrappedRef: null
     };
@@ -149,0 +161,0 @@

lib/style.js

@@ -124,9 +124,11 @@ 'use strict';
         key: 'componentDidUpdate',
-        value: function componentDidUpdate() {
-          this.transformStyles();
+        value: function componentDidUpdate(prevProps) {
+          if (this.getThemeName(this.props) !== this.getThemeName(prevProps)) {
+            this.transformStyles();
+          }
         }
       }, {
         key: 'getThemeName',
-        value: function getThemeName() {
-          return this.props.themeName || this.context.themeName || aesthetic.options.defaultTheme || '';
+        value: function getThemeName(props) {
+          return props.themeName || this.context.themeName || aesthetic.options.defaultTheme || '';
         }
@@ -136,3 +138,3 @@ }, {
         value: function transformStyles() {
-          var themeName = this.getThemeName();
+          var themeName = this.getThemeName(this.props);
 
@@ -153,5 +155,12 @@ if (this.state.firstMount || themeName !== this.state.themeName) {
               state = (0, _objectWithoutProperties3.default)(_state, ['firstMount']);
+          var _props = this.props,
+              wrappedRef = _props.wrappedRef,
+              props = (0, _objectWithoutProperties3.default)(_props, ['wrappedRef']);
 
 
-          return _react2.default.createElement(Component, (0, _extends3.default)({}, this.props, state));
+          if (wrappedRef) {
+            props.ref = wrappedRef;
+          }
+
+          return _react2.default.createElement(Component, (0, _extends3.default)({}, props, state));
         }
@@ -185,6 +194,8 @@ }], [{
     StyledComponent.propTypes = {
-      themeName: _propTypes2.default.string
+      themeName: _propTypes2.default.string,
+      wrappedRef: _propTypes2.default.func
     };
     StyledComponent.defaultProps = {
-      themeName: ''
+      themeName: '',
+      wrappedRef: null
     };
@@ -191,0 +202,0 @@

package.json

 {
   "name": "aesthetic",
-  "version": "2.2.4",
+  "version": "2.3.0",
   "description": "Aesthetic is a powerful React library for styling components through the use of adapters.",
@@ -5,0 +5,0 @@ "keywords": [

src/style.js

@@ -24,2 +24,3 @@ /**
   themeName: string,
+  wrappedRef: ?React$Ref<React$ElementType>,
 };
@@ -99,2 +100,3 @@
         themeName: PropTypes.string,
+        wrappedRef: PropTypes.func,
       };
@@ -104,2 +106,3 @@
         themeName: '',
+        wrappedRef: null,
       };
@@ -136,8 +139,10 @@
 
-      componentDidUpdate() {
-        this.transformStyles();
+      componentDidUpdate(prevProps: StyleProps) {
+        if (this.getThemeName(this.props) !== this.getThemeName(prevProps)) {
+          this.transformStyles();
+        }
       }
 
-      getThemeName(): string {
-        return this.props.themeName ||
+      getThemeName(props: StyleProps): string {
+        return props.themeName ||
           this.context.themeName ||
@@ -149,3 +154,3 @@ aesthetic.options.defaultTheme ||
       transformStyles() {
-        const themeName = this.getThemeName();
+        const themeName = this.getThemeName(this.props);
 
@@ -164,4 +169,10 @@ if (this.state.firstMount || themeName !== this.state.themeName) {
         const { firstMount, ...state } = this.state;
+        const { wrappedRef, ...props } = this.props;
 
-        return <Component {...this.props} {...state} />;
+        if (wrappedRef) {
+          // $FlowIgnore
+          props.ref = wrappedRef;
+        }
+
+        return <Component {...props} {...state} />;
       }
@@ -168,0 +179,0 @@ }

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

114781

increased by1.23%

Lines of code

2713

increased by1.12%

No dependency changes