@symbiote-native/angular 3.3.0 → 3.5.0

package/src/components/section-list/index.ts

@@ -12,8 +12,8 @@ import {
   inject,
 } from '@angular/core';
 import type {
+  IInnerViewRef,
   IScrollViewHandle,
-  ISection,
   IVirtualizedSectionListHandle,
 } from '@symbiote-native/components';
 import {
@@ -23,11 +23,11 @@ import {
   type IViewStyle,
 } from '@symbiote-native/engine';
 import {
+  VListCellDirective,
   VListEmptyDirective,
   VListFooterDirective,
   VListHeaderDirective,
   VListSeparatorDirective,
-  type IVListSeparatorContext,
 } from '../virtualized-list';
 import { VListOutletDirective } from '../virtualized-list/directives';
 import { LIST_ACCESSIBILITY_FORWARD } from '../virtualized-list/list-a11y-forward';
@@ -43,16 +43,11 @@ import {
   VSectionItemDirective,
   VSectionSeparatorDirective,
   VirtualizedSectionList,
+  type ISection,
   type IVirtualizedSectionListProps,
 } from '../virtualized-section-list';
 
-// The separator context arrives typed `unknown`, the directive is matched structurally in the
-// template with no type argument to pin the item type. The narrowest cast for that gap
-function asItem<ItemT>(value: unknown): ItemT | undefined {
-  return value as ItemT | undefined;
-}
-
-export type { ISection } from '@symbiote-native/components';
+export type { ISection } from '../virtualized-section-list';
 export type ISectionListHandle = IVirtualizedSectionListHandle;
 
 // Re-exported so app code gets the whole `vSection*` and `vList*` authoring surface from here
@@ -124,20 +119,28 @@ export type ISectionListInputs<ItemT> = Omit<
       [maxToRenderPerBatch]="maxToRenderPerBatch"
       [updateCellsBatchingPeriod]="updateCellsBatchingPeriod"
       [windowSize]="windowSize"
+      [disableVirtualization]="disableVirtualization"
       [inverted]="inverted"
+      [horizontal]="horizontal"
       [maintainVisibleContentPosition]="maintainVisibleContentPosition"
       [onScroll]="onScroll"
       [onScrollBeginDrag]="onScrollBeginDrag"
       [onScrollEndDrag]="onScrollEndDrag"
       [onMomentumScrollBegin]="onMomentumScrollBegin"
       [onMomentumScrollEnd]="onMomentumScrollEnd"
+      [onContentSizeChange]="onContentSizeChange"
       [scrollEventThrottle]="scrollEventThrottle"
       [keyboardShouldPersistTaps]="keyboardShouldPersistTaps"
       [keyboardDismissMode]="keyboardDismissMode"
       [removeClippedSubviews]="removeClippedSubviews"
       [nestedScrollEnabled]="nestedScrollEnabled"
+      [stickyHeaderHiddenOnScroll]="stickyHeaderHiddenOnScroll"
+      [innerViewRef]="innerViewRef"
       [style]="resolvedStyle"
       [contentContainerStyle]="contentContainerStyle"
+      [listHeaderComponentStyle]="listHeaderComponentStyle"
+      [listFooterComponentStyle]="listFooterComponentStyle"
+      [cellRendererTemplate]="cellDir?.templateRef"
       [testID]="testID"
       [nativeID]="nativeID"
       ${LIST_ACCESSIBILITY_FORWARD}
@@ -177,9 +180,10 @@ export type ISectionListInputs<ItemT> = Omit<
         </ng-template>
       }
       @if (sectionSeparatorDir !== undefined) {
-        <ng-template vSectionSeparator>
+        <ng-template vSectionSeparator let-props="props">
           <ng-container
             [vListOutlet]="sectionSeparatorDir.templateRef"
+            [vListOutletContext]="props"
           ></ng-container>
         </ng-template>
       }
@@ -203,17 +207,10 @@ export type ISectionListInputs<ItemT> = Omit<
         </ng-template>
       }
       @if (itemSeparatorDir !== undefined) {
-        <ng-template
-          vListSeparator
-          let-highlighted="highlighted"
-          let-leadingItem="leadingItem"
-          let-trailingItem="trailingItem"
-        >
+        <ng-template vListSeparator let-props="props">
           <ng-container
             [vListOutlet]="itemSeparatorDir.templateRef"
-            [vListOutletContext]="
-              itemSeparatorContext(highlighted, leadingItem, trailingItem)
-            "
+            [vListOutletContext]="props"
           ></ng-container>
         </ng-template>
       }
