feat(ui): support update fixed state when table resize

DevCloudFE · Jan 3, 2023 · 9fac01a · 9fac01a
1 parent 0851206
commit 9fac01a
Showing 1 changed file with 17 additions and 1 deletion.
diff --git a/packages/ui/src/components/table/Table.tsx b/packages/ui/src/components/table/Table.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo, useRef, useState } from 'react';
 
-import { useForkRef, useIsomorphicLayoutEffect } from '@react-devui/hooks';
+import { useAsync, useForkRef, useIsomorphicLayoutEffect, useResize } from '@react-devui/hooks';
 import { getClassName, isSimpleArrayEqual } from '@react-devui/utils';
 
 import { registerComponentMate } from '../../utils';
@@ -43,6 +43,12 @@ function Table(props: DTableProps, ref: React.ForwardedRef<HTMLDivElement>): JSX
   const combineElRef = useForkRef(elRef, ref);
   //#endregion
 
+  const dataRef = useRef<{
+    clearTid?: () => void;
+  }>({});
+
+  const async = useAsync();
+
   const [fixed, setFixed] = useState<('left' | 'right')[]>([]);
 
   const getFixed = (el: HTMLDivElement) => {
@@ -70,6 +76,16 @@ function Table(props: DTableProps, ref: React.ForwardedRef<HTMLDivElement>): JSX
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useResize(elRef, () => {
+    dataRef.current.clearTid?.();
+    dataRef.current.clearTid = async.setTimeout(() => {
+      dataRef.current.clearTid = undefined;
+      if (elRef.current) {
+        getFixed(elRef.current);
+      }
+    }, 100);
+  });
+
   const contextValue = useMemo<DTableContextData>(
     () => ({
       gFixed: fixed,