@symbiote-native/angular 3.2.0 → 3.4.0
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/babel-register-composed.cjs +2 -0
- package/build/angular/accessibility-inputs.d.ts +2 -1
- package/build/angular/accessibility-inputs.js +4 -1
- package/build/angular/accessibility-inputs.js.map +1 -1
- package/build/angular/callback-host.d.ts +1 -1
- package/build/angular/callback-host.js +57 -9
- package/build/angular/callback-host.js.map +1 -1
- package/build/angular/components/checkbox-props.d.ts +2 -0
- package/build/angular/components/checkbox-props.js +2 -0
- package/build/angular/components/checkbox-props.js.map +1 -0
- package/build/angular/components/flat-list/flat-list-handle.d.ts +35 -0
- package/build/angular/components/flat-list/flat-list-handle.js +48 -0
- package/build/angular/components/flat-list/flat-list-handle.js.map +1 -0
- package/build/angular/components/flat-list/flat-list-template.d.ts +1 -1
- package/build/angular/components/flat-list/flat-list-template.js +16 -0
- package/build/angular/components/flat-list/flat-list-template.js.map +1 -1
- package/build/angular/components/flat-list/index.d.ts +6 -30
- package/build/angular/components/flat-list/index.js +6 -36
- package/build/angular/components/flat-list/index.js.map +1 -1
- package/build/angular/components/image-inputs.d.ts +4 -0
- package/build/angular/components/image-inputs.js +81 -0
- package/build/angular/components/image-inputs.js.map +1 -0
- package/build/angular/components/image-props-resolve.d.ts +3 -0
- package/build/angular/components/image-props-resolve.js +133 -0
- package/build/angular/components/image-props-resolve.js.map +1 -0
- package/build/angular/components/image-shared.d.ts +8 -6
- package/build/angular/components/image-shared.js +23 -212
- package/build/angular/components/image-shared.js.map +1 -1
- package/build/angular/components/input-accessory-view-props.d.ts +4 -4
- package/build/angular/components/keyboard-avoiding-view/index.d.ts +3 -6
- package/build/angular/components/keyboard-avoiding-view/index.js +29 -56
- package/build/angular/components/keyboard-avoiding-view/index.js.map +1 -1
- package/build/angular/components/layout-conformance-props.d.ts +4 -0
- package/build/angular/components/layout-conformance-props.js +2 -0
- package/build/angular/components/layout-conformance-props.js.map +1 -0
- package/build/angular/components/modal/index.d.ts +6 -5
- package/build/angular/components/modal/index.js +17 -2
- package/build/angular/components/modal/index.js.map +1 -1
- package/build/angular/components/refresh-control-props.d.ts +7 -7
- package/build/angular/components/scroll-view-props.d.ts +8 -5
- package/build/angular/components/section-list/index.d.ts +17 -8
- package/build/angular/components/section-list/index.js +37 -28
- package/build/angular/components/section-list/index.js.map +1 -1
- package/build/angular/components/touchable-props.d.ts +2 -2
- package/build/angular/components/virtualized-list/cell-renderer-context.d.ts +12 -0
- package/build/angular/components/virtualized-list/cell-renderer-context.js +16 -0
- package/build/angular/components/virtualized-list/cell-renderer-context.js.map +1 -0
- package/build/angular/components/virtualized-list/directives.d.ts +26 -6
- package/build/angular/components/virtualized-list/directives.js +59 -5
- package/build/angular/components/virtualized-list/directives.js.map +1 -1
- package/build/angular/components/virtualized-list/index.d.ts +19 -15
- package/build/angular/components/virtualized-list/index.js +91 -61
- package/build/angular/components/virtualized-list/index.js.map +1 -1
- package/build/angular/components/virtualized-list/list-bags.d.ts +5 -1
- package/build/angular/components/virtualized-list/list-bags.js +31 -19
- package/build/angular/components/virtualized-list/list-bags.js.map +1 -1
- package/build/angular/components/virtualized-list/list-effects.d.ts +2 -2
- package/build/angular/components/virtualized-list/list-effects.js +17 -27
- package/build/angular/components/virtualized-list/list-effects.js.map +1 -1
- package/build/angular/components/virtualized-list/list-handle.d.ts +4 -1
- package/build/angular/components/virtualized-list/list-handle.js +13 -3
- package/build/angular/components/virtualized-list/list-handle.js.map +1 -1
- package/build/angular/components/virtualized-list/list-inputs.d.ts +19 -5
- package/build/angular/components/virtualized-list/list-inputs.js +47 -4
- package/build/angular/components/virtualized-list/list-inputs.js.map +1 -1
- package/build/angular/components/virtualized-list/list-props.d.ts +9 -3
- package/build/angular/components/virtualized-list/list-rows.d.ts +25 -0
- package/build/angular/components/virtualized-list/list-rows.js +25 -0
- package/build/angular/components/virtualized-list/list-rows.js.map +1 -0
- package/build/angular/components/virtualized-list/list-styles.d.ts +4 -0
- package/build/angular/components/virtualized-list/list-styles.js +10 -2
- package/build/angular/components/virtualized-list/list-styles.js.map +1 -1
- package/build/angular/components/virtualized-list/list-template.d.ts +1 -1
- package/build/angular/components/virtualized-list/list-template.js +159 -73
- package/build/angular/components/virtualized-list/list-template.js.map +1 -1
- package/build/angular/components/virtualized-list/nested-scope.d.ts +6 -0
- package/build/angular/components/virtualized-list/nested-scope.js +17 -0
- package/build/angular/components/virtualized-list/nested-scope.js.map +1 -0
- package/build/angular/components/virtualized-section-list/directives.d.ts +21 -9
- package/build/angular/components/virtualized-section-list/directives.js +8 -28
- package/build/angular/components/virtualized-section-list/directives.js.map +1 -1
- package/build/angular/components/virtualized-section-list/index.d.ts +39 -60
- package/build/angular/components/virtualized-section-list/index.js +67 -33
- package/build/angular/components/virtualized-section-list/index.js.map +1 -1
- package/build/angular/components/virtualized-section-list/section-cell.d.ts +29 -0
- package/build/angular/components/virtualized-section-list/section-cell.js +82 -0
- package/build/angular/components/virtualized-section-list/section-cell.js.map +1 -0
- package/build/angular/components/virtualized-section-list/section-list-props.d.ts +56 -0
- package/build/angular/components/virtualized-section-list/section-list-props.js +3 -0
- package/build/angular/components/virtualized-section-list/section-list-props.js.map +1 -0
- package/build/angular/components/virtualized-section-list/section-list-template.d.ts +1 -1
- package/build/angular/components/virtualized-section-list/section-list-template.js +34 -26
- package/build/angular/components/virtualized-section-list/section-list-template.js.map +1 -1
- package/build/angular/components.d.ts +8 -3
- package/build/angular/components.js +2 -1
- package/build/angular/components.js.map +1 -1
- package/build/angular/descriptor-to-angular/descriptor-host.d.ts +8 -0
- package/build/angular/descriptor-to-angular/descriptor-host.js +38 -0
- package/build/angular/descriptor-to-angular/descriptor-host.js.map +1 -0
- package/build/angular/descriptor-to-angular/index.d.ts +1 -0
- package/build/angular/descriptor-to-angular/index.js +4 -0
- package/build/angular/descriptor-to-angular/index.js.map +1 -1
- package/build/angular/element-base.d.ts +169 -0
- package/build/angular/element-base.js +304 -0
- package/build/angular/element-base.js.map +1 -0
- package/build/angular/element-props.d.ts +7 -7
- package/build/angular/element-text-input-native.d.ts +27 -0
- package/build/angular/element-text-input-native.js +52 -0
- package/build/angular/element-text-input-native.js.map +1 -0
- package/build/angular/elements-controls.d.ts +171 -0
- package/build/angular/elements-controls.js +394 -0
- package/build/angular/elements-controls.js.map +1 -0
- package/build/angular/elements-layout.d.ts +139 -0
- package/build/angular/elements-layout.js +276 -0
- package/build/angular/elements-layout.js.map +1 -0
- package/build/angular/elements-press.d.ts +103 -0
- package/build/angular/elements-press.js +239 -0
- package/build/angular/elements-press.js.map +1 -0
- package/build/angular/elements.d.ts +6 -516
- package/build/angular/elements.js +9 -1091
- package/build/angular/elements.js.map +1 -1
- package/build/angular/host-instance/index.d.ts +2 -0
- package/build/angular/host-instance/index.js +4 -4
- package/build/angular/host-instance/index.js.map +1 -1
- package/build/angular/index.d.ts +17 -9
- package/build/angular/index.js +24 -27
- package/build/angular/index.js.map +1 -1
- package/build/angular/modules/animated/create-animated-component.d.ts +1 -1
- package/build/angular/modules/animated/create-animated-component.js +1 -1
- package/build/angular/modules/animated/create-animated-component.js.map +1 -1
- package/build/angular/modules/animated/index.d.ts +54 -41
- package/build/angular/modules/animated/index.js +2 -26
- package/build/angular/modules/animated/index.js.map +1 -1
- package/build/angular/modules/app-registry/index.d.ts +3 -3
- package/build/angular/modules/app-registry/index.js +2 -2
- package/build/angular/modules/app-registry/index.js.map +1 -1
- package/build/angular/modules/status-bar/index.d.ts +9 -5
- package/build/angular/modules/status-bar/index.js +21 -10
- package/build/angular/modules/status-bar/index.js.map +1 -1
- package/build/angular/native-view-base.d.ts +10 -2
- package/build/angular/native-view-base.js +23 -2
- package/build/angular/native-view-base.js.map +1 -1
- package/build/angular/primitives/index.d.ts +4 -0
- package/build/angular/primitives/index.js +12 -0
- package/build/angular/primitives/index.js.map +1 -1
- package/build/angular/services/color-scheme.service.d.ts +1 -1
- package/build/angular/services/index.d.ts +1 -0
- package/build/angular/services/index.js +1 -0
- package/build/angular/services/index.js.map +1 -1
- package/build/angular/services/inject-event.d.ts +6 -0
- package/build/angular/services/inject-event.js +24 -0
- package/build/angular/services/inject-event.js.map +1 -0
- package/package.json +6 -6
- package/src/accessibility-inputs.ts +3 -0
- package/src/callback-host.ts +56 -8
- package/src/components/checkbox-props.ts +12 -0
- package/src/components/flat-list/flat-list-handle.ts +64 -0
- package/src/components/flat-list/flat-list-template.ts +16 -0
- package/src/components/flat-list/index.ts +6 -48
- package/src/components/image-inputs.ts +94 -0
- package/src/components/image-props-resolve.ts +172 -0
- package/src/components/image-shared.ts +26 -291
- package/src/components/input-accessory-view-props.ts +12 -8
- package/src/components/keyboard-avoiding-view/index.ts +39 -79
- package/src/components/layout-conformance-props.ts +8 -0
- package/src/components/modal/index.ts +42 -20
- package/src/components/refresh-control-props.ts +29 -25
- package/src/components/scroll-view-props.ts +84 -76
- package/src/components/section-list/index.ts +34 -37
- package/src/components/touchable-props.ts +6 -2
- package/src/components/virtualized-list/cell-renderer-context.ts +36 -0
- package/src/components/virtualized-list/directives.ts +84 -8
- package/src/components/virtualized-list/index.ts +118 -85
- package/src/components/virtualized-list/list-bags.ts +38 -19
- package/src/components/virtualized-list/list-effects.ts +20 -32
- package/src/components/virtualized-list/list-handle.ts +17 -4
- package/src/components/virtualized-list/list-inputs.ts +47 -0
- package/src/components/virtualized-list/list-props.ts +57 -50
- package/src/components/virtualized-list/list-rows.ts +66 -0
- package/src/components/virtualized-list/list-styles.ts +30 -1
- package/src/components/virtualized-list/list-template.ts +159 -73
- package/src/components/virtualized-list/nested-scope.ts +22 -0
- package/src/components/virtualized-section-list/directives.ts +41 -40
- package/src/components/virtualized-section-list/index.ts +114 -118
- package/src/components/virtualized-section-list/section-cell.ts +109 -0
- package/src/components/virtualized-section-list/section-list-props.ts +79 -0
- package/src/components/virtualized-section-list/section-list-template.ts +34 -26
- package/src/components.ts +9 -0
- package/src/descriptor-to-angular/descriptor-host.ts +27 -0
- package/src/descriptor-to-angular/index.ts +5 -0
- package/src/element-base.ts +289 -0
- package/src/element-props.ts +35 -33
- package/src/element-text-input-native.ts +31 -0
- package/src/elements-controls.ts +290 -0
- package/src/elements-layout.ts +168 -0
- package/src/elements-press.ts +153 -0
- package/src/elements.ts +76 -788
- package/src/host-instance/index.ts +4 -4
- package/src/index.ts +78 -23
- package/src/modules/animated/index.ts +2 -47
- package/src/modules/app-registry/index.ts +3 -1
- package/src/modules/status-bar/index.ts +24 -11
- package/src/native-view-base.ts +37 -2
- package/src/primitives/index.ts +7 -0
- package/src/services/color-scheme.service.ts +1 -1
- package/src/services/index.ts +1 -0
- package/src/services/inject-event.ts +52 -0
|
@@ -10,6 +10,8 @@ export type IListStyleInput = {
|
|
|
10
10
|
hasHeader: boolean;
|
|
11
11
|
style: IStyleProp<IViewStyle> | undefined;
|
|
12
12
|
contentContainerStyle: IStyleProp<IViewStyle> | undefined;
|
|
13
|
+
listHeaderComponentStyle: IStyleProp<IViewStyle> | undefined;
|
|
14
|
+
listFooterComponentStyle: IStyleProp<IViewStyle> | undefined;
|
|
13
15
|
anchorStyle: unknown;
|
|
14
16
|
maintainVisibleContentPosition: IMaintainVisibleContentPosition | undefined;
|
|
15
17
|
};
|
|
@@ -17,6 +19,8 @@ export type IListStyles = {
|
|
|
17
19
|
style: IViewStyle | undefined;
|
|
18
20
|
contentContainerStyle: IStyleProp<IViewStyle> | undefined;
|
|
19
21
|
cellStyle: IViewStyle | undefined;
|
|
22
|
+
headerStyle: IViewStyle | undefined;
|
|
23
|
+
footerStyle: IViewStyle | undefined;
|
|
20
24
|
maintainVisibleContentPosition: IMaintainVisibleContentPosition | undefined;
|
|
21
25
|
};
|
|
22
26
|
export declare function resolveListStyles(input: IListStyleInput): IListStyles;
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
// The styles a windowed list derives from its inputs each pass. Pure, so the component's recompute
|
|
2
2
|
// only assigns the result
|
|
3
|
-
import { INVERTED_X_STYLE, INVERTED_Y_STYLE, } from '@symbiote-native/components';
|
|
3
|
+
import { INVERTED_X_STYLE, INVERTED_Y_STYLE, cellStyleOf, } from '@symbiote-native/components';
|
|
4
4
|
import { flattenStyle, } from '@symbiote-native/engine';
|
|
5
|
+
function slotStyle(isInverted, inversion, style) {
|
|
6
|
+
return flattenStyle(isInverted ? [inversion, style] : style);
|
|
7
|
+
}
|
|
5
8
|
export function resolveListStyles(input) {
|
|
6
9
|
const inversion = input.isHorizontal ? INVERTED_X_STYLE : INVERTED_Y_STYLE;
|
|
7
10
|
const mvcp = input.maintainVisibleContentPosition;
|
|
@@ -14,7 +17,12 @@ export function resolveListStyles(input) {
|
|
|
14
17
|
input.anchorStyle,
|
|
15
18
|
input.isInverted ? [inversion, input.style] : input.style,
|
|
16
19
|
]),
|
|
17
|
-
cellStyle:
|
|
20
|
+
cellStyle: flattenStyle(cellStyleOf({
|
|
21
|
+
horizontal: input.isHorizontal,
|
|
22
|
+
inverted: input.isInverted,
|
|
23
|
+
})),
|
|
24
|
+
headerStyle: slotStyle(input.isInverted, inversion, input.listHeaderComponentStyle),
|
|
25
|
+
footerStyle: slotStyle(input.isInverted, inversion, input.listFooterComponentStyle),
|
|
18
26
|
maintainVisibleContentPosition: mvcp === undefined
|
|
19
27
|
? undefined
|
|
20
28
|
: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list-styles.js","sourceRoot":"","sources":["../../../../src/components/virtualized-list/list-styles.ts"],"names":[],"mappings":"AAAA,mGAAmG;AACnG,0BAA0B;AAE1B,OAAO,EACL,gBAAgB,EAChB,gBAAgB,
|
|
1
|
+
{"version":3,"file":"list-styles.js","sourceRoot":"","sources":["../../../../src/components/virtualized-list/list-styles.ts"],"names":[],"mappings":"AAAA,mGAAmG;AACnG,0BAA0B;AAE1B,OAAO,EACL,gBAAgB,EAChB,gBAAgB,EAChB,WAAW,GACZ,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACL,YAAY,GAGb,MAAM,yBAAyB,CAAC;AAiCjC,SAAS,SAAS,CAChB,UAAmB,EACnB,SAAqB,EACrB,KAAyC;IAEzC,OAAO,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;AAC/D,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,KAAsB;IACtD,MAAM,SAAS,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC;IAC3E,MAAM,IAAI,GAAG,KAAK,CAAC,8BAA8B,CAAC;IAClD,OAAO;QACL,qBAAqB,EAAE,KAAK,CAAC,YAAY;YACvC,CAAC,CAAC,CAAC,KAAK,CAAC,qBAAqB,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC;YACvD,CAAC,CAAC,KAAK,CAAC,qBAAqB;QAC/B,yEAAyE;QACzE,KAAK,EAAE,YAAY,CAAC;YAClB,KAAK,CAAC,WAAW;YACjB,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK;SAC1D,CAAC;QACF,SAAS,EAAE,YAAY,CACrB,WAAW,CAAC;YACV,UAAU,EAAE,KAAK,CAAC,YAAY;YAC9B,QAAQ,EAAE,KAAK,CAAC,UAAU;SAC3B,CAAC,CACH;QACD,WAAW,EAAE,SAAS,CACpB,KAAK,CAAC,UAAU,EAChB,SAAS,EACT,KAAK,CAAC,wBAAwB,CAC/B;QACD,WAAW,EAAE,SAAS,CACpB,KAAK,CAAC,UAAU,EAChB,SAAS,EACT,KAAK,CAAC,wBAAwB,CAC/B;QACD,8BAA8B,EAC5B,IAAI,KAAK,SAAS;YAChB,CAAC,CAAC,SAAS;YACX,CAAC,CAAC;gBACE,GAAG,IAAI;gBACP,kBAAkB,EAChB,IAAI,CAAC,kBAAkB,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;aACtD;KACR,CAAC;AACJ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const VIRTUALIZED_LIST_TEMPLATE = "\n @if (isHorizontal) {\n <horizontal-scroll-view #scrollHost [symbioteHostProps]=\"scrollViewBag()\">\n @if (shouldRenderRefreshControl) {\n <refresh-control\n [symbioteHostProps]=\"refreshControlBag()\"\n ></refresh-control>\n }\n\n @if (headerDir !== undefined) {\n <view>\n <ng-container [vListOutlet]=\"headerDir.templateRef\"></ng-container>\n </view>\n }\n\n @if (itemCount === 0) {\n @if (emptyDir !== undefined) {\n <view>\n <ng-container [vListOutlet]=\"emptyDir.templateRef\"></ng-container>\n </view>\n }\n } @else {\n @if (leadingSpacerStyle !== null) {\n <view [style]=\"leadingSpacerStyle\"></view>\n }\n @if (forcedStickyCell !== null) {\n <sticky-header\n (layout)=\"handleCellLayout(forcedStickyCell.measure, $event)\"\n [style]=\"cellStyle\"\n >\n <ng-container\n [vListOutlet]=\"cellTemplate\"\n [vListOutletContext]=\"forcedStickyCell.context\"\n ></ng-container>\n </sticky-header>\n }\n @if (gapSpacerStyle !== null) {\n <view [style]=\"gapSpacerStyle\"></view>\n }\n @for (cell of windowCells; track cell.key) {\n @if (cell.isSticky) {\n <sticky-header\n (layout)=\"handleCellLayout(cell.measure, $event)\"\n [style]=\"cellStyle\"\n >\n <ng-container\n [vListOutlet]=\"cellTemplate\"\n [vListOutletContext]=\"cell.context\"\n ></ng-container>\n @if (cell.separatorContext !== undefined) {\n <ng-container\n [vListOutlet]=\"separatorTemplate\"\n [vListOutletContext]=\"cell.separatorContext\"\n ></ng-container>\n }\n </sticky-header>\n } @else {\n <view\n (layout)=\"handleCellLayout(cell.measure, $event)\"\n [style]=\"cellStyle\"\n >\n <ng-container\n [vListOutlet]=\"cellTemplate\"\n [vListOutletContext]=\"cell.context\"\n ></ng-container>\n @if (cell.separatorContext !== undefined) {\n <ng-container\n [vListOutlet]=\"separatorTemplate\"\n [vListOutletContext]=\"cell.separatorContext\"\n ></ng-container>\n }\n </view>\n }\n }\n @if (trailingSpacerStyle !== null) {\n <view [style]=\"trailingSpacerStyle\"></view>\n }\n }\n\n @if (footerDir !== undefined) {\n <view>\n <ng-container [vListOutlet]=\"footerDir.templateRef\"></ng-container>\n </view>\n }\n </horizontal-scroll-view>\n } @else {\n <scroll-view #scrollHost [symbioteHostProps]=\"scrollViewBag()\">\n @if (shouldRenderRefreshControl) {\n <refresh-control\n [symbioteHostProps]=\"refreshControlBag()\"\n ></refresh-control>\n }\n\n @if (headerDir !== undefined) {\n <view>\n <ng-container [vListOutlet]=\"headerDir.templateRef\"></ng-container>\n </view>\n }\n\n @if (itemCount === 0) {\n @if (emptyDir !== undefined) {\n <view>\n <ng-container [vListOutlet]=\"emptyDir.templateRef\"></ng-container>\n </view>\n }\n } @else {\n @if (leadingSpacerStyle !== null) {\n <view [style]=\"leadingSpacerStyle\"></view>\n }\n @if (forcedStickyCell !== null) {\n <sticky-header\n (layout)=\"handleCellLayout(forcedStickyCell.measure, $event)\"\n [style]=\"cellStyle\"\n >\n <ng-container\n [vListOutlet]=\"cellTemplate\"\n [vListOutletContext]=\"forcedStickyCell.context\"\n ></ng-container>\n </sticky-header>\n }\n @if (gapSpacerStyle !== null) {\n <view [style]=\"gapSpacerStyle\"></view>\n }\n <!-- The separator sits INSIDE the measuring view, matching RN's cell renderer, as a\n sibling it would add an extra flex gap -->\n @for (cell of windowCells; track cell.key) {\n @if (cell.isSticky) {\n <sticky-header\n (layout)=\"handleCellLayout(cell.measure, $event)\"\n [style]=\"cellStyle\"\n >\n <ng-container\n [vListOutlet]=\"cellTemplate\"\n [vListOutletContext]=\"cell.context\"\n ></ng-container>\n @if (cell.separatorContext !== undefined) {\n <ng-container\n [vListOutlet]=\"separatorTemplate\"\n [vListOutletContext]=\"cell.separatorContext\"\n ></ng-container>\n }\n </sticky-header>\n } @else {\n <view\n (layout)=\"handleCellLayout(cell.measure, $event)\"\n [style]=\"cellStyle\"\n >\n <ng-container\n [vListOutlet]=\"cellTemplate\"\n [vListOutletContext]=\"cell.context\"\n ></ng-container>\n @if (cell.separatorContext !== undefined) {\n <ng-container\n [vListOutlet]=\"separatorTemplate\"\n [vListOutletContext]=\"cell.separatorContext\"\n ></ng-container>\n }\n </view>\n }\n }\n @if (trailingSpacerStyle !== null) {\n <view [style]=\"trailingSpacerStyle\"></view>\n }\n }\n\n @if (footerDir !== undefined) {\n <view>\n <ng-container [vListOutlet]=\"footerDir.templateRef\"></ng-container>\n </view>\n }\n </scroll-view>\n }\n ";
|
|
1
|
+
export declare const VIRTUALIZED_LIST_TEMPLATE = "\n @if (nesting.isNested) {\n <view #scrollHost [symbioteHostProps]=\"nestedViewBag()\">\n @if (headerDir !== undefined) {\n <view [style]=\"headerStyle\">\n <ng-container [vListOutlet]=\"headerDir.templateRef\"></ng-container>\n </view>\n }\n\n @if (itemCount === 0) {\n @if (emptyDir !== undefined) {\n <view [style]=\"cellStyle\">\n <ng-container [vListOutlet]=\"emptyDir.templateRef\"></ng-container>\n </view>\n }\n } @else {\n @for (row of rows; track row.key) {\n @if (row.kind === spacerKind) {\n <view [style]=\"row.style\"></view>\n } @else if (row.renderer !== undefined) {\n @if (row.cell.isSticky) {\n <sticky-header>\n <ng-container\n [vListOutlet]=\"cellRendererTpl\"\n [vListOutletContext]=\"row.renderer\"\n ></ng-container>\n </sticky-header>\n } @else {\n <ng-container\n [vListOutlet]=\"cellRendererTpl\"\n [vListOutletContext]=\"row.renderer\"\n ></ng-container>\n }\n } @else if (row.cell.isSticky) {\n <sticky-header\n (layout)=\"handleCellLayout(row.cell.measure, $event, row.cell.index)\"\n (focus)=\"handleCellFocus(row.cell.index)\"\n [style]=\"cellStyle\"\n >\n <ng-container\n [vListOutlet]=\"cellTemplate\" [vListOutletComponent]=\"itemComponent\"\n [vListOutletContext]=\"row.cell.context\"\n ></ng-container>\n @if (row.cell.separatorContext !== undefined) {\n <ng-container\n [vListOutlet]=\"separatorTemplate\"\n [vListOutletContext]=\"row.cell.separatorContext\"\n ></ng-container>\n }\n </sticky-header>\n } @else {\n <view\n (layout)=\"handleCellLayout(row.cell.measure, $event, row.cell.index)\"\n (focus)=\"handleCellFocus(row.cell.index)\"\n [style]=\"cellStyle\"\n >\n <ng-container\n [vListOutlet]=\"cellTemplate\" [vListOutletComponent]=\"itemComponent\"\n [vListOutletContext]=\"row.cell.context\"\n ></ng-container>\n @if (row.cell.separatorContext !== undefined) {\n <ng-container\n [vListOutlet]=\"separatorTemplate\"\n [vListOutletContext]=\"row.cell.separatorContext\"\n ></ng-container>\n }\n </view>\n }\n }\n }\n\n @if (footerDir !== undefined) {\n <view [style]=\"footerStyle\">\n <ng-container [vListOutlet]=\"footerDir.templateRef\"></ng-container>\n </view>\n }\n </view>\n } @else if (isHorizontal) {\n <horizontal-scroll-view #scrollHost [symbioteHostProps]=\"scrollViewBag()\">\n @if (shouldRenderRefreshControl) {\n <refresh-control\n [symbioteHostProps]=\"refreshControlBag()\"\n ></refresh-control>\n }\n\n @if (headerDir !== undefined) {\n <view [style]=\"headerStyle\">\n <ng-container [vListOutlet]=\"headerDir.templateRef\"></ng-container>\n </view>\n }\n\n @if (itemCount === 0) {\n @if (emptyDir !== undefined) {\n <view [style]=\"cellStyle\">\n <ng-container [vListOutlet]=\"emptyDir.templateRef\"></ng-container>\n </view>\n }\n } @else {\n @for (row of rows; track row.key) {\n @if (row.kind === spacerKind) {\n <view [style]=\"row.style\"></view>\n } @else if (row.renderer !== undefined) {\n @if (row.cell.isSticky) {\n <sticky-header>\n <ng-container\n [vListOutlet]=\"cellRendererTpl\"\n [vListOutletContext]=\"row.renderer\"\n ></ng-container>\n </sticky-header>\n } @else {\n <ng-container\n [vListOutlet]=\"cellRendererTpl\"\n [vListOutletContext]=\"row.renderer\"\n ></ng-container>\n }\n } @else if (row.cell.isSticky) {\n <sticky-header\n (layout)=\"handleCellLayout(row.cell.measure, $event, row.cell.index)\"\n (focus)=\"handleCellFocus(row.cell.index)\"\n [style]=\"cellStyle\"\n >\n <ng-container\n [vListOutlet]=\"cellTemplate\" [vListOutletComponent]=\"itemComponent\"\n [vListOutletContext]=\"row.cell.context\"\n ></ng-container>\n @if (row.cell.separatorContext !== undefined) {\n <ng-container\n [vListOutlet]=\"separatorTemplate\"\n [vListOutletContext]=\"row.cell.separatorContext\"\n ></ng-container>\n }\n </sticky-header>\n } @else {\n <view\n (layout)=\"handleCellLayout(row.cell.measure, $event, row.cell.index)\"\n (focus)=\"handleCellFocus(row.cell.index)\"\n [style]=\"cellStyle\"\n >\n <ng-container\n [vListOutlet]=\"cellTemplate\" [vListOutletComponent]=\"itemComponent\"\n [vListOutletContext]=\"row.cell.context\"\n ></ng-container>\n @if (row.cell.separatorContext !== undefined) {\n <ng-container\n [vListOutlet]=\"separatorTemplate\"\n [vListOutletContext]=\"row.cell.separatorContext\"\n ></ng-container>\n }\n </view>\n }\n }\n }\n\n @if (footerDir !== undefined) {\n <view [style]=\"footerStyle\">\n <ng-container [vListOutlet]=\"footerDir.templateRef\"></ng-container>\n </view>\n }\n </horizontal-scroll-view>\n } @else {\n <scroll-view #scrollHost [symbioteHostProps]=\"scrollViewBag()\">\n @if (shouldRenderRefreshControl) {\n <refresh-control\n [symbioteHostProps]=\"refreshControlBag()\"\n ></refresh-control>\n }\n\n @if (headerDir !== undefined) {\n <view [style]=\"headerStyle\">\n <ng-container [vListOutlet]=\"headerDir.templateRef\"></ng-container>\n </view>\n }\n\n @if (itemCount === 0) {\n @if (emptyDir !== undefined) {\n <view [style]=\"cellStyle\">\n <ng-container [vListOutlet]=\"emptyDir.templateRef\"></ng-container>\n </view>\n }\n } @else {\n <!-- The separator sits INSIDE the measuring view, matching RN's cell renderer, as a\n sibling it would add an extra flex gap -->\n @for (row of rows; track row.key) {\n @if (row.kind === spacerKind) {\n <view [style]=\"row.style\"></view>\n } @else if (row.renderer !== undefined) {\n @if (row.cell.isSticky) {\n <sticky-header>\n <ng-container\n [vListOutlet]=\"cellRendererTpl\"\n [vListOutletContext]=\"row.renderer\"\n ></ng-container>\n </sticky-header>\n } @else {\n <ng-container\n [vListOutlet]=\"cellRendererTpl\"\n [vListOutletContext]=\"row.renderer\"\n ></ng-container>\n }\n } @else if (row.cell.isSticky) {\n <sticky-header\n (layout)=\"handleCellLayout(row.cell.measure, $event, row.cell.index)\"\n (focus)=\"handleCellFocus(row.cell.index)\"\n [style]=\"cellStyle\"\n >\n <ng-container\n [vListOutlet]=\"cellTemplate\" [vListOutletComponent]=\"itemComponent\"\n [vListOutletContext]=\"row.cell.context\"\n ></ng-container>\n @if (row.cell.separatorContext !== undefined) {\n <ng-container\n [vListOutlet]=\"separatorTemplate\"\n [vListOutletContext]=\"row.cell.separatorContext\"\n ></ng-container>\n }\n </sticky-header>\n } @else {\n <view\n (layout)=\"handleCellLayout(row.cell.measure, $event, row.cell.index)\"\n (focus)=\"handleCellFocus(row.cell.index)\"\n [style]=\"cellStyle\"\n >\n <ng-container\n [vListOutlet]=\"cellTemplate\" [vListOutletComponent]=\"itemComponent\"\n [vListOutletContext]=\"row.cell.context\"\n ></ng-container>\n @if (row.cell.separatorContext !== undefined) {\n <ng-container\n [vListOutlet]=\"separatorTemplate\"\n [vListOutletContext]=\"row.cell.separatorContext\"\n ></ng-container>\n }\n </view>\n }\n }\n }\n\n @if (footerDir !== undefined) {\n <view [style]=\"footerStyle\">\n <ng-container [vListOutlet]=\"footerDir.templateRef\"></ng-container>\n </view>\n }\n </scroll-view>\n }\n\n <!-- What a `vListCell` wrapper stamps for its item and separator, once per list -->\n <ng-template #cellBody let-cell>\n <ng-container\n [vListOutlet]=\"cellTemplate\" [vListOutletComponent]=\"itemComponent\"\n [vListOutletContext]=\"cell.context\"\n ></ng-container>\n @if (cell.separatorContext !== undefined) {\n <ng-container\n [vListOutlet]=\"separatorTemplate\"\n [vListOutletContext]=\"cell.separatorContext\"\n ></ng-container>\n }\n </ng-template>\n ";
|
|
@@ -1,7 +1,83 @@
|
|
|
1
|
-
// Same body on both axes, only the outer tag differs
|
|
2
|
-
// Written out once per branch: ngc needs one literal,
|
|
1
|
+
// Same body on both axes and in the nested view, only the outer tag differs
|
|
2
|
+
// Written out once per branch: ngc needs one literal, and a shared outlet would add one per list
|
|
3
3
|
export const VIRTUALIZED_LIST_TEMPLATE = `
|
|
4
|
-
@if (
|
|
4
|
+
@if (nesting.isNested) {
|
|
5
|
+
<view #scrollHost [symbioteHostProps]="nestedViewBag()">
|
|
6
|
+
@if (headerDir !== undefined) {
|
|
7
|
+
<view [style]="headerStyle">
|
|
8
|
+
<ng-container [vListOutlet]="headerDir.templateRef"></ng-container>
|
|
9
|
+
</view>
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
@if (itemCount === 0) {
|
|
13
|
+
@if (emptyDir !== undefined) {
|
|
14
|
+
<view [style]="cellStyle">
|
|
15
|
+
<ng-container [vListOutlet]="emptyDir.templateRef"></ng-container>
|
|
16
|
+
</view>
|
|
17
|
+
}
|
|
18
|
+
} @else {
|
|
19
|
+
@for (row of rows; track row.key) {
|
|
20
|
+
@if (row.kind === spacerKind) {
|
|
21
|
+
<view [style]="row.style"></view>
|
|
22
|
+
} @else if (row.renderer !== undefined) {
|
|
23
|
+
@if (row.cell.isSticky) {
|
|
24
|
+
<sticky-header>
|
|
25
|
+
<ng-container
|
|
26
|
+
[vListOutlet]="cellRendererTpl"
|
|
27
|
+
[vListOutletContext]="row.renderer"
|
|
28
|
+
></ng-container>
|
|
29
|
+
</sticky-header>
|
|
30
|
+
} @else {
|
|
31
|
+
<ng-container
|
|
32
|
+
[vListOutlet]="cellRendererTpl"
|
|
33
|
+
[vListOutletContext]="row.renderer"
|
|
34
|
+
></ng-container>
|
|
35
|
+
}
|
|
36
|
+
} @else if (row.cell.isSticky) {
|
|
37
|
+
<sticky-header
|
|
38
|
+
(layout)="handleCellLayout(row.cell.measure, $event, row.cell.index)"
|
|
39
|
+
(focus)="handleCellFocus(row.cell.index)"
|
|
40
|
+
[style]="cellStyle"
|
|
41
|
+
>
|
|
42
|
+
<ng-container
|
|
43
|
+
[vListOutlet]="cellTemplate" [vListOutletComponent]="itemComponent"
|
|
44
|
+
[vListOutletContext]="row.cell.context"
|
|
45
|
+
></ng-container>
|
|
46
|
+
@if (row.cell.separatorContext !== undefined) {
|
|
47
|
+
<ng-container
|
|
48
|
+
[vListOutlet]="separatorTemplate"
|
|
49
|
+
[vListOutletContext]="row.cell.separatorContext"
|
|
50
|
+
></ng-container>
|
|
51
|
+
}
|
|
52
|
+
</sticky-header>
|
|
53
|
+
} @else {
|
|
54
|
+
<view
|
|
55
|
+
(layout)="handleCellLayout(row.cell.measure, $event, row.cell.index)"
|
|
56
|
+
(focus)="handleCellFocus(row.cell.index)"
|
|
57
|
+
[style]="cellStyle"
|
|
58
|
+
>
|
|
59
|
+
<ng-container
|
|
60
|
+
[vListOutlet]="cellTemplate" [vListOutletComponent]="itemComponent"
|
|
61
|
+
[vListOutletContext]="row.cell.context"
|
|
62
|
+
></ng-container>
|
|
63
|
+
@if (row.cell.separatorContext !== undefined) {
|
|
64
|
+
<ng-container
|
|
65
|
+
[vListOutlet]="separatorTemplate"
|
|
66
|
+
[vListOutletContext]="row.cell.separatorContext"
|
|
67
|
+
></ng-container>
|
|
68
|
+
}
|
|
69
|
+
</view>
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
@if (footerDir !== undefined) {
|
|
75
|
+
<view [style]="footerStyle">
|
|
76
|
+
<ng-container [vListOutlet]="footerDir.templateRef"></ng-container>
|
|
77
|
+
</view>
|
|
78
|
+
}
|
|
79
|
+
</view>
|
|
80
|
+
} @else if (isHorizontal) {
|
|
5
81
|
<horizontal-scroll-view #scrollHost [symbioteHostProps]="scrollViewBag()">
|
|
6
82
|
@if (shouldRenderRefreshControl) {
|
|
7
83
|
<refresh-control
|
|
@@ -10,77 +86,75 @@ export const VIRTUALIZED_LIST_TEMPLATE = `
|
|
|
10
86
|
}
|
|
11
87
|
|
|
12
88
|
@if (headerDir !== undefined) {
|
|
13
|
-
<view>
|
|
89
|
+
<view [style]="headerStyle">
|
|
14
90
|
<ng-container [vListOutlet]="headerDir.templateRef"></ng-container>
|
|
15
91
|
</view>
|
|
16
92
|
}
|
|
17
93
|
|
|
18
94
|
@if (itemCount === 0) {
|
|
19
95
|
@if (emptyDir !== undefined) {
|
|
20
|
-
<view>
|
|
96
|
+
<view [style]="cellStyle">
|
|
21
97
|
<ng-container [vListOutlet]="emptyDir.templateRef"></ng-container>
|
|
22
98
|
</view>
|
|
23
99
|
}
|
|
24
100
|
} @else {
|
|
25
|
-
@
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
@if (cell.isSticky) {
|
|
101
|
+
@for (row of rows; track row.key) {
|
|
102
|
+
@if (row.kind === spacerKind) {
|
|
103
|
+
<view [style]="row.style"></view>
|
|
104
|
+
} @else if (row.renderer !== undefined) {
|
|
105
|
+
@if (row.cell.isSticky) {
|
|
106
|
+
<sticky-header>
|
|
107
|
+
<ng-container
|
|
108
|
+
[vListOutlet]="cellRendererTpl"
|
|
109
|
+
[vListOutletContext]="row.renderer"
|
|
110
|
+
></ng-container>
|
|
111
|
+
</sticky-header>
|
|
112
|
+
} @else {
|
|
113
|
+
<ng-container
|
|
114
|
+
[vListOutlet]="cellRendererTpl"
|
|
115
|
+
[vListOutletContext]="row.renderer"
|
|
116
|
+
></ng-container>
|
|
117
|
+
}
|
|
118
|
+
} @else if (row.cell.isSticky) {
|
|
44
119
|
<sticky-header
|
|
45
|
-
(layout)="handleCellLayout(cell.measure, $event)"
|
|
120
|
+
(layout)="handleCellLayout(row.cell.measure, $event, row.cell.index)"
|
|
121
|
+
(focus)="handleCellFocus(row.cell.index)"
|
|
46
122
|
[style]="cellStyle"
|
|
47
123
|
>
|
|
48
124
|
<ng-container
|
|
49
|
-
[vListOutlet]="cellTemplate"
|
|
50
|
-
[vListOutletContext]="cell.context"
|
|
125
|
+
[vListOutlet]="cellTemplate" [vListOutletComponent]="itemComponent"
|
|
126
|
+
[vListOutletContext]="row.cell.context"
|
|
51
127
|
></ng-container>
|
|
52
|
-
@if (cell.separatorContext !== undefined) {
|
|
128
|
+
@if (row.cell.separatorContext !== undefined) {
|
|
53
129
|
<ng-container
|
|
54
130
|
[vListOutlet]="separatorTemplate"
|
|
55
|
-
[vListOutletContext]="cell.separatorContext"
|
|
131
|
+
[vListOutletContext]="row.cell.separatorContext"
|
|
56
132
|
></ng-container>
|
|
57
133
|
}
|
|
58
134
|
</sticky-header>
|
|
59
135
|
} @else {
|
|
60
136
|
<view
|
|
61
|
-
(layout)="handleCellLayout(cell.measure, $event)"
|
|
137
|
+
(layout)="handleCellLayout(row.cell.measure, $event, row.cell.index)"
|
|
138
|
+
(focus)="handleCellFocus(row.cell.index)"
|
|
62
139
|
[style]="cellStyle"
|
|
63
140
|
>
|
|
64
141
|
<ng-container
|
|
65
|
-
[vListOutlet]="cellTemplate"
|
|
66
|
-
[vListOutletContext]="cell.context"
|
|
142
|
+
[vListOutlet]="cellTemplate" [vListOutletComponent]="itemComponent"
|
|
143
|
+
[vListOutletContext]="row.cell.context"
|
|
67
144
|
></ng-container>
|
|
68
|
-
@if (cell.separatorContext !== undefined) {
|
|
145
|
+
@if (row.cell.separatorContext !== undefined) {
|
|
69
146
|
<ng-container
|
|
70
147
|
[vListOutlet]="separatorTemplate"
|
|
71
|
-
[vListOutletContext]="cell.separatorContext"
|
|
148
|
+
[vListOutletContext]="row.cell.separatorContext"
|
|
72
149
|
></ng-container>
|
|
73
150
|
}
|
|
74
151
|
</view>
|
|
75
152
|
}
|
|
76
153
|
}
|
|
77
|
-
@if (trailingSpacerStyle !== null) {
|
|
78
|
-
<view [style]="trailingSpacerStyle"></view>
|
|
79
|
-
}
|
|
80
154
|
}
|
|
81
155
|
|
|
82
156
|
@if (footerDir !== undefined) {
|
|
83
|
-
<view>
|
|
157
|
+
<view [style]="footerStyle">
|
|
84
158
|
<ng-container [vListOutlet]="footerDir.templateRef"></ng-container>
|
|
85
159
|
</view>
|
|
86
160
|
}
|
|
@@ -94,83 +168,95 @@ export const VIRTUALIZED_LIST_TEMPLATE = `
|
|
|
94
168
|
}
|
|
95
169
|
|
|
96
170
|
@if (headerDir !== undefined) {
|
|
97
|
-
<view>
|
|
171
|
+
<view [style]="headerStyle">
|
|
98
172
|
<ng-container [vListOutlet]="headerDir.templateRef"></ng-container>
|
|
99
173
|
</view>
|
|
100
174
|
}
|
|
101
175
|
|
|
102
176
|
@if (itemCount === 0) {
|
|
103
177
|
@if (emptyDir !== undefined) {
|
|
104
|
-
<view>
|
|
178
|
+
<view [style]="cellStyle">
|
|
105
179
|
<ng-container [vListOutlet]="emptyDir.templateRef"></ng-container>
|
|
106
180
|
</view>
|
|
107
181
|
}
|
|
108
182
|
} @else {
|
|
109
|
-
@if (leadingSpacerStyle !== null) {
|
|
110
|
-
<view [style]="leadingSpacerStyle"></view>
|
|
111
|
-
}
|
|
112
|
-
@if (forcedStickyCell !== null) {
|
|
113
|
-
<sticky-header
|
|
114
|
-
(layout)="handleCellLayout(forcedStickyCell.measure, $event)"
|
|
115
|
-
[style]="cellStyle"
|
|
116
|
-
>
|
|
117
|
-
<ng-container
|
|
118
|
-
[vListOutlet]="cellTemplate"
|
|
119
|
-
[vListOutletContext]="forcedStickyCell.context"
|
|
120
|
-
></ng-container>
|
|
121
|
-
</sticky-header>
|
|
122
|
-
}
|
|
123
|
-
@if (gapSpacerStyle !== null) {
|
|
124
|
-
<view [style]="gapSpacerStyle"></view>
|
|
125
|
-
}
|
|
126
183
|
<!-- The separator sits INSIDE the measuring view, matching RN's cell renderer, as a
|
|
127
184
|
sibling it would add an extra flex gap -->
|
|
128
|
-
@for (
|
|
129
|
-
@if (
|
|
185
|
+
@for (row of rows; track row.key) {
|
|
186
|
+
@if (row.kind === spacerKind) {
|
|
187
|
+
<view [style]="row.style"></view>
|
|
188
|
+
} @else if (row.renderer !== undefined) {
|
|
189
|
+
@if (row.cell.isSticky) {
|
|
190
|
+
<sticky-header>
|
|
191
|
+
<ng-container
|
|
192
|
+
[vListOutlet]="cellRendererTpl"
|
|
193
|
+
[vListOutletContext]="row.renderer"
|
|
194
|
+
></ng-container>
|
|
195
|
+
</sticky-header>
|
|
196
|
+
} @else {
|
|
197
|
+
<ng-container
|
|
198
|
+
[vListOutlet]="cellRendererTpl"
|
|
199
|
+
[vListOutletContext]="row.renderer"
|
|
200
|
+
></ng-container>
|
|
201
|
+
}
|
|
202
|
+
} @else if (row.cell.isSticky) {
|
|
130
203
|
<sticky-header
|
|
131
|
-
(layout)="handleCellLayout(cell.measure, $event)"
|
|
204
|
+
(layout)="handleCellLayout(row.cell.measure, $event, row.cell.index)"
|
|
205
|
+
(focus)="handleCellFocus(row.cell.index)"
|
|
132
206
|
[style]="cellStyle"
|
|
133
207
|
>
|
|
134
208
|
<ng-container
|
|
135
|
-
[vListOutlet]="cellTemplate"
|
|
136
|
-
[vListOutletContext]="cell.context"
|
|
209
|
+
[vListOutlet]="cellTemplate" [vListOutletComponent]="itemComponent"
|
|
210
|
+
[vListOutletContext]="row.cell.context"
|
|
137
211
|
></ng-container>
|
|
138
|
-
@if (cell.separatorContext !== undefined) {
|
|
212
|
+
@if (row.cell.separatorContext !== undefined) {
|
|
139
213
|
<ng-container
|
|
140
214
|
[vListOutlet]="separatorTemplate"
|
|
141
|
-
[vListOutletContext]="cell.separatorContext"
|
|
215
|
+
[vListOutletContext]="row.cell.separatorContext"
|
|
142
216
|
></ng-container>
|
|
143
217
|
}
|
|
144
218
|
</sticky-header>
|
|
145
219
|
} @else {
|
|
146
220
|
<view
|
|
147
|
-
(layout)="handleCellLayout(cell.measure, $event)"
|
|
221
|
+
(layout)="handleCellLayout(row.cell.measure, $event, row.cell.index)"
|
|
222
|
+
(focus)="handleCellFocus(row.cell.index)"
|
|
148
223
|
[style]="cellStyle"
|
|
149
224
|
>
|
|
150
225
|
<ng-container
|
|
151
|
-
[vListOutlet]="cellTemplate"
|
|
152
|
-
[vListOutletContext]="cell.context"
|
|
226
|
+
[vListOutlet]="cellTemplate" [vListOutletComponent]="itemComponent"
|
|
227
|
+
[vListOutletContext]="row.cell.context"
|
|
153
228
|
></ng-container>
|
|
154
|
-
@if (cell.separatorContext !== undefined) {
|
|
229
|
+
@if (row.cell.separatorContext !== undefined) {
|
|
155
230
|
<ng-container
|
|
156
231
|
[vListOutlet]="separatorTemplate"
|
|
157
|
-
[vListOutletContext]="cell.separatorContext"
|
|
232
|
+
[vListOutletContext]="row.cell.separatorContext"
|
|
158
233
|
></ng-container>
|
|
159
234
|
}
|
|
160
235
|
</view>
|
|
161
236
|
}
|
|
162
237
|
}
|
|
163
|
-
@if (trailingSpacerStyle !== null) {
|
|
164
|
-
<view [style]="trailingSpacerStyle"></view>
|
|
165
|
-
}
|
|
166
238
|
}
|
|
167
239
|
|
|
168
240
|
@if (footerDir !== undefined) {
|
|
169
|
-
<view>
|
|
241
|
+
<view [style]="footerStyle">
|
|
170
242
|
<ng-container [vListOutlet]="footerDir.templateRef"></ng-container>
|
|
171
243
|
</view>
|
|
172
244
|
}
|
|
173
245
|
</scroll-view>
|
|
174
246
|
}
|
|
247
|
+
|
|
248
|
+
<!-- What a \`vListCell\` wrapper stamps for its item and separator, once per list -->
|
|
249
|
+
<ng-template #cellBody let-cell>
|
|
250
|
+
<ng-container
|
|
251
|
+
[vListOutlet]="cellTemplate" [vListOutletComponent]="itemComponent"
|
|
252
|
+
[vListOutletContext]="cell.context"
|
|
253
|
+
></ng-container>
|
|
254
|
+
@if (cell.separatorContext !== undefined) {
|
|
255
|
+
<ng-container
|
|
256
|
+
[vListOutlet]="separatorTemplate"
|
|
257
|
+
[vListOutletContext]="cell.separatorContext"
|
|
258
|
+
></ng-container>
|
|
259
|
+
}
|
|
260
|
+
</ng-template>
|
|
175
261
|
`;
|
|
176
262
|
//# sourceMappingURL=list-template.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list-template.js","sourceRoot":"","sources":["../../../../src/components/virtualized-list/list-template.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"list-template.js","sourceRoot":"","sources":["../../../../src/components/virtualized-list/list-template.ts"],"names":[],"mappings":"AAAA,4EAA4E;AAC5E,iGAAiG;AACjG,MAAM,CAAC,MAAM,yBAAyB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkQtC,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { IListScope } from '@symbiote-native/components';
|
|
2
|
+
export declare abstract class ListScopeProvider {
|
|
3
|
+
abstract readonly listScope: IListScope | null;
|
|
4
|
+
}
|
|
5
|
+
export declare const NO_LIST_SCOPE: ListScopeProvider;
|
|
6
|
+
export declare function injectVirtualizedListScope(): IListScope | null;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
// The scope a list hands down to the lists nested in its cells, Angular's way to carry it
|
|
2
|
+
// What it holds and how it behaves is `createListNesting` in the shared components package
|
|
3
|
+
import { inject } from '@angular/core';
|
|
4
|
+
// A list provides itself under this token, a cell declared inside it injects the nearest one
|
|
5
|
+
export class ListScopeProvider {
|
|
6
|
+
}
|
|
7
|
+
// A portal-like component (Modal) provides this, its content sits outside the list's scroll
|
|
8
|
+
export const NO_LIST_SCOPE = { listScope: null };
|
|
9
|
+
// Null outside every list, the scope of the nearest list above otherwise
|
|
10
|
+
export function injectVirtualizedListScope() {
|
|
11
|
+
const provider = inject(ListScopeProvider, {
|
|
12
|
+
skipSelf: true,
|
|
13
|
+
optional: true,
|
|
14
|
+
});
|
|
15
|
+
return provider?.listScope ?? null;
|
|
16
|
+
}
|
|
17
|
+
//# sourceMappingURL=nested-scope.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"nested-scope.js","sourceRoot":"","sources":["../../../../src/components/virtualized-list/nested-scope.ts"],"names":[],"mappings":"AAAA,0FAA0F;AAC1F,2FAA2F;AAE3F,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAGvC,6FAA6F;AAC7F,MAAM,OAAgB,iBAAiB;CAEtC;AAED,4FAA4F;AAC5F,MAAM,CAAC,MAAM,aAAa,GAAsB,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAEpE,yEAAyE;AACzE,MAAM,UAAU,0BAA0B;IACxC,MAAM,QAAQ,GAAG,MAAM,CAAC,iBAAiB,EAAE;QACzC,QAAQ,EAAE,IAAI;QACd,QAAQ,EAAE,IAAI;KACf,CAAC,CAAC;IACH,OAAO,QAAQ,EAAE,SAAS,IAAI,IAAI,CAAC;AACrC,CAAC"}
|
|
@@ -1,17 +1,28 @@
|
|
|
1
1
|
import { TemplateRef } from '@angular/core';
|
|
2
|
-
import type { ISection, ISeparators } from '@symbiote-native/components';
|
|
2
|
+
import type { ISection as ICoreSection, ISeparators } from '@symbiote-native/components';
|
|
3
|
+
import type { IVListSeparatorContext } from '../virtualized-list';
|
|
3
4
|
import * as i0 from "@angular/core";
|
|
4
|
-
export
|
|
5
|
+
export type ISection<ItemT> = ICoreSection<ItemT> & {
|
|
6
|
+
item?: TemplateRef<IVSectionItemContext<ItemT>>;
|
|
7
|
+
separator?: TemplateRef<IVListSeparatorContext<ItemT>>;
|
|
8
|
+
};
|
|
9
|
+
export type IVSectionItemContext<ItemT> = {
|
|
5
10
|
$implicit: ItemT;
|
|
6
11
|
item: ItemT;
|
|
7
12
|
index: number;
|
|
8
13
|
section: ISection<ItemT>;
|
|
9
14
|
separators: ISeparators;
|
|
10
|
-
}
|
|
11
|
-
export
|
|
15
|
+
};
|
|
16
|
+
export type IVSectionContext<ItemT> = {
|
|
12
17
|
$implicit: ISection<ItemT>;
|
|
13
18
|
section: ISection<ItemT>;
|
|
14
|
-
}
|
|
19
|
+
};
|
|
20
|
+
export type IVSectionSeparatorContext<ItemT> = IVListSeparatorContext<ItemT> & {
|
|
21
|
+
section?: ISection<ItemT>;
|
|
22
|
+
leadingSection?: ISection<ItemT>;
|
|
23
|
+
trailingSection?: ISection<ItemT>;
|
|
24
|
+
props?: IVListSeparatorContext<ItemT>;
|
|
25
|
+
};
|
|
15
26
|
export declare class VSectionItemDirective<ItemT = unknown> {
|
|
16
27
|
readonly templateRef: TemplateRef<IVSectionItemContext<ItemT>>;
|
|
17
28
|
static ngTemplateContextGuard<T>(_dir: VSectionItemDirective<T>, _ctx: unknown): _ctx is IVSectionItemContext<T>;
|
|
@@ -30,8 +41,9 @@ export declare class VSectionFooterDirective<ItemT = unknown> {
|
|
|
30
41
|
static ɵfac: i0.ɵɵFactoryDeclaration<VSectionFooterDirective<any>, never>;
|
|
31
42
|
static ɵdir: i0.ɵɵDirectiveDeclaration<VSectionFooterDirective<any>, "[vSectionFooter]", never, {}, {}, never, never, true, never>;
|
|
32
43
|
}
|
|
33
|
-
export declare class VSectionSeparatorDirective {
|
|
34
|
-
readonly templateRef: TemplateRef<
|
|
35
|
-
static
|
|
36
|
-
static
|
|
44
|
+
export declare class VSectionSeparatorDirective<ItemT = unknown> {
|
|
45
|
+
readonly templateRef: TemplateRef<IVSectionSeparatorContext<ItemT>>;
|
|
46
|
+
static ngTemplateContextGuard<T>(_dir: VSectionSeparatorDirective<T>, _ctx: unknown): _ctx is IVSectionSeparatorContext<T>;
|
|
47
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<VSectionSeparatorDirective<any>, never>;
|
|
48
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<VSectionSeparatorDirective<any>, "[vSectionSeparator]", never, {}, {}, never, never, true, never>;
|
|
37
49
|
}
|
|
@@ -1,29 +1,7 @@
|
|
|
1
|
-
//
|
|
2
|
-
//
|
|
3
|
-
// React/Vue pass element-returning callbacks; that does NOT translate to Angular, where per-cell
|
|
4
|
-
// content is a TEMPLATE. So the app supplies each section slot as an `<ng-template>` carrying one
|
|
5
|
-
// of these structural directives, and VirtualizedSectionList stamps the windowed slice through
|
|
6
|
-
// them. The shared flatten/window surface stays in @symbiote-native/components, only the cell-AUTHORING shape is
|
|
7
|
-
// framework-specific. SectionList (the next layer) reuses these same directives verbatim.
|
|
8
|
-
//
|
|
9
|
-
// Authoring API (what the app imports and what SectionList builds on):
|
|
10
|
-
// <VirtualizedSectionList [sections]="sections">
|
|
11
|
-
// <ng-template vSectionItem let-item let-index="index" let-section="section" let-separators="separators"> … </ng-template>
|
|
12
|
-
// <ng-template vSectionHeader let-section> … </ng-template>
|
|
13
|
-
// <ng-template vSectionFooter let-section> … </ng-template>
|
|
14
|
-
// <ng-template vSectionSeparator> … </ng-template> <!-- between adjacent sections -->
|
|
15
|
-
// <!-- list-level slots reuse VirtualizedList's own directives: -->
|
|
16
|
-
// <ng-template vListHeader> … </ng-template>
|
|
17
|
-
// <ng-template vListFooter> … </ng-template>
|
|
18
|
-
// <ng-template vListEmpty> … </ng-template>
|
|
19
|
-
// <ng-template vListSeparator let-highlighted let-leadingItem="leadingItem"> … </ng-template> <!-- between items -->
|
|
20
|
-
// </VirtualizedSectionList>
|
|
21
|
-
//
|
|
22
|
-
// Each directive carries a static ngTemplateContextGuard so the `let-` bindings infer at the call
|
|
23
|
-
// site (the Angular twin of renderItem / renderSectionHeader's typed info arg).
|
|
1
|
+
// Section list slots are `<ng-template>`s carrying these directives, the list stamps the window
|
|
2
|
+
// through them. Each has a context guard so the `let-` bindings infer at the call site
|
|
24
3
|
import { Directive, TemplateRef, inject } from '@angular/core';
|
|
25
4
|
import * as i0 from "@angular/core";
|
|
26
|
-
// `<ng-template vSectionItem>` — one section item row. The static guard types the `let-` bindings.
|
|
27
5
|
export class VSectionItemDirective {
|
|
28
6
|
constructor() {
|
|
29
7
|
this.templateRef = inject(TemplateRef);
|
|
@@ -38,7 +16,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
38
16
|
type: Directive,
|
|
39
17
|
args: [{ selector: '[vSectionItem]', standalone: true }]
|
|
40
18
|
}] });
|
|
41
|
-
//
|
|
19
|
+
// Rendered above each section's items, RN's `renderSectionHeader`
|
|
42
20
|
export class VSectionHeaderDirective {
|
|
43
21
|
constructor() {
|
|
44
22
|
this.templateRef = inject(TemplateRef);
|
|
@@ -53,7 +31,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
53
31
|
type: Directive,
|
|
54
32
|
args: [{ selector: '[vSectionHeader]', standalone: true }]
|
|
55
33
|
}] });
|
|
56
|
-
//
|
|
34
|
+
// Rendered below each section's items, RN's `renderSectionFooter`
|
|
57
35
|
export class VSectionFooterDirective {
|
|
58
36
|
constructor() {
|
|
59
37
|
this.templateRef = inject(TemplateRef);
|
|
@@ -68,12 +46,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
68
46
|
type: Directive,
|
|
69
47
|
args: [{ selector: '[vSectionFooter]', standalone: true }]
|
|
70
48
|
}] });
|
|
71
|
-
//
|
|
72
|
-
// before the next section's header). Mirrors RN's SectionSeparatorComponent; carries no context.
|
|
49
|
+
// Painted before a section's first item and after its last, RN's `SectionSeparatorComponent`
|
|
73
50
|
export class VSectionSeparatorDirective {
|
|
74
51
|
constructor() {
|
|
75
52
|
this.templateRef = inject(TemplateRef);
|
|
76
53
|
}
|
|
54
|
+
static ngTemplateContextGuard(_dir, _ctx) {
|
|
55
|
+
return true;
|
|
56
|
+
}
|
|
77
57
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: VSectionSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
78
58
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: VSectionSeparatorDirective, isStandalone: true, selector: "[vSectionSeparator]", ngImport: i0 }); }
|
|
79
59
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"directives.js","sourceRoot":"","sources":["../../../../src/components/virtualized-section-list/directives.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"directives.js","sourceRoot":"","sources":["../../../../src/components/virtualized-section-list/directives.ts"],"names":[],"mappings":"AAAA,gGAAgG;AAChG,uFAAuF;AAEvF,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;;AAsC/D,MAAM,OAAO,qBAAqB;IADlC;QAEW,gBAAW,GAClB,MAAM,CAA2C,WAAW,CAAC,CAAC;KAQjE;IANC,MAAM,CAAC,sBAAsB,CAC3B,IAA8B,EAC9B,IAAa;QAEb,OAAO,IAAI,CAAC;IACd,CAAC;8GATU,qBAAqB;kGAArB,qBAAqB;;2FAArB,qBAAqB;kBADjC,SAAS;mBAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,UAAU,EAAE,IAAI,EAAE;;AAa3D,kEAAkE;AAElE,MAAM,OAAO,uBAAuB;IADpC;QAEW,gBAAW,GAClB,MAAM,CAAuC,WAAW,CAAC,CAAC;KAQ7D;IANC,MAAM,CAAC,sBAAsB,CAC3B,IAAgC,EAChC,IAAa;QAEb,OAAO,IAAI,CAAC;IACd,CAAC;8GATU,uBAAuB;kGAAvB,uBAAuB;;2FAAvB,uBAAuB;kBADnC,SAAS;mBAAC,EAAE,QAAQ,EAAE,kBAAkB,EAAE,UAAU,EAAE,IAAI,EAAE;;AAa7D,kEAAkE;AAElE,MAAM,OAAO,uBAAuB;IADpC;QAEW,gBAAW,GAClB,MAAM,CAAuC,WAAW,CAAC,CAAC;KAQ7D;IANC,MAAM,CAAC,sBAAsB,CAC3B,IAAgC,EAChC,IAAa;QAEb,OAAO,IAAI,CAAC;IACd,CAAC;8GATU,uBAAuB;kGAAvB,uBAAuB;;2FAAvB,uBAAuB;kBADnC,SAAS;mBAAC,EAAE,QAAQ,EAAE,kBAAkB,EAAE,UAAU,EAAE,IAAI,EAAE;;AAa7D,6FAA6F;AAE7F,MAAM,OAAO,0BAA0B;IADvC;QAEW,gBAAW,GAClB,MAAM,CAAgD,WAAW,CAAC,CAAC;KAQtE;IANC,MAAM,CAAC,sBAAsB,CAC3B,IAAmC,EACnC,IAAa;QAEb,OAAO,IAAI,CAAC;IACd,CAAC;8GATU,0BAA0B;kGAA1B,0BAA0B;;2FAA1B,0BAA0B;kBADtC,SAAS;mBAAC,EAAE,QAAQ,EAAE,qBAAqB,EAAE,UAAU,EAAE,IAAI,EAAE"}
|