render()

in packages/eui/src/components/form/field_search/field_search.tsx [211:302]
86 lines of code
10 McCabe index (conditional complexity)

  render() {
    const { defaultFullWidth } = this.context as FormContextValue;
    const {
      stylesMemoizer,
      className,
      id,
      name,
      placeholder,
      isInvalid,
      disabled,
      fullWidth = defaultFullWidth,
      isLoading,
      inputRef,
      incremental,
      compressed,
      onSearch,
      isClearable: _isClearable,
      append,
      prepend,
      ...rest
    } = this.props;

    let value = this.props.value;
    if (typeof this.props.value !== 'string') value = this.state.value;

    // Set actual value of isClearable if value exists as well
    const isClearable = Boolean(
      _isClearable && value && !rest.readOnly && !disabled
    );

    const classes = classNames(
      'euiFieldSearch',
      {
        'euiFieldSearch-isLoading': isLoading,
        'euiFieldSearch-isClearable': isClearable,
        'euiFieldSearch-isInvalid': isInvalid,
      },
      className
    );

    const styles = stylesMemoizer(euiFieldSearchStyles);
    const cssStyles = [
      styles.euiFieldSearch,
      compressed ? styles.compressed : styles.uncompressed,
      fullWidth ? styles.fullWidth : styles.formWidth,
      (prepend || append) && styles.inGroup,
    ];

    return (
      <EuiI18n
        token="euiFieldSearch.clearSearchButtonLabel"
        default="Clear search input"
      >
        {(clearSearchButtonLabel: string) => (
          <EuiFormControlLayout
            icon="search"
            fullWidth={fullWidth}
            isLoading={isLoading}
            isInvalid={isInvalid}
            isDisabled={disabled}
            clear={
              isClearable
                ? {
                    onClick: this.onClear,
                    'aria-label': clearSearchButtonLabel,
                    'data-test-subj': 'clearSearchButton',
                  }
                : undefined
            }
            compressed={compressed}
            append={append}
            prepend={prepend}
          >
            <EuiValidatableControl isInvalid={isInvalid}>
              <input
                type="search"
                id={id}
                name={name}
                placeholder={placeholder}
                className={classes}
                css={cssStyles}
                onKeyUp={(e) => this.onKeyUp(e, incremental, onSearch)}
                disabled={disabled}
                ref={this.setRef}
                {...rest}
              />
            </EuiValidatableControl>
          </EuiFormControlLayout>
        )}
      </EuiI18n>
    );
  }