feat(form-dialog): add form dialog and form drawer oncancel return va…

…lue (#1791)

packages/antd/docs/components/FormDialog.md

@@ -232,12 +232,23 @@ interface IFormDialog {
     renderer: (resolve: () => void, reject: () => void) => React.ReactElement
   ): FormDialogHandler
   (
-    title: ModalProps, //如果是对象，则作为ModalProps传入
+    title: IFormModalProps, //如果是对象，则作为IFormModalProps传入
     renderer: (resolve: () => void, reject: () => void) => React.ReactElement
   ): FormDialogHandler
 }
 ```
 
+### IFormModalProps
+
+```ts pure
+interface IFormModalProps extends ModalProps {
+  // 如果返回值是true时，点取消或确定后不会关闭dialog，此时关闭dialog需要手动调用FormDialogHandler.close()
+  onCancel?: (e: React.MouseEvent<HTMLElement>) => boolean | void
+}
+```
+
+`ModalProps`类型定义参考ant design [Modal API](https://ant.design/components/modal-cn/#API)
+
 ### FormDialog.Footer
 
 无属性，只接收子节点

packages/antd/docs/components/FormDrawer.md

@@ -265,12 +265,24 @@ interface IFormDrawer {
     renderer: (resolve: () => void, reject: () => void) => React.ReactElement
   ): FormDrawerHandler
   (
-    title: ModalProps, //如果是对象，则作为DrawerProps传入
+    title: IFormDrawerProps, //如果是对象，则作为IFormDrawerProps传入
     renderer: (resolve: () => void, reject: () => void) => React.ReactElement
   ): FormDrawerHandler
 }
 ```
 
