From e0cb6a065a4ef81b6bd2aa34c39f50b8ae6d897f Mon Sep 17 00:00:00 2001 From: ngorin Date: Thu, 12 Oct 2023 14:29:24 +0300 Subject: [PATCH] chore: fix review with hooks --- src/hooks/useListNavigation/README.md | 44 +++++++++++++-------------- src/hooks/useSelect/types.ts | 3 ++ src/hooks/useTimeout/index.ts | 1 + src/hooks/useTimeout/useTimeout.ts | 4 +++ 4 files changed, 30 insertions(+), 22 deletions(-) diff --git a/src/hooks/useListNavigation/README.md b/src/hooks/useListNavigation/README.md index 9a2cfbb44e..fcc1eaae30 100644 --- a/src/hooks/useListNavigation/README.md +++ b/src/hooks/useListNavigation/README.md @@ -24,28 +24,6 @@ The hook returns the following: - `activeItemIndex` - active item index - `reset` - function, which should be called when you want to reset navigation -## Properties - -| Name | Description | Type | Default | -| :-------------- | :---------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------: | :-----: | -| items | List items. Item can be any object. Also, it can contain `items` property, which represents sub-items | `ItemType[]` | | -| skip | Returns true if the item should not participate in navigation (Called for each item) | `(item: ItemType) => boolean` | | -| pageSize | Items page size, if passed, then navigates by pageSize on PageDown/PageUp | `number` | | -| processHomeKey | Navigate to the start of the list on Home key | `boolean` | `false` | -| processEndKey | Navigate to the end of the list on End key | `boolean` | `false` | -| disabled | Disable navigation | `boolean` | `false` | -| initialValue | Initial active item index | `number` | `-1` | -| anchorRef | HTMLElement reference, the hook will listen keydown event on that element | `RefObject` | | -| onAnchorKeyDown | Custom keydown handler, if returns false, then the hook won't process keydown | `(activeItemIndex: number, event: KeyboardEvent) => boolean or void` | | - -## Result - -| Name | Description | Type | -| :----------------- | :----------------------- | :-----------------------: | -| activeItemIndex | Index of the active item | `number` | -| setActiveItemIndex | Active item index setter | `(index: number) => void` | -| reset | Resets navigation | `() => void` | - ## Examples ```tsx @@ -83,3 +61,25 @@ useListNavigation({ }, }); ``` + +## Properties + +| Name | Description | Type | Default | +| :-------------- | :---------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------: | :-----: | +| items | List items. Item can be any object. Also, it can contain `items` property, which represents sub-items | `ItemType[]` | | +| skip | Returns true if the item should not participate in navigation (Called for each item) | `(item: ItemType) => boolean` | | +| pageSize | Items page size, if passed, then navigates by pageSize on PageDown/PageUp | `number` | | +| processHomeKey | Navigate to the start of the list on Home key | `boolean` | `false` | +| processEndKey | Navigate to the end of the list on End key | `boolean` | `false` | +| disabled | Disable navigation | `boolean` | `false` | +| initialValue | Initial active item index | `number` | `-1` | +| anchorRef | HTMLElement reference, the hook will listen keydown event on that element | `RefObject` | | +| onAnchorKeyDown | Custom keydown handler, if returns false, then the hook won't process keydown | `(activeItemIndex: number, event: KeyboardEvent) => boolean or void` | | + +## Result + +| Name | Description | Type | +| :----------------- | :----------------------- | :-----------------------: | +| activeItemIndex | Index of the active item | `number` | +| setActiveItemIndex | Active item index setter | `(index: number) => void` | +| reset | Resets navigation | `() => void` | diff --git a/src/hooks/useSelect/types.ts b/src/hooks/useSelect/types.ts index 103cc3d743..aec84bce5e 100644 --- a/src/hooks/useSelect/types.ts +++ b/src/hooks/useSelect/types.ts @@ -20,6 +20,9 @@ export type UseSelectResult = { activeIndex: number | undefined; handleSelection: (option: UseSelectOption) => void; handleClearValue: () => void; + /** + * @deprecated use toggleOpen + */ setOpen: (val?: boolean | undefined) => void; toggleOpen: (val?: boolean | undefined) => void; setActiveIndex: React.Dispatch>; diff --git a/src/hooks/useTimeout/index.ts b/src/hooks/useTimeout/index.ts index 5c2180ca3d..3b7f11c7cd 100644 --- a/src/hooks/useTimeout/index.ts +++ b/src/hooks/useTimeout/index.ts @@ -1 +1,2 @@ export {useTimeout} from './useTimeout'; +export type {UseTimeoutProps} from './useTimeout'; diff --git a/src/hooks/useTimeout/useTimeout.ts b/src/hooks/useTimeout/useTimeout.ts index d435cf4dde..da60d62d64 100644 --- a/src/hooks/useTimeout/useTimeout.ts +++ b/src/hooks/useTimeout/useTimeout.ts @@ -1,5 +1,9 @@ import React from 'react'; +export type UseTimeoutProps = Parameters< + (callback: VoidFunction, ms: number | null | undefined) => void +>; + export function useTimeout(callback: VoidFunction, ms: number | null | undefined): void { React.useEffect(() => { if (typeof ms !== 'number') {