react-css-collapse - npm Package Compare versions

Comparing version 3.6.1 to 4.0.0

CHANGELOG.md

 # Changelog
 
+# 4.0.0
+> Desember 31, 2019
+* :boom: **Breaking** Upgraded React peerDependencies to >= 16.8
+* :nut_and_bolt: **New** Added new hook useCollapse
+* :nut_and_bolt: **New** Updated Collapse to use new hook.
+* :tada: **Enhancement** Add dynamic content to storybook example
+* :tada: **Enhancement** Update prettier and eslint setup
+
+# 3.6.1
+> October 11, 2019
+* :tada: **Enhancement** Migrate away from unsafe `componentWillReceiveProps`
+
 # 3.6.1-beta.0
@@ -4,0 +16,0 @@ > October 8, 2019

lib/components/Collapse.js

@@ -9,4 +9,2 @@ 'use strict';
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
 var _react = require('react');
@@ -20,5 +18,5 @@
 
-var _util = require('../util');
+var _useCollapse2 = require('./useCollapse');
 
-var _util2 = _interopRequireDefault(_util);
+var _useCollapse3 = _interopRequireDefault(_useCollapse2);
 
@@ -29,151 +27,45 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var Collapse = function Collapse(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      isOpen = _ref.isOpen,
+      transition = _ref.transition,
+      onRest = _ref.onRest,
+      attrs = _objectWithoutProperties(_ref, ['children', 'className', 'isOpen', 'transition', 'onRest']);
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+  var content = (0, _react.useRef)();
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+  var _useCollapse = (0, _useCollapse3.default)({
+    isOpen: isOpen,
+    content: content
+  }),
+      setIsExpandedStyle = _useCollapse.setIsExpandedStyle,
+      setIsCollapsedStyle = _useCollapse.setIsCollapsedStyle,
+      style = _useCollapse.style;
 
-var Collapse = function (_PureComponent) {
-  _inherits(Collapse, _PureComponent);
-
-  function Collapse(props) {
-    _classCallCheck(this, Collapse);
-
-    var _this = _possibleConstructorReturn(this, (Collapse.__proto__ || Object.getPrototypeOf(Collapse)).call(this, props));
-
-    _this.onTransitionEnd = _this.onTransitionEnd.bind(_this);
-    _this.setExpanded = _this.setExpanded.bind(_this);
-    _this.setCollapsed = _this.setCollapsed.bind(_this);
-
-    _this.state = {
-      willChange: 'height',
-      height: '0',
-      overflow: 'hidden',
-      visibility: 'hidden',
-      transition: props.transition
-    };
-    return _this;
-  }
-
-  _createClass(Collapse, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      if (this.content && this.props.isOpen) {
-        this.setExpanded();
+  var onTransitionEnd = function onTransitionEnd(e) {
+    if (e.target === content.current && e.propertyName === 'height') {
+      if (isOpen) {
+        setIsExpandedStyle();
+      } else {
+        setIsCollapsedStyle();
       }
-    }
-  }, {
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate(prevProps) {
-      var _this2 = this;
-
-      if (!this.content) {
-        return;
+      if (onRest) {
+        onRest();
       }
-
-      // If the transition is changed lets update it
-      if (this.props.transition !== prevProps.transition) {
-        // eslint-disable-next-line react/no-did-update-set-state
-        this.setState({ transition: this.props.transition });
-      }
-
-      // expand
-      if (!prevProps.isOpen && this.props.isOpen) {
-        // have the element transition to the height of its inner content
-        // eslint-disable-next-line react/no-did-update-set-state
-        this.setState({
-          height: this.getHeight() + 'px',
-          visibility: 'visible'
-        });
-      }
-
-      // collapse
-      if (prevProps.isOpen && !this.props.isOpen) {
-        // explicitly set the element's height to its current pixel height, so we
-        // aren't transitioning out of 'auto'
-        // eslint-disable-next-line react/no-did-update-set-state
-        this.setState({ height: this.getHeight() + 'px' });
-        _util2.default.requestAnimationFrame(function () {
-          // "pausing" the JavaScript execution to let the rendering threads catch up
-          // http://stackoverflow.com/questions/779379/why-is-settimeoutfn-0-sometimes-useful
-          setTimeout(function () {
-            _this2.setState({
-              height: '0',
-              overflow: 'hidden'
-            });
-          });
-        });
-      }
     }
-  }, {
-    key: 'onTransitionEnd',
-    value: function onTransitionEnd(e) {
-      var _props = this.props,
-          onRest = _props.onRest,
-          isOpen = _props.isOpen;
+  };
 
+  return _react2.default.createElement(
+    'div',
+    _extends({
+      ref: content,
+      style: _extends({}, style, { transition: transition }),
+      className: className,
+      onTransitionEnd: onTransitionEnd
+    }, attrs),
+    children
+  );
+};
 
-      if (e.target === this.content && e.propertyName === 'height') {
-        if (isOpen) {
-          this.setExpanded();
-        } else {
-          this.setCollapsed();
-        }
-        if (onRest) {
-          onRest();
-        }
-      }
-    }
-  }, {
-    key: 'getHeight',
-    value: function getHeight() {
-      return this.content.scrollHeight;
-    }
-  }, {
-    key: 'setCollapsed',
-    value: function setCollapsed() {
-      this.setState({ visibility: 'hidden' });
-    }
-  }, {
-    key: 'setExpanded',
-    value: function setExpanded() {
-      this.setState({
-        height: 'auto',
-        overflow: 'visible',
-        visibility: 'visible'
-      });
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _this3 = this;
-
-      var _props2 = this.props,
-          className = _props2.className,
-          children = _props2.children,
-          isOpen = _props2.isOpen,
-          transition = _props2.transition,
-          onRest = _props2.onRest,
-          attrs = _objectWithoutProperties(_props2, ['className', 'children', 'isOpen', 'transition', 'onRest']);
-
-      return _react2.default.createElement(
-        'div',
-        _extends({
-          ref: function ref(el) {
-            _this3.content = el;
-          },
-          style: this.state,
-          className: className,
-          onTransitionEnd: this.onTransitionEnd
-        }, attrs),
-        children
-      );
-    }
-  }]);
-
-  return Collapse;
-}(_react.PureComponent);
-
-Collapse.displayName = 'Collapse';
-
 Collapse.defaultProps = {
@@ -180,0 +72,0 @@ children: null,

lib/index.js

@@ -6,3 +6,13 @@ 'use strict';
 });
