function TooltipChickletFactory()

in src/components/side-panel/interaction-panel/tooltip-config/tooltip-chicklet.js [96:192]
73 lines of code
6 McCabe index (conditional complexity)

function TooltipChickletFactory(dataId, config, onChange, fields) {
  class TooltipChicklet extends Component {
    state = {
      show: false
    };

    componentDidMount() {
      document.addEventListener('mousedown', this.handleClickOutside, false);
    }

    componentWillUnmount() {
      document.removeEventListener('mousedown', this.handleClickOutside, false);
    }

    handleClickOutside = e => {
      if (this.node.contains(e.target)) {
        return;
      }
      this.setState({show: false});
    };

    render() {
      const {disabled, name, remove} = this.props;
      const {show} = this.state;
      const tooltipField = config.fieldsToShow[dataId].find(
        fieldToShow => fieldToShow.name === name
      );
      const formatLabels = getFormatLabels(fields, tooltipField.name);
      const hasFormat = Boolean(tooltipField.format);
      const selectionIndex = formatLabels.findIndex(fl => getValue(fl) === tooltipField.format);
      const hashStyle = show ? hashStyles.SHOW : hasFormat ? hashStyles.ACTIVE : null;

      return (
        <ChickletButton ref={node => (this.node = node)}>
          <ChickletTag>{name}</ChickletTag>
          {formatLabels.length > 1 && (
            <ChickletAddonWrapper>
              <ChickletAddon data-tip data-for={`addon-${name}`}>
                <IconDiv status={hashStyle}>
                  <Hash
                    height="8px"
                    onClick={e => {
                      e.stopPropagation();
                      this.setState({show: Boolean(!show)});
                    }}
                  />
                </IconDiv>
                <Tooltip id={`addon-${name}`} effect="solid">
                  <span>
                    {hasFormat ? (
                      getFormatTooltip(formatLabels, tooltipField.format)
                    ) : (
                      <FormattedMessage id={'fieldSelector.formatting'} />
                    )}
                  </span>
                </Tooltip>
              </ChickletAddon>
              {show && (
                <StyledPopover>
                  <DropdownList
                    options={formatLabels}
                    selectionIndex={selectionIndex}
                    displayOption={item => item.label}
                    onOptionSelected={(result, e) => {
                      e.stopPropagation();
                      this.setState({
                        show: false
                      });

                      const oldFieldsToShow = config.fieldsToShow[dataId];
                      const fieldsToShow = oldFieldsToShow.map(fieldToShow => {
                        return fieldToShow.name === name
                          ? {
                              name,
                              format: getValue(result)
                            }
                          : fieldToShow;
                      });
                      const newConfig = {
                        ...config,
                        fieldsToShow: {
                          ...config.fieldsToShow,
                          [dataId]: fieldsToShow
                        }
                      };
                      onChange(newConfig);
                    }}
                  />
                </StyledPopover>
              )}
            </ChickletAddonWrapper>
          )}
          <Delete onClick={disabled ? null : remove} />
        </ChickletButton>
      );
    }
  }