render()

in src/components/side-panel/layer-panel/text-label-panel.js [53:132]
80 lines of code
4 McCabe index (conditional complexity)

    render() {
      const {updateLayerTextLabel, textLabel, fields} = this.props;
      const currentFields = textLabel.map(tl => tl.field && tl.field.name).filter(d => d);
      return (
        <LayerConfigGroup label={'panel.text.label'} collapsible>
          <ConfigGroupCollapsibleHeader>
            <FieldSelector
              fields={fields}
              value={currentFields}
              onSelect={selected => updateLayerTextLabel('all', 'fields', selected)}
              multiSelect
            />
          </ConfigGroupCollapsibleHeader>
          <ConfigGroupCollapsibleContent>
            {textLabel.map((tl, idx) => (
              <div key={tl.field ? tl.field.name : `null-${idx}`}>
                <PanelLabel>
                  <FormattedMessage id={'panel.text.labelWithId'} values={{labelId: idx + 1}} />
                </PanelLabel>
                <SidePanelSection>
                  <FieldSelector
                    fields={fields}
                    value={(tl.field && tl.field.name) || 'placeholder.selectField'}
                    placeholder={'placeholder.empty'}
                    onSelect={v => updateLayerTextLabel(idx, 'field', v)}
                    erasable
                  />
                </SidePanelSection>
                <SidePanelSection>
                  <PanelLabel>
                    <FormattedMessage id="panel.text.fontSize" />
                  </PanelLabel>
                  <RangeSlider
                    {...LAYER_TEXT_CONFIGS.fontSize}
                    value1={tl.size}
                    isRange={false}
                    onChange={v => updateLayerTextLabel(idx, 'size', v[1])}
                  />
                </SidePanelSection>
                <SidePanelSection>
                  <PanelLabel>
                    <FormattedMessage id="panel.text.fontColor" />
                  </PanelLabel>
                  <ColorSelector
                    colorSets={[
                      {
                        selectedColor: tl.color,
                        setColor: v => updateLayerTextLabel(idx, 'color', v)
                      }
                    ]}
                  />
                </SidePanelSection>
                <SidePanelSection>
                  <SpaceBetweenFlexbox>
                    <SBFlexboxItem>
                      <PanelLabel>
                        <FormattedMessage id="panel.text.textAnchor" />
                      </PanelLabel>
                      <ItemSelector
                        {...LAYER_TEXT_CONFIGS.textAnchor}
                        selectedItems={tl.anchor}
                        onChange={val => updateLayerTextLabel(idx, 'anchor', val)}
                      />
                    </SBFlexboxItem>
                    <SBFlexboxItem>
                      <PanelLabel>
                        <FormattedMessage id="panel.text.alignment" />
                      </PanelLabel>
                      <ItemSelector
                        {...LAYER_TEXT_CONFIGS.textAlignment}
                        selectedItems={tl.alignment}
                        onChange={val => updateLayerTextLabel(idx, 'alignment', val)}
                      />
                    </SBFlexboxItem>
                  </SpaceBetweenFlexbox>
                </SidePanelSection>
              </div>
            ))}
            <SidePanelSection>
              <Button link onClick={val => updateLayerTextLabel(textLabel.length)}>