+### IFormDrawerProps
+
+```ts pure
+interface IFormDrawerProps extends DrawerProps {
+  // 如果返回值是true时，点取消或确定后不会关闭drawer，此时关闭drawer需要手动调用FormDrawerHandler.close()
+  onClose?: (reason: string, e: React.MouseEvent) => boolean | void
+}
+```
+
+`DrawerProps`类型定义参考ant design [Drawer API](https://ant.design/components/drawer-cn/#API)
+
+
 ### FormDrawer.Footer
 
 无属性，只接收子节点

packages/antd/src/form-dialog/index.tsx

@@ -13,13 +13,17 @@ type FormDialogContent =
 
 type ModalTitle = string | number | React.ReactElement
 
+interface IFormModalProps extends ModalProps {
+  onCancel?: (e: React.MouseEvent<HTMLElement>) => boolean | void
+}
+
 const isModalTitle = (props: any): props is ModalTitle => {
   return (
     isNum(props) || isStr(props) || isBool(props) || React.isValidElement(props)
   )
 }
 
-const getModelProps = (props: any): ModalProps => {
+const getModelProps = (props: any): IFormModalProps => {
   if (isModalTitle(props)) {
     return {
       title: props,
@@ -41,7 +45,7 @@ export interface IFormDialogComponentProps {
 }
 
 export function FormDialog(
-  title: ModalProps,
+  title: IFormModalProps,
   content: FormDialogContent
 ): IFormDialog
 export function FormDialog(
@@ -79,8 +83,8 @@ export function FormDialog(title: any, content: any): IFormDialog {
         {...modal}
         visible={visible}
         onCancel={(e) => {
-          modal?.onCancel?.(e)
-          formDialog.close()
+          const closeable = !modal?.onCancel?.(e)
+          closeable && formDialog.close()
         }}
         onOk={async (e) => {
           modal?.onOk?.(e)

packages/antd/src/form-drawer/index.tsx

@@ -11,6 +11,14 @@ type FormDrawerContent =
   | React.ReactElement
   | ((resolve: () => any, reject: () => any) => React.ReactElement)
 
+type EventType =
+  | React.KeyboardEvent<HTMLDivElement>
+  | React.MouseEvent<HTMLDivElement | HTMLButtonElement>
+
+interface IFormDrawerProps extends DrawerProps {
+  onClose?: (e: EventType) => boolean | void
+}
+
 type DrawerTitle = string | number | React.ReactElement
 
 const isDrawerTitle = (props: any): props is DrawerTitle => {
@@ -19,7 +27,7 @@ const isDrawerTitle = (props: any): props is DrawerTitle => {
   )
 }
 
-const getDrawerProps = (props: any): DrawerProps => {
+const getDrawerProps = (props: any): IFormDrawerProps => {
   if (isDrawerTitle(props)) {
     return {
       title: props,
@@ -41,7 +49,7 @@ export interface IFormDrawerComponentProps {
 }
 
 export function FormDrawer(
-  title: DrawerProps,
+  title: IFormDrawerProps,
   content: FormDrawerContent
 ): IFormDrawer
 export function FormDrawer(
@@ -59,8 +67,9 @@ export function FormDrawer(title: any, content: any): IFormDrawer {
     width: '40%',
     ...props,
     onClose: (e: any) => {
-      props?.onClose?.(e)
-      formDrawer.close()
+      const closeable = !props?.onClose?.(e)
+
+      closeable && formDrawer.close()
     },
     afterVisibleChange: (visible: boolean) => {
       props?.afterVisibleChange?.(visible)

packages/next/docs/components/FormDialog.md

@@ -310,12 +310,23 @@ interface IFormDialog {
     renderer: (resolve: () => void, reject: () => void) => React.ReactElement
   ): FormDialogHandler
   (
-    title: ModalProps, //如果是对象，则作为ModalProps传入
+    title: IFormDialogProps, //如果是对象，则作为IFormDialogProps传入
     renderer: (resolve: () => void, reject: () => void) => React.ReactElement
   ): FormDialogHandler
 }
 ```
 
+### IFormDialogProps
+
+```ts pure
+interface IFormDialogProps extends DialogProps {
+  // 如果返回值是true时，点取消或确定后不会关闭dialog，如果需要关闭dialog需要手动调用FormDialogHandler.close()
+  onCancel?: (e: React.MouseEvent<Element>) => boolean | void
+}
+```
+
+`DialogProps` 类型定义参考fusion [Dialog API](https://fusion.design/pc/component/dialog?themeid=2#API)
+
 ### FormDialog.Footer
 
 无属性，只接收子节点

packages/next/docs/components/FormDrawer.md

@@ -345,12 +345,23 @@ interface IFormDrawer {
     renderer: (resolve: () => void, reject: () => void) => React.ReactElement
   ): FormDrawerHandler
   (
-    title: ModalProps, //如果是对象，则作为DrawerProps传入
+    title: IFormDrawerProps, //如果是对象，则作为IFormDrawerProps传入
     renderer: (resolve: () => void, reject: () => void) => React.ReactElement
   ): FormDrawerHandler
 }
 ```
 
+### IFormDrawerProps
+
+```ts pure
+interface IFormDrawerProps extends DrawerProps {
+  // 如果返回值是true时，点取消或确定后不会关闭drawer，如果需要关闭drawer需要手动调用FormDrawerHandler.close()
+  onClose?: (reason: string, e: React.MouseEvent) => boolean | void
+}
+```
+
+`DrawerProps` 类型定义参考fusion [Drawer API](https://fusion.design/pc/component/drawer?themeid=2#API)
+
 ### FormDrawer.Footer
 
 无属性，只接收子节点

packages/next/src/form-dialog/index.tsx

@@ -13,13 +13,17 @@ type FormDialogContent =
 
 type ModalTitle = string | number | React.ReactElement
 
+interface IFormDialogProps extends DialogProps {
+  onCancel?: (e: React.MouseEvent<Element>) => boolean | void
+}
+
 const isModalTitle = (props: any): props is ModalTitle => {
   return (
     isNum(props) || isStr(props) || isBool(props) || React.isValidElement(props)
   )
 }
 
-const getModelProps = (props: any): DialogProps => {
+const getModelProps = (props: any): IFormDialogProps => {
   if (isModalTitle(props)) {
     return {
       title: props,
@@ -41,7 +45,7 @@ export interface IFormDialogComponentProps {
 }
 
 export function FormDialog(
-  title: DialogProps,
+  title: IFormDialogProps,
   content: FormDialogContent
 ): IFormDialog
 export function FormDialog(
@@ -57,8 +61,7 @@ export function FormDialog(title: any, content: any): IFormDialog {
 
   let contextProps = {}
   try {
-    // @ts-ignore
-    contextProps = ConfigProvider.getContext()
+    contextProps = (ConfigProvider as any).getContext()
   } catch (e) {}
 
   const props = getModelProps(title)
@@ -95,8 +98,9 @@ export function FormDialog(title: any, content: any): IFormDialog {
             formDialog.close()
           }}
           onCancel={(e) => {
-            modal?.onCancel?.(e)
-            formDialog.close()
+            const closeable = !modal?.onCancel?.(e)
+
+            closeable && formDialog.close()
           }}
           onOk={async (e) => {
             modal?.onOk?.(e)

packages/next/src/form-drawer/index.tsx

@@ -19,7 +19,11 @@ const isDrawerTitle = (props: any): props is DrawerTitle => {
   )
 }
 
-const getDrawerProps = (props: any): DrawerProps => {
+interface IFormDrawerProps extends DrawerProps {
+  onClose?: (reason: string, e: React.MouseEvent) => boolean | void
+}
+
+const getDrawerProps = (props: any): IFormDrawerProps => {
   if (isDrawerTitle(props)) {
     return {
       title: props,
@@ -41,7 +45,7 @@ export interface IFormDrawerComponentProps {
 }
 
 export function FormDrawer(
-  title: DrawerProps,
+  title: IFormDrawerProps,
   content: FormDrawerContent
 ): IFormDrawer
 export function FormDrawer(
@@ -57,17 +61,16 @@ export function FormDrawer(title: any, content: any): IFormDrawer {
 
   let contextProps = {}
   try {
-    // @ts-ignore
-    contextProps = ConfigProvider.getContext()
+    contextProps = (ConfigProvider as any).getContext()
   } catch (e) {}
 
   const props = getDrawerProps(title)
-  const drawer: DrawerProps = {
+  const drawer: IFormDrawerProps = {
     width: '40%',
     ...props,
     onClose: (reason: string, e: any) => {
-      props?.onClose?.(reason, e)
-      formDrawer.close()
+      const closeable = !props?.onClose?.(reason, e)
+      closeable && formDrawer.close()
     },
     afterClose() {
       ReactDOM.unmountComponentAtNode(env.root)