render()

in src/components/side-panel/layer-panel/color-selector.js [134:186]
51 lines of code
6 McCabe index (conditional complexity)

  render() {
    const {colorSets, disabled, inputTheme, colorUI} = this.props;

    const editing = this._getEditing();
    const currentEditing = colorSets[editing] && typeof colorSets[editing] === 'object';

    return (
      <div className="color-selector" ref={this.node}>
        <InputBoxContainer>
          {colorSets.map((cSet, i) => (
            <div className="color-select__input-group" key={i}>
              <ColorSelectorInput
                className="color-selector__selector"
                active={editing === i}
                disabled={disabled}
                inputTheme={inputTheme}
                onMouseDown={e => this._showDropdown(e, i)}
              >
                {cSet.isRange ? (
                  <ColorPalette colors={cSet.selectedColor.colors} />
                ) : (
                  <ColorBlock
                    className="color-selector__selector__block"
                    color={cSet.selectedColor}
                  />
                )}
                {cSet.label ? (
                  <div className="color-selector__selector__label">{cSet.label}</div>
                ) : null}
              </ColorSelectorInput>
            </div>
          ))}
        </InputBoxContainer>
        {currentEditing ? (
          <StyledPanelDropdown className="color-selector__dropdown">
            {colorSets[editing].isRange ? (
              <ColorRangeSelector
                selectedColorRange={colorSets[editing].selectedColor}
                onSelectColorRange={this._onSelectColor}
                setColorPaletteUI={this.props.setColorUI}
                colorPaletteUI={colorUI}
              />
            ) : (
              <SingleColorPalette
                selectedColor={rgbToHex(colorSets[editing].selectedColor)}
                onSelectColor={this._onSelectColor}
              />
            )}
          </StyledPanelDropdown>
        ) : null}
      </div>
    );
  }