react-bootstrap-table-next - npm Package Compare versions

Comparing version 3.0.3 to 3.1.0

lib/src/contexts/row-expand-context.js

@@ -50,3 +50,8 @@ 'use strict';
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RowExpandProvider.__proto__ || Object.getPrototypeOf(RowExpandProvider)).call.apply(_ref, [this].concat(args))), _this), _this.state = { expanded: _this.props.expandRow.expanded || [] }, _this.handleRowExpand = function (rowKey, expanded, rowIndex, e) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RowExpandProvider.__proto__ || Object.getPrototypeOf(RowExpandProvider)).call.apply(_ref, [this].concat(args))), _this), _this.state = { expanded: _this.props.expandRow.expanded || [],
+      isClosing: _this.props.expandRow.isClosing || [] }, _this.onClosed = function (closedRow) {
+      _this.setState({ isClosing: _this.state.isClosing.filter(function (value) {
+          return value !== closedRow;
+        }) });
+    }, _this.handleRowExpand = function (rowKey, expanded, rowIndex, e) {
       var _this$props = _this.props,
@@ -65,6 +70,11 @@ data = _this$props.data,
       var currExpanded = [].concat(_toConsumableArray(_this.state.expanded));
+      var isClosing = [].concat(_toConsumableArray(_this.state.isClosing));
 
       if (expanded) {
-        if (onlyOneExpanding) currExpanded = [rowKey];else currExpanded.push(rowKey);
+        if (onlyOneExpanding) {
+          isClosing = isClosing.concat(currExpanded);
+          currExpanded = [rowKey];
+        } else currExpanded.push(rowKey);
       } else {
+        isClosing.push(rowKey);
         currExpanded = currExpanded.filter(function (value) {
@@ -80,3 +90,3 @@ return value !== rowKey;
       _this.setState(function () {
-        return { expanded: currExpanded };
+        return { expanded: currExpanded, isClosing: isClosing };
       });
@@ -121,5 +131,15 @@ }, _this.handleAllRowExpand = function (e, expandAll) {
       if (nextProps.expandRow) {
+        var isClosing = this.state.expanded.reduce(function (acc, cur) {
+          if (!nextProps.expandRow.expanded.includes(cur)) {
+            acc.push(cur);
+          }
+          return acc;
+        }, []);
         this.setState(function () {
+          return { expanded: nextProps.expandRow.expanded, isClosing: isClosing };
+        });
+      } else {
+        this.setState(function () {
           return {
-            expanded: nextProps.expandRow.expanded || _this2.state.expanded
+            expanded: _this2.state.expanded
           };
@@ -142,2 +162,4 @@ });
             expanded: this.state.expanded,
+            isClosing: this.state.isClosing,
+            onClosed: this.onClosed,
             isAnyExpands: _operators2.default.isAnyExpands(data, keyField, this.state.expanded),
@@ -144,0 +166,0 @@ onRowExpand: this.handleRowExpand,

lib/src/row-expand/expand-row.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 _react = require('react');
@@ -16,2 +18,4 @@
 
+var _reactTransitionGroup = require('react-transition-group');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -23,11 +27,31 @@
   var children = _ref.children,
-      rest = _objectWithoutProperties(_ref, ['children']);
+      expanded = _ref.expanded,
+      onClosed = _ref.onClosed,
+      rest = _objectWithoutProperties(_ref, ['children', 'expanded', 'onClosed']);
 
   return _react2.default.createElement(
     'tr',
-    { className: 'expanding-row' },
+    null,
     _react2.default.createElement(
       'td',
-      rest,
-      children
+      _extends({ className: 'reset-expansion-style' }, rest),
+      _react2.default.createElement(
+        _reactTransitionGroup.CSSTransition,
+        {
+          appear: true,
+          'in': expanded,
+          timeout: 400,
+          classNames: 'row-expand-slide',
+          onExited: onClosed
+        },
+        _react2.default.createElement(
+          'div',
+          null,
+          _react2.default.createElement(
+            'div',
+            { className: 'row-expansion-style' },
+            children
+          )
+        )
+      )
     )
@@ -38,9 +62,13 @@ );
 ExpandRow.propTypes = {
-  children: _propTypes2.default.node
+  children: _propTypes2.default.node,
+  expanded: _propTypes2.default.bool,
+  onClosed: _propTypes2.default.func
 };
 
 ExpandRow.defaultProps = {
-  children: null
+  children: null,
+  expanded: false,
+  onClosed: null
 };
 
 exports.default = ExpandRow;

lib/src/row-expand/row-consumer.js

@@ -29,4 +29,4 @@ 'use strict';
     var expanded = expandRow.expanded.includes(key);
+    var isClosing = expandRow.isClosing.includes(key);
     var expandable = !expandRow.nonExpandable || !expandRow.nonExpandable.includes(key);
-
     return [_react2.default.createElement(Component, _extends({}, props, {
@@ -37,7 +37,11 @@ key: key,
       expandRow: _extends({}, expandRow)
-    })), expanded ? _react2.default.createElement(
+    })), expanded || isClosing ? _react2.default.createElement(
       _expandRow2.default,
       {
         key: key + '-expanding',
-        colSpan: props.visibleColumnSize
+        colSpan: props.visibleColumnSize,
+        expanded: expanded,
+        onClosed: function onClosed() {
+          return expandRow.onClosed(key);
+        }
       },
@@ -44,0 +48,0 @@ expandRow.renderer(props.row)

package.json

 {
   "name": "react-bootstrap-table-next",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "description": "Next generation of react-bootstrap-table",
@@ -40,2 +40,3 @@ "main": "./lib/index.js",
     "classnames": "2.2.5",
+    "react-transition-group": "2.5.3",
     "underscore": "1.9.1"
@@ -42,0 +43,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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

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

1057906

increased by19.77%

Lines of code

12312

increased by18.29%

Worsened metrics

Dependency count

7

increased by16.67%

Number of low supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedreact-transition-group@2.5.3

• + Added@babel/runtime@7.26.0(transitive)

• + Addeddom-helpers@3.4.0(transitive)

• + Addedreact-lifecycles-compat@3.0.4(transitive)

• + Addedreact-transition-group@2.5.3(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)