All files / src/components/ExpandableAnimationItem index.jsx

100% Statements 6/6
66.67% Branches 4/6
100% Functions 3/3
100% Lines 6/6
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36                1x       1x     1x     1x 1x                 1x              
import styles from './style.postcss';
 
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
 
class ExpandableAnimationItem extends PureComponent {
 
  _setUpHeight(node) {
    this.height = node && node.offsetHeight;
  }
 
  render() {
    const outerStyle = {
      height: this.props.isExpand ? this.height : 0,
    };
    const innerStyle = {
      marginTop: this.props.isExpand ? 0 : - this.height,
    };
    return <div className={styles.ExpandableAnimationItem} style={outerStyle}>
      <div ref={(node) => this._setUpHeight(node)}
          className={styles.ExpandableAnimationItem_inner}
          style={innerStyle}>
        {this.props.children}
      </div>
    </div>;
  }
}
 
ExpandableAnimationItem.propTypes = {
  isExpand: PropTypes.bool,
  height: PropTypes.number,
  children: PropTypes.node,
};
 
export default ExpandableAnimationItem;