export default function TimeRangeSliderFactory()

in src/components/common/time-range-slider.js [66:185]
53 lines of code
3 McCabe index (conditional complexity)

export default function TimeRangeSliderFactory(
  PlaybackControls,
  RangeSlider,
  TimeSliderMarker,
  AnimationController
) {
  class TimeRangeSlider extends Component {
    static propTypes = {
      onChange: PropTypes.func.isRequired,
      domain: PropTypes.arrayOf(PropTypes.number).isRequired,
      value: PropTypes.arrayOf(PropTypes.number).isRequired,
      step: PropTypes.number.isRequired,
      plotType: PropTypes.string,
      histogram: PropTypes.arrayOf(PropTypes.any),
      lineChart: PropTypes.object,
      toggleAnimation: PropTypes.func.isRequired,
      isAnimatable: PropTypes.bool,
      isEnlarged: PropTypes.bool,
      speed: PropTypes.number,
      timeFormat: PropTypes.string,
      hideTimeTitle: PropTypes.bool
    };

    constructor(props) {
      super(props);
      this._sliderThrottle = throttle((...value) => this.props.onChange(...value), 20);
    }

    timeSelector = props => props.currentTime;
    formatSelector = props => props.format;
    displayTimeSelector = createSelector(
      this.timeSelector,
      this.formatSelector,
      (currentTime, format) => {
        const groupTime = Array.isArray(currentTime) ? currentTime : [currentTime];
        return groupTime.reduce(
          (accu, curr) => {
            const displayDateTime = moment.utc(curr).format(format);
            const [displayDate, displayTime] = displayDateTime.split(' ');

            if (!accu.displayDate.includes(displayDate)) {
              accu.displayDate.push(displayDate);
            }
            accu.displayTime.push(displayTime);

            return accu;
          },
          {displayDate: [], displayTime: []}
        );
      }
    );

    _sliderUpdate = args => {
      this._sliderThrottle.cancel();
      this._sliderThrottle(args);
    };

    render() {
      const {domain, value, isEnlarged, hideTimeTitle} = this.props;

      return (
        <div className="time-range-slider">
          {!hideTimeTitle ? (
            <TimeTitle timeFormat={this.props.timeFormat} value={value} isEnlarged={isEnlarged} />
          ) : null}
          <StyledSliderContainer className="time-range-slider__container" isEnlarged={isEnlarged}>
            {isEnlarged ? (
              <AnimationController
                value={this.props.value}
                domain={this.props.domain}
                speed={this.props.speed}
                startAnimation={this.props.toggleAnimation}
                pauseAnimation={this.props.toggleAnimation}
                updateAnimation={this.props.onChange}
              >
                {(isAnimating, start, pause, reset) => (
                  <PlaybackControls
                    isAnimatable={this.props.isAnimatable}
                    isAnimating={isAnimating}
                    width={animationControlWidth}
                    pauseAnimation={pause}
                    resetAnimation={reset}
                    startAnimation={start}
                    buttonHeight="12px"
                    buttonStyle="secondary"
                  />
                )}
              </AnimationController>
            ) : null}
            <div
              style={{
                width: isEnlarged ? `calc(100% - ${animationControlWidth}px)` : '100%'
              }}
            >
              <RangeSlider
                range={domain}
                value0={value[0]}
                value1={value[1]}
                histogram={this.props.histogram}
                lineChart={this.props.lineChart}
                plotType={this.props.plotType}
                isEnlarged={isEnlarged}
                showInput={false}
                step={this.props.step}
                onChange={this._sliderUpdate}
                xAxis={TimeSliderMarker}
              />
            </div>
          </StyledSliderContainer>
        </div>
      );
    }
  }

  TimeRangeSlider.defaultProps = {
    timeFormat: DEFAULT_TIME_FORMAT
  };

  return TimeRangeSlider;
}