Skip to content

Commit

Permalink
fix(useList): rename UserListResult type
Browse files Browse the repository at this point in the history
  • Loading branch information
@IsaevAlexandr
IsaevAlexandr committed Jun 20, 2024
1 parent 6009d1e commit 392ffd6
Show file tree
Hide file tree
Showing 17 changed files with 47 additions and 47 deletions.
30 changes: 15 additions & 15 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>}, e: React.SyntheticEvent) => void \| null` | |
| disableDefaultItemClickBehavior | Disable default `onItemClick` handler logic | `TreeListOnItemClick<T> \| null` | |
| Name | Description | Type | Default |
| :------------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------: | :-----: |
| list | result of [list](/docs/lab-uselist--docs#uselist) hook. | `UseListResult` | |
| 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: UseListResult<T>}, e: React.SyntheticEvent) => void \| null` | |
| disableDefaultItemClickBehavior | Disable default `onItemClick` handler logic | `TreeListOnItemClick<T> \| null` | |

### TreeListRenderItem props:

Expand All @@ -85,7 +85,7 @@ const Component = () => {
| data | List item data | `T` | |
| props | Prepared `ListItemView` [props](/docs/lab-uselist--docs#listitemview) | `ListItemViewProps` |
| context | List item context [props](/docs/lab-uselist--docs#listitemlistcontextprops) | `ListItemListContextProps` | |
| list | result of [list](/docs/lab-uselist--docs#uselist) hook. | `UseList` | |
| list | result of [list](/docs/lab-uselist--docs#uselist) hook. | `UseListResult` | |
| index | Index order in flatted visible id's | `number` | |
| renderContainerProps | Data from container rendered context if needed | `P` | `undefined` |

Expand All @@ -94,7 +94,7 @@ const Component = () => {
| Name | Description | Type | Default |
| :----------- | :-------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------: | :-----: |
| id | Id attribute | `string` | |
| list | result of `useList` hook | `UseList` | |
| list | result of `useList` hook | `UseListResult` | |
| size | The size of the element. This also affects the rounding radius of the list element | `s \| m \| l \| xl` | `m` |
| className | Class name to mix with | `string` | |
| containerRef | a reference to the DOM element of the List container inside which to search for its elements; | `React.RefObject<HTMLDivElement \| HTMLUlElement>` | |
Expand Down
8 changes: 4 additions & 4 deletions src/components/TreeList/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import type {
ListItemListContextProps,
ListItemSize,
RenderItemProps,
UseList,
UseListResult,
} from '../useList';

export type TreeListRenderItem<T, P extends {} = {}> = (props: {
Expand All @@ -17,7 +17,7 @@ export type TreeListRenderItem<T, P extends {} = {}> = (props: {
props: RenderItemProps;
// internal list context props
context: ListItemListContextProps;
list: UseList<T>;
list: UseListResult<T>;
index: number;
renderContainerProps?: P;
}) => React.JSX.Element;
Expand All @@ -30,7 +30,7 @@ export type TreeListRenderContainer<T> = (props: TreeListContainerProps<T>) => R

export type TreeListMapItemDataToProps<T> = (item: T) => ListItemCommonProps;

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

export type TreeListOnItemClick<T> = (
payload: TreeListOnItemClickPayload<T>,
Expand All @@ -42,7 +42,7 @@ export interface TreeListProps<T, P extends {} = {}> extends QAProps {
* Control outside list container dom element. For example for keyboard
*/
containerRef?: React.RefObject<HTMLDivElement>;
list: UseList<T>;
list: UseListResult<T>;
id?: string | undefined;
className?: string;
multiple?: boolean;
Expand Down
4 changes: 2 additions & 2 deletions ...ents/TreeSelect/__stories__/components/WithGroupSelectionControlledStateAndCustomIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {Button} from '../../../Button';
import {Icon} from '../../../Icon';
import {Flex, spacing} from '../../../layout';
import {ListItemView} from '../../../useList';
import type {ListItemCommonProps, ListItemId, UseList} from '../../../useList';
import type {ListItemCommonProps, ListItemId, UseListResult} from '../../../useList';
import {createRandomizedData} from '../../../useList/__stories__/utils/makeData';
import {TreeSelect} from '../../TreeSelect';
import type {TreeSelectProps} from '../../types';
Expand Down Expand Up @@ -39,7 +39,7 @@ export const WithGroupSelectionControlledStateAndCustomIconExample = ({
[itemsCount],
);

const onItemClick = (id: ListItemId, list: UseList<{a: string}>) => {
const onItemClick = (id: ListItemId, list: UseListResult<{a: string}>) => {
if (list.state.disabledById[id]) return;

list.state.setSelected((prevState) => ({
Expand Down
4 changes: 2 additions & 2 deletions src/components/TreeSelect/__stories__/components/WithItemLinksAndActionsExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {DropdownMenu} from '../../../DropdownMenu';
import {Icon} from '../../../Icon';
import {Flex} from '../../../layout';
import {ListItemView} from '../../../useList';
import type {ListItemId, UseList} from '../../../useList';
import type {ListItemId, UseListResult} from '../../../useList';
import {createRandomizedData} from '../../../useList/__stories__/utils/makeData';
import {TreeSelect} from '../../TreeSelect';
import type {TreeSelectProps} from '../../types';
Expand All @@ -25,7 +25,7 @@ export const WithItemLinksAndActionsExample = (props: WithItemLinksAndActionsExa
const [open, setOpen] = React.useState(true);
const items = React.useMemo(() => createRandomizedData({num: 10, depth: 1}), []);

const onItemClick = (id: ListItemId, list: UseList<{title: string}>) => {
const onItemClick = (id: ListItemId, list: UseListResult<{title: string}>) => {
if (list.state.disabledById[id]) return;

list.state.setSelected((prevState) => ({
Expand Down
6 changes: 3 additions & 3 deletions src/components/TreeSelect/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ import type {
TreeListRenderContainer,
TreeListRenderItem,
} from '../TreeList/types';
import type {ListItemId, ListItemSize, UseList} from '../useList';
import type {ListItemId, ListItemSize, UseListResult} from '../useList';
import type {UseListParsedStateProps} from '../useList/hooks/useListParsedState';

export type TreeSelectRenderControlProps<T> = {
list: UseList<T>;
list: UseListResult<T>;
open: boolean;
toggleOpen(): void;
clearValue(): void;
Expand Down Expand Up @@ -61,7 +61,7 @@ export interface TreeSelectProps<T, P extends {} = {}>
* In other situations use `renderContainer` method
*/
slotAfterListBody?: React.ReactNode;
onUpdate?(value: ListItemId[], list: UseList<T>): void;
onUpdate?(value: ListItemId[], list: UseListResult<T>): void;
/**
* Ability to override custom toggler button
*/
Expand Down
2 changes: 1 addition & 1 deletion src/components/useList/__stories__/docs/get-item-render-state.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ return <ListItemView {...props} />;
| Name | Description | Type | Default |
| :----------------- | :--------------------------------------------------------------------------------- | :------------------------------------------------------------: | :-----: |
| id | `id` of list item | `ListItemId` | |
| list | result of `useList` hook | `UseList` | |
| list | result of `useList` hook | `UseListResult` | |
| 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` |
Expand Down
8 changes: 4 additions & 4 deletions src/components/useList/__stories__/docs/get-list-item-click-handler.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@ import {unstable_getListItemClickHandler as getListItemClickHandler} from '@grav

#### props:

| Name | Description | Type | Default |
| :------- | :------------------------------------- | :-------: | :-----: |
| list | result of `useList` hook | `UseList` | |
| multiple | One or multiple elements selected list | `boolean` | |
| Name | Description | Type | Default |
| :------- | :------------------------------------- | :-------------: | :-----: |
| list | result of `useList` hook | `UseListResult` | |
| multiple | One or multiple elements selected list | `boolean` | |

#### Result:

Expand Down
2 changes: 1 addition & 1 deletion src/components/useList/__stories__/docs/use-list-keydown.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ Keyboard support

| Name | Description | Type | Default |
| :----------- | :-------------------------------------------------------------------------------------------- | :------------------------------------------------------------: | :-----: |
| list | result of `useList` hook | `UseList` | |
| list | result of `useList` hook | `UseListResult` | |
| 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` | |
Expand Down
Loading

0 comments on commit 392ffd6

Please sign in to comment.