taihu/app/containers/DataManagerView/components/CatalogueModal.tsx

/*
 * <<
 * Davinci
 * ==
 * Copyright (C) 2016 - 2017 EDP
 * ==
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * >>
 */

import React from 'react'
import { Modal, Form, Button, Input } from 'antd'
import { FormComponentProps } from 'antd/lib/form'
import { ICatalogue, IViewBase } from '../types'

const FormItem = Form.Item

interface ICopyModalProps extends FormComponentProps<ICatalogue> {
  visible: boolean
  loading: boolean
  fromView: ICatalogue
  onCheckUniqueName: (
    viewName: string,
    resolve: () => void,
    reject: (err: string) => void
  ) => void
  onSave: (view: ICatalogue) => void
  onCancel: () => void
}

export class CatalogueModal extends React.PureComponent<ICopyModalProps> {
  private formItemStyle = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 }
  }

  private save = () => {
    const { form, fromView, onSave } = this.props
    form.validateFieldsAndScroll((err, fieldsValue) => {
      if (err) {
        return
      }
      const copyView = { ...fieldsValue, id: fromView?.id }
      onSave(copyView)
    })
  }

  private checkName = (_, value, callback) => {
    const { onCheckUniqueName } = this.props
    onCheckUniqueName(
      value,
      () => {
        callback()
      },
      (err) => {
        callback(err)
      }
    )
  }

  private clearFieldsValue = () => {
    this.props.form.resetFields()
  }

  public render() {
    const { form, visible, loading, fromView, onCancel } = this.props
    const { getFieldDecorator } = form

    const modalButtons = [
      <Button key="back" size="large" onClick={onCancel}>
        取 消
      </Button>,
      <Button
        disabled={loading}
        key="submit"
        size="large"
        type="primary"
        onClick={this.save}
      >
        保 存
      </Button>
    ]

    return (
      <Modal
        title={fromView ? '编辑' : '新增'}
        wrapClassName="ant-modal-small"
        visible={visible}
        footer={modalButtons}
        onCancel={onCancel}
        afterClose={this.clearFieldsValue}
      >
        <Form>
          <FormItem label="资源名称" {...this.formItemStyle}>
            {getFieldDecorator<ICatalogue>('name', {
              validateFirst: true,
              rules: [
                { required: true, message: '不能为空' },
                { validator: this.checkName }
              ],
              initialValue: fromView?.name
            })(<Input autoComplete={'off'} />)}
          </FormItem>
          <FormItem label="行业分类" {...this.formItemStyle}>
            {getFieldDecorator<ICatalogue>('industry', {
              initialValue: fromView?.industry
            })(<Input />)}
          </FormItem>
          <FormItem label="来源部门" {...this.formItemStyle}>
            {getFieldDecorator<ICatalogue>('originDept', {
              initialValue: fromView?.originDept
            })(<Input />)}
          </FormItem>
          <FormItem label="来源系统" {...this.formItemStyle}>
            {getFieldDecorator<ICatalogue>('originSystem', {
              initialValue: fromView?.originSystem
            })(<Input />)}
          </FormItem>
          <FormItem label="扩展json" {...this.formItemStyle}>
            {getFieldDecorator<ICatalogue>('extConfig', {
              initialValue: fromView?.extConfig
            })(<Input />)}
          </FormItem>
          <FormItem label="描述" {...this.formItemStyle}>
            {getFieldDecorator<ICatalogue>('description', {
              initialValue: fromView?.description
            })(<Input />)}
          </FormItem>
        </Form>
      </Modal>
    )
  }
}

export default Form.create<ICopyModalProps>()(CatalogueModal)