@codeleap/web 7.0.1 → 7.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/List/elements.d.ts.map +1 -1
- package/dist/components/List/elements.js +26 -9
- package/dist/components/List/elements.js.map +1 -1
- package/dist/components/List/index.d.ts.map +1 -1
- package/dist/components/List/index.js +2 -2
- package/dist/components/List/index.js.map +1 -1
- package/dist/components/List/scroll.d.ts.map +1 -1
- package/dist/components/List/scroll.js +7 -2
- package/dist/components/List/scroll.js.map +1 -1
- package/dist/components/List/types.d.ts +13 -4
- package/dist/components/List/types.d.ts.map +1 -1
- package/dist/components/List/useScrollEdgeDetection.d.ts +12 -0
- package/dist/components/List/useScrollEdgeDetection.d.ts.map +1 -0
- package/dist/components/List/useScrollEdgeDetection.js +37 -0
- package/dist/components/List/useScrollEdgeDetection.js.map +1 -0
- package/dist/components/PaginationIndicator/ImperativePaginationIndicator.d.ts +13 -0
- package/dist/components/PaginationIndicator/ImperativePaginationIndicator.d.ts.map +1 -0
- package/dist/components/PaginationIndicator/ImperativePaginationIndicator.js +20 -0
- package/dist/components/PaginationIndicator/ImperativePaginationIndicator.js.map +1 -0
- package/dist/components/PaginationIndicator/index.d.ts +1 -0
- package/dist/components/PaginationIndicator/index.d.ts.map +1 -1
- package/dist/components/PaginationIndicator/index.js +1 -0
- package/dist/components/PaginationIndicator/index.js.map +1 -1
- package/dist/components/PaginationIndicator/types.d.ts +9 -0
- package/dist/components/PaginationIndicator/types.d.ts.map +1 -1
- package/dist/components/Touchable/index.js +2 -1
- package/dist/components/Touchable/index.js.map +1 -1
- package/package.json +17 -17
- package/src/components/List/elements.tsx +35 -13
- package/src/components/List/index.tsx +12 -4
- package/src/components/List/scroll.ts +8 -3
- package/src/components/List/types.ts +13 -4
- package/src/components/List/useScrollEdgeDetection.ts +59 -0
- package/src/components/PaginationIndicator/ImperativePaginationIndicator.tsx +35 -0
- package/src/components/PaginationIndicator/index.tsx +1 -0
- package/src/components/PaginationIndicator/types.ts +11 -0
- package/src/components/Touchable/index.tsx +2 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../src/components/List/elements.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAQ,SAAS,EAAE,MAAM,SAAS,CAAA;AAEzC,OAAO,EAAuC,QAAQ,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../src/components/List/elements.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAQ,SAAS,EAAE,MAAM,SAAS,CAAA;AAEzC,OAAO,EAAuC,QAAQ,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAGvF;;;GAGG;AACH,eAAO,MAAM,WAAW,GAAI,4BAA4B,SAAS,qDAOhE,CAAA;AAoHD;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,QAAQ,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,2DAIrE;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,4BAA4B,SAAS,qDAO/D,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,4BAA4B,SAAS,4DAa/D,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe,+DAK3B,CAAA"}
|
|
@@ -4,6 +4,7 @@ import { useMasonry, usePositioner, useResizeObserver, useInfiniteLoader, useScr
|
|
|
4
4
|
import { TypeGuards } from '@codeleap/types';
|
|
5
5
|
import { View } from '../View';
|
|
6
6
|
import { useListContext } from './context';
|
|
7
|
+
import { useScrollEdgeDetection } from './useScrollEdgeDetection';
|
|
7
8
|
/**
|
|
8
9
|
* Outer `View` that measures its own dimensions for the Masonic positioner via a `ResizeObserver`.
|
|
9
10
|
* Must be rendered inside `List.Provider`; forwards extra `ViewProps` to the underlying `View`.
|
|
@@ -12,11 +13,16 @@ export const ListWrapper = ({ children, ...viewProps }) => {
|
|
|
12
13
|
const { wrapperRef, styles, padding } = useListContext();
|
|
13
14
|
return (_jsx(View, { ...viewProps, css: [styles.wrapper, padding, viewProps.css], ref: wrapperRef, children: children }));
|
|
14
15
|
};
|
|
15
|
-
function _ListItemsContent({ data, renderItem: providedRenderItem,
|
|
16
|
+
function _ListItemsContent({ data, renderItem: providedRenderItem, infiniteLoaderCallback: itemsInfiniteLoaderCallback, hasMore: itemsHasMore, onEndReached: itemsOnEndReached, onEndReachedThreshold: itemsOnEndReachedThreshold, onStartReached: itemsOnStartReached, onStartReachedThreshold: itemsOnStartReachedThreshold, ref, }) {
|
|
16
17
|
const { wrapperRef, wrapperLayout, scrollHook, styles, props, padding } = useListContext();
|
|
17
|
-
const
|
|
18
|
-
const
|
|
19
|
-
const
|
|
18
|
+
const infiniteLoaderCallback = itemsInfiniteLoaderCallback ?? props.infiniteLoaderCallback;
|
|
19
|
+
const hasMore = itemsHasMore ?? props.hasMore;
|
|
20
|
+
const onEndReached = itemsOnEndReached ?? props.onEndReached;
|
|
21
|
+
const onEndReachedThreshold = itemsOnEndReachedThreshold ?? props.onEndReachedThreshold;
|
|
22
|
+
const onStartReached = itemsOnStartReached ?? props.onStartReached;
|
|
23
|
+
const onStartReachedThreshold = itemsOnStartReachedThreshold ?? props.onStartReachedThreshold;
|
|
24
|
+
const useScrollBasedLoading = !!onEndReached || !!onStartReached;
|
|
25
|
+
const { scrollTop, scrollHeight, isScrolling, height, width, scrollElement } = scrollHook(wrapperRef, wrapperLayout);
|
|
20
26
|
const innerWidth = width - padding.paddingLeft - padding.paddingRight;
|
|
21
27
|
const stylePositioner = styles.positioner ?? {};
|
|
22
28
|
const positionerConfig = {
|
|
@@ -38,11 +44,22 @@ function _ListItemsContent({ data, renderItem: providedRenderItem, fetchNextPage
|
|
|
38
44
|
scrollToIndexFn(index);
|
|
39
45
|
},
|
|
40
46
|
}), [scrollToIndexFn]);
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
47
|
+
useScrollEdgeDetection({
|
|
48
|
+
scrollTop,
|
|
49
|
+
scrollHeight,
|
|
50
|
+
clientHeight: height,
|
|
51
|
+
onEndReached,
|
|
52
|
+
onEndReachedThreshold,
|
|
53
|
+
onStartReached,
|
|
54
|
+
onStartReachedThreshold,
|
|
55
|
+
});
|
|
56
|
+
const maybeLoadMore = useInfiniteLoader(useScrollBasedLoading
|
|
57
|
+
? async () => { }
|
|
58
|
+
: async () => { if (hasMore)
|
|
59
|
+
infiniteLoaderCallback?.(); }, {
|
|
45
60
|
isItemLoaded: (index, items) => !!items?.[index],
|
|
61
|
+
minimumBatchSize: 10,
|
|
62
|
+
threshold: 4,
|
|
46
63
|
...props.infiniteLoaderProps,
|
|
47
64
|
});
|
|
48
65
|
const separator = useMemo(() => {
|
|
@@ -74,7 +91,7 @@ function _ListItemsContent({ data, renderItem: providedRenderItem, fetchNextPage
|
|
|
74
91
|
isScrolling,
|
|
75
92
|
items: data ?? [],
|
|
76
93
|
render: wrappedRenderItem,
|
|
77
|
-
onRender: maybeLoadMore,
|
|
94
|
+
onRender: useScrollBasedLoading ? undefined : maybeLoadMore,
|
|
78
95
|
});
|
|
79
96
|
}
|
|
80
97
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"elements.js","sourceRoot":"","sources":["../../../src/components/List/elements.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,mBAAmB,EAAE,OAAO,
|
|
1
|
+
{"version":3,"file":"elements.js","sourceRoot":"","sources":["../../../src/components/List/elements.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/List/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAA;AAGxE,OAAO,EAAe,SAAS,EAA2C,MAAM,YAAY,CAAA;AAC5F,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAE7C,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AAExB;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,QAAQ,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/List/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAA;AAGxE,OAAO,EAAe,SAAS,EAA2C,MAAM,YAAY,CAAA;AAC5F,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAE7C,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AAExB;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,QAAQ,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,oDA+B3D;yBA/Be,IAAI;;;;;;;;;;2BA4CK,CAAC,SAAS,SAAS,UAAU,CAAC,KACtC,CAAC,CAAC,SAAS,QAAQ,EAAE,KAAK,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,OAAO,MAAM,CAAC,KAAK,IAAI"}
|
|
@@ -13,8 +13,8 @@ export * from './scroll';
|
|
|
13
13
|
* Uses: `List.Provider`, `List.Wrapper`, `List.Items`, `List.Footer`, `List.Placeholder`
|
|
14
14
|
*/
|
|
15
15
|
export function List(props) {
|
|
16
|
-
const { data, renderItem,
|
|
17
|
-
return (_jsx(ListProvider, { ...providerProps, children: _jsxs(ListWrapper, { children: [_jsx(ListPlaceholder, {}), _jsx(ListItems, { data: data, renderItem: renderItem,
|
|
16
|
+
const { data, renderItem, infiniteLoaderCallback, hasMore, onEndReached, onEndReachedThreshold, onStartReached, onStartReachedThreshold, ...providerProps } = { ...List.defaultProps, ...props };
|
|
17
|
+
return (_jsx(ListProvider, { ...providerProps, children: _jsxs(ListWrapper, { children: [_jsx(ListPlaceholder, {}), _jsx(ListItems, { data: data, renderItem: renderItem, infiniteLoaderCallback: infiniteLoaderCallback, hasMore: hasMore, onEndReached: onEndReached, onEndReachedThreshold: onEndReachedThreshold, onStartReached: onStartReached, onStartReachedThreshold: onStartReachedThreshold }), _jsx(ListFooter, {})] }) }));
|
|
18
18
|
}
|
|
19
19
|
List.Provider = ListProvider;
|
|
20
20
|
List.Wrapper = ListWrapper;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/List/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAG5F,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AAExB;;;;GAIG;AACH,MAAM,UAAU,IAAI,CAAqB,KAAmB;IAC1D,MAAM,EACJ,IAAI,EACJ,UAAU,EACV,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/List/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAG5F,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AAExB;;;;GAIG;AACH,MAAM,UAAU,IAAI,CAAqB,KAAmB;IAC1D,MAAM,EACJ,IAAI,EACJ,UAAU,EACV,sBAAsB,EACtB,OAAO,EACP,YAAY,EACZ,qBAAqB,EACrB,cAAc,EACd,uBAAuB,EACvB,GAAG,aAAa,EACjB,GAAG,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE,GAAG,KAAK,EAAkB,CAAA;IAEtD,OAAO,CACL,KAAC,YAAY,OAAK,aAAa,YAC7B,MAAC,WAAW,eACV,KAAC,eAAe,KAAG,EACnB,KAAC,SAAS,IACR,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,sBAAsB,EAAE,sBAAsB,EAC9C,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,qBAAqB,EAAE,qBAAqB,EAC5C,cAAc,EAAE,cAAc,EAC9B,uBAAuB,EAAE,uBAAuB,GAChD,EACF,KAAC,UAAU,KAAG,IACF,GACD,CAChB,CAAA;AACH,CAAC;AAED,IAAI,CAAC,QAAQ,GAAG,YAAY,CAAA;AAC5B,IAAI,CAAC,OAAO,GAAG,WAAW,CAAA;AAC1B,IAAI,CAAC,KAAK,GAAG,SAAS,CAAA;AACtB,IAAI,CAAC,MAAM,GAAG,UAAU,CAAA;AACxB,IAAI,CAAC,MAAM,GAAG,UAAU,CAAA;AACxB,IAAI,CAAC,WAAW,GAAG,eAAe,CAAA;AAElC,IAAI,CAAC,iBAAiB,GAAG,MAAM,CAAA;AAC/B,IAAI,CAAC,QAAQ,GAAG,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,CAAC,CAAA;AACjG,IAAI,CAAC,WAAW,GAAG,SAAS,CAAA;AAE5B,IAAI,CAAC,gBAAgB,GAAG,CAAsB,MAAS,EAAE,EAAE;IACzD,OAAO,IAA8F,CAAA;AACvG,CAAC,CAAA;AAED,IAAI,CAAC,YAAY,GAAG;IAClB,UAAU,EAAE,IAAI;CACe,CAAA;AAEjC,gBAAgB,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scroll.d.ts","sourceRoot":"","sources":["../../../src/components/List/scroll.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,iBAAiB,EAAqB,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"scroll.d.ts","sourceRoot":"","sources":["../../../src/components/List/scroll.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,iBAAiB,EAAqB,MAAM,SAAS,CAAA;AA2C9D;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE,iBAU9B,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,iBAc7B,CAAA"}
|
|
@@ -5,6 +5,7 @@ import { useWindowSize } from '../../lib/hooks/useWindowSize';
|
|
|
5
5
|
function useElementScroller(ref) {
|
|
6
6
|
const [isScrolling, setIsScrolling] = useState(false);
|
|
7
7
|
const [scrollTop, setScrollTop] = useState(0);
|
|
8
|
+
const [scrollHeight, setScrollHeight] = useState(0);
|
|
8
9
|
useIsomorphicEffect(() => {
|
|
9
10
|
if (typeof window === 'undefined')
|
|
10
11
|
return;
|
|
@@ -16,6 +17,7 @@ function useElementScroller(ref) {
|
|
|
16
17
|
return;
|
|
17
18
|
tick = window.requestAnimationFrame(() => {
|
|
18
19
|
setScrollTop(current.scrollTop);
|
|
20
|
+
setScrollHeight(current.scrollHeight);
|
|
19
21
|
tick = void 0;
|
|
20
22
|
});
|
|
21
23
|
};
|
|
@@ -37,7 +39,7 @@ function useElementScroller(ref) {
|
|
|
37
39
|
}, 1000 / 6);
|
|
38
40
|
return () => window.clearTimeout(to);
|
|
39
41
|
}, [scrollTop]);
|
|
40
|
-
return { scrollTop, isScrolling };
|
|
42
|
+
return { scrollTop, scrollHeight, isScrolling };
|
|
41
43
|
}
|
|
42
44
|
/**
|
|
43
45
|
* `UseListScrollHook` implementation that tracks scroll position on a specific container element.
|
|
@@ -45,9 +47,10 @@ function useElementScroller(ref) {
|
|
|
45
47
|
* This is the default scroll hook; override via `ListProviderProps.scrollHook` or set `windowScroll` to switch to `useWindowScroll`.
|
|
46
48
|
*/
|
|
47
49
|
export const useElementScroll = (wrapperRef, layout) => {
|
|
48
|
-
const { scrollTop, isScrolling } = useElementScroller(wrapperRef);
|
|
50
|
+
const { scrollTop, scrollHeight, isScrolling } = useElementScroller(wrapperRef);
|
|
49
51
|
return {
|
|
50
52
|
scrollTop,
|
|
53
|
+
scrollHeight,
|
|
51
54
|
isScrolling,
|
|
52
55
|
height: layout?.offsetHeight ?? 0,
|
|
53
56
|
width: layout?.width ?? 0,
|
|
@@ -64,8 +67,10 @@ export const useWindowScroll = (wrapperRef, layout) => {
|
|
|
64
67
|
const windowHeight = windowSize[1];
|
|
65
68
|
const { offset } = useContainerPosition(wrapperRef, windowSize);
|
|
66
69
|
const { scrollTop, isScrolling } = useMasonicScroller(offset);
|
|
70
|
+
const scrollHeight = typeof document !== 'undefined' ? document.documentElement.scrollHeight : 0;
|
|
67
71
|
return {
|
|
68
72
|
scrollTop,
|
|
73
|
+
scrollHeight,
|
|
69
74
|
isScrolling,
|
|
70
75
|
height: windowHeight,
|
|
71
76
|
width: layout?.width ?? 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scroll.js","sourceRoot":"","sources":["../../../src/components/List/scroll.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,EACL,oBAAoB,EACpB,WAAW,IAAI,kBAAkB,GAClC,MAAM,SAAS,CAAA;AAChB,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAA;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAG7D,SAAS,kBAAkB,CAAC,GAAiC;IAC3D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACrD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"scroll.js","sourceRoot":"","sources":["../../../src/components/List/scroll.ts"],"names":[],"mappings":"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"}
|
|
@@ -37,6 +37,7 @@ export type ListWrapperLayout = {
|
|
|
37
37
|
*/
|
|
38
38
|
export type UseListScrollHook = (wrapperRef: React.RefObject<HTMLElement>, wrapperLayout: ListWrapperLayout | null) => {
|
|
39
39
|
scrollTop: number;
|
|
40
|
+
scrollHeight: number;
|
|
40
41
|
isScrolling: boolean;
|
|
41
42
|
height: number;
|
|
42
43
|
width: number;
|
|
@@ -58,9 +59,13 @@ export type ListHandle = {
|
|
|
58
59
|
export type ListProviderProps = Partial<ListPositionerConfig> & ListPaddingProps & {
|
|
59
60
|
scrollHook?: UseListScrollHook;
|
|
60
61
|
windowScroll?: boolean;
|
|
61
|
-
|
|
62
|
-
|
|
62
|
+
infiniteLoaderCallback?: () => void;
|
|
63
|
+
hasMore?: boolean;
|
|
63
64
|
infiniteLoaderProps?: UseInfiniteLoaderOptions<unknown>;
|
|
65
|
+
onEndReached?: () => void;
|
|
66
|
+
onEndReachedThreshold?: number;
|
|
67
|
+
onStartReached?: () => void;
|
|
68
|
+
onStartReachedThreshold?: number;
|
|
64
69
|
separators?: boolean;
|
|
65
70
|
ItemSeparatorComponent?: React.ReactElement;
|
|
66
71
|
style?: StyleProp<ListComposition, keyof ListStyleDef>;
|
|
@@ -74,8 +79,12 @@ export type ListProviderProps = Partial<ListPositionerConfig> & ListPaddingProps
|
|
|
74
79
|
export type ListItemsProps<T extends ListItem> = {
|
|
75
80
|
data: T[];
|
|
76
81
|
renderItem: (data: AugmentedRenderItemInfo<T>) => React.ReactElement;
|
|
77
|
-
|
|
78
|
-
|
|
82
|
+
infiniteLoaderCallback?: () => void;
|
|
83
|
+
hasMore?: boolean;
|
|
84
|
+
onEndReached?: () => void;
|
|
85
|
+
onEndReachedThreshold?: number;
|
|
86
|
+
onStartReached?: () => void;
|
|
87
|
+
onStartReachedThreshold?: number;
|
|
79
88
|
ref?: React.Ref<ListHandle>;
|
|
80
89
|
};
|
|
81
90
|
export type ListProps<T extends ListItem> = ListProviderProps & ListItemsProps<T>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/List/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAC5C,OAAO,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAC9F,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE1C,uGAAuG;AACvG,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,oBAAoB,EAC1D,aAAa,GAAG,cAAc,GAAG,aAAa,GAAG,gBAAgB,GAAG,gBAAgB,GAAG,WAAW,CACnG,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,MAAM,WAAW,YAAa,SAAQ,OAAO,CAAC,oBAAoB,CAAC,EAAE,gBAAgB;CAAG;AAExF,yGAAyG;AACzG,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CACpB,CAAA;AAED,6HAA6H;AAC7H,MAAM,MAAM,uBAAuB,CAAC,CAAC,IAAI,oBAAoB,CAAC,CAAC,CAAC,GAAG;IACjE,IAAI,EAAE,CAAC,CAAA;IACP,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,OAAO,CAAA;IACf,MAAM,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAAE,CAAA;AAEvE;;;;GAIG;AACH,MAAM,MAAM,iBAAiB,GAAG,CAC9B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EACxC,aAAa,EAAE,iBAAiB,GAAG,IAAI,KACpC;IACH,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,OAAO,CAAA;IACpB,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,IAAI,CAAA;CAC5D,CAAA;AAED,oGAAoG;AACpG,MAAM,MAAM,UAAU,GAAG;IACvB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAA;KAAE,KAAK,IAAI,CAAA;CAC1F,CAAA;AAED;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC,oBAAoB,CAAC,GAAG,gBAAgB,GAAG;IACjF,UAAU,CAAC,EAAE,iBAAiB,CAAA;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/List/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
type UseScrollEdgeDetectionOptions = {
|
|
2
|
+
scrollTop: number;
|
|
3
|
+
scrollHeight: number;
|
|
4
|
+
clientHeight: number;
|
|
5
|
+
onEndReached?: () => void;
|
|
6
|
+
onEndReachedThreshold?: number;
|
|
7
|
+
onStartReached?: () => void;
|
|
8
|
+
onStartReachedThreshold?: number;
|
|
9
|
+
};
|
|
10
|
+
export declare function useScrollEdgeDetection(options: UseScrollEdgeDetectionOptions): void;
|
|
11
|
+
export {};
|
|
12
|
+
//# sourceMappingURL=useScrollEdgeDetection.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useScrollEdgeDetection.d.ts","sourceRoot":"","sources":["../../../src/components/List/useScrollEdgeDetection.ts"],"names":[],"mappings":"AAEA,KAAK,6BAA6B,GAAG;IACnC,SAAS,EAAE,MAAM,CAAA;IACjB,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAA;CACjC,CAAA;AAID,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,6BAA6B,QA4C5E"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { useEffect, useRef } from 'react';
|
|
2
|
+
const DEFAULT_THRESHOLD = 0.5;
|
|
3
|
+
export function useScrollEdgeDetection(options) {
|
|
4
|
+
const { scrollTop, scrollHeight, clientHeight, onEndReached, onEndReachedThreshold = DEFAULT_THRESHOLD, onStartReached, onStartReachedThreshold = DEFAULT_THRESHOLD, } = options;
|
|
5
|
+
const hasFiredEnd = useRef(false);
|
|
6
|
+
const hasFiredStart = useRef(false);
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
if (clientHeight <= 0 || scrollHeight <= 0)
|
|
9
|
+
return;
|
|
10
|
+
if (onEndReached) {
|
|
11
|
+
const distanceFromEnd = scrollHeight - scrollTop - clientHeight;
|
|
12
|
+
const endThreshold = clientHeight * onEndReachedThreshold;
|
|
13
|
+
if (distanceFromEnd <= endThreshold) {
|
|
14
|
+
if (!hasFiredEnd.current) {
|
|
15
|
+
hasFiredEnd.current = true;
|
|
16
|
+
onEndReached();
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
else {
|
|
20
|
+
hasFiredEnd.current = false;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
if (onStartReached) {
|
|
24
|
+
const startThreshold = clientHeight * onStartReachedThreshold;
|
|
25
|
+
if (scrollTop <= startThreshold) {
|
|
26
|
+
if (!hasFiredStart.current) {
|
|
27
|
+
hasFiredStart.current = true;
|
|
28
|
+
onStartReached();
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
else {
|
|
32
|
+
hasFiredStart.current = false;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}, [scrollTop, scrollHeight, clientHeight, onEndReached, onEndReachedThreshold, onStartReached, onStartReachedThreshold]);
|
|
36
|
+
}
|
|
37
|
+
//# sourceMappingURL=useScrollEdgeDetection.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useScrollEdgeDetection.js","sourceRoot":"","sources":["../../../src/components/List/useScrollEdgeDetection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAYzC,MAAM,iBAAiB,GAAG,GAAG,CAAA;AAE7B,MAAM,UAAU,sBAAsB,CAAC,OAAsC;IAC3E,MAAM,EACJ,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,qBAAqB,GAAG,iBAAiB,EACzC,cAAc,EACd,uBAAuB,GAAG,iBAAiB,GAC5C,GAAG,OAAO,CAAA;IAEX,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IACjC,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAEnC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,IAAI,CAAC,IAAI,YAAY,IAAI,CAAC;YAAE,OAAM;QAElD,IAAI,YAAY,EAAE,CAAC;YACjB,MAAM,eAAe,GAAG,YAAY,GAAG,SAAS,GAAG,YAAY,CAAA;YAC/D,MAAM,YAAY,GAAG,YAAY,GAAG,qBAAqB,CAAA;YAEzD,IAAI,eAAe,IAAI,YAAY,EAAE,CAAC;gBACpC,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;oBACzB,WAAW,CAAC,OAAO,GAAG,IAAI,CAAA;oBAC1B,YAAY,EAAE,CAAA;gBAChB,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,WAAW,CAAC,OAAO,GAAG,KAAK,CAAA;YAC7B,CAAC;QACH,CAAC;QAED,IAAI,cAAc,EAAE,CAAC;YACnB,MAAM,cAAc,GAAG,YAAY,GAAG,uBAAuB,CAAA;YAE7D,IAAI,SAAS,IAAI,cAAc,EAAE,CAAC;gBAChC,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;oBAC3B,aAAa,CAAC,OAAO,GAAG,IAAI,CAAA;oBAC5B,cAAc,EAAE,CAAA;gBAClB,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,aAAa,CAAC,OAAO,GAAG,KAAK,CAAA;YAC/B,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,qBAAqB,EAAE,cAAc,EAAE,uBAAuB,CAAC,CAAC,CAAA;AAC3H,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PaginationIndicatorHandle, PaginationIndicatorProps, PaginationIndicatorState } from './types';
|
|
3
|
+
type ImperativePaginationIndicatorProps = Omit<PaginationIndicatorProps, 'isFetching' | 'hasMore' | 'noMoreItemsText'> & {
|
|
4
|
+
initialState?: PaginationIndicatorState;
|
|
5
|
+
ref?: React.Ref<PaginationIndicatorHandle>;
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* Self-contained pagination indicator that manages its own render state.
|
|
9
|
+
* The parent pushes updates via the ref handle instead of passing reactive props, avoiding full tree re-renders.
|
|
10
|
+
*/
|
|
11
|
+
export declare const ImperativePaginationIndicator: (props: ImperativePaginationIndicatorProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
12
|
+
export {};
|
|
13
|
+
//# sourceMappingURL=ImperativePaginationIndicator.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ImperativePaginationIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/PaginationIndicator/ImperativePaginationIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAA;AAE5D,OAAO,EAAE,yBAAyB,EAAE,wBAAwB,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAEvG,KAAK,kCAAkC,GAAG,IAAI,CAAC,wBAAwB,EAAE,YAAY,GAAG,SAAS,GAAG,iBAAiB,CAAC,GAAG;IACvH,YAAY,CAAC,EAAE,wBAAwB,CAAA;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAA;CAC3C,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,6BAA6B,GAAI,OAAO,kCAAkC,qDAqBtF,CAAA"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { useState, useImperativeHandle } from 'react';
|
|
3
|
+
import { PaginationIndicator } from './index';
|
|
4
|
+
/**
|
|
5
|
+
* Self-contained pagination indicator that manages its own render state.
|
|
6
|
+
* The parent pushes updates via the ref handle instead of passing reactive props, avoiding full tree re-renders.
|
|
7
|
+
*/
|
|
8
|
+
export const ImperativePaginationIndicator = (props) => {
|
|
9
|
+
const { initialState, ref, ...rest } = props;
|
|
10
|
+
const [state, setState] = useState({
|
|
11
|
+
isFetching: false,
|
|
12
|
+
hasMore: true,
|
|
13
|
+
...initialState,
|
|
14
|
+
});
|
|
15
|
+
useImperativeHandle(ref, () => ({
|
|
16
|
+
update: (next) => setState(prev => ({ ...prev, ...next })),
|
|
17
|
+
}), []);
|
|
18
|
+
return (_jsx(PaginationIndicator, { ...rest, isFetching: state.isFetching, hasMore: state.hasMore, noMoreItemsText: state.noMoreItemsText }));
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=ImperativePaginationIndicator.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ImperativePaginationIndicator.js","sourceRoot":"","sources":["../../../src/components/PaginationIndicator/ImperativePaginationIndicator.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAQ7C;;;GAGG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,KAAyC,EAAE,EAAE;IACzF,MAAM,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IAE5C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAA2B;QAC3D,UAAU,EAAE,KAAK;QACjB,OAAO,EAAE,IAAI;QACb,GAAG,YAAY;KAChB,CAAC,CAAA;IAEF,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,EAAE,CAAC,CAAC;KAC3D,CAAC,EAAE,EAAE,CAAC,CAAA;IAEP,OAAO,CACL,KAAC,mBAAmB,OACd,IAAI,EACR,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,eAAe,EAAE,KAAK,CAAC,eAAe,GACtC,CACH,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -2,6 +2,7 @@ import { PaginationIndicatorProps } from './types';
|
|
|
2
2
|
import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles';
|
|
3
3
|
export * from './styles';
|
|
4
4
|
export * from './types';
|
|
5
|
+
export { ImperativePaginationIndicator } from './ImperativePaginationIndicator';
|
|
5
6
|
/**
|
|
6
7
|
* Status indicator placed at the bottom of a paginated or infinite-scroll list — shows a spinner while fetching, a "no more items" message when exhausted, or nothing otherwise.
|
|
7
8
|
* Uses: `ActivityIndicator`, `Text`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PaginationIndicator/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAElD,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,oBAAoB,EAAwB,MAAM,kBAAkB,CAAA;AAE9F,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PaginationIndicator/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAElD,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,oBAAoB,EAAwB,MAAM,kBAAkB,CAAA;AAE9F,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAA;AAE/E;;;GAGG;AACH,eAAO,MAAM,mBAAmB;YAAW,wBAAwB;;;;qBAiD3B,CAAC,SAAS,SAAS,UAAU,CAAC,GACtC,CAAC,KAAK,EAAE,oBAAoB,CAAC,wBAAwB,EAAE,OAAO,MAAM,CAAC,KAAK,IAAI;;CAP7G,CAAA"}
|
|
@@ -8,6 +8,7 @@ import { WebStyleRegistry } from '../../lib/WebStyleRegistry';
|
|
|
8
8
|
import { useNestedStylesByKey } from '@codeleap/styles';
|
|
9
9
|
export * from './styles';
|
|
10
10
|
export * from './types';
|
|
11
|
+
export { ImperativePaginationIndicator } from './ImperativePaginationIndicator';
|
|
11
12
|
/**
|
|
12
13
|
* Status indicator placed at the bottom of a paginated or infinite-scroll list — shows a spinner while fetching, a "no more items" message when exhausted, or nothing otherwise.
|
|
13
14
|
* Uses: `ActivityIndicator`, `Text`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PaginationIndicator/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAE3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAO,EAAyC,oBAAoB,EAAE,MAAM,kBAAkB,CAAA;AAE9F,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PaginationIndicator/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAE3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAO,EAAyC,oBAAoB,EAAE,MAAM,kBAAkB,CAAA;AAE9F,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAA;AAE/E;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAA+B,EAAE,EAAE;IACrE,MAAM,EACJ,OAAO,EACP,UAAU,EACV,eAAe,EACf,iBAAiB,EACjB,KAAK,EACL,cAAc,EACd,SAAS,GACV,GAAG;QACF,GAAG,mBAAmB,CAAC,YAAY;QACnC,GAAG,KAAK;KACT,CAAA;IAED,MAAM,MAAM,GAAG,YAAY,CAAC,mBAAmB,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAA;IAEzE,MAAM,YAAY,GAAG,oBAAoB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;IAE3D,IAAI,UAAU,EAAE,CAAC;QACf,OAAO,iBAAiB,IAAI,CAC1B,KAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,OAAO,YACzB,KAAC,iBAAiB,IAAC,SAAS,EAAE,SAAS,KAAM,cAAc,EAAE,KAAK,EAAE,YAAY,GAAI,GAC/E,CACR,CAAA;IACH,CAAC;IAED,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,IAAI,UAAU,CAAC,QAAQ,CAAC,eAAe,CAAC,IAAI,UAAU,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC;YACjF,OAAO,CACL,KAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,OAAO,YACzB,KAAC,IAAI,IACH,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,MAAM,CAAC,IAAI,EAClB,IAAI,EAAE,MAAM,CAAC,eAAe,CAAC,GAC7B,GACG,CACR,CAAA;QACH,CAAC;QAED,OAAO,eAAe,CAAA;IACxB,CAAC;IAED,OAAO,IAAI,CAAA;AACb,CAAC,CAAA;AAED,mBAAmB,CAAC,iBAAiB,GAAG,qBAAqB,CAAA;AAC7D,mBAAmB,CAAC,QAAQ,GAAG,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAA;AAC5D,mBAAmB,CAAC,WAAW,GAAG,SAAS,CAAA;AAE3C,mBAAmB,CAAC,gBAAgB,GAAG,CAAsB,MAAS,EAAE,EAAE;IACxE,OAAO,mBAAqG,CAAA;AAC9G,CAAC,CAAA;AAED,mBAAmB,CAAC,YAAY,GAAG,EAAuC,CAAA;AAE1E,gBAAgB,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAAA"}
|
|
@@ -4,6 +4,15 @@ import { TextProps } from '../Text';
|
|
|
4
4
|
import { ComponentCommonProps } from '../../types';
|
|
5
5
|
import { PaginationIndicatorComposition } from './styles';
|
|
6
6
|
import { StyleProp } from '@codeleap/styles';
|
|
7
|
+
export type PaginationIndicatorState = {
|
|
8
|
+
isFetching?: boolean;
|
|
9
|
+
hasMore?: boolean;
|
|
10
|
+
noMoreItemsText?: React.ReactElement | string | number;
|
|
11
|
+
};
|
|
12
|
+
/** Imperative handle for updating a `PaginationIndicator` without re-rendering its parent. */
|
|
13
|
+
export type PaginationIndicatorHandle = {
|
|
14
|
+
update: (state: PaginationIndicatorState) => void;
|
|
15
|
+
};
|
|
7
16
|
export interface PaginationIndicatorStyleDef {
|
|
8
17
|
}
|
|
9
18
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/PaginationIndicator/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAA;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACnC,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,EAAE,8BAA8B,EAAE,MAAM,UAAU,CAAA;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAE5C,MAAM,WAAW,2BAA2B;CAAG;AAE/C;;;;;GAKG;AACH,MAAM,MAAM,wBAAwB,GAClC,oBAAoB,GACpB;IACE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,eAAe,EAAE,KAAK,CAAC,YAAY,GAAG,MAAM,GAAG,MAAM,CAAA;IACrD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAA;IACtC,KAAK,CAAC,EAAE,SAAS,CAAC,8BAA8B,EAAE,MAAM,2BAA2B,CAAC,CAAA;IACpF,cAAc,CAAC,EAAE,OAAO,CAAC,sBAAsB,CAAC,CAAA;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAA;CACpC,CAAA"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/PaginationIndicator/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAA;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACnC,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,EAAE,8BAA8B,EAAE,MAAM,UAAU,CAAA;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAE5C,MAAM,MAAM,wBAAwB,GAAG;IACrC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,eAAe,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,MAAM,GAAG,MAAM,CAAA;CACvD,CAAA;AAED,8FAA8F;AAC9F,MAAM,MAAM,yBAAyB,GAAG;IACtC,MAAM,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,IAAI,CAAA;CAClD,CAAA;AAED,MAAM,WAAW,2BAA2B;CAAG;AAE/C;;;;;GAKG;AACH,MAAM,MAAM,wBAAwB,GAClC,oBAAoB,GACpB;IACE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,eAAe,EAAE,KAAK,CAAC,YAAY,GAAG,MAAM,GAAG,MAAM,CAAA;IACrD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAA;IACtC,KAAK,CAAC,EAAE,SAAS,CAAC,8BAA8B,EAAE,MAAM,2BAA2B,CAAC,CAAA;IACpF,cAAc,CAAC,EAAE,OAAO,CAAC,sBAAsB,CAAC,CAAA;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAA;CACpC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Touchable/index.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Touchable/index.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codeleap/web",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.1.1",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"exports": {
|
|
@@ -22,15 +22,15 @@
|
|
|
22
22
|
},
|
|
23
23
|
"license": "UNLICENSED",
|
|
24
24
|
"devDependencies": {
|
|
25
|
-
"@codeleap/config": "7.0.
|
|
26
|
-
"@codeleap/form": "7.0.
|
|
27
|
-
"@codeleap/hooks": "7.0.
|
|
28
|
-
"@codeleap/logger": "7.0.
|
|
29
|
-
"@codeleap/query": "7.0.
|
|
30
|
-
"@codeleap/styles": "7.0.
|
|
31
|
-
"@codeleap/types": "7.0.
|
|
32
|
-
"@codeleap/utils": "7.0.
|
|
33
|
-
"@codeleap/store": "7.0.
|
|
25
|
+
"@codeleap/config": "7.0.2",
|
|
26
|
+
"@codeleap/form": "7.0.2",
|
|
27
|
+
"@codeleap/hooks": "7.0.2",
|
|
28
|
+
"@codeleap/logger": "7.0.2",
|
|
29
|
+
"@codeleap/query": "7.0.2",
|
|
30
|
+
"@codeleap/styles": "7.0.2",
|
|
31
|
+
"@codeleap/types": "7.0.2",
|
|
32
|
+
"@codeleap/utils": "7.0.2",
|
|
33
|
+
"@codeleap/store": "7.0.2",
|
|
34
34
|
"@tanstack/react-query": "5.100.9"
|
|
35
35
|
},
|
|
36
36
|
"scripts": {
|
|
@@ -60,13 +60,13 @@
|
|
|
60
60
|
"uuid": "13.0.0"
|
|
61
61
|
},
|
|
62
62
|
"peerDependencies": {
|
|
63
|
-
"@codeleap/types": "7.0.
|
|
64
|
-
"@codeleap/utils": "7.0.
|
|
65
|
-
"@codeleap/hooks": "7.0.
|
|
66
|
-
"@codeleap/query": "7.0.
|
|
67
|
-
"@codeleap/logger": "7.0.
|
|
68
|
-
"@codeleap/styles": "7.0.
|
|
69
|
-
"@codeleap/store": "7.0.
|
|
63
|
+
"@codeleap/types": "7.0.2",
|
|
64
|
+
"@codeleap/utils": "7.0.2",
|
|
65
|
+
"@codeleap/hooks": "7.0.2",
|
|
66
|
+
"@codeleap/query": "7.0.2",
|
|
67
|
+
"@codeleap/logger": "7.0.2",
|
|
68
|
+
"@codeleap/styles": "7.0.2",
|
|
69
|
+
"@codeleap/store": "7.0.2",
|
|
70
70
|
"@emotion/react": "11.14.0",
|
|
71
71
|
"@reach/router": "^1.3.4",
|
|
72
72
|
"dayjs": "1.11.18",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useCallback, useImperativeHandle, useMemo } from 'react'
|
|
1
|
+
import React, { useCallback, useImperativeHandle, useMemo, useRef } from 'react'
|
|
2
2
|
import {
|
|
3
3
|
useMasonry,
|
|
4
4
|
usePositioner,
|
|
@@ -11,6 +11,7 @@ import { TypeGuards } from '@codeleap/types'
|
|
|
11
11
|
import { View, ViewProps } from '../View'
|
|
12
12
|
import { useListContext } from './context'
|
|
13
13
|
import { AugmentedRenderItemInfo, ListHandle, ListItem, ListItemsProps } from './types'
|
|
14
|
+
import { useScrollEdgeDetection } from './useScrollEdgeDetection'
|
|
14
15
|
|
|
15
16
|
/**
|
|
16
17
|
* Outer `View` that measures its own dimensions for the Masonic positioner via a `ResizeObserver`.
|
|
@@ -28,16 +29,26 @@ export const ListWrapper = ({ children, ...viewProps }: ViewProps) => {
|
|
|
28
29
|
function _ListItemsContent<T extends ListItem>({
|
|
29
30
|
data,
|
|
30
31
|
renderItem: providedRenderItem,
|
|
31
|
-
|
|
32
|
-
|
|
32
|
+
infiniteLoaderCallback: itemsInfiniteLoaderCallback,
|
|
33
|
+
hasMore: itemsHasMore,
|
|
34
|
+
onEndReached: itemsOnEndReached,
|
|
35
|
+
onEndReachedThreshold: itemsOnEndReachedThreshold,
|
|
36
|
+
onStartReached: itemsOnStartReached,
|
|
37
|
+
onStartReachedThreshold: itemsOnStartReachedThreshold,
|
|
33
38
|
ref,
|
|
34
39
|
}: ListItemsProps<T>) {
|
|
35
40
|
const { wrapperRef, wrapperLayout, scrollHook, styles, props, padding } = useListContext()
|
|
36
41
|
|
|
37
|
-
const
|
|
38
|
-
const
|
|
42
|
+
const infiniteLoaderCallback = itemsInfiniteLoaderCallback ?? props.infiniteLoaderCallback
|
|
43
|
+
const hasMore = itemsHasMore ?? props.hasMore
|
|
44
|
+
const onEndReached = itemsOnEndReached ?? props.onEndReached
|
|
45
|
+
const onEndReachedThreshold = itemsOnEndReachedThreshold ?? props.onEndReachedThreshold
|
|
46
|
+
const onStartReached = itemsOnStartReached ?? props.onStartReached
|
|
47
|
+
const onStartReachedThreshold = itemsOnStartReachedThreshold ?? props.onStartReachedThreshold
|
|
39
48
|
|
|
40
|
-
const
|
|
49
|
+
const useScrollBasedLoading = !!onEndReached || !!onStartReached
|
|
50
|
+
|
|
51
|
+
const { scrollTop, scrollHeight, isScrolling, height, width, scrollElement } = scrollHook(wrapperRef, wrapperLayout)
|
|
41
52
|
const innerWidth = width - padding.paddingLeft - padding.paddingRight
|
|
42
53
|
|
|
43
54
|
const stylePositioner = (styles as any).positioner ?? {}
|
|
@@ -69,12 +80,24 @@ function _ListItemsContent<T extends ListItem>({
|
|
|
69
80
|
},
|
|
70
81
|
}), [scrollToIndexFn])
|
|
71
82
|
|
|
83
|
+
useScrollEdgeDetection({
|
|
84
|
+
scrollTop,
|
|
85
|
+
scrollHeight,
|
|
86
|
+
clientHeight: height,
|
|
87
|
+
onEndReached,
|
|
88
|
+
onEndReachedThreshold,
|
|
89
|
+
onStartReached,
|
|
90
|
+
onStartReachedThreshold,
|
|
91
|
+
})
|
|
92
|
+
|
|
72
93
|
const maybeLoadMore = useInfiniteLoader(
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
94
|
+
useScrollBasedLoading
|
|
95
|
+
? async () => {}
|
|
96
|
+
: async () => { if (hasMore) infiniteLoaderCallback?.() },
|
|
76
97
|
{
|
|
77
98
|
isItemLoaded: (index, items) => !!items?.[index],
|
|
99
|
+
minimumBatchSize: 10,
|
|
100
|
+
threshold: 4,
|
|
78
101
|
...props.infiniteLoaderProps,
|
|
79
102
|
}
|
|
80
103
|
)
|
|
@@ -92,7 +115,7 @@ function _ListItemsContent<T extends ListItem>({
|
|
|
92
115
|
const isFirst = index === 0
|
|
93
116
|
const isLast = index === dataLength - 1
|
|
94
117
|
const isOnly = dataLength === 1
|
|
95
|
-
|
|
118
|
+
|
|
96
119
|
return <>
|
|
97
120
|
{isFirst ? null : separator}
|
|
98
121
|
{providedRenderItem({
|
|
@@ -104,7 +127,7 @@ function _ListItemsContent<T extends ListItem>({
|
|
|
104
127
|
} as AugmentedRenderItemInfo<T>)}
|
|
105
128
|
</>
|
|
106
129
|
}, [providedRenderItem, separator, dataLength])
|
|
107
|
-
|
|
130
|
+
|
|
108
131
|
return useMasonry({
|
|
109
132
|
positioner,
|
|
110
133
|
resizeObserver,
|
|
@@ -112,9 +135,8 @@ function _ListItemsContent<T extends ListItem>({
|
|
|
112
135
|
scrollTop,
|
|
113
136
|
isScrolling,
|
|
114
137
|
items: data ?? [],
|
|
115
|
-
|
|
116
138
|
render: wrappedRenderItem,
|
|
117
|
-
onRender: maybeLoadMore,
|
|
139
|
+
onRender: useScrollBasedLoading ? undefined : maybeLoadMore,
|
|
118
140
|
})
|
|
119
141
|
}
|
|
120
142
|
|
|
@@ -19,8 +19,12 @@ export function List<T extends ListItem>(props: ListProps<T>) {
|
|
|
19
19
|
const {
|
|
20
20
|
data,
|
|
21
21
|
renderItem,
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
infiniteLoaderCallback,
|
|
23
|
+
hasMore,
|
|
24
|
+
onEndReached,
|
|
25
|
+
onEndReachedThreshold,
|
|
26
|
+
onStartReached,
|
|
27
|
+
onStartReachedThreshold,
|
|
24
28
|
...providerProps
|
|
25
29
|
} = { ...List.defaultProps, ...props } as ListProps<T>
|
|
26
30
|
|
|
@@ -31,8 +35,12 @@ export function List<T extends ListItem>(props: ListProps<T>) {
|
|
|
31
35
|
<ListItems
|
|
32
36
|
data={data}
|
|
33
37
|
renderItem={renderItem}
|
|
34
|
-
|
|
35
|
-
|
|
38
|
+
infiniteLoaderCallback={infiniteLoaderCallback}
|
|
39
|
+
hasMore={hasMore}
|
|
40
|
+
onEndReached={onEndReached}
|
|
41
|
+
onEndReachedThreshold={onEndReachedThreshold}
|
|
42
|
+
onStartReached={onStartReached}
|
|
43
|
+
onStartReachedThreshold={onStartReachedThreshold}
|
|
36
44
|
/>
|
|
37
45
|
<ListFooter />
|
|
38
46
|
</ListWrapper>
|
|
@@ -8,9 +8,10 @@ import { useIsomorphicEffect } from '../../lib/hooks/useIsomorphicEffect'
|
|
|
8
8
|
import { useWindowSize } from '../../lib/hooks/useWindowSize'
|
|
9
9
|
import { UseListScrollHook, ListWrapperLayout } from './types'
|
|
10
10
|
|
|
11
|
-
function useElementScroller(ref: React.RefObject<HTMLElement>): { scrollTop: number; isScrolling: boolean } {
|
|
11
|
+
function useElementScroller(ref: React.RefObject<HTMLElement>): { scrollTop: number; scrollHeight: number; isScrolling: boolean } {
|
|
12
12
|
const [isScrolling, setIsScrolling] = useState(false)
|
|
13
13
|
const [scrollTop, setScrollTop] = useState(0)
|
|
14
|
+
const [scrollHeight, setScrollHeight] = useState(0)
|
|
14
15
|
|
|
15
16
|
useIsomorphicEffect(() => {
|
|
16
17
|
if (typeof window === 'undefined') return
|
|
@@ -22,6 +23,7 @@ function useElementScroller(ref: React.RefObject<HTMLElement>): { scrollTop: num
|
|
|
22
23
|
if (tick) return
|
|
23
24
|
tick = window.requestAnimationFrame(() => {
|
|
24
25
|
setScrollTop(current.scrollTop)
|
|
26
|
+
setScrollHeight(current.scrollHeight)
|
|
25
27
|
tick = void 0
|
|
26
28
|
})
|
|
27
29
|
}
|
|
@@ -44,7 +46,7 @@ function useElementScroller(ref: React.RefObject<HTMLElement>): { scrollTop: num
|
|
|
44
46
|
return () => window.clearTimeout(to)
|
|
45
47
|
}, [scrollTop])
|
|
46
48
|
|
|
47
|
-
return { scrollTop, isScrolling }
|
|
49
|
+
return { scrollTop, scrollHeight, isScrolling }
|
|
48
50
|
}
|
|
49
51
|
|
|
50
52
|
/**
|
|
@@ -53,9 +55,10 @@ function useElementScroller(ref: React.RefObject<HTMLElement>): { scrollTop: num
|
|
|
53
55
|
* This is the default scroll hook; override via `ListProviderProps.scrollHook` or set `windowScroll` to switch to `useWindowScroll`.
|
|
54
56
|
*/
|
|
55
57
|
export const useElementScroll: UseListScrollHook = (wrapperRef: React.RefObject<HTMLElement>, layout: ListWrapperLayout | null) => {
|
|
56
|
-
const { scrollTop, isScrolling } = useElementScroller(wrapperRef)
|
|
58
|
+
const { scrollTop, scrollHeight, isScrolling } = useElementScroller(wrapperRef)
|
|
57
59
|
return {
|
|
58
60
|
scrollTop,
|
|
61
|
+
scrollHeight,
|
|
59
62
|
isScrolling,
|
|
60
63
|
height: layout?.offsetHeight ?? 0,
|
|
61
64
|
width: layout?.width ?? 0,
|
|
@@ -73,8 +76,10 @@ export const useWindowScroll: UseListScrollHook = (wrapperRef: React.RefObject<H
|
|
|
73
76
|
const windowHeight = windowSize[1]
|
|
74
77
|
const { offset } = useContainerPosition(wrapperRef, windowSize)
|
|
75
78
|
const { scrollTop, isScrolling } = useMasonicScroller(offset)
|
|
79
|
+
const scrollHeight = typeof document !== 'undefined' ? document.documentElement.scrollHeight : 0
|
|
76
80
|
return {
|
|
77
81
|
scrollTop,
|
|
82
|
+
scrollHeight,
|
|
78
83
|
isScrolling,
|
|
79
84
|
height: windowHeight,
|
|
80
85
|
width: layout?.width ?? 0,
|
|
@@ -45,6 +45,7 @@ export type UseListScrollHook = (
|
|
|
45
45
|
wrapperLayout: ListWrapperLayout | null
|
|
46
46
|
) => {
|
|
47
47
|
scrollTop: number
|
|
48
|
+
scrollHeight: number
|
|
48
49
|
isScrolling: boolean
|
|
49
50
|
height: number
|
|
50
51
|
width: number
|
|
@@ -66,9 +67,13 @@ export type ListHandle = {
|
|
|
66
67
|
export type ListProviderProps = Partial<ListPositionerConfig> & ListPaddingProps & {
|
|
67
68
|
scrollHook?: UseListScrollHook
|
|
68
69
|
windowScroll?: boolean
|
|
69
|
-
|
|
70
|
-
|
|
70
|
+
infiniteLoaderCallback?: () => void
|
|
71
|
+
hasMore?: boolean
|
|
71
72
|
infiniteLoaderProps?: UseInfiniteLoaderOptions<unknown>
|
|
73
|
+
onEndReached?: () => void
|
|
74
|
+
onEndReachedThreshold?: number
|
|
75
|
+
onStartReached?: () => void
|
|
76
|
+
onStartReachedThreshold?: number
|
|
72
77
|
separators?: boolean
|
|
73
78
|
ItemSeparatorComponent?: React.ReactElement
|
|
74
79
|
style?: StyleProp<ListComposition, keyof ListStyleDef>
|
|
@@ -83,8 +88,12 @@ export type ListProviderProps = Partial<ListPositionerConfig> & ListPaddingProps
|
|
|
83
88
|
export type ListItemsProps<T extends ListItem> = {
|
|
84
89
|
data: T[]
|
|
85
90
|
renderItem: (data: AugmentedRenderItemInfo<T>) => React.ReactElement
|
|
86
|
-
|
|
87
|
-
|
|
91
|
+
infiniteLoaderCallback?: () => void
|
|
92
|
+
hasMore?: boolean
|
|
93
|
+
onEndReached?: () => void
|
|
94
|
+
onEndReachedThreshold?: number
|
|
95
|
+
onStartReached?: () => void
|
|
96
|
+
onStartReachedThreshold?: number
|
|
88
97
|
ref?: React.Ref<ListHandle>
|
|
89
98
|
}
|
|
90
99
|
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { useEffect, useRef } from 'react'
|
|
2
|
+
|
|
3
|
+
type UseScrollEdgeDetectionOptions = {
|
|
4
|
+
scrollTop: number
|
|
5
|
+
scrollHeight: number
|
|
6
|
+
clientHeight: number
|
|
7
|
+
onEndReached?: () => void
|
|
8
|
+
onEndReachedThreshold?: number
|
|
9
|
+
onStartReached?: () => void
|
|
10
|
+
onStartReachedThreshold?: number
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
const DEFAULT_THRESHOLD = 0.5
|
|
14
|
+
|
|
15
|
+
export function useScrollEdgeDetection(options: UseScrollEdgeDetectionOptions) {
|
|
16
|
+
const {
|
|
17
|
+
scrollTop,
|
|
18
|
+
scrollHeight,
|
|
19
|
+
clientHeight,
|
|
20
|
+
onEndReached,
|
|
21
|
+
onEndReachedThreshold = DEFAULT_THRESHOLD,
|
|
22
|
+
onStartReached,
|
|
23
|
+
onStartReachedThreshold = DEFAULT_THRESHOLD,
|
|
24
|
+
} = options
|
|
25
|
+
|
|
26
|
+
const hasFiredEnd = useRef(false)
|
|
27
|
+
const hasFiredStart = useRef(false)
|
|
28
|
+
|
|
29
|
+
useEffect(() => {
|
|
30
|
+
if (clientHeight <= 0 || scrollHeight <= 0) return
|
|
31
|
+
|
|
32
|
+
if (onEndReached) {
|
|
33
|
+
const distanceFromEnd = scrollHeight - scrollTop - clientHeight
|
|
34
|
+
const endThreshold = clientHeight * onEndReachedThreshold
|
|
35
|
+
|
|
36
|
+
if (distanceFromEnd <= endThreshold) {
|
|
37
|
+
if (!hasFiredEnd.current) {
|
|
38
|
+
hasFiredEnd.current = true
|
|
39
|
+
onEndReached()
|
|
40
|
+
}
|
|
41
|
+
} else {
|
|
42
|
+
hasFiredEnd.current = false
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
if (onStartReached) {
|
|
47
|
+
const startThreshold = clientHeight * onStartReachedThreshold
|
|
48
|
+
|
|
49
|
+
if (scrollTop <= startThreshold) {
|
|
50
|
+
if (!hasFiredStart.current) {
|
|
51
|
+
hasFiredStart.current = true
|
|
52
|
+
onStartReached()
|
|
53
|
+
}
|
|
54
|
+
} else {
|
|
55
|
+
hasFiredStart.current = false
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}, [scrollTop, scrollHeight, clientHeight, onEndReached, onEndReachedThreshold, onStartReached, onStartReachedThreshold])
|
|
59
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React, { useState, useImperativeHandle } from 'react'
|
|
2
|
+
import { PaginationIndicator } from './index'
|
|
3
|
+
import { PaginationIndicatorHandle, PaginationIndicatorProps, PaginationIndicatorState } from './types'
|
|
4
|
+
|
|
5
|
+
type ImperativePaginationIndicatorProps = Omit<PaginationIndicatorProps, 'isFetching' | 'hasMore' | 'noMoreItemsText'> & {
|
|
6
|
+
initialState?: PaginationIndicatorState
|
|
7
|
+
ref?: React.Ref<PaginationIndicatorHandle>
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Self-contained pagination indicator that manages its own render state.
|
|
12
|
+
* The parent pushes updates via the ref handle instead of passing reactive props, avoiding full tree re-renders.
|
|
13
|
+
*/
|
|
14
|
+
export const ImperativePaginationIndicator = (props: ImperativePaginationIndicatorProps) => {
|
|
15
|
+
const { initialState, ref, ...rest } = props
|
|
16
|
+
|
|
17
|
+
const [state, setState] = useState<PaginationIndicatorState>({
|
|
18
|
+
isFetching: false,
|
|
19
|
+
hasMore: true,
|
|
20
|
+
...initialState,
|
|
21
|
+
})
|
|
22
|
+
|
|
23
|
+
useImperativeHandle(ref, () => ({
|
|
24
|
+
update: (next) => setState(prev => ({ ...prev, ...next })),
|
|
25
|
+
}), [])
|
|
26
|
+
|
|
27
|
+
return (
|
|
28
|
+
<PaginationIndicator
|
|
29
|
+
{...rest}
|
|
30
|
+
isFetching={state.isFetching}
|
|
31
|
+
hasMore={state.hasMore}
|
|
32
|
+
noMoreItemsText={state.noMoreItemsText}
|
|
33
|
+
/>
|
|
34
|
+
)
|
|
35
|
+
}
|
|
@@ -10,6 +10,7 @@ import { AnyRecord, IJSX, StyledComponentProps, useNestedStylesByKey } from '@co
|
|
|
10
10
|
|
|
11
11
|
export * from './styles'
|
|
12
12
|
export * from './types'
|
|
13
|
+
export { ImperativePaginationIndicator } from './ImperativePaginationIndicator'
|
|
13
14
|
|
|
14
15
|
/**
|
|
15
16
|
* Status indicator placed at the bottom of a paginated or infinite-scroll list — shows a spinner while fetching, a "no more items" message when exhausted, or nothing otherwise.
|
|
@@ -5,6 +5,17 @@ import { ComponentCommonProps } from '../../types'
|
|
|
5
5
|
import { PaginationIndicatorComposition } from './styles'
|
|
6
6
|
import { StyleProp } from '@codeleap/styles'
|
|
7
7
|
|
|
8
|
+
export type PaginationIndicatorState = {
|
|
9
|
+
isFetching?: boolean
|
|
10
|
+
hasMore?: boolean
|
|
11
|
+
noMoreItemsText?: React.ReactElement | string | number
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
/** Imperative handle for updating a `PaginationIndicator` without re-rendering its parent. */
|
|
15
|
+
export type PaginationIndicatorHandle = {
|
|
16
|
+
update: (state: PaginationIndicatorState) => void
|
|
17
|
+
}
|
|
18
|
+
|
|
8
19
|
export interface PaginationIndicatorStyleDef {}
|
|
9
20
|
|
|
10
21
|
/**
|