feature(dialog)：add position prop support (#2047)

youzan · May 20, 2024 · 71a0eaf · 71a0eaf
1 parent a29c78d
commit 71a0eaf
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 38 deletions.
diff --git a/packages/zent/__tests__/dialog/Dialog.spec.jsx b/packages/zent/__tests__/dialog/Dialog.spec.jsx
@@ -153,9 +153,12 @@ describe('Dialog component', () => {
     button.style.left = '100px';
     button.style.top = '100px';
     button.addEventListener('click', () => open());
-
+    const clickEvent = new MouseEvent('click', {
+      clientX: 100,
+      clientY: 100,
+    });
     document.body.appendChild(button);
-    button.click();
+    button.dispatchEvent(clickEvent);
 
     jest.runAllTimers();
 

diff --git a/packages/zent/src/dialog/Dialog.tsx b/packages/zent/src/dialog/Dialog.tsx
@@ -6,6 +6,7 @@ import isBrowser from '../utils/isBrowser';
 import { DialogElWrapper, DialogInnerEl, IMousePosition } from './DialogEl';
 import { openDialog, closeDialog } from './open';
 import { addEventListener } from '../utils/component/event-handler';
+import { DialogPosition, IDialogPositionType } from './position';
 
 const TIMEOUT = 300; // ms
 
@@ -16,6 +17,9 @@ if (isBrowser) {
     document.documentElement,
     'click',
     (e: MouseEvent) => {
+      if (e.clientX === 0 || e.clientY === 0) {
+        return;
+      }
       mousePosition = {
         x: e.clientX,
         y: e.clientY,
@@ -36,6 +40,7 @@ export interface IDialogProps {
   maskClosable?: boolean;
   className?: string;
   style?: React.CSSProperties;
+  position?: IDialogPositionType;
   onOpened?: () => void;
   onClosed?: () => void;
 }
@@ -51,6 +56,7 @@ export class Dialog extends Component<IDialogProps, IDialogState> {
     visible: false,
     className: '',
     style: {},
+    position: DialogPosition.auto,
     title: '',
     closeBtn: true,
     mask: true,
@@ -108,6 +114,7 @@ export class Dialog extends Component<IDialogProps, IDialogState> {
       visible,
       closeBtn,
       style,
+      position,
       onOpened,
       onClosed,
       mask,
@@ -152,6 +159,7 @@ export class Dialog extends Component<IDialogProps, IDialogState> {
               style={style}
               closeBtn={closeBtn}
               mousePosition={this.lastMousePosition}
+              position={position}
             >
               {children}
             </DialogInnerEl>

diff --git a/packages/zent/src/dialog/DialogEl.tsx b/packages/zent/src/dialog/DialogEl.tsx
@@ -2,6 +2,7 @@ import { Component, createRef } from 'react';
 import cx from 'classnames';
 import focusWithoutScroll from '../utils/dom/focusWithoutScroll';
 import Icon from '../icon';
+import { IDialogPositionType, getPositionTransformOrigin } from './position';
 
 export interface IMousePosition {
   x: number;
@@ -16,6 +17,7 @@ export interface IDialogInnerElProps {
   style?: React.CSSProperties;
   footer?: React.ReactNode;
   mousePosition?: IMousePosition | null;
+  position?: IDialogPositionType;
 }
 
 export class DialogInnerEl extends Component<IDialogInnerElProps> {
@@ -29,22 +31,31 @@ export class DialogInnerEl extends Component<IDialogInnerElProps> {
     this.resetTransformOrigin();
   }
 
+  setTransformOrigin(style: CSSStyleDeclaration, origin: string) {
+    ['Webkit', 'Moz', 'Ms', 'ms'].forEach(prefix => {
+      style[`${prefix}TransformOrigin`] = origin;
+    });
+    style.transformOrigin = origin;
+  }
+
   resetTransformOrigin(props = this.props) {
-    const { mousePosition } = props;
+    const { mousePosition, position } = props;
+    let origin = getPositionTransformOrigin(position, this.dialogEl);
+
     if (
+      origin === undefined &&
       mousePosition &&
       mousePosition.x >= 0 &&
       mousePosition.y >= 0 &&
       this.dialogEl &&
       this.dialogEl.getBoundingClientRect
     ) {
       const { left: x, top: y } = this.dialogEl.getBoundingClientRect();
-      const origin = `${mousePosition.x - x}px ${mousePosition.y - y}px 0`;
-      const style = this.dialogEl.style;
-      ['Webkit', 'Moz', 'Ms', 'ms'].forEach(prefix => {
-        style[`${prefix}TransformOrigin` as any] = origin;
-      });
-      style.transformOrigin = origin;
+      origin = `${mousePosition.x - x}px ${mousePosition.y - y}px 0`;
+    }
+
+    if (origin && this.dialogEl) {
+      this.setTransformOrigin(this.dialogEl.style, origin);
     }
   }
 

diff --git a/packages/zent/src/dialog/README_en-US.md b/packages/zent/src/dialog/README_en-US.md
@@ -16,20 +16,21 @@ Dialog is used for opening a floating layer.
 
 ### API
 
-| Props           | Description                            | Type     | Default      |
-| ------------ | ----------------------------- | ------ | -------- |
-| title        | Dialog title                       | `ReactNode`   | `''`     |
-| children     | Content of the dialog` | `ReactNode`   | `null`   |
-| footer       | Content of the dialog footer                          | `ReactNode`   | `null`   |
-| visible      | Visibility of the dialog                     | `boolean`   | `false`  |
-| closeBtn     | Visibility of the close button at the upper right corner | `boolean`   | `true`   |
-| onClose      | Close callback                      | `(event) => void`   | `noop`   |
-| onClosed     | Callback when dialog closing animation is done | `() => void` | |
-| onOpened     | Callback when dialog opening animation is done | `() => void` | |
-| mask         | Visibility of the mask | `boolean`   | `true`   |
-| maskClosable | Click on the mask to close the dialog | `boolean`   | `true`   |
-| className    | Custom classname                       | `string` | `''`     |
-| style        | Custom style object                 | `CSSProperties` | `{}`     |
+| Props           | Description                                              | Type                  | Default |
+| --------------- | -------------------------------------------------------- | --------------------- | ------- |
+| title           | Dialog title                                             | `ReactNode`           | `''`    |
+| children        | Content of the dialog`                                   | `ReactNode`           | `null`  |
+| footer          | Content of the dialog footer                             | `ReactNode`           | `null`  |
+| visible         | Visibility of the dialog                                 | `boolean`             | `false` |
+| closeBtn        | Visibility of the close button at the upper right corner | `boolean`             | `true`  |
+| onClose         | Close callback                                           | `(event) => void`     | `noop`  |
+| onClosed        | Callback when dialog closing animation is done           | `() => void`          |         |
+| onOpened        | Callback when dialog opening animation is done           | `() => void`          |         |
+| mask            | Visibility of the mask                                   | `boolean`             | `true`  |
+| maskClosable    | Click on the mask to close the dialog                    | `boolean`             | `true`  |
+| className       | Custom classname                                         | `string`              | `''`    |
+| style           | Custom style object                                      | `CSSProperties`       | `{}`    |
+| position 				| Position way                                             | `IDialogPositionType` | `auto`  | 
 
 
 #### openDialog
@@ -60,3 +61,12 @@ If `options.triggerOnClose` is `true`, `onClose` will be triggered when the dial
 Set a `style` prop on Dialog can specify its width, e.g. `style={{ width: '600px' }}`.
 
 By default the pop-up window width will adapt its content, meanwhile it has a minimum width and maximum width.
+
+#### Position
+
+The `position` prop can be used to specify the opening position of the dialog.
+
+| value    | description                                                |
+| -------- | ---------------------------------------------------------- |
+| `auto`   | Automatically chooses the opening position, default value. |
+| `center` | The dialog will be displayed in the center of the screen.  |
diff --git a/packages/zent/src/dialog/README_zh-CN.md b/packages/zent/src/dialog/README_zh-CN.md
@@ -19,21 +19,21 @@ group: 反馈
 
 ### API
 
-| 参数           | 说明                            | 类型     | 默认值      |
-| ------------ | ----------------------------- | ------ | -------- |
-| title        | 自定义弹框标题                       | `ReactNode`   | `''`     |
-| children     | 弹框内容: `<Dialog>xxxx</Dialog>` | `ReactNode`   | `null`   |
-| footer       | 底部内容                          | `ReactNode`   | `null`   |
-| visible      | 是否打开对话框                       | `boolean`   | `false`  |
-| closeBtn     | 是否显示右上角关闭按钮                   | `boolean`   | `true`   |
-| onClose      | 关闭操作回调函数                      | `(event) => void`   | `noop`   |
-| onOpened     | 对话框打开动画结束后的回调函数        | `() => void` |  |
-| onClosed     | 对话框关闭动画结束后的回调函数        | `() => void` |  |
-| mask         | 是否显示遮罩                        | `boolean`   | `true`   |
-| maskClosable | 点击遮罩是否可以关闭                    | `boolean`   | `true`   |
-| className    | 自定义额外类名                       | `string` | `''`     |
-| style        | 自定义样式                         | `CSSProperties` | `{}`     |
-
+| 参数             | 说明                              | 类型                   | 默认值   |
+| --------------- | --------------------------------- | --------------------- | ------- |
+| title           | 自定义弹框标题                      | `ReactNode`           | `''`    |
+| children        | 弹框内容: `<Dialog>xxxx</Dialog>`  | `ReactNode`           | `null`  |
+| footer          | 底部内容                           | `ReactNode`           | `null`  |
+| visible         | 是否打开对话框                      | `boolean`             | `false` |
+| closeBtn        | 是否显示右上角关闭按钮               | `boolean`             | `true`  |
+| onClose         | 关闭操作回调函数                    | `(event) => void`     | `noop`  |
+| onOpened        | 对话框打开动画结束后的回调函数        | `() => void`          |  			 |
+| onClosed        | 对话框关闭动画结束后的回调函数        | `() => void`          |  			 |
+| mask            | 是否显示遮罩                       | `boolean`             | `true`  |
+| maskClosable    | 点击遮罩是否可以关闭                 | `boolean`             | `true`  |
+| className       | 自定义额外类名                      | `string`              | `''`    |
+| style           | 自定义样式                         | `CSSProperties`   		 | `{}`    |
+| position 				| 对话框打开位置                      | `IDialogPositionType` | `auto`  |
 
 #### openDialog
 
@@ -64,3 +64,13 @@ group: 反馈
 在 `style` 中可以指定弹出窗口的宽度, e.g. `style={{ width: '600px' }}`.
 
 默认情况下弹出窗口会自适应内容的宽度, 同时有最小宽度和最大宽度.
+
+#### Position API
+
+`position` 属性用于指定对话框打开位置
+
+| 支持的值  | 描述                  |
+| -------- | -------------------- |
+| `auto`   | 自动选择打开位置, 默认值 |
+| `center` | 从屏幕中心位置打开      |
+
diff --git a/packages/zent/src/dialog/position.ts b/packages/zent/src/dialog/position.ts
@@ -0,0 +1,25 @@
+export const enum DialogPosition {
+  auto = 'auto',
+  center = 'center',
+}
+
+export type IDialogPositionType = keyof typeof DialogPosition;
+
+/**
+ * 根据传入的 position 参数，计算出弹窗的 transformOrigin 属性值
+ * @param position 弹窗位置，可选值为auto、center
+ * @param el 弹窗元素
+ * @returns 返回 transformOrigin 属性值
+ */
+export const getPositionTransformOrigin = (
+  position?: IDialogPositionType,
+  _el?: HTMLDivElement // 后续增加其他位置信息，需要使用 el 计算位置
+) => {
+  switch (position) {
+    case DialogPosition.center:
+      return 'center center 0';
+    case DialogPosition.auto:
+    default:
+      return undefined;
+  }
+};