import React , { PureComponent } from 'react' ; import { FormComponentProps } from 'antd/es/form' ; import { GetFieldDecoratorOptions , WrappedFormUtils } from 'antd/es/form/Form' ; import { Form } from 'antd' ; import { get } from 'lodash' ; export interface EditingRender { fieldDecoratorOptions ? : GetFieldDecoratorOptions ; itemRender : ( text : any , record : any , index : number , form ? : WrappedFormUtils ) => React . ReactNode ; } interface EditableCellProps extends FormComponentProps { editable : boolean ; editing : boolean ; editingRender : ( ( text : any , record : any , index : number , title : string , dataIndex : string , form : WrappedFormUtils ) => React . ReactNode ) | EditingRender ; record : any ; dataIndex : string ; index : number ; title : string ; } class EditableCell extends PureComponent < EditableCellProps > { renderCustom ( ) { const { form , editingRender , title , record , index , dataIndex } = this . props ; const text = get ( record , dataIndex ) ; if ( typeof editingRender === 'function' ) { return editingRender ( text , record , index , title , dataIndex , form ) ; } const { getFieldDecorator } = form ; const { fieldDecoratorOptions = { } , itemRender } = editingRender ; return ( < Form . Item > { getFieldDecorator ( dataIndex , { initialValue : text , ... fieldDecoratorOptions , } ) ( itemRender ( text , record , index , title , dataIndex , form ) ) } < /Form.Item>); } render ( ) { const { form , editable , editing , editingRender , record , dataIndex , title , index , children , ... restProps } = this . props ; return < td { ... restProps } > { editing && editingRender ? this . renderCustom ( ) : children } < /td>; } } export default EditableCell ;