chore: prepareItems after review

gravity-ui · Feb 13, 2024 · de3d679 · de3d679
1 parent 4a59966
commit de3d679
Showing 1 changed file with 26 additions and 18 deletions.
diff --git a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx
@@ -38,7 +38,7 @@ const reorderArray = <T extends unknown>(list: T[], startIndex: number, endIndex
     return result;
 };
 
-const prepareItems = (tableColumnItems: TableColumnSetupItem[]) => {
+const prepareDndItems = (tableColumnItems: TableColumnSetupItem[]) => {
     return tableColumnItems.map<Item>((tableColumnItem) => {
         const hasSelectionIcon = tableColumnItem.isRequired === false;
 
@@ -52,6 +52,18 @@ const prepareItems = (tableColumnItems: TableColumnSetupItem[]) => {
     });
 };
 
+const prepareValue = (tableColumnItems: TableColumnSetupItem[]) => {
+    const selectedIds: string[] = [];
+
+    tableColumnItems.forEach(({id, isSelected}) => {
+        if (isSelected) {
+            selectedIds.push(id);
+        }
+    });
+
+    return selectedIds;
+};
+
 interface SwitcherProps {
     onKeyDown: React.KeyboardEventHandler<HTMLElement>;
     onClick: React.MouseEventHandler<HTMLElement>;
@@ -88,13 +100,12 @@ export const TableColumnSetup = (props: TableColumnSetupProps) => {
 
     const [open, setOpen] = React.useState(false);
 
-    const [items, setItems] = React.useState(prepareItems(propsItems));
-
+    const [items, setItems] = React.useState(propsItems);
     const [prevPropsItems, setPrevPropsItems] = React.useState(propsItems);
     if (propsItems !== prevPropsItems) {
         setPrevPropsItems(propsItems);
 
-        const newItems = prepareItems(propsItems);
+        const newItems = propsItems;
         setItems(newItems);
     }
 
@@ -121,8 +132,7 @@ export const TableColumnSetup = (props: TableColumnSetupProps) => {
         setOpen(open);
 
         if (open === false) {
-            const initialItems = prepareItems(propsItems);
-            setItems(initialItems);
+            setItems(propsItems);
         }
     };
 
@@ -225,33 +235,31 @@ export const TableColumnSetup = (props: TableColumnSetupProps) => {
         );
     };
 
-    const value = React.useMemo(() => {
-        const selectedIds: string[] = [];
-
-        items.forEach(({id, isSelected}) => {
-            if (isSelected) {
-                selectedIds.push(id);
-            }
-        });
+    const valueRef = React.useRef<string[]>();
+    if (valueRef.current === undefined || items !== prevPropsItems) {
+        valueRef.current = prepareValue(items);
+    }
 
-        return selectedIds;
-    }, [items]);
+    const dndItemsRef = React.useRef<Item[]>();
+    if (dndItemsRef.current === undefined || items !== prevPropsItems) {
+        dndItemsRef.current = prepareDndItems(items);
+    }
 
     return (
         <TreeSelect
             className={tableColumnSetupCn}
             multiple
             size="l"
             open={open}
-            value={value}
+            value={valueRef.current}
+            items={dndItemsRef.current}
             onUpdate={onUpdate}
             popupWidth={popupWidth}
             onOpenChange={onOpenChange}
             placement={popupPlacement}
             renderContainer={renderContainer}
             renderControl={renderControl}
             renderItem={renderItem}
-            items={items}
         />
     );
 };