react-simple-collapsible-element - npm Package Compare versions

Comparing version 2.0.6 to 2.0.7

dist/CollapseContainer.js

@@ -34,3 +34,3 @@ 'use strict';
   children: _propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.array]).isRequired,
-  currentActiveIndex: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
+  currentActiveIndex: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number, _propTypes2.default.array]),
   onCollapse: _propTypes2.default.func
@@ -37,0 +37,0 @@ };

dist/CollapsePane.js

@@ -28,2 +28,5 @@ 'use strict';
 function renderNestedElements(items, index, currentActiveIndex, onCollapse) {
+  var keepOpen = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  var customTransition = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : '';
+
   if (!Array.isArray(items)) {
@@ -44,7 +47,8 @@ throw new Error('nested elements must be an array');
           text: item.title,
-          active: (0, _util.checkIfActive)(currentActiveIndex, index),
+          active: (0, _util.checkIfActive)(currentActiveIndex, index, keepOpen),
           activeTitleStyle: item.activeTitleStyle,
+          customTransition: customTransition,
           isNested: true
         }),
-        renderNestedElements(item.content, index + '-' + nestedindex, currentActiveIndex, onCollapse)
+        renderNestedElements(item.content, index + '-' + nestedindex, currentActiveIndex, onCollapse, keepOpen, customTransition)
       );
@@ -60,4 +64,5 @@ }
         text: item.title,
-        active: (0, _util.checkIfActive)(currentActiveIndex, index),
+        active: (0, _util.checkIfActive)(currentActiveIndex, index, keepOpen),
         activeTitleStyle: item.activeTitleStyle,
+        customTransition: customTransition,
         isNested: true
@@ -68,5 +73,6 @@ }),
         index: index + '-' + nestedindex,
-        active: (0, _util.checkIfActive)(currentActiveIndex, index + '-' + nestedindex),
+        active: (0, _util.checkIfActive)(currentActiveIndex, index + '-' + nestedindex, keepOpen),
         text: item.content,
-        activeContentStyle: item.activeContentStyle
+        activeContentStyle: item.activeContentStyle,
+        customTransition: customTransition
       })
@@ -81,3 +87,5 @@ );
       currentActiveIndex = _ref.currentActiveIndex,
-      onCollapse = _ref.onCollapse;
+      onCollapse = _ref.onCollapse,
+      keepOpen = _ref.keepOpen,
+      customTransition = _ref.customTransition;
 
@@ -93,10 +101,12 @@ var titleStyle = items.titleStyle || {};
       onCollapse: onCollapse,
-      text: items.title
+      text: items.title,
+      customTransition: customTransition
     }),
     !Array.isArray(items.content) ? _react2.default.createElement(_Content2.default, {
-      active: (0, _util.checkIfActive)(currentActiveIndex, index),
+      active: (0, _util.checkIfActive)(currentActiveIndex, index, keepOpen),
       text: items.content,
       contentStyle: contentStyle,
-      activeContentStyle: items.activeContentStyle
-    }) : renderNestedElements(items.content, index, currentActiveIndex, onCollapse)
+      activeContentStyle: items.activeContentStyle,
+      customTransition: customTransition
+    }) : renderNestedElements(items.content, index, currentActiveIndex, onCollapse, keepOpen, customTransition)
   );
@@ -108,3 +118,5 @@ };
   items: _propTypes2.default.object.isRequired,
-  currentActiveIndex: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
+  currentActiveIndex: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number, _propTypes2.default.array]),
+  keepOpen: _propTypes2.default.bool,
+  customTransition: _propTypes2.default.string,
   onCollapse: _propTypes2.default.func
@@ -115,2 +127,4 @@ };
   currentActiveIndex: undefined,
+  keepOpen: false,
+  customTransition: '',
   onCollapse: function onCollapse() {}
@@ -117,0 +131,0 @@ };

dist/Collapsible.js

@@ -27,2 +27,4 @@ 'use strict';
 
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -37,3 +39,5 @@
 
