renderField()

in src/plugins/advanced_settings/public/management_app/components/field/field.tsx [304:432]
128 lines of code
24 McCabe index (conditional complexity)

  renderField(setting: FieldSetting, ariaDescribedBy?: string) {
    const { enableSaving, unsavedChanges, loading } = this.props;
    const {
      name,
      value,
      type,
      options,
      optionLabels = {},
      isOverridden,
      defVal,
      ariaName,
    } = setting;
    const a11yProps: { [key: string]: string } = ariaDescribedBy
      ? {
          'aria-label': ariaName,
          'aria-describedby': ariaDescribedBy,
        }
      : {
          'aria-label': ariaName,
        };
    const currentValue = unsavedChanges
      ? unsavedChanges.value
      : getEditableValue(type, value, defVal);

    switch (type) {
      case 'boolean':
        return (
          <EuiSwitch
            label={
              !!currentValue ? (
                <FormattedMessage id="advancedSettings.field.onLabel" defaultMessage="On" />
              ) : (
                <FormattedMessage id="advancedSettings.field.offLabel" defaultMessage="Off" />
              )
            }
            checked={!!currentValue}
            onChange={this.onFieldChangeSwitch}
            disabled={loading || isOverridden || !enableSaving}
            data-test-subj={`advancedSetting-editField-${name}`}
            {...a11yProps}
          />
        );
      case 'markdown':
      case 'json':
        return (
          <div data-test-subj={`advancedSetting-editField-${name}`}>
            <EuiCodeEditor
              {...a11yProps}
              mode={type}
              theme="textmate"
              value={currentValue}
              onChange={this.onCodeEditorChange}
              width="100%"
              height="auto"
              minLines={6}
              maxLines={30}
              isReadOnly={isOverridden || !enableSaving}
              setOptions={{
                showLineNumbers: false,
                tabSize: 2,
              }}
              editorProps={{
                $blockScrolling: Infinity,
              }}
              showGutter={false}
            />
          </div>
        );
      case 'image':
        const changeImage = unsavedChanges?.changeImage;
        if (!isDefaultValue(setting) && !changeImage) {
          return <EuiImage {...a11yProps} allowFullScreen url={value as string} alt={name} />;
        } else {
          return (
            <EuiFilePicker
              disabled={loading || isOverridden || !enableSaving}
              onChange={this.onImageChange}
              accept=".jpg,.jpeg,.png"
              ref={this.changeImageForm}
              fullWidth
              data-test-subj={`advancedSetting-editField-${name}`}
              aria-label={name}
            />
          );
        }
      case 'select':
        return (
          <EuiSelect
            {...a11yProps}
            value={currentValue}
            options={(options as string[]).map((option) => {
              return {
                text: optionLabels.hasOwnProperty(option) ? optionLabels[option] : option,
                value: option,
              };
            })}
            onChange={this.onFieldChangeEvent}
            isLoading={loading}
            disabled={loading || isOverridden || !enableSaving}
            fullWidth
            data-test-subj={`advancedSetting-editField-${name}`}
          />
        );
      case 'number':
        return (
          <EuiFieldNumber
            {...a11yProps}
            value={currentValue}
            onChange={this.onFieldChangeEvent}
            isLoading={loading}
            disabled={loading || isOverridden || !enableSaving}
            fullWidth
            data-test-subj={`advancedSetting-editField-${name}`}
          />
        );
      default:
        return (
          <EuiFieldText
            {...a11yProps}
            value={currentValue}
            onChange={this.onFieldChangeEvent}
            isLoading={loading}
            disabled={loading || isOverridden || !enableSaving}
            fullWidth
            data-test-subj={`advancedSetting-editField-${name}`}
          />
        );
    }
  }