fix(FilterInput): synchronize filters state with props and optimize e…

…ffect dependencies (#331) * fix(FilterInput): synchronize filters state with props and optimize effect dependencies Signed-off-by: ya zhou <[email protected]> * feat(Table): enhance DataTableSimple with loading state and dynamic data updates Signed-off-by: ya zhou <[email protected]> * ci: update version Signed-off-by: ya zhou <[email protected]> --------- Signed-off-by: ya zhou <[email protected]>
kubesphere · Jan 10, 2025 · 425225e · 425225e
1 parent c8f2853
commit 425225e
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 9 deletions.
diff --git a/.changeset/tame-owls-whisper.md b/.changeset/tame-owls-whisper.md
@@ -0,0 +1,13 @@
+---
+'@kubed/code-editor': patch
+'@kubed/diff-viewer': patch
+'@kubed/components': patch
+'@kubed/log-viewer': patch
+'@kubed/charts': patch
+'@kubed/hooks': patch
+'@kubed/icons': patch
+'@kubed/tests': patch
+'kubed-documents': patch
+---
+
+fix(FilterInput): synchronize filters state with props and optimize effect dependencies
diff --git a/packages/components/src/FilterInput/FilterInput.tsx b/packages/components/src/FilterInput/FilterInput.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, ReactNode } from 'react';
 import cx from 'classnames';
-import { find, isEmpty, trim, omit } from 'lodash';
+import { find, isEmpty, trim, omit, isEqual } from 'lodash';
 import { Magnifier, Close } from '@kubed/icons';
 import { useClickOutside } from '@kubed/hooks';
 import forwardRef from '../utils/forwardRef';
@@ -72,15 +72,23 @@ export const FilterInput = forwardRef<FilterInputProps, null>((props, ref) => {
   });
   const inputRef = useRef<HTMLInputElement>();
 
+  const [filters, setFilters] = React.useState(props.filters);
+  React.useEffect(() => {
+    if (isEqual(filters, props.filters)) {
+      return;
+    }
+    setFilters(props.filters);
+  }, [props.filters]);
+
   useEffect(() => {
     if (!props.simpleMode) {
-      const newTags = getTags(props.suggestions, props.filters);
+      const newTags = getTags(props.suggestions, filters);
       setTags(newTags);
       setActiveSuggestion(null);
       setOptionVisible(false);
       setValue('');
     }
-  }, [props.filters]);
+  }, [filters]);
 
   useEffect(() => {
     if (props.simpleMode) {

diff --git a/packages/components/src/Table/Table.story.tsx b/packages/components/src/Table/Table.story.tsx
@@ -978,7 +978,7 @@ export const DataTableWithDefault = () => {
 };
 
 export const DataTableSimple = () => {
-  const [loading] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
   const [columns] = React.useState<typeof defaultColumns>(() => [
     {
       id: '_selector',
@@ -1016,19 +1016,27 @@ export const DataTableSimple = () => {
     },
     ...defaultColumns,
   ]);
+  const [key, setKey] = React.useState(0);
+  React.useEffect(() => {
+    const timer = setInterval(() => {
+      setKey((_key) => _key + 1);
+      setLoading((_loading) => !_loading);
+    }, 2000);
+    return () => clearInterval(timer);
+  }, []);
   const data = React.useMemo(() => {
     if (loading) {
       return [];
     }
     return [...Array(100).fill(1)].map((_, i) => ({
-      firstName: `firstName-${i}`,
-      lastName: `lastName-${i}`,
+      firstName: `firstName-${i}-${key}`,
+      lastName: `lastName-${i}-${key}`,
       age: i,
       visits: i,
-      status: `status-${i}`,
+      status: `status-${i}-${key}`,
       progress: i,
     }));
-  }, [loading]);
+  }, [loading, key]);
 
   const forceUpdate = React.useReducer(() => ({}), {})[1];
 
@@ -1046,6 +1054,7 @@ export const DataTableSimple = () => {
     ...defaultOption,
     data,
     columns,
+    loading,
     getRowId: (row) => row.firstName,
     meta: {
       refetch: () => forceUpdate(),
@@ -1066,7 +1075,7 @@ export const DataTableSimple = () => {
         },
         filters: () => {
           return {
-            disabled: true,
+            disabled: false,
             simpleMode: false,
             suggestions: [
               {