render()

in src/input/input.tsx [162:266]
97 lines of code
13 McCabe index (conditional complexity)

  render() {
    const {
      // Modifiers
      size,
      multiline,
      borderless,

      // Props
      label,
      labelType,
      error,
      help,
      className,
      inputClassName,
      children,
      value,
      onClear,
      disabled,
      inputRef,
      onChange,
      enableShortcuts,
      id,
      placeholder,
      icon,
      translations,
      height = typeof this.context === 'function' ? this.context() : this.context,
      beforeInput,
      afterInput,
      autogrow,
      ...restProps
    } = this.props;

    const {empty} = this.state;
    const clearable = !!onClear;
    const classes = classNames(className, styles.outerContainer, [styles[`size${size}`]], [styles[`height${height}`]], {
      'ring-js-shortcuts': enableShortcuts === true,
      [styles.error]: error !== null && error !== undefined,
      [styles.empty]: empty,
      [styles.withIcon]: icon,
      [styles.clearable]: clearable,
      [styles.borderless]: borderless,
    });

    const inputClasses = classNames(styles.input, inputClassName);

    const text = value ?? children;

    const commonProps = {
      ref: this.composedInputRef(this.inputRef, inputRef),
      className: inputClasses,
      value: text,
      disabled,
      id: this.getId(),
      placeholder,
      'aria-label': typeof label === 'string' && label ? label : placeholder,
      'data-enabled-shortcuts': Array.isArray(enableShortcuts) ? enableShortcuts.join(',') : null,
    };

    return (
      <I18nContext.Consumer>
        {({translate}) => (
          <div className={classes} data-test='ring-input'>
            {label && (
              <ControlLabel htmlFor={this.getId()} disabled={disabled} type={labelType}>
                {label}
              </ControlLabel>
            )}
            <div className={styles.container}>
              {icon && <Icon glyph={icon} className={styles.icon} />}
              {beforeInput}
              {multiline ? (
                <textarea
                  onChange={this.handleTextareaChange}
                  rows={1}
                  {...commonProps}
                  {...(restProps as TextareaHTMLAttributes<HTMLTextAreaElement>)}
                />
              ) : (
                <input
                  onChange={this.handleInputChange}
                  {...commonProps}
                  {...(restProps as InputHTMLAttributes<HTMLInputElement>)}
                />
              )}
              {clearable && !disabled && (
                <Button
                  title={translations?.clear ?? translate('clear')}
                  data-test='ring-input-clear'
                  className={classNames(styles.clear, this.props.clearButtonClassName)}
                  icon={closeIcon}
                  onClick={this.clear}
                />
              )}
              {afterInput}
            </div>
            {error ? (
              <div className={styles.errorText}>{error}</div>
            ) : (
              help && <ControlHelp className={styles.helpText}>{help}</ControlHelp>
            )}
          </div>
        )}
      </I18nContext.Consumer>
    );
  }