react-css-collapse - npm Package Compare versions

Comparing version 4.0.0 to 4.0.1

lib/components/Collapse.js

@@ -15,4 +15,2 @@ 'use strict';
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
 var _useCollapse2 = require('./useCollapse');
@@ -27,8 +25,8 @@
 var Collapse = function Collapse(_ref) {
-  var children = _ref.children,
+  var isOpen = _ref.isOpen,
+      onRest = _ref.onRest,
+      initialStyle = _ref.style,
+      transition = _ref.transition,
       className = _ref.className,
-      isOpen = _ref.isOpen,
-      transition = _ref.transition,
-      onRest = _ref.onRest,
-      attrs = _objectWithoutProperties(_ref, ['children', 'className', 'isOpen', 'transition', 'onRest']);
+      rest = _objectWithoutProperties(_ref, ['isOpen', 'onRest', 'style', 'transition', 'className']);
 
@@ -58,28 +56,29 @@ var content = (0, _react.useRef)();
 
-  return _react2.default.createElement(
-    'div',
-    _extends({
-      ref: content,
-      style: _extends({}, style, { transition: transition }),
-      className: className,
-      onTransitionEnd: onTransitionEnd
-    }, attrs),
-    children
-  );
+  var styles = _extends({
+    willChange: 'height',
+    transition: transition
+  }, initialStyle, style);
+
+  return _react2.default.createElement('div', _extends({
+    ref: content,
+    style: styles,
+    className: className,
+    onTransitionEnd: onTransitionEnd
+  }, rest));
 };
 
 Collapse.defaultProps = {
-  children: null,
+  isOpen: false,
+  onRest: undefined,
+  style: undefined,
   className: 'react-css-collapse-transition',
-  isOpen: false,
-  transition: null,
-  onRest: null
+  transition: undefined
 };
 
 Collapse.propTypes = {
-  children: _propTypes2.default.node,
-  className: _propTypes2.default.string,
-  isOpen: _propTypes2.default.bool,
-  transition: _propTypes2.default.string,
-  onRest: _propTypes2.default.func
+  isOpen: _propTypes.bool,
+  onRest: _propTypes.func,
+  style: (0, _propTypes.shape)({}),
+  className: _propTypes.string,
+  transition: _propTypes.string
 };
@@ -86,0 +85,0 @@

lib/stories/App.js

@@ -74,3 +74,3 @@ 'use strict';
     _this.state = {
-      index: 0
+      index: props.initialIndex
     };
@@ -152,2 +152,7 @@ _this.setIndex = _this.setIndex.bind(_this);
 
+App.defaultProps = {
+  props: undefined,
+  initialIndex: undefined
+};
+
 App.propTypes = {
@@ -158,3 +163,4 @@ elements: _propTypes2.default.arrayOf(_propTypes2.default.shape({})).isRequired,
     transition: _propTypes2.default.string
-  }).isRequired
+  }),
+  initialIndex: _propTypes2.default.number
 };
@@ -161,0 +167,0 @@

lib/stories/collapse.stories.js

@@ -20,10 +20,16 @@ 'use strict';
 (0, _react3.storiesOf)('Collapse', module).addDecorator(_addonKnobs.withKnobs).add('default', function () {
+  return _react2.default.createElement(_App2.default, { elements: _data.elements, initialIndex: null });
+}).add('initially toggled', function () {
+  return _react2.default.createElement(_App2.default, { elements: _data.elements, initialIndex: 1 });
+}).add('custom style transition ', function () {
   return _react2.default.createElement(_App2.default, {
     elements: _data.elements,
     props: {
-      className: (0, _addonKnobs.text)('className', 'react-css-collapse-transition'),
-      transition: (0, _addonKnobs.text)('transition', '')
+      className: (0, _addonKnobs.text)('className', ''),
+      style: {
+        transition: (0, _addonKnobs.text)('transition', 'height 5000ms cubic-bezier(.4, 0, .2, 1)')
+      }
     }
   });
-}).add('inline transition', function () {
+}).add('custom transition property', function () {
   return _react2.default.createElement(_App2.default, {
@@ -33,6 +39,13 @@ elements: _data.elements,
       className: (0, _addonKnobs.text)('className', ''),
-      transition: (0, _addonKnobs.text)('transition', 'height 250ms cubic-bezier(.4, 0, .2, 1)')
+      transition: (0, _addonKnobs.text)('transition', 'height 500ms cubic-bezier(.4, 0, .2, 1)')
     }
   });
+}).add('custom className transition', function () {
+  return _react2.default.createElement(_App2.default, {
+    elements: _data.elements,
+    props: {
+      className: (0, _addonKnobs.text)('className', 'react-css-collapse-transition-custom')
+    }
+  });
 });
 //# sourceMappingURL=collapse.stories.js.map

package.json

 {
   "name": "react-css-collapse",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "Component-wrapper for collapse animation with css for elements with variable and dynamic height",
@@ -27,2 +27,5 @@ "author": {
       "name": "Christopher Deutsch"
+    },
+    {
+      "name": "Espen Thomassen Sæverud"
     }
@@ -29,0 +32,0 @@ ],

README.md

@@ -8,6 +8,10 @@ # react-css-collapse
 
-Demo: [Accordion using react-css-collapse](https://codesandbox.io/embed/accordion-using-react-css-collapse-w5r1e)
+## 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 💅
+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. 
 
+🙈 Note: Remember to specify the style if you are using the default selector👇
+
 ```scss
@@ -33,10 +37,8 @@ .react-css-collapse-transition {
 
-#### `isOpen`: PropTypes.boolean.isRequired
+#### `isOpen`: PropTypes.boolean
 
 Expands or collapses content.
 
-#### `children`: PropTypes.node.isRequired
+#### `children`: PropTypes.node
 
-One or multiple children with static, variable or dynamic height.
-
 ```js
@@ -53,14 +55,3 @@ <Collapse isOpen={true}>
 
-You can specify a className with your desired style and animation. By default `react-css-collapse-transition` will be added to the component.
-
-#### `transition`: PropType.string
-
-You can also specify a transition in line by using the `transition` prop.
-
-```js
-<Collapse transition="height 250ms cubic-bezier(.4, 0, .2, 1)">
-  <p>Paragraph of text</p>
-</Collapse>
-```
-
+You can specify a className with your desired style and transition (animation).
 #### `onRest`: PropTypes.func
@@ -67,0 +58,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

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

47684

increased by3.51%

Lines of code

396

increased by4.49%

Worsened metrics

Number of lines in readme file

77

decreased by-10.47%

No dependency changes