render()

in public/js/components/customize_tms.js [38:103]
63 lines of code
4 McCabe index (conditional complexity)

  render() {
    const config = this.props?.layerConfig;

    if (!(config && config instanceof TMSService)) {
      return null;
    }

    const selectedLangOptions = supportedLanguages.filter(l => l.key === this.props.language);

    return (
      <EuiForm component="form">
        <EuiFlexGroup gutterSize={'s'}>
          <EuiFlexItem>
            <EuiPanel hasShadow={false} hasBorder paddingSize="m">
              <EuiDescribedFormGroup
                title={<h3>Basemap labels</h3>}
                description={
                  <p>
                    Select the language for
                    the basemap. Non-translated
                    labels will fallback to defaults.
                  </p>
                }
              >
                <EuiFormRow label="Select language">
                  <EuiComboBox
                    compressed
                    isClearable={false}
                    singleSelection={{ asPlainText: true }}
                    options={supportedLanguages}
                    selectedOptions={selectedLangOptions}
                    onChange={this._onLanguageChange}
                  />
                </EuiFormRow>
              </EuiDescribedFormGroup>
            </EuiPanel>
          </EuiFlexItem>
          <EuiFlexItem>
            <EuiPanel hasShadow={false} hasBorder paddingSize="m">
              <EuiDescribedFormGroup
                title={<h3>Color filter</h3>}
                description={
                  <p>
                    Choose a color filter to apply
                    to the basemap.
                  </p>
                }
              >
                <EuiFormRow label="Pick a color">
                  <EuiColorPicker
                    compressed
                    isClearable={true}
                    onChange={this.props.onColorChange}
                    color={this.props.color}
                    format="hex"
                    secondaryInputDisplay="top"
                    placeholder="No filter"
                  />
                </EuiFormRow>
              </EuiDescribedFormGroup>
            </EuiPanel>
          </EuiFlexItem>
        </EuiFlexGroup>
      </EuiForm>
    );
  }