render()

in src/routes/Plugin/PluginRuleHandle/GeneralContextRuleHandle.js [101:208]
107 lines of code
2 McCabe index (conditional complexity)

  render() {
    const { handleData } = this;
    const { currentType } = this.state;
    const { form } = this.props;
    const { getFieldDecorator, getFieldValue } = form;
    getFieldDecorator("keys", {
      initialValue: this.keys,
    });
    const keys = getFieldValue("keys");
    const rowStyle = { display: "flex", alignItems: "center" };

    return (
      <FormItem
        required={true}
        label={getIntlContent("SHENYU.COMMON.DEAL.COMPONENT")}
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 20 }}
        className={styles.rootFormItem}
      >
        <Tabs defaultActiveKey={currentType} onChange={this.handleTabChange}>
          {handlers.map((handler) => (
            <TabPane tab={titleCase(handler)} key={handler}>
              {keys[handler].map((key, keyIndex) => (
                <Row gutter={16} key={key} style={rowStyle}>
                  <Col span={7}>
                    <FormItem>
                      {getFieldDecorator(
                        `handle['${handler}']['${key}']['generalContextType']`,
                        {
                          initialValue:
                            handleData?.[handler]?.[key]?.generalContextType,
                        },
                      )(
                        <Select
                          placeholder={titleCase(
                            `Select ${handler} Context Type`,
                          )}
                        >
                          {contextType.map((v) => (
                            <Option value={v} key={v} title={v}>
                              {v}
                            </Option>
                          ))}
                        </Select>,
                      )}
                    </FormItem>
                  </Col>
                  <Col span={6}>
                    <FormItem>
                      {getFieldDecorator(
                        `handle['${handler}']['${key}']['generalContextKey']`,
                        {
                          initialValue:
                            handleData?.[handler]?.[key]?.generalContextKey,
                        },
                      )(
                        <Input
                          allowClear
                          placeholder={titleCase(`Set ${handler} Context Key`)}
                        />,
                      )}
                    </FormItem>
                  </Col>
                  <Col span={6}>
                    <FormItem>
                      {getFieldDecorator(
                        `handle['${handler}']['${key}']['generalContextValue']`,
                        {
                          initialValue:
                            handleData?.[handler]?.[key]?.generalContextValue,
                        },
                      )(
                        <Input
                          allowClear
                          placeholder={titleCase(
                            `Set ${handler} Context Value`,
                          )}
                        />,
                      )}
                    </FormItem>
                  </Col>
                  <Col span={5}>
                    <FormItem>
                      <Button
                        type="danger"
                        style={{ marginRight: 16 }}
                        onClick={() => this.handleDeleteRow(handler, key)}
                      >
                        {getIntlContent("SHENYU.COMMON.DELETE.NAME")}
                      </Button>
                      {keyIndex === 0 && (
                        <Button
                          onClick={() => this.handleAddRow(handler)}
                          type="primary"
                        >
                          {getIntlContent("SHENYU.COMMON.ADD")}
                        </Button>
                      )}
                    </FormItem>
                  </Col>
                </Row>
              ))}
            </TabPane>
          ))}
        </Tabs>
      </FormItem>
    );
  }