Skip to content

Commit

Permalink
fix(useList): add evend to onItemClick and some minor renames
Browse files Browse the repository at this point in the history
  • Loading branch information
@IsaevAlexandr
IsaevAlexandr committed Jun 20, 2024
1 parent 81e8e5b commit 32936e6
Show file tree
Hide file tree
Showing 16 changed files with 82 additions and 69 deletions.
20 changes: 11 additions & 9 deletions src/components/TreeList/TreeList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
getListItemClickHandler,
useListKeydown,
} from '../useList';
import type {ListItemId} from '../useList';
import type {ListOnItemClick} from '../useList';
import {block} from '../utils/cn';

import type {TreeListContainerProps, TreeListProps} from './types';
Expand All @@ -23,12 +23,12 @@ export const TreeList = <T,>({
size = 'm',
className,
list,
multiple,
containerRef: propsContainerRef,
renderItem: propsRenderItem,
renderContainer = ListContainer,
onItemClick: propsOnItemClick,
multiple,
containerRef: propsContainerRef,
withItemClick,
onItemAction,
mapItemDataToProps,
}: TreeListProps<T>) => {
const uniqId = useUniqId();
Expand All @@ -43,13 +43,15 @@ export const TreeList = <T,>({

const onClick = propsOnItemClick ?? getListItemClickHandler({list, multiple});

return ({id}: {id: ListItemId}) => {
const payload = {id, list};
const handler: ListOnItemClick = (arg, e) => {
const payload = {id: arg.id, list};

onClick(payload);
withItemClick?.(payload);
onClick(payload, e);
onItemAction?.(payload);
};
}, [list, multiple, propsOnItemClick, withItemClick]);

return handler;
}, [list, multiple, propsOnItemClick, onItemAction]);

