feat(antd/next): improve FormDialog/FormDrawer typings and api (#1886)

alibaba · Jul 27, 2021 · e3d7d26 · e3d7d26
1 parent 4e2203e
commit e3d7d26
Show file tree

Hide file tree

Showing 14 changed files with 153 additions and 75 deletions.
diff --git a/packages/antd/docs/components/FormDialog.md b/packages/antd/docs/components/FormDialog.md
@@ -288,6 +288,8 @@ type FormDialogRenderer =
   | React.ReactElement
   | ((form: Form) => React.ReactElement)
 
+type ModalTitle = string | number | React.ReactElement
+
 interface IFormDialog {
   forOpen(
     middleware: (
@@ -307,9 +309,15 @@ interface IFormDialog {
   close(): void
 }
 
+interface IModalProps extends ModalProps {
+  onOk?: (event: React.MouseEvent<HTMLElement>) => void | boolean // return false can prevent onOk
+  onCancel?: (event: React.MouseEvent<HTMLElement>) => void | boolean // return false can prevent onCancel
+  loadingText?: React.ReactNode
+}
+
 interface FormDialog {
-  (title: ModalProps, id: string, renderer: FormDialogRenderer): IFormDialog
-  (title: ModalProps, renderer: FormDialogRenderer): IFormDialog
+  (title: IModalProps, id: string, renderer: FormDialogRenderer): IFormDialog
+  (title: IModalProps, renderer: FormDialogRenderer): IFormDialog
   (title: ModalTitle, id: string, renderer: FormDialogRenderer): IFormDialog
   (title: ModalTitle, renderer: FormDialogRenderer): IFormDialog
 }

diff --git a/packages/antd/docs/components/FormDialog.zh-CN.md b/packages/antd/docs/components/FormDialog.zh-CN.md
@@ -297,6 +297,8 @@ type FormDialogRenderer =
   | React.ReactElement
   | ((form: Form) => React.ReactElement)
 
+type ModalTitle = string | number | React.ReactElement
+
 interface IFormDialog {
   forOpen(
     middleware: (
@@ -316,9 +318,15 @@ interface IFormDialog {
   close(): void
 }
 
+interface IModalProps extends ModalProps {
+  onOk?: (event: React.MouseEvent<HTMLElement>) => void | boolean // return false can prevent onOk
+  onCancel?: (event: React.MouseEvent<HTMLElement>) => void | boolean // return false can prevent onCancel
+  loadingText?: React.ReactNode
+}
+
 interface FormDialog {
-  (title: ModalProps, id: string, renderer: FormDialogRenderer): IFormDialog
-  (title: ModalProps, renderer: FormDialogRenderer): IFormDialog
+  (title: IModalProps, id: string, renderer: FormDialogRenderer): IFormDialog
+  (title: IModalProps, renderer: FormDialogRenderer): IFormDialog
   (title: ModalTitle, id: string, renderer: FormDialogRenderer): IFormDialog
   (title: ModalTitle, renderer: FormDialogRenderer): IFormDialog
 }

diff --git a/packages/antd/docs/components/FormDrawer.md b/packages/antd/docs/components/FormDrawer.md
@@ -300,9 +300,14 @@ interface IFormDrawer {
   close(): void
 }
 
+export interface IDrawerProps extends DrawerProps {
+  onClose?: (e: EventType) => void | boolean // return false can prevent onClose
+  loadingText?: React.ReactNode
+}
+
 interface FormDrawer {
-  (title: DrawerProps, id: string, renderer: FormDrawerRenderer): IFormDrawer
-  (title: DrawerProps, renderer: FormDrawerRenderer): IFormDrawer
+  (title: IDrawerProps, id: string, renderer: FormDrawerRenderer): IFormDrawer
+  (title: IDrawerProps, renderer: FormDrawerRenderer): IFormDrawer
   (title: ModalTitle, id: string, renderer: FormDrawerRenderer): IFormDrawer
   (title: ModalTitle, renderer: FormDrawerRenderer): IFormDrawer
 }

diff --git a/packages/antd/docs/components/FormDrawer.zh-CN.md b/packages/antd/docs/components/FormDrawer.zh-CN.md
@@ -300,9 +300,14 @@ interface IFormDrawer {
   close(): void
 }
 
+export interface IDrawerProps extends DrawerProps {
+  onClose?: (e: EventType) => void | boolean // return false can prevent onClose
+  loadingText?: React.ReactNode
+}
+
 interface FormDrawer {
-  (title: DrawerProps, id: string, renderer: FormDrawerRenderer): IFormDrawer
-  (title: DrawerProps, renderer: FormDrawerRenderer): IFormDrawer
+  (title: IDrawerProps, id: string, renderer: FormDrawerRenderer): IFormDrawer
+  (title: IDrawerProps, renderer: FormDrawerRenderer): IFormDrawer
   (title: ModalTitle, id: string, renderer: FormDrawerRenderer): IFormDrawer
   (title: ModalTitle, renderer: FormDrawerRenderer): IFormDrawer
 }

diff --git a/packages/antd/src/__builtins__/loading.ts b/packages/antd/src/__builtins__/loading.ts
@@ -1,9 +1,12 @@
 import { message } from 'antd'
 
-export const loading = async (processor: () => Promise<any>) => {
+export const loading = async (
+  title: React.ReactNode = 'Loading...',
+  processor: () => Promise<any>
+) => {
   let hide = null
   let loading = setTimeout(() => {
-    hide = message.loading('Loading...')
+    hide = message.loading(title)
   }, 100)
   const results = await processor()
   hide?.()

diff --git a/packages/antd/src/form-dialog/index.tsx b/packages/antd/src/form-dialog/index.tsx
@@ -31,7 +31,7 @@ const isModalTitle = (props: any): props is ModalTitle => {
   )
 }
 
-const getModelProps = (props: any): ModalProps => {
+const getModelProps = (props: any): IModalProps => {
   if (isModalTitle(props)) {
     return {
       title: props,
@@ -49,25 +49,29 @@ export interface IFormDialog {
   close(): void
 }
 
+export interface IModalProps extends ModalProps {
+  onOk?: (event: React.MouseEvent<HTMLElement>) => void | boolean
+  onCancel?: (event: React.MouseEvent<HTMLElement>) => void | boolean
+  loadingText?: React.ReactNode
+}
+
 export function FormDialog(
-  title: ModalProps,
+  title: IModalProps,
   id: string,
-  renderer?: FormDialogRenderer
+  renderer: FormDialogRenderer
 ): IFormDialog
 export function FormDialog(
-  title: ModalProps,
-  id: FormDialogRenderer,
-  renderer?: unknown
+  title: IModalProps,
+  renderer: FormDialogRenderer
 ): IFormDialog
 export function FormDialog(
   title: ModalTitle,
   id: string,
-  renderer?: FormDialogRenderer
+  renderer: FormDialogRenderer
 ): IFormDialog
 export function FormDialog(
   title: ModalTitle,
-  id: FormDialogRenderer,
-  renderer?: unknown
+  renderer: FormDialogRenderer
 ): IFormDialog
 export function FormDialog(title: any, id: any, renderer?: any): IFormDialog {
   if (isFn(id) || React.isValidElement(id)) {
@@ -107,12 +111,14 @@ export function FormDialog(title: any, id: any, renderer?: any): IFormDialog {
             visible={visible}
             confirmLoading={env.form.submitting}
             onCancel={(e) => {
-              modal?.onCancel?.(e)
-              reject()
+              if (modal?.onCancel?.(e) !== false) {
+                reject()
+              }
             }}
             onOk={async (e) => {
-              modal?.onOk?.(e)
-              resolve()
+              if (modal?.onOk?.(e) !== false) {
+                resolve()
+              }
             }}
           >
             <FormProvider form={env.form}>
@@ -148,7 +154,7 @@ export function FormDialog(title: any, id: any, renderer?: any): IFormDialog {
       if (env.promise) return env.promise
       env.promise = new Promise(async (resolve, reject) => {
         try {
-          props = await loading(() =>
+          props = await loading(modal.loadingText, () =>
             applyMiddleware(props, env.openMiddlewares)
           )
           env.form = env.form || createForm(props)
@@ -168,7 +174,7 @@ export function FormDialog(title: any, id: any, renderer?: any): IFormDialog {
                 .catch(() => {})
             },
             async () => {
-              await loading(() =>
+              await loading(modal.loadingText, () =>
                 applyMiddleware(env.form, env.cancelMiddlewares)
               )
               formDialog.close()

diff --git a/packages/antd/src/form-drawer/index.tsx b/packages/antd/src/form-drawer/index.tsx
@@ -30,13 +30,17 @@ type FormDrawerRenderer =
 
 type DrawerTitle = string | number | React.ReactElement
 
+type EventType =
+  | React.KeyboardEvent<HTMLDivElement>
+  | React.MouseEvent<HTMLDivElement | HTMLButtonElement>
+
 const isDrawerTitle = (props: any): props is DrawerTitle => {
   return (
     isNum(props) || isStr(props) || isBool(props) || React.isValidElement(props)
   )
 }
 
-const getDrawerProps = (props: any): DrawerProps => {
+const getDrawerProps = (props: any): IDrawerProps => {
   if (isDrawerTitle(props)) {
     return {
       title: props,
@@ -52,25 +56,28 @@ export interface IFormDrawer {
   close(): void
 }
 
+export interface IDrawerProps extends DrawerProps {
+  onClose?: (e: EventType) => void | boolean
+  loadingText?: React.ReactNode
+}
+
 export function FormDrawer(
-  title: DrawerProps,
+  title: IDrawerProps,
   id: string,
-  renderer?: FormDrawerRenderer
+  renderer: FormDrawerRenderer
 ): IFormDrawer
 export function FormDrawer(
-  title: DrawerProps,
-  id: FormDrawerRenderer,
-  renderer?: unknown
+  title: IDrawerProps,
+  id: FormDrawerRenderer
 ): IFormDrawer
 export function FormDrawer(
   title: DrawerTitle,
   id: string,
-  renderer?: FormDrawerRenderer
+  renderer: FormDrawerRenderer
 ): IFormDrawer
 export function FormDrawer(
   title: DrawerTitle,
-  id: FormDrawerRenderer,
-  renderer?: unknown
+  id: FormDrawerRenderer
 ): IFormDrawer
 export function FormDrawer(title: any, id: any, renderer?: any): IFormDrawer {
   if (isFn(id) || React.isValidElement(id)) {
@@ -89,8 +96,9 @@ export function FormDrawer(title: any, id: any, renderer?: any): IFormDrawer {
     width: '40%',
     ...props,
     onClose: (e: any) => {
-      props?.onClose?.(e)
-      formDrawer.close()
+      if (props?.onClose?.(e) !== false) {
+        formDrawer.close()
+      }
     },
     afterVisibleChange: (visible: boolean) => {
       props?.afterVisibleChange?.(visible)
@@ -123,7 +131,7 @@ export function FormDrawer(title: any, id: any, renderer?: any): IFormDrawer {
       if (env.promise) return env.promise
       env.promise = new Promise(async (resolve, reject) => {
         try {
-          props = await loading(() =>
+          props = await loading(drawer.loadingText, () =>
             applyMiddleware(props, env.openMiddlewares)
           )
           env.form =

diff --git a/packages/next/docs/components/FormDialog.md b/packages/next/docs/components/FormDialog.md
@@ -322,9 +322,15 @@ interface IFormDialog {
   close(): void
 }
 
+interface IDialogProps extends DialogProps {
+  onOk?: (event: React.MouseEvent) => void | boolean // return false can prevent onOk
+  onCancel?: (event: React.MouseEvent) => void | boolean // return false can prevent onCancel
+  loadingText?: React.ReactText
+}
+
 interface FormDialog {
-  (title: DialogProps, id: string, renderer: FormDialogRenderer): IFormDialog
-  (title: DialogProps, renderer: FormDialogRenderer): IFormDialog
+  (title: IDialogProps, id: string, renderer: FormDialogRenderer): IFormDialog
+  (title: IDialogProps, renderer: FormDialogRenderer): IFormDialog
   (title: ModalTitle, id: string, renderer: FormDialogRenderer): IFormDialog
   (title: ModalTitle, renderer: FormDialogRenderer): IFormDialog
 }

diff --git a/packages/next/docs/components/FormDialog.zh-CN.md b/packages/next/docs/components/FormDialog.zh-CN.md
@@ -351,9 +351,15 @@ interface IFormDialog {
   close(): void
 }
 
+interface IDialogProps extends DialogProps {
+  onOk?: (event: React.MouseEvent) => void | boolean // return false can prevent onOk
+  onCancel?: (event: React.MouseEvent) => void | boolean // return false can prevent onCancel
+  loadingText?: React.ReactText
+}
+
 interface FormDialog {
-  (title: DialogProps, id: string, renderer: FormDialogRenderer): IFormDialog
-  (title: DialogProps, renderer: FormDialogRenderer): IFormDialog
+  (title: IDialogProps, id: string, renderer: FormDialogRenderer): IFormDialog
+  (title: IDialogProps, renderer: FormDialogRenderer): IFormDialog
   (title: ModalTitle, id: string, renderer: FormDialogRenderer): IFormDialog
   (title: ModalTitle, renderer: FormDialogRenderer): IFormDialog
 }

diff --git a/packages/next/docs/components/FormDrawer.md b/packages/next/docs/components/FormDrawer.md
@@ -351,9 +351,14 @@ interface IFormDrawer {
   close(): void
 }
 
+interface IDrawerProps extends DrawerProps {
+  onClose?: (reason: string, e: React.MouseEvent) => void | boolean // return false can prevent onClose
+  loadingText?: React.ReactNode
+}
+
 interface FormDrawer {
-  (title: DrawerProps, id: string, renderer: FormDrawerRenderer): IFormDrawer
-  (title: DrawerProps, renderer: FormDrawerRenderer): IFormDrawer
+  (title: IDrawerProps, id: string, renderer: FormDrawerRenderer): IFormDrawer
+  (title: IDrawerProps, renderer: FormDrawerRenderer): IFormDrawer
   (title: ModalTitle, id: string, renderer: FormDrawerRenderer): IFormDrawer
   (title: ModalTitle, renderer: FormDrawerRenderer): IFormDrawer
 }

diff --git a/packages/next/docs/components/FormDrawer.zh-CN.md b/packages/next/docs/components/FormDrawer.zh-CN.md
@@ -368,9 +368,14 @@ interface IFormDrawer {
   close(): void
 }
 
+interface IDrawerProps extends DrawerProps {
+  onClose?: (reason: string, e: React.MouseEvent) => void | boolean // return false can prevent onClose
+  loadingText?: React.ReactNode
+}
+
 interface FormDrawer {
-  (title: DrawerProps, id: string, renderer: FormDrawerRenderer): IFormDrawer
-  (title: DrawerProps, renderer: FormDrawerRenderer): IFormDrawer
+  (title: IDrawerProps, id: string, renderer: FormDrawerRenderer): IFormDrawer
+  (title: IDrawerProps, renderer: FormDrawerRenderer): IFormDrawer
   (title: ModalTitle, id: string, renderer: FormDrawerRenderer): IFormDrawer
   (title: ModalTitle, renderer: FormDrawerRenderer): IFormDrawer
 }

diff --git a/packages/next/src/__builtins__/loading.ts b/packages/next/src/__builtins__/loading.ts
@@ -1,8 +1,11 @@
 import { Message } from '@alifd/next'
 
-export const loading = async (processor: () => Promise<any>) => {
+export const loading = async (
+  title: React.ReactNode = 'Loading...',
+  processor: () => Promise<any>
+) => {
   let loading = setTimeout(() => {
-    Message.loading('Loading...')
+    Message.loading(title as any)
   }, 100)
   const results = await processor()
   Message.hide()