all files / Components/ HorizontalTimelineButtons.jsx

92.31% Statements 24/26
60% Branches 6/10
50% Functions 2/4
100% Lines 12/12
4 statements, 1 function, 3 branches Ignored     
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 74 75 76 77 78 79 80 81 82 83 84 85                                                                                                                                                    
import React, { PropTypes } from 'react';
import Radium from 'radium';
 
// icons
import FaAngleLeft from 'react-icons/lib/fa/angle-left';
import FaAngleRight from 'react-icons/lib/fa/angle-right';
 
import '../css/timeline.css';
 
// this handles the rendering part of the buttons that appear on either side of
// the timeline.
 
const styles = {
  both: {
    position: 'absolute',
    zIndex: 2,
    top: '50%',
    bottom: 'auto',
    transform: 'translateY(-50%)',
    height: 20,
    width: 29
  },
  inactive: {
    color: '#dfdfdf',
    cursor: 'not-allowed'
  }
};
 
let Button = (props) => (
  <li onClick={ props.onClick.bind(null, props.side)}>
    <a
      key={props.side}
      style={[
        { ':hover': { border: `2px solid ${props.styles.foreground}` }, [props.side]: 0 },
        props.statusStyles
      ]}>
      { props.icon }
    </a>
  </li>
);
 
Button.propTypes = {
  side: PropTypes.oneOf([ 'left', 'right' ]),
  icon: PropTypes.object.isRequired,
  styles: PropTypes.object,
  onClick: PropTypes.func.isRequired,
  statusStyles: PropTypes.shape({
    color: PropTypes.string.isRequired,
    cursor: PropTypes.oneOf([ 'pointer', 'not-allowed' ])
  })
};
 
Button = Radium(Button);
 
const HorizontalTimelineButtons = (props) => (
  <ul className='cd-timeline-navigation' style={{ listStyle: 'none' }} >
    <Button
      icon={<FaAngleLeft style={ styles.both } />}
      onClick={props.updateSlide}
      side={'left'}
      statusStyles={props.position === 0 ? styles.inactive : { color: props.styles.foreground, cursor: 'pointer' } }
      styles={props.styles}
    />
    <Button
      icon={<FaAngleRight style={ styles.both } />}
      onClick={props.updateSlide}
      side={'right'}
      statusStyles={props.position === props.maxPosition ? styles.inactive : {
        color: props.styles.foreground, cursor: 'pointer'
      } }
      styles={props.styles}
    />
  </ul>
);
 
HorizontalTimelineButtons.propTypes = {
  updateSlide: PropTypes.func.isRequired,
  position: PropTypes.number.isRequired,
  styles: PropTypes.object,
  maxPosition: PropTypes.number.isRequired
};
 
export default Radium(HorizontalTimelineButtons);