@symbiote-native/angular 3.2.0 → 3.4.0

package/src/components/flat-list/flat-list-template.ts

@@ -31,6 +31,7 @@ export const FLAT_LIST_TEMPLATE = `
       [maxToRenderPerBatch]="maxToRenderPerBatch"
       [updateCellsBatchingPeriod]="updateCellsBatchingPeriod"
       [windowSize]="windowSize"
+      [disableVirtualization]="disableVirtualization"
       [stickyHeaderIndices]="stickyHeaderIndices"
       [maintainVisibleContentPosition]="maintainVisibleContentPosition"
       [onScroll]="onScroll"
@@ -38,15 +39,21 @@ export const FLAT_LIST_TEMPLATE = `
       [onScrollEndDrag]="onScrollEndDrag"
       [onMomentumScrollBegin]="onMomentumScrollBegin"
       [onMomentumScrollEnd]="onMomentumScrollEnd"
+      [onContentSizeChange]="onContentSizeChange"
       [scrollEventThrottle]="scrollEventThrottle"
       [keyboardShouldPersistTaps]="keyboardShouldPersistTaps"
       [keyboardDismissMode]="keyboardDismissMode"
       [removeClippedSubviews]="resolvedRemoveClippedSubviews"
       [nestedScrollEnabled]="nestedScrollEnabled"
+      [stickyHeaderHiddenOnScroll]="stickyHeaderHiddenOnScroll"
+      [innerViewRef]="innerViewRef"
       [testID]="testID"
       [nativeID]="nativeID"
       [style]="resolvedStyle"
       [contentContainerStyle]="contentContainerStyle"
+      [listHeaderComponentStyle]="listHeaderComponentStyle"
+      [listFooterComponentStyle]="listFooterComponentStyle"
+      [cellRendererTemplate]="cellRendererTpl"
       ${LIST_ACCESSIBILITY_FORWARD}
     >
       <ng-template vListItem let-row let-separators="separators">
@@ -55,6 +62,7 @@ export const FLAT_LIST_TEMPLATE = `
             <view [style]="columnCellStyle">
               <ng-container
                 [vListOutlet]="itemDir?.templateRef"
+                [vListOutletComponent]="itemComponent"
                 [vListOutletContext]="cell.context"
               ></ng-container>
             </view>
@@ -119,6 +127,7 @@ export const FLAT_LIST_TEMPLATE = `
       [maxToRenderPerBatch]="maxToRenderPerBatch"
       [updateCellsBatchingPeriod]="updateCellsBatchingPeriod"
       [windowSize]="windowSize"
+      [disableVirtualization]="disableVirtualization"
       [stickyHeaderIndices]="stickyHeaderIndices"
       [maintainVisibleContentPosition]="maintainVisibleContentPosition"
       [onScroll]="onScroll"
