@hanzogui/react-native-web-lite 2.0.0-rc.41-hanzoai.5

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

@@ -0,0 +1,204 @@
+/**
+ * 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.
+ *
+ * @format
+ * @format
+ */
+
+/**
+ * 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,
+  props,
+  getFrameMetrics,
+  zoomScale = 1
+) {
+  const itemCount = props.getItemCount(props.data)
+  const result = []
+  for (let offsetIndex = 0; offsetIndex < offsets.length; offsetIndex++) {
+    const currentOffset = offsets[offsetIndex]
+    let left = 0
+    let right = itemCount - 1
+
+    while (left <= right) {
+      // eslint-disable-next-line no-bitwise
+      const mid = left + ((right - left) >>> 1)
+      const frame = getFrameMetrics(mid, props)
+      const scaledOffsetStart = frame.offset * zoomScale
+      const scaledOffsetEnd = (frame.offset + frame.length) * zoomScale
+
+      // We want the first frame that contains the offset, with inclusive bounds. Thus, for the
+      // first frame the scaledOffsetStart is inclusive, while for other frames it is exclusive.
+      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, next) {
+  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. The algorithm may evolve over time, but generally
+ * prioritizes the visible area first, then expands that with overscan regions ahead and behind,
+ * biased in the direction of scroll.
+ */
+export function computeWindowedRenderLimits(
+  props,
+  maxToRenderPerBatch,
+  windowSize,
+  prev,
+  getFrameMetricsApprox,
+  scrollMetrics
+) {
+  const itemCount = props.getItemCount(props.data)
+  if (itemCount === 0) {
+    return { first: 0, last: -1 }
+  }
+  const { offset, velocity, visibleLength, zoomScale = 1 } = scrollMetrics
+
+  // Start with visible area, then compute maximum overscan region by expanding from there, biased
+  // in the direction of scroll. Total overscan area is capped, which should cap memory consumption
+  // too.
+  const visibleBegin = Math.max(0, offset)
+  const visibleEnd = visibleBegin + visibleLength
+  const overscanLength = (windowSize - 1) * visibleLength
+
+  // Considering velocity seems to introduce more churn than it's worth.
+  const leadFactor = 0.5 // Math.max(0, Math.min(1, velocity / 25 + 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) {
+    // Entire list is before our overscan window
+    return {
+      first: Math.max(0, itemCount - 1 - maxToRenderPerBatch),
+      last: itemCount - 1,
+    }
+  }
+
+  // Find the indices that correspond to the items at the render boundaries we're targeting.
+  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 }
+
+  // We want to limit the number of new cells we're rendering per batch so that we can fill the
+  // content on the screen quickly. If we rendered the entire overscan window at once, the user
+  // could be staring at white space for a long time waiting for a bunch of offscreen content to
+  // render.
+  let newCellCount = newRangeCount(prev, visible)
+
+  while (true) {
+    if (first <= overscanFirst && last >= overscanLast) {
+      // If we fill the entire overscan range, we're done.
+      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) {
+      // We only want to stop if we've hit maxNewCells AND we cannot increment first or last
+      // without rendering new items. This let's us preserve as many already rendered items as
+      // possible, reducing render churn and keeping the rendered overscan range as large as
+      // possible.
+      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, index) {
+  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.js

@@ -0,0 +1,135 @@
+/**
+ * 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.
+ *
+ * @format
+ * @format
+ */
+
+import { invariant } from '@hanzogui/react-native-web-internals'
+
+export class CellRenderMask {
+  constructor(numCells) {
+    invariant(numCells >= 0, 'CellRenderMask must contain a non-negative number os cells')
+
+    this._numCells = numCells
+
+    if (numCells === 0) {
+      this._regions = []
+    } else {
+      this._regions = [
+        {
+          first: 0,
+          last: numCells - 1,
+          isSpacer: true,
+        },
+      ]
+    }
+  }
+
+  enumerateRegions() {
+    return this._regions
+  }
+
+  addCells(cells) {
+    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 = []
+    const newTailRegion = []
+    const newMainRegion = {
+      ...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 = [...newLeadRegion, newMainRegion, ...newTailRegion]
+    const numRegionsToDelete = lastIntersectIdx - firstIntersectIdx + 1
+    this._regions.splice(firstIntersectIdx, numRegionsToDelete, ...replacementRegions)
+  }
+
+  numCells() {
+    return this._numCells
+  }
+
+  equals(other) {
+    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
+      )
+    )
+  }
+
+  _findRegion(cellIdx) {
+    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}`)
+  }
+}

package/src/vendor/react-native/VirtualizedList/ChildListCollection.js

@@ -0,0 +1,75 @@
+/**
+ * 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.
+ *
+ * @format
+ * @format
+ */
+
+import { invariant } from '@hanzogui/react-native-web-internals'
+
+class ChildListCollection {
+  _cellKeyToChildren = new Map()
+  _childrenToCellKey = new Map()
+
+  add(list, cellKey) {
+    invariant(
+      !this._childrenToCellKey.has(list),
+      'Trying to add already present child list'
+    )
+
+    const cellLists = this._cellKeyToChildren.get(cellKey) ?? new Set()
+    cellLists.add(list)
+    this._cellKeyToChildren.set(cellKey, cellLists)
+
+    this._childrenToCellKey.set(list, cellKey)
+  }
+
+  remove(list) {
+    const cellKey = this._childrenToCellKey.get(list)
+    invariant(cellKey != null, 'Trying to remove non-present child list')
+    this._childrenToCellKey.delete(list)
+
+    const cellLists = this._cellKeyToChildren.get(cellKey)
+    invariant(cellLists, '_cellKeyToChildren should contain cellKey')
+    cellLists.delete(list)
+
+    if (cellLists.size === 0) {
+      this._cellKeyToChildren.delete(cellKey)
+    }
+  }
+
+  forEach(fn) {
+    for (const listSet of this._cellKeyToChildren.values()) {
+      for (const list of listSet) {
+        fn(list)
+      }
+    }
+  }
+
+  forEachInCell(cellKey, fn) {
+    const listSet = this._cellKeyToChildren.get(cellKey) ?? []
+    for (const list of listSet) {
+      fn(list)
+    }
+  }
+
+  anyInCell(cellKey, fn) {
+    const listSet = this._cellKeyToChildren.get(cellKey) ?? []
+    for (const list of listSet) {
+      if (fn(list)) {
+        return true
+      }
+    }
+    return false
+  }
+
+  size() {
+    return this._childrenToCellKey.size
+  }
+}
+
+export { ChildListCollection }
+export default ChildListCollection

package/src/vendor/react-native/VirtualizedList/StateSafePureComponent.js

@@ -0,0 +1,82 @@
+/**
+ * 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.
+ *
+ * @format
+ * @format
+ */
+
+import { invariant } from '@hanzogui/react-native-web-internals'
+import * as React from 'react'
+
+/**
+ * `setState` is called asynchronously, and should not rely on the value of
+ * `this.props` or `this.state`:
+ * https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous
+ *
+ * SafePureComponent adds runtime enforcement, to catch cases where these
+ * variables are read in a state updater function, instead of the ones passed
+ * in.
+ */
+class StateSafePureComponent extends React.PureComponent {
+  _inAsyncStateUpdate = false
+
+  constructor(props) {
+    super(props)
+    this._installSetStateHooks()
+  }
+
+  setState(partialState, callback) {
+    if (typeof partialState === 'function') {
+      super.setState((state, props) => {
+        this._inAsyncStateUpdate = true
+        let ret
+        try {
+          ret = partialState(state, props)
+        } catch (err) {
+          throw err
+        } finally {
+          this._inAsyncStateUpdate = false
+        }
+        return ret
+      }, callback)
+    } else {
+      super.setState(partialState, callback)
+    }
+  }
+
+  _installSetStateHooks() {
+    const that = this
+    let { props, state } = this
+
+    Object.defineProperty(this, 'props', {
+      get() {
+        invariant(
+          !that._inAsyncStateUpdate,
+          '"this.props" should not be accessed during state updates'
+        )
+        return props
+      },
+      set(newProps) {
+        props = newProps
+      },
+    })
+    Object.defineProperty(this, 'state', {
+      get() {
+        invariant(
+          !that._inAsyncStateUpdate,
+          '"this.state" should not be acceessed during state updates'
+        )
+        return state
+      },
+      set(newState) {
+        state = newState
+      },
+    })
+  }
+}
+
+export { StateSafePureComponent }
+export default StateSafePureComponent

package/src/vendor/react-native/VirtualizedList/VirtualizedListCellRenderer.jsx

@@ -0,0 +1,184 @@
+/**
+ * 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.
+ *
+ * @format
+ * @format
+ */
+
+import { View } from '../../../View'
+import { StyleSheet, invariant } from '@hanzogui/react-native-web-internals'
+import { VirtualizedListCellContextProvider } from './VirtualizedListContext'
+import * as React from 'react'
+
+class CellRenderer extends React.Component {
+  state = {
+    separatorProps: {
+      highlighted: false,
+      leadingItem: this.props.item,
+    },
+  }
+
+  static getDerivedStateFromProps(props, prevState) {
+    return {
+      separatorProps: {
+        ...prevState.separatorProps,
+        leadingItem: props.item,
+      },
+    }
+  }
+
+  // TODO: consider factoring separator stuff out of VirtualizedList into FlatList since it's not
+  // reused by SectionList and we can keep VirtualizedList simpler.
+  // $FlowFixMe[missing-local-annot]
+  _separators = {
+    highlight: () => {
+      const { cellKey, prevCellKey } = this.props
+      this.props.onUpdateSeparators?.([cellKey, prevCellKey], {
+        highlighted: true,
+      })
+    },
+    unhighlight: () => {
+      const { cellKey, prevCellKey } = this.props
+      this.props.onUpdateSeparators?.([cellKey, prevCellKey], {
+        highlighted: false,
+      })
+    },
+    updateProps: (select, newProps) => {
+      const { cellKey, prevCellKey } = this.props
+      this.props.onUpdateSeparators?.(
+        [select === 'leading' ? prevCellKey : cellKey],
+        newProps
+      )
+    },
+  }
+
+  updateSeparatorProps(newProps) {
+    this.setState((state) => ({
+      separatorProps: { ...state.separatorProps, ...newProps },
+    }))
+  }
+
+  componentWillUnmount() {
+    this.props.onUnmount?.(this.props.cellKey)
+  }
+
+  _onLayout = (nativeEvent) => {
+    this.props.onCellLayout?.(nativeEvent, this.props.cellKey, this.props.index)
+  }
+
+  _renderElement(renderItem, ListItemComponent, item, index) {
+    if (renderItem && ListItemComponent) {
+      console.warn(
+        'VirtualizedList: Both ListItemComponent and renderItem props are present. ListItemComponent will take' +
+          ' precedence over renderItem.'
+      )
+    }
+
+    if (ListItemComponent) {
+      /* $FlowFixMe[not-a-component] (>=0.108.0 site=react_native_fb) This
+       * comment suppresses an error found when Flow v0.108 was deployed. To
+       * see the error, delete this comment and run Flow. */
+      /* $FlowFixMe[incompatible-type-arg] (>=0.108.0 site=react_native_fb)
+       * This comment suppresses an error found when Flow v0.108 was deployed.
+       * To see the error, delete this comment and run Flow. */
+      return React.createElement(ListItemComponent, {
+        item,
+        index,
+        separators: this._separators,
+      })
+    }
+
+    if (renderItem) {
+      return renderItem({
+        item,
+        index,
+        separators: this._separators,
+      })
+    }
+
+    invariant(
+      false,
+      'VirtualizedList: Either ListItemComponent or renderItem props are required but none were found.'
+    )
+  }
+
+  render() {
+    const {
+      CellRendererComponent,
+      ItemSeparatorComponent,
+      ListItemComponent,
+      cellKey,
+      horizontal,
+      item,
+      index,
+      inversionStyle,
+      onCellFocusCapture,
+      onCellLayout,
+      renderItem,
+    } = this.props
+    const element = this._renderElement(renderItem, ListItemComponent, item, index)
+
+    // NOTE: that when this is a sticky header, `onLayout` will get automatically extracted and
+    // called explicitly by `ScrollViewStickyHeader`.
+    const itemSeparator = React.isValidElement(ItemSeparatorComponent)
+      ? // $FlowFixMe[incompatible-type]
+        ItemSeparatorComponent
+      : // $FlowFixMe[incompatible-type]
+        ItemSeparatorComponent && (
+          <ItemSeparatorComponent {...this.state.separatorProps} />
+        )
+    const cellStyle = inversionStyle
+      ? horizontal
+        ? [styles.rowReverse, inversionStyle]
+        : [styles.columnReverse, inversionStyle]
+      : horizontal
+        ? [styles.row, inversionStyle]
+        : inversionStyle
+    const result = !CellRendererComponent ? (
+      <View
+        style={cellStyle}
+        onFocusCapture={onCellFocusCapture}
+        {...(onCellLayout && { onLayout: this._onLayout })}
+      >
+        {element}
+        {itemSeparator}
+      </View>
+    ) : (
+      <CellRendererComponent
+        cellKey={cellKey}
+        index={index}
+        item={item}
+        style={cellStyle}
+        onFocusCapture={onCellFocusCapture}
+        {...(onCellLayout && { onLayout: this._onLayout })}
+      >
+        {element}
+        {itemSeparator}
+      </CellRendererComponent>
+    )
+
+    return (
+      <VirtualizedListCellContextProvider cellKey={this.props.cellKey}>
+        {result}
+      </VirtualizedListCellContextProvider>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+  },
+  rowReverse: {
+    flexDirection: 'row-reverse',
+  },
+  columnReverse: {
+    flexDirection: 'column-reverse',
+  },
+})
+
+export default CellRenderer
+export { CellRenderer }