All files VerticalTimelineElement.jsx

93.33% Statements 14/15
80% Branches 8/10
100% Functions 3/3
93.33% Lines 14/15
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 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73              2x 2x 2x       2x 2x         4x 4x   4x   4x       4x 2x     4x                               1x                         1x                      
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import VisibilitySensor from 'react-visibility-sensor';
 
 
class VerticalTimelineElement extends Component {
  constructor(props) {
    super(props);
    this.onVisibilitySensorChange = this.onVisibilitySensorChange.bind(this);
    this.state = { visible: false };
  }
 
  onVisibilitySensorChange(isVisible) {
    Eif (isVisible) {
      this.setState({ visible: true });
    }
  }
 
  render() {
    const { id, children, icon, iconStyle, date, position } = this.props;
    let { className } = this.props;
 
    className += ' vertical-timeline-element';
 
    Iif (position === 'left') {
      className += ' vertical-timeline-element--left';
    }
 
    if (position === 'right') {
      className += ' vertical-timeline-element--right';
    }
 
    return (
      <div id={id} className={className}>
        <VisibilitySensor onChange={this.onVisibilitySensorChange}>
          <div>
            <span style={iconStyle} className={`vertical-timeline-element-icon ${this.state.visible ? 'bounce-in' : 'is-hidden'}`}>{icon}</span>
            <div className={`vertical-timeline-element-content ${this.state.visible ? 'bounce-in' : 'is-hidden'}`}>
              {children}
              <span className="vertical-timeline-element-date">{date}</span>
            </div>
          </div>
        </VisibilitySensor>
      </div>
    );
  }
}
 
VerticalTimelineElement.propTypes = {
  id: PropTypes.string,
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node
  ]).isRequired,
  className: PropTypes.string,
  icon: PropTypes.element,
  iconStyle: PropTypes.shape({}),
  date: PropTypes.string,
  position: PropTypes.string
};
 
VerticalTimelineElement.defaultProps = {
  id: '',
  children: '',
  className: '',
  icon: null,
  iconStyle: null,
  date: '',
  position: ''
};
 
export default VerticalTimelineElement;