diff --git a/docs/useStateList.md b/docs/useStateList.md index d6e03e0ab5..21cf8f8d1b 100644 --- a/docs/useStateList.md +++ b/docs/useStateList.md @@ -12,14 +12,14 @@ import { useRef } from 'react'; const stateSet = ['first', 'second', 'third', 'fourth', 'fifth']; const Demo = () => { - const { state, prev, next, setStateAt, setState, currentIndex } = useStateList(stateSet); + const { state, prev, next, setStateAt, setState, currentIndex, isFirst, isLast } = useStateList(stateSet); const indexInput = useRef(null); const stateInput = useRef(null); return (
-        {state} [index: {currentIndex}]
+        {state} [index: {currentIndex}], [isFirst: {isFirst}], [isLast: {isLast}]
       

@@ -38,7 +38,7 @@ const Demo = () => { ## Reference ```ts -const { state, currentIndex, prev, next, setStateAt, setState } = useStateList(stateSet: T[] = []); +const { state, currentIndex, prev, next, setStateAt, setState, isFirst, isLast } = useStateList(stateSet: T[] = []); ``` If `stateSet` changed, became shorter than before and `currentIndex` left in shrunk gap - the last element of list will be taken as current. @@ -48,5 +48,7 @@ If `stateSet` changed, became shorter than before and `currentIndex` left in shr - **`prev()`**_`: void`_ — switches state to the previous one. If first element selected it will switch to the last one; - **`next()`**_`: void`_ — switches state to the next one. If last element selected it will switch to the first one; - **`setStateAt(newIndex: number)`**_`: void`_ — set the arbitrary state by index. Indexes are looped, and can be negative. -_4ex:_ if list contains 5 elements, attempt to set index 9 will bring use to the 5th element, in case of negative index it will start counting from the right, so -17 will bring us to the 4th element. + _4ex:_ if list contains 5 elements, attempt to set index 9 will bring use to the 5th element, in case of negative index it will start counting from the right, so -17 will bring us to the 4th element. - **`setState(state: T)`**_`: void`_ — set the arbitrary state value that exists in `stateSet`. _In case new state does not exists in `stateSet` an Error will be thrown._ +- **`isFirst`**_`: boolean`_ — `true` if current state is the first one. +- **`isLast`**_`: boolean`_ — `true` if current state is the last one. diff --git a/src/useStateList.ts b/src/useStateList.ts index 7e4d605cf6..748e317c8a 100644 --- a/src/useStateList.ts +++ b/src/useStateList.ts @@ -10,6 +10,8 @@ export interface UseStateListReturn { setState: (state: T) => void; next: () => void; prev: () => void; + isFirst: boolean; + isLast: boolean; } export default function useStateList(stateSet: T[] = []): UseStateListReturn { @@ -68,6 +70,8 @@ export default function useStateList(stateSet: T[] = []): UseStateListReturn< return { state: stateSet[index.current], currentIndex: index.current, + isFirst: index.current === 0, + isLast: index.current === stateSet.length - 1, ...actions, }; } diff --git a/stories/useStateList.story.tsx b/stories/useStateList.story.tsx index c33e1a2f41..938eb0d5b7 100644 --- a/stories/useStateList.story.tsx +++ b/stories/useStateList.story.tsx @@ -7,14 +7,15 @@ import ShowDocs from './util/ShowDocs'; const stateSet = ['first', 'second', 'third', 'fourth', 'fifth']; const Demo = () => { - const { state, prev, next, setStateAt, setState, currentIndex } = useStateList(stateSet); + const { state, prev, next, setStateAt, setState, currentIndex, isFirst, isLast } = + useStateList(stateSet); const indexInput = useRef(null); const stateInput = useRef(null); return (
-        {state} [index: {currentIndex}]
+        {state} [index: {currentIndex}], [isFirst: {isFirst}], [isLast: {isLast}]
       

diff --git a/tests/useStateList.test.ts b/tests/useStateList.test.ts index 95cb6f03c2..21e5641036 100644 --- a/tests/useStateList.test.ts +++ b/tests/useStateList.test.ts @@ -20,6 +20,8 @@ describe('useStateList', () => { next: expect.any(Function), setStateAt: expect.any(Function), setState: expect.any(Function), + isFirst: expect.any(Boolean), + isLast: expect.any(Boolean), }); }); @@ -27,6 +29,17 @@ describe('useStateList', () => { expect(getHook().result.current.state).toBe('a'); }); + it('should return isFirst on init', () => { + expect(getHook().result.current.isFirst).toBe(true); + }); + + it('should return isLast when on last state', () => { + const hook = getHook(); + act(() => hook.result.current.setStateAt(2)); + + expect(hook.result.current.isLast).toBe(true); + }); + describe('setState()', () => { it('should set state value if it exists in states list', () => { const hook = getHook();