render()

in packages/eui/src/components/form/range/range.tsx [136:335]

• 189 lines of code
• 31 McCabe index (conditional complexity)

  render() {
    const { defaultFullWidth } = this.context as FormContextValue;
    const {
      className,
      compressed,
      disabled,
      fullWidth = defaultFullWidth,
      isLoading,
      readOnly,
      id: propsId,
      max,
      min,
      name,
      step,
      showLabels,
      showInput,
      inputPopoverProps,
      showTicks,
      tickInterval,
      ticks,
      levels,
      showRange,
      showValue,
      valueAppend,
      valuePrepend,
      onBlur,
      onChange,
      onFocus,
      value,
      tabIndex,
      isInvalid,
      theme,
      ...rest
    } = this.props;

    const { id } = this.state;

    const showInputOnly = showInput === 'inputWithPopover';
    const canShowDropdown = showInputOnly && !readOnly && !disabled;

    const theInput: ReactNode = !!showInput ? (
      <EuiRangeInput
        id={id}
        min={min}
        max={max}
        step={step}
        value={value}
        readOnly={readOnly}
        disabled={disabled}
        compressed={compressed}
        onChange={this.handleOnChange}
        name={name}
        onFocus={canShowDropdown ? this.onInputFocus : onFocus}
        onBlur={canShowDropdown ? this.onInputBlur : onBlur}
        fullWidth={showInputOnly && fullWidth}
        isLoading={showInputOnly && isLoading}
        isInvalid={isInvalid}
        autoSize={!showInputOnly}
        {...rest}
      />
    ) : null;

    const classes = classNames('euiRange', className);

    const styles = euiRangeStyles(theme);
    const cssStyles = [styles.euiRange, showInput && styles.hasInput];
    const thumbColor = levels && getLevelColor(levels, Number(value));

    const sliderScreenReaderInstructions = (
      <EuiI18n
        token="euiRange.sliderScreenReaderInstructions"
        default="You are in a custom range slider. Use the Up and Down arrow keys to change the value."
      />
    );

    const theRange = (
      <EuiRangeWrapper
        className={classes}
        css={cssStyles}
        fullWidth={fullWidth}
        compressed={compressed}
      >
        {showLabels && (
          <EuiRangeLabel side="min" disabled={disabled}>
            {min}
          </EuiRangeLabel>
        )}
        <EuiRangeTrack
          trackWidth={this.state.trackWidth}
          disabled={disabled}
          compressed={compressed}
          max={max}
          min={min}
          step={step}
          showTicks={showTicks}
          tickInterval={tickInterval}
          ticks={ticks}
          levels={levels}
          onChange={this.handleOnChange}
          value={value}
          aria-hidden={!!showInput}
          showRange={showRange}
        >
          <EuiRangeSlider
            ariaValueText={
              ticks ? this.handleAriaValueText(ticks, value) : undefined
            }
            id={showInput ? undefined : id} // Attach id only to the input if there is one
            name={name}
            min={min}
            max={max}
            step={step}
            value={value}
            disabled={disabled}
            onChange={this.handleOnChange}
            showTicks={showTicks}
            showRange={showRange}
            tabIndex={showInput ? -1 : tabIndex}
            onMouseDown={
              showInputOnly
                ? () => (this.preventPopoverClose = true)
                : undefined
            }
            onFocus={showInput === true ? undefined : onFocus}
            onBlur={showInputOnly ? this.onInputBlur : onBlur}
            aria-hidden={!!showInput}
            thumbColor={thumbColor}
            {...rest}
            onResize={this.setTrackWidth}
          />

          {showRange && this.isValid && (
            <EuiRangeHighlight
              showTicks={showTicks}
              min={Number(min)}
              max={Number(max)}
              lowerValue={Number(min)}
              upperValue={Number(value)}
              levels={levels}
              trackWidth={this.state.trackWidth}
            />
          )}

          {showValue && !!String(value).length && (
            <EuiRangeTooltip
              value={value}
              max={max}
              min={min}
              name={name}
              showTicks={showTicks}
              valuePrepend={valuePrepend}
              valueAppend={valueAppend}
            />
          )}
        </EuiRangeTrack>
        {showLabels && (
          <EuiRangeLabel side="max" disabled={disabled}>
            {max}
          </EuiRangeLabel>
        )}
        {showInput && !showInputOnly && (
          <>
            <div
              className={
                showTicks || ticks
                  ? 'euiRange__slimHorizontalSpacer'
                  : 'euiRange__horizontalSpacer'
              }
              css={
                showTicks || ticks
                  ? styles.euiRange__slimHorizontalSpacer
                  : styles.euiRange__horizontalSpacer
              }
            />
            {theInput}
          </>
        )}
      </EuiRangeWrapper>
    );

    const thePopover = showInputOnly ? (
      <EuiInputPopover
        {...inputPopoverProps}
        className={classNames(
          'euiRange__popover',
          inputPopoverProps?.className
        )}
        input={theInput!} // `showInputOnly` confirms existence
        fullWidth={fullWidth}
        isOpen={this.state.isPopoverOpen}
        closePopover={this.closePopover}
        disableFocusTrap={true}
        popoverScreenReaderText={sliderScreenReaderInstructions}
      >
        {theRange}
      </EuiInputPopover>
    ) : undefined;

    return thePopover ? thePopover : theRange;
  }