render()

in src/setter/i18n-setter/index.tsx [278:334]

• 56 lines of code
• 5 McCabe index (conditional complexity)

  render() {
    const { isShowSearchPopUp, i18nValue, isShowBindDataPopUp } = this.state;
    return (
      <div className="lowcode-setter-i18n">
        <Input size="small" value={i18nValue.inputValue} />

        {!i18nValue.key ? (
          <div className="i18n-icon" onClick={this.showSearchPopUp}>
            <img src="https://gw.alicdn.com/imgextra/i2/O1CN01kvqrSB22B9CKB4yVl_!!6000000007081-2-tps-200-200.png"></img>
          </div>
        ) : (
          <div className="i18n-icon i18n-icon-selected" onClick={this.showBindDataPopUp}>
            <img src="https://gw.alicdn.com/imgextra/i3/O1CN01VpNCcg1wfTjbdHK8I_!!6000000006335-2-tps-200-200.png"></img>
          </div>
        )}
        {isShowSearchPopUp && (
          <div className="popup-container">
            <Search
              onChange={this.onChange.bind(this)}
              popupContent={this.renderI18nList()}
              onSearch={this.onSearch.bind(this)}
              type="normal"
              shape="simple"
              style={{ width: '195px' }}
              placeholder="搜索已定义的文案"
            />
            <Button type="primary" className="new-i18n-button" onClick={this.createNewI18nItemData}>
              <Icon type="add" />
              创建新的多语言文案
            </Button>
          </div>
        )}
        {isShowBindDataPopUp && (
          <div className="binddata-popup-container">
            <div className="clear-i18n" onClick={this.clearI18n}>
              解除文案关联
            </div>
            {i18nValue.i18nDataList &&
              i18nValue.i18nDataList.map((i18nItem) => {
                return (
                  <div className="bind-item">
                    <p>{lang[i18nItem.langKey].i18nLangCN}</p>
                    <Input
                      size="small"
                      value={i18nItem.i18nData}
                      onChange={(value, type, e) =>
                        this.i18nItemOnChange(value, i18nItem.langKey, i18nValue.key)
                      }
                    />
                  </div>
                );
              })}
          </div>
        )}
      </div>
    );
  }