feat: listen for parent element size changes (#351)

* feat: listen for parent element size changes * feat: modify isWatchParent name to watchParentSizeChange
DTStack · Jun 7, 2023 · d87a1cd · d87a1cd
1 parent aaabc2a
commit d87a1cd
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 8 deletions.
diff --git a/src/ellipsisText/demos/watchParent.tsx b/src/ellipsisText/demos/watchParent.tsx
@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import { EllipsisText } from 'dt-react-component';
+import { Radio, RadioChangeEvent, Divider } from 'antd';
+
+export default () => {
+    const [width, setWidth] = useState(200);
+    const onChange = (e: RadioChangeEvent) => {
+        setWidth(e.target.value);
+    };
+
+    return (
+        <>
+            <Radio.Group onChange={onChange} value={width}>
+                <Radio value={200}>200px</Radio>
+                <Radio value={500}>500px</Radio>
+            </Radio.Group>
+            <Divider />
+            <div
+                style={{
+                    width,
+                }}
+            >
+                <EllipsisText
+                    value={'长长长长长长长长长长长长长长长长长长长长长长长长长长长长'}
+                    watchParentSizeChange
+                />
+            </div>
+        </>
+    );
+};
diff --git a/src/ellipsisText/index.md b/src/ellipsisText/index.md
@@ -19,6 +19,7 @@ demo:
 ## 示例
 
 <code src="./demos/basic.tsx" title="基础使用" description="请更改窗口大小"></code>
+<code src="./demos/watchParent.tsx" title="监听父元素" description="在一些情况下会变更容器的宽度，如滚动条的消失隐藏。当宽度变更后需要重新计算可用区域，可以通过传递 watchParentSizeChange 开启监听父元素，当父元素大小改变时会重新进行计算"></code>
 <code src="./demos/maxWidth.tsx" title="宽度限制" ></code>
 <code src="./demos/inlineElement.tsx" title="在行内元素中使用" description="行内元素无法获得宽度，在计算时会不断向上查找，直到找到一个能够正确获取宽度的父元素，并以找到父元素宽度当作文本的可视宽度" ></code>
 <code src="./demos/flex.tsx" title="在 flex 中使用" description="请更改窗口大小"></code>
@@ -27,12 +28,13 @@ demo:
 
 ## API
 
-| 参数      | 说明                               | 类型                             | 默认值 |
-| --------- | ---------------------------------- | -------------------------------- | ------ |
-| value     | 显示文本内容                       | `ReactNode   \| () => ReactNode` | -      |
-| title     | 提示文字                           | `ReactNode   \| () => ReactNode` | value  |
-| className | 为文本内容所在节点添加自定义样式名 | `string`                         | -      |
-| maxWidth  | 文本内容的最大宽度                 | `string \| number`               | -      |
+| 参数                  | 说明                                       | 类型                             | 默认值 |
+| --------------------- | ------------------------------------------ | -------------------------------- | ------ |
+| value                 | 显示文本内容                               | `ReactNode   \| () => ReactNode` | -      |
+| title                 | 提示文字                                   | `ReactNode   \| () => ReactNode` | value  |
+| className             | 为文本内容所在节点添加自定义样式名         | `string`                         | -      |
+| maxWidth              | 文本内容的最大宽度                         | `string \| number`               | -      |
+| watchParentSizeChange | 监听父元素大小的变更，默认监听 window 窗口 | ` boolean`                       | false  |
 
 :::info
 其余参数继承自 [继承 antd4.x 的 Tooltip](https://4x.ant.design/components/tooltip-cn/#API)

diff --git a/src/ellipsisText/index.tsx b/src/ellipsisText/index.tsx
@@ -30,6 +30,10 @@ export interface IEllipsisTextProps extends AbstractTooltipProps {
      * 可视区宽度
      */
     maxWidth?: string | number;
+    /**
+     * 监听父元素大小的改变
+     */
+    watchParentSizeChange?: boolean;
     /**
      * antd Tooltip
      */
@@ -43,9 +47,20 @@ export interface NewHTMLElement extends HTMLElement {
 const DEFAULT_MAX_WIDTH = 120;
 
 const EllipsisText = (props: IEllipsisTextProps) => {
-    const { value, title = value, className, maxWidth, ...otherProps } = props;
+    const {
+        value,
+        title = value,
+        className,
+        maxWidth,
+        watchParentSizeChange = false,
+        ...otherProps
+    } = props;
 
     const ellipsisRef = useRef<HTMLSpanElement>(null);
+    const observerEle =
+        watchParentSizeChange && ellipsisRef.current?.parentElement
+            ? ellipsisRef.current?.parentElement
+            : null;
 
     const [visible, setVisible] = useState(false);
     const [width, setWidth] = useState<number | string>(DEFAULT_MAX_WIDTH);
@@ -222,7 +237,7 @@ const EllipsisText = (props: IEllipsisTextProps) => {
     }, [width, cursor, value]);
 
     return (
-        <Resize onResize={onResize}>
+        <Resize onResize={onResize} observerEle={observerEle}>
             {visible ? (
                 <Tooltip title={title} mouseEnterDelay={0} mouseLeaveDelay={0} {...otherProps}>
                     {renderText()}