@ng-native/components 0.5.0 → 0.7.0

package/dist/virtual-list.js

@@ -25,8 +25,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
             type: Directive,
             args: [{ selector: 'ng-template[virtualListSeparator]' }]
         }] });
-/** A parked slot: out of layout, out of sight, and out of the accessibility tree. */
-const PARKED = Object.freeze({ display: 'none' });
+/**
+ * A parked slot: out of the flow, out of sight and out of reach, with its view kept to be used
+ * again. Not `display: none`, which is an element with no view. A screen reader passes over a
+ * view with no opacity, and `VirtualListRow` says so outright where a row uses it. Moved off the
+ * list as well, since `pointer-events: none` is CSS's: something inside a row with a
+ * `pointer-events` of its own would still take a touch where the row was left.
+ */
+const PARKED = Object.freeze({
+    position: 'absolute',
+    opacity: 0,
+    pointerEvents: 'none',
+    transform: 'translateX(-100000px)',
+});
 /** How many hidden slots of each row type are kept ready for reuse. */
 const PARK_LIMIT = 6;
 /** The style of a row that sizes itself and needs nothing else: in flow, where it falls. */
@@ -178,6 +189,8 @@ export class VirtualList extends ScrollViewProps {
     ...(ngDevMode ? [{ debugName: "headerHeight" }] : /* istanbul ignore next */ []));
     /** What native reported the content measures along the axis, once it has. */
     contentSize = 0;
+    /** The rows' own extent when native reported that, so a report for other rows is not used. */
+    contentSizeFor = -1;
     /** The item count `endReached` last fired for, cleared once the list is away from the end. */
     endReachedFor = -1;
     /** Slot styles are cached so a scroll does not hand Fabric new prop objects for stable rows. */
@@ -309,6 +322,9 @@ export class VirtualList extends ScrollViewProps {
     stride() {
         return this.itemHeight() + this.rowGap();
     }
+    /** ScrollView.js's `contentContainerHorizontal`: the header, rows and footer side by side. */
+    content = computed(() => this.horizontal() ? { flexDirection: 'row' } : undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
     canvas = computed(() => this.horizontal() ? { width: this.extent(), flexDirection: 'row' } : { height: this.extent() }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "canvas" }] : /* istanbul ignore next */ []));
     /**
@@ -521,6 +537,7 @@ export class VirtualList extends ScrollViewProps {
             this.flushScroll();
             if (this.nativeSticky)
                 this.driveStickyRows();
+            this.recheckItems();
         });
         const stop = dismissKeyboardOnTap(this.engine, this.node, () => this.keyboardShouldPersistTaps());
         inject(DestroyRef).onDestroy(() => {
@@ -533,6 +550,21 @@ export class VirtualList extends ScrollViewProps {
         if (this.zeroSize)
             this.checkZeroSize(this.zeroSize);
     }
+    /** The items the end and viewability were last checked against after a render. */
+    checkedItems = null;
+    /**
+     * New items can bring the end within reach or change what is on screen with no scroll: a list
+     * shorter than its viewport, a page appended while at the end, a filter. Checked once the rows
+     * they make are rendered, and only when they changed, so any other render costs a comparison.
+     */
+    recheckItems() {
+        const items = this.items();
+        if (items === this.checkedItems)
+            return;
+        this.checkedItems = items;
+        this.checkEnd(this.headerHeight() + this.lastOffset);
+        this.announceViewable(this.lastOffset);
+    }
     /** Whether the viewport has been laid out yet, so a zero in it is a measurement. */
     viewportMeasured = false;
     /**
@@ -973,6 +1005,8 @@ export class VirtualList extends ScrollViewProps {
     }
     /** The last set announced, so the output fires on a change rather than on every frame. */
     announced = [];
+    /** The items the last set was announced from: new items are a change even at the same indices. */
+    announcedFrom = null;
     /**
      * Announce a change in what is on screen.
      *
@@ -985,10 +1019,12 @@ export class VirtualList extends ScrollViewProps {
         const viewable = this.viewableAt(offset);
         const entered = viewable.filter((index) => !this.announced.includes(index));
         const left = this.announced.filter((index) => !viewable.includes(index));
-        if (entered.length === 0 && left.length === 0)
+        const items = this.items();
+        const same = items === this.announcedFrom || viewable.length === 0;
+        if (entered.length === 0 && left.length === 0 && same)
             return;
         this.announced = viewable;
-        const items = this.items();
+        this.announcedFrom = items;
         this.viewableItemsChanged.emit({
             viewable: viewable.map((index) => {
                 const key = this.keyAt(index);
@@ -1091,6 +1127,7 @@ export class VirtualList extends ScrollViewProps {
         this.viewport.set((this.horizontal() ? layout?.width : layout?.height) ?? 0);
         this.viewportMeasured = true;
         this.zeroSize?.laidOut(this.viewport(), this.items().length > 0);
+        this.checkEnd(this.headerHeight() + this.lastOffset);
         this.announceViewable(this.lastOffset);
     }
     /** The header's extent along the axis, which every row sits after. */
@@ -1118,13 +1155,18 @@ export class VirtualList extends ScrollViewProps {
     onContentSize(event) {
         const size = event.nativeEvent;
         this.contentSize = (this.horizontal() ? size?.width : size?.height) ?? 0;
+        this.contentSizeFor = this.extent();
+        this.checkEnd(this.headerHeight() + this.lastOffset);
     }
     checkEnd(y) {
         const count = this.items().length;
         const viewport = this.viewport();
         if (!count || !viewport)
             return;
-        const total = this.contentSize || this.headerHeight() + this.extent();
+        // Native's size is for the rows it last laid out; until it reports for these, their own extent.
+        const extent = this.extent();
+        const reported = this.contentSizeFor === extent ? this.contentSize : 0;
+        const total = reported || this.headerHeight() + extent;
         const distanceFromEnd = total - (y + viewport);
         // Away from the end again re-arms it, as React Native does, so a load that failed is retried
         // the next time the user comes back down.
@@ -1140,23 +1182,27 @@ export class VirtualList extends ScrollViewProps {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: VirtualList, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: VirtualList, isStandalone: true, selector: "virtual-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, estimatedItemHeight: { classPropertyName: "estimatedItemHeight", publicName: "estimatedItemHeight", isSignal: true, isRequired: false, transformFunction: null }, contentPadding: { classPropertyName: "contentPadding", publicName: "contentPadding", isSignal: true, isRequired: false, transformFunction: null }, rowGap: { classPropertyName: "rowGap", publicName: "rowGap", isSignal: true, isRequired: false, transformFunction: null }, keyExtractor: { classPropertyName: "keyExtractor", publicName: "keyExtractor", isSignal: true, isRequired: false, transformFunction: null }, itemType: { classPropertyName: "itemType", publicName: "itemType", isSignal: true, isRequired: false, transformFunction: null }, maintainVisibleContentPosition: { classPropertyName: "maintainVisibleContentPosition", publicName: "maintainVisibleContentPosition", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null }, endReachedThreshold: { classPropertyName: "endReachedThreshold", publicName: "endReachedThreshold", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null }, stickyIndices: { classPropertyName: "stickyIndices", publicName: "stickyIndices", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, keyboardShouldPersistTaps: { classPropertyName: "keyboardShouldPersistTaps", publicName: "keyboardShouldPersistTaps", isSignal: true, isRequired: false, transformFunction: null }, itemVisiblePercentThreshold: { classPropertyName: "itemVisiblePercentThreshold", publicName: "itemVisiblePercentThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { endReached: "endReached", viewableItemsChanged: "viewableItemsChanged" }, host: { listeners: { "scroll": "onScroll($event)", "layout": "onLayout($event)", "contentSizeChange": "onContentSize($event)" }, properties: { "flexDirection": "horizontal() ? 'row' : 'column'", "horizontal": "horizontal()", "nestedScrollEnabled": "nestedScroll()", "transform": "flip()", "scrollEventThrottle": "scrollEventThrottle()" } }, queries: [{ propertyName: "separator", first: true, predicate: VirtualListSeparator, descendants: true, isSignal: true }, { propertyName: "refreshControl", first: true, predicate: RefreshControl, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "canvasView", first: true, predicate: ["rows"], descendants: true, read: ElementRef, isSignal: true }], exportAs: ["virtualList"], usesInheritance: true, ngImport: i0, template: `
     <ng-content select="refresh-control" />
-    <view [style]="headerStyle()" (layout)="onHeaderLayout($event)"
-      ><ng-content select="[listHeader]"
-    /></view>
-    <view #rows [style]="canvas()" collapsable="false">
-      @if (measuring()) {
-        <view [style]="spacer()"></view>
-      }
-      <ng-content />
-      @if (separator(); as separator) {
-        @for (gap of gaps(); track gap.index) {
-          <view [style]="gap.style"
-            ><ng-container [templateSlot]="separator.template" [templateSlotContext]="gap.context"
-          /></view>
+    <view [style]="content()" collapsable="false">
+      <view [style]="headerStyle()" (layout)="onHeaderLayout($event)"
+        ><ng-content select="[listHeader]"
+      /></view>
+      <view #rows [style]="canvas()" collapsable="false">
+        @if (measuring()) {
+          <view [style]="spacer()"></view>
+        }
+        <ng-content />
+        @if (separator(); as separator) {
+          @for (gap of gaps(); track gap.index) {
+            <view [style]="gap.style"
+              ><ng-container
+                [templateSlot]="separator.template"
+                [templateSlotContext]="gap.context"
+            /></view>
+          }
         }
-      }
+      </view>
+      <view [style]="footerStyle()"><ng-content select="[listFooter]" /></view>
     </view>
-    <view [style]="footerStyle()"><ng-content select="[listFooter]" /></view>
   `, isInline: true, dependencies: [{ kind: "directive", type: TemplateSlot, selector: "[templateSlot]", inputs: ["templateSlot", "templateSlotContext"] }, { kind: "directive", type: View, selector: "view" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: VirtualList, decorators: [{
@@ -1165,29 +1211,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                     selector: 'virtual-list',
                     exportAs: 'virtualList',
                     imports: [TemplateSlot, View],
+                    // One content view holds the header, the rows and the footer, as ScrollView.js's content
+                    // container does: Android's ScrollView takes one child and throws on a second. It is never
+                    // collapsed, or Fabric would flatten it away and hand the scroll view all three again.
                     // See ScrollView: the canvas carries only a height, so Fabric would flatten it away and drags
                     // over the gaps between rows would not scroll. Separators come after the rows so they draw over
                     // the slot they share. The spacer is there only when rows are in flow.
                     // A refresh control comes first, as the scroll view's own child; see ScrollView.
                     template: `
     <ng-content select="refresh-control" />
-    <view [style]="headerStyle()" (layout)="onHeaderLayout($event)"
-      ><ng-content select="[listHeader]"
-    /></view>
-    <view #rows [style]="canvas()" collapsable="false">
-      @if (measuring()) {
-        <view [style]="spacer()"></view>
-      }
-      <ng-content />
-      @if (separator(); as separator) {
-        @for (gap of gaps(); track gap.index) {
-          <view [style]="gap.style"
-            ><ng-container [templateSlot]="separator.template" [templateSlotContext]="gap.context"
-          /></view>
+    <view [style]="content()" collapsable="false">
+      <view [style]="headerStyle()" (layout)="onHeaderLayout($event)"
+        ><ng-content select="[listHeader]"
+      /></view>
+      <view #rows [style]="canvas()" collapsable="false">
+        @if (measuring()) {
+          <view [style]="spacer()"></view>
+        }
+        <ng-content />
+        @if (separator(); as separator) {
+          @for (gap of gaps(); track gap.index) {
+            <view [style]="gap.style"
+              ><ng-container
+                [templateSlot]="separator.template"
+                [templateSlotContext]="gap.context"
+            /></view>
+          }
         }
-      }
+      </view>
+      <view [style]="footerStyle()"><ng-content select="[listFooter]" /></view>
     </view>
-    <view [style]="footerStyle()"><ng-content select="[listFooter]" /></view>
   `,
                     host: {
                         // ScrollView.js's `baseHorizontal`: a column would stack the header, canvas and footer, and
@@ -1223,7 +1276,7 @@ export class VirtualListRow {
         this.list.measureRow(this.row(), event.nativeEvent?.layout);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: VirtualListRow, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.2.0", type: VirtualListRow, isStandalone: true, selector: "[virtualListRow]", inputs: { row: { classPropertyName: "row", publicName: "virtualListRow", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "layout": "onLayout($event)" }, properties: { "style": "row().style" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.2.0", type: VirtualListRow, isStandalone: true, selector: "[virtualListRow]", inputs: { row: { classPropertyName: "row", publicName: "virtualListRow", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "layout": "onLayout($event)" }, properties: { "style": "row().style", "attr.aria-hidden": "row().parked ? true : null" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: VirtualListRow, decorators: [{
             type: Directive,
@@ -1231,6 +1284,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                     selector: '[virtualListRow]',
                     host: {
                         '[style]': 'row().style',
+                        // A parked row is not read out: see `PARKED`.
+                        '[attr.aria-hidden]': 'row().parked ? true : null',
                         '(layout)': 'onLayout($event)',
                     },
                 }]