refactor: dialog

migrate-from-v1.md

@@ -167,6 +167,21 @@
 - distance 重命名为 threshold
 - 移除 isAnimation，通过 duration 设置 0 实现无动画效果
 #### Dialog
+- 修改 okText 为 confirmText，规范命名。
+- 修改 mask 为 overlay，组件库中统一使用 Overlay 组件作为遮罩层，并使用 overlay 作为是否展示遮罩层的属性值。
+- 修改 closeOnClickOverlay 为 closeOnOverlayClick，组件库统一到该属性。
+- 修改 noOkBtn 为 hideConfirmButton，初始值不变，依然表示是否隐藏确认按钮，主要是为了语义化更强。
+- 修改 noCancelBtn 为 hideCancelButton，初始值不变，依然表示是否隐藏取消按钮，主要是为了语义化更强。
+- 修改 okBtnDisabled 为 disableConfirmButton，初始值不变，依然表示是否禁用确认按钮，主要是为了语义化更强。
+- 删除 noFooter，使用 footer 统一处理，当 footer 为空时，及可替代该值。目前 noFooter 也需要手动声明是否为 noFooter；修改后需手动指出 footer={null}
+- 删除 textAlign，改用样式变量 --nutui-dialog-content-text-align 或 SCSS 变量 $dialog-content-text-align 控制，默认值为 center。
+- 删除 `cancelAutoClose`，改为 `beforeCancel` 和 `beforeClose` 来实现，在点击关闭或取消时，可先触发这两个方法，以确定是否要关闭弹框，如返回true，则关闭；否则不关闭。
+- 修改 onOk 为 onConfirm，规范命名。
+- 修改 onClosed 为 onClose，规范命名，关闭时触发。
+- 修改 onClickSelf 为 onClick，语义不变，仍表示点击弹框自身时触发事件。
+- 增加 overlayStyle 和 overlayClassName，用来配置 Overlay 组件样式。
+- 增加 onClickOverlay，支持点击overlay时，触发事件。
+
 #### Drag
 #### Infiniteloading
 #### Notify

src/packages/dialog/__test__/dialog.spec.tsx

@@ -4,10 +4,10 @@ import '@testing-library/jest-dom'
 import { Dialog } from '../dialog'
 
 test('show dialog base info display ', async () => {
-  const onClosed = jest.fn()
+  const onClose = jest.fn()
   const { container } = render(
-    <Dialog title="title" data-testid="test" visible onClosed={onClosed}>
-      content
+    <Dialog title="title" data-testid="test" visible onClose={onClose}>
+      <div>content</div>
     </Dialog>
   )
 
@@ -30,9 +30,9 @@ test('show dialog base info display ', async () => {
   expect(contentEle.innerHTML).toEqual('<div>content</div>')
   expect(footerEle.children.length).toBe(2)
 
-  expect(wrapEle).toHaveAttribute('style', 'display: block;')
+  expect(wrapEle).toBeNull()
   fireEvent.click(footerCancelEle)
-  expect(onClosed).toBeCalled()
+  expect(onClose).toBeCalled()
 })
 
 test('show dialog custom footer-direction ', async () => {
@@ -50,7 +50,7 @@ test('show dialog custom footer-direction ', async () => {
 
 test('hide dialog footer', async () => {
   const { container } = render(
-    <Dialog title="title" noFooter visible>
+    <Dialog title="title" footer={null} visible>
       content
     </Dialog>
   )
@@ -60,17 +60,15 @@ test('hide dialog footer', async () => {
 
 test('hide dialog title', async () => {
   const { container } = render(<Dialog visible>content</Dialog>)
-
   expect(container.querySelectorAll('.nut-dialog__header').length).toBe(0)
 })
 
 test('tips dialog', async () => {
   const { container } = render(
-    <Dialog visible noCancelBtn>
+    <Dialog visible hideCancelButton>
       content
     </Dialog>
   )
-
   expect(container.querySelectorAll('.nut-dialog__footer-cancel').length).toBe(
     0
   )

src/packages/dialog/config.ts

@@ -1,39 +1,30 @@
-import {
-  CSSProperties,
-  ReactNode,
-  ForwardRefExoticComponent,
-  PropsWithChildren,
-} from 'react'
+import { ReactNode, ForwardRefExoticComponent, PropsWithChildren } from 'react'
 
 export type DialogConfigType = {
   prefixCls?: string
   simple?: boolean
 }
 
 export interface BasicDialogProps {
-  className?: string
-  style?: CSSProperties
   visible?: boolean
   title?: ReactNode
   content?: ReactNode
   footer?: ReactNode
   confirmText?: ReactNode
   cancelText?: ReactNode
-  mask?: boolean
-  noOkBtn?: boolean
-  noCancelBtn?: boolean
-  okBtnDisabled?: boolean
-  noFooter?: boolean
-  closeOnClickOverlay?: boolean
-  cancelAutoClose?: boolean
-  textAlign?: string
+  overlay?: boolean
+  hideConfirmButton?: boolean
+  hideCancelButton?: boolean
+  disableConfirmButton?: boolean
+  closeOnOverlayClick?: boolean
   footerDirection?: string
   lockScroll?: boolean
-  onClosed?: () => void
-  onOk?: (e?: MouseEvent) => Promise<() => void> | void
-  onCancel?: () => void
-  onClickSelf?: () => void
+  beforeClose?: () => boolean
+  beforeCancel?: () => boolean
+  onClose?: () => void
   onConfirm?: (e?: MouseEvent) => Promise<() => void> | void
+  onCancel?: () => void
+  onClick?: () => void
 }
 
 export type DialogReturnProps = {