@tamagui/react-native-web-lite 1.116.2 → 1.116.3

package/src/vendor/react-native/ViewabilityHelper.ts

@@ -0,0 +1,291 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { invariant } from '@tamagui/react-native-web-internals'
+import type { FrameMetricProps } from './VirtualizedList/VirtualizedListProps'
+
+export type ViewToken = {
+  item: any
+  key: string
+  index?: number | null
+  isViewable: boolean
+  section?: any
+}
+
+export type ViewabilityConfigCallbackPair = {
+  viewabilityConfig: ViewabilityConfig
+  onViewableItemsChanged: (info: {
+    viewableItems: ViewToken[]
+    changed: ViewToken[]
+  }) => void
+}
+
+export type ViewabilityConfig = {
+  /**
+   * Minimum amount of time (in milliseconds) that an item must be physically viewable before the
+   * viewability callback will be fired. A high number means that scrolling through content without
+   * stopping will not mark the content as viewable.
+   */
+  minimumViewTime?: number
+
+  /**
+   * Percent of viewport that must be covered for a partially occluded item to count as
+   * "viewable", 0-100. Fully visible items are always considered viewable. A value of 0 means
+   * that a single pixel in the viewport makes the item viewable, and a value of 100 means that
+   * an item must be either entirely visible or cover the entire viewport to count as viewable.
+   */
+  viewAreaCoveragePercentThreshold?: number
+
+  /**
+   * Similar to `viewAreaPercentThreshold`, but considers the percent of the item that is visible,
+   * rather than the fraction of the viewable area it covers.
+   */
+  itemVisiblePercentThreshold?: number
+
+  /**
+   * Nothing is considered viewable until the user scrolls or `recordInteraction` is called after
+   * render.
+   */
+  waitForInteraction?: boolean
+}
+
+/**
+ * A Utility class for calculating viewable items based on current metrics like scroll position and
+ * layout.
+ */
+class ViewabilityHelper {
+  _config: ViewabilityConfig
+  _hasInteracted: boolean = false
+  _timers: Set<number> = new Set()
+  _viewableIndices: number[] = []
+  _viewableItems: Map<string, ViewToken> = new Map()
+
+  constructor(config: ViewabilityConfig = { viewAreaCoveragePercentThreshold: 0 }) {
+    this._config = config
+  }
+
+  /**
+   * Cleanup, e.g. on unmount. Clears any pending timers.
+   */
+  dispose() {
+    this._timers.forEach(clearTimeout)
+  }
+
+  /**
+   * Determines which items are viewable based on the current metrics and config.
+   */
+  computeViewableItems(
+    props: FrameMetricProps,
+    scrollOffset: number,
+    viewportHeight: number,
+    getFrameMetrics: (
+      index: number,
+      props: FrameMetricProps
+    ) => { length: number; offset: number } | null,
+    renderRange?: { first: number; last: number }
+  ): number[] {
+    const itemCount = props.getItemCount(props.data)
+    const { itemVisiblePercentThreshold, viewAreaCoveragePercentThreshold } = this._config
+    const viewAreaMode = viewAreaCoveragePercentThreshold != null
+    const viewablePercentThreshold = viewAreaMode
+      ? viewAreaCoveragePercentThreshold
+      : itemVisiblePercentThreshold
+    invariant(
+      viewablePercentThreshold != null &&
+        (itemVisiblePercentThreshold != null) !==
+          (viewAreaCoveragePercentThreshold != null),
+      'Must set exactly one of itemVisiblePercentThreshold or viewAreaCoveragePercentThreshold'
+    )
+    const viewableIndices: number[] = []
+    if (itemCount === 0) {
+      return viewableIndices
+    }
+    let firstVisible = -1
+    const { first, last } = renderRange || { first: 0, last: itemCount - 1 }
+    if (last >= itemCount) {
+      console.warn(
+        'Invalid render range computing viewability ' +
+          JSON.stringify({ renderRange, itemCount })
+      )
+      return []
+    }
+    for (let idx = first; idx <= last; idx++) {
+      const metrics = getFrameMetrics(idx, props)
+      if (!metrics) {
+        continue
+      }
+      const top = metrics.offset - scrollOffset
+      const bottom = top + metrics.length
+      if (top < viewportHeight && bottom > 0) {
+        firstVisible = idx
+        if (
+          _isViewable(
+            viewAreaMode,
+            viewablePercentThreshold!,
+            top,
+            bottom,
+            viewportHeight,
+            metrics.length
+          )
+        ) {
+          viewableIndices.push(idx)
+        }
+      } else if (firstVisible >= 0) {
+        break
+      }
+    }
+    return viewableIndices
+  }
+
+  /**
+   * Figures out which items are viewable and how that has changed from before and calls
+   * `onViewableItemsChanged` as appropriate.
+   */
+  onUpdate(
+    props: FrameMetricProps,
+    scrollOffset: number,
+    viewportHeight: number,
+    getFrameMetrics: (
+      index: number,
+      props: FrameMetricProps
+    ) => { length: number; offset: number } | null,
+    createViewToken: (
+      index: number,
+      isViewable: boolean,
+      props: FrameMetricProps
+    ) => ViewToken,
+    onViewableItemsChanged: (info: {
+      viewableItems: ViewToken[]
+      changed: ViewToken[]
+    }) => void,
+    renderRange?: { first: number; last: number }
+  ): void {
+    const itemCount = props.getItemCount(props.data)
+    if (
+      (this._config.waitForInteraction && !this._hasInteracted) ||
+      itemCount === 0 ||
+      !getFrameMetrics(0, props)
+    ) {
+      return
+    }
+    let viewableIndices: number[] = []
+    if (itemCount) {
+      viewableIndices = this.computeViewableItems(
+        props,
+        scrollOffset,
+        viewportHeight,
+        getFrameMetrics,
+        renderRange
+      )
+    }
+    if (
+      this._viewableIndices.length === viewableIndices.length &&
+      this._viewableIndices.every((v, ii) => v === viewableIndices[ii])
+    ) {
+      return
+    }
+    this._viewableIndices = viewableIndices
+    if (this._config.minimumViewTime) {
+      const handle = setTimeout(() => {
+        this._timers.delete(handle as any)
+        this._onUpdateSync(
+          props,
+          viewableIndices,
+          onViewableItemsChanged,
+          createViewToken
+        )
+      }, this._config.minimumViewTime)
+      this._timers.add(handle as any)
+    } else {
+      this._onUpdateSync(props, viewableIndices, onViewableItemsChanged, createViewToken)
+    }
+  }
+
+  resetViewableIndices() {
+    this._viewableIndices = []
+  }
+
+  recordInteraction() {
+    this._hasInteracted = true
+  }
+
+  _onUpdateSync(
+    props: FrameMetricProps,
+    viewableIndicesToCheck: number[],
+    onViewableItemsChanged: (info: {
+      changed: ViewToken[]
+      viewableItems: ViewToken[]
+    }) => void,
+    createViewToken: (
+      index: number,
+      isViewable: boolean,
+      props: FrameMetricProps
+    ) => ViewToken
+  ) {
+    viewableIndicesToCheck = viewableIndicesToCheck.filter((ii) =>
+      this._viewableIndices.includes(ii)
+    )
+    const prevItems = this._viewableItems
+    const nextItems = new Map(
+      viewableIndicesToCheck.map((ii) => {
+        const viewable = createViewToken(ii, true, props)
+        return [viewable.key, viewable]
+      })
+    )
+
+    const changed: ViewToken[] = []
+    for (const [key, viewable] of nextItems) {
+      if (!prevItems.has(key)) {
+        changed.push(viewable)
+      }
+    }
+    for (const [key, viewable] of prevItems) {
+      if (!nextItems.has(key)) {
+        changed.push({ ...viewable, isViewable: false })
+      }
+    }
+    if (changed.length > 0) {
+      this._viewableItems = nextItems
+      onViewableItemsChanged({
+        viewableItems: Array.from(nextItems.values()),
+        changed,
+      })
+    }
+  }
+}
+
+function _isViewable(
+  viewAreaMode: boolean,
+  viewablePercentThreshold: number,
+  top: number,
+  bottom: number,
+  viewportHeight: number,
+  itemLength: number
+): boolean {
+  if (_isEntirelyVisible(top, bottom, viewportHeight)) {
+    return true
+  } else {
+    const pixels = _getPixelsVisible(top, bottom, viewportHeight)
+    const percent = 100 * (viewAreaMode ? pixels / viewportHeight : pixels / itemLength)
+    return percent >= viewablePercentThreshold
+  }
+}
+
+function _getPixelsVisible(top: number, bottom: number, viewportHeight: number): number {
+  const visibleHeight = Math.min(bottom, viewportHeight) - Math.max(top, 0)
+  return Math.max(0, visibleHeight)
+}
+
+function _isEntirelyVisible(
+  top: number,
+  bottom: number,
+  viewportHeight: number
+): boolean {
+  return top >= 0 && bottom <= viewportHeight && bottom > top
+}
+
+export default ViewabilityHelper

