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 = ( +
+
+ {children}
- - - -); +
+ ); + + 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) - } }