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);
|