@@ -126,16 +135,23 @@ export const FLAT_LIST_TEMPLATE = `
       [onScrollEndDrag]="onScrollEndDrag"
       [onMomentumScrollBegin]="onMomentumScrollBegin"
       [onMomentumScrollEnd]="onMomentumScrollEnd"
+      [onContentSizeChange]="onContentSizeChange"
       [scrollEventThrottle]="scrollEventThrottle"
       [keyboardShouldPersistTaps]="keyboardShouldPersistTaps"
       [keyboardDismissMode]="keyboardDismissMode"
       [removeClippedSubviews]="resolvedRemoveClippedSubviews"
       [nestedScrollEnabled]="nestedScrollEnabled"
+      [stickyHeaderHiddenOnScroll]="stickyHeaderHiddenOnScroll"
+      [innerViewRef]="innerViewRef"
       [testID]="testID"
       [nativeID]="nativeID"
       [style]="resolvedStyle"
       [contentContainerStyle]="contentContainerStyle"
+      [listHeaderComponentStyle]="listHeaderComponentStyle"
+      [listFooterComponentStyle]="listFooterComponentStyle"
+      [cellRendererTemplate]="cellRendererTpl"
       [itemTemplate]="itemDir?.templateRef"
+      [listItemComponent]="listItemComponent"
       [itemSeparatorTemplate]="separatorDir?.templateRef"
       ${LIST_ACCESSIBILITY_FORWARD}
     >

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

@@ -16,6 +16,7 @@ import {
 } from '@angular/core';
 import {
   SINGLE_COLUMN,
+  arrayLikeLength,
   chunkIntoRows,
   expandRowViewability,
   firstItemOfRow,
@@ -23,7 +24,6 @@ import {
   removeClippedSubviewsOrDefault,
   rowKeyExtractor,
   type IRow,
-  type IScrollViewHandle,
   type ISeparators,
   type IViewabilityConfigCallbackPair,
   type IViewableItemsChangedInfo,
@@ -35,7 +35,6 @@ import {
   flattenStyle,
   resolveClassName,
   type IStyleProp,
-  type ISymbioteNode,
   type IViewStyle,
 } from '@symbiote-native/engine';
 import {
@@ -50,7 +49,7 @@ import {
   type IVListSeparatorContext,
 } from '../virtualized-list';
 import { VListOutletDirective } from '../virtualized-list/directives';
-import { ListInputsBase } from '../virtualized-list/list-inputs';
+import { FlatListHandleBase } from './flat-list-handle';
 import { provideGateDemand } from '../../gate-demand';
 import {
   stableAnchorStyle,
@@ -151,7 +150,7 @@ export type IFlatListInputs<ItemT> = Omit<
   template: FLAT_LIST_TEMPLATE,
 })
 export class FlatList<ItemT = unknown>
-  extends ListInputsBase<ItemT>
+  extends FlatListHandleBase<ItemT>
   implements IFlatListInputs<ItemT>, IVirtualizedListHandle, DoCheck, OnChanges
 {
   @Input({ required: true }) data!: readonly ItemT[];
@@ -166,8 +165,7 @@ export class FlatList<ItemT = unknown>
     );
   }
 
-  // The composed inner list, whichever branch rendered, its instance is the scroll handle
-  @ViewChild(VirtualizedList) private listRef?: VirtualizedList;
+  @ViewChild(VirtualizedList) protected override listRef?: VirtualizedList;
 
   // This component's own host, the anchor `class="..."` resolves onto, not the inner list's
   private readonly elementRef = inject(ElementRef);
@@ -213,7 +211,7 @@ export class FlatList<ItemT = unknown>
         ? chunkIntoRows(this.data, this.columns)
         : [];
       dlog(
-        `Angular FlatList over ${this.data?.length ?? 0} items, ${this.columns} column(s)`,
+        `Angular FlatList over ${arrayLikeLength(this.data)} items, ${this.columns} column(s)`,
       );
     }
     if (
@@ -225,7 +223,7 @@ export class FlatList<ItemT = unknown>
   }
 
   getFlatItem = (_data: unknown, index: number): ItemT => this.data[index];
-  getFlatCount = (_data: unknown): number => this.data.length;
+  getFlatCount = (_data: unknown): number => arrayLikeLength(this.data);
 
   // With several columns the virtualized stream is rows
   getRow = (_data: unknown, index: number): IRow<ItemT> => this.rows[index];
@@ -291,44 +289,4 @@ export class FlatList<ItemT = unknown>
         : undefined,
     };
   }
-
-  scrollToOffset(params: { offset: number; animated?: boolean }): void {
-    this.listRef?.scrollToOffset(params);
-  }
-  scrollToIndex(params: {
-    index: number;
-    animated?: boolean;
-    viewOffset?: number;
-    viewPosition?: number;
-  }): void {
-    this.listRef?.scrollToIndex(params);
-  }
-  scrollToItem(params: {
-    item: unknown;
-    animated?: boolean;
-    viewPosition?: number;
-  }): void {
-    this.listRef?.scrollToItem(params);
-  }
-  scrollToEnd(params?: { animated?: boolean }): void {
-    this.listRef?.scrollToEnd(params);
-  }
-  flashScrollIndicators(): void {
-    this.listRef?.flashScrollIndicators();
-  }
-  getNativeScrollRef(): IScrollViewHandle | null {
-    return this.listRef?.getNativeScrollRef() ?? null;
-  }
-  getScrollableNode(): IScrollViewHandle | null {
-    return this.listRef?.getScrollableNode() ?? null;
-  }
-  getScrollResponder(): IScrollViewHandle | null {
-    return this.listRef?.getScrollResponder() ?? null;
-  }
-  getScrollNode(): ISymbioteNode | null {
-    return this.listRef?.getScrollNode() ?? null;
-  }
-  recordInteraction(): void {
-    this.listRef?.recordInteraction();
-  }
 }

package/src/components/image-inputs.ts

@@ -0,0 +1,94 @@
+// The input and output names of `Animated.Image`, kept apart from the prop fold so the list reads
+// as one table
+
+export const IMAGE_INPUTS = [
+  'source',
+  'defaultSource',
+  'loadingIndicatorSource',
+  'style',
+  'resizeMode',
+  'resizeMethod',
+  'resizeMultiplier',
+  'tintColor',
+  'blurRadius',
+  'capInsets',
+  'fadeDuration',
+  'progressiveRenderingEnabled',
+  'src',
+  'srcSet',
+  'alt',
+  'width',
+  'height',
+  'crossOrigin',
+  'referrerPolicy',
+  'testID',
+  'nativeID',
+  'accessible',
+  'accessibilityLabel',
+  'accessibilityHint',
+  'accessibilityRole',
+  'accessibilityState',
+  'accessibilityValue',
+  'accessibilityActions',
+  'accessibilityLabelledBy',
+  'importantForAccessibility',
+  'accessibilityLiveRegion',
+  'screenReaderFocusable',
+  'accessibilityViewIsModal',
+  'accessibilityElementsHidden',
+  'accessibilityIgnoresInvertColors',
+  'accessibilityLanguage',
+  'accessibilityRespondsToUserInteraction',
+  'accessibilityShowsLargeContentViewer',
+  'accessibilityLargeContentTitle',
+  'role',
+  'ariaLabel: aria-label',
+  'ariaLabelledBy: aria-labelledby',
+  'ariaLive: aria-live',
+  'ariaHidden: aria-hidden',
+  'ariaBusy: aria-busy',
+  'ariaChecked: aria-checked',
+  'ariaDisabled: aria-disabled',
+  'ariaExpanded: aria-expanded',
+  'ariaSelected: aria-selected',
+  'ariaModal: aria-modal',
+  'ariaValueMax: aria-valuemax',
+  'ariaValueMin: aria-valuemin',
+  'ariaValueNow: aria-valuenow',
+  'ariaValueText: aria-valuetext',
+  'onAccessibilityAction',
+  'onAccessibilityTap',
+  'onMagicTap',
+  'onAccessibilityEscape',
+  'onLoadStart',
+  'onLoad',
+  'onLoadEnd',
+  'onError',
+  'onProgress',
+  'onPartialLoad',
+];
+
+type IImageOutput =
+  | 'accessibilityAction'
+  | 'accessibilityTap'
+  | 'magicTap'
+  | 'accessibilityEscape'
+  | 'loadStart'
+  | 'load'
+  | 'loadEnd'
+  | 'error'
+  | 'progress'
+  | 'partialLoad';
+
+export const IMAGE_OUTPUTS: IImageOutput[] = [
+  'accessibilityAction',
+  'accessibilityTap',
+  'magicTap',
+  'accessibilityEscape',
+  'loadStart',
+  'load',
+  'loadEnd',
+  'error',
+  'progress',
+  'partialLoad',
+];

package/src/components/image-props-resolve.ts

@@ -0,0 +1,172 @@
+// Narrows the untyped `Animated.Image` input bag into the props `renderImage` takes
+import {
+  renderImage,
+  resolveAccessibilityProps,
+  type IImageSourceProp,
+  type IResizeMode,
+} from '@symbiote-native/components';
+import {
+  isBoolean,
+  isNumber,
+  isProcessableColor,
+  isString,
+  type IStyleProp,
+  type ISymbioteEvent,
+  type IViewStyle,
+} from '@symbiote-native/engine';
+
+type IGuard = (value: unknown) => boolean;
+
+function isAny(): boolean {
+  return true;
+}
+
+// Input key -> the guard its value must pass. A union, object or handler is checked by Angular's
+// template type check, so it gets `isAny` and goes through as it came
+const PASSTHROUGH_GUARDS: Readonly<Record<string, IGuard>> = {
+  resizeMethod: isAny,
+  resizeMultiplier: isNumber,
+  blurRadius: isNumber,
+  capInsets: isAny,
+  fadeDuration: isNumber,
+  progressiveRenderingEnabled: isBoolean,
+  testID: isString,
+  nativeID: isString,
+  accessible: isBoolean,
+  accessibilityLabel: isString,
+  accessibilityHint: isString,
+  accessibilityRole: isAny,
+  accessibilityState: isAny,
+  accessibilityValue: isAny,
+  accessibilityActions: isAny,
+  accessibilityLabelledBy: isAny,
+  importantForAccessibility: isAny,
+  accessibilityLiveRegion: isAny,
+  screenReaderFocusable: isBoolean,
+  accessibilityViewIsModal: isBoolean,
+  accessibilityElementsHidden: isBoolean,
+  accessibilityIgnoresInvertColors: isBoolean,
+  accessibilityLanguage: isString,
+  accessibilityRespondsToUserInteraction: isBoolean,
+  accessibilityShowsLargeContentViewer: isBoolean,
+  accessibilityLargeContentTitle: isString,
+  role: isAny,
+  ariaLabel: isString,
+  ariaLabelledBy: isString,
+  ariaLive: isAny,
+  ariaHidden: isBoolean,
+  ariaBusy: isBoolean,
+  ariaChecked: isAny,
+  ariaDisabled: isBoolean,
+  ariaExpanded: isBoolean,
+  ariaSelected: isBoolean,
+  ariaModal: isBoolean,
+  ariaValueMax: isNumber,
+  ariaValueMin: isNumber,
+  ariaValueNow: isNumber,
+  ariaValueText: isString,
+  onAccessibilityAction: isAny,
+  onAccessibilityTap: isAny,
+  onMagicTap: isAny,
+  onAccessibilityEscape: isAny,
+  onLoadStart: isAny,
+  onLoad: isAny,
+  onLoadEnd: isAny,
+  onError: isAny,
+  onProgress: isAny,
+  onPartialLoad: isAny,
+};
+
+// The name a template binds -> the `aria-*` prop RN spells
+const ARIA_PROP_NAMES: Readonly<Record<string, string>> = {
+  ariaLabel: 'aria-label',
+  ariaLabelledBy: 'aria-labelledby',
+  ariaLive: 'aria-live',
+  ariaHidden: 'aria-hidden',
+  ariaBusy: 'aria-busy',
+  ariaChecked: 'aria-checked',
+  ariaDisabled: 'aria-disabled',
+  ariaExpanded: 'aria-expanded',
+  ariaSelected: 'aria-selected',
+  ariaModal: 'aria-modal',
+  ariaValueMax: 'aria-valuemax',
+  ariaValueMin: 'aria-valuemin',
+  ariaValueNow: 'aria-valuenow',
+  ariaValueText: 'aria-valuetext',
+};
+
+const RESIZE_MODES = [
+  'cover',
+  'contain',
+  'stretch',
+  'repeat',
+  'center',
+  'none',
+] as const satisfies readonly IResizeMode[];
+
+function narrowTo<T>(
+  value: unknown,
+  guard: (candidate: unknown) => candidate is T,
+): T | undefined {
+  return guard(value) ? value : undefined;
+}
+
+function isSource(value: unknown): value is IImageSourceProp {
+  return (
+    typeof value === 'number' || (typeof value === 'object' && value !== null)
+  );
+}
+
+function isStyle(value: unknown): value is IStyleProp<IViewStyle> {
+  return typeof value === 'object' && value !== null;
+}
+
+function isCrossOrigin(
+  value: unknown,
+): value is 'anonymous' | 'use-credentials' {
+  return value === 'anonymous' || value === 'use-credentials';
+}
+
+export function isImageEventCallback(
+  value: unknown,
+): value is (event: ISymbioteEvent) => void {
+  return typeof value === 'function';
+}
+
+// An animated bag may carry the RN `aria-*` spelling instead of the name a template binds
+function inputValue(input: Record<string, unknown>, key: string): unknown {
+  const rnName = ARIA_PROP_NAMES[key];
+  return input[key] ?? (rnName === undefined ? undefined : input[rnName]);
+}
+
+function passthroughOf(
+  input: Record<string, unknown>,
+): Record<string, unknown> {
+  const passthrough: Record<string, unknown> = {};
+  for (const [key, guard] of Object.entries(PASSTHROUGH_GUARDS)) {
+    const value = inputValue(input, key);
+    passthrough[ARIA_PROP_NAMES[key] ?? key] = guard(value) ? value : undefined;
+  }
+  return passthrough;
+}
+
+export function resolveImageProps(
+  input: Record<string, unknown>,
+): Record<string, unknown> {
+  return renderImage({
+    source: narrowTo(input['source'], isSource),
+    defaultSource: narrowTo(input['defaultSource'], isSource),
+    loadingIndicatorSource: narrowTo(input['loadingIndicatorSource'], isSource),
+    style: narrowTo(input['style'], isStyle),
+    resizeMode: RESIZE_MODES.find(mode => mode === input['resizeMode']),
+    tintColor: narrowTo(input['tintColor'], isProcessableColor),
+    src: narrowTo(input['src'], isString),
+    srcSet: narrowTo(input['srcSet'], isString),
+    alt: narrowTo(input['alt'], isString),
+    width: narrowTo(input['width'], isNumber),
+    height: narrowTo(input['height'], isNumber),
+    crossOrigin: narrowTo(input['crossOrigin'], isCrossOrigin),
+    referrerPolicy: narrowTo(input['referrerPolicy'], isString),
+    passthrough: resolveAccessibilityProps(passthroughOf(input)),
+  }).props;
+}