-  function Collapsible() {
+  function Collapsible(_ref) {
+    var keepOpen = _ref.keepOpen;
+
     _classCallCheck(this, Collapsible);
@@ -43,3 +47,3 @@
 
-    _this.state = { currentActiveIndex: '' };
+    _this.state = { currentActiveIndex: keepOpen ? [] : '' };
     _this.onCollapse = _this.onCollapse.bind(_this);
@@ -50,8 +54,27 @@ return _this;
   _createClass(Collapsible, [{
-    key: 'onCollapse',
-    value: function onCollapse(index) {
+    key: 'keepOpenCollapse',
+    value: function keepOpenCollapse(index) {
       var currentActiveIndex = this.state.currentActiveIndex;
 
+      if (currentActiveIndex.indexOf(index.toString()) < 0) {
+        this.setState({
+          currentActiveIndex: [index.toString()].concat(_toConsumableArray(currentActiveIndex))
+        });
+      } else {
+        this.setState({
+          currentActiveIndex: currentActiveIndex.filter(function (activeIndex) {
+            return activeIndex.indexOf(index.toString()) < 0;
+          })
+        });
+      }
+    }
+  }, {
+    key: 'defaultCollapse',
+    value: function defaultCollapse(index) {
+      var currentActiveIndex = this.state.currentActiveIndex;
+
       if (currentActiveIndex.toString() === index.toString() && index.length > 1) {
-        this.setState({ currentActiveIndex: index.slice(0, index.length - 2) });
+        this.setState({
+          currentActiveIndex: index.slice(0, index.length - 2)
+        });
       } else if (currentActiveIndex.toString() !== index.toString()) {
@@ -64,2 +87,13 @@ this.setState({ currentActiveIndex: index });
   }, {
+    key: 'onCollapse',
+    value: function onCollapse(index) {
+      var keepOpen = this.props.keepOpen;
+
+      if (keepOpen) {
+        this.keepOpenCollapse(index);
+      } else {
+        this.defaultCollapse(index);
+      }
+    }
+  }, {
     key: 'render',
@@ -69,3 +103,6 @@ value: function render() {
 
-      var data = this.props.data;
+      var _props = this.props,
+          data = _props.data,
+          keepOpen = _props.keepOpen,
+          customTransition = _props.customTransition;
 
@@ -84,3 +121,9 @@ return _react2.default.createElement(
           data.map(function (item, index) {
-            return _react2.default.createElement(_CollapsePane2.default, { key: index, items: item, index: index });
+            return _react2.default.createElement(_CollapsePane2.default, {
+              key: index,
+              items: item,
+              index: index,
+              keepOpen: keepOpen,
+              customTransition: customTransition
+            });
           })
@@ -96,4 +139,10 @@ )
 Collapsible.propTypes = {
-  data: _propTypes2.default.array.isRequired
+  data: _propTypes2.default.array.isRequired,
+  keepOpen: _propTypes2.default.bool,
+  customTransition: _propTypes2.default.string
 };
+Collapsible.defaultProps = {
+  keepOpen: false,
+  customTransition: undefined
+};
 exports.default = Collapsible;

dist/Content.js

@@ -61,3 +61,4 @@ 'use strict';
           contentStyle = _props.contentStyle,
-          activeContentStyle = _props.activeContentStyle;
+          activeContentStyle = _props.activeContentStyle,
+          customTransition = _props.customTransition;
 
@@ -71,3 +72,3 @@ var classNames = typeof contentStyle === 'string' ? contentStyle : '';
             height: active ? this.state.height : 0,
-            transition: 'height .3s ease-out',
+            transition: customTransition || 'height .3s ease-out',
             overflow: 'hidden'
@@ -90,3 +91,4 @@ }, style),
   contentStyle: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
-  activeContentStyle: _propTypes2.default.string
+  activeContentStyle: _propTypes2.default.string,
+  customTransition: _propTypes2.default.string
 };
@@ -96,4 +98,5 @@ Content.defaultProps = {
   contentStyle: undefined,
-  activeContentStyle: undefined
+  activeContentStyle: undefined,
+  customTransition: ''
 };
 exports.default = Content;

dist/Title.js

@@ -64,3 +64,4 @@ 'use strict';
           titleStyle = _props.titleStyle,
-          activeTitleStyle = _props.activeTitleStyle;
+          activeTitleStyle = _props.activeTitleStyle,
+          customTransition = _props.customTransition;
 
@@ -81,3 +82,3 @@ var classNames = typeof titleStyle === 'string' ? titleStyle : '';
             height: isNested && !active ? 0 : this.state.height,
-            transition: 'height .3s ease-out',
+            transition: customTransition || 'height .3s ease-out',
             overflow: 'hidden'
@@ -103,3 +104,4 @@ }, style),
   titleStyle: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
-  activeTitleStyle: _propTypes2.default.string
+  activeTitleStyle: _propTypes2.default.string,
+  customTransition: _propTypes2.default.string
 };
@@ -110,4 +112,5 @@ Title.defaultProps = {
   titleStyle: undefined,
-  activeTitleStyle: undefined
+  activeTitleStyle: undefined,
+  customTransition: ''
 };
 exports.default = Title;

dist/util.js

@@ -10,8 +10,11 @@ 'use strict';
 
-function checkIfActive(activeIndex, index) {
-  var currentActiveIndex = activeIndex.toString();
-  var selectedIndex = index.toString();
+function checkKeepOpen(activeIndex, selectedIndex) {
+  if (activeIndex.indexOf(selectedIndex) > -1) {
+    return true;
+  }
+  return false;
+}
 
+function checkDefault(currentActiveIndex, selectedIndex) {
   var selectedLevel = getLevel(selectedIndex);
-
   if (currentActiveIndex === selectedIndex) {
@@ -28,3 +31,15 @@ return true;
 
+function checkIfActive(activeIndex, index) {
+  var keepOpen = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+
+  var currentActiveIndex = activeIndex.toString();
+  var selectedIndex = index.toString();
+  if (keepOpen) {
+    return checkKeepOpen(activeIndex, selectedIndex);
+  } else {
+    return checkDefault(currentActiveIndex, selectedIndex);
+  }
+}
+
 exports.getLevel = getLevel;
 exports.checkIfActive = checkIfActive;

package.json

 {
   "name": "react-simple-collapsible-element",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "simple react collapsible supports nested elements",
@@ -29,3 +29,5 @@ "main": "index.js",
     "react-component",
-    "react"
+    "react",
+    "FAQ",
+    "collapse"
   ],
@@ -43,2 +45,5 @@ "peerDependencies": {
     "babel-preset-stage-0": "^6.16.0",
+    "enzyme": "^3.6.0",
+    "enzyme-adapter-react-16": "^1.5.0",
+    "jest": "^23.6.0",
     "react": "^16.0.0",
@@ -45,0 +50,0 @@ "react-dom": "^16.0.0",

README.md

@@ -66,3 +66,3 @@ # react-simple-collapsible-element
 
-return <Collapsible data={data} />;
+return <Collapsible keepOpen={true or false} data={data} />;
 ```
@@ -72,9 +72,11 @@
 
-| Name                 | Type              | Default     | Description                                            |
-| :------------------- | :---------------- | :---------- | :----------------------------------------------------- |
-| `title`              | `Element`         | `'div'`     | parent                                                 |
-| `content`            | `Element / array` | `div`       | child                                                  |
-| `titleStyle`         | `String / Object` | `undefined` | Can be a style object or multiple classnames together. |
-| `contentStyle`       | `String / Object` | `undefined` | Can be a style object or multiple classnames together. |
-| `activeTitleStyle`   | `String`          | `undefined` | a classname to pass to when the title is active.       |
-| `activeContentStyle` | `String`          | `undefined` | a classname to pass to when the content is active.     |
+| Name                 | Type              | Default               | Description                                                              |
+| :------------------- | :---------------- | :-------------------- | :----------------------------------------------------------------------- |
+| `title`              | `Element`         | `'div'`               | parent                                                                   |
+| `content`            | `Element / array` | `div`                 | child                                                                    |
+| `keepOpen`           | `bool`            | `false`               | whether or not keep the current element open when click on other element |
+| `customTransition`   | `String`          | `height .3s ease-out` | custom transition                                                        |
+| `titleStyle`         | `String / Object` | `undefined`           | Can be a style object or multiple classnames together.                   |
+| `contentStyle`       | `String / Object` | `undefined`           | Can be a style object or multiple classnames together.                   |
+| `activeTitleStyle`   | `String`          | `undefined`           | a classname to pass to when the title is active.                         |
+| `activeContentStyle` | `String`          | `undefined`           | a classname to pass to when the content is active.                       |

No alert changes

Improved metrics

Total package byte prevSize

25720

increased by16.58%

Lines of code

459

increased by20.47%

Number of lines in readme file

81

increased by2.53%

Worsened metrics

Dev dependency count

13

increased by30%

No dependency changes