render()

in src/routes/Document/components/AddAndUpdateApiDoc.js [87:404]
159 lines of code
2 McCabe index (conditional complexity)

  render() {
    const {
      onCancel,
      form,
      contextPath = "",
      apiPath = "",
      httpMethod = "",
      consume = "",
      produce = "",
      version = "",
      rpcType = "",
      state = "",
      ext = "{}",
      apiOwner = "",
      apiDesc = "",
      apiSource = "",
      document = "{}",
      visible = false,
      updateDocument = () => {},
      updateExt = () => {},
    } = this.props;
    const { getFieldDecorator, getFieldValue } = form;
    const formItemLayout = {
      labelCol: {
        sm: { span: 6 },
      },
      wrapperCol: {
        sm: { span: 18 },
      },
    };

    return (
      <Modal
        visible={visible}
        onCancel={onCancel}
        onOk={this.handleSubmit}
        forceRender
        width="100%"
        title="Api"
      >
        <Form className="login-form">
          <Form.Item
            label={getIntlContent("SHENYU.DOCUMENT.APIDOC.CONTEXTPATH")}
            {...formItemLayout}
          >
            {getFieldDecorator("contextPath", {
              rules: [
                {
                  required: true,
                  message: getIntlContent("SHENYU.DOCUMENT.APIDOC.CONTEXTPATH"),
                },
              ],
              initialValue: contextPath,
            })(
              <Input
                allowClear
                placeholder={getIntlContent(
                  "SHENYU.DOCUMENT.APIDOC.CONTEXTPATH",
                )}
              />,
            )}
          </Form.Item>
          <Form.Item
            label={getIntlContent("SHENYU.DOCUMENT.APIDOC.APIPATH")}
            {...formItemLayout}
          >
            {getFieldDecorator("apiPath", {
              rules: [
                {
                  required: true,
                  message: getIntlContent("SHENYU.DOCUMENT.APIDOC.APIPATH"),
                },
              ],
              initialValue: apiPath,
            })(
              <Input
                allowClear
                placeholder={getIntlContent("SHENYU.DOCUMENT.APIDOC.APIPATH")}
              />,
            )}
          </Form.Item>
          <Form.Item
            label={getIntlContent("SHENYU.DOCUMENT.APIDOC.HTTPMETHOD")}
            {...formItemLayout}
          >
            {getFieldDecorator("httpMethod", {
              rules: [
                {
                  required: true,
                  message: getIntlContent("SHENYU.DOCUMENT.APIDOC.HTTPMETHOD"),
                },
              ],
              initialValue: httpMethod,
            })(
              <Select>
                {Object.values(Method).map((e, i) => {
                  return (
                    <Select.Option key={`${e} ${i}`} value={i}>
                      {e}
                    </Select.Option>
                  );
                })}
              </Select>,
            )}
          </Form.Item>
          <Form.Item
            label={getIntlContent("SHENYU.DOCUMENT.APIDOC.CONSUME")}
            {...formItemLayout}
          >
            {getFieldDecorator("consume", {
              rules: [
                {
                  required: true,
                  message: getIntlContent("SHENYU.DOCUMENT.APIDOC.CONSUME"),
                },
              ],
              initialValue: consume,
            })(
              <Input
                allowClear
                placeholder={getIntlContent("SHENYU.DOCUMENT.APIDOC.CONSUME")}
              />,
            )}
          </Form.Item>
          <Form.Item
            label={getIntlContent("SHENYU.DOCUMENT.APIDOC.PRODUCE")}
            {...formItemLayout}
          >
            {getFieldDecorator("produce", {
              rules: [
                {
                  required: true,
                  message: getIntlContent("SHENYU.DOCUMENT.APIDOC.PRODUCE"),
                },
              ],
              initialValue: produce,
            })(
              <Input
                allowClear
                placeholder={getIntlContent("SHENYU.DOCUMENT.APIDOC.PRODUCE")}
              />,
            )}
          </Form.Item>
          <Form.Item
            label={getIntlContent("SHENYU.DOCUMENT.APIDOC.VERSION")}
            {...formItemLayout}
          >
            {getFieldDecorator("version", {
              rules: [
                {
                  required: true,
                  message: getIntlContent("SHENYU.DOCUMENT.APIDOC.VERSION"),
                },
              ],
              initialValue: version,
            })(
              <Input
                allowClear
                placeholder={getIntlContent("SHENYU.DOCUMENT.APIDOC.VERSION")}
              />,
            )}
          </Form.Item>
          <Form.Item
            label={getIntlContent("SHENYU.DOCUMENT.APIDOC.RPCTYPE")}
            {...formItemLayout}
          >
            {getFieldDecorator("rpcType", {
              rules: [
                {
                  required: true,
                  message: getIntlContent("SHENYU.DOCUMENT.APIDOC.RPCTYPE"),
                },
              ],
              initialValue: rpcType,
            })(
              <Select>
                {RPCTYPE.map((e, i) => {
                  return (
                    <Select.Option key={`${e} ${i}`} value={e}>
                      {e}
                    </Select.Option>
                  );
                })}
              </Select>,
            )}
          </Form.Item>
          <Form.Item
            label={getIntlContent("SHENYU.DOCUMENT.APIDOC.STATE")}
            {...formItemLayout}
          >
            {getFieldDecorator("state", {
              rules: [
                {
                  required: true,
                  message: getIntlContent("SHENYU.DOCUMENT.APIDOC.STATE"),
                },
              ],
              initialValue: state,
            })(
              <Radio.Group buttonStyle="solid">
                {STATE_TYPE.map((e, i) => {
                  return (
                    <Radio.Button
                      key={`${e} ${i}`}
                      value={i}
                      disabled={!getFieldValue("id") && e === "offline"}
                    >
                      {e}
                    </Radio.Button>
                  );
                })}
              </Radio.Group>,
            )}
          </Form.Item>
          <Form.Item
            label={getIntlContent("SHENYU.DOCUMENT.APIDOC.EXT")}
            {...formItemLayout}
          >
            <ReactJson
              src={JSON.parse(ext)}
              theme="monokai"
              displayDataTypes={false}
              name={false}
              onAdd={updateExt}
              onEdit={updateExt}
              onDelete={updateExt}
              style={{ borderRadius: 4, padding: 16, overflow: "auto" }}
            />
          </Form.Item>
          <Form.Item
            label={getIntlContent("SHENYU.DOCUMENT.APIDOC.APIOWNER")}
            {...formItemLayout}
          >
            {getFieldDecorator("apiOwner", {
              rules: [
                {
                  required: true,
                  message: getIntlContent("SHENYU.DOCUMENT.APIDOC.APIOWNER"),
                },
              ],
              initialValue: apiOwner,
            })(
              <Input
                allowClear
                placeholder={getIntlContent("SHENYU.DOCUMENT.APIDOC.APIOWNER")}
              />,
            )}
          </Form.Item>
          <Form.Item
            label={getIntlContent("SHENYU.DOCUMENT.APIDOC.APIDESC")}
            {...formItemLayout}
          >
            {getFieldDecorator("apiDesc", {
              rules: [
                {
                  required: true,
                  message: getIntlContent("SHENYU.DOCUMENT.APIDOC.APIDESC"),
                },
              ],
              initialValue: apiDesc,
            })(
              <Input
                allowClear
                placeholder={getIntlContent("SHENYU.DOCUMENT.APIDOC.APIDESC")}
              />,
            )}
          </Form.Item>
          <Form.Item
            label={getIntlContent("SHENYU.DOCUMENT.APIDOC.APISOURCE")}
            {...formItemLayout}
          >
            {getFieldDecorator("apiSource", {
              rules: [
                {
                  required: true,
                  message: getIntlContent("SHENYU.DOCUMENT.APIDOC.APISOURCE"),
                },
              ],
              initialValue: apiSource,
            })(
              <Select>
                {API_SOURCE_TYPE.map((e, i) => {
                  return (
                    <Select.Option key={`${e} ${i}`} value={i}>
                      {e}
                    </Select.Option>
                  );
                })}
              </Select>,
            )}
          </Form.Item>
          <Form.Item
            label={getIntlContent("SHENYU.DOCUMENT.APIDOC.DOCUMENT")}
            {...formItemLayout}
          >
            <ReactJson
              src={JSON.parse(document)}
              theme="monokai"
              displayDataTypes={false}
              name={false}
              onAdd={updateDocument}
              onEdit={updateDocument}
              onDelete={updateDocument}
              style={{ borderRadius: 4, padding: 16, overflow: "auto" }}
            />
          </Form.Item>

          <Form.Item hidden>
            {getFieldDecorator("tagIds")(<Input allowClear />)}
          </Form.Item>

          <Form.Item hidden>
            {getFieldDecorator("id")(<Input allowClear />)}
          </Form.Item>
        </Form>
      </Modal>
    );
  }