react-css-collapse - npm Package Compare versions

Comparing version 3.4.0 to 3.5.0

CHANGELOG.md

 # Changelog
+# 3.5.0
+> September 3, 2018
+* :nut_and_bolt: **New** Add transition prop
+* :tada: **Enhancement** Use Jest for unit tests
+* :tada: **Enhancement** Add knobs to the stories
 
@@ -3,0 +8,0 @@ # 3.4.0

lib/components/Collapse.js

@@ -45,3 +45,4 @@ 'use strict';
       overflow: 'hidden',
-      visibility: 'hidden'
+      visibility: 'hidden',
+      transition: props.transition
     };
@@ -67,2 +68,7 @@ return _this;
 
+      // If the transition is changed lets update it
+      if (nextProps.transition !== this.props.transition) {
+        this.setState({ transition: nextProps.transition });
+      }
+
       // expand
@@ -72,3 +78,3 @@ if (!this.props.isOpen && nextProps.isOpen) {
         this.setState({
-          height: this.content.scrollHeight + 'px',
+          height: this.getHeight() + 'px',
           visibility: 'visible'
@@ -82,3 +88,3 @@ });
         // aren't transitioning out of 'auto'
-        this.setState({ height: this.content.scrollHeight + 'px' });
+        this.setState({ height: this.getHeight() + 'px' });
         _util2.default.requestAnimationFrame(function () {
@@ -116,2 +122,7 @@ // "pausing" the JavaScript execution to let the rendering threads catch up
   }, {
+    key: 'getHeight',
+    value: function getHeight() {
+      return this.content.scrollHeight;
+    }
+  }, {
     key: 'setCollapsed',
@@ -156,5 +167,6 @@ value: function setCollapsed() {
 Collapse.defaultProps = {
+  children: null,
+  className: 'react-css-collapse-transition',
   isOpen: false,
-  className: 'react-css-collapse-transition',
-  children: null,
+  transition: null,
   onRest: null
@@ -164,5 +176,6 @@ };
 Collapse.propTypes = {
-  children: _propTypes2.default.node,
+  children: _propTypes2.default.node.isRequired,
+  className: _propTypes2.default.string,
   isOpen: _propTypes2.default.bool,
-  className: _propTypes2.default.string,
+  transition: _propTypes2.default.string,
   onRest: _propTypes2.default.func
@@ -169,0 +182,0 @@ };

lib/stories/App.js

@@ -7,2 +7,4 @@ 'use strict';
 
+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 _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; }; }();
@@ -86,9 +88,8 @@
                 _Collapse2.default,
-                {
+                _extends({
                   isOpen: _this2.state.index === index,
-                  className: 'react-css-collapse-transition',
                   onRest: function onRest() {
                     return (0, _addonActions.action)('onRest');
                   }
-                },
+                }, _this2.props.props),
                 _react2.default.createElement(
@@ -116,3 +117,7 @@ 'div',
 App.propTypes = {
-  elements: _propTypes2.default.arrayOf(_propTypes2.default.shape({})).isRequired
+  elements: _propTypes2.default.arrayOf(_propTypes2.default.shape({})).isRequired,
+  props: _propTypes2.default.shape({
+    className: _propTypes2.default.string,
+    transition: _propTypes2.default.string
+  }).isRequired
 };
@@ -119,0 +124,0 @@

lib/stories/collapse.stories.js

@@ -9,2 +9,4 @@ 'use strict';
 
+var _addonKnobs = require('@storybook/addon-knobs');
+
 var _App = require('./App');
@@ -18,5 +20,19 @@
 
-(0, _react3.storiesOf)('Collapse', module).add('default', function () {
-  return _react2.default.createElement(_App2.default, { elements: _data.elements });
+(0, _react3.storiesOf)('Collapse', module).addDecorator(_addonKnobs.withKnobs).add('default', 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', '')
+    }
+  });
+}).add('inline transition', function () {
+  return _react2.default.createElement(_App2.default, {
+    elements: _data.elements,
+    props: {
+      className: (0, _addonKnobs.text)('className', ''),
+      transition: (0, _addonKnobs.text)('transition', 'height 250ms cubic-bezier(.4, 0, .2, 1)')
+    }
+  });
 });
 //# sourceMappingURL=collapse.stories.js.map

lib/stories/perf.stories.js

@@ -9,2 +9,4 @@ 'use strict';
 
+var _addonKnobs = require('@storybook/addon-knobs');
+
 var _App = require('./App');
@@ -19,5 +21,11 @@
 var elements = (0, _data.createElements)(1000);
-(0, _react3.storiesOf)('Collapse', module).add('long list', function () {
-  return _react2.default.createElement(_App2.default, { elements: elements });
+(0, _react3.storiesOf)('Collapse', module).addDecorator(_addonKnobs.withKnobs).add('long list', function () {
+  return _react2.default.createElement(_App2.default, {
+    elements: elements,
+    props: {
+      className: (0, _addonKnobs.text)('className', 'react-css-collapse-transition'),
+      transition: (0, _addonKnobs.text)('transition', '')
+    }
+  });
 });
 //# sourceMappingURL=perf.stories.js.map

package.json

 {
   "name": "react-css-collapse",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "Component-wrapper for collapse animation with css for elements with variable and dynamic height",
@@ -30,4 +30,4 @@ "author": {
   "scripts": {
-    "test": "mocha test/setup.js test --recursive --compilers js:babel-register",
-    "test:watch": "npm run test -- -w",
+    "test": "jest",
+    "test:watch": "npm run test -- --watch",
     "babel": "babel -d lib src --ignore spec.js --source-maps",
@@ -50,5 +50,7 @@ "clean": "rm -rf lib",
     "@storybook/addon-actions": "^3.4.8",
+    "@storybook/addon-knobs": "^3.4.10",
     "@storybook/react": "^3.4.8",
     "babel-cli": "^6.24.0",
     "babel-eslint": "^8.2.5",
+    "babel-jest": "^23.4.2",
     "babel-loader": "^7.1.4",
@@ -60,3 +62,2 @@ "babel-plugin-transform-object-rest-spread": "^6.19.0",
     "babel-preset-stage-1": "^6.13.0",
-    "chai": "^3.5.0",
     "enzyme": "^3.3.0",
@@ -67,6 +68,7 @@ "enzyme-adapter-react-16": "^1.1.1",
     "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",
-    "jsdom": "^9.12.0",
-    "mocha": "^3.1.2",
+    "fake-raf": "^1.0.1",
+    "jest": "^23.5.0",
     "prettier": "^1.13.7",
@@ -77,4 +79,3 @@ "prettier-eslint": "^8.8.2",
     "react": "^16.4.1",
-    "react-dom": "^16.4.1",
-    "sinon": "^2.1.0"
+    "react-dom": "^16.4.1"
   },
@@ -95,3 +96,14 @@ "directories": {
     "slide-up"
-  ]
+  ],
+  "jest": {
+    "transform": {
+      "^.+\\.(js|jsx)$": "babel-jest"
+    },
+    "setupTestFrameworkScriptFile": "<rootDir>/setup.js",
+    "testURL": "http://localhost/",
+    "collectCoverageFrom": [
+      "**/*.{js,jsx}",
+      "!**/node_modules/**"
+    ]
+  }
 }

README.md

 # react-css-collapse
-Component-wrapper for collapse animation with css for elements with variable and dynamic height
+Collapse component with css transition for elements with variable and dynamic height.
 
@@ -8,10 +8,14 @@ [![Build Status](https://travis-ci.org/SparebankenVest/react-css-collapse.svg?branch=master)](https://travis-ci.org/SparebankenVest/react-css-collapse)
 
+:warning: ️You need to specify the class selector with style (transition) in your own stylesheet to add animation. You can copy the smashing example below 💅
+
+```scss
+.react-css-collapse-transition {
+  transition: height 250ms cubic-bezier(.4, 0, .2, 1);
+}
+```
+
 ## Installation
 
-Using [npm](https://www.npmjs.com/):
-
 `npm install --save react-css-collapse`
 
-Then with a module bundler like [webpack](https://webpack.github.io/), use as you would anything else:
-
 ```js
@@ -51,6 +55,10 @@ import Collapse from 'react-css-collapse';
 
-```scss
-.react-css-collapse-transition {
-  transition: height 250ms cubic-bezier(.4, 0, .2, 1);
-}
+#### `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>
 ```
@@ -57,0 +65,0 @@

setup.js

@@ -1,10 +0,4 @@
-import jsdom from 'jsdom';
+const Enzyme = require('enzyme');
+const Adapter = require('enzyme-adapter-react-16');
 
-global.document = jsdom.jsdom('');
-global.window = document.defaultView;
-
-Object.keys(document.defaultView).forEach((property) => {
-  if (typeof global[property] === 'undefined') {
-    global[property] = document.defaultView[property];
-  }
-});
+Enzyme.configure({ adapter: new Adapter() });

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

43028

increased by10.9%

Lines of code

352

increased by10.34%

Number of lines in readme file

74

increased by12.12%

Worsened metrics

Dev dependency count

28

increased by3.7%

No dependency changes