package/src/vendor/react-native/VirtualizeUtils/index.tsx

@@ -0,0 +1,212 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+interface FrameMetric {
+  length: number
+  offset: number
+}
+
+interface ScrollMetrics {
+  dt: number
+  offset: number
+  velocity: number
+  visibleLength: number
+  zoomScale?: number
+}
+
+interface Range {
+  first: number
+  last: number
+}
+
+interface FrameMetricProps {
+  data: any
+  getItemCount: (data: any) => number
+}
+
+/**
+ * Used to find the indices of the frames that overlap the given offsets. Useful for finding the
+ * items that bound different windows of content, such as the visible area or the buffered overscan
+ * area.
+ */
+export function elementsThatOverlapOffsets(
+  offsets: number[],
+  props: FrameMetricProps,
+  getFrameMetrics: (index: number, props: FrameMetricProps) => FrameMetric,
+  zoomScale = 1
+): number[] {
+  const itemCount = props.getItemCount(props.data)
+  const result: number[] = []
+
+  for (let offsetIndex = 0; offsetIndex < offsets.length; offsetIndex++) {
+    const currentOffset = offsets[offsetIndex]
+    let left = 0
+    let right = itemCount - 1
+
+    while (left <= right) {
+      const mid = left + ((right - left) >>> 1)
+      const frame = getFrameMetrics(mid, props)
+      const scaledOffsetStart = frame.offset * zoomScale
+      const scaledOffsetEnd = (frame.offset + frame.length) * zoomScale
+
+      if (
+        (mid === 0 && currentOffset < scaledOffsetStart) ||
+        (mid !== 0 && currentOffset <= scaledOffsetStart)
+      ) {
+        right = mid - 1
+      } else if (currentOffset > scaledOffsetEnd) {
+        left = mid + 1
+      } else {
+        result[offsetIndex] = mid
+        break
+      }
+    }
+  }
+
+  return result
+}
+
+/**
+ * Computes the number of elements in the `next` range that are new compared to the `prev` range.
+ * Handy for calculating how many new items will be rendered when the render window changes so we
+ * can restrict the number of new items render at once so that content can appear on the screen
+ * faster.
+ */
+export function newRangeCount(prev: Range, next: Range): number {
+  return (
+    next.last -
+    next.first +
+    1 -
+    Math.max(0, 1 + Math.min(next.last, prev.last) - Math.max(next.first, prev.first))
+  )
+}
+
+/**
+ * Custom logic for determining which items should be rendered given the current frame and scroll
+ * metrics, as well as the previous render state.
+ */
+export function computeWindowedRenderLimits(
+  props: FrameMetricProps,
+  maxToRenderPerBatch: number,
+  windowSize: number,
+  prev: Range,
+  getFrameMetricsApprox: (index: number, props: FrameMetricProps) => FrameMetric,
+  scrollMetrics: ScrollMetrics
+): Range {
+  const itemCount = props.getItemCount(props.data)
+  if (itemCount === 0) {
+    return { first: 0, last: -1 }
+  }
+
+  const { offset, velocity, visibleLength, zoomScale = 1 } = scrollMetrics
+
+  const visibleBegin = Math.max(0, offset)
+  const visibleEnd = visibleBegin + visibleLength
+  const overscanLength = (windowSize - 1) * visibleLength
+
+  const leadFactor = 0.5
+  const fillPreference = velocity > 1 ? 'after' : velocity < -1 ? 'before' : 'none'
+
+  const overscanBegin = Math.max(0, visibleBegin - (1 - leadFactor) * overscanLength)
+  const overscanEnd = Math.max(0, visibleEnd + leadFactor * overscanLength)
+
+  const lastItemOffset = getFrameMetricsApprox(itemCount - 1, props).offset * zoomScale
+  if (lastItemOffset < overscanBegin) {
+    return {
+      first: Math.max(0, itemCount - 1 - maxToRenderPerBatch),
+      last: itemCount - 1,
+    }
+  }
+
+  let [overscanFirst, first, last, overscanLast] = elementsThatOverlapOffsets(
+    [overscanBegin, visibleBegin, visibleEnd, overscanEnd],
+    props,
+    getFrameMetricsApprox,
+    zoomScale
+  )
+
+  overscanFirst = overscanFirst == null ? 0 : overscanFirst
+  first = first == null ? Math.max(0, overscanFirst) : first
+  overscanLast = overscanLast == null ? itemCount - 1 : overscanLast
+  last = last == null ? Math.min(overscanLast, first + maxToRenderPerBatch - 1) : last
+  const visible = { first, last }
+
+  let newCellCount = newRangeCount(prev, visible)
+
+  while (true) {
+    if (first <= overscanFirst && last >= overscanLast) {
+      break
+    }
+
+    const maxNewCells = newCellCount >= maxToRenderPerBatch
+    const firstWillAddMore = first <= prev.first || first > prev.last
+    const firstShouldIncrement =
+      first > overscanFirst && (!maxNewCells || !firstWillAddMore)
+    const lastWillAddMore = last >= prev.last || last < prev.first
+    const lastShouldIncrement = last < overscanLast && (!maxNewCells || !lastWillAddMore)
+
+    if (maxNewCells && !firstShouldIncrement && !lastShouldIncrement) {
+      break
+    }
+
+    if (
+      firstShouldIncrement &&
+      !(fillPreference === 'after' && lastShouldIncrement && lastWillAddMore)
+    ) {
+      if (firstWillAddMore) {
+        newCellCount++
+      }
+      first--
+    }
+
+    if (
+      lastShouldIncrement &&
+      !(fillPreference === 'before' && firstShouldIncrement && firstWillAddMore)
+    ) {
+      if (lastWillAddMore) {
+        newCellCount++
+      }
+      last++
+    }
+  }
+
+  if (
+    !(
+      last >= first &&
+      first >= 0 &&
+      last < itemCount &&
+      first >= overscanFirst &&
+      last <= overscanLast &&
+      first <= visible.first &&
+      last >= visible.last
+    )
+  ) {
+    throw new Error(
+      'Bad window calculation ' +
+        JSON.stringify({
+          first,
+          last,
+          itemCount,
+          overscanFirst,
+          overscanLast,
+          visible,
+        })
+    )
+  }
+
+  return { first, last }
+}
+
+export function keyExtractor(item: any, index: number): string {
+  if (typeof item === 'object' && item?.key != null) {
+    return item.key
+  }
+  if (typeof item === 'object' && item?.id != null) {
+    return item.id
+  }
+  return String(index)
+}

