update 大量细节处理

web-react/src/components/modal-form/index.jsx

@@ -2,6 +2,50 @@ import React, { Component } from 'react'
 import { Button, Drawer, message as Message, Modal } from 'antd'
 import { cloneDeep, isEqual } from 'lodash'
 
+/**
+     * 渲染对话框
+     * @param {*} props 
+     * @param {*} on 
+     * @param {*} childWithProps 
+     * @returns 
+     */
+function renderModal(props, on, childWithProps) {
+
+    on = {
+        ...on,
+        onCancel: () => this.onClose()
+    }
+
+    return <Modal className="yo-modal-form" {...props} {...on}>
+        {childWithProps}
+    </Modal>
+
+}
+
+/**
+ * 渲染抽屉
+ * @param {*} props 
+ * @param {*} on 
+ * @param {*} childWithProps 
+ * @returns 
+ */
+function renderDrawer(props, on, childWithProps) {
+    on = {
+        ...on,
+        onClose: () => this.onClose()
+    }
+
+    return <Drawer className="yo-drawer-form" {...props} {...on}>
+        <div class="yo-drawer-form--body">
+            {childWithProps}
+        </div>
+        <div className="ant-drawer-footer">
+            <Button onClick={on.onClose}>取消</Button>
+            <Button loading={this.state.confirmLoading} onClick={on.onOk} type="primary">确定</Button>
+        </div>
+    </Drawer>
+}
+
 export default class ModalForm extends Component {
 
     state = {
@@ -51,7 +95,7 @@ export default class ModalForm extends Component {
      * 打开弹窗
      * @param {*} data 
      */
-    open(data = {}) {
+    open = (data = {}) => {
         this.data = data
         this.setState({ visible: true })
     }
@@ -59,7 +103,7 @@ export default class ModalForm extends Component {
     /**
      * 关闭弹窗
      */
-    close() {
+    close = () => {
         this.setState({ visible: false })
     }
 
@@ -68,7 +112,7 @@ export default class ModalForm extends Component {
      * 对子元素数据进行填充,(如需关闭时对比)之后再获取结构调整后的数据快照
      * @returns 
      */
-    async onCreated() {
+    onCreated = async () => {
         const body = this.childNode.current
         if (!body || !body.fillData) return
 
@@ -84,7 +128,7 @@ export default class ModalForm extends Component {
      * (如需关闭时对比)获取当前数据结构与快照对比
      * @returns 
      */
-    async onClose() {
+    onClose = async () => {
         const body = this.childNode.current
         if (!body) {
             this.close()
@@ -113,7 +157,7 @@ export default class ModalForm extends Component {
      * 校验并获取结构调整后的数据,调用this.action进行操作
      * @returns 
      */
-    async onOk() {
+    onOk = async () => {
         const body = this.childNode.current
         if (!body || !this.action || !body.getData) return
 
@@ -137,50 +181,6 @@ export default class ModalForm extends Component {
         }
     }
 
-    /**
-     * 渲染对话框
-     * @param {*} props 
-     * @param {*} on 
-     * @param {*} childWithProps 
-     * @returns 
-     */
-    renderModal(props, on, childWithProps) {
-
-        on = {
-            ...on,
-            onCancel: () => this.onClose()
-        }
-
-        return <Modal className="yo-modal-form" {...props} {...on}>
-            {childWithProps}
-        </Modal>
-
-    }
-
-    /**
-     * 渲染抽屉
-     * @param {*} props 
-     * @param {*} on 
-     * @param {*} childWithProps 
-     * @returns 
-     */
-    renderDrawer(props, on, childWithProps) {
-        on = {
-            ...on,
-            onClose: () => this.onClose()
-        }
-
-        return <Drawer className="yo-drawer-form" {...props} {...on}>
-            <div class="yo-drawer-form--body">
-                {childWithProps}
-            </div>
-            <div className="ant-drawer-footer">
-                <Button onClick={on.onClose}>取消</Button>
-                <Button loading={this.state.confirmLoading} onClick={on.onOk} type="primary">确定</Button>
-            </div>
-        </Drawer>
-    }
-
     render() {
 
         const props = {
@@ -206,8 +206,8 @@ export default class ModalForm extends Component {
         )
 
         return this.type === 'modal' ?
-            this.renderModal(props, on, childWithProps)
+            renderModal.call(this, props, on, childWithProps)
             :
-            this.renderDrawer(props, on, childWithProps)
+            renderDrawer.call(this, props, on, childWithProps)
     }
 }