Introduce ComponentState (#4386)
* Proof of concept ComponentState * Migrate to createState and createFamilyState * Refactor * Fix * Fix tests * Fix lint * Fix tests * Re-enable coverage
This commit is contained in:
+1
-1
@@ -24,7 +24,7 @@ describe('useListenScroll', () => {
|
||||
const { result } = renderHook(
|
||||
() => {
|
||||
useListenScroll({ scrollableRef: containerRef });
|
||||
const isScrolling = useRecoilValue(isScrollingState);
|
||||
const isScrolling = useRecoilValue(isScrollingState());
|
||||
|
||||
return { isScrolling };
|
||||
},
|
||||
|
||||
@@ -13,7 +13,7 @@ export const useListenScroll = <T extends Element>({
|
||||
scrollableRef: React.RefObject<T>;
|
||||
}) => {
|
||||
const hideScrollBarsCallback = useRecoilCallback(({ snapshot }) => () => {
|
||||
const isScrolling = snapshot.getLoadable(isScrollingState).getValue();
|
||||
const isScrolling = snapshot.getLoadable(isScrollingState()).getValue();
|
||||
|
||||
if (!isScrolling) {
|
||||
scrollableRef.current?.classList.remove('scrolling');
|
||||
@@ -21,17 +21,17 @@ export const useListenScroll = <T extends Element>({
|
||||
});
|
||||
|
||||
const handleScrollStart = useRecoilCallback(({ set }) => (event: Event) => {
|
||||
set(isScrollingState, true);
|
||||
set(isScrollingState(), true);
|
||||
scrollableRef.current?.classList.add('scrolling');
|
||||
|
||||
const target = event.target as HTMLElement;
|
||||
|
||||
set(scrollTopState, target.scrollTop);
|
||||
set(scrollLeftState, target.scrollLeft);
|
||||
set(scrollTopState(), target.scrollTop);
|
||||
set(scrollLeftState(), target.scrollLeft);
|
||||
});
|
||||
|
||||
const handleScrollEnd = useRecoilCallback(({ set }) => () => {
|
||||
set(isScrollingState, false);
|
||||
set(isScrollingState(), false);
|
||||
debounce(hideScrollBarsCallback, 1000)();
|
||||
});
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { atom } from 'recoil';
|
||||
import { createState } from '@/ui/utilities/state/utils/createState';
|
||||
|
||||
export const isScrollingState = atom({
|
||||
export const isScrollingState = createState({
|
||||
key: 'scroll/isScollingState',
|
||||
default: false,
|
||||
defaultValue: false,
|
||||
});
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { atom } from 'recoil';
|
||||
import { createState } from '@/ui/utilities/state/utils/createState';
|
||||
|
||||
export const scrollLeftState = atom<number>({
|
||||
export const scrollLeftState = createState<number>({
|
||||
key: 'scroll/scrollLeftState',
|
||||
default: 0,
|
||||
defaultValue: 0,
|
||||
});
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { atom } from 'recoil';
|
||||
import { createState } from '@/ui/utilities/state/utils/createState';
|
||||
|
||||
export const scrollTopState = atom<number>({
|
||||
export const scrollTopState = createState<number>({
|
||||
key: 'scroll/scrollTopState',
|
||||
default: 0,
|
||||
defaultValue: 0,
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user