@symbiote-native/angular 3.1.3 → 3.3.0

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

@@ -0,0 +1,62 @@
+// The styles a windowed list derives from its inputs each pass. Pure, so the component's recompute
+// only assigns the result
+
+import {
+  INVERTED_X_STYLE,
+  INVERTED_Y_STYLE,
+} from '@symbiote-native/components';
+import {
+  flattenStyle,
+  type IStyleProp,
+  type IViewStyle,
+} from '@symbiote-native/engine';
+
+type IMaintainVisibleContentPosition = {
+  minIndexForVisible: number;
+  autoscrollToTopThreshold?: number;
+};
+
+export type IListStyleInput = {
+  isHorizontal: boolean;
+  isInverted: boolean;
+  total: number;
+  hasHeader: boolean;
+  style: IStyleProp<IViewStyle> | undefined;
+  contentContainerStyle: IStyleProp<IViewStyle> | undefined;
+  // The class-derived style of the list's own anchor host
+  anchorStyle: unknown;
+  maintainVisibleContentPosition: IMaintainVisibleContentPosition | undefined;
+};
+
+export type IListStyles = {
+  // Bound to `[style]`, which Angular compiles to an instruction that only understands a flat
+  // object, so it is always pre-flattened
+  style: IViewStyle | undefined;
+  contentContainerStyle: IStyleProp<IViewStyle> | undefined;
+  cellStyle: IViewStyle | undefined;
+  maintainVisibleContentPosition: IMaintainVisibleContentPosition | undefined;
+};
+
+export function resolveListStyles(input: IListStyleInput): IListStyles {
+  const inversion = input.isHorizontal ? INVERTED_X_STYLE : INVERTED_Y_STYLE;
+  const mvcp = input.maintainVisibleContentPosition;
+  return {
+    contentContainerStyle: input.isHorizontal
+      ? [input.contentContainerStyle, { width: input.total }]
+      : input.contentContainerStyle,
+    // The app's style comes after the inversion, so it can override the flip
+    style: flattenStyle([
+      input.anchorStyle,
+      input.isInverted ? [inversion, input.style] : input.style,
+    ]),
+    cellStyle: input.isInverted ? inversion : undefined,
+    maintainVisibleContentPosition:
+      mvcp === undefined
+        ? undefined
+        : {
+            ...mvcp,
+            minIndexForVisible:
+              mvcp.minIndexForVisible + (input.hasHeader ? 1 : 0),
+          },
+  };
+}

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

