feat(List): support item click handler with event in arguments

gravity-ui · Jun 25, 2024 · b4beb5a · b4beb5a
1 parent 39cd8ad
commit b4beb5a
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 5 deletions.
diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
@@ -26,7 +26,13 @@ import {getUniqId} from '../utils/common';
 import {ListLoadingIndicator} from './ListLoadingIndicator';
 import {ListItem, SimpleContainer, defaultRenderItem} from './components';
 import {listNavigationIgnoredKeys} from './constants';
-import type {ListItemData, ListItemProps, ListProps} from './types';
+import type {
+    ItemClickWithEvent,
+    ListItemData,
+    ListItemProps,
+    ListProps,
+    SimpleItemClick,
+} from './types';
 
 import './List.scss';
 
@@ -248,7 +254,20 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
             }
             case 'Enter': {
                 if (typeof activeItem === 'number' && this.props.onItemClick) {
-                    this.props.onItemClick(this.state.items[activeItem], activeItem, true);
+                    if (this.props.onItemClick.length === 1) {
+                        (this.props.onItemClick as ItemClickWithEvent<T>)({
+                            item: this.state.items[activeItem],
+                            index: activeItem,
+                            event,
+                            fromKeyboard: true,
+                        });
+                    } else {
+                        (this.props.onItemClick as SimpleItemClick<T>)(
+                            this.state.items[activeItem],
+                            activeItem,
+                            true,
+                        );
+                    }
                 }
                 break;
             }

diff --git a/src/components/List/__stories__/List.stories.tsx b/src/components/List/__stories__/List.stories.tsx
@@ -77,6 +77,10 @@ export const RenderItem = RenderItemTemplate.bind({});
 RenderItem.args = {
     items,
     renderItem: (item) => `🔥🔥🔥 ${item} 🔥🔥🔥`,
+    virtualized: false,
+    onItemClick: (item: string, index: number) => {
+        alert(`Click on item ${item} with index ${index}`);
+    },
 };
 
 const TemplateWithState: StoryFn<ComponentType> = (args) => <ListWithLoader {...args} />;

diff --git a/src/components/List/components/ListItem.tsx b/src/components/List/components/ListItem.tsx
@@ -9,7 +9,7 @@ import {Icon} from '../../Icon';
 import {block} from '../../utils/cn';
 import {eventBroker} from '../../utils/event-broker';
 import {ListQa} from '../constants';
-import type {ListItemProps} from '../types';
+import type {ItemClickWithEvent, ListItemProps, SimpleItemClick} from '../types';
 
 const b = block('list');
 
@@ -108,7 +108,20 @@ export class ListItem<T = unknown> extends React.Component<ListItemProps<T>> {
         return <div className={b('item-content')}>{renderItem(item, active, itemIndex)}</div>;
     }
 
-    private onClick = () => this.props.onClick?.(this.props.item, this.props.itemIndex);
+    private onClick: React.MouseEventHandler<HTMLDivElement> = (event) => {
+        if (!this.props.onClick) {
+            return;
+        }
+        if (this.props.onClick.length === 1) {
+            (this.props.onClick as ItemClickWithEvent<T>)({
+                item: this.props.item,
+                index: this.props.itemIndex,
+                event,
+            });
+            return;
+        }
+        (this.props.onClick as SimpleItemClick<T>)(this.props.item, this.props.itemIndex);
+    };
 
     private onClickCapture: React.MouseEventHandler<HTMLDivElement> = (event) => {
         ListItem.publishEvent({

diff --git a/src/components/List/types.ts b/src/components/List/types.ts
@@ -11,6 +11,26 @@ export type ListSortParams = {oldIndex: number; newIndex: number};
 
 export type ListItemData<T> = T & {disabled?: boolean};
 
+export type SimpleItemClick<T> = (
+    item: ListItemData<T>,
+    index: number,
+    fromKeyboard?: boolean,
+) => void;
+
+export type ItemClickWithEvent<T> = ({
+    item,
+    index,
+    fromKeyboard,
+    event,
+}: {
+    item: ListItemData<T>;
+    index: number;
+    fromKeyboard?: boolean;
+    event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.KeyboardEvent<HTMLElement>;
+}) => void;
+
+type ItemClickHandler<T> = SimpleItemClick<T> | ItemClickWithEvent<T>;
+
 export type ListProps<T = unknown> = QAProps & {
     items: ListItemData<T>[];
     className?: string;
@@ -36,7 +56,7 @@ export type ListProps<T = unknown> = QAProps & {
         itemIndex: number,
     ) => React.ReactNode;
     filterItem?: (filter: string) => (item: ListItemData<T>) => boolean;
-    onItemClick?: (item: ListItemData<T>, index: number, fromKeyboard?: boolean) => void;
+    onItemClick?: ItemClickHandler<T>;
     onFilterUpdate?: (filter: string) => void;
     onFilterEnd?: ({items}: {items: ListItemData<T>[]}) => void;
     onSortEnd?: (params: ListSortParams) => void;