useListKeydown({
containerRef,
Expand Down
26 changes: 13 additions & 13 deletions src/components/TreeList/__stories__/TreeListDocs.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>}) => React.JSX.Element \| null` | |
| withItemClick | Don't override default click behavior and add additional logic. Work's if `onItemClick` not `null` | `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` | |
| onItemAction | Don't override default click behavior and add additional logic. Work's if `onItemClick` not `null` | `TreeListOnItemClick<T> \| null` | |

### TreeListRenderItem props:

Expand Down
2 changes: 1 addition & 1 deletion src/components/TreeList/__stories__/stories/WithDisabledElementsStory.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export const WithDisabledElementsStory = ({...storyProps}: WithDisabledElementsS
list={list}
containerRef={containerRef}
mapItemDataToProps={({text}) => ({title: text})}
withItemClick={({id}) => {
onItemAction={({id}) => {
alert(
`Clicked by item with id :"${id}" and data: ${JSON.stringify(list.structure.itemsById[id])}`,
);
Expand Down
9 changes: 7 additions & 2 deletions src/components/TreeList/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,12 @@ export type TreeListMapItemDataToProps<T> = (item: T) => ListItemCommonProps;

export type TreeListOnItemClickPayload<T> = {id: ListItemId; list: UseList<T>};

export type TreeListOnItemClick<T> = (payload: TreeListOnItemClickPayload<T>) => void;
export type TreeListOnItemClick<T> = (
payload: TreeListOnItemClickPayload<T>,
e?: React.SyntheticEvent,
) => void;

export type TreeListOnItemAction<T> = (payload: TreeListOnItemClickPayload<T>) => void;

export interface TreeListProps<T, P extends {} = {}> extends QAProps {
/**
Expand All @@ -57,6 +62,6 @@ export interface TreeListProps<T, P extends {} = {}> extends QAProps {
* Don't override default click behavior and add additional logic.
* Work's if `onItemClick` not `null`
*/
withItemClick?: TreeListOnItemClick<T>;
onItemAction?: TreeListOnItemAction<T>;
mapItemDataToProps: TreeListMapItemDataToProps<T>;
}
4 changes: 2 additions & 2 deletions src/components/TreeSelect/TreeSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export const TreeSelect = React.forwardRef(function TreeSelect<
onBlur,
getItemId,
onItemClick,
withItemClick,
onItemAction,
}: TreeSelectProps<T, M>,
ref: React.Ref<HTMLButtonElement>,
) {
Expand Down Expand Up @@ -223,7 +223,7 @@ export const TreeSelect = React.forwardRef(function TreeSelect<
id={`list-${treeSelectId}`}
containerRef={containerRef}
onItemClick={typeof onItemClick === 'undefined' ? handleItemClick : onItemClick}
withItemClick={withItemClick}
onItemAction={onItemAction}
renderContainer={renderContainer}
mapItemDataToProps={mapItemDataToProps}
renderItem={renderItem ?? defaultItemRenderer}
Expand Down
2 changes: 1 addition & 1 deletion src/components/TreeSelect/__stories__/TreeSelect.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ const DefaultTemplate: StoryFn<
{...props}
items={items}
mapItemDataToProps={(x) => x}
withItemClick={(id) => {
onItemAction={(id) => {
console.log('clicked on item with id: ', id);
}}
/>
Expand Down
2 changes: 1 addition & 1 deletion src/components/TreeSelect/__stories__/components/InfinityScrollExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export const InfinityScrollExample = ({
value={value}
mapItemDataToProps={identity}
items={items}
withItemClick={handleGroupItemClick}
onItemAction={handleGroupItemClick}
renderItem={({data, props, context: {isLastItem, childrenIds}}) => {
const node = (
<ListItemView
Expand Down
16 changes: 8 additions & 8 deletions src/components/useList/__stories__/docs/get-item-render-state.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,14 @@ return <ListItemView {...props} />;

#### Props:

| Name | Description | Type | Default |
| :----------------- | :--------------------------------------------------------------------------------- | :--------------------------------: | :-----: |
| id | `id` of list item | `ListItemId` | |
| list | result of `useList` hook | `UseList` | |
| multiple | One or multiple elements selected list | `boolean` | |
| onItemClick | Optional on click handler | `(id: ListItemId) => void` | |
| 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` | |
| Name | Description | Type | Default |
| :----------------- | :--------------------------------------------------------------------------------- | :------------------------------------------------------------: | :-----: |
| id | `id` of list item | `ListItemId` | |
| list | result of `useList` hook | `UseList` | |
| multiple | One or multiple elements selected list | `boolean` | |
| onItemClick | Optional on click handler | `(payload :{id: ListItemId}, e: React.SyntheticEvent) => void` | |
| 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` | |

##### ListItemCommonProps

Expand Down
12 changes: 6 additions & 6 deletions src/components/useList/__stories__/docs/use-list-keydown.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ Keyboard support

#### Props:

| Name | Description | Type | Default |
| :----------- | :-------------------------------------------------------------------------------------------- | :------------------------------------------------: | :-----: |
| list | result of `useList` hook | `UseList` | |
| onItemClick | callback will be called when pressing the `Enter`, `Space` keys; | `(payload: {id: ListItemId}) => void` | |
| containerRef | a reference to the DOM element of the List container inside which to search for its elements; | `React.RefObject<HTMLDivElement \| HTMLUlElement>` | |
| enabled | on/off keyboard support. Use it if you need to change the behavior in runtime; | `boolean` | |
| Name | Description | Type | Default |
| :----------- | :-------------------------------------------------------------------------------------------- | :------------------------------------------------------------: | :-----: |
| list | result of `useList` hook | `UseList` | |
| onItemClick | callback will be called when pressing the `Enter`, `Space` keys; | `(payload: {id: ListItemId}, e: React.SyntheticEvent) => void` | |
| containerRef | a reference to the DOM element of the List container inside which to search for its elements; | `React.RefObject<HTMLDivElement \| HTMLUlElement>` | |
| enabled | on/off keyboard support. Use it if you need to change the behavior in runtime; | `boolean` | |

#### Usage example:

Expand Down
2 changes: 1 addition & 1 deletion src/components/useList/__stories__/docs/use-list.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ The main hook to use what provide you normalized representation of list items (`
| getItemId | Allows you to generate an id for a list item depending on the list data | `(itemData: T) => string` | |
| defaultExpandedState | Default state for nodes with children items if `withExpandedState` is true | `expanded`, `closed` | `expanded` |
| withExpandedState | Is nodes with children's needed to be controlled | `boolean` | `true` |
| initialValues | Initial state values | `Partial<ListState>` | |
| initialState | Initial state values | `Partial<ListState>` | |
| mixState | Way to override state by some controlled values. | `Partial<ListState>` | |

#### Result (UseList):
Expand Down
4 changes: 2 additions & 2 deletions src/components/useList/hooks/useList.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const useList = <T>({
getItemId,
defaultExpandedState = 'expanded',
withExpandedState = true,
initialValues,
initialState: initialValues,
mixState,
}: UseListProps<T>): UseList<T> => {
const {itemsById, groupsState, itemsState, initialState} = useListParsedState({
Expand All @@ -46,7 +46,7 @@ export const useList = <T>({
]);

const innerState = useListState({
initialValues: initValues,
initialState: initValues,
withExpandedState,
});

Expand Down
Loading

0 comments on commit 32936e6

Please sign in to comment.