Skip to content

Instantly share code, notes, and snippets.

@aholachek
Last active September 22, 2018 23:43
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aholachek/e42153c6e7ee46662ef5b692a89358bd to your computer and use it in GitHub Desktop.
Save aholachek/e42153c6e7ee46662ef5b692a89358bd to your computer and use it in GitHub Desktop.
export default function addAnimation(animateIn, animateOut) {
return function wrapComponent(WrappedComponent) {
return class AnimationHOC extends Component {
state = { animatingOut: false }
componentDidMount() {
if (this.props.isVisible) animateIn(this.child)
}
componentWillReceiveProps(nextProps) {
if (this.props.isVisible && !nextProps.isVisible) {
this.setState({ animatingOut: true })
}
}
shouldComponentUpdate(nextProps) {
if (this.props.isVisible && !nextProps.isVisible) {
animateOut(this.child, () => {
this.setState({ animatingOut: false })
})
return false
}
return true
}
componentDidUpdate(prevProps) {
if (!prevProps.isVisible && this.props.isVisible) {
animateIn(this.child)
}
}
render() {
const { isVisible, ...rest } = this.props
const getRef = component => {
return component && (this.child = ReactDOM.findDOMNode(component))
}
return (
(!!isVisible || this.state.animatingOut) && (
<WrappedComponent {...rest} ref={getRef} />
)
)
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment