refactor(Overlay): ts & docs & test tools

alibaba-fusion · Aug 6, 2024 · bda0ef3 · bda0ef3
1 parent 4bd514b
commit bda0ef3
Show file tree

Hide file tree

Showing 35 changed files with 2,602 additions and 1,661 deletions.
diff --git a/components/balloon/index.d.ts b/components/balloon/index.d.ts
@@ -79,7 +79,7 @@ export interface TooltipProps extends React.HTMLAttributes<HTMLElement>, CommonP
     /**
      * 指定浮层渲染的父节点, 可以为节点id的字符串，也可以返回节点的函数。
      */
-    popupContainer?: string | HTMLElement | ((target: HTMLElement) => HTMLElement);
+    popupContainer?: PopupProps['container'];
 
     /**
      * 弹层id, 传入值才会支持无障碍
@@ -233,7 +233,7 @@ export interface BalloonProps extends HTMLAttributesWeak, CommonProps {
     /**
      * 指定浮层渲染的父节点, 可以为节点id的字符串，也可以返回节点的函数。
      */
-    popupContainer?: string | HTMLElement | ((target: HTMLElement) => HTMLElement);
+    popupContainer?: PopupProps['container'];
 
     /**
      * 弹层组件style，透传给Popup

diff --git a/components/cascader-select/cascader-select.tsx b/components/cascader-select/cascader-select.tsx
@@ -20,8 +20,9 @@ import type {
     CascaderSelectState,
     CascaderSelectVisibleChangeType,
 } from './types';
-import type { Popup } from '../overlay';
+import Overlay from '../overlay';
 
+const { Popup } = Overlay;
 const { bindCtx } = func;
 const { pickOthers } = obj;
 const { getStyle } = dom;
@@ -506,9 +507,8 @@ class CascaderSelect extends Component<CascaderSelectProps, CascaderSelectState>
         const { prefix, popupProps } = this.props;
         const { v2 = false } = popupProps;
         if (!v2) {
-            // @ts-expect-error 待 overlay 技术升级完成
-            const dropDownNode = this.popup.getInstance().overlay.getInstance().getContentNode();
-            const cascaderNode = dropDownNode.querySelector(`.${prefix}cascader`) as HTMLElement;
+            const dropDownNode = this.popup.getInstance().overlay!.getInstance().getContentNode();
+            const cascaderNode = dropDownNode!.querySelector(`.${prefix}cascader`) as HTMLElement;
             if (cascaderNode) {
                 this.cascaderHeight = getStyle(cascaderNode, 'height');
             }

diff --git a/components/cascader-select/types.ts b/components/cascader-select/types.ts
@@ -1,9 +1,11 @@
 import type React from 'react';
 import type { CascaderProps, CascaderDataItem, Extra } from '../cascader';
 import type { CommonProps } from '../util';
-import type { Popup } from '../overlay';
+import Overlay from '../overlay';
 import type { SelectProps, VisibleChangeType } from '../select';
 
+const { Popup } = Overlay;
+
 interface HTMLAttributesWeak
     extends Omit<
         React.HTMLAttributes<HTMLElement>,

diff --git a/components/dialog/dialog.tsx b/components/dialog/dialog.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, type ComponentPropsWithRef } from 'react';
 import PropTypes from 'prop-types';
 import Overlay from '../overlay';
 import zhCN from '../locale/zh-cn';
@@ -111,7 +111,7 @@ export default class Dialog extends Component<DialogV1Props> {
         locale: zhCN.Dialog,
         noPadding: false,
     };
-    overlay: Overlay | null;
+    overlay: InstanceType<typeof Overlay> | null;
     private _lastDialogHeight: string | number;
     dialogBodyStyleMaxHeight: string;
     dialogBodyStyleOverflowY: string;
@@ -151,7 +151,7 @@ export default class Dialog extends Component<DialogV1Props> {
             const inner = this.getInner();
             if (inner) {
                 const node = this.getInnerNode();
-                if (this._lastDialogHeight !== _getSize(node, 'height')) {
+                if (this._lastDialogHeight !== _getSize(node!, 'height')) {
                     this.revertSize(inner.bodyNode);
                 }
             }
@@ -164,21 +164,21 @@ export default class Dialog extends Component<DialogV1Props> {
             if (inner) {
                 const node = this.getInnerNode();
 
-                let top = getStyle(node, 'top');
+                let top = getStyle(node!, 'top') as number;
                 const minMargin = this.props.minMargin;
                 if (top < minMargin!) {
-                    top = minMargin;
+                    top = minMargin!;
                     setStyle(node, 'top', `${minMargin}px`);
                 }
 
-                const height = _getSize(node, 'height') as number;
+                const height = _getSize(node!, 'height') as number;
                 const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
 
                 if (
                     viewportHeight < height + top * 2 - 1 || // 分辨率和精确度的原因 高度计算的时候 可能会有1px内的偏差
                     this.props.height
                 ) {
-                    this.adjustSize(inner, node, Math.min(height, viewportHeight - top * 2));
+                    this.adjustSize(inner, node!, Math.min(height, viewportHeight - top * 2));
                 } else {
                     this.revertSize(inner.bodyNode);
                 }
@@ -247,17 +247,15 @@ export default class Dialog extends Component<DialogV1Props> {
         );
     }
 
-    getOverlayRef(ref: Overlay | null) {
+    getOverlayRef(ref: InstanceType<typeof Overlay> | null) {
         this.overlay = ref;
     }
 
     getInner() {
-        // @ts-expect-error Overlay 尚未 ts 化
         return this.overlay!.getInstance().getContent();
     }
 
     getInnerNode() {
-        // @ts-expect-error Overlay 尚未 ts 化
         return this.overlay!.getInstance().getContentNode();
     }
 
@@ -335,7 +333,7 @@ export default class Dialog extends Component<DialogV1Props> {
                     : closeMode
                 : closeable;
         const { canCloseByCloseClick, ...closeConfig } = this.mapcloseableToConfig(newCloseable!);
-        const newOverlayProps = {
+        const newOverlayProps: ComponentPropsWithRef<typeof Overlay> = {
             disableScroll: true,
             container: popupContainer,
             cache,
@@ -348,7 +346,7 @@ export default class Dialog extends Component<DialogV1Props> {
             afterClose,
             ...closeConfig,
             canCloseByOutSideClick: false,
-            align: useCSS ? false : align,
+            align: (useCSS ? false : align) as string,
             onRequestClose: onClose,
             needAdjust: false,
             ref: this.getOverlayRef,

diff --git a/components/drawer/drawer.tsx b/components/drawer/drawer.tsx
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { Component, type ComponentType } from 'react';
+import React, { Component, type ComponentRef, type ComponentType } from 'react';
 import Overlay from '../overlay';
 import Inner from './inner';
 import zhCN from '../locale/zh-cn';
@@ -65,7 +65,7 @@ export default class Drawer extends Component<DrawerProps> {
         locale: zhCN.Drawer,
     };
 
-    private overlay: Overlay | null = null;
+    private overlay: ComponentRef<typeof Popup> | null = null;
 
     getAlign = (placement: string | undefined) => {
         let align;
@@ -125,7 +125,7 @@ export default class Drawer extends Component<DrawerProps> {
         return animation;
     };
 
-    getOverlayRef = (ref: Overlay | null) => {
+    getOverlayRef = (ref: ComponentRef<typeof Popup> | null) => {
         this.overlay = ref;
     };
 

diff --git a/components/drawer/types.ts b/components/drawer/types.ts
@@ -3,8 +3,6 @@ import type { PopupProps } from '../overlay';
 import type { CommonProps } from '../util';
 import type { ComponentLocaleObject } from '../locale/types';
 
-interface HTMLAttributesWeak extends PopupProps {}
-
 /**
  * @api
  */
@@ -14,7 +12,7 @@ export type CloseMode = 'close' | 'mask' | 'esc';
  * @api Drawer
  */
 export interface DrawerV1Props
-    extends Omit<HTMLAttributesWeak, 'content' | 'onClose' | 'title'>,
+    extends Omit<PopupProps, 'content' | 'onClose' | 'title' | 'children'>,
         CommonProps {
     /**
      * [废弃] 同 closeMode, 控制对话框关闭的方式，
@@ -126,6 +124,12 @@ export interface DrawerV1Props
      * @en Content
      */
     content?: React.ReactNode;
+    /**
+     * 子元素
+     * @skip
+     * @en Child elements
+     */
+    children?: React.ReactNode;
     /**
      * 渲染组件的容器
      * @en Render component container
@@ -167,7 +171,7 @@ export interface DrawerV1Props
  * @api Drawer V2
  */
 export interface DrawerV2Props
-    extends Omit<HTMLAttributesWeak, 'content' | 'onClose' | 'title'>,
+    extends Omit<PopupProps, 'content' | 'onClose' | 'title' | 'children'>,
         CommonProps {
     /**
      * [废弃] 同 closeMode, 控制对话框关闭的方式，
@@ -284,6 +288,12 @@ export interface DrawerV2Props
      * @en Content
      */
     content?: React.ReactNode;
+    /**
+     * 子元素
+     * @skip
+     * @en Child elements
+     */
+    children?: React.ReactNode;
     /**
      * 渲染组件的容器
      * @en Render component container

diff --git a/components/menu/view/create.tsx b/components/menu/view/create.tsx
@@ -112,7 +112,7 @@ class ContextMenu extends Component<CreateMenuProps, { visible: boolean }> {
             ...contextProps,
             ...overlayProps,
             target,
-            align,
+            align: align as string,
             offset,
             afterClose,
             visible,

diff --git a/components/message/toast.tsx b/components/message/toast.tsx
@@ -99,7 +99,7 @@ class Mask extends React.Component<MessageQuickProps> {
                 prefix={prefix}
                 animation={animation}
                 visible={visible}
-                align={align}
+                align={align as string}
                 offset={offset}
                 hasMask={hasMask}
                 afterClose={afterClose}

diff --git a/components/message/types.ts b/components/message/types.ts
@@ -1,8 +1,8 @@
 import type React from 'react';
 import type { CommonProps } from '../util';
-import type { OverlayProps } from '../overlay';
 import type { ConsumerState } from '../config-provider/consumer';
 import type { Locale } from '../locale/types';
+import type { OverlayV1Props } from '../overlay/types';
 
 type HTMLAttributesWeak = Omit<React.HTMLAttributes<HTMLElement>, 'title'>;
 
@@ -207,7 +207,7 @@ export interface MessageQuickProps extends Omit<HTMLAttributesWeak, 'content'>,
      * 透传到弹层组件的属性对象
      * @en props of Overlay
      */
-    overlayProps?: OverlayProps;
+    overlayProps?: OverlayV1Props;
     /**
      * @skip
      */

diff --git a/components/overlay/__docs__/demo/align/index.tsx b/components/overlay/__docs__/demo/align/index.tsx
@@ -2,8 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Overlay, Button } from '@alifd/next';
 
-const { Popup } = Overlay;
-
 ReactDOM.render(
     <div id="containerId" className="overlay-container">
         <Overlay v2 target="containerId" visible align="br tl">

diff --git a/components/overlay/__docs__/demo/backdrop/index.tsx b/components/overlay/__docs__/demo/backdrop/index.tsx
@@ -1,15 +1,13 @@
-import React from 'react';
+import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import { Overlay, Button } from '@alifd/next';
 
-class Demo extends React.Component {
-    constructor(props) {
-        super(props);
+class Demo extends Component {
+    state = {
+        visible: false,
+    };
 
-        this.state = {
-            visible: false,
-        };
-    }
+    btn: InstanceType<typeof Button> | null;
 
     onClick = () => {
         this.setState({

diff --git a/components/overlay/__docs__/demo/baisc/index.tsx b/components/overlay/__docs__/demo/baisc/index.tsx
@@ -1,15 +1,13 @@
-import React from 'react';
+import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import { Overlay, Button } from '@alifd/next';
 
-class Demo extends React.Component {
-    constructor(props) {
-        super(props);
+class Demo extends Component {
+    state = {
+        visible: false,
+    };
 
-        this.state = {
-            visible: false,
-        };
-    }
+    btn: InstanceType<typeof Button> | null;
 
     onClick = () => {
         this.setState({

diff --git a/components/overlay/__docs__/demo/controlled/index.tsx b/components/overlay/__docs__/demo/controlled/index.tsx
@@ -1,25 +1,27 @@
-import React from 'react';
+import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import { Overlay, Button } from '@alifd/next';
 
 const { Popup } = Overlay;
 
-class Demo extends React.Component {
-    constructor(props) {
-        super(props);
+class Demo extends Component {
+    state = {
+        visible: false,
+        groupVisible: false,
+    };
 
-        this.state = {
-            visible: false,
-        };
-    }
+    btn1: InstanceType<typeof Button> | null;
+    btn2: InstanceType<typeof Button> | null;
+    overlay1: HTMLElement | null;
+    overlay2: HTMLElement | null;
 
-    onVisibleChange = visible => {
+    onVisibleChange = (visible: boolean) => {
         this.setState({
             visible,
         });
     };
 
-    onGroupVisibleChange = groupVisible => {
+    onGroupVisibleChange = (groupVisible: boolean) => {
         this.setState({
             groupVisible,
         });

diff --git a/components/overlay/__docs__/demo/nested/index.tsx b/components/overlay/__docs__/demo/nested/index.tsx
@@ -1,15 +1,6 @@
-import React, { useState } from 'react';
+import React from 'react';
 import ReactDOM from 'react-dom';
-import {
-    Overlay,
-    Button,
-    Select,
-    Switch,
-    Balloon,
-    DatePicker,
-    DatePicker2,
-    TimePicker2,
-} from '@alifd/next';
+import { Overlay, Select, Balloon, DatePicker2 } from '@alifd/next';
 
 const { Popup } = Overlay;
 const { Tooltip } = Balloon;

diff --git a/components/overlay/__docs__/demo/scroll-debug/index.tsx b/components/overlay/__docs__/demo/scroll-debug/index.tsx
@@ -1,20 +1,15 @@
-import React, { useState } from 'react';
+import React from 'react';
 import ReactDOM from 'react-dom';
-import { Overlay, Button, Table, Select } from '@alifd/next';
-
-const { Popup } = Overlay;
-
-const style = {
-    width: 400,
-    height: 100,
-    padding: 10,
-    background: '#fff',
-    borderRadius: 2,
-    boxShadow: '2px 2px 20px rgba(0, 0, 0, 0.15)',
-};
+import { Table, Select } from '@alifd/next';
 
 function TableDemo() {
-    const columns = [1, 2, 3].map(v => {
+    const columns: Array<{
+        dataIndex?: string;
+        title: string;
+        width: number;
+        lock?: 'left' | 'right';
+        cell?: any;
+    }> = [1, 2, 3].map(v => {
         return { dataIndex: `data${v}`, title: `Data${v}`, width: 200 };
     });
     columns.unshift({