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:
Charles Bochet
2024-03-09 11:31:00 +01:00
committed by GitHub
parent 17511be0cf
commit 86c0f311f5
451 changed files with 1718 additions and 2557 deletions
@@ -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,
});