From f08de0dc30dcbc23bb439d7be7228a3d8503aee3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E5=A8=81?= <1051127659@qq.com> Date: Tue, 13 Jul 2021 18:04:00 +0800 Subject: [PATCH] feat(form-dialog): add form dialog and form drawer oncancel return value (#1791) --- packages/antd/docs/components/FormDialog.md | 13 ++++++++++++- packages/antd/docs/components/FormDrawer.md | 14 +++++++++++++- packages/antd/src/form-dialog/index.tsx | 12 ++++++++---- packages/antd/src/form-drawer/index.tsx | 17 +++++++++++++---- packages/next/docs/components/FormDialog.md | 13 ++++++++++++- packages/next/docs/components/FormDrawer.md | 13 ++++++++++++- packages/next/src/form-dialog/index.tsx | 16 ++++++++++------ packages/next/src/form-drawer/index.tsx | 17 ++++++++++------- 8 files changed, 90 insertions(+), 25 deletions(-) diff --git a/packages/antd/docs/components/FormDialog.md b/packages/antd/docs/components/FormDialog.md index 03370cb31b5..642a2a44ada 100644 --- a/packages/antd/docs/components/FormDialog.md +++ b/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) => boolean | void +} +``` + +`ModalProps`类型定义参考ant design [Modal API](https://ant.design/components/modal-cn/#API) + ### FormDialog.Footer 无属性，只接收子节点 diff --git a/packages/antd/docs/components/FormDrawer.md b/packages/antd/docs/components/FormDrawer.md index d0cca32848c..235e7c388b4 100644 --- a/packages/antd/docs/components/FormDrawer.md +++ b/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 无属性，只接收子节点 diff --git a/packages/antd/src/form-dialog/index.tsx b/packages/antd/src/form-dialog/index.tsx index e9ce1215e9c..e945d3d624b 100644 --- a/packages/antd/src/form-dialog/index.tsx +++ b/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) => 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) diff --git a/packages/antd/src/form-drawer/index.tsx b/packages/antd/src/form-drawer/index.tsx index 8fd8aa1d57a..d89ed162fd7 100644 --- a/packages/antd/src/form-drawer/index.tsx +++ b/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 + | React.MouseEvent + +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) diff --git a/packages/next/docs/components/FormDialog.md b/packages/next/docs/components/FormDialog.md index 9510fb9a0f0..5024a4aaaa5 100644 --- a/packages/next/docs/components/FormDialog.md +++ b/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) => boolean | void +} +``` + +`DialogProps` 类型定义参考fusion [Dialog API](https://fusion.design/pc/component/dialog?themeid=2#API) + ### FormDialog.Footer 无属性，只接收子节点 diff --git a/packages/next/docs/components/FormDrawer.md b/packages/next/docs/components/FormDrawer.md index 223cf9905eb..46951e9ea28 100644 --- a/packages/next/docs/components/FormDrawer.md +++ b/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 无属性，只接收子节点 diff --git a/packages/next/src/form-dialog/index.tsx b/packages/next/src/form-dialog/index.tsx index 8f55d4ded65..f360f34c662 100644 --- a/packages/next/src/form-dialog/index.tsx +++ b/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) => 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) diff --git a/packages/next/src/form-drawer/index.tsx b/packages/next/src/form-drawer/index.tsx index 1d69171e9af..e41786926d9 100644 --- a/packages/next/src/form-drawer/index.tsx +++ b/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)