Skip to content

Row expand animation v2 #1289

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: develop
Choose a base branch
from
Open

Row expand animation v2 #1289

Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8333cea
Fixed animation not triggering on row expand
YassienW Mar 10, 2020
f4650fa
Improved row expand
YassienW Mar 13, 2020
2f5f31d
Avoid incorrectly setting elementHeight
YassienW Mar 13, 2020
e9bb3e8
Removed useless constructor
YassienW Mar 13, 2020
08c1fa0
Added property to control row expansion animation
YassienW Mar 13, 2020
121b3de
Added disable animation example to storybook
YassienW Mar 13, 2020
17a0f5b
Fixed formatting errors
YassienW Mar 13, 2020
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Avoid incorrectly setting elementHeight
  • Loading branch information
@YassienW
YassienW committed Mar 13, 2020
commit 2f5f31d375a4d60d1ca341756a051928e852e3a7
10 changes: 5 additions & 5 deletions packages/react-bootstrap-table2/src/row-expand/expand-row.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@ import { Transition } from 'react-transition-group';
export default class ExpandRow extends React.Component {
constructor(props) {
super(props);

this.elementHeight = 0;
}
onEnter() {
this.expandableDiv = document.getElementById(`expansion-div-${this.props.id}`);
this.elementHeight = this.expandableDiv.offsetHeight;
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);
Expand Down Expand Up @@ -48,13 +48,13 @@ ExpandRow.propTypes = {
expanded: PropTypes.bool,
onClosed: PropTypes.func,
className: PropTypes.string,
id: PropTypes.string
id: PropTypes.number
};

ExpandRow.defaultProps = {
children: null,
expanded: false,
onClosed: null,
className: '',
id: ''
id: null
};