package/src/vendor/react-native/VirtualizedList/CellRenderMask.ts

@@ -0,0 +1,147 @@
+// @ts-nocheck
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { invariant } from '@tamagui/react-native-web-internals'
+
+export type CellRegion = {
+  first: number
+  last: number
+  isSpacer: boolean
+}
+
+export class CellRenderMask {
+  private _numCells: number
+  private _regions: Array<CellRegion>
+
+  constructor(numCells: number) {
+    invariant(numCells >= 0, 'CellRenderMask must contain a non-negative number of cells')
+
+    this._numCells = numCells
+
+    if (numCells === 0) {
+      this._regions = []
+    } else {
+      this._regions = [
+        {
+          first: 0,
+          last: numCells - 1,
+          isSpacer: true,
+        },
+      ]
+    }
+  }
+
+  enumerateRegions(): ReadonlyArray<CellRegion> {
+    return this._regions
+  }
+
+  addCells(cells: { first: number; last: number }): void {
+    invariant(
+      cells.first >= 0 &&
+        cells.first < this._numCells &&
+        cells.last >= -1 &&
+        cells.last < this._numCells &&
+        cells.last >= cells.first - 1,
+      'CellRenderMask.addCells called with invalid cell range'
+    )
+
+    // VirtualizedList uses inclusive ranges, where zero-count states are
+    // possible. E.g. [0, -1] for no cells, starting at 0.
+    if (cells.last < cells.first) {
+      return
+    }
+
+    const [firstIntersect, firstIntersectIdx] = this._findRegion(cells.first)
+    const [lastIntersect, lastIntersectIdx] = this._findRegion(cells.last)
+
+    // Fast-path if the cells to add are already all present in the mask. We
+    // will otherwise need to do some mutation.
+    if (firstIntersectIdx === lastIntersectIdx && !firstIntersect.isSpacer) {
+      return
+    }
+
+    // We need to replace the existing covered regions with 1-3 new regions
+    // depending whether we need to split spacers out of overlapping regions.
+    const newLeadRegion: Array<CellRegion> = []
+    const newTailRegion: Array<CellRegion> = []
+    const newMainRegion: CellRegion = {
+      ...cells,
+      isSpacer: false,
+    }
+
+    if (firstIntersect.first < newMainRegion.first) {
+      if (firstIntersect.isSpacer) {
+        newLeadRegion.push({
+          first: firstIntersect.first,
+          last: newMainRegion.first - 1,
+          isSpacer: true,
+        })
+      } else {
+        newMainRegion.first = firstIntersect.first
+      }
+    }
+
+    if (lastIntersect.last > newMainRegion.last) {
+      if (lastIntersect.isSpacer) {
+        newTailRegion.push({
+          first: newMainRegion.last + 1,
+          last: lastIntersect.last,
+          isSpacer: true,
+        })
+      } else {
+        newMainRegion.last = lastIntersect.last
+      }
+    }
+
+    const replacementRegions: Array<CellRegion> = [
+      ...newLeadRegion,
+      newMainRegion,
+      ...newTailRegion,
+    ]
+    const numRegionsToDelete = lastIntersectIdx - firstIntersectIdx + 1
+    this._regions.splice(firstIntersectIdx, numRegionsToDelete, ...replacementRegions)
+  }
+
+  numCells(): number {
+    return this._numCells
+  }
+
+  equals(other: CellRenderMask): boolean {
+    return (
+      this._numCells === other._numCells &&
+      this._regions.length === other._regions.length &&
+      this._regions.every(
+        (region, i) =>
+          region.first === other._regions[i].first &&
+          region.last === other._regions[i].last &&
+          region.isSpacer === other._regions[i].isSpacer
+      )
+    )
+  }
+
+  private _findRegion(cellIdx: number): [CellRegion, number] {
+    let firstIdx = 0
+    let lastIdx = this._regions.length - 1
+
+    while (firstIdx <= lastIdx) {
+      const middleIdx = Math.floor((firstIdx + lastIdx) / 2)
+      const middleRegion = this._regions[middleIdx]
+
+      if (cellIdx >= middleRegion.first && cellIdx <= middleRegion.last) {
+        return [middleRegion, middleIdx]
+      } else if (cellIdx < middleRegion.first) {
+        lastIdx = middleIdx - 1
+      } else if (cellIdx > middleRegion.last) {
+        firstIdx = middleIdx + 1
+      }
+    }
+
+    invariant(false, `A region was not found containing cellIdx ${cellIdx}`)
+  }
+}