@symbiote-native/angular 0.5.0 → 0.6.1

package/build/components/scroll-view/projection.js

@@ -1,311 +0,0 @@
-import { AnimatedProps, dlog, isAnchor, reduceProps, routeProp, whenCommitted, createElement, appendChild, insertBefore, removeChild, } from '@symbiote-native/engine';
-import { computeStickyInterpolation, readLayoutNumber, stickyDebounceMs, STICKY_HEADER_Z_INDEX, } from '@symbiote-native/components';
-import { descriptorFor } from '@symbiote-native/components';
-import { Platform } from '@symbiote-native/engine';
-const contentProjection = new WeakMap();
-const projectedWrappers = new WeakMap();
-function createViewNode() {
-    const descriptor = descriptorFor('symbiote-view');
-    return createElement(descriptor.component, descriptor.isText);
-}
-function directNode(record) {
-    return record.wrapper ?? record.child;
-}
-function isProjectedRefreshControl(node) {
-    if (node.component === 'PullToRefreshView' || node.component === 'AndroidSwipeRefreshLayout') {
-        return true;
-    }
-    // Angular public <RefreshControl> is an anchor host whose real native refresh node lives inside
-    // its component view. Projection filtering must recognize that anchor, otherwise iOS re-renders
-    // a RefreshControl sibling and also leaves the projected one inside the scroll content.
-    return isAnchor(node) && node.children.some(isProjectedRefreshControl);
-}
-class StickyProjectionWrapper {
-    controller;
-    childIndex;
-    node;
-    measured = false;
-    layoutY = 0;
-    layoutHeight = 0;
-    animatedTranslateY;
-    animatedProps;
-    cancelBind;
-    listenerId;
-    debounceTimer;
-    translateY = null;
-    haveReceivedInitialZeroTranslateY = true;
-    constructor(controller, childIndex, node) {
-        this.controller = controller;
-        this.childIndex = childIndex;
-        this.node = node;
-        this.animatedTranslateY = this.controller.config.scrollAnimatedValue.interpolate({
-            inputRange: [-1, 0],
-            outputRange: [0, 0],
-        });
-        this.rebuild();
-    }
-    destroy() {
-        this.cancelBind?.();
-        this.cancelBind = undefined;
-        if (this.listenerId !== undefined) {
-            this.animatedTranslateY.removeListener(this.listenerId);
-            this.listenerId = undefined;
-        }
-        if (this.debounceTimer !== undefined) {
-            clearTimeout(this.debounceTimer);
-            this.debounceTimer = undefined;
-        }
-        if (this.animatedProps !== undefined) {
-            this.animatedProps.__detach();
-            this.animatedProps = undefined;
-        }
-    }
-    rebuild() {
-        if (this.listenerId !== undefined) {
-            this.animatedTranslateY.removeListener(this.listenerId);
-            this.listenerId = undefined;
-        }
-        const { inputRange, outputRange } = computeStickyInterpolation({
-            measured: this.measured,
-            inverted: this.controller.config.invertStickyHeaders,
-            scrollViewHeight: this.controller.config.scrollViewHeight,
-            layoutY: this.layoutY,
-            layoutHeight: this.layoutHeight,
-            nextHeaderLayoutY: this.controller.nextStickyHeaderY(this.childIndex),
-        });
-        this.animatedTranslateY = this.controller.config.scrollAnimatedValue.interpolate({
-            inputRange,
-            outputRange,
-        });
-        this.listenerId = this.animatedTranslateY.addListener(this.animatedValueListener);
-        this.applyProps();
-        dlog(`Angular ScrollView projection sticky index=${this.childIndex} measured=${this.measured} y=${this.layoutY}`);
-    }
-    onLayout = (event) => {
-        const y = readLayoutNumber(event, 'y');
-        const height = readLayoutNumber(event, 'height');
-        if (y !== undefined)
-            this.layoutY = y;
-        if (height !== undefined)
-            this.layoutHeight = height;
-        this.measured = true;
-        this.controller.recordHeaderLayoutY(this.childIndex, this.layoutY);
-        this.rebuild();
-    };
-    animatedValueListener = ({ value }) => {
-        if (typeof value !== 'number')
-            return;
-        if (value === 0 && !this.haveReceivedInitialZeroTranslateY) {
-            this.haveReceivedInitialZeroTranslateY = true;
-            return;
-        }
-        if (this.debounceTimer !== undefined)
-            clearTimeout(this.debounceTimer);
-        this.debounceTimer = setTimeout(() => {
-            this.translateY = value;
-            if (value !== 0)
-                this.haveReceivedInitialZeroTranslateY = false;
-            this.applyProps();
-        }, stickyDebounceMs(Platform.OS));
-    };
-    props() {
-        const style = {
-            transform: [{ translateY: this.animatedTranslateY }],
-            zIndex: STICKY_HEADER_Z_INDEX,
-        };
-        const passthrough = this.translateY === null
-            ? undefined
-            : { transform: [{ translateY: this.translateY }], zIndex: STICKY_HEADER_Z_INDEX };
-        return {
-            style: passthrough === undefined ? style : [style, passthrough],
-            onLayout: this.onLayout,
-            collapsable: false,
-        };
-    }
-    applyProps() {
-        const props = this.props();
-        const reduced = reduceProps(props);
-        for (const [key, value] of Object.entries(reduced))
-            routeProp(this.node, key, value);
-        const next = new AnimatedProps(props);
-        next.__attach();
-        if (this.animatedProps !== undefined)
-            this.animatedProps.__detach();
-        this.animatedProps = next;
-        this.cancelBind?.();
-        this.cancelBind = whenCommitted(this.node, () => next.setNativeView(this.node));
-    }
-}
-export class ScrollViewProjectionController {
-    config;
-    contentNode;
-    records = [];
-    headerLayoutYs = new Map();
-    constructor(config) {
-        this.config = config;
-    }
-    update(config) {
-        this.config = config;
-        this.reconcileStickyRecords();
-    }
-    bindContentNode(node) {
-        dlog(`Angular ScrollView projection bindContentNode node=${node.component} preExistingChildren=${node.children.length} recordsBefore=${this.records.length}`);
-        this.contentNode = node;
-        contentProjection.set(node, this);
-        if (this.records.length === 0 && node.children.length > 0) {
-            for (const child of [...node.children]) {
-                this.records.push({ child, wrapper: undefined, sticky: undefined, stickyIndex: undefined });
-            }
-        }
-        this.reconcileStickyRecords();
-    }
-    appendProjectedChild(parent, child, insert) {
-        dlog(`Angular ScrollView projection appendProjectedChild parent=${parent.component} child=${child.component} recordsBefore=${this.records.length}`);
-        const existing = this.records.find(record => record.child === child);
-        if (existing !== undefined)
-            this.records.splice(this.records.indexOf(existing), 1);
-        const record = {
-            child,
-            wrapper: undefined,
-            sticky: undefined,
-            stickyIndex: undefined,
-        };
-        this.records.push(record);
-        this.insertRecord(parent, record, undefined, insert);
-        this.reconcileStickyRecords();
-    }
-    insertProjectedChild(parent, child, beforeChild, insert) {
-        dlog(`Angular ScrollView projection insertProjectedChild parent=${parent.component} child=${child.component} before=${beforeChild ? `${beforeChild.component}` : 'null'} recordsBefore=${this.records.length}`);
-        const existing = this.records.find(record => record.child === child);
-        if (existing !== undefined)
-            this.records.splice(this.records.indexOf(existing), 1);
-        const beforeRecord = beforeChild === null
-            ? undefined
-            : this.records.find(record => record.child === beforeChild || record.wrapper === beforeChild);
-        const record = {
-            child,
-            wrapper: undefined,
-            sticky: undefined,
-            stickyIndex: undefined,
-        };
-        const index = beforeRecord === undefined ? this.records.length : this.records.indexOf(beforeRecord);
-        this.records.splice(index, 0, record);
-        this.insertRecord(parent, record, beforeRecord, insert);
-        this.reconcileStickyRecords();
-    }
-    removeProjectedChild(child, remove) {
-        const record = this.records.find(entry => entry.child === child || entry.wrapper === child);
-        if (record === undefined || this.contentNode === undefined)
-            return false;
-        record.sticky?.destroy();
-        projectedWrappers.delete(record.child);
-        const direct = directNode(record);
-        if (direct.parent === this.contentNode)
-            remove(this.contentNode, direct);
-        this.records.splice(this.records.indexOf(record), 1);
-        this.reconcileStickyRecords();
-        return true;
-    }
-    nextStickyHeaderY(index) {
-        const stickyIndices = this.config.stickyHeaderIndices ?? [];
-        const next = stickyIndices.find(entry => entry > index);
-        return next === undefined ? undefined : this.headerLayoutYs.get(next);
-    }
-    recordHeaderLayoutY(index, y) {
-        if (this.headerLayoutYs.get(index) === y)
-            return;
-        this.headerLayoutYs.set(index, y);
-        for (const record of this.records)
-            record.sticky?.rebuild();
-    }
-    insertRecord(parent, record, beforeRecord, insert) {
-        const before = beforeRecord === undefined ? undefined : directNode(beforeRecord);
-        dlog(`Angular ScrollView projection insertRecord physicalParent=${parent.component} child=${record.child.component} before=${before ? before.component : 'undefined(append)'} parentIsContentNode=${parent === this.contentNode}`);
-        if (before === undefined)
-            insert(parent, record.child);
-        else
-            insert(parent, record.child, before);
-    }
-    reconcileStickyRecords() {
-        if (this.contentNode === undefined)
-            return;
-        dlog(`Angular ScrollView projection reconcile contentNode=${this.contentNode.component} records=${this.records.length} contentNodeActualChildren=${this.contentNode.children.length}`);
-        const stickyIndices = new Set(this.config.stickyHeaderIndices ?? []);
-        if (this.config.customStickyHeaderComponent !== undefined && stickyIndices.size > 0) {
-            dlog('Angular ScrollView projection uses built-in sticky wrapper; custom StickyHeaderComponent is explicit-composition only');
-        }
-        let paintIndex = 0;
-        for (const record of [...this.records]) {
-            if (this.config.excludeRefreshControl && isProjectedRefreshControl(record.child)) {
-                this.removeProjectedChild(record.child, (parent, child) => removeChild(parent, child));
-                continue;
-            }
-            const countsAsChild = !isAnchor(record.child) && !isProjectedRefreshControl(record.child);
-            const childIndex = paintIndex;
-            if (countsAsChild)
-                paintIndex += 1;
-            const shouldWrap = countsAsChild && stickyIndices.has(childIndex);
-            if (shouldWrap && record.wrapper === undefined)
-                this.wrapRecord(record, childIndex);
-            else if (!shouldWrap && record.wrapper !== undefined)
-                this.unwrapRecord(record);
-            else if (shouldWrap && record.stickyIndex !== childIndex) {
-                record.sticky?.destroy();
-                record.sticky = new StickyProjectionWrapper(this, childIndex, directNode(record));
-                record.stickyIndex = childIndex;
-            }
-            else if (shouldWrap)
-                record.sticky?.rebuild();
-        }
-    }
-    // Auto projection runs after Angular has already created projected child host nodes. At this
-    // renderer boundary we can AOT-safely rearrange engine nodes, but we cannot instantiate an
-    // arbitrary Angular component class as a wrapper without owning a ViewContainerRef/injector and
-    // Angular projectable nodes for its <ng-content>. Therefore the automatic sticky path always uses
-    // the built-in engine-node wrapper; custom StickyHeaderComponent wrappers remain supported by
-    // explicit Angular composition with <ScrollViewStickyHeader>/<symbiote-sticky-header> or a user
-    // component that composes it in the template.
-    wrapRecord(record, childIndex) {
-        if (this.contentNode === undefined)
-            return;
-        const wrapper = createViewNode();
-        const currentParent = record.child.parent;
-        const currentIndex = currentParent?.children.indexOf(record.child) ?? -1;
-        if (currentParent === this.contentNode && currentIndex >= 0) {
-            insertBefore(this.contentNode, wrapper, record.child);
-            removeChild(this.contentNode, record.child);
-        }
-        else {
-            appendChild(this.contentNode, wrapper);
-        }
-        appendChild(wrapper, record.child);
-        record.wrapper = wrapper;
-        record.sticky = new StickyProjectionWrapper(this, childIndex, wrapper);
-        record.stickyIndex = childIndex;
-        projectedWrappers.set(record.child, record);
-    }
-    unwrapRecord(record) {
-        if (this.contentNode === undefined || record.wrapper === undefined)
-            return;
-        record.sticky?.destroy();
-        record.sticky = undefined;
-        record.stickyIndex = undefined;
-        const wrapper = record.wrapper;
-        insertBefore(this.contentNode, record.child, wrapper);
-        removeChild(this.contentNode, wrapper);
-        record.wrapper = undefined;
-        projectedWrappers.delete(record.child);
-    }
-}
-export function getScrollViewProjection(node) {
-    return contentProjection.get(node);
-}
-export function removeScrollViewProjectedChild(child, remove) {
-    const record = projectedWrappers.get(child);
-    if (record === undefined)
-        return false;
-    const controller = record.wrapper?.parent
-        ? contentProjection.get(record.wrapper.parent)
-        : undefined;
-    return controller?.removeProjectedChild(child, remove) ?? false;
-}

