-
Notifications
You must be signed in to change notification settings - Fork 99
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(onupdate): onUpdate cb that called every time visibleItems changed
- Loading branch information
1 parent
1100983
commit f4f5dd5
Showing
10 changed files
with
218 additions
and
37 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
import { renderHook } from '@testing-library/react-hooks'; | ||
import useOnUpdate from './useOnUpdate'; | ||
|
||
describe('useOnUpdate', () => { | ||
test('should fire cb when visibleItems changed', () => { | ||
const cb = jest.fn(); | ||
const visibleItems = ['it1', 'it2']; | ||
const visibleItems2 = ['it2', 'it3']; | ||
const condition = true; | ||
|
||
const { rerender } = renderHook(useOnUpdate, { | ||
initialProps: { cb, condition, visibleItems }, | ||
}); | ||
|
||
expect(cb).toHaveBeenCalledTimes(1); | ||
|
||
rerender(); | ||
expect(cb).toHaveBeenCalledTimes(1); | ||
|
||
rerender({ cb, condition, visibleItems: visibleItems2 }); | ||
expect(cb).toHaveBeenCalledTimes(2); | ||
|
||
rerender(); | ||
expect(cb).toHaveBeenCalledTimes(2); | ||
}); | ||
|
||
test('should fire cb only when condition is truthy', () => { | ||
const cb = jest.fn(); | ||
const visibleItems = ['it1', 'it2']; | ||
const visibleItems2 = ['it2', 'it3']; | ||
const condition = false; | ||
|
||
const { rerender } = renderHook(useOnUpdate, { | ||
initialProps: { cb, condition, visibleItems }, | ||
}); | ||
|
||
expect(cb).toHaveBeenCalledTimes(0); | ||
|
||
rerender(); | ||
expect(cb).toHaveBeenCalledTimes(0); | ||
|
||
rerender({ cb, condition, visibleItems: visibleItems2 }); | ||
expect(cb).toHaveBeenCalledTimes(0); | ||
|
||
rerender(); | ||
expect(cb).toHaveBeenCalledTimes(0); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
import React from 'react'; | ||
|
||
import usePrevious from './usePrevious'; | ||
|
||
import { visibleItems as visibleItemsType } from '../types'; | ||
|
||
interface Props { | ||
cb: () => void; | ||
condition: Boolean; | ||
visibleItems: visibleItemsType; | ||
} | ||
|
||
function useOnUpdate({ | ||
cb = () => void 0, | ||
condition, | ||
visibleItems, | ||
}: Props): void { | ||
const currentItemsHash = condition ? JSON.stringify(visibleItems) : ''; | ||
const prevItemsHash = usePrevious(currentItemsHash); | ||
|
||
React.useEffect(() => { | ||
if (condition && prevItemsHash !== currentItemsHash) { | ||
cb(); | ||
} | ||
// eslint-disable-next-line react-hooks/exhaustive-deps | ||
}, [condition, prevItemsHash, currentItemsHash]); | ||
} | ||
|
||
export default useOnUpdate; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
import { renderHook } from '@testing-library/react-hooks'; | ||
import usePrevious from './usePrevious'; | ||
|
||
describe('usePrevious', () => { | ||
test('should return previous value', () => { | ||
const values = ['test1', 'test2', 'test3']; | ||
|
||
const { result, rerender } = renderHook(usePrevious, { | ||
initialProps: values[0], | ||
}); | ||
expect(result.current).toEqual(undefined); | ||
|
||
rerender(); | ||
expect(result.current).toEqual(values[0]); | ||
|
||
rerender(values[1]); | ||
expect(result.current).toEqual(values[0]); | ||
|
||
rerender(values[2]); | ||
expect(result.current).toEqual(values[1]); | ||
|
||
rerender(values[2]); | ||
expect(result.current).toEqual(values[2]); | ||
|
||
rerender(values[2]); | ||
expect(result.current).toEqual(values[2]); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import React from 'react'; | ||
|
||
function usePrevious<T>(value: T) { | ||
const ref = React.useRef<T>(); | ||
|
||
React.useEffect(() => { | ||
ref.current = value; | ||
}, [value]); | ||
|
||
return ref.current; | ||
} | ||
|
||
export default usePrevious; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters