@codeleap/web 7.0.2 → 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/ActivityIndicator/index.js +16 -34
- package/dist/components/ActivityIndicator/index.js.map +1 -1
- package/dist/components/ActivityIndicator/styles.js +1 -2
- package/dist/components/ActivityIndicator/types.js +1 -2
- package/dist/components/Badge/index.js +24 -42
- package/dist/components/Badge/index.js.map +1 -1
- package/dist/components/Badge/styles.js +1 -2
- package/dist/components/Badge/types.js +1 -2
- package/dist/components/Button/index.js +19 -36
- package/dist/components/Button/index.js.map +1 -1
- package/dist/components/Button/styles.js +1 -2
- package/dist/components/Button/types.js +1 -2
- package/dist/components/Calendar/index.js +12 -29
- package/dist/components/Calendar/index.js.map +1 -1
- package/dist/components/Calendar/styles.js +1 -2
- package/dist/components/Calendar/types.js +1 -2
- package/dist/components/Carousel/index.js +40 -82
- package/dist/components/Carousel/index.js.map +1 -1
- package/dist/components/Carousel/styles.js +1 -2
- package/dist/components/Carousel/types.js +1 -2
- package/dist/components/Checkbox/index.js +24 -42
- package/dist/components/Checkbox/index.js.map +1 -1
- package/dist/components/Checkbox/styles.js +1 -2
- package/dist/components/Checkbox/types.js +1 -2
- package/dist/components/Collapse/index.js +17 -35
- package/dist/components/Collapse/index.js.map +1 -1
- package/dist/components/Collapse/styles.js +1 -2
- package/dist/components/Collapse/types.js +1 -2
- package/dist/components/ColorPicker/index.js +33 -51
- package/dist/components/ColorPicker/index.js.map +1 -1
- package/dist/components/ColorPicker/styles.js +1 -2
- package/dist/components/ColorPicker/types.js +1 -2
- package/dist/components/CropPicker/hooks.d.ts +2 -2
- package/dist/components/CropPicker/hooks.js +17 -20
- package/dist/components/CropPicker/hooks.js.map +1 -1
- package/dist/components/CropPicker/index.js +22 -40
- package/dist/components/CropPicker/index.js.map +1 -1
- package/dist/components/CropPicker/styles.js +1 -2
- package/dist/components/CropPicker/types.js +1 -2
- package/dist/components/CropPicker/utils.js +3 -9
- package/dist/components/CropPicker/utils.js.map +1 -1
- package/dist/components/DatePicker/index.js +23 -40
- package/dist/components/DatePicker/index.js.map +1 -1
- package/dist/components/DatePicker/styles.js +1 -2
- package/dist/components/DatePicker/types.js +1 -2
- package/dist/components/Drawer/index.js +22 -40
- package/dist/components/Drawer/index.js.map +1 -1
- package/dist/components/Drawer/styles.js +1 -2
- package/dist/components/Drawer/types.js +1 -2
- package/dist/components/Dropzone/context.js +11 -16
- package/dist/components/Dropzone/context.js.map +1 -1
- package/dist/components/Dropzone/elements.js +13 -19
- package/dist/components/Dropzone/elements.js.map +1 -1
- package/dist/components/Dropzone/index.js +35 -53
- package/dist/components/Dropzone/index.js.map +1 -1
- package/dist/components/Dropzone/styles.js +1 -2
- package/dist/components/Dropzone/types.js +1 -2
- package/dist/components/Dropzone/useDropzone.js +3 -6
- package/dist/components/Dropzone/useDropzone.js.map +1 -1
- package/dist/components/EmptyPlaceholder/index.js +40 -61
- package/dist/components/EmptyPlaceholder/index.js.map +1 -1
- package/dist/components/EmptyPlaceholder/styles.js +1 -2
- package/dist/components/EmptyPlaceholder/types.js +1 -2
- package/dist/components/Field/context.js +11 -17
- package/dist/components/Field/context.js.map +1 -1
- package/dist/components/Field/elements.js +31 -39
- package/dist/components/Field/elements.js.map +1 -1
- package/dist/components/Field/index.js +23 -41
- package/dist/components/Field/index.js.map +1 -1
- package/dist/components/Field/styles.js +1 -2
- package/dist/components/Field/types.js +1 -2
- package/dist/components/Field/useFieldInput.d.ts +1 -1
- package/dist/components/Field/useFieldInput.js +8 -11
- package/dist/components/Field/useFieldInput.js.map +1 -1
- package/dist/components/FileInput/index.js +14 -32
- package/dist/components/FileInput/index.js.map +1 -1
- package/dist/components/FileInput/types.js +1 -2
- package/dist/components/Icon/index.js +26 -44
- package/dist/components/Icon/index.js.map +1 -1
- package/dist/components/Icon/styles.js +1 -2
- package/dist/components/Icon/types.js +1 -2
- package/dist/components/List/context.js +20 -25
- package/dist/components/List/context.js.map +1 -1
- package/dist/components/List/elements.d.ts.map +1 -1
- package/dist/components/List/elements.js +58 -82
- 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 +19 -36
- 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 +20 -20
- package/dist/components/List/scroll.js.map +1 -1
- package/dist/components/List/styles.js +1 -2
- package/dist/components/List/types.d.ts +13 -4
- package/dist/components/List/types.d.ts.map +1 -1
- package/dist/components/List/types.js +1 -2
- 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/LoadingOverlay/index.js +20 -38
- package/dist/components/LoadingOverlay/index.js.map +1 -1
- package/dist/components/LoadingOverlay/styles.js +1 -2
- package/dist/components/LoadingOverlay/types.js +1 -2
- package/dist/components/MaskedTextInput/index.js +14 -32
- package/dist/components/MaskedTextInput/index.js.map +1 -1
- package/dist/components/MaskedTextInput/mask.js +1 -4
- package/dist/components/MaskedTextInput/mask.js.map +1 -1
- package/dist/components/MaskedTextInput/types.js +1 -2
- package/dist/components/Modal/context.js +9 -14
- package/dist/components/Modal/context.js.map +1 -1
- package/dist/components/Modal/elements.js +23 -31
- package/dist/components/Modal/elements.js.map +1 -1
- package/dist/components/Modal/index.js +22 -40
- package/dist/components/Modal/index.js.map +1 -1
- package/dist/components/Modal/styles.js +1 -2
- package/dist/components/Modal/types.js +1 -2
- package/dist/components/NumberIncrement/index.js +29 -47
- package/dist/components/NumberIncrement/index.js.map +1 -1
- package/dist/components/NumberIncrement/styles.js +1 -2
- package/dist/components/NumberIncrement/types.js +1 -2
- package/dist/components/NumberIncrement/useNumberIncrement.js +21 -24
- package/dist/components/NumberIncrement/useNumberIncrement.js.map +1 -1
- package/dist/components/Overlay/index.js +21 -39
- package/dist/components/Overlay/index.js.map +1 -1
- package/dist/components/Overlay/styles.js +1 -2
- package/dist/components/Overlay/types.js +1 -2
- package/dist/components/PaginationButtons/index.js +26 -44
- package/dist/components/PaginationButtons/index.js.map +1 -1
- package/dist/components/PaginationButtons/styles.js +1 -2
- package/dist/components/PaginationButtons/types.js +1 -2
- 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 +25 -42
- package/dist/components/PaginationIndicator/index.js.map +1 -1
- package/dist/components/PaginationIndicator/styles.js +1 -2
- package/dist/components/PaginationIndicator/types.d.ts +9 -0
- package/dist/components/PaginationIndicator/types.d.ts.map +1 -1
- package/dist/components/PaginationIndicator/types.js +1 -2
- package/dist/components/Progress/Bar/Segmented.js +19 -23
- package/dist/components/Progress/Bar/Segmented.js.map +1 -1
- package/dist/components/Progress/Bar/index.js +29 -47
- package/dist/components/Progress/Bar/index.js.map +1 -1
- package/dist/components/Progress/Bar/styles.js +1 -2
- package/dist/components/Progress/Bar/types.js +1 -2
- package/dist/components/Progress/Circle/Segmented.js +22 -26
- package/dist/components/Progress/Circle/Segmented.js.map +1 -1
- package/dist/components/Progress/Circle/index.js +30 -48
- package/dist/components/Progress/Circle/index.js.map +1 -1
- package/dist/components/Progress/Circle/styles.js +1 -2
- package/dist/components/Progress/Circle/types.js +1 -2
- package/dist/components/Progress/index.js +2 -18
- package/dist/components/Progress/index.js.map +1 -1
- package/dist/components/Progress/utils.js +1 -4
- package/dist/components/Progress/utils.js.map +1 -1
- package/dist/components/RadioInput/index.js +26 -47
- package/dist/components/RadioInput/index.js.map +1 -1
- package/dist/components/RadioInput/styles.js +1 -2
- package/dist/components/RadioInput/types.js +1 -2
- package/dist/components/SearchInput/index.js +14 -51
- package/dist/components/SearchInput/index.js.map +1 -1
- package/dist/components/SectionFilters/index.js +38 -56
- package/dist/components/SectionFilters/index.js.map +1 -1
- package/dist/components/SectionFilters/styles.js +1 -2
- package/dist/components/SectionFilters/types.js +1 -2
- package/dist/components/Select/context.js +44 -50
- package/dist/components/Select/context.js.map +1 -1
- package/dist/components/Select/elements.js +23 -29
- package/dist/components/Select/elements.js.map +1 -1
- package/dist/components/Select/index.js +24 -41
- package/dist/components/Select/index.js.map +1 -1
- package/dist/components/Select/styles.js +1 -2
- package/dist/components/Select/types.js +1 -2
- package/dist/components/Select/useTriggerWidth.js +6 -9
- package/dist/components/Select/useTriggerWidth.js.map +1 -1
- package/dist/components/Slider/index.js +47 -68
- package/dist/components/Slider/index.js.map +1 -1
- package/dist/components/Slider/styles.js +1 -2
- package/dist/components/Slider/types.js +1 -2
- package/dist/components/Switch/index.js +22 -40
- package/dist/components/Switch/index.js.map +1 -1
- package/dist/components/Switch/styles.js +1 -2
- package/dist/components/Switch/types.js +1 -2
- package/dist/components/Tag/index.js +34 -55
- package/dist/components/Tag/index.js.map +1 -1
- package/dist/components/Tag/styles.js +1 -2
- package/dist/components/Tag/types.js +1 -2
- package/dist/components/Text/index.js +27 -48
- package/dist/components/Text/index.js.map +1 -1
- package/dist/components/Text/styles.js +1 -2
- package/dist/components/Text/types.js +1 -2
- package/dist/components/TextEditor/index.js +29 -50
- package/dist/components/TextEditor/index.js.map +1 -1
- package/dist/components/TextEditor/styles.js +1 -2
- package/dist/components/TextEditor/types.js +1 -2
- package/dist/components/TextInput/index.js +28 -49
- package/dist/components/TextInput/index.js.map +1 -1
- package/dist/components/TextInput/styles.js +1 -2
- package/dist/components/TextInput/types.js +1 -2
- package/dist/components/TextInput/useTextInput.d.ts +2 -2
- package/dist/components/TextInput/useTextInput.js +12 -15
- package/dist/components/TextInput/useTextInput.js.map +1 -1
- package/dist/components/Tooltip/index.js +33 -54
- package/dist/components/Tooltip/index.js.map +1 -1
- package/dist/components/Tooltip/styles.js +1 -2
- package/dist/components/Tooltip/types.js +1 -2
- package/dist/components/Touchable/index.js +23 -42
- package/dist/components/Touchable/index.js.map +1 -1
- package/dist/components/Touchable/styles.js +1 -2
- package/dist/components/Touchable/types.js +1 -2
- package/dist/components/View/index.js +15 -32
- package/dist/components/View/index.js.map +1 -1
- package/dist/components/View/styles.js +1 -2
- package/dist/components/View/types.js +1 -2
- package/dist/components/components.js +41 -57
- package/dist/components/components.js.map +1 -1
- package/dist/index.js +4 -20
- package/dist/index.js.map +1 -1
- package/dist/lib/ListMasonry.js +22 -31
- package/dist/lib/ListMasonry.js.map +1 -1
- package/dist/lib/ThemeVariables.js +6 -11
- package/dist/lib/ThemeVariables.js.map +1 -1
- package/dist/lib/WebStyleRegistry.js +3 -7
- package/dist/lib/WebStyleRegistry.js.map +1 -1
- package/dist/lib/hooks/index.js +22 -38
- package/dist/lib/hooks/index.js.map +1 -1
- package/dist/lib/hooks/useAnimatedStyle.js +5 -9
- package/dist/lib/hooks/useAnimatedStyle.js.map +1 -1
- package/dist/lib/hooks/useAnimatedVariantStyles.js +6 -9
- package/dist/lib/hooks/useAnimatedVariantStyles.js.map +1 -1
- package/dist/lib/hooks/useAsyncSelect.js +8 -11
- package/dist/lib/hooks/useAsyncSelect.js.map +1 -1
- package/dist/lib/hooks/useBreakpointMatch.js +19 -22
- package/dist/lib/hooks/useBreakpointMatch.js.map +1 -1
- package/dist/lib/hooks/useClick.js +7 -10
- package/dist/lib/hooks/useClick.js.map +1 -1
- package/dist/lib/hooks/useClickOutside.js +4 -7
- package/dist/lib/hooks/useClickOutside.js.map +1 -1
- package/dist/lib/hooks/useFileInput.js +3 -7
- package/dist/lib/hooks/useFileInput.js.map +1 -1
- package/dist/lib/hooks/useIsomorphicEffect.js +2 -5
- package/dist/lib/hooks/useIsomorphicEffect.js.map +1 -1
- package/dist/lib/hooks/useKeydown.js +9 -13
- package/dist/lib/hooks/useKeydown.js.map +1 -1
- package/dist/lib/hooks/useListFocus.js +4 -7
- package/dist/lib/hooks/useListFocus.js.map +1 -1
- package/dist/lib/hooks/useMediaQuery.js +8 -11
- package/dist/lib/hooks/useMediaQuery.js.map +1 -1
- package/dist/lib/hooks/usePageExitBlocker.js +6 -10
- package/dist/lib/hooks/usePageExitBlocker.js.map +1 -1
- package/dist/lib/hooks/usePagination.js +10 -13
- package/dist/lib/hooks/usePagination.js.map +1 -1
- package/dist/lib/hooks/usePopState.js +5 -9
- package/dist/lib/hooks/usePopState.js.map +1 -1
- package/dist/lib/hooks/usePopoverDismiss.js +5 -8
- package/dist/lib/hooks/usePopoverDismiss.js.map +1 -1
- package/dist/lib/hooks/useRefresh.js +9 -16
- package/dist/lib/hooks/useRefresh.js.map +1 -1
- package/dist/lib/hooks/useScrollEffect.js +3 -6
- package/dist/lib/hooks/useScrollEffect.js.map +1 -1
- package/dist/lib/hooks/useSearchParams.js +7 -10
- package/dist/lib/hooks/useSearchParams.js.map +1 -1
- package/dist/lib/hooks/useStaticAnimationStyles.js +3 -6
- package/dist/lib/hooks/useStaticAnimationStyles.js.map +1 -1
- package/dist/lib/hooks/useStylesFor.js +9 -13
- package/dist/lib/hooks/useStylesFor.js.map +1 -1
- package/dist/lib/hooks/useTouchableEvents.js +4 -7
- package/dist/lib/hooks/useTouchableEvents.js.map +1 -1
- package/dist/lib/hooks/useWindowFocus.js +7 -11
- package/dist/lib/hooks/useWindowFocus.js.map +1 -1
- package/dist/lib/hooks/useWindowSize.js +7 -10
- package/dist/lib/hooks/useWindowSize.js.map +1 -1
- package/dist/lib/index.js +6 -22
- package/dist/lib/index.js.map +1 -1
- package/dist/lib/tools/index.js +3 -19
- package/dist/lib/tools/index.js.map +1 -1
- package/dist/lib/tools/localStorage.js +8 -12
- package/dist/lib/tools/localStorage.js.map +1 -1
- package/dist/lib/tools/mediaQuery.js +3 -8
- package/dist/lib/tools/mediaQuery.js.map +1 -1
- package/dist/lib/tools/modal.js +13 -18
- package/dist/lib/tools/modal.js.map +1 -1
- package/dist/lib/utils/attributes.js +3 -6
- package/dist/lib/utils/attributes.js.map +1 -1
- package/dist/lib/utils/cache.d.ts +2 -2
- package/dist/lib/utils/cache.js +4 -11
- package/dist/lib/utils/cache.js.map +1 -1
- package/dist/lib/utils/index.js +5 -21
- package/dist/lib/utils/index.js.map +1 -1
- package/dist/lib/utils/pollyfils/scroll.js +1 -5
- package/dist/lib/utils/pollyfils/scroll.js.map +1 -1
- package/dist/lib/utils/stopPropagation.js +1 -4
- package/dist/lib/utils/stopPropagation.js.map +1 -1
- package/dist/lib/utils/test.js +3 -7
- package/dist/lib/utils/test.js.map +1 -1
- package/dist/types/index.js +1 -17
- package/dist/types/index.js.map +1 -1
- package/dist/types/utility.js +1 -2
- 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,60 +1,28 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
-
var ownKeys = function(o) {
|
|
20
|
-
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
-
var ar = [];
|
|
22
|
-
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
-
return ar;
|
|
24
|
-
};
|
|
25
|
-
return ownKeys(o);
|
|
26
|
-
};
|
|
27
|
-
return function (mod) {
|
|
28
|
-
if (mod && mod.__esModule) return mod;
|
|
29
|
-
var result = {};
|
|
30
|
-
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
-
__setModuleDefault(result, mod);
|
|
32
|
-
return result;
|
|
33
|
-
};
|
|
34
|
-
})();
|
|
35
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
-
exports.ListPlaceholder = exports.ListFooter = exports.ListHeader = exports.ListWrapper = void 0;
|
|
37
|
-
exports.ListItems = ListItems;
|
|
38
|
-
const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
|
|
39
|
-
const react_1 = __importStar(require("react"));
|
|
40
|
-
const masonic_1 = require("masonic");
|
|
41
|
-
const types_1 = require("@codeleap/types");
|
|
42
|
-
const View_1 = require("../View");
|
|
43
|
-
const context_1 = require("./context");
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import React, { useCallback, useImperativeHandle, useMemo } from 'react';
|
|
3
|
+
import { useMasonry, usePositioner, useResizeObserver, useInfiniteLoader, useScrollToIndex, } from 'masonic';
|
|
4
|
+
import { TypeGuards } from '@codeleap/types';
|
|
5
|
+
import { View } from '../View';
|
|
6
|
+
import { useListContext } from './context';
|
|
7
|
+
import { useScrollEdgeDetection } from './useScrollEdgeDetection';
|
|
44
8
|
/**
|
|
45
9
|
* Outer `View` that measures its own dimensions for the Masonic positioner via a `ResizeObserver`.
|
|
46
10
|
* Must be rendered inside `List.Provider`; forwards extra `ViewProps` to the underlying `View`.
|
|
47
11
|
*/
|
|
48
|
-
const ListWrapper = ({ children, ...viewProps }) => {
|
|
49
|
-
const { wrapperRef, styles, padding } =
|
|
50
|
-
return ((
|
|
12
|
+
export const ListWrapper = ({ children, ...viewProps }) => {
|
|
13
|
+
const { wrapperRef, styles, padding } = useListContext();
|
|
14
|
+
return (_jsx(View, { ...viewProps, css: [styles.wrapper, padding, viewProps.css], ref: wrapperRef, children: children }));
|
|
51
15
|
};
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
const
|
|
55
|
-
const
|
|
56
|
-
const
|
|
57
|
-
const
|
|
16
|
+
function _ListItemsContent({ data, renderItem: providedRenderItem, infiniteLoaderCallback: itemsInfiniteLoaderCallback, hasMore: itemsHasMore, onEndReached: itemsOnEndReached, onEndReachedThreshold: itemsOnEndReachedThreshold, onStartReached: itemsOnStartReached, onStartReachedThreshold: itemsOnStartReachedThreshold, ref, }) {
|
|
17
|
+
const { wrapperRef, wrapperLayout, scrollHook, styles, props, padding } = useListContext();
|
|
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);
|
|
58
26
|
const innerWidth = width - padding.paddingLeft - padding.paddingRight;
|
|
59
27
|
const stylePositioner = styles.positioner ?? {};
|
|
60
28
|
const positionerConfig = {
|
|
@@ -65,38 +33,49 @@ function _ListItemsContent({ data, renderItem: providedRenderItem, fetchNextPage
|
|
|
65
33
|
maxColumnWidth: props.maxColumnWidth ?? stylePositioner.maxColumnWidth,
|
|
66
34
|
rowGutter: props.rowGutter ?? stylePositioner.rowGutter,
|
|
67
35
|
};
|
|
68
|
-
const positioner =
|
|
69
|
-
const resizeObserver =
|
|
70
|
-
const scrollToIndexFn =
|
|
36
|
+
const positioner = usePositioner({ width: Math.max(0, innerWidth), ...positionerConfig }, [data]);
|
|
37
|
+
const resizeObserver = useResizeObserver(positioner);
|
|
38
|
+
const scrollToIndexFn = useScrollToIndex(positioner, {
|
|
71
39
|
element: scrollElement,
|
|
72
40
|
height,
|
|
73
41
|
});
|
|
74
|
-
|
|
42
|
+
useImperativeHandle(ref, () => ({
|
|
75
43
|
scrollToIndex: (index, options) => {
|
|
76
44
|
scrollToIndexFn(index);
|
|
77
45
|
},
|
|
78
46
|
}), [scrollToIndexFn]);
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
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?.(); }, {
|
|
83
60
|
isItemLoaded: (index, items) => !!items?.[index],
|
|
61
|
+
minimumBatchSize: 10,
|
|
62
|
+
threshold: 4,
|
|
84
63
|
...props.infiniteLoaderProps,
|
|
85
64
|
});
|
|
86
|
-
const separator =
|
|
65
|
+
const separator = useMemo(() => {
|
|
87
66
|
if (!props.separators)
|
|
88
67
|
return null;
|
|
89
68
|
return props.ItemSeparatorComponent ?? null;
|
|
90
69
|
}, [props.separators, props.ItemSeparatorComponent]);
|
|
91
70
|
const dataLength = data?.length ?? 0;
|
|
92
|
-
const wrappedRenderItem =
|
|
71
|
+
const wrappedRenderItem = useCallback((masonryProps) => {
|
|
93
72
|
if (!providedRenderItem)
|
|
94
73
|
return null;
|
|
95
74
|
const { index, data: item } = masonryProps;
|
|
96
75
|
const isFirst = index === 0;
|
|
97
76
|
const isLast = index === dataLength - 1;
|
|
98
77
|
const isOnly = dataLength === 1;
|
|
99
|
-
return (
|
|
78
|
+
return _jsxs(_Fragment, { children: [isFirst ? null : separator, providedRenderItem({
|
|
100
79
|
...masonryProps,
|
|
101
80
|
item,
|
|
102
81
|
isFirst,
|
|
@@ -104,7 +83,7 @@ function _ListItemsContent({ data, renderItem: providedRenderItem, fetchNextPage
|
|
|
104
83
|
isOnly,
|
|
105
84
|
})] });
|
|
106
85
|
}, [providedRenderItem, separator, dataLength]);
|
|
107
|
-
return
|
|
86
|
+
return useMasonry({
|
|
108
87
|
positioner,
|
|
109
88
|
resizeObserver,
|
|
110
89
|
height: Math.max(1, height),
|
|
@@ -112,7 +91,7 @@ function _ListItemsContent({ data, renderItem: providedRenderItem, fetchNextPage
|
|
|
112
91
|
isScrolling,
|
|
113
92
|
items: data ?? [],
|
|
114
93
|
render: wrappedRenderItem,
|
|
115
|
-
onRender: maybeLoadMore,
|
|
94
|
+
onRender: useScrollBasedLoading ? undefined : maybeLoadMore,
|
|
116
95
|
});
|
|
117
96
|
}
|
|
118
97
|
/**
|
|
@@ -120,45 +99,42 @@ function _ListItemsContent({ data, renderItem: providedRenderItem, fetchNextPage
|
|
|
120
99
|
* Handles infinite loading via Masonic's `useInfiniteLoader`, item separators, and exposes a `scrollToIndex` imperative handle via `ref`.
|
|
121
100
|
* Must be rendered inside `List.Provider`.
|
|
122
101
|
*/
|
|
123
|
-
function ListItems(props) {
|
|
124
|
-
const { ready } =
|
|
102
|
+
export function ListItems(props) {
|
|
103
|
+
const { ready } = useListContext();
|
|
125
104
|
if (!ready)
|
|
126
105
|
return null;
|
|
127
|
-
return (
|
|
106
|
+
return _jsx(_ListItemsContent, { ...props });
|
|
128
107
|
}
|
|
129
108
|
/**
|
|
130
109
|
* Styled slot rendered above `List.Items`; applies the `header` composition style from the list's style sheet.
|
|
131
110
|
* Must be rendered inside `List.Provider`.
|
|
132
111
|
*/
|
|
133
|
-
const ListHeader = ({ children, ...viewProps }) => {
|
|
134
|
-
const { styles } =
|
|
135
|
-
return ((
|
|
112
|
+
export const ListHeader = ({ children, ...viewProps }) => {
|
|
113
|
+
const { styles } = useListContext();
|
|
114
|
+
return (_jsx(View, { ...viewProps, css: [styles.header, viewProps.css], children: children }));
|
|
136
115
|
};
|
|
137
|
-
exports.ListHeader = ListHeader;
|
|
138
116
|
/**
|
|
139
117
|
* Styled slot rendered below `List.Items`; falls back to `ListProviderProps.ListFooterComponent` when no `children` are given.
|
|
140
118
|
* Renders nothing when both sources are empty. Must be rendered inside `List.Provider`.
|
|
141
119
|
*/
|
|
142
|
-
const ListFooter = ({ children, ...viewProps }) => {
|
|
143
|
-
const { styles, props } =
|
|
144
|
-
const footer = children ?? (
|
|
120
|
+
export const ListFooter = ({ children, ...viewProps }) => {
|
|
121
|
+
const { styles, props } = useListContext();
|
|
122
|
+
const footer = children ?? (TypeGuards.isFunction(props.ListFooterComponent)
|
|
145
123
|
? props.ListFooterComponent()
|
|
146
124
|
: props.ListFooterComponent);
|
|
147
125
|
if (!footer)
|
|
148
126
|
return null;
|
|
149
|
-
return ((
|
|
127
|
+
return (_jsx(View, { ...viewProps, css: [styles.footer, viewProps.css], children: footer }));
|
|
150
128
|
};
|
|
151
|
-
exports.ListFooter = ListFooter;
|
|
152
129
|
/**
|
|
153
130
|
* Renders `ListProviderProps.placeholder` when it is a valid React element; otherwise renders nothing.
|
|
154
131
|
* Typically used to show an `EmptyPlaceholder` when the list has no data. Must be rendered inside `List.Provider`.
|
|
155
132
|
*/
|
|
156
|
-
const ListPlaceholder = () => {
|
|
157
|
-
const { props } =
|
|
133
|
+
export const ListPlaceholder = () => {
|
|
134
|
+
const { props } = useListContext();
|
|
158
135
|
const { placeholder } = props;
|
|
159
|
-
if (
|
|
160
|
-
return (
|
|
136
|
+
if (React.isValidElement(placeholder))
|
|
137
|
+
return _jsx(_Fragment, { children: placeholder });
|
|
161
138
|
return null;
|
|
162
139
|
};
|
|
163
|
-
exports.ListPlaceholder = ListPlaceholder;
|
|
164
140
|
//# sourceMappingURL=elements.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"elements.js","sourceRoot":"","sources":["../../../src/components/List/elements.tsx"],"names":[],"mappings":"
|
|
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"}
|
|
@@ -1,44 +1,27 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.List = List;
|
|
18
|
-
const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
|
|
19
|
-
const WebStyleRegistry_1 = require("../../lib/WebStyleRegistry");
|
|
20
|
-
const context_1 = require("./context");
|
|
21
|
-
const elements_1 = require("./elements");
|
|
22
|
-
__exportStar(require("./styles"), exports);
|
|
23
|
-
__exportStar(require("./types"), exports);
|
|
24
|
-
__exportStar(require("./context"), exports);
|
|
25
|
-
__exportStar(require("./elements"), exports);
|
|
26
|
-
__exportStar(require("./scroll"), exports);
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { WebStyleRegistry } from '../../lib/WebStyleRegistry';
|
|
3
|
+
import { ListProvider } from './context';
|
|
4
|
+
import { ListWrapper, ListItems, ListHeader, ListFooter, ListPlaceholder } from './elements';
|
|
5
|
+
export * from './styles';
|
|
6
|
+
export * from './types';
|
|
7
|
+
export * from './context';
|
|
8
|
+
export * from './elements';
|
|
9
|
+
export * from './scroll';
|
|
27
10
|
/**
|
|
28
11
|
* Virtualized, optionally multi-column list with built-in infinite scroll, item separators, and a programmable scroll handle.
|
|
29
12
|
* Rendering is powered by Masonic; the list measures its container via `ResizeObserver` and will not render items until layout is ready.
|
|
30
13
|
* Uses: `List.Provider`, `List.Wrapper`, `List.Items`, `List.Footer`, `List.Placeholder`
|
|
31
14
|
*/
|
|
32
|
-
function List(props) {
|
|
33
|
-
const { data, renderItem,
|
|
34
|
-
return ((
|
|
15
|
+
export function List(props) {
|
|
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, {})] }) }));
|
|
35
18
|
}
|
|
36
|
-
List.Provider =
|
|
37
|
-
List.Wrapper =
|
|
38
|
-
List.Items =
|
|
39
|
-
List.Header =
|
|
40
|
-
List.Footer =
|
|
41
|
-
List.Placeholder =
|
|
19
|
+
List.Provider = ListProvider;
|
|
20
|
+
List.Wrapper = ListWrapper;
|
|
21
|
+
List.Items = ListItems;
|
|
22
|
+
List.Header = ListHeader;
|
|
23
|
+
List.Footer = ListFooter;
|
|
24
|
+
List.Placeholder = ListPlaceholder;
|
|
42
25
|
List.styleRegistryName = 'List';
|
|
43
26
|
List.elements = ['wrapper', 'list', 'header', 'footer', 'separator', 'placeholder', 'positioner'];
|
|
44
27
|
List.rootElement = 'wrapper';
|
|
@@ -48,5 +31,5 @@ List.withVariantTypes = (styles) => {
|
|
|
48
31
|
List.defaultProps = {
|
|
49
32
|
separators: true,
|
|
50
33
|
};
|
|
51
|
-
|
|
34
|
+
WebStyleRegistry.registerComponent(List);
|
|
52
35
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/List/index.tsx"],"names":[],"mappings":"
|
|
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"}
|
|
@@ -1,14 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
const masonic_1 = require("masonic");
|
|
6
|
-
const useIsomorphicEffect_1 = require("../../lib/hooks/useIsomorphicEffect");
|
|
7
|
-
const useWindowSize_1 = require("../../lib/hooks/useWindowSize");
|
|
1
|
+
import { useState } from 'react';
|
|
2
|
+
import { useContainerPosition, useScroller as useMasonicScroller, } from 'masonic';
|
|
3
|
+
import { useIsomorphicEffect } from '../../lib/hooks/useIsomorphicEffect';
|
|
4
|
+
import { useWindowSize } from '../../lib/hooks/useWindowSize';
|
|
8
5
|
function useElementScroller(ref) {
|
|
9
|
-
const [isScrolling, setIsScrolling] =
|
|
10
|
-
const [scrollTop, setScrollTop] =
|
|
11
|
-
|
|
6
|
+
const [isScrolling, setIsScrolling] = useState(false);
|
|
7
|
+
const [scrollTop, setScrollTop] = useState(0);
|
|
8
|
+
const [scrollHeight, setScrollHeight] = useState(0);
|
|
9
|
+
useIsomorphicEffect(() => {
|
|
12
10
|
if (typeof window === 'undefined')
|
|
13
11
|
return;
|
|
14
12
|
const { current } = ref;
|
|
@@ -19,6 +17,7 @@ function useElementScroller(ref) {
|
|
|
19
17
|
return;
|
|
20
18
|
tick = window.requestAnimationFrame(() => {
|
|
21
19
|
setScrollTop(current.scrollTop);
|
|
20
|
+
setScrollHeight(current.scrollHeight);
|
|
22
21
|
tick = void 0;
|
|
23
22
|
});
|
|
24
23
|
};
|
|
@@ -31,7 +30,7 @@ function useElementScroller(ref) {
|
|
|
31
30
|
}
|
|
32
31
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
33
32
|
}, [ref.current]);
|
|
34
|
-
|
|
33
|
+
useIsomorphicEffect(() => {
|
|
35
34
|
if (typeof window === 'undefined')
|
|
36
35
|
return;
|
|
37
36
|
setIsScrolling(true);
|
|
@@ -40,41 +39,42 @@ function useElementScroller(ref) {
|
|
|
40
39
|
}, 1000 / 6);
|
|
41
40
|
return () => window.clearTimeout(to);
|
|
42
41
|
}, [scrollTop]);
|
|
43
|
-
return { scrollTop, isScrolling };
|
|
42
|
+
return { scrollTop, scrollHeight, isScrolling };
|
|
44
43
|
}
|
|
45
44
|
/**
|
|
46
45
|
* `UseListScrollHook` implementation that tracks scroll position on a specific container element.
|
|
47
46
|
* Use when the list's `List.Wrapper` is itself the scrolling surface (i.e. `overflow: auto/scroll`).
|
|
48
47
|
* This is the default scroll hook; override via `ListProviderProps.scrollHook` or set `windowScroll` to switch to `useWindowScroll`.
|
|
49
48
|
*/
|
|
50
|
-
const useElementScroll = (wrapperRef, layout) => {
|
|
51
|
-
const { scrollTop, isScrolling } = useElementScroller(wrapperRef);
|
|
49
|
+
export const useElementScroll = (wrapperRef, layout) => {
|
|
50
|
+
const { scrollTop, scrollHeight, isScrolling } = useElementScroller(wrapperRef);
|
|
52
51
|
return {
|
|
53
52
|
scrollTop,
|
|
53
|
+
scrollHeight,
|
|
54
54
|
isScrolling,
|
|
55
55
|
height: layout?.offsetHeight ?? 0,
|
|
56
56
|
width: layout?.width ?? 0,
|
|
57
57
|
scrollElement: wrapperRef,
|
|
58
58
|
};
|
|
59
59
|
};
|
|
60
|
-
exports.useElementScroll = useElementScroll;
|
|
61
60
|
/**
|
|
62
61
|
* `UseListScrollHook` implementation that tracks the browser window scroll position.
|
|
63
62
|
* Use when the page itself is the scrolling surface (e.g. no overflow container around the list).
|
|
64
63
|
* Enable via `ListProviderProps.windowScroll` or by passing this directly to `ListProviderProps.scrollHook`.
|
|
65
64
|
*/
|
|
66
|
-
const useWindowScroll = (wrapperRef, layout) => {
|
|
67
|
-
const windowSize =
|
|
65
|
+
export const useWindowScroll = (wrapperRef, layout) => {
|
|
66
|
+
const windowSize = useWindowSize();
|
|
68
67
|
const windowHeight = windowSize[1];
|
|
69
|
-
const { offset } =
|
|
70
|
-
const { scrollTop, isScrolling } = (
|
|
68
|
+
const { offset } = useContainerPosition(wrapperRef, windowSize);
|
|
69
|
+
const { scrollTop, isScrolling } = useMasonicScroller(offset);
|
|
70
|
+
const scrollHeight = typeof document !== 'undefined' ? document.documentElement.scrollHeight : 0;
|
|
71
71
|
return {
|
|
72
72
|
scrollTop,
|
|
73
|
+
scrollHeight,
|
|
73
74
|
isScrolling,
|
|
74
75
|
height: windowHeight,
|
|
75
76
|
width: layout?.width ?? 0,
|
|
76
77
|
scrollElement: typeof window !== 'undefined' ? window : null,
|
|
77
78
|
};
|
|
78
79
|
};
|
|
79
|
-
exports.useWindowScroll = useWindowScroll;
|
|
80
80
|
//# sourceMappingURL=scroll.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scroll.js","sourceRoot":"","sources":["../../../src/components/List/scroll.ts"],"names":[],"mappings":"
|
|
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"}
|