From 6009d1ed756d8afbe789e78ae3c80719e63fdc3a Mon Sep 17 00:00:00 2001 From: Alexandr Isaev <aisaev188@yandex-team.ru> Date: Thu, 20 Jun 2024 20:15:38 +0300 Subject: [PATCH] fix(TreeList): rename prop --- src/components/TreeList/TreeList.tsx | 8 +++--- .../TreeList/__stories__/TreeListDocs.md | 26 +++++++++---------- .../__stories__/stories/DefaultStory.tsx | 4 +-- src/components/TreeList/types.ts | 2 +- src/components/TreeSelect/TreeSelect.tsx | 8 +++--- 5 files changed, 24 insertions(+), 24 deletions(-) diff --git a/src/components/TreeList/TreeList.tsx b/src/components/TreeList/TreeList.tsx index 80fd5fb7b3..569d23ccc2 100644 --- a/src/components/TreeList/TreeList.tsx +++ b/src/components/TreeList/TreeList.tsx @@ -28,7 +28,7 @@ export const TreeList = <T,>({ renderItem: propsRenderItem, renderContainer = ListContainer, onItemClick: propsOnItemClick, - disableDefaultClickHandler, + disableDefaultItemClickBehavior, mapItemDataToProps, }: TreeListProps<T>) => { const uniqId = useUniqId(); @@ -37,14 +37,14 @@ export const TreeList = <T,>({ const containerRef = propsContainerRef ?? containerRefLocal; const onItemClick = React.useMemo(() => { - if (disableDefaultClickHandler && !propsOnItemClick) { + if (disableDefaultItemClickBehavior && !propsOnItemClick) { return undefined; } const handler: ListOnItemClick = (arg, e) => { const payload = {id: arg.id, list}; - if (!disableDefaultClickHandler) { + if (!disableDefaultItemClickBehavior) { const baseOnClick = getListItemClickHandler({list, multiple}); baseOnClick(payload, e); @@ -54,7 +54,7 @@ export const TreeList = <T,>({ }; return handler; - }, [disableDefaultClickHandler, propsOnItemClick, list, multiple]); + }, [disableDefaultItemClickBehavior, propsOnItemClick, list, multiple]); useListKeydown({ containerRef, diff --git a/src/components/TreeList/__stories__/TreeListDocs.md b/src/components/TreeList/__stories__/TreeListDocs.md index 8cc36e256b..668e32624a 100644 --- a/src/components/TreeList/__stories__/TreeListDocs.md +++ b/src/components/TreeList/__stories__/TreeListDocs.md @@ -64,19 +64,19 @@ const Component = () => { ## Props: -| Name | Description | Type | Default | -| :------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------: | :-----: | -| list | result of [list](/docs/lab-uselist--docs#uselist) hook. | `UseList` | | -| containerRef | a reference to the DOM element of the List container inside which to search for its elements; | `React.RefObject<HTMLDivElement \| HTMLUlElement>` | | -| qa | Selector for tests | `string` | | -| size | The size of the element. This also affects the rounding radius of the list element | `s \| m \| l \| xl` | `m` | -| mapItemDataToProps | Map list item data (`T`) to `ListItemView` props | `(data: T) => ListItemCommonProps` | | -| multiple | One or multiple elements selected list | `boolean` | `false` | -| id | id attribute | `string` | | -| renderItem | Redefine the rendering of a list item. For example, add dividers between list items or wrap an item in a link component. As a view component to display a list item, use [ListItemView](/docs/lab-uselist--docs#listitemview); | `(props: TreeListRenderItem<T, P>) => React.JSX.Element` | | -| renderContainer | Render custom list container. | `(props: TreeListRenderContainer<T>) => React.JSX.Element` | | -| onItemClick | Override default on click behavior. Pass `null` to disable on click handler | `(props: {id: ListItemId; list: UseList<T>}, e: React.SyntheticEvent) => void \| null` | | -| disableDefaultClickHandler | Disable default `onItemClick` handler logic | `TreeListOnItemClick<T> \| null` | | +| Name | Description | Type | Default | +| :------------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------: | :-----: | +| list | result of [list](/docs/lab-uselist--docs#uselist) hook. | `UseList` | | +| containerRef | a reference to the DOM element of the List container inside which to search for its elements; | `React.RefObject<HTMLDivElement \| HTMLUlElement>` | | +| qa | Selector for tests | `string` | | +| size | The size of the element. This also affects the rounding radius of the list element | `s \| m \| l \| xl` | `m` | +| mapItemDataToProps | Map list item data (`T`) to `ListItemView` props | `(data: T) => ListItemCommonProps` | | +| multiple | One or multiple elements selected list | `boolean` | `false` | +| id | id attribute | `string` | | +| renderItem | Redefine the rendering of a list item. For example, add dividers between list items or wrap an item in a link component. As a view component to display a list item, use [ListItemView](/docs/lab-uselist--docs#listitemview); | `(props: TreeListRenderItem<T, P>) => React.JSX.Element` | | +| renderContainer | Render custom list container. | `(props: TreeListRenderContainer<T>) => React.JSX.Element` | | +| onItemClick | Override default on click behavior. Pass `null` to disable on click handler | `(props: {id: ListItemId; list: UseList<T>}, e: React.SyntheticEvent) => void \| null` | | +| disableDefaultItemClickBehavior | Disable default `onItemClick` handler logic | `TreeListOnItemClick<T> \| null` | | ### TreeListRenderItem props: diff --git a/src/components/TreeList/__stories__/stories/DefaultStory.tsx b/src/components/TreeList/__stories__/stories/DefaultStory.tsx index 5a9dc705a4..eddd6f31a8 100644 --- a/src/components/TreeList/__stories__/stories/DefaultStory.tsx +++ b/src/components/TreeList/__stories__/stories/DefaultStory.tsx @@ -35,7 +35,7 @@ export const DefaultStory = ({itemsCount = 5, ...props}: DefaultStoryProps) => { list={listWithGroups} onItemClick={null} mapItemDataToProps={identity} - disableDefaultClickHandler + disableDefaultItemClickBehavior /> </Flex> <Flex direction={'column'} gap="3"> @@ -48,7 +48,7 @@ export const DefaultStory = ({itemsCount = 5, ...props}: DefaultStoryProps) => { list={listWithNoGroups} onItemClick={null} mapItemDataToProps={identity} - disableDefaultClickHandler + disableDefaultItemClickBehavior /> </Flex> </Flex> diff --git a/src/components/TreeList/types.ts b/src/components/TreeList/types.ts index 3e4b7eddf1..575c3adbd5 100644 --- a/src/components/TreeList/types.ts +++ b/src/components/TreeList/types.ts @@ -59,6 +59,6 @@ export interface TreeListProps<T, P extends {} = {}> extends QAProps { /** * Disable default `onItemClick` handler logic */ - disableDefaultClickHandler?: boolean; + disableDefaultItemClickBehavior?: boolean; mapItemDataToProps: TreeListMapItemDataToProps<T>; } diff --git a/src/components/TreeSelect/TreeSelect.tsx b/src/components/TreeSelect/TreeSelect.tsx index 3433d8ea38..d292410f3a 100644 --- a/src/components/TreeSelect/TreeSelect.tsx +++ b/src/components/TreeSelect/TreeSelect.tsx @@ -47,7 +47,7 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T>( defaultValue, withExpandedState = true, defaultExpandedState = 'expanded', - disableDefaultClickHandler, + disableDefaultItemClickBehavior, onClose, onOpenChange, onUpdate, @@ -103,7 +103,7 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T>( }); const handleItemClick = React.useMemo(() => { - if (disableDefaultClickHandler && !onItemClick) { + if (disableDefaultItemClickBehavior && !onItemClick) { return undefined; } @@ -112,7 +112,7 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T>( if (list.state.disabledById[id]) return; - if (!disableDefaultClickHandler) { + if (!disableDefaultItemClickBehavior) { // always activate selected item list.state.setActiveItemId(id); @@ -136,7 +136,7 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T>( return handler; }, [ multiple, - disableDefaultClickHandler, + disableDefaultItemClickBehavior, onItemClick, handleMultipleSelection, handleSingleSelection,