package/build/components/scroll-view/shared.d.ts

@@ -1,225 +0,0 @@
-import { EventEmitter, type AfterViewInit, type OnDestroy } from '@angular/core';
-import { type IAccessibilityProps, type IAccessibilityStateValue, type IAriaProps, type IContentSize } from '@symbiote-native/components';
-import { AnimatedValue, type IStyleProp, type ISymbioteEvent, type ISymbioteNode, type IViewStyle } from '@symbiote-native/engine';
-import { RefreshControl } from '../refresh-control';
-import { ScrollViewProjectionController } from './projection';
-export type { IScrollViewHandle } from '@symbiote-native/components';
-type IScrollHandler = (event: ISymbioteEvent) => void;
-type IContentSizeHandler = (width: number, height: number) => void;
-export declare const SCROLL_VIEW_INPUTS: string[];
-export interface IAngularScrollViewProps extends IAccessibilityProps, IAriaProps {
-    style?: IStyleProp<IViewStyle>;
-    contentContainerStyle?: IStyleProp<IViewStyle> | string;
-    horizontal?: boolean;
-    scrollEnabled?: boolean;
-    showsVerticalScrollIndicator?: boolean;
-    showsHorizontalScrollIndicator?: boolean;
-    pagingEnabled?: boolean;
-    bounces?: boolean;
-    decelerationRate?: 'normal' | 'fast' | number;
-    scrollEventThrottle?: number;
-    contentInset?: {
-        top?: number;
-        left?: number;
-        bottom?: number;
-        right?: number;
-    };
-    contentOffset?: {
-        x: number;
-        y: number;
-    };
-    removeClippedSubviews?: boolean;
-    snapToInterval?: number;
-    snapToOffsets?: number[];
-    snapToAlignment?: 'start' | 'center' | 'end';
-    snapToStart?: boolean;
-    snapToEnd?: boolean;
-    disableIntervalMomentum?: boolean;
-    stickyHeaderIndices?: number[];
-    invertStickyHeaders?: boolean;
-    StickyHeaderComponent?: unknown;
-    keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
-    keyboardShouldPersistTaps?: boolean | 'always' | 'never' | 'handled';
-    maintainVisibleContentPosition?: {
-        minIndexForVisible: number;
-        autoscrollToTopThreshold?: number;
-    };
-    alwaysBounceHorizontal?: boolean;
-    alwaysBounceVertical?: boolean;
-    centerContent?: boolean;
-    scrollIndicatorInsets?: {
-        top?: number;
-        left?: number;
-        bottom?: number;
-        right?: number;
-    };
-    indicatorStyle?: 'default' | 'black' | 'white';
-    directionalLockEnabled?: boolean;
-    automaticallyAdjustKeyboardInsets?: boolean;
-    contentInsetAdjustmentBehavior?: 'automatic' | 'scrollableAxes' | 'never' | 'always';
-    minimumZoomScale?: number;
-    maximumZoomScale?: number;
-    zoomScale?: number;
-    bouncesZoom?: boolean;
-    pinchGestureEnabled?: boolean;
-    nestedScrollEnabled?: boolean;
-    overScrollMode?: 'auto' | 'always' | 'never';
-    fadingEdgeLength?: number;
-    persistentScrollbar?: boolean;
-    endFillColor?: string;
-    onLayout?: IScrollHandler;
-    onScroll?: IScrollHandler;
-    onScrollBeginDrag?: IScrollHandler;
-    onScrollEndDrag?: IScrollHandler;
-    onMomentumScrollBegin?: IScrollHandler;
-    onMomentumScrollEnd?: IScrollHandler;
-    onScrollToTop?: IScrollHandler;
-    onContentSizeChange?: IContentSizeHandler;
-    onAccessibilityAction?: (event: ISymbioteEvent) => void;
-    onAccessibilityTap?: (event: ISymbioteEvent) => void;
-    onMagicTap?: (event: ISymbioteEvent) => void;
-    onAccessibilityEscape?: (event: ISymbioteEvent) => void;
-}
-export type IAngularScrollViewInputs = Omit<IAngularScrollViewProps, 'onLayout' | 'onScrollToTop' | 'onContentSizeChange' | 'onAccessibilityAction' | 'onAccessibilityTap' | 'onMagicTap' | 'onAccessibilityEscape'>;
-export declare class ScrollViewProjectionDirective {
-    private readonly elementRef;
-    set symbioteScrollViewProjection(controller: ScrollViewProjectionController);
-}
-export declare abstract class ScrollViewBase implements IAngularScrollViewInputs, AfterViewInit, OnDestroy {
-    style: IStyleProp<IViewStyle> | undefined;
-    contentContainerStyle: IStyleProp<IViewStyle> | string | undefined;
-    horizontal: boolean | undefined;
-    scrollEnabled: boolean | undefined;
-    showsVerticalScrollIndicator: boolean | undefined;
-    showsHorizontalScrollIndicator: boolean | undefined;
-    pagingEnabled: boolean | undefined;
-    bounces: boolean | undefined;
-    decelerationRate: 'normal' | 'fast' | number | undefined;
-    scrollEventThrottle: number | undefined;
-    contentInset: IAngularScrollViewProps['contentInset'];
-    contentOffset: IAngularScrollViewProps['contentOffset'];
-    removeClippedSubviews: boolean | undefined;
-    snapToInterval: number | undefined;
-    snapToOffsets: number[] | undefined;
-    snapToAlignment: IAngularScrollViewProps['snapToAlignment'];
-    snapToStart: boolean | undefined;
-    snapToEnd: boolean | undefined;
-    disableIntervalMomentum: boolean | undefined;
-    stickyHeaderIndices: number[] | undefined;
-    invertStickyHeaders: boolean | undefined;
-    StickyHeaderComponent: unknown;
-    keyboardDismissMode: IAngularScrollViewProps['keyboardDismissMode'];
-    keyboardShouldPersistTaps: IAngularScrollViewProps['keyboardShouldPersistTaps'];
-    maintainVisibleContentPosition: IAngularScrollViewProps['maintainVisibleContentPosition'];
-    alwaysBounceHorizontal: boolean | undefined;
-    alwaysBounceVertical: boolean | undefined;
-    centerContent: boolean | undefined;
-    scrollIndicatorInsets: IAngularScrollViewProps['scrollIndicatorInsets'];
-    indicatorStyle: IAngularScrollViewProps['indicatorStyle'];
-    directionalLockEnabled: boolean | undefined;
-    automaticallyAdjustKeyboardInsets: boolean | undefined;
-    contentInsetAdjustmentBehavior: IAngularScrollViewProps['contentInsetAdjustmentBehavior'];
-    minimumZoomScale: number | undefined;
-    maximumZoomScale: number | undefined;
-    zoomScale: number | undefined;
-    bouncesZoom: boolean | undefined;
-    pinchGestureEnabled: boolean | undefined;
-    nestedScrollEnabled: boolean | undefined;
-    overScrollMode: IAngularScrollViewProps['overScrollMode'];
-    fadingEdgeLength: number | undefined;
-    persistentScrollbar: boolean | undefined;
-    endFillColor: string | undefined;
-    onScroll: IScrollHandler | undefined;
-    onScrollBeginDrag: IScrollHandler | undefined;
-    onScrollEndDrag: IScrollHandler | undefined;
-    onMomentumScrollBegin: IScrollHandler | undefined;
-    onMomentumScrollEnd: IScrollHandler | undefined;
-    readonly layout: EventEmitter<ISymbioteEvent>;
-    readonly scrollToTop: EventEmitter<ISymbioteEvent>;
-    readonly contentSizeChange: EventEmitter<IContentSize>;
-    readonly accessibilityAction: EventEmitter<ISymbioteEvent>;
-    readonly accessibilityTap: EventEmitter<ISymbioteEvent>;
-    readonly magicTap: EventEmitter<ISymbioteEvent>;
-    readonly accessibilityEscape: EventEmitter<ISymbioteEvent>;
-    testID: string | undefined;
-    nativeID: string | undefined;
-    accessible: boolean | undefined;
-    accessibilityLabel: string | undefined;
-    accessibilityHint: string | undefined;
-    accessibilityRole: IAccessibilityProps['accessibilityRole'];
-    accessibilityState: IAccessibilityStateValue | undefined;
-    accessibilityValue: IAccessibilityProps['accessibilityValue'];
-    accessibilityActions: IAccessibilityProps['accessibilityActions'];
-    accessibilityLabelledBy: string | string[] | undefined;
-    importantForAccessibility: IAccessibilityProps['importantForAccessibility'];
-    accessibilityLiveRegion: IAccessibilityProps['accessibilityLiveRegion'];
-    screenReaderFocusable: boolean | undefined;
-    accessibilityViewIsModal: boolean | undefined;
-    accessibilityElementsHidden: boolean | undefined;
-    accessibilityIgnoresInvertColors: boolean | undefined;
-    accessibilityLanguage: string | undefined;
-    accessibilityRespondsToUserInteraction: boolean | undefined;
-    accessibilityShowsLargeContentViewer: boolean | undefined;
-    accessibilityLargeContentTitle: string | undefined;
-    role: IAriaProps['role'];
-    'aria-label': string | undefined;
-    'aria-labelledby': string | undefined;
-    'aria-live': IAriaProps['aria-live'];
-    'aria-hidden': boolean | undefined;
-    'aria-busy': boolean | undefined;
-    'aria-checked': boolean | 'mixed' | undefined;
-    'aria-disabled': boolean | undefined;
-    'aria-expanded': boolean | undefined;
-    'aria-selected': boolean | undefined;
-    'aria-modal': boolean | undefined;
-    'aria-valuemax': number | undefined;
-    'aria-valuemin': number | undefined;
-    'aria-valuenow': number | undefined;
-    'aria-valuetext': string | undefined;
-    private hostDirective?;
-    protected projectedRefreshControl?: RefreshControl;
-    protected readonly scrollAnimatedValue: AnimatedValue;
-    private lastContentSize;
-    private viewportHeight;
-    protected readonly projectionController: ScrollViewProjectionController;
-    private detachStickyScroll;
-    private cancelStickyBind;
-    private lastLoggedIsHorizontal;
-    private readonly handleInvertedStickyLayout;
-    private readonly handleContentLayout;
-    private readonly emitterCallbackCache;
-    private cachedStickyOnScrollSource;
-    private cachedStickyOnScrollHandler;
-    get isHorizontal(): boolean;
-    private get hasStickyHeaders();
-    private get resolvedContentContainerStyle();
-    private get scrollViewBaseStyle();
-    get scrollProps(): Record<string, unknown>;
-    protected get layoutSplitStyle(): IStyleProp<IViewStyle>;
-    get androidWrappedScrollProps(): Record<string, unknown>;
-    get iosRefreshControlProps(): Record<string, unknown>;
-    get androidRefreshControlProps(): Record<string, unknown>;
-    protected handleProjectedRefresh(nativeNode: unknown): void;
-    private refreshControlProps;
-    get hasProjectedRefreshControl(): boolean;
-    get contentProps(): Record<string, unknown>;
-    private emitterCallback;
-    private stickyOnScrollHandler;
-    private get hostNode();
-    private readonly handle;
-    scrollTo(options?: {
-        x?: number;
-        y?: number;
-        animated?: boolean;
-    }): void;
-    scrollToEnd(options?: {
-        animated?: boolean;
-    }): void;
-    flashScrollIndicators(): void;
-    getScrollNode(): ISymbioteNode | null;
-    ngAfterViewInit(): void;
-    private attachSticky;
-    ngOnDestroy(): void;
-    private updateProjectionController;
-    private accessibilityInputs;
-}