chore: add useUniqId

gravity-ui · Feb 9, 2024 · 30ce055 · 30ce055
1 parent a70ee5e
commit 30ce055
Showing 1 changed file with 4 additions and 7 deletions.
diff --git a/src/components/TreeSelect/DndTreeSelect.tsx b/src/components/TreeSelect/DndTreeSelect.tsx
@@ -4,6 +4,7 @@ import {Grip} from '@gravity-ui/icons';
 import {DragDropContext, Draggable, Droppable} from 'react-beautiful-dnd';
 import type {OnDragEndResponder} from 'react-beautiful-dnd';
 
+import {useUniqId} from '../../hooks';
 import {Icon} from '../Icon';
 import {ListContainerView} from '../useList';
 import {reorderArray} from '../useList/__stories__/utils/reorderArray';
@@ -24,8 +25,6 @@ export type RenderDndContainer = (container: {
 
 const DEFAULT_RENDER_CONTAINER: RenderDndContainer = ({renderList}) => renderList();
 
-let dndTreeSelectCount = 0;
-
 export type DndTreeSelectProps<T extends DndTreeSelectItem> = Omit<
     TreeSelectProps<T>,
     'items' | 'renderContainer' | 'renderItem'
@@ -43,9 +42,7 @@ export function DndTreeSelect<T extends DndTreeSelectItem>({
     renderContainer: propsRenderContainer = DEFAULT_RENDER_CONTAINER,
     ...treeSelectNativeProps
 }: DndTreeSelectProps<T>) {
-    const [droppableId] = React.useState(
-        () => initialDroppableId || `default-droppable-id-${dndTreeSelectCount++}`,
-    );
+    const uniqId = useUniqId();
 
     const renderContainer = React.useCallback<RenderContainerType<DndTreeSelectItem>>(
         ({renderItem, visibleFlattenIds, items: _items, containerRef, id}) => {
@@ -64,7 +61,7 @@ export function DndTreeSelect<T extends DndTreeSelectItem>({
             const renderList = () => (
                 <ListContainerView ref={containerRef} id={id}>
                     <DragDropContext onDragEnd={handleDrugEnd}>
-                        <Droppable droppableId={droppableId}>
+                        <Droppable droppableId={initialDroppableId ?? uniqId}>
                             {(droppableProvided) => {
                                 return (
                                     <div
@@ -83,7 +80,7 @@ export function DndTreeSelect<T extends DndTreeSelectItem>({
 
             return propsRenderContainer({renderList});
         },
-        [items, setItems, propsRenderContainer, droppableId],
+        [items, setItems, propsRenderContainer],
     );
 
     const renderDndItem = React.useCallback<RenderItem<DndTreeSelectItem>>(