From 9df2fffb4fd8a8a16d220e9099afe75c200401e3 Mon Sep 17 00:00:00 2001 From: Alexandr Isaev Date: Thu, 20 Jun 2024 14:38:11 +0300 Subject: [PATCH] fix(useList): default list list item on click handler hook -> util --- src/components/TreeList/TreeList.tsx | 4 ++-- src/components/useList/__stories__/Docs.mdx | 10 +++++----- .../useList/__stories__/components/FlattenList.tsx | 4 ++-- .../__stories__/components/InfinityScrollList.tsx | 4 ++-- .../useList/__stories__/components/ListWithDnd.tsx | 4 ++-- .../__stories__/components/PopupWithTogglerList.tsx | 4 ++-- .../useList/__stories__/components/RecursiveList.tsx | 4 ++-- .../useList/__stories__/docs/get-item-render-state.md | 2 +- ...st-item-click.md => get-list-item-click-handler.md} | 6 +++--- .../useList/__stories__/docs/use-list-keydown.md | 4 ++-- src/components/useList/index.ts | 2 +- .../getListItemClickHandler.ts} | 7 +++++-- src/unstable.ts | 2 +- 13 files changed, 30 insertions(+), 27 deletions(-) rename src/components/useList/__stories__/docs/{use-list-item-click.md => get-list-item-click-handler.md} (77%) rename src/components/useList/{hooks/useListItemClick.ts => utils/getListItemClickHandler.ts} (83%) diff --git a/src/components/TreeList/TreeList.tsx b/src/components/TreeList/TreeList.tsx index 7a45c0f896..5b06f97f5d 100644 --- a/src/components/TreeList/TreeList.tsx +++ b/src/components/TreeList/TreeList.tsx @@ -7,7 +7,7 @@ import { ListContainer, ListItemView, getItemRenderState, - useListItemClick, + getListItemClickHandler, useListKeydown, } from '../useList'; import type {ListItemId} from '../useList'; @@ -36,7 +36,7 @@ export const TreeList = ({ const containerRefLocal = React.useRef(null); const containerRef = propsContainerRef ?? containerRefLocal; - const defaultOnItemClick = useListItemClick({list, multiple}); + const defaultOnItemClick = getListItemClickHandler({list, multiple}); const onItemClick = React.useMemo(() => { if (propsOnItemClick === null) { diff --git a/src/components/useList/__stories__/Docs.mdx b/src/components/useList/__stories__/Docs.mdx index ceeb35de5f..a7a6ee20ff 100644 --- a/src/components/useList/__stories__/Docs.mdx +++ b/src/components/useList/__stories__/Docs.mdx @@ -3,7 +3,7 @@ import {Meta, Markdown} from '@storybook/addon-docs'; import UseListHook from './docs/use-list.md?raw'; import UseListKeydownHook from './docs/use-list-keydown.md?raw'; import UseListFilterHook from './docs/use-list-filter.md?raw'; -import UseListItemClickHook from './docs/use-list-item-click.md?raw'; +import GetListItemClickHandler from './docs/get-list-item-click-handler.md?raw'; import ListItemView from './docs/list-item-view.md?raw'; import ListContainerView from './docs/list-container-view.md?raw'; import ListRecursiveRenderer from './docs/list-recursive-renderer.md?raw'; @@ -28,7 +28,6 @@ The basic idea is that hooks take all the complex logic on themselves, and all y - [useList](#uselist); - [useListKeydown](#uselistkeydown) - [useListFilter](#uselistfilter); -- [useListItemClick](#uselistitemclick); ### Components (View only): @@ -38,6 +37,7 @@ The basic idea is that hooks take all the complex logic on themselves, and all y ### Utilities: +- [getListItemClickHandler](#getlistItemclickhandler); - [computeItemSize](#computeitemsize); - [scrollToListItem](#scrolltolistitem); - [getItemRenderState](#getitemrenderstate); @@ -66,7 +66,7 @@ function List() { const containerRef = React.useRef(null); const list = useList({items}); - const onItemClick = useListItemClick({list, multiple: true}); + const onItemClick = getListItemClickHandler({list, multiple: true}); useListKeydown({onItemClick, containerRef, list}); return ( @@ -136,8 +136,6 @@ function List() { {UseListFilterHook} -{UseListItemClickHook} - ## Components: {ListItemView} @@ -148,6 +146,8 @@ function List() { ## Utilities +{GetListItemClickHandler} + {computeItemSize} {scrollToListItem} diff --git a/src/components/useList/__stories__/components/FlattenList.tsx b/src/components/useList/__stories__/components/FlattenList.tsx index f4a45403cf..932e6b4201 100644 --- a/src/components/useList/__stories__/components/FlattenList.tsx +++ b/src/components/useList/__stories__/components/FlattenList.tsx @@ -8,11 +8,11 @@ import {ListContainerView} from '../../components/ListContainerView'; import {ListItemView} from '../../components/ListItemView'; import {useList} from '../../hooks/useList'; import {useListFilter} from '../../hooks/useListFilter'; -import {useListItemClick} from '../../hooks/useListItemClick'; import {useListKeydown} from '../../hooks/useListKeydown'; import type {ListItemSize} from '../../types'; import {computeItemSize} from '../../utils/computeItemSize'; import {getItemRenderState} from '../../utils/getItemRenderState'; +import {getListItemClickHandler} from '../../utils/getListItemClickHandler'; import {createRandomizedData} from '../utils/makeData'; import {VirtualizedListContainer} from './VirtualizedListContainer'; @@ -33,7 +33,7 @@ export const FlattenList = ({itemsCount, size}: FlattenListProps) => { const list = useList({items: filterState.items}); - const onItemClick = useListItemClick({list}); + const onItemClick = getListItemClickHandler({list}); useListKeydown({ containerRef, diff --git a/src/components/useList/__stories__/components/InfinityScrollList.tsx b/src/components/useList/__stories__/components/InfinityScrollList.tsx index 58ce905c85..dfbc1adc55 100644 --- a/src/components/useList/__stories__/components/InfinityScrollList.tsx +++ b/src/components/useList/__stories__/components/InfinityScrollList.tsx @@ -8,10 +8,10 @@ import {ListContainer} from '../../components/ListContainer'; import {ListItemView} from '../../components/ListItemView'; import {useList} from '../../hooks/useList'; import {useListFilter} from '../../hooks/useListFilter'; -import {useListItemClick} from '../../hooks/useListItemClick'; import {useListKeydown} from '../../hooks/useListKeydown'; import type {ListItemSize} from '../../types'; import {getItemRenderState} from '../../utils/getItemRenderState'; +import {getListItemClickHandler} from '../../utils/getListItemClickHandler'; import {useInfinityFetch} from '../utils/useInfinityFetch'; import {IntersectionContainer} from './IntersectionContainer/IntersectionContainer'; @@ -26,7 +26,7 @@ export const InfinityScrollList = ({size}: InfinityScrollListProps) => { const filterState = useListFilter({items: data}); const list = useList({items: filterState.items}); - const onItemClick = useListItemClick({list, multiple: true}); + const onItemClick = getListItemClickHandler({list, multiple: true}); useListKeydown({ containerRef, diff --git a/src/components/useList/__stories__/components/ListWithDnd.tsx b/src/components/useList/__stories__/components/ListWithDnd.tsx index e88c58695b..ab20c12c61 100644 --- a/src/components/useList/__stories__/components/ListWithDnd.tsx +++ b/src/components/useList/__stories__/components/ListWithDnd.tsx @@ -15,10 +15,10 @@ import {ListContainerView} from '../../components/ListContainerView'; import {ListItemView} from '../../components/ListItemView'; import {useList} from '../../hooks/useList'; import {useListFilter} from '../../hooks/useListFilter'; -import {useListItemClick} from '../../hooks/useListItemClick'; import {useListKeydown} from '../../hooks/useListKeydown'; import type {ListItemSize} from '../../types'; import {getItemRenderState} from '../../utils/getItemRenderState'; +import {getListItemClickHandler} from '../../utils/getListItemClickHandler'; import {createRandomizedData} from '../utils/makeData'; import {reorderArray} from '../utils/reorderArray'; @@ -42,7 +42,7 @@ export const ListWithDnd = ({size, itemsCount, 'aria-label': ariaLabel}: ListWit items: filterState.items, }); - const onItemClick = useListItemClick({list}); + const onItemClick = getListItemClickHandler({list}); useListKeydown({ containerRef, diff --git a/src/components/useList/__stories__/components/PopupWithTogglerList.tsx b/src/components/useList/__stories__/components/PopupWithTogglerList.tsx index 834aece277..2a835a7969 100644 --- a/src/components/useList/__stories__/components/PopupWithTogglerList.tsx +++ b/src/components/useList/__stories__/components/PopupWithTogglerList.tsx @@ -6,10 +6,10 @@ import {Flex} from '../../../layout'; import {ListContainer} from '../../components/ListContainer'; import {ListItemView} from '../../components/ListItemView'; import {useList} from '../../hooks/useList'; -import {useListItemClick} from '../../hooks/useListItemClick'; import {useListKeydown} from '../../hooks/useListKeydown'; import type {ListItemSize} from '../../types'; import {getItemRenderState} from '../../utils/getItemRenderState'; +import {getListItemClickHandler} from '../../utils/getListItemClickHandler'; import {scrollToListItem} from '../../utils/scrollToListItem'; import {createRandomizedData} from '../utils/makeData'; @@ -32,7 +32,7 @@ export const PopupWithTogglerList = ({size, itemsCount}: PopupWithTogglerListPro const list = useList({items}); - const onItemClick = useListItemClick({list}); + const onItemClick = getListItemClickHandler({list}); const [selectedId] = React.useMemo( () => Object.keys(list.state.selectedById), diff --git a/src/components/useList/__stories__/components/RecursiveList.tsx b/src/components/useList/__stories__/components/RecursiveList.tsx index 91e4d67287..7a1e1ef61b 100644 --- a/src/components/useList/__stories__/components/RecursiveList.tsx +++ b/src/components/useList/__stories__/components/RecursiveList.tsx @@ -6,10 +6,10 @@ import {ListContainer} from '../../components/ListContainer'; import {ListItemView} from '../../components/ListItemView'; import {useList} from '../../hooks/useList'; import {useListFilter} from '../../hooks/useListFilter'; -import {useListItemClick} from '../../hooks/useListItemClick'; import {useListKeydown} from '../../hooks/useListKeydown'; import type {ListItemSize} from '../../types'; import {getItemRenderState} from '../../utils/getItemRenderState'; +import {getListItemClickHandler} from '../../utils/getListItemClickHandler'; import {createRandomizedData} from '../utils/makeData'; export interface RecursiveListProps { @@ -30,7 +30,7 @@ export const RecursiveList = ({size, itemsCount, 'aria-label': ariaLabel}: Recur const list = useList({items: filterState.items}); - const onItemClick = useListItemClick({list}); + const onItemClick = getListItemClickHandler({list}); useListKeydown({ containerRef, diff --git a/src/components/useList/__stories__/docs/get-item-render-state.md b/src/components/useList/__stories__/docs/get-item-render-state.md index bd6abded64..6057d3b9fe 100644 --- a/src/components/useList/__stories__/docs/get-item-render-state.md +++ b/src/components/useList/__stories__/docs/get-item-render-state.md @@ -11,7 +11,7 @@ import { } from '@gravity-ui/uikit/unstable'; const list = useList({items: [...]}); -const onItemClick = useListItemClick({list}); +const onItemClick = getListItemClickHandler({list}); const {data, props, context} = getItemRenderState({ qa: 'some-qa-id', diff --git a/src/components/useList/__stories__/docs/use-list-item-click.md b/src/components/useList/__stories__/docs/get-list-item-click-handler.md similarity index 77% rename from src/components/useList/__stories__/docs/use-list-item-click.md rename to src/components/useList/__stories__/docs/get-list-item-click-handler.md index 869996195e..4eaa8edea9 100644 --- a/src/components/useList/__stories__/docs/use-list-item-click.md +++ b/src/components/useList/__stories__/docs/get-list-item-click-handler.md @@ -1,9 +1,9 @@ -### useListItemClick +### getListItemClickHandler Basic click logic implemented for you ```tsx -import {unstable_useListItemClick as useListItemClick} from '@gravity-ui/uikit/unstable'; +import {unstable_getListItemClickHandler as getListItemClickHandler} from '@gravity-ui/uikit/unstable'; ``` #### props: @@ -24,7 +24,7 @@ const filterState = useListFilter({items: [...]}); const list = useList({items: filterState.items}); -const onItemClick = useListItemClick({list}); +const onItemClick = getListItemClickHandler({list}); useListKeydown({ containerRef, diff --git a/src/components/useList/__stories__/docs/use-list-keydown.md b/src/components/useList/__stories__/docs/use-list-keydown.md index 6c3781bdb5..a37a1a819a 100644 --- a/src/components/useList/__stories__/docs/use-list-keydown.md +++ b/src/components/useList/__stories__/docs/use-list-keydown.md @@ -17,12 +17,12 @@ Keyboard support import { unstable_useList as useList, unstable_useListKeydown as useListKeydown, - unstable_useListItemClick as useListItemClick, + unstable_getListItemClickHandler as getListItemClickHandler, } from '@gravity-ui/uikit/unstable'; const containerRef = React.useRef(null); const list = useList(...) -const handleItemClick = useListItemClick({list}); +const handleItemClick = getListItemClickHandler({list}); useListKeydown({ onItemClick, diff --git a/src/components/useList/index.ts b/src/components/useList/index.ts index 4f4028560c..0f8ff3ce06 100644 --- a/src/components/useList/index.ts +++ b/src/components/useList/index.ts @@ -1,12 +1,12 @@ export * from './hooks/useListFilter'; export * from './hooks/useList'; export * from './hooks/useListKeydown'; -export * from './hooks/useListItemClick'; export * from './types'; export * from './components/ListItemView'; export * from './components/ListRecursiveRenderer'; export * from './components/ListContainerView'; export * from './components/ListContainer'; +export * from './utils/getListItemClickHandler'; export * from './utils/computeItemSize'; export * from './utils/getItemRenderState'; export * from './utils/scrollToListItem'; diff --git a/src/components/useList/hooks/useListItemClick.ts b/src/components/useList/utils/getListItemClickHandler.ts similarity index 83% rename from src/components/useList/hooks/useListItemClick.ts rename to src/components/useList/utils/getListItemClickHandler.ts index 4986b3fb6a..13f4132e37 100644 --- a/src/components/useList/hooks/useListItemClick.ts +++ b/src/components/useList/utils/getListItemClickHandler.ts @@ -1,11 +1,14 @@ import type {ListItemId, UseList} from '../types'; -interface UseListItemClickOptions { +interface GetListItemClickHandlerProps { multiple?: boolean; list: UseList; } -export const useListItemClick = ({list, multiple}: UseListItemClickOptions) => { +export const getListItemClickHandler = ({ + list, + multiple, +}: GetListItemClickHandlerProps) => { const onItemClick = ({id}: {id: ListItemId}) => { if (list.state.disabledById[id]) return; diff --git a/src/unstable.ts b/src/unstable.ts index 149d56386d..36c1c8fe2b 100644 --- a/src/unstable.ts +++ b/src/unstable.ts @@ -3,7 +3,7 @@ export { useList as unstable_useList, useListFilter as unstable_useListFilter, useListKeydown as unstable_useListKeydown, - useListItemClick as unstable_useListItemClick, + getListItemClickHandler as unstable_getListItemClickHandler, ListItemView as unstable_ListItemView, type ListItemViewProps as unstable_ListItemViewProps, ListContainerView as unstable_ListContainerView,