render()

in src/components/common/time-range-slider.js [123:177]

• 54 lines of code
• 4 McCabe index (conditional complexity)

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