@@ -0,0 +1,175 @@
+// Same body on both axes, only the outer tag differs
+// Written out once per branch: ngc needs one literal, no shared outlet primitive exists
+export const VIRTUALIZED_LIST_TEMPLATE = `
+    @if (isHorizontal) {
+      <horizontal-scroll-view #scrollHost [symbioteHostProps]="scrollViewBag()">
+        @if (shouldRenderRefreshControl) {
+          <refresh-control
+            [symbioteHostProps]="refreshControlBag()"
+          ></refresh-control>
+        }
+
+        @if (headerDir !== undefined) {
+          <view>
+            <ng-container [vListOutlet]="headerDir.templateRef"></ng-container>
+          </view>
+        }
+
+        @if (itemCount === 0) {
+          @if (emptyDir !== undefined) {
+            <view>
+              <ng-container [vListOutlet]="emptyDir.templateRef"></ng-container>
+            </view>
+          }
+        } @else {
+          @if (leadingSpacerStyle !== null) {
+            <view [style]="leadingSpacerStyle"></view>
+          }
+          @if (forcedStickyCell !== null) {
+            <sticky-header
+              (layout)="handleCellLayout(forcedStickyCell.measure, $event)"
+              [style]="cellStyle"
+            >
+              <ng-container
+                [vListOutlet]="cellTemplate"
+                [vListOutletContext]="forcedStickyCell.context"
+              ></ng-container>
+            </sticky-header>
+          }
+          @if (gapSpacerStyle !== null) {
+            <view [style]="gapSpacerStyle"></view>
+          }
+          @for (cell of windowCells; track cell.key) {
+            @if (cell.isSticky) {
+              <sticky-header
+                (layout)="handleCellLayout(cell.measure, $event)"
+                [style]="cellStyle"
+              >
+                <ng-container
+                  [vListOutlet]="cellTemplate"
+                  [vListOutletContext]="cell.context"
+                ></ng-container>
+                @if (cell.separatorContext !== undefined) {
+                  <ng-container
+                    [vListOutlet]="separatorTemplate"
+                    [vListOutletContext]="cell.separatorContext"
+                  ></ng-container>
+                }
+              </sticky-header>
+            } @else {
+              <view
+                (layout)="handleCellLayout(cell.measure, $event)"
+                [style]="cellStyle"
+              >
+                <ng-container
+                  [vListOutlet]="cellTemplate"
+                  [vListOutletContext]="cell.context"
+                ></ng-container>
+                @if (cell.separatorContext !== undefined) {
+                  <ng-container
+                    [vListOutlet]="separatorTemplate"
+                    [vListOutletContext]="cell.separatorContext"
+                  ></ng-container>
+                }
+              </view>
+            }
+          }
+          @if (trailingSpacerStyle !== null) {
+            <view [style]="trailingSpacerStyle"></view>
+          }
+        }
+
+        @if (footerDir !== undefined) {
+          <view>
+            <ng-container [vListOutlet]="footerDir.templateRef"></ng-container>
+          </view>
+        }
+      </horizontal-scroll-view>
+    } @else {
+      <scroll-view #scrollHost [symbioteHostProps]="scrollViewBag()">
+        @if (shouldRenderRefreshControl) {
+          <refresh-control
+            [symbioteHostProps]="refreshControlBag()"
+          ></refresh-control>
+        }
+
+        @if (headerDir !== undefined) {
+          <view>
+            <ng-container [vListOutlet]="headerDir.templateRef"></ng-container>
+          </view>
+        }
+
+        @if (itemCount === 0) {
+          @if (emptyDir !== undefined) {
+            <view>
+              <ng-container [vListOutlet]="emptyDir.templateRef"></ng-container>
+            </view>
+          }
+        } @else {
+          @if (leadingSpacerStyle !== null) {
+            <view [style]="leadingSpacerStyle"></view>
+          }
+          @if (forcedStickyCell !== null) {
+            <sticky-header
+              (layout)="handleCellLayout(forcedStickyCell.measure, $event)"
+              [style]="cellStyle"
+            >
+              <ng-container
+                [vListOutlet]="cellTemplate"
+                [vListOutletContext]="forcedStickyCell.context"
+              ></ng-container>
+            </sticky-header>
+          }
+          @if (gapSpacerStyle !== null) {
+            <view [style]="gapSpacerStyle"></view>
+          }
+          <!-- The separator sits INSIDE the measuring view, matching RN's cell renderer, as a
+               sibling it would add an extra flex gap -->
+          @for (cell of windowCells; track cell.key) {
+            @if (cell.isSticky) {
+              <sticky-header
+                (layout)="handleCellLayout(cell.measure, $event)"
+                [style]="cellStyle"
+              >
+                <ng-container
+                  [vListOutlet]="cellTemplate"
+                  [vListOutletContext]="cell.context"
+                ></ng-container>
+                @if (cell.separatorContext !== undefined) {
+                  <ng-container
+                    [vListOutlet]="separatorTemplate"
+                    [vListOutletContext]="cell.separatorContext"
+                  ></ng-container>
+                }
+              </sticky-header>
+            } @else {
+              <view
+                (layout)="handleCellLayout(cell.measure, $event)"
+                [style]="cellStyle"
+              >
+                <ng-container
+                  [vListOutlet]="cellTemplate"
+                  [vListOutletContext]="cell.context"
+                ></ng-container>
+                @if (cell.separatorContext !== undefined) {
+                  <ng-container
+                    [vListOutlet]="separatorTemplate"
+                    [vListOutletContext]="cell.separatorContext"
+                  ></ng-container>
+                }
+              </view>
+            }
+          }
+          @if (trailingSpacerStyle !== null) {
+            <view [style]="trailingSpacerStyle"></view>
+          }
+        }
+
+        @if (footerDir !== undefined) {
+          <view>
+            <ng-container [vListOutlet]="footerDir.templateRef"></ng-container>
+          </view>
+        }
+      </scroll-view>
+    }
+  `;