render()

in console-ui/src/pages/ConfigurationManagement/ConfigEditor/ConfigEditor.js [558:758]

• 195 lines of code
• 6 McCabe index (conditional complexity)

  render() {
    const { locale = {} } = this.props;
    const { init } = this.field;
    const formItemLayout = {
      labelCol: { span: 2 },
      wrapperCol: { span: 22 },
    };

    // const list = [{
    //     value: 0,
    //     label: 'TEXT'
    // }, {
    //     value: 1,
    //     label: 'JSON'
    // }, {
    //     value: 2,
    //     label: 'XML'
    // }];
    const list = [
      { value: 'text', label: 'TEXT' },
      { value: 'json', label: 'JSON' },
      { value: 'xml', label: 'XML' },
      { value: 'yaml', label: 'YAML' },
      { value: 'html', label: 'HTML' },
      { value: 'properties', label: 'Properties' },
      { value: 'toml', label: 'TOML' },
    ];
    const activeKey = this.state.activeKey.split('-')[0];

    return (
      <div>
        <Loading
          shape="flower"
          style={{ position: 'relative', width: '100%' }}
          visible={this.state.loading}
          tip="Loading..."
          color="#333"
        >
          <h1 style={{ overflow: 'hidden', height: 50, width: '100%' }}>
            <div>{locale.toedit}</div>
          </h1>
          {this.state.hasbeta ? (
            <div style={{ display: 'inline-block', height: 40, width: '80%', overflow: 'hidden' }}>
              <Tab
                shape={'wrapped'}
                onChange={this.changeTab.bind(this)}
                lazyLoad={false}
                activeKey={this.state.activeKey}
              >
                {this.state.tag.map(tab => (
                  <TabPane title={tab.title} key={tab.key} />
                ))}
              </Tab>
            </div>
          ) : (
            ''
          )}

          <Form field={this.field}>
            <FormItem label={locale.namespace} required>
              <p>{this.tenant}</p>
            </FormItem>
            <FormItem label="Data ID" {...formItemLayout}>
              <Input
                disabled
                {...init('dataId', {
                  rules: [
                    { required: true, message: locale.recipientFrom },
                    { validator: this.validateChart.bind(this) },
                  ],
                })}
              />
            </FormItem>
            <FormItem label="Group" {...formItemLayout}>
              <Input
                disabled
                {...init('group', {
                  rules: [
                    { required: true, message: locale.homeApplication },
                    { validator: this.validateChart.bind(this) },
                  ],
                })}
              />
            </FormItem>
            <FormItem label="" {...formItemLayout}>
              <div>
                <a style={{ fontSize: '12px' }} onClick={this.toggleMore.bind(this)}>
                  {this.state.showmore ? locale.collapse : locale.groupNotEmpty}
                </a>
              </div>
            </FormItem>
            <div style={{ height: this.state.showmore ? 'auto' : '0', overflow: 'hidden' }}>
              <FormItem label={locale.tags} {...formItemLayout}>
                <Select
                  size="medium"
                  hasArrow
                  style={{ width: '100%' }}
                  autoWidth
                  mode="tag"
                  filterLocal
                  placeholder={locale.pleaseEnterTag}
                  dataSource={this.state.tagLst}
                  value={this.state.config_tags}
                  onChange={this.setConfigTags.bind(this)}
                  hasClear
                />
              </FormItem>

              <FormItem label={locale.targetEnvironment} {...formItemLayout}>
                <Input {...init('appName')} readOnly={!!this.inApp} />
              </FormItem>
            </div>

            <FormItem label={locale.description} {...formItemLayout}>
              <Input.TextArea htmlType="text" multiple rows={3} {...init('desc')} />
            </FormItem>
            <FormItem label={locale.format} {...formItemLayout}>
              <RadioGroup
                dataSource={list}
                value={this.state.configType}
                onChange={this.newChangeConfig.bind(this)}
              />
            </FormItem>
            <FormItem
              label={
                <span style={{ marginRight: 5 }}>
                  {locale.configcontent}
                  <Balloon
                    trigger={
                      <Icon
                        type="help"
                        size={'small'}
                        style={{
                          color: '#1DC11D',
                          marginRight: 5,
                          verticalAlign: 'middle',
                          marginTop: 2,
                        }}
                      />
                    }
                    align="t"
                    style={{ marginRight: 5 }}
                    triggerType="hover"
                  >
                    <p>{locale.escExit}</p>
                    <p>{locale.releaseBeta}</p>
                  </Balloon>
                  :
                </span>
              }
              {...formItemLayout}
            >
              <div style={{ clear: 'both', height: 300 }} id="container" />
            </FormItem>
            <FormItem {...formItemLayout} label="">
              <div style={{ textAlign: 'right' }}>
                {activeKey === 'beta' ? (
                  <Button
                    style={{ marginRight: 10 }}
                    type="primary"
                    onClick={this.openDiff.bind(this, true)}
                  >
                    {locale.release}
                  </Button>
                ) : (
                  ''
                )}
                {activeKey === 'normal' ? (
                  <Button
                    type="primary"
                    disabled={this.state.hasbeta}
                    style={{ marginRight: 10 }}
                    onClick={this.openDiff.bind(this, this.state.checkedBeta)}
                  >
                    {this.state.checkedBeta ? locale.release : locale.publish}
                  </Button>
                ) : (
                  <Button
                    type="primary"
                    style={{ marginRight: 10 }}
                    onClick={this.openDiff.bind(this, false)}
                  >
                    {locale.publish}
                  </Button>
                )}

                <Button type="normal" onClick={this.goList.bind(this)}>
                  {locale.back}
                </Button>
              </div>
            </FormItem>
          </Form>
          <DiffEditorDialog
            ref={this.diffEditorDialog}
            publishConfig={this.publishConfig.bind(this)}
          />
          <SuccessDialog ref={this.successDialog} />
        </Loading>
      </div>
    );
  }