generator-bingo-dig-h5/app/templates/libs/dig-h5/components/transition-groups/slide-in.jsx

Bingo-dig-h5 generator by BINGO.DIG

var React = require('react/addons');
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var Classable = require('../../mixins/classable');

var SlideIn = React.createClass({

  mixins: [Classable],

  propTypes: {
    direction: React.PropTypes.oneOf(['left', 'right', 'up', 'down']),
    isInTab: React.PropTypes.bool
  },

  getDefaultProps: function() {
    return {
      direction: 'left',
      isInTab: false
    };
  },

  render: function() {
    var {
      className,
      direction,
      ...other
    } = this.props;
    var classes = this.getClasses('dig-transition-slide-in', {
      'dig-transition-slide-in-tab': this.props.isInTab
    });

    classes += ' dig-is-' + this.props.direction;

    //Add a custom className to every child
    React.Children.forEach(this.props.children, function(child) {
      child.props.className = child.props.className ?
        child.props.className + ' dig-transition-slide-in-child':
        'dig-transition-slide-in-child';
    });

    return (
      <ReactCSSTransitionGroup {...other}
        className={classes}
        transitionName="dig-transition-slide-in"
        component="div">
        {this.props.children}
      </ReactCSSTransitionGroup>
    );
  }

});

module.exports = SlideIn;