react-css-collapse - npm Package Compare versions

Comparing version 4.0.1 to 4.0.2

CHANGELOG.md

 # Changelog
 
+# 4.0.2
+> January 2, 2020
+* :tada: **Enhancement** Update build and use browserlist
+
+# 4.0.1
+> Desember 31, 2019
+* :tada: **Enhancement** Add willChange: height, add stories and prettify component
+
 # 4.0.0
@@ -4,0 +12,0 @@ > Desember 31, 2019

lib/components/Collapse.js

@@ -1,24 +0,35 @@
-'use strict';
+"use strict";
 
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.default = void 0;
 
-var _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; };
+var _react = _interopRequireWildcard(require("react"));
 
-var _react = require('react');
+var _propTypes = require("prop-types");
 
-var _react2 = _interopRequireDefault(_react);
+var _useCollapse2 = _interopRequireDefault(require("./useCollapse"));
 
-var _propTypes = require('prop-types');
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _useCollapse2 = require('./useCollapse');
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-var _useCollapse3 = _interopRequireDefault(_useCollapse2);
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-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 _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-var Collapse = function Collapse(_ref) {
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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 Collapse(_ref) {
   var isOpen = _ref.isOpen,
@@ -29,7 +40,7 @@ onRest = _ref.onRest,
       className = _ref.className,
-      rest = _objectWithoutProperties(_ref, ['isOpen', 'onRest', 'style', 'transition', 'className']);
+      rest = _objectWithoutProperties(_ref, ["isOpen", "onRest", "style", "transition", "className"]);
 
-  var content = (0, _react.useRef)();
+  var content = (0, _react.useRef)(null);
 
-  var _useCollapse = (0, _useCollapse3.default)({
+  var _useCollapse = (0, _useCollapse2.default)({
     isOpen: isOpen,
@@ -49,2 +60,3 @@ content: content
       }
+
       if (onRest) {
@@ -56,23 +68,23 @@ onRest();
 
-  var styles = _extends({
+  var styles = _objectSpread({
     willChange: 'height',
     transition: transition
-  }, initialStyle, style);
+  }, initialStyle, {}, style);
 
-  return _react2.default.createElement('div', _extends({
+  return _react.default.createElement("div", _extends({
     ref: content,
     style: styles,
     className: className,
-    onTransitionEnd: onTransitionEnd
+    onTransitionEnd: onTransitionEnd // eslint-disable-next-line react/jsx-props-no-spreading
+
   }, rest));
-};
+}
 
 Collapse.defaultProps = {
   isOpen: false,
-  onRest: undefined,
-  style: undefined,
+  onRest: null,
+  style: null,
   className: 'react-css-collapse-transition',
-  transition: undefined
+  transition: null
 };
-
 Collapse.propTypes = {
@@ -85,4 +97,4 @@ isOpen: _propTypes.bool,
 };
-
-exports.default = Collapse;
+var _default = Collapse;
+exports.default = _default;
 //# sourceMappingURL=Collapse.js.map

lib/components/useCollapse.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -6,7 +6,22 @@ Object.defineProperty(exports, "__esModule", {
 });
+exports.default = void 0;
 
-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");
 
-var _react = require('react');
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
 
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } 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"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function getHeight(content) {
+  if (content && content.current && content.current.scrollHeight) {
+    return "".concat(content.current.scrollHeight, "px");
+  }
+
+  return '0px';
+}
+
 var useCollapse = function useCollapse(_ref) {
@@ -46,16 +61,13 @@ var isOpen = _ref.isOpen,
 
-  var getHeight = function getHeight() {
-    return content.current.scrollHeight + 'px';
-  };
-
   (0, _react.useEffect)(function () {
     if (isOpen) {
+      setVisibility('visible');
+
       if (isFirstRender) {
         setHeight('auto');
       } else {
-        setHeight(getHeight());
+        setHeight(getHeight(content));
       }
-      setVisibility('visible');
     } else {
-      setHeight(getHeight());
+      setHeight(getHeight(content));
       window.requestAnimationFrame(function () {
@@ -69,7 +81,5 @@ setTimeout(function () {
   }, [isOpen]);
-
   (0, _react.useEffect)(function () {
     setIsFirstRender(false);
   }, []);
-
   return {
@@ -86,3 +96,4 @@ setIsExpandedStyle: setIsExpandedStyle,
 
-exports.default = useCollapse;
+var _default = useCollapse;
+exports.default = _default;
 //# sourceMappingURL=useCollapse.js.map

lib/data/index.js

@@ -6,5 +6,6 @@ "use strict";
 });
-var text = exports.text = ["You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.", "Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.", "Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.", "You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic."];
-
-var elements = exports.elements = [{
+exports.createElements = exports.elements = exports.text = void 0;
+var text = ["You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.", "Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.", "Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.", "You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic."];
+exports.text = text;
+var elements = [{
   name: 'Earth',
@@ -22,2 +23,3 @@ text: text[0]
 }];
+exports.elements = elements;
 
@@ -28,4 +30,5 @@ var genText = function genText() {
 
-var createElements = exports.createElements = function createElements(nr) {
+var createElements = function createElements(nr) {
   var list = [];
+
   for (var i = 0; i < nr; i += 1) {
@@ -37,4 +40,7 @@ list.push({
   }
+
   return list;
 };
+
+exports.createElements = createElements;
 //# sourceMappingURL=index.js.map

lib/index.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -6,20 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 });
-exports.useCollapse = undefined;
-
-var _useCollapse = require('./components/useCollapse');
-
-Object.defineProperty(exports, 'useCollapse', {
+Object.defineProperty(exports, "useCollapse", {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_useCollapse).default;
+    return _useCollapse.default;
   }
 });
+exports.default = void 0;
 
-var _Collapse = require('./components/Collapse');
+var _Collapse = _interopRequireDefault(require("./components/Collapse"));
 
-var _Collapse2 = _interopRequireDefault(_Collapse);
+var _useCollapse = _interopRequireDefault(require("./components/useCollapse"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-exports.default = _Collapse2.default;
+var _default = _Collapse.default;
+exports.default = _default;
 //# sourceMappingURL=index.js.map

lib/stories/App.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -6,37 +6,58 @@ Object.defineProperty(exports, "__esModule", {
 });
+exports.default = void 0;
 
-var _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; };
+var _react = _interopRequireWildcard(require("react"));
 
-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 _propTypes = _interopRequireDefault(require("prop-types"));
 
-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 _addonActions = require("@storybook/addon-actions");
 
-var _react = require('react');
+var _Collapse = _interopRequireDefault(require("../components/Collapse"));
 
-var _react2 = _interopRequireDefault(_react);
+require("./style.css");
 
-var _propTypes = require('prop-types');
+var _data = require("../data");
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _addonActions = require('@storybook/addon-actions');
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-var _Collapse = require('../components/Collapse');
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var _Collapse2 = _interopRequireDefault(_Collapse);
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-require('./style.css');
+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); }
 
-var _data = require('../data');
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); } }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
-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; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
 
-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; }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
-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); } }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
+
+function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } 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"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 var Content = function Content() {
@@ -48,32 +69,25 @@ var _useState = (0, _react.useState)([_data.text[0]]),
 
-  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
-    )
-  );
+  return _react.default.createElement("section", null, _react.default.createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      return setContent([].concat(_toConsumableArray(content), [_data.text[0]]));
+    }
+  }, "Add content"), _react.default.createElement("p", null, content));
 };
 
-var App = function (_Component) {
+var App =
+/*#__PURE__*/
+function (_Component) {
   _inherits(App, _Component);
 
   function App(props) {
+    var _this;
+
     _classCallCheck(this, App);
 
-    var _this = _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this, props));
-
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(App).call(this, props));
     _this.state = {
       index: props.initialIndex
     };
-    _this.setIndex = _this.setIndex.bind(_this);
+    _this.setIndex = _this.setIndex.bind(_assertThisInitialized(_this));
     return _this;
@@ -83,3 +97,3 @@ }
   _createClass(App, [{
-    key: 'setIndex',
+    key: "setIndex",
     value: function setIndex(i) {
@@ -89,61 +103,44 @@ var index = this.state.index;
       if (index !== i) {
-        this.setState({ index: i });
+        this.setState({
+          index: i
+        });
       } else {
-        this.setState({ index: null });
+        this.setState({
+          index: null
+        });
       }
     }
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
       var _this2 = this;
 
-      var _props = this.props,
-          elements = _props.elements,
-          props = _props.props;
+      var _this$props = this.props,
+          elements = _this$props.elements,
+          props = _this$props.props;
       var index = this.state.index;
+      return _react.default.createElement("main", null, _react.default.createElement("section", null, elements.map(function (element, i) {
+        return _react.default.createElement("div", {
+          key: "element-collapse-element-".concat(element.name)
+        }, _react.default.createElement("button", {
+          onClick: function onClick() {
+            return _this2.setIndex(i);
+          },
+          style: {
+            width: '100%'
+          },
+          type: "button"
+        }, element.name), _react.default.createElement(_Collapse.default, _extends({
+          isOpen: index === i,
+          onRest: function onRest() {
+            return (0, _addonActions.action)('onRest');
+          } // eslint-disable-next-line react/jsx-props-no-spreading
 
-      return _react2.default.createElement(
-        'main',
-        null,
-        _react2.default.createElement(
-          'section',
-          null,
-          elements.map(function (element, i) {
-            return _react2.default.createElement(
-              'div',
-              { key: 'element-collapse-element-' + element.name },
-              _react2.default.createElement(
-                'button',
-                {
-                  onClick: function onClick() {
-                    return _this2.setIndex(i);
-                  },
-                  style: { width: '100%' },
-                  type: 'button'
-                },
-                element.name
-              ),
-              _react2.default.createElement(
-                _Collapse2.default,
-                _extends({
-                  isOpen: index === i,
-                  onRest: function onRest() {
-                    return (0, _addonActions.action)('onRest');
-                  }
-                }, props),
-                _react2.default.createElement(
-                  'div',
-                  { style: { background: 'lightpink', padding: '20px' } },
-                  _react2.default.createElement(Content, null)
-                )
-              )
-            );
-          })
-        ),
-        _react2.default.createElement(
-          'h3',
-          null,
-          'Other content...'
-        )
-      );
+        }, props), _react.default.createElement("div", {
+          style: {
+            background: 'lightpink',
+            padding: '20px'
+          }
+        }, _react.default.createElement(Content, null))));
+      })), _react.default.createElement("h3", null, "Other content..."));
     }
@@ -159,13 +156,12 @@ }]);
 };
-
 App.propTypes = {
-  elements: _propTypes2.default.arrayOf(_propTypes2.default.shape({})).isRequired,
-  props: _propTypes2.default.shape({
-    className: _propTypes2.default.string,
-    transition: _propTypes2.default.string
+  elements: _propTypes.default.arrayOf(_propTypes.default.shape({})).isRequired,
+  props: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    transition: _propTypes.default.string
   }),
-  initialIndex: _propTypes2.default.number
+  initialIndex: _propTypes.default.number
 };
-
-exports.default = App;
+var _default = App;
+exports.default = _default;
 //# sourceMappingURL=App.js.map

lib/stories/collapse.stories.js

@@ -1,25 +0,27 @@
-'use strict';
+"use strict";
 
-var _react = require('react');
+var _react = _interopRequireDefault(require("react"));
 
-var _react2 = _interopRequireDefault(_react);
+var _react2 = require("@storybook/react");
 
-var _react3 = require('@storybook/react');
+var _addonKnobs = require("@storybook/addon-knobs");
 
-var _addonKnobs = require('@storybook/addon-knobs');
+var _App = _interopRequireDefault(require("./App"));
 
-var _App = require('./App');
+var _data = require("../data");
 
-var _App2 = _interopRequireDefault(_App);
-
-var _data = require('../data');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-(0, _react3.storiesOf)('Collapse', module).addDecorator(_addonKnobs.withKnobs).add('default', function () {
-  return _react2.default.createElement(_App2.default, { elements: _data.elements, initialIndex: null });
+(0, _react2.storiesOf)('Collapse', module).addDecorator(_addonKnobs.withKnobs).add('default', function () {
+  return _react.default.createElement(_App.default, {
+    elements: _data.elements,
+    initialIndex: null
+  });
 }).add('initially toggled', function () {
-  return _react2.default.createElement(_App2.default, { elements: _data.elements, initialIndex: 1 });
+  return _react.default.createElement(_App.default, {
+    elements: _data.elements,
+    initialIndex: 1
+  });
 }).add('custom style transition ', function () {
-  return _react2.default.createElement(_App2.default, {
+  return _react.default.createElement(_App.default, {
     elements: _data.elements,
@@ -34,3 +36,3 @@ props: {
 }).add('custom transition property', function () {
-  return _react2.default.createElement(_App2.default, {
+  return _react.default.createElement(_App.default, {
     elements: _data.elements,
@@ -43,3 +45,3 @@ props: {
 }).add('custom className transition', function () {
-  return _react2.default.createElement(_App2.default, {
+  return _react.default.createElement(_App.default, {
     elements: _data.elements,
@@ -46,0 +48,0 @@ props: {

lib/stories/index.js

@@ -1,6 +0,6 @@
-'use strict';
+"use strict";
 
-require('./collapse.stories');
+require("./collapse.stories");
 
-require('./perf.stories');
+require("./perf.stories");
 //# sourceMappingURL=index.js.map

lib/stories/perf.stories.js

@@ -1,22 +0,18 @@
-'use strict';
+"use strict";
 
-var _react = require('react');
+var _react = _interopRequireDefault(require("react"));
 
-var _react2 = _interopRequireDefault(_react);
+var _react2 = require("@storybook/react");
 
-var _react3 = require('@storybook/react');
+var _addonKnobs = require("@storybook/addon-knobs");
 
-var _addonKnobs = require('@storybook/addon-knobs');
+var _App = _interopRequireDefault(require("./App"));
 
-var _App = require('./App');
+var _data = require("../data");
 
-var _App2 = _interopRequireDefault(_App);
-
-var _data = require('../data');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var elements = (0, _data.createElements)(1000);
-(0, _react3.storiesOf)('Collapse', module).addDecorator(_addonKnobs.withKnobs).add('long list', function () {
-  return _react2.default.createElement(_App2.default, {
+(0, _react2.storiesOf)('Collapse', module).addDecorator(_addonKnobs.withKnobs).add('long list', function () {
+  return _react.default.createElement(_App.default, {
     elements: elements,
@@ -23,0 +19,0 @@ props: {

lib/util.js

@@ -6,2 +6,4 @@ "use strict";
 });
+exports.default = void 0;
+
 var requestAnimationFrame = function requestAnimationFrame(func) {
@@ -11,3 +13,6 @@ window.requestAnimationFrame(func);
 
-exports.default = { requestAnimationFrame: requestAnimationFrame };
+var _default = {
+  requestAnimationFrame: requestAnimationFrame
+};
+exports.default = _default;
 //# sourceMappingURL=util.js.map

package.json

 {
   "name": "react-css-collapse",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "Component-wrapper for collapse animation with css for elements with variable and dynamic height",
@@ -44,4 +44,3 @@ "author": {
     "build": "npm test && npm run eslint && npm run clean && npm run babel",
-    "eslint": "eslint --ext .jsx,.js src/",
-    "prettier-eslint": "prettier-eslint --write \"src/**/*.js\" \"src/**/*.jsx\"",
+    "eslint": "npx eslint src --ext .js --ext .jsx",
     "format": "prettier --write \"src/**/*.js\" \"src/**/*.jsx\"",
@@ -59,27 +58,26 @@ "fix": "npx eslint  --fix src --ext .js --ext .jsx",
   "devDependencies": {
+    "@babel/cli": "^7.7.7",
+    "@babel/core": "^7.7.7",
+    "@babel/preset-env": "^7.7.7",
+    "@babel/preset-react": "^7.7.4",
     "@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.6.0",
-    "babel-loader": "^7.1.4",
-    "babel-plugin-transform-object-rest-spread": "^6.19.0",
-    "babel-preset-latest": "^6.24.0",
-    "babel-preset-react": "^6.11.1",
-    "babel-preset-react-hmre": "^1.1.1",
-    "babel-preset-stage-1": "^6.13.0",
+    "acorn": "^7.1.0",
+    "babel-eslint": "^10.0.3",
+    "babel-jest": "^24.9.0",
+    "babel-loader": "^8.0.6",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
-    "eslint": "^5.3.0",
-    "eslint-config-airbnb": "^17.1.0",
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb": "^18.0.1",
     "eslint-config-prettier": "^6.7.0",
     "eslint-plugin-import": "^2.19.1",
-    "eslint-plugin-jest": "^22.21.0",
+    "eslint-plugin-jest": "^23.2.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",
+    "eslint-plugin-react-hooks": "^2.3.0",
     "fake-raf": "^1.0.1",
-    "jest": "^23.6.0",
+    "jest": "^24.9.0",
     "prettier": "^1.19.1",
@@ -105,2 +103,14 @@ "prop-types": "^15.7.2",
   ],
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not op_mini all",
+    "ios_saf >= 10"
+  ],
+  "babel": {
+    "presets": [
+      "@babel/preset-react",
+      "@babel/preset-env"
+    ]
+  },
   "jest": {
@@ -110,3 +120,5 @@ "transform": {
     },
-    "setupTestFrameworkScriptFile": "<rootDir>/setup.js",
+    "setupFilesAfterEnv": [
+      "<rootDir>/setup.js"
+    ],
     "testURL": "http://localhost/",
@@ -113,0 +125,0 @@ "collectCoverageFrom": [

README.md

@@ -8,25 +8,18 @@ # react-css-collapse
 
-## Demo
-### - [Accordion using react-css-collapse](https://codesandbox.io/embed/accordion-using-react-css-collapse-w5r1e)
+## Example
+### [Accordion using react-css-collapse](https://codesandbox.io/embed/accordion-using-react-css-collapse-w5r1e)
 
-You can specify transition using the style prop or a class selector with transition.
-The `react-css-collapse-transition` class selector is added by default unless you specify your own. 
+## Install
+[![rc-collapse](https://nodei.co/npm/react-css-collapse.png)](https://npmjs.org/package/react-css-collapse)
 
-🙈 Note: Remember to specify the style if you are using the default selector👇
+## Support
+Global coverage > 92% - [browserl.ist](https://browserl.ist/?q=%22%3E0.2%25%22%2C%22not+dead%22%2C%22not+op_mini+all%22%2C%22ios_saf+%3E%3D+10%22)
 
-```scss
-.react-css-collapse-transition {
-  transition: height 250ms cubic-bezier(.4, 0, .2, 1);
-}
-```
+## Usage
 
-## Installation
-
-`npm install --save react-css-collapse`
-
-```js
+```jsx
 import Collapse from 'react-css-collapse';
 
 <Collapse isOpen={true || false}>
-  <div>Random content</div>
+  <div>content</div>
 </Collapse>
@@ -53,4 +46,11 @@ ```
 #### `className`: PropType.string
+Specify transition using the class selector with transition or the style property.
+The `react-css-collapse-transition` class selector is added by default unless you specify your own. Note: Remember to include the style if you are using the default selector 👇
 
-You can specify a className with your desired style and transition (animation).
+```scss
+.react-css-collapse-transition {
+  transition: height 250ms cubic-bezier(.4, 0, .2, 1);
+}
+```
+
 #### `onRest`: PropTypes.func
@@ -57,0 +57,0 @@ Callback function for when your transition on `height` (specified in `className`) is finished. It can be used to trigger any function after transition is done.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

71715

increased by50.4%

Dev dependency count

28

decreased by-3.45%

Number of package files

27

increased by8%

Lines of code

572

increased by44.44%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes