feat(UIKIT-1622,Tree): Изменено api для onChange (#1074)

kaluga-astral · Aug 2, 2024 · c522ef8 · c522ef8
1 parent ffc41b0
commit c522ef8
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 53 deletions.
diff --git a/packages/components/src/Tree/MultipleTreeList/TreeItem/TreeItem.tsx b/packages/components/src/Tree/MultipleTreeList/TreeItem/TreeItem.tsx
@@ -1,9 +1,4 @@
-import {
-  type Dispatch,
-  type FunctionComponent,
-  type SetStateAction,
-  type SyntheticEvent,
-} from 'react';
+import { type FunctionComponent, type SyntheticEvent } from 'react';
 
 import type { TreeListData } from '../../types';
 import type { MultipleValue } from '../types';
@@ -49,7 +44,7 @@ export type TreeItemProps = TreeListData & {
   /**
    * Функция, которая запускается при выборе item
    */
-  onChange: Dispatch<SetStateAction<MultipleValue>>;
+  onChange: (value: MultipleValue) => void;
 };
 
 export const TreeItem = ({

diff --git a/packages/components/src/Tree/MultipleTreeList/TreeItem/useLogic/useLogic.ts b/packages/components/src/Tree/MultipleTreeList/TreeItem/useLogic/useLogic.ts
@@ -22,7 +22,7 @@ type UseLogicProps = Pick<
 
 export const useLogic = ({
   id,
-  value,
+  value = [],
   children,
   level,
   isInitialExpanded,
@@ -32,7 +32,7 @@ export const useLogic = ({
 }: UseLogicProps) => {
   const childrenIds = useMemo(
     () => getAllChildrenId(children, disabledItems),
-    [children],
+    [children, disabledItems],
   );
   const isSelected = checkIsSelected(value, id);
   const isIndeterminate = checkIsIndeterminate(value, childrenIds);
@@ -53,34 +53,32 @@ export const useLogic = ({
     );
 
     if (!isSelected && isEveryChildChecked) {
-      onChange((selectedIds = []) => [...selectedIds, id]);
+      onChange([...value, id]);
     }
 
     if (isSelected && !isEveryChildChecked) {
-      onChange((selectedIds = []) =>
-        selectedIds.filter((selectedId) => selectedId !== id),
-      );
+      onChange(value.filter((selectedId) => selectedId !== id));
     }
   }, [value, childrenIds]);
 
   const handleChange = () => {
-    onChange((selectedIds = []) => {
-      if (children) {
-        if (selectedIds.includes(id)) {
-          return selectedIds.filter(
+    if (children) {
+      if (value.includes(id)) {
+        return onChange(
+          value.filter(
             (selectedId) => ![id, ...childrenIds].includes(selectedId),
-          );
-        }
-
-        return [...selectedIds, id, ...childrenIds];
-      } else {
-        if (selectedIds.includes(id)) {
-          return selectedIds.filter((selectedId) => selectedId !== id);
-        }
+          ),
+        );
+      }
 
-        return [...selectedIds, id];
+      onChange([...value, id, ...childrenIds]);
+    } else {
+      if (value.includes(id)) {
+        return onChange(value.filter((selectedId) => selectedId !== id));
       }
-    });
+
+      onChange([...value, id]);
+    }
   };
 
   return {

diff --git a/packages/components/src/Tree/MultipleTreeList/types.ts b/packages/components/src/Tree/MultipleTreeList/types.ts
@@ -1,8 +1,4 @@
-import {
-  type Dispatch,
-  type FunctionComponent,
-  type SetStateAction,
-} from 'react';
+import { type FunctionComponent } from 'react';
 
 import type { TreeListData } from '../types';
 
@@ -51,5 +47,5 @@ export type MultipleTreeListProps = {
   /**
    * Функция, которая запускается при изменении состояния.
    */
-  onChange: Dispatch<SetStateAction<MultipleValue>>;
+  onChange: (value: MultipleValue) => void;
 };
diff --git a/packages/components/src/TreeLikeList/TreeItem/TreeItem.tsx b/packages/components/src/TreeLikeList/TreeItem/TreeItem.tsx
@@ -1,9 +1,4 @@
-import {
-  type Dispatch,
-  type FunctionComponent,
-  type SetStateAction,
-  type SyntheticEvent,
-} from 'react';
+import { type FunctionComponent, type SyntheticEvent } from 'react';
 
 import type { TreeListData } from '../../Tree';
 import type { MultipleValue } from '../types';
@@ -49,7 +44,7 @@ export type TreeItemProps = TreeListData & {
   /**
    * Функция, которая запускается при выборе item
    */
-  onChange: Dispatch<SetStateAction<MultipleValue>>;
+  onChange: (value: MultipleValue) => void;
 };
 
 export const TreeItem = ({

diff --git a/packages/components/src/TreeLikeList/TreeItem/useLogic/useLogic.ts b/packages/components/src/TreeLikeList/TreeItem/useLogic/useLogic.ts
@@ -15,7 +15,7 @@ type UseLogicProps = Pick<
 
 export const useLogic = ({
   id,
-  value,
+  value = [],
   level,
   isInitialExpanded,
   expandedLevel,
@@ -37,13 +37,11 @@ export const useLogic = ({
       return;
     }
 
-    onChange((selectedIds = []) => {
-      if (selectedIds.includes(id)) {
-        return selectedIds.filter((selectedId) => selectedId !== id);
-      }
+    if (value.includes(id)) {
+      return onChange(value.filter((selectedId) => selectedId !== id));
+    }
 
-      return [...selectedIds, id];
-    });
+    onChange([...value, id]);
   };
 
   return {

diff --git a/packages/components/src/TreeLikeList/types.ts b/packages/components/src/TreeLikeList/types.ts
@@ -1,8 +1,4 @@
-import {
-  type Dispatch,
-  type FunctionComponent,
-  type SetStateAction,
-} from 'react';
+import { type FunctionComponent } from 'react';
 
 import type { TreeListData } from '../Tree';
 
@@ -51,5 +47,5 @@ export type TreeLikeListProps = {
   /**
    * Функция, которая запускается при изменении состояния.
    */
-  onChange: Dispatch<SetStateAction<MultipleValue>>;
+  onChange: (value: MultipleValue) => void;
 };