render()

in src/setter/expression-setter/index.tsx [240:300]

• 52 lines of code
• 7 McCabe index (conditional complexity)

  render() {
    const { value, dataSource } = this.state;
    const { placeholder } = this.props;
    const isValObject = !!(value == '[object Object]');
    const title = isValObject
      ? this.i18n('valueIllegal')
      : (value || placeholder || this.i18n('jsExpression')).toString();
    const cursorIndex = this.getInputCursorPosition();
    const childNode = cursorIndex ? (
      <div className="cursor-blink">
        {title.substr(0, cursorIndex)}
        <b>|</b>
        {title.substr(cursorIndex)}
      </div>
    ) : (
      title
    );

    return (
      <div ref={this.expression} style={{ width: '100%', display: 'inline-block' }}>
        <Tooltip
          triggerType={isValObject ? ['click'] : ['focus']}
          align="tl"
          popupClassName="code-input-overlay"
          trigger={
            isValObject ? (
              value
            ) : (
              <div>
                <AutoComplete
                  size="small"
                  {...this.props}
                  style={{ width: '100%' }}
                  dataSource={dataSource}
                  placeholder={placeholder || this.i18n('jsExpression')}
                  value={value}
                  disabled={isValObject}
                  innerBefore={<span style={{ color: '#999', marginLeft: 4 }}>{'{{'}</span>}
                  innerAfter={<span style={{ color: '#999', marginRight: 4 }}>{'}}'}</span>}
                  popupClassName="expression-setter-item-inner"
                  // eslint-disable-next-line no-shadow
                  itemRender={(itemValue) => {
                    return (
                      <Option key={itemValue.value} text={itemValue.label} value={itemValue.value}>
                        <div className="code-input-value">{itemValue.value}</div>
                        <div className="code-input-help">{helpMap[itemValue.value]}</div>
                      </Option>
                    );
                  }}
                  onChange={this.onChange.bind(this)}
                  filter={this.filterOption.bind(this)}
                />
              </div>
            )
          }
        >
          {childNode}
        </Tooltip>
      </div>
    );
  }