update 强化菜单

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

@@ -3,56 +3,62 @@ import { Button, Drawer, message as Message, Modal } from 'antd'
 import { cloneDeep, isEqual } from 'lodash'
 
 /**
-     * 渲染对话框
-     * @param {*} props 
-     * @param {*} on 
-     * @param {*} childWithProps 
-     * @returns 
-     */
+ * 渲染对话框
+ * @param {*} props
+ * @param {*} on
+ * @param {*} childWithProps
+ * @returns
+ */
 function renderModal(props, on, childWithProps) {
-
     on = {
         ...on,
-        onCancel: () => this.onClose()
+        onCancel: () => this.onClose(),
     }
 
-    return <Modal className="yo-modal-form" {...props} {...on}>
-        {childWithProps}
-    </Modal>
-
+    return (
+        <Modal className="yo-modal-form" {...props} {...on}>
+            {childWithProps}
+        </Modal>
+    )
 }
 
 /**
  * 渲染抽屉
- * @param {*} props 
- * @param {*} on 
- * @param {*} childWithProps 
- * @returns 
+ * @param {*} props
+ * @param {*} on
+ * @param {*} childWithProps
+ * @returns
  */
 function renderDrawer(props, on, childWithProps) {
     on = {
         ...on,
-        onClose: () => this.onClose()
+        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>
+    // react在这里会对该组件不存在的props抛出异常
+    ;['action', 'onSuccess', 'onOk', 'confirmLoading'].forEach(p => {
+        delete props[p]
+    })
+
+    return (
+        <Drawer className="yo-drawer-form" {...props} onClose={() => on.onClose()}>
+            <div className="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 = {
         // 弹窗显示/隐藏
         visible: false,
         // 提交状态
-        confirmLoading: false
+        confirmLoading: false,
     }
 
     // 子元素实例
@@ -67,12 +73,11 @@ export default class ModalForm extends Component {
     snapshot = null
 
     // 完成操作
-    action = async () => { }
+    action = async () => {}
 
     // 是否在关闭时校验数据改变
     compareOnClose = true
 
-
     constructor(props) {
         super(props)
 
@@ -93,7 +98,7 @@ export default class ModalForm extends Component {
 
     /**
      * 打开弹窗
-     * @param {*} data 
+     * @param {*} data
      */
     open = (data = {}) => {
         this.data = data
@@ -110,7 +115,7 @@ export default class ModalForm extends Component {
     /**
      * 子元素创建后回调
      * 对子元素数据进行填充,(如需关闭时对比)之后再获取结构调整后的数据快照
-     * @returns 
+     * @returns
      */
     onCreated = async () => {
         const body = this.childNode.current
@@ -126,7 +131,7 @@ export default class ModalForm extends Component {
     /**
      * 取消编辑
      * (如需关闭时对比)获取当前数据结构与快照对比
-     * @returns 
+     * @returns
      */
     onClose = async () => {
         const body = this.childNode.current
@@ -143,7 +148,7 @@ export default class ModalForm extends Component {
                     content: '当前内容已更改，是否确认不保存并且关闭',
                     onOk: () => {
                         this.close()
-                    }
+                    },
                 })
                 return
             }
@@ -155,7 +160,7 @@ export default class ModalForm extends Component {
     /**
      * 完成编辑
      * 校验并获取结构调整后的数据,调用this.action进行操作
-     * @returns 
+     * @returns
      */
     onOk = async () => {
         const body = this.childNode.current
@@ -175,39 +180,33 @@ export default class ModalForm extends Component {
                     this.props.onSuccess(postData)
                 }
             }
-
         } finally {
             this.setState({ confirmLoading: false })
         }
     }
 
     render() {
-
         const props = {
             ...this.props,
             visible: this.state.visible,
             destroyOnClose: true,
 
-            confirmLoading: this.state.confirmLoading
+            confirmLoading: this.state.confirmLoading,
         }
 
         const on = {
-            onOk: () => this.onOk()
+            onOk: () => this.onOk(),
         }
 
-        const childWithProps = React.cloneElement(
-            React.Children.only(this.props.children),
-            {
-                created: childNode => {
-                    this.childNode.current = childNode
-                    this.onCreated()
-                }
-            }
-        )
+        const childWithProps = React.cloneElement(React.Children.only(this.props.children), {
+            created: childNode => {
+                this.childNode.current = childNode
+                this.onCreated()
+            },
+        })
 
-        return this.type === 'modal' ?
-            renderModal.call(this, props, on, childWithProps)
-            :
-            renderDrawer.call(this, props, on, childWithProps)
+        return this.type === 'modal'
+            ? renderModal.call(this, props, on, childWithProps)
+            : renderDrawer.call(this, props, on, childWithProps)
     }
 }