react-native-terra-ui 0.1.1 → 0.2.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/CHANGELOG.md +96 -0
- package/lib/module/components/avatar/Avatar.js +118 -35
- package/lib/module/components/avatar/Avatar.js.map +1 -1
- package/lib/module/components/box/Box.js +15 -2
- package/lib/module/components/box/Box.js.map +1 -1
- package/lib/module/components/box/utils.js +4 -1
- package/lib/module/components/box/utils.js.map +1 -1
- package/lib/module/components/button/Button.js +7 -14
- package/lib/module/components/button/Button.js.map +1 -1
- package/lib/module/components/chip/Chip.js +372 -0
- package/lib/module/components/chip/Chip.js.map +1 -0
- package/lib/module/components/chip/index.js +4 -0
- package/lib/module/components/chip/index.js.map +1 -0
- package/lib/module/components/chip/types.js +2 -0
- package/lib/module/components/chip/types.js.map +1 -0
- package/lib/module/components/chip/utils.js +36 -0
- package/lib/module/components/chip/utils.js.map +1 -0
- package/lib/module/components/empty-state/EmptyState.js +200 -0
- package/lib/module/components/empty-state/EmptyState.js.map +1 -0
- package/lib/module/components/empty-state/index.js +4 -0
- package/lib/module/components/empty-state/index.js.map +1 -0
- package/lib/module/components/empty-state/types.js +2 -0
- package/lib/module/components/empty-state/types.js.map +1 -0
- package/lib/module/components/header/header-buttons.js +31 -36
- package/lib/module/components/header/header-buttons.js.map +1 -1
- package/lib/module/components/header/index.js +1 -1
- package/lib/module/components/header/index.js.map +1 -1
- package/lib/module/components/header/parts/HeaderGradientOverlay.js +38 -0
- package/lib/module/components/header/parts/HeaderGradientOverlay.js.map +1 -0
- package/lib/module/components/header/variants/LargeTitleHeader/index.js +69 -99
- package/lib/module/components/header/variants/LargeTitleHeader/index.js.map +1 -1
- package/lib/module/components/header/variants/TitleHeader/index.js +32 -63
- package/lib/module/components/header/variants/TitleHeader/index.js.map +1 -1
- package/lib/module/components/icon/Icon.js +20 -8
- package/lib/module/components/icon/Icon.js.map +1 -1
- package/lib/module/components/image/Image.js +54 -0
- package/lib/module/components/image/Image.js.map +1 -0
- package/lib/module/components/image/index.js +4 -0
- package/lib/module/components/image/index.js.map +1 -0
- package/lib/module/components/image/types.js +4 -0
- package/lib/module/components/image/types.js.map +1 -0
- package/lib/module/components/index.js +4 -0
- package/lib/module/components/index.js.map +1 -1
- package/lib/module/components/portal/Portal.js +42 -0
- package/lib/module/components/portal/Portal.js.map +1 -0
- package/lib/module/components/portal/PortalContext.js +1 -16
- package/lib/module/components/portal/PortalContext.js.map +1 -1
- package/lib/module/components/portal/PortalHost.js +16 -14
- package/lib/module/components/portal/PortalHost.js.map +1 -1
- package/lib/module/components/portal/PortalProvider.js +51 -19
- package/lib/module/components/portal/PortalProvider.js.map +1 -1
- package/lib/module/components/portal/index.js +1 -1
- package/lib/module/components/portal/index.js.map +1 -1
- package/lib/module/components/screen/Screen.js +25 -28
- package/lib/module/components/screen/Screen.js.map +1 -1
- package/lib/module/components/screen/ScreenContext.js +7 -5
- package/lib/module/components/screen/ScreenContext.js.map +1 -1
- package/lib/module/components/screen/ScreenFlashList.js +144 -0
- package/lib/module/components/screen/ScreenFlashList.js.map +1 -0
- package/lib/module/components/screen/ScreenFlatList.js +88 -27
- package/lib/module/components/screen/ScreenFlatList.js.map +1 -1
- package/lib/module/components/screen/ScreenScrollView.js +101 -34
- package/lib/module/components/screen/ScreenScrollView.js.map +1 -1
- package/lib/module/components/screen/index.js +1 -0
- package/lib/module/components/screen/index.js.map +1 -1
- package/lib/module/components/screen/parts/BottomSafeArea.js +62 -0
- package/lib/module/components/screen/parts/BottomSafeArea.js.map +1 -0
- package/lib/module/components/screen/parts/ScreenPlaceholder.js +50 -0
- package/lib/module/components/screen/parts/ScreenPlaceholder.js.map +1 -0
- package/lib/module/components/screen/types.js +4 -0
- package/lib/module/components/screen/types.js.map +1 -0
- package/lib/module/components/screen/utils.js +12 -9
- package/lib/module/components/screen/utils.js.map +1 -1
- package/lib/module/components/surface/Surface.js +16 -9
- package/lib/module/components/surface/Surface.js.map +1 -1
- package/lib/module/components/text/Text.js +23 -5
- package/lib/module/components/text/Text.js.map +1 -1
- package/lib/module/components/toast/Toast.js +8 -8
- package/lib/module/components/toast/Toast.js.map +1 -1
- package/lib/module/components/toolbar/Toolbar.js +268 -0
- package/lib/module/components/toolbar/Toolbar.js.map +1 -0
- package/lib/module/components/toolbar/index.js +4 -0
- package/lib/module/components/toolbar/index.js.map +1 -0
- package/lib/module/context/ThemeProvider.js +5 -2
- package/lib/module/context/ThemeProvider.js.map +1 -1
- package/lib/module/{components/icon/utils.js → theme/defaults/icons.js} +1 -1
- package/lib/module/theme/defaults/icons.js.map +1 -0
- package/lib/module/theme/defaults/image.js +30 -0
- package/lib/module/theme/defaults/image.js.map +1 -0
- package/lib/module/theme/index.js +1 -1
- package/lib/module/theme/{configure.js → registry.js} +21 -28
- package/lib/module/theme/registry.js.map +1 -0
- package/lib/module/theme/runtime.js +1 -1
- package/lib/module/theme/theme.js +91 -10
- package/lib/module/theme/theme.js.map +1 -1
- package/lib/module/theme/tokens/dark.js +59 -68
- package/lib/module/theme/tokens/dark.js.map +1 -1
- package/lib/module/theme/tokens/light.js +49 -67
- package/lib/module/theme/tokens/light.js.map +1 -1
- package/lib/module/theme/tokens/primitives.js +241 -20
- package/lib/module/theme/tokens/primitives.js.map +1 -1
- package/lib/module/utils/accent-utils.js +4 -4
- package/lib/module/utils/accent-utils.js.map +1 -1
- package/lib/typescript/src/components/avatar/Avatar.d.ts.map +1 -1
- package/lib/typescript/src/components/avatar/types.d.ts +4 -4
- package/lib/typescript/src/components/avatar/types.d.ts.map +1 -1
- package/lib/typescript/src/components/box/Box.d.ts.map +1 -1
- package/lib/typescript/src/components/box/utils.d.ts +6 -1
- package/lib/typescript/src/components/box/utils.d.ts.map +1 -1
- package/lib/typescript/src/components/button/Button.d.ts +1 -1
- package/lib/typescript/src/components/button/Button.d.ts.map +1 -1
- package/lib/typescript/src/components/chip/Chip.d.ts +24 -0
- package/lib/typescript/src/components/chip/Chip.d.ts.map +1 -0
- package/lib/typescript/src/components/chip/index.d.ts +4 -0
- package/lib/typescript/src/components/chip/index.d.ts.map +1 -0
- package/lib/typescript/src/components/chip/types.d.ts +8 -0
- package/lib/typescript/src/components/chip/types.d.ts.map +1 -0
- package/lib/typescript/src/components/chip/utils.d.ts +8 -0
- package/lib/typescript/src/components/chip/utils.d.ts.map +1 -0
- package/lib/typescript/src/components/empty-state/EmptyState.d.ts +45 -0
- package/lib/typescript/src/components/empty-state/EmptyState.d.ts.map +1 -0
- package/lib/typescript/src/components/empty-state/index.d.ts +4 -0
- package/lib/typescript/src/components/empty-state/index.d.ts.map +1 -0
- package/lib/typescript/src/components/empty-state/types.d.ts +6 -0
- package/lib/typescript/src/components/empty-state/types.d.ts.map +1 -0
- package/lib/typescript/src/components/header/header-buttons.d.ts +27 -0
- package/lib/typescript/src/components/header/header-buttons.d.ts.map +1 -1
- package/lib/typescript/src/components/header/index.d.ts +1 -1
- package/lib/typescript/src/components/header/index.d.ts.map +1 -1
- package/lib/typescript/src/components/header/parts/HeaderGradientOverlay.d.ts +7 -0
- package/lib/typescript/src/components/header/parts/HeaderGradientOverlay.d.ts.map +1 -0
- package/lib/typescript/src/components/header/variants/LargeTitleHeader/index.d.ts +1 -1
- package/lib/typescript/src/components/header/variants/LargeTitleHeader/index.d.ts.map +1 -1
- package/lib/typescript/src/components/header/variants/TitleHeader/index.d.ts +18 -7
- package/lib/typescript/src/components/header/variants/TitleHeader/index.d.ts.map +1 -1
- package/lib/typescript/src/components/icon/Icon.d.ts.map +1 -1
- package/lib/typescript/src/components/image/Image.d.ts +16 -0
- package/lib/typescript/src/components/image/Image.d.ts.map +1 -0
- package/lib/typescript/src/components/image/index.d.ts +3 -0
- package/lib/typescript/src/components/image/index.d.ts.map +1 -0
- package/lib/typescript/src/components/image/types.d.ts +7 -0
- package/lib/typescript/src/components/image/types.d.ts.map +1 -0
- package/lib/typescript/src/components/index.d.ts +4 -0
- package/lib/typescript/src/components/index.d.ts.map +1 -1
- package/lib/typescript/src/components/portal/Portal.d.ts +26 -0
- package/lib/typescript/src/components/portal/Portal.d.ts.map +1 -0
- package/lib/typescript/src/components/portal/PortalContext.d.ts +11 -14
- package/lib/typescript/src/components/portal/PortalContext.d.ts.map +1 -1
- package/lib/typescript/src/components/portal/PortalHost.d.ts +9 -4
- package/lib/typescript/src/components/portal/PortalHost.d.ts.map +1 -1
- package/lib/typescript/src/components/portal/PortalProvider.d.ts +3 -3
- package/lib/typescript/src/components/portal/PortalProvider.d.ts.map +1 -1
- package/lib/typescript/src/components/portal/index.d.ts +4 -2
- package/lib/typescript/src/components/portal/index.d.ts.map +1 -1
- package/lib/typescript/src/components/screen/Screen.d.ts +18 -13
- package/lib/typescript/src/components/screen/Screen.d.ts.map +1 -1
- package/lib/typescript/src/components/screen/ScreenContext.d.ts +12 -9
- package/lib/typescript/src/components/screen/ScreenContext.d.ts.map +1 -1
- package/lib/typescript/src/components/screen/ScreenFlashList.d.ts +43 -0
- package/lib/typescript/src/components/screen/ScreenFlashList.d.ts.map +1 -0
- package/lib/typescript/src/components/screen/ScreenFlatList.d.ts +17 -7
- package/lib/typescript/src/components/screen/ScreenFlatList.d.ts.map +1 -1
- package/lib/typescript/src/components/screen/ScreenScrollView.d.ts +51 -16
- package/lib/typescript/src/components/screen/ScreenScrollView.d.ts.map +1 -1
- package/lib/typescript/src/components/screen/index.d.ts +3 -0
- package/lib/typescript/src/components/screen/index.d.ts.map +1 -1
- package/lib/typescript/src/components/screen/parts/BottomSafeArea.d.ts +30 -0
- package/lib/typescript/src/components/screen/parts/BottomSafeArea.d.ts.map +1 -0
- package/lib/typescript/src/components/screen/parts/ScreenPlaceholder.d.ts +22 -0
- package/lib/typescript/src/components/screen/parts/ScreenPlaceholder.d.ts.map +1 -0
- package/lib/typescript/src/components/screen/types.d.ts +42 -0
- package/lib/typescript/src/components/screen/types.d.ts.map +1 -0
- package/lib/typescript/src/components/screen/utils.d.ts +9 -9
- package/lib/typescript/src/components/screen/utils.d.ts.map +1 -1
- package/lib/typescript/src/components/surface/Surface.d.ts +7 -0
- package/lib/typescript/src/components/surface/Surface.d.ts.map +1 -1
- package/lib/typescript/src/components/text/Text.d.ts.map +1 -1
- package/lib/typescript/src/components/toolbar/Toolbar.d.ts +115 -0
- package/lib/typescript/src/components/toolbar/Toolbar.d.ts.map +1 -0
- package/lib/typescript/src/components/toolbar/index.d.ts +3 -0
- package/lib/typescript/src/components/toolbar/index.d.ts.map +1 -0
- package/lib/typescript/src/context/ThemeProvider.d.ts.map +1 -1
- package/lib/typescript/src/{components/icon/utils.d.ts → theme/defaults/icons.d.ts} +2 -2
- package/lib/typescript/src/theme/defaults/icons.d.ts.map +1 -0
- package/lib/typescript/src/theme/defaults/image.d.ts +4 -0
- package/lib/typescript/src/theme/defaults/image.d.ts.map +1 -0
- package/lib/typescript/src/theme/index.d.ts +1 -1
- package/lib/typescript/src/theme/index.d.ts.map +1 -1
- package/lib/typescript/src/theme/{configure.d.ts → registry.d.ts} +1 -1
- package/lib/typescript/src/theme/registry.d.ts.map +1 -0
- package/lib/typescript/src/theme/theme.d.ts +21 -1
- package/lib/typescript/src/theme/theme.d.ts.map +1 -1
- package/lib/typescript/src/theme/tokens/dark.d.ts +41 -64
- package/lib/typescript/src/theme/tokens/dark.d.ts.map +1 -1
- package/lib/typescript/src/theme/tokens/light.d.ts +44 -65
- package/lib/typescript/src/theme/tokens/light.d.ts.map +1 -1
- package/lib/typescript/src/theme/tokens/primitives.d.ts +228 -17
- package/lib/typescript/src/theme/tokens/primitives.d.ts.map +1 -1
- package/lib/typescript/src/theme/types.d.ts +65 -35
- package/lib/typescript/src/theme/types.d.ts.map +1 -1
- package/package.json +24 -12
- package/skills/terra-ui/SKILL.md +193 -0
- package/skills/terra-ui/references/recipes.md +198 -0
- package/skills/terra-ui/references/troubleshooting.md +112 -0
- package/src/components/avatar/Avatar.tsx +128 -38
- package/src/components/avatar/types.ts +5 -5
- package/src/components/box/Box.tsx +13 -1
- package/src/components/box/utils.ts +10 -0
- package/src/components/button/Button.tsx +7 -15
- package/src/components/chip/Chip.tsx +444 -0
- package/src/components/chip/index.ts +3 -0
- package/src/components/chip/types.ts +15 -0
- package/src/components/chip/utils.ts +34 -0
- package/src/components/empty-state/EmptyState.tsx +209 -0
- package/src/components/empty-state/index.ts +3 -0
- package/src/components/empty-state/types.ts +5 -0
- package/src/components/header/header-buttons.tsx +33 -45
- package/src/components/header/index.ts +2 -0
- package/src/components/header/parts/HeaderGradientOverlay.tsx +29 -0
- package/src/components/header/variants/LargeTitleHeader/index.tsx +68 -102
- package/src/components/header/variants/TitleHeader/index.tsx +47 -56
- package/src/components/icon/Icon.tsx +20 -15
- package/src/components/image/Image.tsx +48 -0
- package/src/components/image/index.ts +2 -0
- package/src/components/image/types.ts +7 -0
- package/src/components/index.ts +4 -0
- package/src/components/portal/Portal.tsx +55 -0
- package/src/components/portal/PortalContext.tsx +14 -22
- package/src/components/portal/PortalHost.tsx +17 -10
- package/src/components/portal/PortalProvider.tsx +58 -21
- package/src/components/portal/index.ts +4 -2
- package/src/components/screen/Screen.tsx +45 -59
- package/src/components/screen/ScreenContext.tsx +19 -12
- package/src/components/screen/ScreenFlashList.tsx +196 -0
- package/src/components/screen/ScreenFlatList.tsx +100 -39
- package/src/components/screen/ScreenScrollView.tsx +114 -53
- package/src/components/screen/index.ts +3 -0
- package/src/components/screen/parts/BottomSafeArea.tsx +60 -0
- package/src/components/screen/parts/ScreenPlaceholder.tsx +55 -0
- package/src/components/screen/types.ts +43 -0
- package/src/components/screen/utils.ts +29 -15
- package/src/components/surface/Surface.tsx +17 -20
- package/src/components/text/Text.tsx +23 -5
- package/src/components/toast/Toast.tsx +8 -8
- package/src/components/toolbar/Toolbar.tsx +353 -0
- package/src/components/toolbar/index.ts +6 -0
- package/src/context/ThemeProvider.tsx +5 -4
- package/src/{components/icon/utils.tsx → theme/defaults/icons.tsx} +1 -1
- package/src/theme/defaults/image.tsx +34 -0
- package/src/theme/index.ts +1 -1
- package/src/theme/{configure.ts → registry.ts} +19 -34
- package/src/theme/runtime.ts +1 -1
- package/src/theme/theme.ts +127 -13
- package/src/theme/tokens/dark.ts +60 -69
- package/src/theme/tokens/light.ts +50 -68
- package/src/theme/tokens/primitives.ts +248 -20
- package/src/theme/types.ts +67 -35
- package/src/utils/accent-utils.ts +4 -4
- package/lib/module/components/icon/utils.js.map +0 -1
- package/lib/module/theme/configure.js.map +0 -1
- package/lib/typescript/src/components/icon/utils.d.ts.map +0 -1
- package/lib/typescript/src/theme/configure.d.ts.map +0 -1
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import { Children, Fragment, forwardRef, isValidElement, useMemo } from 'react';
|
|
4
|
-
import {
|
|
5
|
-
import { useUnistyles } from 'react-native-unistyles';
|
|
4
|
+
import { View } from 'react-native';
|
|
5
|
+
import { StyleSheet, useUnistyles } from 'react-native-unistyles';
|
|
6
6
|
import { resolveThemeColor } from "../../utils/resolve-theme-color.js";
|
|
7
7
|
import { PortalProvider } from "../portal/index.js";
|
|
8
8
|
import { ScreenScrollProvider } from "./ScreenContext.js";
|
|
9
|
+
import { ScreenFlashList } from "./ScreenFlashList.js";
|
|
9
10
|
import { ScreenFlatList } from "./ScreenFlatList.js";
|
|
10
11
|
import { ScreenScrollView } from "./ScreenScrollView.js";
|
|
11
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -32,13 +33,14 @@ function ScreenHeader({
|
|
|
32
33
|
children: children
|
|
33
34
|
});
|
|
34
35
|
}
|
|
36
|
+
ScreenHeader.displayName = 'Screen.Header';
|
|
35
37
|
|
|
36
38
|
/** True if `children` directly contains a `Screen.Header`. */
|
|
37
39
|
function hasScreenHeader(children) {
|
|
38
40
|
let found = false;
|
|
39
41
|
Children.forEach(children, child => {
|
|
40
42
|
if (found) return;
|
|
41
|
-
if (/*#__PURE__*/isValidElement(child) && child.type ===
|
|
43
|
+
if (/*#__PURE__*/isValidElement(child) && typeof child.type !== 'string' && child.type.displayName === 'Screen.Header') found = true;
|
|
42
44
|
});
|
|
43
45
|
return found;
|
|
44
46
|
}
|
|
@@ -58,36 +60,25 @@ function hasScreenHeader(children) {
|
|
|
58
60
|
const ScreenBase = /*#__PURE__*/forwardRef(function Screen({
|
|
59
61
|
children,
|
|
60
62
|
bg = 'background',
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
margins = true,
|
|
63
|
+
margins,
|
|
64
|
+
hasMargins,
|
|
64
65
|
style,
|
|
65
66
|
...rest
|
|
66
|
-
},
|
|
67
|
+
}, _ref) {
|
|
68
|
+
const hasHeader = useMemo(() => hasScreenHeader(children), [children]);
|
|
69
|
+
const resolvedMargins = margins ?? (hasMargins === false ? 'none' : 'all');
|
|
67
70
|
const {
|
|
68
71
|
theme
|
|
69
72
|
} = useUnistyles();
|
|
70
|
-
const
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
isInTabView: inTabView,
|
|
80
|
-
margins: margins,
|
|
81
|
-
hasHeader: hasHeader,
|
|
82
|
-
children: /*#__PURE__*/_jsx(PortalProvider, {
|
|
83
|
-
children: /*#__PURE__*/_jsx(SafeAreaView, {
|
|
84
|
-
ref: ref,
|
|
85
|
-
edges: safeEdges,
|
|
86
|
-
style: [{
|
|
87
|
-
flex: 1,
|
|
88
|
-
backgroundColor
|
|
89
|
-
}, style],
|
|
90
|
-
...rest,
|
|
73
|
+
const resolvedBg = resolveThemeColor(bg, theme) ?? theme.color.background;
|
|
74
|
+
return /*#__PURE__*/_jsx(View, {
|
|
75
|
+
style: [styles.container, style],
|
|
76
|
+
...rest,
|
|
77
|
+
children: /*#__PURE__*/_jsx(ScreenScrollProvider, {
|
|
78
|
+
background: resolvedBg,
|
|
79
|
+
margins: resolvedMargins,
|
|
80
|
+
hasHeader: hasHeader,
|
|
81
|
+
children: /*#__PURE__*/_jsx(PortalProvider, {
|
|
91
82
|
children: children
|
|
92
83
|
})
|
|
93
84
|
})
|
|
@@ -96,5 +87,11 @@ const ScreenBase = /*#__PURE__*/forwardRef(function Screen({
|
|
|
96
87
|
ScreenBase.Header = ScreenHeader;
|
|
97
88
|
ScreenBase.ScrollView = ScreenScrollView;
|
|
98
89
|
ScreenBase.FlatList = ScreenFlatList;
|
|
90
|
+
ScreenBase.FlashList = ScreenFlashList;
|
|
99
91
|
export const Screen = ScreenBase;
|
|
92
|
+
const styles = StyleSheet.create((_theme, _runtime) => ({
|
|
93
|
+
container: {
|
|
94
|
+
flex: 1
|
|
95
|
+
}
|
|
96
|
+
}));
|
|
100
97
|
//# sourceMappingURL=Screen.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Children","Fragment","forwardRef","isValidElement","useMemo","
|
|
1
|
+
{"version":3,"names":["Children","Fragment","forwardRef","isValidElement","useMemo","View","StyleSheet","useUnistyles","resolveThemeColor","PortalProvider","ScreenScrollProvider","ScreenFlashList","ScreenFlatList","ScreenScrollView","jsx","_jsx","ScreenHeader","children","as","rest","Component","displayName","hasScreenHeader","found","forEach","child","type","ScreenBase","Screen","bg","margins","hasMargins","style","_ref","hasHeader","resolvedMargins","theme","resolvedBg","color","background","styles","container","Header","ScrollView","FlatList","FlashList","create","_theme","_runtime","flex"],"sourceRoot":"../../../../src","sources":["components/screen/Screen.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
import { createContext, useCallback, useContext, useMemo, useState } from 'react';
|
|
4
4
|
import { useAnimatedRef, useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated';
|
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
|
+
/** `PortalHost` name shared by `Screen.ScrollView` / `Screen.FlatList` and header variants that portal content into them. */
|
|
7
|
+
export const SCREEN_HEADER_PORTAL_HOST = 'screen-header';
|
|
6
8
|
export const ScreenContext = /*#__PURE__*/createContext(null);
|
|
7
9
|
/**
|
|
8
10
|
* Owns the screen's shared scroll ref, offset, snap offsets, and header collapse
|
|
@@ -10,9 +12,9 @@ export const ScreenContext = /*#__PURE__*/createContext(null);
|
|
|
10
12
|
* scroll containers bind the ref via {@link useScreen}.
|
|
11
13
|
*/
|
|
12
14
|
export function ScreenScrollProvider({
|
|
15
|
+
background = 'transparent',
|
|
13
16
|
children,
|
|
14
|
-
|
|
15
|
-
margins = true,
|
|
17
|
+
margins = 'all',
|
|
16
18
|
hasHeader = false
|
|
17
19
|
}) {
|
|
18
20
|
const scrollY = useSharedValue(0);
|
|
@@ -30,6 +32,7 @@ export function ScreenScrollProvider({
|
|
|
30
32
|
}
|
|
31
33
|
});
|
|
32
34
|
const value = useMemo(() => ({
|
|
35
|
+
background,
|
|
33
36
|
margins,
|
|
34
37
|
hasHeader,
|
|
35
38
|
scrollY,
|
|
@@ -37,9 +40,8 @@ export function ScreenScrollProvider({
|
|
|
37
40
|
headerSnapOffsets,
|
|
38
41
|
setHeaderCollapseHeight,
|
|
39
42
|
scrollRef,
|
|
40
|
-
scrollHandler
|
|
41
|
-
|
|
42
|
-
}), [margins, hasHeader, scrollY, headerCollapseHeight, headerSnapOffsets, setHeaderCollapseHeight, scrollRef, scrollHandler, isInTabView]);
|
|
43
|
+
scrollHandler
|
|
44
|
+
}), [background, margins, hasHeader, scrollY, headerCollapseHeight, headerSnapOffsets, setHeaderCollapseHeight, scrollRef, scrollHandler]);
|
|
43
45
|
return /*#__PURE__*/_jsx(ScreenContext.Provider, {
|
|
44
46
|
value: value,
|
|
45
47
|
children: children
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createContext","useCallback","useContext","useMemo","useState","useAnimatedRef","useAnimatedScrollHandler","useSharedValue","jsx","_jsx","ScreenContext","ScreenScrollProvider","
|
|
1
|
+
{"version":3,"names":["createContext","useCallback","useContext","useMemo","useState","useAnimatedRef","useAnimatedScrollHandler","useSharedValue","jsx","_jsx","SCREEN_HEADER_PORTAL_HOST","ScreenContext","ScreenScrollProvider","background","children","margins","hasHeader","scrollY","headerCollapseHeight","headerSnapOffsets","setHeaderSnapOffsets","scrollRef","setHeaderCollapseHeight","height","rounded","Math","round","value","undefined","scrollHandler","onScroll","event","contentOffset","y","Provider","useScreen","context","Error"],"sourceRoot":"../../../../src","sources":["components/screen/ScreenContext.tsx"],"mappings":";;AAAA,SACEA,aAAa,EAEbC,WAAW,EACXC,UAAU,EACVC,OAAO,EACPC,QAAQ,QACH,OAAO;AAEd,SAIEC,cAAc,EACdC,wBAAwB,EACxBC,cAAc,QACT,yBAAyB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAMjC;AACA,OAAO,MAAMC,yBAAyB,GAAG,eAAe;AAsCxD,OAAO,MAAMC,aAAa,gBAAGX,aAAa,CAA4B,IAAI,CAAC;AAY3E;AACA;AACA;AACA;AACA;AACA,OAAO,SAASY,oBAAoBA,CAAC;EACnCC,UAAU,GAAG,aAAa;EAC1BC,QAAQ;EACRC,OAAO,GAAG,KAAK;EACfC,SAAS,GAAG;AACa,CAAC,EAAE;EAC5B,MAAMC,OAAO,GAAGV,cAAc,CAAC,CAAC,CAAC;EACjC,MAAMW,oBAAoB,GAAGX,cAAc,CAAC,CAAC,CAAC;EAC9C,MAAM,CAACY,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGhB,QAAQ,CAAW,CAAC;EACtE,MAAMiB,SAAS,GAAGhB,cAAc,CAAsB,CAAC;EAEvD,MAAMiB,uBAAuB,GAAGrB,WAAW,CACxCsB,MAAc,IAAK;IAClB,MAAMC,OAAO,GAAGC,IAAI,CAACC,KAAK,CAACH,MAAM,CAAC;IAClCL,oBAAoB,CAACS,KAAK,GAAGH,OAAO;IACpCJ,oBAAoB,CAACI,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC,EAAEA,OAAO,CAAC,GAAGI,SAAS,CAAC;EAC9D,CAAC,EACD,CAACV,oBAAoB,CACvB,CAAC;EAED,MAAMW,aAAa,GAAGvB,wBAAwB,CAAC;IAC7CwB,QAAQ,EAAGC,KAAK,IAAK;MACnBd,OAAO,CAACU,KAAK,GAAGI,KAAK,CAACC,aAAa,CAACC,CAAC;IACvC;EACF,CAAC,CAAC;EAEF,MAAMN,KAAK,GAAGxB,OAAO,CACnB,OAAO;IACLU,UAAU;IACVE,OAAO;IACPC,SAAS;IACTC,OAAO;IACPC,oBAAoB;IACpBC,iBAAiB;IACjBG,uBAAuB;IACvBD,SAAS;IACTQ;EACF,CAAC,CAAC,EACF,CACEhB,UAAU,EACVE,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,oBAAoB,EACpBC,iBAAiB,EACjBG,uBAAuB,EACvBD,SAAS,EACTQ,aAAa,CAEjB,CAAC;EAED,oBACEpB,IAAA,CAACE,aAAa,CAACuB,QAAQ;IAACP,KAAK,EAAEA,KAAM;IAAAb,QAAA,EAAEA;EAAQ,CAAyB,CAAC;AAE7E;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASqB,SAASA,CAAA,EAAuB;EAC9C,MAAMC,OAAO,GAAGlC,UAAU,CAACS,aAAa,CAAC;EACzC,IAAI,CAACyB,OAAO,EAAE;IACZ,MAAM,IAAIC,KAAK,CAAC,kDAAkD,CAAC;EACrE;EACA,OAAOD,OAAO;AAChB","ignoreList":[]}
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { FlashList } from '@shopify/flash-list';
|
|
4
|
+
import { View } from 'react-native';
|
|
5
|
+
import Animated, { useAnimatedScrollHandler, useComposedEventHandler } from 'react-native-reanimated';
|
|
6
|
+
import { StyleSheet } from 'react-native-unistyles';
|
|
7
|
+
import { PortalHost } from "../portal/index.js";
|
|
8
|
+
import { BottomSafeArea } from "./parts/BottomSafeArea.js";
|
|
9
|
+
import { renderScreenPlaceholder } from "./parts/ScreenPlaceholder.js";
|
|
10
|
+
import { SCREEN_HEADER_PORTAL_HOST, useScreen } from "./ScreenContext.js";
|
|
11
|
+
import { hasXMargin, hasYMargin, renderListHeader } from "./utils.js";
|
|
12
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
+
const AnimatedFlashList = Animated.createAnimatedComponent(FlashList);
|
|
14
|
+
/**
|
|
15
|
+
* `FlashList` variant of `Screen.ScrollView`: mirrors scroll offset into the
|
|
16
|
+
* screen's shared `scrollY`, hosts the portal target above the list, and
|
|
17
|
+
* applies token-driven content padding.
|
|
18
|
+
*
|
|
19
|
+
* Requires `@shopify/flash-list` — it is a peer dependency of
|
|
20
|
+
* `react-native-terra-ui` and must be installed in the consuming app.
|
|
21
|
+
*
|
|
22
|
+
* Note: unlike `Screen.FlatList`, this does not bind the screen's shared
|
|
23
|
+
* imperative `scrollRef` — `FlashList`'s ref exposes a different (non
|
|
24
|
+
* Reanimated-compatible) imperative API.
|
|
25
|
+
*
|
|
26
|
+
* Shares `loading` / `LoadingComponent` / `EmptyComponent` / `margins` /
|
|
27
|
+
* `horizontal` with `Screen.ScrollView`, so a screen can swap one container for
|
|
28
|
+
* another without relearning its API.
|
|
29
|
+
*
|
|
30
|
+
* @example
|
|
31
|
+
* ```tsx
|
|
32
|
+
* <Screen.FlashList data={items} renderItem={({ item }) => <Row item={item} />} />
|
|
33
|
+
* ```
|
|
34
|
+
*
|
|
35
|
+
* @example Loading and empty placeholders
|
|
36
|
+
* ```tsx
|
|
37
|
+
* <Screen.FlashList
|
|
38
|
+
* data={items}
|
|
39
|
+
* loading={isLoading}
|
|
40
|
+
* EmptyComponent={<EmptyState icon="status.info" title="Nothing yet" fill />}
|
|
41
|
+
* renderItem={({ item }) => <Row item={item} />}
|
|
42
|
+
* />
|
|
43
|
+
* ```
|
|
44
|
+
*/
|
|
45
|
+
export function ScreenFlashList({
|
|
46
|
+
data,
|
|
47
|
+
style,
|
|
48
|
+
contentContainerStyle,
|
|
49
|
+
ListHeaderComponent,
|
|
50
|
+
ListFooterComponent,
|
|
51
|
+
ListEmptyComponent,
|
|
52
|
+
horizontal = false,
|
|
53
|
+
loading = false,
|
|
54
|
+
LoadingComponent,
|
|
55
|
+
EmptyComponent,
|
|
56
|
+
margins,
|
|
57
|
+
bottomInset,
|
|
58
|
+
onScroll,
|
|
59
|
+
...rest
|
|
60
|
+
}) {
|
|
61
|
+
if (FlashList == null) {
|
|
62
|
+
throw new Error('[react-native-terra-ui] Screen.FlashList requires "@shopify/flash-list" to be installed in your app. Run `yarn add @shopify/flash-list` (or the npm/pnpm equivalent) and rebuild.');
|
|
63
|
+
}
|
|
64
|
+
const {
|
|
65
|
+
background,
|
|
66
|
+
scrollHandler,
|
|
67
|
+
headerSnapOffsets,
|
|
68
|
+
margins: screenMargins,
|
|
69
|
+
hasHeader
|
|
70
|
+
} = useScreen();
|
|
71
|
+
const resolvedMargins = margins ?? screenMargins;
|
|
72
|
+
// The placeholder rides in on `ListEmptyComponent` rather than replacing the
|
|
73
|
+
// list, so the header portal and snap offsets stay put. While loading the
|
|
74
|
+
// list is fed an empty `data` so that slot is the one that renders.
|
|
75
|
+
const placeholder = renderScreenPlaceholder({
|
|
76
|
+
loading,
|
|
77
|
+
LoadingComponent,
|
|
78
|
+
EmptyComponent,
|
|
79
|
+
isEmpty: !data || data.length === 0
|
|
80
|
+
});
|
|
81
|
+
const jsScrollHandler = useAnimatedScrollHandler(event => {
|
|
82
|
+
if (onScroll) onScroll(event);
|
|
83
|
+
}, [onScroll]);
|
|
84
|
+
const composedHandler = useComposedEventHandler([scrollHandler, jsScrollHandler]);
|
|
85
|
+
|
|
86
|
+
// `AnimatedFlashList` is typed for `unknown` items, so the remaining props
|
|
87
|
+
// are cast back to its prop type — minus the ones set explicitly below,
|
|
88
|
+
// which the spread would otherwise re-supply.
|
|
89
|
+
const listProps = rest;
|
|
90
|
+
|
|
91
|
+
// A caller naming its own `bottomInset` has taken the bottom over entirely,
|
|
92
|
+
// and a horizontal list has no bottom edge to clear.
|
|
93
|
+
const needsBottomSafeArea = bottomInset === undefined && !horizontal;
|
|
94
|
+
const footerComponent = /*#__PURE__*/_jsxs(_Fragment, {
|
|
95
|
+
children: [renderListHeader(ListFooterComponent), needsBottomSafeArea ? /*#__PURE__*/_jsx(BottomSafeArea, {}) : null]
|
|
96
|
+
});
|
|
97
|
+
const headerComponent = /*#__PURE__*/_jsxs(View, {
|
|
98
|
+
style: styles.headerWrapper(resolvedMargins),
|
|
99
|
+
children: [/*#__PURE__*/_jsx(PortalHost, {
|
|
100
|
+
name: SCREEN_HEADER_PORTAL_HOST
|
|
101
|
+
}), renderListHeader(ListHeaderComponent)]
|
|
102
|
+
});
|
|
103
|
+
return /*#__PURE__*/_jsx(AnimatedFlashList, {
|
|
104
|
+
data: loading ? [] : data,
|
|
105
|
+
style: [{
|
|
106
|
+
backgroundColor: background
|
|
107
|
+
}, style],
|
|
108
|
+
horizontal: horizontal,
|
|
109
|
+
contentInsetAdjustmentBehavior: hasHeader ? 'never' : undefined,
|
|
110
|
+
contentContainerStyle: [styles.content(resolvedMargins, hasHeader, bottomInset), contentContainerStyle],
|
|
111
|
+
ListHeaderComponent: headerComponent,
|
|
112
|
+
ListFooterComponent: footerComponent,
|
|
113
|
+
ListEmptyComponent: placeholder ?? ListEmptyComponent,
|
|
114
|
+
showsVerticalScrollIndicator: false,
|
|
115
|
+
scrollEventThrottle: 16,
|
|
116
|
+
snapToOffsets: headerSnapOffsets,
|
|
117
|
+
...listProps,
|
|
118
|
+
onScroll: composedHandler
|
|
119
|
+
});
|
|
120
|
+
}
|
|
121
|
+
const styles = StyleSheet.create((theme, runtime) => ({
|
|
122
|
+
content: (margins, hasHeader, bottomInset) => {
|
|
123
|
+
return {
|
|
124
|
+
flexGrow: 1,
|
|
125
|
+
// The header is absolutely positioned, so the list reserves its full
|
|
126
|
+
// height — bar plus top safe area. This assumes the scroll view does not
|
|
127
|
+
// also get UIKit's automatic inset adjustment: on a native tab screen
|
|
128
|
+
// that means `disableAutomaticContentInsets` on the tab, or the two
|
|
129
|
+
// insets are counted twice.
|
|
130
|
+
paddingTop: (hasHeader ? theme.layout.header.height + runtime.insets.top : 0) + (hasYMargin(margins) ? theme.layout.screen.margin.y : 0),
|
|
131
|
+
paddingHorizontal: hasXMargin(margins) ? theme.layout.screen.margin.x : 0,
|
|
132
|
+
// The safe area is `BottomSafeArea`'s job; counting it here as well
|
|
133
|
+
// would leave a gap the height of the gesture bar.
|
|
134
|
+
paddingBottom: bottomInset ?? (hasYMargin(margins) ? theme.layout.screen.margin.y : 0)
|
|
135
|
+
};
|
|
136
|
+
},
|
|
137
|
+
safeArea: {
|
|
138
|
+
height: runtime.insets.top
|
|
139
|
+
},
|
|
140
|
+
headerWrapper: margins => ({
|
|
141
|
+
marginHorizontal: hasXMargin(margins) ? -theme.layout.screen.margin.x : 0
|
|
142
|
+
})
|
|
143
|
+
}));
|
|
144
|
+
//# sourceMappingURL=ScreenFlashList.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["FlashList","View","Animated","useAnimatedScrollHandler","useComposedEventHandler","StyleSheet","PortalHost","BottomSafeArea","renderScreenPlaceholder","SCREEN_HEADER_PORTAL_HOST","useScreen","hasXMargin","hasYMargin","renderListHeader","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","AnimatedFlashList","createAnimatedComponent","ScreenFlashList","data","style","contentContainerStyle","ListHeaderComponent","ListFooterComponent","ListEmptyComponent","horizontal","loading","LoadingComponent","EmptyComponent","margins","bottomInset","onScroll","rest","Error","background","scrollHandler","headerSnapOffsets","screenMargins","hasHeader","resolvedMargins","placeholder","isEmpty","length","jsScrollHandler","event","composedHandler","listProps","needsBottomSafeArea","undefined","footerComponent","children","headerComponent","styles","headerWrapper","name","backgroundColor","contentInsetAdjustmentBehavior","content","showsVerticalScrollIndicator","scrollEventThrottle","snapToOffsets","create","theme","runtime","flexGrow","paddingTop","layout","header","height","insets","top","screen","margin","y","paddingHorizontal","x","paddingBottom","safeArea","marginHorizontal"],"sourceRoot":"../../../../src","sources":["components/screen/ScreenFlashList.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,70 +1,104 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import { createElement, isValidElement } from 'react';
|
|
4
3
|
import { View } from 'react-native';
|
|
5
4
|
import Animated, { useAnimatedScrollHandler, useComposedEventHandler } from 'react-native-reanimated';
|
|
6
|
-
import {
|
|
7
|
-
import { useUnistyles } from 'react-native-unistyles';
|
|
5
|
+
import { StyleSheet } from 'react-native-unistyles';
|
|
8
6
|
import { PortalHost } from "../portal/index.js";
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
if (/*#__PURE__*/isValidElement(ListHeaderComponent)) return ListHeaderComponent;
|
|
15
|
-
return /*#__PURE__*/createElement(ListHeaderComponent);
|
|
16
|
-
}
|
|
17
|
-
|
|
7
|
+
import { BottomSafeArea } from "./parts/BottomSafeArea.js";
|
|
8
|
+
import { renderScreenPlaceholder } from "./parts/ScreenPlaceholder.js";
|
|
9
|
+
import { SCREEN_HEADER_PORTAL_HOST, useScreen } from "./ScreenContext.js";
|
|
10
|
+
import { hasXMargin, hasYMargin, renderListHeader } from "./utils.js";
|
|
11
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
18
12
|
/**
|
|
19
13
|
* `FlatList` variant of `Screen.ScrollView`: binds the screen's shared scroll
|
|
20
14
|
* ref, mirrors offset into `scrollY`, hosts the portal target above the list,
|
|
21
15
|
* and applies token-driven content padding.
|
|
22
16
|
*
|
|
17
|
+
* Shares `loading` / `LoadingComponent` / `EmptyComponent` / `margins` /
|
|
18
|
+
* `horizontal` with `Screen.ScrollView`, so a screen can swap one container for
|
|
19
|
+
* another without relearning its API.
|
|
20
|
+
*
|
|
23
21
|
* @example
|
|
24
22
|
* ```tsx
|
|
25
23
|
* <Screen.FlatList data={items} renderItem={({ item }) => <Row item={item} />} />
|
|
26
24
|
* ```
|
|
25
|
+
*
|
|
26
|
+
* @example Loading and empty placeholders
|
|
27
|
+
* ```tsx
|
|
28
|
+
* <Screen.FlatList
|
|
29
|
+
* data={items}
|
|
30
|
+
* loading={isLoading}
|
|
31
|
+
* EmptyComponent={<EmptyState icon="status.info" title="Nothing yet" fill />}
|
|
32
|
+
* renderItem={({ item }) => <Row item={item} />}
|
|
33
|
+
* />
|
|
34
|
+
* ```
|
|
27
35
|
*/
|
|
28
36
|
export function ScreenFlatList({
|
|
37
|
+
data,
|
|
29
38
|
style,
|
|
30
39
|
contentContainerStyle,
|
|
31
40
|
ListHeaderComponent,
|
|
41
|
+
ListFooterComponent,
|
|
42
|
+
ListEmptyComponent,
|
|
43
|
+
horizontal = false,
|
|
44
|
+
loading = false,
|
|
45
|
+
LoadingComponent,
|
|
46
|
+
EmptyComponent,
|
|
32
47
|
margins,
|
|
33
48
|
bottomInset,
|
|
34
49
|
onScroll,
|
|
35
50
|
...rest
|
|
36
51
|
}) {
|
|
37
52
|
const {
|
|
38
|
-
|
|
39
|
-
} = useUnistyles();
|
|
40
|
-
const {
|
|
41
|
-
top
|
|
42
|
-
} = useSafeAreaInsets();
|
|
43
|
-
const {
|
|
53
|
+
background,
|
|
44
54
|
scrollRef,
|
|
45
55
|
scrollHandler,
|
|
46
56
|
headerSnapOffsets,
|
|
47
57
|
margins: screenMargins,
|
|
48
58
|
hasHeader
|
|
49
59
|
} = useScreen();
|
|
50
|
-
const
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
60
|
+
const resolvedMargins = margins ?? screenMargins;
|
|
61
|
+
// The placeholder rides in on `ListEmptyComponent` rather than replacing the
|
|
62
|
+
// list, so the header portal, scroll binding and snap offsets all stay put.
|
|
63
|
+
// While loading the list is fed an empty `data` so that slot is the one that
|
|
64
|
+
// renders.
|
|
65
|
+
const placeholder = renderScreenPlaceholder({
|
|
66
|
+
loading,
|
|
67
|
+
LoadingComponent,
|
|
68
|
+
EmptyComponent,
|
|
69
|
+
isEmpty: !data || data.length === 0
|
|
70
|
+
});
|
|
56
71
|
const jsScrollHandler = useAnimatedScrollHandler(event => {
|
|
57
72
|
if (onScroll) onScroll(event);
|
|
58
73
|
}, [onScroll]);
|
|
59
74
|
const composedHandler = useComposedEventHandler([scrollHandler, jsScrollHandler]);
|
|
75
|
+
|
|
76
|
+
// A caller naming its own `bottomInset` has taken the bottom over entirely,
|
|
77
|
+
// and a horizontal list has no bottom edge to clear.
|
|
78
|
+
const needsBottomSafeArea = bottomInset === undefined && !horizontal;
|
|
79
|
+
const footerComponent = /*#__PURE__*/_jsxs(_Fragment, {
|
|
80
|
+
children: [renderListHeader(ListFooterComponent), needsBottomSafeArea ? /*#__PURE__*/_jsx(BottomSafeArea, {}) : null]
|
|
81
|
+
});
|
|
60
82
|
const headerComponent = /*#__PURE__*/_jsxs(View, {
|
|
61
|
-
|
|
83
|
+
style: styles.headerWrapper(resolvedMargins),
|
|
84
|
+
children: [hasHeader ? /*#__PURE__*/_jsx(View, {
|
|
85
|
+
style: styles.header
|
|
86
|
+
}) : null, /*#__PURE__*/_jsx(PortalHost, {
|
|
87
|
+
name: SCREEN_HEADER_PORTAL_HOST
|
|
88
|
+
}), renderListHeader(ListHeaderComponent)]
|
|
62
89
|
});
|
|
63
90
|
return /*#__PURE__*/_jsx(Animated.FlatList, {
|
|
64
91
|
ref: scrollRef,
|
|
65
|
-
|
|
66
|
-
|
|
92
|
+
data: loading ? [] : data,
|
|
93
|
+
style: [{
|
|
94
|
+
backgroundColor: background
|
|
95
|
+
}, style],
|
|
96
|
+
horizontal: horizontal,
|
|
97
|
+
contentInsetAdjustmentBehavior: hasHeader ? 'never' : undefined,
|
|
98
|
+
contentContainerStyle: [styles.content(resolvedMargins, hasHeader, bottomInset), contentContainerStyle],
|
|
67
99
|
ListHeaderComponent: headerComponent,
|
|
100
|
+
ListFooterComponent: footerComponent,
|
|
101
|
+
ListEmptyComponent: placeholder ?? ListEmptyComponent,
|
|
68
102
|
showsVerticalScrollIndicator: false,
|
|
69
103
|
scrollEventThrottle: 16,
|
|
70
104
|
snapToOffsets: headerSnapOffsets,
|
|
@@ -72,4 +106,31 @@ export function ScreenFlatList({
|
|
|
72
106
|
onScroll: composedHandler
|
|
73
107
|
});
|
|
74
108
|
}
|
|
109
|
+
const styles = StyleSheet.create((theme, runtime) => ({
|
|
110
|
+
scrollContent: {
|
|
111
|
+
flexGrow: 1
|
|
112
|
+
},
|
|
113
|
+
content: (margins, hasHeader, bottomInset) => ({
|
|
114
|
+
flexGrow: 1,
|
|
115
|
+
// The header is absolutely positioned, so the list reserves its full
|
|
116
|
+
// height — bar plus top safe area. This assumes the scroll view does not
|
|
117
|
+
// also get UIKit's automatic inset adjustment: on a native tab screen
|
|
118
|
+
// that means `disableAutomaticContentInsets` on the tab, or the two
|
|
119
|
+
// insets are counted twice.
|
|
120
|
+
paddingTop: (hasHeader ? theme.layout.header.height + runtime.insets.top : 0) + (hasYMargin(margins) ? theme.layout.screen.margin.y : 0),
|
|
121
|
+
paddingHorizontal: hasXMargin(margins) ? theme.layout.screen.margin.x : 0,
|
|
122
|
+
// The safe area is `BottomSafeArea`'s job; counting it here as well would
|
|
123
|
+
// leave a gap the height of the gesture bar.
|
|
124
|
+
paddingBottom: bottomInset ?? (hasYMargin(margins) ? theme.layout.screen.margin.y : 0)
|
|
125
|
+
}),
|
|
126
|
+
safeArea: {
|
|
127
|
+
height: runtime.insets.top
|
|
128
|
+
},
|
|
129
|
+
headerWrapper: margins => ({
|
|
130
|
+
marginHorizontal: hasXMargin(margins) ? -theme.layout.screen.margin.x : 0
|
|
131
|
+
}),
|
|
132
|
+
header: {
|
|
133
|
+
height: theme.layout.header.height
|
|
134
|
+
}
|
|
135
|
+
}));
|
|
75
136
|
//# sourceMappingURL=ScreenFlatList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["View","Animated","useAnimatedScrollHandler","useComposedEventHandler","StyleSheet","PortalHost","BottomSafeArea","renderScreenPlaceholder","SCREEN_HEADER_PORTAL_HOST","useScreen","hasXMargin","hasYMargin","renderListHeader","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","ScreenFlatList","data","style","contentContainerStyle","ListHeaderComponent","ListFooterComponent","ListEmptyComponent","horizontal","loading","LoadingComponent","EmptyComponent","margins","bottomInset","onScroll","rest","background","scrollRef","scrollHandler","headerSnapOffsets","screenMargins","hasHeader","resolvedMargins","placeholder","isEmpty","length","jsScrollHandler","event","composedHandler","needsBottomSafeArea","undefined","footerComponent","children","headerComponent","styles","headerWrapper","header","name","FlatList","ref","backgroundColor","contentInsetAdjustmentBehavior","content","showsVerticalScrollIndicator","scrollEventThrottle","snapToOffsets","create","theme","runtime","scrollContent","flexGrow","paddingTop","layout","height","insets","top","screen","margin","y","paddingHorizontal","x","paddingBottom","safeArea","marginHorizontal"],"sourceRoot":"../../../../src","sources":["components/screen/ScreenFlatList.tsx"],"mappings":"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","ignoreList":[]}
|