@ankhorage/zora 25.9.1 → 25.9.2
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 +6 -0
- package/README.md +1 -1
- package/dist/capabilities/index.js +12 -3
- package/dist/capabilities/index.js.map +6 -5
- package/dist/features/list/adapters/inbound/FlatList.d.ts.map +1 -1
- package/dist/features/list/adapters/inbound/FlatList.js +2 -1
- package/dist/features/list/adapters/inbound/FlatList.js.map +1 -1
- package/dist/features/list/adapters/inbound/SectionList.d.ts.map +1 -1
- package/dist/features/list/adapters/inbound/SectionList.js +2 -1
- package/dist/features/list/adapters/inbound/SectionList.js.map +1 -1
- package/dist/features/list/constants/virtualization.d.ts +6 -0
- package/dist/features/list/constants/virtualization.d.ts.map +1 -0
- package/dist/features/list/constants/virtualization.js +6 -0
- package/dist/features/list/constants/virtualization.js.map +1 -0
- package/dist/features/list/flatListMeta.d.ts +4 -0
- package/dist/features/list/flatListMeta.d.ts.map +1 -1
- package/dist/features/list/flatListMeta.js +2 -1
- package/dist/features/list/flatListMeta.js.map +1 -1
- package/dist/features/list/sectionListMeta.d.ts +2 -0
- package/dist/features/list/sectionListMeta.d.ts.map +1 -1
- package/dist/features/list/sectionListMeta.js +4 -1
- package/dist/features/list/sectionListMeta.js.map +1 -1
- package/package.json +1 -1
- package/src/features/list/adapters/inbound/FlatList.tsx +3 -2
- package/src/features/list/adapters/inbound/SectionList.tsx +3 -2
- package/src/features/list/adapters/inbound/virtualizedLists.test.tsx +90 -0
- package/src/features/list/constants/virtualization.ts +5 -0
- package/src/features/list/flatListMeta.ts +2 -1
- package/src/features/list/sectionListMeta.ts +4 -1
- package/src/features/list/virtualizationDefaults.test.ts +24 -0
- package/web-dist/chunks/{Accordion-wf60fekp.js → Accordion-rkg1y7x3.js} +10 -4
- package/web-dist/chunks/{Accordion-nsamv0p0.js → Accordion-xt8vafkn.js} +1 -1
- package/web-dist/components/data-table/DataTable.js +2 -2
- package/web-dist/components/flat-list/FlatList.js +1 -1
- package/web-dist/components/list/List.js +1 -1
- package/web-dist/components/list-item/ListItem.js +1 -1
- package/web-dist/components/list-section/ListSection.js +1 -1
- package/web-dist/components/section-list/SectionList.js +1 -1
- package/web-dist/components/skeleton/Skeleton.js +2 -2
- package/web-dist/components/skeleton-card/SkeletonCard.js +2 -2
- package/web-dist/components/skeleton-list/SkeletonList.js +2 -2
- package/web-dist/components/skeleton-text/SkeletonText.js +2 -2
- package/web-dist/components/tree-item/TreeItem.js +1 -1
- package/web-dist/manifest.json +16 -16
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlatList.d.ts","sourceRoot":"","sources":["../../../../../src/features/list/adapters/inbound/FlatList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;
|
|
1
|
+
{"version":3,"file":"FlatList.d.ts","sourceRoot":"","sources":["../../../../../src/features/list/adapters/inbound/FlatList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAQzE,wGAAwG;AACxG,eAAO,MAAM,QAAQ,yDAAoC,CAAC"}
|
|
@@ -2,13 +2,14 @@ import React from 'react';
|
|
|
2
2
|
import { FlatList as NativeFlatList } from 'react-native';
|
|
3
3
|
import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
|
|
4
4
|
import { Text } from '../../../typography/public';
|
|
5
|
+
import { LIST_VIRTUALIZATION_DEFAULTS } from '../../constants/virtualization';
|
|
5
6
|
import { HorizontalListSeparator } from './HorizontalListSeparator';
|
|
6
7
|
import { useListVisibility } from './useListVisibility';
|
|
7
8
|
import { VerticalListSeparator } from './VerticalListSeparator';
|
|
8
9
|
/*** Virtualizes keyed manifest children using React Native FlatList and the Runtime repeat contract. */
|
|
9
10
|
export const FlatList = withZoraThemeScope(FlatListInner);
|
|
10
11
|
/*** Maps serializable list options to the native virtualized list. */
|
|
11
|
-
function FlatListInner({ mode: _mode, themeId: _themeId, children, horizontal, refreshing = false, initialNumToRender, maxToRenderPerBatch, windowSize, onEndReachedThreshold, showsScrollIndicator = true, bounces, showSeparators, headerText, footerText, emptyText, onRefresh, onEndReached, onVisibleItemsChange, interactionPolicy, testID, }) {
|
|
12
|
+
function FlatListInner({ mode: _mode, themeId: _themeId, children, horizontal, refreshing = false, initialNumToRender, maxToRenderPerBatch = LIST_VIRTUALIZATION_DEFAULTS.maxToRenderPerBatch, windowSize, onEndReachedThreshold = LIST_VIRTUALIZATION_DEFAULTS.onEndReachedThreshold, showsScrollIndicator = true, bounces, showSeparators, headerText, footerText, emptyText, onRefresh, onEndReached, onVisibleItemsChange, interactionPolicy, testID, }) {
|
|
12
13
|
const items = React.Children.toArray(children);
|
|
13
14
|
const passive = interactionPolicy === 'passive';
|
|
14
15
|
const onViewableItemsChanged = useListVisibility(onVisibleItemsChange, passive);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlatList.js","sourceRoot":"","sources":["../../../../../src/features/list/adapters/inbound/FlatList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,cAAc,CAAC;AAG1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,oDAAoD,CAAC;AACxF,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,wGAAwG;AACxG,MAAM,CAAC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,aAAa,CAAC,CAAC;AAE1D,sEAAsE;AACtE,SAAS,aAAa,CAAC,EACrB,IAAI,EAAE,KAAK,EACX,OAAO,EAAE,QAAQ,EACjB,QAAQ,EACR,UAAU,EACV,UAAU,GAAG,KAAK,EAClB,kBAAkB,EAClB,mBAAmB,
|
|
1
|
+
{"version":3,"file":"FlatList.js","sourceRoot":"","sources":["../../../../../src/features/list/adapters/inbound/FlatList.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { FlatList as NativeFlatList } from 'react-native';\n\nimport type { ManifestListProps } from '../../../../types/manifest-list';\nimport { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';\nimport { Text } from '../../../typography/public';\nimport { LIST_VIRTUALIZATION_DEFAULTS } from '../../constants/virtualization';\nimport { HorizontalListSeparator } from './HorizontalListSeparator';\nimport { useListVisibility } from './useListVisibility';\nimport { VerticalListSeparator } from './VerticalListSeparator';\n\n/*** Virtualizes keyed manifest children using React Native FlatList and the Runtime repeat contract. */\nexport const FlatList = withZoraThemeScope(FlatListInner);\n\n/*** Maps serializable list options to the native virtualized list. */\nfunction FlatListInner({\n mode: _mode,\n themeId: _themeId,\n children,\n horizontal,\n refreshing = false,\n initialNumToRender,\n maxToRenderPerBatch = LIST_VIRTUALIZATION_DEFAULTS.maxToRenderPerBatch,\n windowSize,\n onEndReachedThreshold = LIST_VIRTUALIZATION_DEFAULTS.onEndReachedThreshold,\n showsScrollIndicator = true,\n bounces,\n showSeparators,\n headerText,\n footerText,\n emptyText,\n onRefresh,\n onEndReached,\n onVisibleItemsChange,\n interactionPolicy,\n testID,\n}: ManifestListProps) {\n const items = React.Children.toArray(children);\n const passive = interactionPolicy === 'passive';\n const onViewableItemsChanged = useListVisibility(onVisibleItemsChange, passive);\n return (\n <NativeFlatList\n data={items}\n renderItem={({ item }) => <>{item}</>}\n keyExtractor={(item, index) =>\n React.isValidElement(item) && item.key !== null ? String(item.key) : String(index)\n }\n horizontal={horizontal}\n refreshing={refreshing}\n onRefresh={passive ? undefined : onRefresh}\n onEndReached={passive ? undefined : onEndReached}\n onEndReachedThreshold={onEndReachedThreshold}\n initialNumToRender={initialNumToRender}\n maxToRenderPerBatch={maxToRenderPerBatch}\n windowSize={windowSize}\n scrollEnabled={!passive}\n bounces={bounces}\n onViewableItemsChanged={onViewableItemsChanged}\n ItemSeparatorComponent={\n showSeparators ? (horizontal ? HorizontalListSeparator : VerticalListSeparator) : undefined\n }\n showsHorizontalScrollIndicator={showsScrollIndicator}\n showsVerticalScrollIndicator={showsScrollIndicator}\n ListHeaderComponent={headerText ? <Text>{headerText}</Text> : null}\n ListFooterComponent={footerText ? <Text>{footerText}</Text> : null}\n ListEmptyComponent={emptyText ? <Text>{emptyText}</Text> : null}\n testID={testID}\n />\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SectionList.d.ts","sourceRoot":"","sources":["../../../../../src/features/list/adapters/inbound/SectionList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;
|
|
1
|
+
{"version":3,"file":"SectionList.d.ts","sourceRoot":"","sources":["../../../../../src/features/list/adapters/inbound/SectionList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAShF,8FAA8F;AAC9F,eAAO,MAAM,WAAW,gEAAuC,CAAC"}
|
|
@@ -3,13 +3,14 @@ import { SectionList as NativeSectionList } from 'react-native';
|
|
|
3
3
|
import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
|
|
4
4
|
import { Text } from '../../../typography/public';
|
|
5
5
|
import { partitionListSections } from '../../application/use-cases/partitionListSections';
|
|
6
|
+
import { LIST_VIRTUALIZATION_DEFAULTS } from '../../constants/virtualization';
|
|
6
7
|
import { HorizontalListSeparator } from './HorizontalListSeparator';
|
|
7
8
|
import { useListVisibility } from './useListVisibility';
|
|
8
9
|
import { VerticalListSeparator } from './VerticalListSeparator';
|
|
9
10
|
/*** Virtualizes manifest children grouped by explicit section identities and child counts. */
|
|
10
11
|
export const SectionList = withZoraThemeScope(SectionListInner);
|
|
11
12
|
/*** Maps section identities and native scroll options to a virtualized section list. */
|
|
12
|
-
function SectionListInner({ mode: _mode, themeId: _themeId, children, sections, horizontal, refreshing = false, initialNumToRender, maxToRenderPerBatch, windowSize, onEndReachedThreshold, showsScrollIndicator = true, bounces, showSeparators, headerText, footerText, emptyText, onRefresh, onEndReached, onVisibleItemsChange, stickySectionHeadersEnabled = true, interactionPolicy, testID, }) {
|
|
13
|
+
function SectionListInner({ mode: _mode, themeId: _themeId, children, sections, horizontal, refreshing = false, initialNumToRender, maxToRenderPerBatch = LIST_VIRTUALIZATION_DEFAULTS.maxToRenderPerBatch, windowSize, onEndReachedThreshold = LIST_VIRTUALIZATION_DEFAULTS.onEndReachedThreshold, showsScrollIndicator = true, bounces, showSeparators, headerText, footerText, emptyText, onRefresh, onEndReached, onVisibleItemsChange, stickySectionHeadersEnabled = true, interactionPolicy, testID, }) {
|
|
13
14
|
const grouped = partitionListSections(React.Children.toArray(children), sections);
|
|
14
15
|
const passive = interactionPolicy === 'passive';
|
|
15
16
|
const onViewableItemsChanged = useListVisibility(onVisibleItemsChange, passive);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SectionList.js","sourceRoot":"","sources":["../../../../../src/features/list/adapters/inbound/SectionList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,IAAI,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAGhE,OAAO,EAAE,kBAAkB,EAAE,MAAM,oDAAoD,CAAC;AACxF,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAE,qBAAqB,EAAE,MAAM,mDAAmD,CAAC;AAC1F,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,8FAA8F;AAC9F,MAAM,CAAC,MAAM,WAAW,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;AAEhE,wFAAwF;AACxF,SAAS,gBAAgB,CAAC,EACxB,IAAI,EAAE,KAAK,EACX,OAAO,EAAE,QAAQ,EACjB,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,UAAU,GAAG,KAAK,EAClB,kBAAkB,EAClB,mBAAmB,
|
|
1
|
+
{"version":3,"file":"SectionList.js","sourceRoot":"","sources":["../../../../../src/features/list/adapters/inbound/SectionList.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { SectionList as NativeSectionList } from 'react-native';\n\nimport type { ManifestSectionListProps } from '../../../../types/manifest-list';\nimport { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';\nimport { Text } from '../../../typography/public';\nimport { partitionListSections } from '../../application/use-cases/partitionListSections';\nimport { LIST_VIRTUALIZATION_DEFAULTS } from '../../constants/virtualization';\nimport { HorizontalListSeparator } from './HorizontalListSeparator';\nimport { useListVisibility } from './useListVisibility';\nimport { VerticalListSeparator } from './VerticalListSeparator';\n\n/*** Virtualizes manifest children grouped by explicit section identities and child counts. */\nexport const SectionList = withZoraThemeScope(SectionListInner);\n\n/*** Maps section identities and native scroll options to a virtualized section list. */\nfunction SectionListInner({\n mode: _mode,\n themeId: _themeId,\n children,\n sections,\n horizontal,\n refreshing = false,\n initialNumToRender,\n maxToRenderPerBatch = LIST_VIRTUALIZATION_DEFAULTS.maxToRenderPerBatch,\n windowSize,\n onEndReachedThreshold = LIST_VIRTUALIZATION_DEFAULTS.onEndReachedThreshold,\n showsScrollIndicator = true,\n bounces,\n showSeparators,\n headerText,\n footerText,\n emptyText,\n onRefresh,\n onEndReached,\n onVisibleItemsChange,\n stickySectionHeadersEnabled = true,\n interactionPolicy,\n testID,\n}: ManifestSectionListProps) {\n const grouped = partitionListSections(React.Children.toArray(children), sections);\n const passive = interactionPolicy === 'passive';\n const onViewableItemsChanged = useListVisibility(onVisibleItemsChange, passive);\n return (\n <NativeSectionList\n sections={grouped}\n renderItem={({ item }) => <>{item}</>}\n keyExtractor={(item, index) =>\n React.isValidElement(item) && item.key !== null ? String(item.key) : String(index)\n }\n renderSectionHeader={({ section }) =>\n section.title ? <Text weight=\"semiBold\">{section.title}</Text> : null\n }\n horizontal={horizontal}\n refreshing={refreshing}\n onRefresh={passive ? undefined : onRefresh}\n onEndReached={passive ? undefined : onEndReached}\n onEndReachedThreshold={onEndReachedThreshold}\n initialNumToRender={initialNumToRender}\n maxToRenderPerBatch={maxToRenderPerBatch}\n windowSize={windowSize}\n stickySectionHeadersEnabled={!horizontal && stickySectionHeadersEnabled}\n scrollEnabled={!passive}\n bounces={bounces}\n onViewableItemsChanged={onViewableItemsChanged}\n ItemSeparatorComponent={\n showSeparators ? (horizontal ? HorizontalListSeparator : VerticalListSeparator) : undefined\n }\n showsHorizontalScrollIndicator={showsScrollIndicator}\n showsVerticalScrollIndicator={showsScrollIndicator}\n ListHeaderComponent={headerText ? <Text>{headerText}</Text> : null}\n ListFooterComponent={footerText ? <Text>{footerText}</Text> : null}\n ListEmptyComponent={emptyText ? <Text>{emptyText}</Text> : null}\n testID={testID}\n />\n );\n}\n"]}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/*** Shared explicit React Native virtualization and end-of-list defaults for ZORA lists. */
|
|
2
|
+
export declare const LIST_VIRTUALIZATION_DEFAULTS: {
|
|
3
|
+
readonly maxToRenderPerBatch: 10;
|
|
4
|
+
readonly onEndReachedThreshold: 2;
|
|
5
|
+
};
|
|
6
|
+
//# sourceMappingURL=virtualization.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"virtualization.d.ts","sourceRoot":"","sources":["../../../../src/features/list/constants/virtualization.ts"],"names":[],"mappings":"AAAA,4FAA4F;AAC5F,eAAO,MAAM,4BAA4B;;;CAG/B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"virtualization.js","sourceRoot":"","sources":["../../../../src/features/list/constants/virtualization.ts"],"names":[],"mappings":"AAAA,4FAA4F;AAC5F,MAAM,CAAC,MAAM,4BAA4B,GAAG;IAC1C,mBAAmB,EAAE,EAAE;IACvB,qBAAqB,EAAE,CAAC;CAChB,CAAC","sourcesContent":["/*** Shared explicit React Native virtualization and end-of-list defaults for ZORA lists. */\nexport const LIST_VIRTUALIZATION_DEFAULTS = {\n maxToRenderPerBatch: 10,\n onEndReachedThreshold: 2,\n} as const;\n"]}
|
|
@@ -4,6 +4,10 @@ export declare const flatListMeta: {
|
|
|
4
4
|
readonly directManifestNode: true;
|
|
5
5
|
readonly blueprint: {
|
|
6
6
|
readonly label: "Flat list";
|
|
7
|
+
readonly defaultProps: {
|
|
8
|
+
readonly maxToRenderPerBatch: 10;
|
|
9
|
+
readonly onEndReachedThreshold: 2;
|
|
10
|
+
};
|
|
7
11
|
};
|
|
8
12
|
readonly allowedChildren: readonly ["ActivityIndicator", "AuthScreen", "ForgotPasswordForm", "OAuthProviderButton", "OAuthProviderList", "OtpForm", "SignInForm", "SignUpForm", "Accordion", "Surface", "Avatar", "AvatarGroup", "Badge", "MediaCard", "MetricCard", "Chip", "ChipGroup", "DataTable", "DatePicker", "Dialog", "Pagination", "Rating", "SearchInput", "Tabs", "Toolbar", "Skeleton", "SkeletonCard", "SkeletonList", "SkeletonText", "IconButton", "Uploader", "MediaExplorer", "FileExplorer", "FlatList", "SectionList", "BottomSheet", "ProductCard", "View", "ScrollView", "Grid", "Gradient", "Divider", "Text", "Heading", "Icon", "Image", "Hero", "KeyboardAvoidingView", "Button", "ButtonGroup", "RadioGroup", "ThemeModeToggle", "TextInput", "TimePicker", "Form", "Card", "EmptyState", "SectionHeader", "PostCard", "ChatListItem", "MessageBubble", "ProgressRing", "Reader", "ContentRail", "MissingElement"];
|
|
9
13
|
readonly description: "Virtualized children. Put node.repeat on this list for keyed data and item bindings; bind selection on the child Button/Card press event. Bound the list viewport and avoid nesting in a same-direction ScrollView.";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flatListMeta.d.ts","sourceRoot":"","sources":["../../../src/features/list/flatListMeta.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"flatListMeta.d.ts","sourceRoot":"","sources":["../../../src/features/list/flatListMeta.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCa,CAAC"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { CONTAINER_ALLOWED_CHILDREN } from '../../constants/authoring';
|
|
2
|
+
import { LIST_VIRTUALIZATION_DEFAULTS } from './constants/virtualization';
|
|
2
3
|
export const flatListMeta = {
|
|
3
4
|
name: 'FlatList',
|
|
4
5
|
category: 'layout',
|
|
5
6
|
directManifestNode: true,
|
|
6
|
-
blueprint: { label: 'Flat list' },
|
|
7
|
+
blueprint: { label: 'Flat list', defaultProps: LIST_VIRTUALIZATION_DEFAULTS },
|
|
7
8
|
allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
|
|
8
9
|
description: 'Virtualized children. Put node.repeat on this list for keyed data and item bindings; bind selection on the child Button/Card press event. Bound the list viewport and avoid nesting in a same-direction ScrollView.',
|
|
9
10
|
events: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flatListMeta.js","sourceRoot":"","sources":["../../../src/features/list/flatListMeta.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"flatListMeta.js","sourceRoot":"","sources":["../../../src/features/list/flatListMeta.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAEvE,OAAO,EAAE,4BAA4B,EAAE,MAAM,4BAA4B,CAAC;AAE1E,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE,UAAU;IAChB,QAAQ,EAAE,QAAQ;IAClB,kBAAkB,EAAE,IAAI;IACxB,SAAS,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,4BAA4B,EAAE;IAC7E,eAAe,EAAE,CAAC,GAAG,0BAA0B,CAAC;IAChD,WAAW,EACT,qNAAqN;IACvN,MAAM,EAAE;QACN,kBAAkB,EAAE;YAClB,KAAK,EAAE,sBAAsB;YAC7B,SAAS,EAAE,6BAA6B;YACxC,aAAa,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;SACnD;QACD,OAAO,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,aAAa,EAAE,EAAE,EAAE;QAC/E,UAAU,EAAE;YACV,KAAK,EAAE,aAAa;YACpB,SAAS,EAAE,qBAAqB;YAChC,aAAa,EAAE,CAAC,EAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;SAC7D;KACF;IACD,KAAK,EAAE;QACL,UAAU,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE;QACnD,UAAU,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE;QAClD,kBAAkB,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,EAAE;QAClE,mBAAmB,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,EAAE;QACnE,UAAU,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,EAAE;QAC1D,qBAAqB,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE;QAC/D,oBAAoB,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE;QAC5D,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE;QAClD,cAAc,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE;QACtD,UAAU,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;QACnD,UAAU,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;QACnD,SAAS,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;KACnD;CACmC,CAAC","sourcesContent":["import { CONTAINER_ALLOWED_CHILDREN } from '../../constants/authoring';\nimport type { ZoraComponentMeta } from '../../types/authoring';\nimport { LIST_VIRTUALIZATION_DEFAULTS } from './constants/virtualization';\n\nexport const flatListMeta = {\n name: 'FlatList',\n category: 'layout',\n directManifestNode: true,\n blueprint: { label: 'Flat list', defaultProps: LIST_VIRTUALIZATION_DEFAULTS },\n allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],\n description:\n 'Virtualized children. Put node.repeat on this list for keyed data and item bindings; bind selection on the child Button/Card press event. Bound the list viewport and avoid nesting in a same-direction ScrollView.',\n events: {\n visibleItemsChange: {\n label: 'Visible items change',\n eventType: 'flatList.visibleItemsChange',\n payloadFields: [{ path: 'keys', type: 'unknown' }],\n },\n refresh: { label: 'Refresh', eventType: 'flatList.refresh', payloadFields: [] },\n endReached: {\n label: 'End reached',\n eventType: 'flatList.endReached',\n payloadFields: [{ path: 'distanceFromEnd', type: 'number' }],\n },\n },\n props: {\n horizontal: { type: 'boolean', category: 'Layout' },\n refreshing: { type: 'boolean', category: 'State' },\n initialNumToRender: { type: 'number', category: 'Virtualization' },\n maxToRenderPerBatch: { type: 'number', category: 'Virtualization' },\n windowSize: { type: 'number', category: 'Virtualization' },\n onEndReachedThreshold: { type: 'number', category: 'Behavior' },\n showsScrollIndicator: { type: 'boolean', category: 'Style' },\n bounces: { type: 'boolean', category: 'Behavior' },\n showSeparators: { type: 'boolean', category: 'Style' },\n headerText: { type: 'string', category: 'Content' },\n footerText: { type: 'string', category: 'Content' },\n emptyText: { type: 'string', category: 'Content' },\n },\n} as const satisfies ZoraComponentMeta;\n"]}
|
|
@@ -4,6 +4,8 @@ export declare const sectionListMeta: {
|
|
|
4
4
|
readonly label: "Section list";
|
|
5
5
|
readonly defaultProps: {
|
|
6
6
|
readonly sections: readonly [];
|
|
7
|
+
readonly maxToRenderPerBatch: 10;
|
|
8
|
+
readonly onEndReachedThreshold: 2;
|
|
7
9
|
};
|
|
8
10
|
};
|
|
9
11
|
readonly description: "Virtualized sections of ordered children. Section counts must cover every child exactly once.";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sectionListMeta.d.ts","sourceRoot":"","sources":["../../../src/features/list/sectionListMeta.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe
|
|
1
|
+
{"version":3,"file":"sectionListMeta.d.ts","sourceRoot":"","sources":["../../../src/features/list/sectionListMeta.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BU,CAAC"}
|
|
@@ -2,7 +2,10 @@ import { flatListMeta } from './flatListMeta';
|
|
|
2
2
|
export const sectionListMeta = {
|
|
3
3
|
...flatListMeta,
|
|
4
4
|
name: 'SectionList',
|
|
5
|
-
blueprint: {
|
|
5
|
+
blueprint: {
|
|
6
|
+
label: 'Section list',
|
|
7
|
+
defaultProps: { ...flatListMeta.blueprint.defaultProps, sections: [] },
|
|
8
|
+
},
|
|
6
9
|
description: 'Virtualized sections of ordered children. Section counts must cover every child exactly once.',
|
|
7
10
|
events: {
|
|
8
11
|
visibleItemsChange: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sectionListMeta.js","sourceRoot":"","sources":["../../../src/features/list/sectionListMeta.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,GAAG,YAAY;IACf,IAAI,EAAE,aAAa;IACnB,SAAS,EAAE,
|
|
1
|
+
{"version":3,"file":"sectionListMeta.js","sourceRoot":"","sources":["../../../src/features/list/sectionListMeta.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,GAAG,YAAY;IACf,IAAI,EAAE,aAAa;IACnB,SAAS,EAAE;QACT,KAAK,EAAE,cAAc;QACrB,YAAY,EAAE,EAAE,GAAG,YAAY,CAAC,SAAS,CAAC,YAAY,EAAE,QAAQ,EAAE,EAAE,EAAE;KACvE;IACD,WAAW,EACT,+FAA+F;IACjG,MAAM,EAAE;QACN,kBAAkB,EAAE;YAClB,GAAG,YAAY,CAAC,MAAM,CAAC,kBAAkB;YACzC,SAAS,EAAE,gCAAgC;SAC5C;QACD,OAAO,EAAE,EAAE,GAAG,YAAY,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE;QAC7E,UAAU,EAAE,EAAE,GAAG,YAAY,CAAC,MAAM,CAAC,UAAU,EAAE,SAAS,EAAE,wBAAwB,EAAE;KACvF;IACD,KAAK,EAAE;QACL,GAAG,YAAY,CAAC,KAAK;QACrB,QAAQ,EAAE;YACR,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,MAAM;YAChB,UAAU,EAAE;gBACV,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE;gBAChE,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;gBACjE,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE;aACnE;SACF;QACD,2BAA2B,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE;KACvE;CACmC,CAAC","sourcesContent":["import type { ZoraComponentMeta } from '../../types/authoring';\nimport { flatListMeta } from './flatListMeta';\n\nexport const sectionListMeta = {\n ...flatListMeta,\n name: 'SectionList',\n blueprint: {\n label: 'Section list',\n defaultProps: { ...flatListMeta.blueprint.defaultProps, sections: [] },\n },\n description:\n 'Virtualized sections of ordered children. Section counts must cover every child exactly once.',\n events: {\n visibleItemsChange: {\n ...flatListMeta.events.visibleItemsChange,\n eventType: 'sectionList.visibleItemsChange',\n },\n refresh: { ...flatListMeta.events.refresh, eventType: 'sectionList.refresh' },\n endReached: { ...flatListMeta.events.endReached, eventType: 'sectionList.endReached' },\n },\n props: {\n ...flatListMeta.props,\n sections: {\n type: 'array',\n category: 'Data',\n itemSchema: [\n { key: 'key', schema: { type: 'string', category: 'Identity' } },\n { key: 'title', schema: { type: 'string', category: 'Content' } },\n { key: 'itemCount', schema: { type: 'number', category: 'Data' } },\n ],\n },\n stickySectionHeadersEnabled: { type: 'boolean', category: 'Behavior' },\n },\n} as const satisfies ZoraComponentMeta;\n"]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ankhorage/zora",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "25.9.
|
|
4
|
+
"version": "25.9.2",
|
|
5
5
|
"description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
|
|
6
6
|
"homepage": "https://github.com/ankhorage/zora#readme",
|
|
7
7
|
"bugs": {
|
|
@@ -4,6 +4,7 @@ import { FlatList as NativeFlatList } from 'react-native';
|
|
|
4
4
|
import type { ManifestListProps } from '../../../../types/manifest-list';
|
|
5
5
|
import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
|
|
6
6
|
import { Text } from '../../../typography/public';
|
|
7
|
+
import { LIST_VIRTUALIZATION_DEFAULTS } from '../../constants/virtualization';
|
|
7
8
|
import { HorizontalListSeparator } from './HorizontalListSeparator';
|
|
8
9
|
import { useListVisibility } from './useListVisibility';
|
|
9
10
|
import { VerticalListSeparator } from './VerticalListSeparator';
|
|
@@ -19,9 +20,9 @@ function FlatListInner({
|
|
|
19
20
|
horizontal,
|
|
20
21
|
refreshing = false,
|
|
21
22
|
initialNumToRender,
|
|
22
|
-
maxToRenderPerBatch,
|
|
23
|
+
maxToRenderPerBatch = LIST_VIRTUALIZATION_DEFAULTS.maxToRenderPerBatch,
|
|
23
24
|
windowSize,
|
|
24
|
-
onEndReachedThreshold,
|
|
25
|
+
onEndReachedThreshold = LIST_VIRTUALIZATION_DEFAULTS.onEndReachedThreshold,
|
|
25
26
|
showsScrollIndicator = true,
|
|
26
27
|
bounces,
|
|
27
28
|
showSeparators,
|
|
@@ -5,6 +5,7 @@ import type { ManifestSectionListProps } from '../../../../types/manifest-list';
|
|
|
5
5
|
import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
|
|
6
6
|
import { Text } from '../../../typography/public';
|
|
7
7
|
import { partitionListSections } from '../../application/use-cases/partitionListSections';
|
|
8
|
+
import { LIST_VIRTUALIZATION_DEFAULTS } from '../../constants/virtualization';
|
|
8
9
|
import { HorizontalListSeparator } from './HorizontalListSeparator';
|
|
9
10
|
import { useListVisibility } from './useListVisibility';
|
|
10
11
|
import { VerticalListSeparator } from './VerticalListSeparator';
|
|
@@ -21,9 +22,9 @@ function SectionListInner({
|
|
|
21
22
|
horizontal,
|
|
22
23
|
refreshing = false,
|
|
23
24
|
initialNumToRender,
|
|
24
|
-
maxToRenderPerBatch,
|
|
25
|
+
maxToRenderPerBatch = LIST_VIRTUALIZATION_DEFAULTS.maxToRenderPerBatch,
|
|
25
26
|
windowSize,
|
|
26
|
-
onEndReachedThreshold,
|
|
27
|
+
onEndReachedThreshold = LIST_VIRTUALIZATION_DEFAULTS.onEndReachedThreshold,
|
|
27
28
|
showsScrollIndicator = true,
|
|
28
29
|
bounces,
|
|
29
30
|
showSeparators,
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import { expect, mock, test } from 'bun:test';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { renderToStaticMarkup } from 'react-dom/server';
|
|
4
|
+
|
|
5
|
+
type EndReachedEvent = Readonly<{ distanceFromEnd: number }>;
|
|
6
|
+
|
|
7
|
+
type NativeListProps = Readonly<{
|
|
8
|
+
readonly children?: React.ReactNode;
|
|
9
|
+
readonly maxToRenderPerBatch?: number;
|
|
10
|
+
readonly onEndReached?: (event: EndReachedEvent) => void;
|
|
11
|
+
readonly onEndReachedThreshold?: number;
|
|
12
|
+
readonly [key: string]: unknown;
|
|
13
|
+
}>;
|
|
14
|
+
|
|
15
|
+
const flatListProps: NativeListProps[] = [];
|
|
16
|
+
const sectionListProps: NativeListProps[] = [];
|
|
17
|
+
|
|
18
|
+
/*** Captures the props ZORA delivers to the React Native FlatList boundary. */
|
|
19
|
+
function NativeFlatList(props: NativeListProps) {
|
|
20
|
+
flatListProps.push(props);
|
|
21
|
+
return null;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/*** Captures the props ZORA delivers to the React Native SectionList boundary. */
|
|
25
|
+
function NativeSectionList(props: NativeListProps) {
|
|
26
|
+
sectionListProps.push(props);
|
|
27
|
+
return null;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
await mock.module('react-native', () => ({
|
|
31
|
+
FlatList: NativeFlatList,
|
|
32
|
+
Platform: { OS: 'web' },
|
|
33
|
+
SectionList: NativeSectionList,
|
|
34
|
+
Text: () => null,
|
|
35
|
+
}));
|
|
36
|
+
await mock.module('@ankhorage/surface', () => ({
|
|
37
|
+
ThemeScope: ({ children }: { readonly children: React.ReactNode }) => children,
|
|
38
|
+
resolveResponsive: <T,>(value: T) => value,
|
|
39
|
+
useResponsiveRuntime: () => ({ breakpoint: undefined }),
|
|
40
|
+
useTheme: () => ({ theme: {} }),
|
|
41
|
+
}));
|
|
42
|
+
await mock.module('../../../layout/public', () => ({ Divider: () => null }));
|
|
43
|
+
|
|
44
|
+
const { FlatList } = await import('./FlatList');
|
|
45
|
+
const { SectionList } = await import('./SectionList');
|
|
46
|
+
|
|
47
|
+
test.each([
|
|
48
|
+
{
|
|
49
|
+
name: 'FlatList',
|
|
50
|
+
props: flatListProps,
|
|
51
|
+
render: (properties: {
|
|
52
|
+
readonly interactionPolicy?: 'passive';
|
|
53
|
+
readonly onEndReached?: (event: EndReachedEvent) => void;
|
|
54
|
+
readonly maxToRenderPerBatch?: number;
|
|
55
|
+
readonly onEndReachedThreshold?: number;
|
|
56
|
+
}) => <FlatList {...properties} />,
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
name: 'SectionList',
|
|
60
|
+
props: sectionListProps,
|
|
61
|
+
render: (properties: {
|
|
62
|
+
readonly interactionPolicy?: 'passive';
|
|
63
|
+
readonly onEndReached?: (event: EndReachedEvent) => void;
|
|
64
|
+
readonly maxToRenderPerBatch?: number;
|
|
65
|
+
readonly onEndReachedThreshold?: number;
|
|
66
|
+
}) => <SectionList sections={[]} {...properties} />,
|
|
67
|
+
},
|
|
68
|
+
])(
|
|
69
|
+
'$name forwards virtualization and pagination defaults, overrides, and callbacks',
|
|
70
|
+
({ props, render }) => {
|
|
71
|
+
const onEndReached = mock();
|
|
72
|
+
renderToStaticMarkup(render({ onEndReached }));
|
|
73
|
+
|
|
74
|
+
const defaults = props.at(-1);
|
|
75
|
+
expect(defaults?.maxToRenderPerBatch).toBe(10);
|
|
76
|
+
expect(defaults?.onEndReachedThreshold).toBe(2);
|
|
77
|
+
defaults?.onEndReached?.({ distanceFromEnd: 24 });
|
|
78
|
+
expect(onEndReached).toHaveBeenCalledWith({ distanceFromEnd: 24 });
|
|
79
|
+
|
|
80
|
+
renderToStaticMarkup(
|
|
81
|
+
render({ maxToRenderPerBatch: 4, onEndReachedThreshold: 0.25, onEndReached }),
|
|
82
|
+
);
|
|
83
|
+
const overrides = props.at(-1);
|
|
84
|
+
expect(overrides?.maxToRenderPerBatch).toBe(4);
|
|
85
|
+
expect(overrides?.onEndReachedThreshold).toBe(0.25);
|
|
86
|
+
|
|
87
|
+
renderToStaticMarkup(render({ interactionPolicy: 'passive', onEndReached }));
|
|
88
|
+
expect(props.at(-1)?.onEndReached).toBeUndefined();
|
|
89
|
+
},
|
|
90
|
+
);
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { CONTAINER_ALLOWED_CHILDREN } from '../../constants/authoring';
|
|
2
2
|
import type { ZoraComponentMeta } from '../../types/authoring';
|
|
3
|
+
import { LIST_VIRTUALIZATION_DEFAULTS } from './constants/virtualization';
|
|
3
4
|
|
|
4
5
|
export const flatListMeta = {
|
|
5
6
|
name: 'FlatList',
|
|
6
7
|
category: 'layout',
|
|
7
8
|
directManifestNode: true,
|
|
8
|
-
blueprint: { label: 'Flat list' },
|
|
9
|
+
blueprint: { label: 'Flat list', defaultProps: LIST_VIRTUALIZATION_DEFAULTS },
|
|
9
10
|
allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
|
|
10
11
|
description:
|
|
11
12
|
'Virtualized children. Put node.repeat on this list for keyed data and item bindings; bind selection on the child Button/Card press event. Bound the list viewport and avoid nesting in a same-direction ScrollView.',
|
|
@@ -4,7 +4,10 @@ import { flatListMeta } from './flatListMeta';
|
|
|
4
4
|
export const sectionListMeta = {
|
|
5
5
|
...flatListMeta,
|
|
6
6
|
name: 'SectionList',
|
|
7
|
-
blueprint: {
|
|
7
|
+
blueprint: {
|
|
8
|
+
label: 'Section list',
|
|
9
|
+
defaultProps: { ...flatListMeta.blueprint.defaultProps, sections: [] },
|
|
10
|
+
},
|
|
8
11
|
description:
|
|
9
12
|
'Virtualized sections of ordered children. Section counts must cover every child exactly once.',
|
|
10
13
|
events: {
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { expect, test } from 'bun:test';
|
|
2
|
+
|
|
3
|
+
import { LIST_VIRTUALIZATION_DEFAULTS } from './constants/virtualization';
|
|
4
|
+
import { flatListMeta } from './flatListMeta';
|
|
5
|
+
import { sectionListMeta } from './sectionListMeta';
|
|
6
|
+
|
|
7
|
+
test('publishes aligned list virtualization and pagination defaults in authoring metadata', () => {
|
|
8
|
+
expect(LIST_VIRTUALIZATION_DEFAULTS).toEqual({
|
|
9
|
+
maxToRenderPerBatch: 10,
|
|
10
|
+
onEndReachedThreshold: 2,
|
|
11
|
+
});
|
|
12
|
+
expect(flatListMeta.blueprint.defaultProps).toEqual(LIST_VIRTUALIZATION_DEFAULTS);
|
|
13
|
+
expect(sectionListMeta.blueprint.defaultProps).toEqual({
|
|
14
|
+
...LIST_VIRTUALIZATION_DEFAULTS,
|
|
15
|
+
sections: [],
|
|
16
|
+
});
|
|
17
|
+
for (const metadata of [flatListMeta, sectionListMeta]) {
|
|
18
|
+
expect(metadata.events.endReached.payloadFields).toEqual([
|
|
19
|
+
{ path: 'distanceFromEnd', type: 'number' },
|
|
20
|
+
]);
|
|
21
|
+
expect(metadata.props.maxToRenderPerBatch.type).toBe('number');
|
|
22
|
+
expect(metadata.props.onEndReachedThreshold.type).toBe('number');
|
|
23
|
+
}
|
|
24
|
+
});
|
|
@@ -38,6 +38,12 @@ import {
|
|
|
38
38
|
var import_react_native = __toESM(require_cjs(), 1);
|
|
39
39
|
import React2 from "react";
|
|
40
40
|
|
|
41
|
+
// src/features/list/constants/virtualization.ts
|
|
42
|
+
var LIST_VIRTUALIZATION_DEFAULTS = {
|
|
43
|
+
maxToRenderPerBatch: 10,
|
|
44
|
+
onEndReachedThreshold: 2
|
|
45
|
+
};
|
|
46
|
+
|
|
41
47
|
// src/features/list/adapters/inbound/HorizontalListSeparator.tsx
|
|
42
48
|
import { jsx } from "react/jsx-runtime";
|
|
43
49
|
function HorizontalListSeparator() {
|
|
@@ -81,9 +87,9 @@ function FlatListInner({
|
|
|
81
87
|
horizontal,
|
|
82
88
|
refreshing = false,
|
|
83
89
|
initialNumToRender,
|
|
84
|
-
maxToRenderPerBatch,
|
|
90
|
+
maxToRenderPerBatch = LIST_VIRTUALIZATION_DEFAULTS.maxToRenderPerBatch,
|
|
85
91
|
windowSize,
|
|
86
|
-
onEndReachedThreshold,
|
|
92
|
+
onEndReachedThreshold = LIST_VIRTUALIZATION_DEFAULTS.onEndReachedThreshold,
|
|
87
93
|
showsScrollIndicator = true,
|
|
88
94
|
bounces,
|
|
89
95
|
showSeparators,
|
|
@@ -464,9 +470,9 @@ function SectionListInner({
|
|
|
464
470
|
horizontal,
|
|
465
471
|
refreshing = false,
|
|
466
472
|
initialNumToRender,
|
|
467
|
-
maxToRenderPerBatch,
|
|
473
|
+
maxToRenderPerBatch = LIST_VIRTUALIZATION_DEFAULTS.maxToRenderPerBatch,
|
|
468
474
|
windowSize,
|
|
469
|
-
onEndReachedThreshold,
|
|
475
|
+
onEndReachedThreshold = LIST_VIRTUALIZATION_DEFAULTS.onEndReachedThreshold,
|
|
470
476
|
showsScrollIndicator = true,
|
|
471
477
|
bounces,
|
|
472
478
|
showSeparators,
|
|
@@ -43,8 +43,8 @@ import {
|
|
|
43
43
|
} from "../../chunks/Accordion-nj7k0m66.js";
|
|
44
44
|
import {
|
|
45
45
|
SkeletonList2
|
|
46
|
-
} from "../../chunks/Accordion-
|
|
47
|
-
import"../../chunks/Accordion-
|
|
46
|
+
} from "../../chunks/Accordion-xt8vafkn.js";
|
|
47
|
+
import"../../chunks/Accordion-rkg1y7x3.js";
|
|
48
48
|
import"../../chunks/Accordion-ng4f4k3b.js";
|
|
49
49
|
import"../../chunks/Accordion-eqvdv7tt.js";
|
|
50
50
|
import"../../chunks/Accordion-61e19g3e.js";
|
|
@@ -12,7 +12,7 @@ import {
|
|
|
12
12
|
List2,
|
|
13
13
|
ListSection2,
|
|
14
14
|
SectionList2
|
|
15
|
-
} from "../../chunks/Accordion-
|
|
15
|
+
} from "../../chunks/Accordion-rkg1y7x3.js";
|
|
16
16
|
import"../../chunks/Accordion-xstk85jq.js";
|
|
17
17
|
import"../../chunks/Accordion-qr5qn652.js";
|
|
18
18
|
import"../../chunks/Accordion-ng4f4k3b.js";
|
|
@@ -12,7 +12,7 @@ import {
|
|
|
12
12
|
List2,
|
|
13
13
|
ListSection2,
|
|
14
14
|
SectionList2
|
|
15
|
-
} from "../../chunks/Accordion-
|
|
15
|
+
} from "../../chunks/Accordion-rkg1y7x3.js";
|
|
16
16
|
import"../../chunks/Accordion-xstk85jq.js";
|
|
17
17
|
import"../../chunks/Accordion-qr5qn652.js";
|
|
18
18
|
import"../../chunks/Accordion-ng4f4k3b.js";
|
|
@@ -12,7 +12,7 @@ import {
|
|
|
12
12
|
List2,
|
|
13
13
|
ListSection2,
|
|
14
14
|
SectionList2
|
|
15
|
-
} from "../../chunks/Accordion-
|
|
15
|
+
} from "../../chunks/Accordion-rkg1y7x3.js";
|
|
16
16
|
import"../../chunks/Accordion-xstk85jq.js";
|
|
17
17
|
import"../../chunks/Accordion-qr5qn652.js";
|
|
18
18
|
import"../../chunks/Accordion-ng4f4k3b.js";
|
|
@@ -12,7 +12,7 @@ import {
|
|
|
12
12
|
List2,
|
|
13
13
|
ListSection2,
|
|
14
14
|
SectionList2
|
|
15
|
-
} from "../../chunks/Accordion-
|
|
15
|
+
} from "../../chunks/Accordion-rkg1y7x3.js";
|
|
16
16
|
import"../../chunks/Accordion-xstk85jq.js";
|
|
17
17
|
import"../../chunks/Accordion-qr5qn652.js";
|
|
18
18
|
import"../../chunks/Accordion-ng4f4k3b.js";
|
|
@@ -12,7 +12,7 @@ import {
|
|
|
12
12
|
List2,
|
|
13
13
|
ListSection2,
|
|
14
14
|
SectionList2
|
|
15
|
-
} from "../../chunks/Accordion-
|
|
15
|
+
} from "../../chunks/Accordion-rkg1y7x3.js";
|
|
16
16
|
import"../../chunks/Accordion-xstk85jq.js";
|
|
17
17
|
import"../../chunks/Accordion-qr5qn652.js";
|
|
18
18
|
import"../../chunks/Accordion-ng4f4k3b.js";
|
|
@@ -9,7 +9,7 @@ import {
|
|
|
9
9
|
SkeletonText2,
|
|
10
10
|
SkeletonCard2,
|
|
11
11
|
SkeletonList2
|
|
12
|
-
} from "../../chunks/Accordion-
|
|
12
|
+
} from "../../chunks/Accordion-xt8vafkn.js";
|
|
13
13
|
import"../../chunks/Accordion-bfzeab9x.js";
|
|
14
14
|
import"../../chunks/Accordion-8f0nekwe.js";
|
|
15
15
|
import"../../chunks/Accordion-xstk85jq.js";
|
|
@@ -22,7 +22,7 @@ import"../../chunks/Accordion-jz4j00nh.js";
|
|
|
22
22
|
import"../../chunks/Accordion-1fsrnq73.js";
|
|
23
23
|
import"../../chunks/Accordion-1jxtw4vn.js";
|
|
24
24
|
import"../../chunks/Accordion-pdgjv1pr.js";
|
|
25
|
-
import"../../chunks/Accordion-
|
|
25
|
+
import"../../chunks/Accordion-rkg1y7x3.js";
|
|
26
26
|
import"../../chunks/Accordion-ng4f4k3b.js";
|
|
27
27
|
import"../../chunks/Accordion-eqvdv7tt.js";
|
|
28
28
|
import"../../chunks/Accordion-61e19g3e.js";
|
|
@@ -9,7 +9,7 @@ import {
|
|
|
9
9
|
SkeletonText2,
|
|
10
10
|
SkeletonCard2,
|
|
11
11
|
SkeletonList2
|
|
12
|
-
} from "../../chunks/Accordion-
|
|
12
|
+
} from "../../chunks/Accordion-xt8vafkn.js";
|
|
13
13
|
import"../../chunks/Accordion-bfzeab9x.js";
|
|
14
14
|
import"../../chunks/Accordion-8f0nekwe.js";
|
|
15
15
|
import"../../chunks/Accordion-xstk85jq.js";
|
|
@@ -22,7 +22,7 @@ import"../../chunks/Accordion-jz4j00nh.js";
|
|
|
22
22
|
import"../../chunks/Accordion-1fsrnq73.js";
|
|
23
23
|
import"../../chunks/Accordion-1jxtw4vn.js";
|
|
24
24
|
import"../../chunks/Accordion-pdgjv1pr.js";
|
|
25
|
-
import"../../chunks/Accordion-
|
|
25
|
+
import"../../chunks/Accordion-rkg1y7x3.js";
|
|
26
26
|
import"../../chunks/Accordion-ng4f4k3b.js";
|
|
27
27
|
import"../../chunks/Accordion-eqvdv7tt.js";
|
|
28
28
|
import"../../chunks/Accordion-61e19g3e.js";
|
|
@@ -9,7 +9,7 @@ import {
|
|
|
9
9
|
SkeletonText2,
|
|
10
10
|
SkeletonCard2,
|
|
11
11
|
SkeletonList2
|
|
12
|
-
} from "../../chunks/Accordion-
|
|
12
|
+
} from "../../chunks/Accordion-xt8vafkn.js";
|
|
13
13
|
import"../../chunks/Accordion-bfzeab9x.js";
|
|
14
14
|
import"../../chunks/Accordion-8f0nekwe.js";
|
|
15
15
|
import"../../chunks/Accordion-xstk85jq.js";
|
|
@@ -22,7 +22,7 @@ import"../../chunks/Accordion-jz4j00nh.js";
|
|
|
22
22
|
import"../../chunks/Accordion-1fsrnq73.js";
|
|
23
23
|
import"../../chunks/Accordion-1jxtw4vn.js";
|
|
24
24
|
import"../../chunks/Accordion-pdgjv1pr.js";
|
|
25
|
-
import"../../chunks/Accordion-
|
|
25
|
+
import"../../chunks/Accordion-rkg1y7x3.js";
|
|
26
26
|
import"../../chunks/Accordion-ng4f4k3b.js";
|
|
27
27
|
import"../../chunks/Accordion-eqvdv7tt.js";
|
|
28
28
|
import"../../chunks/Accordion-61e19g3e.js";
|