From d84fd5c80122b03dc9e1988ac11388c954cdbaa0 Mon Sep 17 00:00:00 2001
From: Yassien <11986226+YassienW@users.noreply.github.com>
Date: Sat, 23 Feb 2019 22:40:05 +0200
Subject: [PATCH 1/4] CSS Animation for row expansion
---
packages/react-bootstrap-table2/package.json | 1 +
.../src/contexts/row-expand-context.js | 25 ++++++++++++-----
.../src/row-expand/expand-row.js | 27 +++++++++++++++----
.../src/row-expand/row-consumer.js | 6 +++--
.../style/react-bootstrap-table2.scss | 25 +++++++++++++----
5 files changed, 65 insertions(+), 19 deletions(-)
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index 5bec584..b698a93 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -37,6 +37,7 @@
],
"dependencies": {
"classnames": "2.2.5",
+ "react-transition-group": "^2.5.3",
"underscore": "1.9.1"
},
"peerDependencies": {
diff --git a/packages/react-bootstrap-table2/src/contexts/row-expand-context.js b/packages/react-bootstrap-table2/src/contexts/row-expand-context.js
index 9c038ab..ba21d12 100644
--- a/packages/react-bootstrap-table2/src/contexts/row-expand-context.js
+++ b/packages/react-bootstrap-table2/src/contexts/row-expand-context.js
@@ -10,9 +10,10 @@ class RowExpandProvider extends React.Component {
children: PropTypes.node.isRequired,
data: PropTypes.array.isRequired,
keyField: PropTypes.string.isRequired
- }
+ };
- state = { expanded: this.props.expandRow.expanded || [] };
+ state = { expanded: this.props.expandRow.expanded || [],
+ isClosing: this.props.expandRow.isClosing || [] };
componentWillReceiveProps(nextProps) {
if (nextProps.expandRow) {
@@ -22,6 +23,10 @@ class RowExpandProvider extends React.Component {
}
}
+ onClosed = (closedRow) => {
+ this.setState({ isClosing: this.state.isClosing.filter(value => value !== closedRow) });
+ };
+
handleRowExpand = (rowKey, expanded, rowIndex, e) => {
const { data, keyField, expandRow: { onExpand, onlyOneExpanding, nonExpandable } } = this.props;
if (nonExpandable && nonExpandable.includes(rowKey)) {
@@ -29,11 +34,15 @@ class RowExpandProvider extends React.Component {
}
let currExpanded = [...this.state.expanded];
+ let isClosing = [...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(value => value !== rowKey);
}
@@ -41,8 +50,8 @@ class RowExpandProvider extends React.Component {
const row = dataOperator.getRowByRowId(data, keyField, rowKey);
onExpand(row, expanded, rowIndex, e);
}
- this.setState(() => ({ expanded: currExpanded }));
- }
+ this.setState(() => ({ expanded: currExpanded, isClosing }));
+ };
handleAllRowExpand = (e, expandAll) => {
const {
@@ -68,7 +77,7 @@ class RowExpandProvider extends React.Component {
}
this.setState(() => ({ expanded: currExpanded }));
- }
+ };
render() {
const { data, keyField } = this.props;
@@ -78,6 +87,8 @@ class RowExpandProvider extends React.Component {
...this.props.expandRow,
nonExpandable: this.props.expandRow.nonExpandable,
expanded: this.state.expanded,
+ isClosing: this.state.isClosing,
+ onClosed: this.onClosed,
isAnyExpands: dataOperator.isAnyExpands(data, keyField, this.state.expanded),
onRowExpand: this.handleRowExpand,
onAllRowExpand: this.handleAllRowExpand
diff --git a/packages/react-bootstrap-table2/src/row-expand/expand-row.js b/packages/react-bootstrap-table2/src/row-expand/expand-row.js
index 0a89628..9505e85 100644
--- a/packages/react-bootstrap-table2/src/row-expand/expand-row.js
+++ b/packages/react-bootstrap-table2/src/row-expand/expand-row.js
@@ -1,18 +1,35 @@
import React from 'react';
import PropTypes from 'prop-types';
+import { CSSTransition } from 'react-transition-group';
-const ExpandRow = ({ children, ...rest }) => (
-
- | { children } |
+const ExpandRow = ({ children, expanded, onClosed, ...rest }) => (
+
+ |
+
+
+ { children }
+
+
+ |
);
ExpandRow.propTypes = {
- children: PropTypes.node
+ children: PropTypes.node,
+ expanded: PropTypes.bool,
+ onClosed: PropTypes.func
};
ExpandRow.defaultProps = {
- children: null
+ children: null,
+ expanded: false,
+ onClosed: null
};
export default ExpandRow;
diff --git a/packages/react-bootstrap-table2/src/row-expand/row-consumer.js b/packages/react-bootstrap-table2/src/row-expand/row-consumer.js
index 77f5e36..92c21e7 100644
--- a/packages/react-bootstrap-table2/src/row-expand/row-consumer.js
+++ b/packages/react-bootstrap-table2/src/row-expand/row-consumer.js
@@ -8,8 +8,8 @@ export default (Component, visibleColumnSize) => {
const key = props.value;
const expanded = expandRow.expanded.includes(key);
+ const isClosing = expandRow.isClosing.includes(key);
const expandable = !expandRow.nonExpandable || !expandRow.nonExpandable.includes(key);
-
return [
{
expandable={ expandable }
expandRow={ { ...expandRow } }
/>,
- expanded ? expandRow.onClosed(key) }
>
{ expandRow.renderer(props.row) }
: null
diff --git a/packages/react-bootstrap-table2/style/react-bootstrap-table2.scss b/packages/react-bootstrap-table2/style/react-bootstrap-table2.scss
index 5974e45..6ec20e1 100644
--- a/packages/react-bootstrap-table2/style/react-bootstrap-table2.scss
+++ b/packages/react-bootstrap-table2/style/react-bootstrap-table2.scss
@@ -68,10 +68,6 @@
text-align: center;
}
- tr.expanding-row {
- padding: 5px;
- }
-
td.react-bootstrap-table-editing-cell {
.animated {
animation-fill-mode: both;
@@ -161,4 +157,23 @@
animation-name: bounceOut;
}
}
-}
\ No newline at end of file
+ .reset-expansion-style{
+ padding: 0 8px 0 8px;
+ }
+ .row-expand-slide-appear{
+ max-height: 0;
+ overflow: hidden;
+ }
+ .row-expand-slide-appear-active{
+ max-height: 1000px;
+ transition: max-height 3s linear;
+ }
+ .row-expand-slide-exit{
+ max-height: 1000px;
+ }
+ .row-expand-slide-exit-active{
+ max-height: 0;
+ overflow: hidden;
+ transition: max-height 400ms cubic-bezier(0, 0.95, 0, 0.95)
+ }
+}
From 33c026c7e2fe6f24431fff0ece653c7fe94b3c42 Mon Sep 17 00:00:00 2001
From: Yassien <11986226+YassienW@users.noreply.github.com>
Date: Mon, 25 Feb 2019 13:01:42 +0200
Subject: [PATCH 2/4] Added original padding without breaking the animation
---
packages/react-bootstrap-table2/src/row-expand/expand-row.js | 4 +++-
.../react-bootstrap-table2/style/react-bootstrap-table2.scss | 5 ++++-
2 files changed, 7 insertions(+), 2 deletions(-)
diff --git a/packages/react-bootstrap-table2/src/row-expand/expand-row.js b/packages/react-bootstrap-table2/src/row-expand/expand-row.js
index 9505e85..3699ada 100644
--- a/packages/react-bootstrap-table2/src/row-expand/expand-row.js
+++ b/packages/react-bootstrap-table2/src/row-expand/expand-row.js
@@ -13,7 +13,9 @@ const ExpandRow = ({ children, expanded, onClosed, ...rest }) => (
onExited={ onClosed }
>
- { children }
+
+ { children }
+