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

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/index.mjs";
import { VirtualizedList } from "./vendor/react-native/VirtualizedList/index.mjs";
import { keyExtractor as defaultKeyExtractor } from "./vendor/react-native/VirtualizeUtils/index.mjs";
import { View } from "./View/index.mjs";
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);
    if (this.props.viewabilityConfigCallbackPairs) {
      this._virtualizedListPairs = this.props.viewabilityConfigCallbackPairs.map(pair => ({
        viewabilityConfig: pair.viewabilityConfig,
        onViewableItemsChanged: this._createOnViewableItemsChanged(pair.onViewableItemsChanged)
      }));
    } else if (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;
    const numColumns = numColumnsOrDefault(this.props.numColumns);
    invariant(!getItem && !getItemCount, "FlatList does not support custom data formats.");
    if (numColumns > 1) {
      invariant(!horizontal, "numColumns does not support horizontal.");
    } else {
      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);
    const keyExtractor = this.props.keyExtractor ?? defaultKeyExtractor;
    if (numColumns > 1) {
      invariant(Array.isArray(items), "FlatList: Expected each item to be an array with multiple columns.");
      return items.map((item, kk) => keyExtractor(item, index * numColumns + kk)).join(":");
    }
    return keyExtractor(items, index);
  };
  _pushMultiColumnViewable(arr, v) {
    const numColumns = numColumnsOrDefault(this.props.numColumns);
    const 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 = [];
          const 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);
    const render = props => {
      if (ListItemComponent) {
        return /* @__PURE__ */jsx(ListItemComponent, {
          ...props
        });
      } else if (renderItem) {
        return renderItem(props);
      } else {
        return null;
      }
    };
    const renderProp = info => {
      if (cols > 1) {
        const {
          item,
          index
        } = info;
        invariant(Array.isArray(item), "Expected array of items with numColumns > 1");
        return /* @__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 = false,
      ...restProps
    } = this.props;
    const 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, FlatList_default as default };
//# sourceMappingURL=FlatList.mjs.map