import React , { Fragment , useContext } from 'react' ; import { Modal , Form , Row , Col , Spin } from 'antd' ; import _debounce from 'lodash/debounce' ; import { ColProps } from "antd/lib/col" ; import { ModalProps } from 'antd/lib/modal' ; import { FormComponentProps } from 'antd/lib/form' ; import { WrappedFormUtils } from 'antd/lib/form/Form' ; import ConfigContext from '../../config-provider/context' ; import { ItemConfig } from 'antd-form-mate/dist/lib/props' ; import { injectChildren } from '../../utils' ; export interface PopupProps extends FormComponentProps { loading ? : boolean ; setItemsConfig : ( form : WrappedFormUtils ) => ItemConfig [ ] ; itemsLayout ? : { labelCol ? : ColProps ; wrapperCol ? : ColProps ; } ; getFormInstance ? : ( form : WrappedFormUtils ) => void ; mode ? : string ; onOk ? : ( fieldsValue : any ) => void ; onClose ? : ( ) => void ; visible ? : boolean ; afterClose ? : ( ) => void ; title ? : string ; } export type CustomModalProps = Omit < ModalProps , 'title' | 'visible' | 'onOk' | 'onCancel' | 'afterClose' > ; export interface DetailModalProps extends PopupProps { modalProps ? : CustomModalProps ; itemsWrapperProps ? : React . HTMLAttributes < any > ; cols ? : 1 | 2 | 3 | 4 | 6 | 8 | 12 | 24 ; children ? : JSX . Element ; } function DetailModal ( props ) { const { debounceWait , createFormItemsFn } = useContext ( ConfigContext ) ; const { loading = false , setItemsConfig , itemsLayout , getFormInstance = ( ) => { } , mode , onOk : handleOk = ( ) => { } , onClose , visible , afterClose , title , modalProps , cols = 1 , itemsWrapperProps = { } as any , form = { } as WrappedFormUtils , children , } = props ; getFormInstance ( form ) ; const itemsConfig = setItemsConfig ( form ) ; const onOk = _debounce ( ( ) => { console . log ( 'DetailFormModal _debounce onOk' ) ; form . validateFieldsAndScroll ( ( err ? , fieldsValue ? ) => { if ( err ) return ; handleOk ( fieldsValue ) ; } ) ; } , debounceWait ) ; const colsItems = cols === 1 ? ( createFormItemsFn ( form ) ( itemsConfig , itemsLayout ) ) : ( < Row type = "flex" > { createFormItemsFn ( form ) ( itemsConfig , itemsLayout ) . map ( item => { return ( < Col span = { 24 / cols} key={item.key as any}> { item } < /Col>); } ) } < /Row>); return ( < Modal destroyOnClose { ... modalProps } onOk = { onOk } onCancel = { onClose } visible = { visible } afterClose = { afterClose } title = { title } > < Fragment > < div { ... itemsWrapperProps } > < Spin spinning = { loading } > { colsItems } < /Spin> < /div> { mode ? injectChildren ( children , { mode } ) : children } < /Fragment> < /Modal>); } export default Form . create < DetailModalProps > ( ) ( DetailModal ) ;