@tamagui/react-native-web-lite/dist/esm/FlatList.js

React Native for Web

import { invariant, Platform } from "@tamagui/react-native-web-internals";
import memoizeOne from "memoize-one";
import React from "react";
import deepDiffer from "./vendor/react-native/deepDiffer";
import VirtualizedList from "./vendor/react-native/VirtualizedList";
import { keyExtractor as defaultKeyExtractor } from "./vendor/react-native/VirtualizeUtils";
import View from "./View";
import { jsx } from "react/jsx-runtime";
function removeClippedSubviewsOrDefault(removeClippedSubviews) {
  return removeClippedSubviews ?? Platform.OS === "android";
}
function numColumnsOrDefault(numColumns) {
  return numColumns ?? 1;
}
function isArrayLike(data) {
  return typeof Object(data).length == "number";
}
class FlatList extends React.PureComponent {
  props;
  _listRef = null;
  _virtualizedListPairs = [];
  constructor(props) {
    super(props), this.props = props, this._checkProps(this.props), this.props.viewabilityConfigCallbackPairs ? this._virtualizedListPairs = this.props.viewabilityConfigCallbackPairs.map(
      (pair) => ({
        viewabilityConfig: pair.viewabilityConfig,
        onViewableItemsChanged: this._createOnViewableItemsChanged(
          pair.onViewableItemsChanged
        )
      })
    ) : this.props.onViewableItemsChanged && this._virtualizedListPairs.push({
      viewabilityConfig: this.props.viewabilityConfig,
      onViewableItemsChanged: this._createOnViewableItemsChanged(
        this.props.onViewableItemsChanged
      )
    });
  }
  componentDidUpdate(prevProps) {
    invariant(
      prevProps.numColumns === this.props.numColumns,
      "Changing numColumns on the fly is not supported. Change the key prop on FlatList when changing the number of columns to force a fresh render of the component."
    ), invariant(
      prevProps.onViewableItemsChanged === this.props.onViewableItemsChanged,
      "Changing onViewableItemsChanged on the fly is not supported"
    ), invariant(
      !deepDiffer(prevProps.viewabilityConfig, this.props.viewabilityConfig),
      "Changing viewabilityConfig on the fly is not supported"
    ), invariant(
      prevProps.viewabilityConfigCallbackPairs === this.props.viewabilityConfigCallbackPairs,
      "Changing viewabilityConfigCallbackPairs on the fly is not supported"
    ), this._checkProps(this.props);
  }
  _captureRef = (ref) => {
    this._listRef = ref;
  };
  _checkProps(props) {
    const {
      getItem,
      getItemCount,
      horizontal,
      columnWrapperStyle,
      onViewableItemsChanged,
      viewabilityConfigCallbackPairs
    } = props, numColumns = numColumnsOrDefault(this.props.numColumns);
    invariant(!getItem && !getItemCount, "FlatList does not support custom data formats."), numColumns > 1 ? invariant(!horizontal, "numColumns does not support horizontal.") : invariant(
      !columnWrapperStyle,
      "columnWrapperStyle not supported for single column lists"
    ), invariant(
      !(onViewableItemsChanged && viewabilityConfigCallbackPairs),
      "FlatList does not support setting both onViewableItemsChanged and viewabilityConfigCallbackPairs."
    );
  }
  _getItem = (data, index) => {
    const numColumns = numColumnsOrDefault(this.props.numColumns);
    if (numColumns > 1) {
      const ret = [];
      for (let kk = 0; kk < numColumns; kk++) {
        const itemIndex = index * numColumns + kk;
        if (itemIndex < data.length) {
          const item = data[itemIndex];
          ret.push(item);
        }
      }
      return ret;
    } else
      return data[index];
  };
  _getItemCount = (data) => {
    if (data != null && isArrayLike(data)) {
      const numColumns = numColumnsOrDefault(this.props.numColumns);
      return numColumns > 1 ? Math.ceil(data.length / numColumns) : data.length;
    } else
      return 0;
  };
  _keyExtractor = (items, index) => {
    const numColumns = numColumnsOrDefault(this.props.numColumns), keyExtractor = this.props.keyExtractor ?? defaultKeyExtractor;
    return numColumns > 1 ? (invariant(
      Array.isArray(items),
      "FlatList: Expected each item to be an array with multiple columns."
    ), items.map((item, kk) => keyExtractor(item, index * numColumns + kk)).join(":")) : keyExtractor(items, index);
  };
  _pushMultiColumnViewable(arr, v) {
    const numColumns = numColumnsOrDefault(this.props.numColumns), keyExtractor = this.props.keyExtractor ?? defaultKeyExtractor;
    v.item.forEach((item, ii) => {
      invariant(v.index != null, "Missing index!");
      const index = v.index * numColumns + ii;
      arr.push({ ...v, item, key: keyExtractor(item, index), index });
    });
  }
  _createOnViewableItemsChanged(onViewableItemsChanged) {
    return (info) => {
      const numColumns = numColumnsOrDefault(this.props.numColumns);
      if (onViewableItemsChanged)
        if (numColumns > 1) {
          const changed = [], viewableItems = [];
          info.viewableItems.forEach(
            (v) => this._pushMultiColumnViewable(viewableItems, v)
          ), info.changed.forEach((v) => this._pushMultiColumnViewable(changed, v)), onViewableItemsChanged({ viewableItems, changed });
        } else
          onViewableItemsChanged(info);
    };
  }
  _renderer = (ListItemComponent, renderItem, columnWrapperStyle, numColumns, extraData) => {
    const cols = numColumnsOrDefault(numColumns), render = (props) => ListItemComponent ? /* @__PURE__ */ jsx(ListItemComponent, { ...props }) : renderItem ? renderItem(props) : null, renderProp = (info) => {
      if (cols > 1) {
        const { item, index } = info;
        return invariant(Array.isArray(item), "Expected array of items with numColumns > 1"), /* @__PURE__ */ jsx(View, { style: [styles.row, columnWrapperStyle], children: item.map((it, kk) => {
          const element = render({
            item: it,
            index: index * cols + kk,
            separators: info.separators
          });
          return element != null ? /* @__PURE__ */ jsx(React.Fragment, { children: element }, kk) : null;
        }) });
      } else
        return render(info);
    };
    return ListItemComponent ? { ListItemComponent: renderProp } : { renderItem: renderProp };
  };
  _memoizedRenderer = memoizeOne(this._renderer);
  render() {
    const {
      numColumns,
      columnWrapperStyle,
      removeClippedSubviews: _removeClippedSubviews,
      strictMode = !1,
      ...restProps
    } = this.props, renderer = strictMode ? this._memoizedRenderer : this._renderer;
    return /* @__PURE__ */ jsx(
      VirtualizedList,
      {
        ...restProps,
        getItem: this._getItem,
        getItemCount: this._getItemCount,
        keyExtractor: this._keyExtractor,
        ref: this._captureRef,
        viewabilityConfigCallbackPairs: this._virtualizedListPairs,
        removeClippedSubviews: removeClippedSubviewsOrDefault(_removeClippedSubviews),
        ...renderer(
          this.props.ListItemComponent,
          this.props.renderItem,
          columnWrapperStyle,
          numColumns,
          this.props.extraData
        )
      }
    );
  }
}
const styles = {
  row: { flexDirection: "row" }
};
var FlatList_default = FlatList;
export {
  FlatList_default as default
};
//# sourceMappingURL=FlatList.js.map