render()

in src/components/view/Filter/Filter.tsx [284:332]

• 49 lines of code
• 5 McCabe index (conditional complexity)

  render() {
    const [type, field] = separateTypeAndField(this.props.selectedField);
    return (
      <div className="gf-form-inline">
        <FieldLabel
          value={field}
          type={type}
          onRemove={this.props.remove}
          items={getFilteredListFields(this.props.selectedField, getFilterFields(this.props.schema))}
          onChange={(item: string) => this.onChangeField(item)}
        />
        <Segment
          Component={<div className="gf-form-label pointer">{this.props.selectedOperators}</div>}
          options={this.state.operators}
          className="width-3"
          allowCustomValue={false}
          onChange={this.onChangeOperator}
        />
        {isDateTimeType(this.state.fieldType as PropertyType) ? 
          <DateTimePicker 
            className={cx('datePicker', styles)} 
            onChange={this.onDateChange} 
            value={this.state.dateValue} 
            clearAriaLabel="Clear value"
            disableClock={true} 
            locale="en"
            format="MM/dd/yy hh:mm:ss"/> : 
          showSpecialValues(this.props.selectedOperators as Operator) ? (
          (isEnumType(this.state.fieldType as PropertyType) || isBooleanType(this.state.fieldType as PropertyType)) ?
          <Select
            width={15}
            className={cx('select mr-4' , styles)}
            options={this.state.values}
            value={this.state.selectedItem}
            onChange={this.onChangeValue}
            backspaceRemovesValue={true}
            classNamePrefix="grafana-custom"
          /> :
          <Input
            width={15}
            value={this.state.filterValues?.[0] ?? ''}
            onKeyDown={this.onKeyPress}
            onChange={this.onChangeInputValue}
          />
        ) : this.getContent()
        }
      </div>
    );
  }