render()

in src/components/filters/time-widget.js [134:190]
56 lines of code
4 McCabe index (conditional complexity)

    render() {
      const {datasets, filter, index, readOnly, setFilter, showTimeDisplay} = this.props;

      const {showSpeedControl} = this.state;
      return (
        <TimeBottomWidgetInner className="bottom-widget--inner">
          <TopSectionWrapper>
            <StyledTitle className="bottom-widget__field">
              <CenterFlexbox className="bottom-widget__icon">
                <Clock height="15px" />
              </CenterFlexbox>
              <SelectTextBold>{filter.name}</SelectTextBold>
            </StyledTitle>
            <StyledTitle className="bottom-widget__y-axis">
              <CenterFlexbox className="bottom-widget__icon">
                <LineChart height="15px" />
              </CenterFlexbox>
              <div className="bottom-widget__field-select">
                <FieldSelector
                  fields={this.yAxisFieldsSelector(datasets[filter.dataId[0]])}
                  placement="top"
                  id="selected-time-widget-field"
                  value={filter.yAxis ? filter.yAxis.name : null}
                  onSelect={this._setFilterPlotYAxis}
                  placeholder="placeholder.yAxis"
                  erasable
                  showToken={false}
                />
              </div>
            </StyledTitle>
            <StyledTitle className="bottom-widget__speed">
              <SpeedControl
                onClick={this._toggleSpeedControl}
                showSpeedControl={showSpeedControl}
                updateAnimationSpeed={this._updateAnimationSpeed}
                speed={filter.speed}
              />
            </StyledTitle>
            {!readOnly ? (
              <CenterFlexbox>
                <IconRoundSmall>
                  <Close height="12px" onClick={this._onClose} />
                </IconRoundSmall>
              </CenterFlexbox>
            ) : null}
          </TopSectionWrapper>
          <TimeRangeFilter
            filter={filter}
            setFilter={value => setFilter(index, 'value', value)}
            toggleAnimation={this._toggleAnimation}
            hideTimeTitle={showTimeDisplay}
            isAnimatable
          />
          {showTimeDisplay ? <FloatingTimeDisplay currentTime={filter.value} /> : null}
        </TimeBottomWidgetInner>
      );
    }