All files / src/Components Faders.jsx

100% Statements 9/9
100% Branches 0/0
100% Functions 2/2
100% Lines 7/7
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 551x 1x   1x 1x                   4x                                     2x                     1x                    
import React, { PropTypes } from 'react';
import Radium from 'radium';
 
const LEFT = 'left';
const RIGHT = 'right';
 
/**
 * Returns the styles that generate a fading effect on the edges of the timeline
 *
 * @param  {object} styles The styles (user-definded/default).Mainly Information about the background, foreground, etc.
 * @param  {string} position The position of the fader. Can only be left or right
 * @param  {string} gradientDirection The direction in which we want to generate fade effect
 * @return {object} The styleing Information for the left or right fader
 */
const faderStyle = (styles, position, gradientDirection) => ({
  zIndex: 2,
  top: '50%',
  position: 'absolute',
  bottom: 'auto',
  transform: 'translateY(-50%)',
  height: '100%',
  width: 20,
  overflow: 'hidden',
  [position]: 40,
  backgroundImage: `linear-gradient(to ${gradientDirection}, ${styles.background}, rgba(248, 248, 248, 0))`
});
 
/**
 * The markup Information for an element that produces the fade effect at the end of the timeline
 *
 * @param  {object} props The props from parent mainly styles
 * @return {StatelessFunctionalReactComponent} Markup Information for the fader
 */
const Faders = (props) => (
  <ul style={{ listStyle: 'none' }}>
    <li style={faderStyle(props.styles, LEFT, RIGHT)} />
    <li style={faderStyle(props.styles, RIGHT, LEFT)} />
  </ul>
);
 
/**
 * The styles that parent will provide
 * @type {Object}
 */
Faders.propTypes = {
  styles: PropTypes.shape({
    foreground: PropTypes.string.isRequired,
    background: PropTypes.string.isRequired,
    outline: PropTypes.string.isRequired,
    maxSize: PropTypes.number.isRequired
  })
};
 
export default Radium(Faders);