@@ -242,7 +239,9 @@ export class SectionList<ItemT = unknown>
   @Input() maxToRenderPerBatch?: number;
   @Input() updateCellsBatchingPeriod?: number;
   @Input() windowSize?: number;
+  @Input() disableVirtualization?: boolean;
   @Input() inverted?: boolean;
+  @Input() horizontal?: boolean;
   @Input() maintainVisibleContentPosition?: {
     minIndexForVisible: number;
     autoscrollToTopThreshold?: number;
@@ -252,13 +251,18 @@ export class SectionList<ItemT = unknown>
   @Input() onScrollEndDrag?: (event: ISymbioteEvent) => void;
   @Input() onMomentumScrollBegin?: (event: ISymbioteEvent) => void;
   @Input() onMomentumScrollEnd?: (event: ISymbioteEvent) => void;
+  @Input() onContentSizeChange?: (width: number, height: number) => void;
   @Input() scrollEventThrottle?: number;
   @Input() keyboardShouldPersistTaps?: boolean | 'always' | 'never' | 'handled';
   @Input() keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
   @Input() removeClippedSubviews?: boolean;
   @Input() nestedScrollEnabled?: boolean;
+  @Input() stickyHeaderHiddenOnScroll?: boolean;
+  @Input() innerViewRef?: IInnerViewRef;
   @Input() style?: IStyleProp<IViewStyle>;
   @Input() contentContainerStyle?: IStyleProp<IViewStyle>;
+  @Input() listHeaderComponentStyle?: IStyleProp<IViewStyle>;
+  @Input() listFooterComponentStyle?: IStyleProp<IViewStyle>;
   @Input() testID?: string;
   @Input() nativeID?: string;
 
@@ -282,12 +286,13 @@ export class SectionList<ItemT = unknown>
   @ContentChild(VSectionFooterDirective)
   sectionFooterDir?: VSectionFooterDirective<ItemT>;
   @ContentChild(VSectionSeparatorDirective)
-  sectionSeparatorDir?: VSectionSeparatorDirective;
+  sectionSeparatorDir?: VSectionSeparatorDirective<ItemT>;
   @ContentChild(VListHeaderDirective) listHeaderDir?: VListHeaderDirective;
   @ContentChild(VListFooterDirective) listFooterDir?: VListFooterDirective;
   @ContentChild(VListEmptyDirective) listEmptyDir?: VListEmptyDirective;
   @ContentChild(VListSeparatorDirective)
   itemSeparatorDir?: VListSeparatorDirective<ItemT>;
+  @ContentChild(VListCellDirective) cellDir?: VListCellDirective;
 
   // The inner list, whose instance is the scroll handle, reads lazily
   @ViewChild(VirtualizedSectionList)
@@ -296,22 +301,6 @@ export class SectionList<ItemT = unknown>
   // This component's own host, the anchor `class="..."` resolves onto, not the inner list's
   private readonly elementRef = inject(ElementRef);
 
-  // The leading and trailing items arrive `unknown` from the template's `let` bindings, already
-  // unwrapped to real items
-  itemSeparatorContext(
-    highlighted: unknown,
-    leadingItem: unknown,
-    trailingItem: unknown,
-  ): IVListSeparatorContext<ItemT> {
-    const isHighlighted = highlighted === true;
-    return {
-      $implicit: isHighlighted,
-      highlighted: isHighlighted,
-      leadingItem: asItem<ItemT>(leadingItem),
-      trailingItem: asItem<ItemT>(trailingItem),
-    };
-  }
-
   scrollToLocation(params: {
     sectionIndex: number;
     itemIndex: number;
@@ -326,7 +315,7 @@ export class SectionList<ItemT = unknown>
     this.list?.flashScrollIndicators();
   }
 
-  getNativeScrollRef(): IScrollViewHandle | null {
+  getNativeScrollRef(): ISymbioteNode | null {
     return this.list?.getNativeScrollRef() ?? null;
   }
 
@@ -342,7 +331,15 @@ export class SectionList<ItemT = unknown>
     return this.list?.getScrollNode() ?? null;
   }
 
+  getScrollRef(): ISymbioteNode | null {
+    return this.list?.getScrollRef() ?? null;
+  }
+
   recordInteraction(): void {
     this.list?.recordInteraction();
   }
+
+  setNativeProps(props: Record<string, unknown>): void {
+    this.list?.setNativeProps(props);
+  }
 }

package/src/components/touchable-props.ts

@@ -9,7 +9,11 @@
 // <prop_types_split_agnostic_vs_per_adapter> describes. Mirrors React/Vue's ITouchableBaseProps.
 
 import type { IPressTimingProps } from '@symbiote-native/components';
-import type { IStyleProp, IViewStyle } from '@symbiote-native/engine';
+import type {
+  IColorValue,
+  IStyleProp,
+  IViewStyle,
+} from '@symbiote-native/engine';
 
 import type { IAngularPressableInputs } from './pressable-props';
 
@@ -24,7 +28,7 @@ export type IAngularTouchableOpacityProps = IAngularTouchableBaseProps & {
 
 export type IAngularTouchableHighlightProps = IAngularTouchableBaseProps & {
   activeOpacity?: number;
-  underlayColor?: string;
+  underlayColor?: IColorValue;
   // RN's snapshot affordance (`Pressable.js:151`, `TouchableHighlight.js:61`): render the control in
   // its pressed state with no gesture, so a test can capture it. Consumed by the engine and stripped
   // before the payload — no ViewConfig declares it.

package/src/components/virtualized-list/cell-renderer-context.ts

@@ -0,0 +1,36 @@
+// The context a `vListCell` template reads for one cell: RN's `CellRendererComponent` props plus
+// the template that stamps the item and its separator inside the wrapper the app draws
+
+import type { TemplateRef } from '@angular/core';
+import type { IViewStyle } from '@symbiote-native/engine';
+import type { IWindowCell } from './cell-registry';
+import type { IVListCellContext } from './directives';
+
+export type ICellRendererArgs<ItemT> = {
+  cell: IWindowCell<ItemT>;
+  style: IViewStyle | undefined;
+  // The list's own template holding the cell's item and separator outlets
+  body: TemplateRef<unknown> | undefined;
+  layout: (
+    measure: IWindowCell<ItemT>['measure'],
+    event: unknown,
+    index: number,
+  ) => void;
+  focus: (index: number) => void;
+};
+
+export function buildCellRendererContext<ItemT>(
+  args: ICellRendererArgs<ItemT>,
+): IVListCellContext {
+  const { cell, style, body, layout, focus } = args;
+  return {
+    $implicit: cell.context.$implicit,
+    cellKey: cell.key,
+    index: cell.index,
+    style,
+    layout: event => layout(cell.measure, event, cell.index),
+    focus: () => focus(cell.index),
+    content: body,
+    contentContext: { $implicit: cell },
+  };
+}

package/src/components/virtualized-list/directives.ts

@@ -30,36 +30,60 @@ import {
   TemplateRef,
   ViewContainerRef,
   inject,
+  reflectComponentType,
+  type ComponentRef,
   type EmbeddedViewRef,
   type OnChanges,
   type OnDestroy,
   type SimpleChanges,
+  type Type,
 } from '@angular/core';
-import { dlog, isDebug } from '@symbiote-native/engine';
+import { dlog, isDebug, type IViewStyle } from '@symbiote-native/engine';
 import { countAngular } from '../../diagnostics';
 import type { ISeparators } from '@symbiote-native/components';
 
 let vListOutletInstanceCounter = 0;
 
+function nextOutletInstanceId(): number {
+  vListOutletInstanceCounter += 1;
+  return vListOutletInstanceCounter;
+}
+
 // The context a `vListItem` template receives, mirroring RN's renderItem info arg
 // ({ item, index, separators }). `$implicit` is the item, so `let-item` (no key) binds it.
-export interface IVListItemContext<ItemT> {
+export type IVListItemContext<ItemT> = {
   $implicit: ItemT;
   index: number;
   separators: ISeparators;
-}
+};
 
 // The context a `vListSeparator` template receives, mirroring RN's ItemSeparatorComponent props
 // (the highlight flag the cell toggles + the items flanking the gap). `$implicit` is the highlight
 // flag, so `let-highlighted` binds it.
-export interface IVListSeparatorContext<ItemT> {
+export type IVListSeparatorContext<ItemT> = {
   $implicit: boolean;
   highlighted: boolean;
   leadingItem?: ItemT;
   trailingItem?: ItemT;
   // RN lets a row drive arbitrary separator props via separators.updateProps; they ride here.
   [key: string]: unknown;
-}
+};
+
+// The context a `vListCell` template receives, RN's `CellRendererComponent` props
+// The template draws the wrapper and stamps the item and its separator through `content`
+// The item is `unknown`, a wrapping list hands it an entry or a row, not its own item type
+export type IVListCellContext = {
+  $implicit: unknown;
+  cellKey: string;
+  index: number;
+  style: IViewStyle | undefined;
+  // Wire both onto the wrapper: `(layout)="cell.layout($event)"`, `(focus)="cell.focus()"`
+  layout: (event: unknown) => void;
+  focus: () => void;
+  // Stamp it with `[vListOutlet]="cell.content" [vListOutletContext]="cell.contentContext"`
+  content: TemplateRef<unknown> | undefined;
+  contentContext: unknown;
+};
 
 function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null;
@@ -114,6 +138,20 @@ export class VListSeparatorDirective<ItemT = unknown> {
   }
 }
 
+// `<ng-template vListCell>` replaces the view around each cell (RN CellRendererComponent)
+// It must wire `layout` and `focus` itself, as RN's custom cell must wire `onLayout`
+@Directive({ selector: '[vListCell]', standalone: true })
+export class VListCellDirective {
+  readonly templateRef = inject<TemplateRef<IVListCellContext>>(TemplateRef);
+
+  static ngTemplateContextGuard(
+    _dir: VListCellDirective,
+    _ctx: unknown,
+  ): _ctx is IVListCellContext {
+    return true;
+  }
+}
+
 // Core-only NgTemplateOutlet twin. The adapter cannot import @angular/common's NgTemplateOutlet
 // (not a dependency), so the list stamps templates through this: it creates the embedded view when
 // the template changes and updates the live view's context IN PLACE on a context change, so a
@@ -122,19 +160,32 @@ export class VListSeparatorDirective<ItemT = unknown> {
 export class VListOutletDirective<C = unknown> implements OnChanges, OnDestroy {
   @Input({ alias: 'vListOutlet' }) templateRef?: TemplateRef<C>;
   @Input({ alias: 'vListOutletContext' }) context?: C;
+  // RN's `ListItemComponent`: stamped instead of the template, its inputs are the item context
+  @Input({ alias: 'vListOutletComponent' }) component?: Type<unknown>;
 
   private viewRef: EmbeddedViewRef<C> | null = null;
+  private componentRef: ComponentRef<unknown> | null = null;
   private readonly viewContainer = inject(ViewContainerRef);
-  private readonly instanceId = (vListOutletInstanceCounter += 1);
+  private readonly instanceId = nextOutletInstanceId();
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes['templateRef'] !== undefined) {
+    if (
+      changes['templateRef'] !== undefined ||
+      changes['component'] !== undefined
+    ) {
       if (isDebug())
         dlog(
-          `Angular VListOutlet#${this.instanceId} templateRef CHANGED (was=${changes['templateRef'].previousValue !== undefined} now=${this.templateRef !== undefined}) -> clear + recreate`,
+          `Angular VListOutlet#${this.instanceId} templateRef CHANGED (was=${changes['templateRef']?.previousValue !== undefined} now=${this.templateRef !== undefined}) -> clear + recreate`,
         );
       this.viewContainer.clear();
       countAngular('outletCreates');
+      this.componentRef = null;
+      this.viewRef = null;
+      if (this.component !== undefined) {
+        this.componentRef = this.viewContainer.createComponent(this.component);
+        this.writeComponentInputs(this.componentRef);
+        return;
+      }
       this.viewRef =
         this.templateRef === undefined
           ? null
@@ -144,6 +195,11 @@ export class VListOutletDirective<C = unknown> implements OnChanges, OnDestroy {
             );
       return;
     }
+    if (this.componentRef !== null) {
+      countAngular('outletUpdates');
+      this.writeComponentInputs(this.componentRef);
+      return;
+    }
     if (this.viewRef !== null && this.context !== undefined) {
       countAngular('outletUpdates');
       if (isDebug())
@@ -161,6 +217,26 @@ export class VListOutletDirective<C = unknown> implements OnChanges, OnDestroy {
     this.viewContainer.clear();
   }
 
+  // The item context becomes the component's inputs, only those it declares: RN hands a
+  // `ListItemComponent` item, index and separators, and one may not read all three
+  private writeComponentInputs(ref: ComponentRef<unknown>): void {
+    const { context } = this;
+    if (!isRecord(context)) return;
+    const declared = new Set(
+      reflectComponentType(ref.componentType)?.inputs.map(
+        input => input.propName,
+      ),
+    );
+    const inputs = {
+      item: context['$implicit'],
+      index: context['index'],
+      separators: context['separators'],
+    };
+    for (const [name, value] of Object.entries(inputs)) {
+      if (declared.has(name)) ref.setInput(name, value);
+    }
+  }
+
   // Copy the new context's fields onto the live embedded view's context object (whose identity the
   // consumer's `let-` bindings already read), dropping keys that disappeared. The generic `C` can't
   // be index-WRITTEN even once narrowed (TS2862), so the copy runs in a non-generic helper the