feat(TreeSelect): move onClick props in callback context

gravity-ui · Mar 11, 2024 · b636f1c · b636f1c
1 parent 8ce47d5
commit b636f1c
Show file tree

Hide file tree

Showing 12 changed files with 29 additions and 34 deletions.
diff --git a/src/components/TreeList/TreeList.tsx b/src/components/TreeList/TreeList.tsx
@@ -53,8 +53,9 @@ export const TreeList = <T,>(props: TreeListProps<T>) => {
 
     const handleItemClick = React.useCallback(
         (listItemId: ListItemId) => {
-            onItemClick?.(listParsedState.itemsById[listItemId], {
+            onItemClick?.({
                 id: listItemId,
+                data: listParsedState.itemsById[listItemId],
                 isGroup: listItemId in listParsedState.groupsState,
                 disabled: disabledById
                     ? Boolean(disabledById[listItemId])
@@ -126,7 +127,7 @@ export const TreeList = <T,>(props: TreeListProps<T>) => {
         );
     };
 
-    // not JSX decl here is weird `react-beautiful-dnd` render bug
+    // not JSX decl here is from weird `react-beautiful-dnd` render bug
     return renderContainer({
         id: `list-${treeListId}`,
         size,

diff --git a/src/components/TreeList/__stories__/components/InfinityScrollExample.tsx b/src/components/TreeList/__stories__/components/InfinityScrollExample.tsx
@@ -24,10 +24,7 @@ export const InfinityScrollExample = ({
 }: InfinityScrollExampleProps) => {
     const listState = useListState();
 
-    const handleItemClick: TreeListOnItemClick<{title: string}> = (
-        _data,
-        {id, isGroup, disabled},
-    ) => {
+    const handleItemClick: TreeListOnItemClick<{title: string}> = ({id, isGroup, disabled}) => {
         if (disabled) return;
 
         listState.setActiveItemId(id);

diff --git a/src/components/TreeList/__stories__/components/WithDndListExample.tsx b/src/components/TreeList/__stories__/components/WithDndListExample.tsx
@@ -141,7 +141,7 @@ export const WithDndListExample = (storyProps: WithDndListExampleProps) => {
             getItemContent={({someRandomKey}) => ({title: someRandomKey})}
             // you can omit this prop here. If prop `id` passed, TreeSelect would take it by default
             getId={({id}) => id}
-            onItemClick={(_data, {id, isGroup, disabled}) => {
+            onItemClick={({id, isGroup, disabled}) => {
                 if (!isGroup && !disabled) {
                     listState.setSelected((prevState) => ({
                         [id]: !prevState[id],

diff --git a/src/components/TreeList/__stories__/components/WithFiltrationAndControlsExample.tsx b/src/components/TreeList/__stories__/components/WithFiltrationAndControlsExample.tsx
@@ -56,7 +56,7 @@ export const WithFiltrationAndControlsExample = ({
             <TreeList
                 {...treeSelectProps}
                 {...listState}
-                onItemClick={(_data, {id, isGroup, disabled}) => {
+                onItemClick={({id, isGroup, disabled}) => {
                     if (disabled) return;
 
                     if (isGroup) {

diff --git a/...onents/TreeList/__stories__/components/WithGroupSelectionControlledStateAndCustomIcon.tsx b/...onents/TreeList/__stories__/components/WithGroupSelectionControlledStateAndCustomIcon.tsx
@@ -41,7 +41,7 @@ export const WithGroupSelectionControlledStateAndCustomIconExample = ({
 
     const listState = useListState();
 
-    const handleItemClick: TreeListOnItemClick<CustomDataStructure> = (_data, {id, disabled}) => {
+    const handleItemClick: TreeListOnItemClick<CustomDataStructure> = ({id, disabled}) => {
         if (disabled) return;
         console.log(1);
 

diff --git a/src/components/TreeList/__stories__/components/WithItemLinksAndActionsExample.tsx b/src/components/TreeList/__stories__/components/WithItemLinksAndActionsExample.tsx
@@ -25,7 +25,7 @@ export const WithItemLinksAndActionsExample = (props: WithItemLinksAndActionsExa
             {...listState}
             size="l"
             items={items}
-            onItemClick={(_, {id, isGroup, disabled}) => {
+            onItemClick={({id, isGroup, disabled}) => {
                 if (!isGroup && !disabled) {
                     listState.setSelected((prevState) => ({[id]: !prevState[id]}));
                 }

diff --git a/src/components/TreeList/types.ts b/src/components/TreeList/types.ts
@@ -22,14 +22,15 @@ export type TreeListRenderItem<T, P extends {} = {}> = (props: {
     renderContext?: P;
 }) => React.JSX.Element;
 
-interface ItemClickContext {
+interface ItemClickContext<T> {
     id: ListItemId;
     isGroup: boolean;
     isLastItem: boolean;
     disabled: boolean;
+    data: T;
 }
 
-export type TreeListOnItemClick<T> = (data: T, ctx: ItemClickContext) => void;
+export type TreeListOnItemClick<T> = (ctx: ItemClickContext<T>) => void;
 
 export type TreeListRenderContainerProps<T> = ListParsedState<T> &
     Partial<ListState> & {

diff --git a/src/components/TreeSelect/TreeSelect.tsx b/src/components/TreeSelect/TreeSelect.tsx
@@ -114,10 +114,7 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T>(
         });
 
     const handleItemClick = React.useCallback<TreeListOnItemClick<T>>(
-        (data, {id: listItemId, isGroup, isLastItem}) => {
-            // onItemClick = disabled - switch off default click behavior
-            if (onItemClick === 'disabled') return undefined;
-
+        ({id: listItemId, data, isGroup, isLastItem}) => {
             const defaultHandleClick = () => {
                 if (listState.disabledById[listItemId]) return;
 
@@ -140,16 +137,14 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T>(
             };
 
             if (onItemClick) {
-                return onItemClick(
+                return onItemClick({
+                    id: listItemId,
                     data,
-                    {
-                        id: listItemId,
-                        isGroup,
-                        isLastItem,
-                        disabled: listState.disabledById[listItemId],
-                    },
-                    defaultHandleClick,
-                );
+                    isGroup,
+                    isLastItem,
+                    disabled: listState.disabledById[listItemId],
+                    defaultClickCallback: defaultHandleClick,
+                });
             }
 
             return defaultHandleClick();

diff --git a/src/components/TreeSelect/__stories__/components/WithDndListExample.tsx b/src/components/TreeSelect/__stories__/components/WithDndListExample.tsx
@@ -149,7 +149,7 @@ export const WithDndListExample = (storyProps: WithDndListExampleProps) => {
                 getItemContent={({someRandomKey}) => ({
                     title: someRandomKey,
                 })}
-                onItemClick={(_data, {id, isGroup, disabled}) => {
+                onItemClick={({id, isGroup, disabled}) => {
                     if (!isGroup && !disabled) {
                         setValue([id]);
                     }

diff --git a/src/components/TreeSelect/__stories__/components/WithItemLinksAndActionsExample.tsx b/src/components/TreeSelect/__stories__/components/WithItemLinksAndActionsExample.tsx
@@ -33,7 +33,7 @@ export const WithItemLinksAndActionsExample = (props: WithItemLinksAndActionsExa
                 size="l"
                 value={value}
                 items={items}
-                onItemClick={(_, {id, isGroup, disabled}) => {
+                onItemClick={({id, isGroup, disabled}) => {
                     if (!isGroup && !disabled) {
                         setValue([id]);
                     }

diff --git a/src/components/TreeSelect/types.ts b/src/components/TreeSelect/types.ts
@@ -98,12 +98,7 @@ interface TreeSelectBaseProps<T> extends QAProps, Partial<Omit<ListState, 'selec
     onUpdate?(value: ListItemId[], selectedItems: T[]): void;
     onOpenChange?(open: boolean): void;
     renderContainer?: TreeSelectRenderContainer<T>;
-    /**
-     * If you wont to disable default behavior pass `disabled` as a value;
-     */
-    onItemClick?:
-        | 'disabled'
-        | ((data: T, content: OverrideItemContext, defaultClickCallback: () => void) => void);
+    onItemClick?: (ctx: OverrideItemContext<T>) => void;
     items: ListItemType<T>[];
 }
 

diff --git a/src/components/useList/types.ts b/src/components/useList/types.ts
@@ -46,11 +46,17 @@ export type KnownItemStructure = {
     endSlot?: React.ReactNode;
 };
 
-export interface OverrideItemContext {
+export interface OverrideItemContext<T> {
     id: ListItemId;
     isGroup: boolean;
     disabled: boolean;
     isLastItem: boolean;
+    data: T;
+    /**
+     * Use this callback if you don't wont to copy all selection logic (single|multiple variant).
+     * For example, you wont to add some additional logic on click
+     */
+    defaultClickCallback: () => void;
 }
 
 export type RenderItemContext = {