+exports.useCollapse = undefined;
 
+var _useCollapse = require('./components/useCollapse');
+
+Object.defineProperty(exports, 'useCollapse', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_useCollapse).default;
+  }
+});
+
 var _Collapse = require('./components/Collapse');
@@ -9,0 +19,0 @@

lib/stories/App.js

@@ -11,2 +11,4 @@ 'use strict';
 
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+
 var _react = require('react');
@@ -28,2 +30,4 @@
 
+var _data = require('../data');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -37,2 +41,28 @@
 
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+var Content = function Content() {
+  var _useState = (0, _react.useState)([_data.text[0]]),
+      _useState2 = _slicedToArray(_useState, 2),
+      content = _useState2[0],
+      setContent = _useState2[1];
+
+  return _react2.default.createElement(
+    'section',
+    null,
+    _react2.default.createElement(
+      'button',
+      { type: 'button', onClick: function onClick() {
+          return setContent([].concat(_toConsumableArray(content), [_data.text[0]]));
+        } },
+      'Add content'
+    ),
+    _react2.default.createElement(
+      'p',
+      null,
+      content
+    )
+  );
+};
+
 var App = function (_Component) {
@@ -55,5 +85,7 @@ _inherits(App, _Component);
     key: 'setIndex',
-    value: function setIndex(index) {
-      if (this.state.index !== index) {
-        this.setState({ index: index });
+    value: function setIndex(i) {
+      var index = this.state.index;
+
+      if (index !== i) {
+        this.setState({ index: i });
       } else {
@@ -68,2 +100,7 @@ this.setState({ index: null });
 
+      var _props = this.props,
+          elements = _props.elements,
+          props = _props.props;
+      var index = this.state.index;
+
       return _react2.default.createElement(
@@ -75,3 +112,3 @@ 'main',
           null,
-          this.props.elements.map(function (element, index) {
+          elements.map(function (element, i) {
             return _react2.default.createElement(
@@ -84,3 +121,3 @@ 'div',
                   onClick: function onClick() {
-                    return _this2.setIndex(index);
+                    return _this2.setIndex(i);
                   },
@@ -95,11 +132,11 @@ style: { width: '100%' },
                 _extends({
-                  isOpen: _this2.state.index === index,
+                  isOpen: index === i,
                   onRest: function onRest() {
                     return (0, _addonActions.action)('onRest');
                   }
-                }, _this2.props.props),
+                }, props),
                 _react2.default.createElement(
                   'div',
                   { style: { background: 'lightpink', padding: '20px' } },
-                  element.text
+                  _react2.default.createElement(Content, null)
                 )
@@ -106,0 +143,0 @@ )

package.json

 {
   "name": "react-css-collapse",
-  "version": "3.6.1",
+  "version": "4.0.0",
   "description": "Component-wrapper for collapse animation with css for elements with variable and dynamic height",
@@ -42,4 +42,5 @@ "author": {
     "eslint": "eslint --ext .jsx,.js src/",
-    "eslint:fix": "eslint --ext .jsx,.js src/ --fix",
     "prettier-eslint": "prettier-eslint --write \"src/**/*.js\" \"src/**/*.jsx\"",
+    "format": "prettier --write \"src/**/*.js\" \"src/**/*.jsx\"",
+    "fix": "npx eslint  --fix src --ext .js --ext .jsx",
     "prepublish": "npm run build",
@@ -51,12 +52,12 @@ "start": "npm run babel -- -w",
   "peerDependencies": {
-    "react": "15.x || 16.x",
-    "react-dom": "15.x || 16.x"
+    "react": ">=16.8",
+    "react-dom": ">=16.8"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^3.4.8",
-    "@storybook/addon-knobs": "^3.4.10",
-    "@storybook/react": "^3.4.8",
+    "@storybook/addon-actions": "^5.2.8",
+    "@storybook/addon-knobs": "^5.2.8",
+    "@storybook/react": "^5.2.8",
     "babel-cli": "^6.24.0",
     "babel-eslint": "^8.2.5",
-    "babel-jest": "^23.4.2",
+    "babel-jest": "^23.6.0",
     "babel-loader": "^7.1.4",
@@ -68,18 +69,19 @@ "babel-plugin-transform-object-rest-spread": "^6.19.0",
     "babel-preset-stage-1": "^6.13.0",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
-    "eslint": "^3.19.0",
-    "eslint-config-airbnb": "^15.1.0",
-    "eslint-plugin-import": "^2.13.0",
-    "eslint-plugin-jest": "^21.22.0",
-    "eslint-plugin-jsx-a11y": "^5.1.1",
-    "eslint-plugin-react": "^7.10.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "eslint": "^5.3.0",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-config-prettier": "^6.7.0",
+    "eslint-plugin-import": "^2.19.1",
+    "eslint-plugin-jest": "^22.21.0",
+    "eslint-plugin-jsx-a11y": "^6.1.1",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.17.0",
+    "eslint-plugin-react-hooks": "^1.6.0",
     "fake-raf": "^1.0.1",
-    "jest": "^23.5.0",
-    "prettier": "^1.13.7",
-    "prettier-eslint": "^8.8.2",
-    "prettier-eslint-cli": "^4.7.1",
-    "prop-types": "^15.6.2",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1"
+    "jest": "^23.6.0",
+    "prettier": "^1.19.1",
+    "prop-types": "^15.7.2",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
   },
@@ -111,3 +113,11 @@ "directories": {
     ]
+  },
+  "prettier": {
+    "endOfLine": "lf",
+    "parser": "babel",
+    "singleQuote": true,
+    "trailingComma": "all",
+    "printWidth": 80,
+    "tabWidth": 2
   }
 }

README.md

@@ -8,2 +8,4 @@ # react-css-collapse
 
+Demo: [Accordion using react-css-collapse](https://codesandbox.io/embed/accordion-using-react-css-collapse-w5r1e)
+
 :warning: ️You need to specify the transition property or add a class selector with style (transition) in your own stylesheet to add animation. You can copy the smashing example below 💅
@@ -10,0 +12,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

46069

increased by2.15%

Number of package files

25

increased by4.17%

Lines of code

379

increased by4.12%

Number of lines in readme file

86

increased by2.38%

Worsened metrics

Dev dependency count

29

increased by3.57%

No dependency changes