All files / src/Components Faders.jsx

100% Statements 9/9
100% Branches 0/0
100% Functions 2/2
100% Lines 8/8
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 601x 1x   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 = {
  base: {
    zIndex: 2,
    top: '50%',
    position: 'absolute',
    bottom: 'auto',
    transform: 'translateY(-50%)',
    height: '100%',
    width: 20,
    overflow: 'hidden',
  },
  specific: (styles, position, gradientDirection) => ({
    [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.base, faderStyle.specific(props.styles, LEFT, RIGHT) ]} />
    <li style={[ faderStyle.base, faderStyle.specific(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);