render()

in src/routes/System/NamespacePlugin/AddModal.js [95:301]
179 lines of code
12 McCabe index (conditional complexity)

  render() {
    const { jsonValue } = this.state;
    let {
      handleCancel,
      form,
      config,
      name,
      enabled = true,
      id,
      data,
      sort,
    } = this.props;
    let disable = id !== undefined;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: {
        sm: { span: 7 },
      },
      wrapperCol: {
        sm: { span: 17 },
      },
    };
    if (config) {
      config = JSON.parse(config);
    }
    return (
      <Modal
        width={520}
        centered
        title={getIntlContent("SHENYU.PLUGIN")}
        visible
        okText={getIntlContent("SHENYU.COMMON.SURE")}
        cancelText={getIntlContent("SHENYU.COMMON.CALCEL")}
        onOk={this.handleSubmit}
        onCancel={handleCancel}
      >
        <Form onSubmit={this.handleSubmit} className="login-form">
          <FormItem label={getIntlContent("SHENYU.PLUGIN")} {...formItemLayout}>
            {getFieldDecorator("name", {
              rules: [
                {
                  required: true,
                  message: getIntlContent("SHENYU.PLUGIN.SELECT"),
                },
              ],
              initialValue: name,
            })(
              <Input
                allowClear
                placeholder={getIntlContent("SHENYU.PLUGIN.PLUGIN.NAME")}
                disabled={disable}
              />,
            )}
          </FormItem>
          {data && data.length > 0 && (
            <>
              <Divider>
                {name} {getIntlContent("SHENYU.COMMON.SETTING")}
              </Divider>
              {data.map((eachField, index) => {
                let fieldInitialValue = config
                  ? config[eachField.field]
                  : undefined;
                // Add prefixes to prevent naming conflicts
                let fieldName = `__${eachField.field}__`;
                let dataType = eachField.dataType;
                let required = "";
                let checkRule;
                if (eachField.extObj) {
                  let extObj = JSON.parse(eachField.extObj);
                  required = extObj.required === "0" ? "" : extObj.required;
                  if (!fieldInitialValue) {
                    fieldInitialValue = extObj.defaultValue;
                  }
                  if (extObj.rule) {
                    checkRule = extObj.rule;
                  }
                }
                let rules = [];
                if (required) {
                  rules.push({
                    required: { required },
                    message: getIntlContent("SHENYU.COMMON.PLEASEINPUT"),
                  });
                }
                if (checkRule) {
                  rules.push({
                    // eslint-disable-next-line no-eval
                    pattern: eval(checkRule),
                    message: `${getIntlContent(
                      "SHENYU.PLUGIN.RULE.INVALID",
                    )}:(${checkRule})`,
                  });
                }
                if (dataType === 1) {
                  return (
                    <FormItem
                      label={eachField.label}
                      name={fieldName}
                      {...formItemLayout}
                      key={index}
                    >
                      {getFieldDecorator(fieldName, {
                        rules,
                        initialValue: fieldInitialValue,
                      })(
                        <InputNumber
                          precision={0}
                          placeholder={eachField.label}
                        />,
                      )}
                    </FormItem>
                  );
                } else if (dataType === 3 && eachField.dictOptions) {
                  return (
                    <FormItem
                      label={eachField.label}
                      name={fieldName}
                      {...formItemLayout}
                      key={index}
                    >
                      {getFieldDecorator(fieldName, {
                        rules,
                        initialValue: fieldInitialValue,
                      })(
                        <Select placeholder={eachField.label}>
                          {eachField.dictOptions.map((option) => {
                            return (
                              <Option
                                key={option.dictValue}
                                value={option.dictValue}
                              >
                                {option.dictName} ({eachField.label})
                              </Option>
                            );
                          })}
                        </Select>,
                      )}
                    </FormItem>
                  );
                } else if (dataType === 4) {
                  return (
                    <FormItem
                      label={eachField.label}
                      name={fieldName}
                      {...formItemLayout}
                      key={index}
                    >
                      <ReactJson
                        src={jsonValue}
                        theme="monokai"
                        displayDataTypes={false}
                        name={false}
                        onAdd={(obj) => this.updateJson(obj, fieldName)}
                        onEdit={(obj) => this.updateJson(obj, fieldName)}
                        onDelete={(obj) => this.updateJson(obj, fieldName)}
                        style={{ borderRadius: 4, padding: 16 }}
                      />
                    </FormItem>
                  );
                } else {
                  return (
                    <FormItem
                      label={eachField.label}
                      name={fieldName}
                      {...formItemLayout}
                      key={index}
                    >
                      {getFieldDecorator(fieldName, {
                        rules,
                        initialValue: fieldInitialValue,
                      })(<Input allowClear placeholder={eachField.label} />)}
                    </FormItem>
                  );
                }
              })}
              <Divider />
            </>
          )}
          <FormItem
            label={getIntlContent("SHENYU.PLUGIN.SORT")}
            {...formItemLayout}
          >
            {getFieldDecorator("sort", {
              rules: [
                {
                  required: true,
                  message: getIntlContent("SHENYU.PLUGIN.INPUTSORT"),
                },
              ],
              initialValue: sort,
            })(<InputNumber precision={0} style={{ width: "100%" }} />)}
          </FormItem>

          <FormItem
            {...formItemLayout}
            label={getIntlContent("SHENYU.SYSTEM.STATUS")}
          >
            {getFieldDecorator("enabled", {
              initialValue: enabled,
              valuePropName: "checked",
            })(<Switch />)}
          </FormItem>
        </Form>
      </Modal>
    );
  }