diff --git a/packages/react-bootstrap-table2-example/examples/row-expand/disable-animation.js b/packages/react-bootstrap-table2-example/examples/row-expand/disable-animation.js
new file mode 100644
index 000000000..330d058c1
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/row-expand/disable-animation.js
@@ -0,0 +1,74 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsExpandRowsGenerator } from 'utils/common';
+
+const products = productsExpandRowsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const expandRow = {
+ renderer: (row, rowIndex) => (
+
+
{ `This Expand row is belong to rowKey ${row.id} and index: ${rowIndex}` }
+
You can render anything here, also you can add additional data on every row object
+
expandRow.renderer callback will pass the origin row object to you
+
+ ),
+ animate: false
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const expandRow = {
+ renderer: row => (
+
+
{ \`This Expand row is belong to rowKey $\{row.id}\` }
+
You can render anything here, also you can add additional data on every row object
+
expandRow.renderer callback will pass the origin row object to you
+
+ ),
+ animate: false
+};
+
+
+`;
+
+export default () => (
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 9bca826bf..fb4fc01a3 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -165,6 +165,7 @@ import SelectionColumnPositionTable from 'examples/row-selection/selection-colum
// work on row expand
import BasicRowExpand from 'examples/row-expand';
+import DisableExpandAnimation from 'examples/row-expand/disable-animation';
import RowExpandManagement from 'examples/row-expand/expand-management';
import NonExpandableRows from 'examples/row-expand/non-expandable-rows';
import ExpandColumn from 'examples/row-expand/expand-column';
@@ -429,6 +430,7 @@ storiesOf('Row Selection', module)
storiesOf('Row Expand', module)
.addDecorator(bootstrapStyle())
.add('Basic Row Expand', () => )
+ .add('Disable Expand Animation', () => )
.add('Expand Management', () => )
.add('Non Expandabled Rows', () => )
.add('Expand Indicator', () => )
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
index 21d55a36d..889179989 100644
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -207,6 +207,7 @@ BootstrapTable.propTypes = {
}),
expandRow: PropTypes.shape({
renderer: PropTypes.func,
+ animate: PropTypes.bool,
expanded: PropTypes.array,
onExpand: PropTypes.func,
onExpandAll: PropTypes.func,
@@ -273,6 +274,7 @@ BootstrapTable.defaultProps = {
},
expandRow: {
renderer: undefined,
+ animate: true,
expanded: [],
nonExpandable: []
},
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 140ce9036..0218903b1 100644
--- a/packages/react-bootstrap-table2/src/row-expand/expand-row.js
+++ b/packages/react-bootstrap-table2/src/row-expand/expand-row.js
@@ -1,40 +1,76 @@
import cs from 'classnames';
import React from 'react';
import PropTypes from 'prop-types';
-import { CSSTransition } from 'react-transition-group';
+import { Transition } from 'react-transition-group';
-const ExpandRow = ({ children, expanded, onClosed, className, ...rest }) => (
-
-
-
-
-
- { children }
-
+export default class ExpandRow extends React.Component {
+ componentDidUpdate(prevProps) {
+ if (!this.props.animate && !this.props.expanded && prevProps.expanded !== this.props.expanded) {
+ this.props.onClosed();
+ }
+ }
+ onEnter() {
+ this.expandableDiv = document.getElementById(`expansion-div-${this.props.id}`);
+ if (!this.elementHeight) {
+ this.elementHeight = this.expandableDiv.offsetHeight;
+ }
+ this.expandableDiv.style.height = '0px';
+ const elementHeight = this.elementHeight;
+ setTimeout(() => { this.expandableDiv.style.height = `${elementHeight}px`; }, 1);
+ }
+ onExit() {
+ this.expandableDiv.style.height = '0px';
+ }
+ render() {
+ const { children, expanded, onClosed, className, id, animate, ...rest } = this.props;
+
+ let expansionDiv = (
+ |
-
-);
+
+ );
+
+ if (animate) {
+ expansionDiv = (
+ this.onEnter() }
+ onExit={ () => this.onExit() }
+ onExited={ onClosed }
+ unmountOnExit
+ >
+ {expansionDiv}
+
+ );
+ }
+
+ return (
+
+
+ {expansionDiv}
+ |
+
+ );
+ }
+}
ExpandRow.propTypes = {
children: PropTypes.node,
expanded: PropTypes.bool,
onClosed: PropTypes.func,
- className: PropTypes.string
+ className: PropTypes.string,
+ animate: PropTypes.bool,
+ id: PropTypes.number
};
ExpandRow.defaultProps = {
children: null,
expanded: false,
onClosed: null,
- className: ''
+ className: '',
+ animate: true,
+ id: 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 0db8b64bf..1af668208 100644
--- a/packages/react-bootstrap-table2/src/row-expand/row-consumer.js
+++ b/packages/react-bootstrap-table2/src/row-expand/row-consumer.js
@@ -34,7 +34,9 @@ export default (Component) => {
className={ cs(props.className, parentClassName) }
/>,
expanded || isClosing ? expandRow.onClosed(key) }
diff --git a/packages/react-bootstrap-table2/style/react-bootstrap-table2.scss b/packages/react-bootstrap-table2/style/react-bootstrap-table2.scss
index e2a0895b9..7a926eccb 100644
--- a/packages/react-bootstrap-table2/style/react-bootstrap-table2.scss
+++ b/packages/react-bootstrap-table2/style/react-bootstrap-table2.scss
@@ -163,20 +163,8 @@
.row-expansion-style{
padding: 8px;
}
- .row-expand-slide-appear{
- max-height: 0;
+ .row-expansion-inner{
+ transition: height 0.5s ease;
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)
- }
}