Advertisement
Guest User

Untitled

a guest
Feb 23rd, 2017
82
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.25 KB | None | 0 0
  1. import React, { Component } from 'react'
  2. import ReactDOM from 'react-dom'
  3. import ReactTransitionGroup from 'react-addons-transition-group'
  4.  
  5.  
  6. export default class Animate extends Component {
  7. render() {
  8. const { trigger, children, onEnter, onLeave, customClassName } = this.props
  9. return (
  10. <ReactTransitionGroup component="div" className={ customClassName }>
  11. { trigger ? <InnerComponent onEnter={ onEnter } onLeave={ onLeave } content={ children }/> : null }
  12. </ReactTransitionGroup>
  13. )
  14. }
  15.  
  16. static propTypes = {
  17. onEnter: React.PropTypes.func.isRequired,
  18. onLeave: React.PropTypes.func.isRequired,
  19. }
  20. }
  21.  
  22. class InnerComponent extends Component {
  23. componentWillEnter(cb) {
  24. const el = ReactDOM.findDOMNode(this)
  25. const root = el.parentNode
  26. this.props.onEnter({ el, cb, root })
  27. }
  28.  
  29. componentWillLeave(cb) {
  30. const el = ReactDOM.findDOMNode(this)
  31. const root = el.parentNode
  32. this.props.onLeave({ el, cb, root })
  33. }
  34.  
  35. render() {
  36. return (
  37. <div>
  38. { this.props.content }
  39. </div>
  40. )
  41. }
  42.  
  43. static propTypes = {
  44. onEnter: React.PropTypes.func.isRequired,
  45. onLeave: React.PropTypes.func.isRequired,
  46. content: React.PropTypes.element.isRequired,
  47. customClassName: React.PropTypes.string
  48. }
  49. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement