All files / lib/Slider/SliderPointer index.js

48.48% Statements 16/33
33.33% Branches 4/12
33.33% Functions 4/12
48.48% Lines 16/33
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 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115                                                                                                    5x             5x     2x       2x 2x       3x       3x 3x           23x   23x   23x           5x       41x           89x             89x         89x    
import React from 'react';
import PropTypes from 'prop-types';
 
/** Child component to display the slider pointer */
class SliderPointer extends React.PureComponent {
  state = {
    previousPosition: null
  }
 
  getDirections = currentPos => {
    const { previousPosition } = this.state;
    if (currentPos > previousPosition) {
      return 1;
    }
    return -1;
  };
 
  getPosition = (event, isTouch) => {
    return isTouch ? event.touches[0].clientX : event.clientX;
  }
 
  onMouseDown = (event, isTouch = false) => {
    if (!isTouch) {
      document.addEventListener('mousemove', this.onMouseMove);
      document.addEventListener('mouseup', this.onMouseUp);
    }
 
    this.setState({
      previousPosition: this.getPosition(event, isTouch)
    });
  };
 
  onMouseUp = () => {
    document.removeEventListener('mousemove', this.onMouseMove);
    document.removeEventListener('mouseup', this.onMouseUp);
  };
 
  onMouseMove = (event, isTouch = false) => {
    const xPos = this.getPosition(event, isTouch);
    const direction = this.getDirections(xPos);
 
    this.props.onMove({
      from: this.sliderRef.getBoundingClientRect().x,
      to: xPos,
      direction,
      isKeyBoard: false
    });
  };
 
  onKeyDown = event => {
    const KEYS = {
      LEFT: 37,
      UP: 38,
      RIGHT: 39,
      DOWN: 40
    };
    
    switch (event.keyCode) {
      case KEYS.UP:
      case KEYS.RIGHT:
        this.props.onMove({
          isKeyBoard: true,
          direction: 1
        });
        event.preventDefault();
        break;
 
      case KEYS.DOWN:
      case KEYS.LEFT:
        this.props.onMove({
          isKeyBoard: true,
          direction: -1
        });
        event.preventDefault();
        break;
    }
  };
 
  
  render() {
    const { position } = this.props;
 
    const pointerStyle = {left: `calc(${position}%`};
 
    return (
      <div
        className='cui-slider__pointer'
        onMouseDown={e => this.onMouseDown(e)}
        onTouchStart={e => this.onMouseDown(e, true)}
        onTouchMove={e => this.onMouseMove(e, true)}
        onKeyDown={e => this.onKeyDown(e)}
        role='button'
        tabIndex={0}
        style={pointerStyle}
        ref={ref => this.sliderRef = ref}
      />
    );
  }
}
 
SliderPointer.propTypes = {
  /** @prop Set Slider Pointer's position | 0 */
  position: PropTypes.number,
  /** @prop Callback function invoked when user moves the Slider Pointer | null */
  onMove: PropTypes.func,
};
 
SliderPointer.defaultProps = {
  position: 0,
  onMove: null,
};
 
SliderPointer.displayName = 'SliderPointer';
 
export default SliderPointer;