@tamagui/react-native-web-lite
Version:
React Native for Web
241 lines • 9.81 kB
JavaScript
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all) __defProp(target, name, {
get: all[name],
enumerable: true
});
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
get: () => from[key],
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
});
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
value: mod,
enumerable: true
}) : target, mod));
var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
value: true
}), mod);
var FlatList_exports = {};
__export(FlatList_exports, {
FlatList: () => FlatList,
default: () => FlatList_default
});
module.exports = __toCommonJS(FlatList_exports);
var import_react_native_web_internals = require("@tamagui/react-native-web-internals");
var import_memoize_one = __toESM(require("memoize-one"), 1);
var import_react = __toESM(require("react"), 1);
var import_deepDiffer = require("./vendor/react-native/deepDiffer/index.cjs");
var import_VirtualizedList = require("./vendor/react-native/VirtualizedList/index.cjs");
var import_VirtualizeUtils = require("./vendor/react-native/VirtualizeUtils/index.cjs");
var import_View = require("./View/index.cjs");
var import_jsx_runtime = require("react/jsx-runtime");
function removeClippedSubviewsOrDefault(removeClippedSubviews) {
return removeClippedSubviews ?? import_react_native_web_internals.Platform.OS === "android";
}
function numColumnsOrDefault(numColumns) {
return numColumns ?? 1;
}
function isArrayLike(data) {
return typeof Object(data).length === "number";
}
class FlatList extends import_react.default.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) {
(0, import_react_native_web_internals.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.");
(0, import_react_native_web_internals.invariant)(prevProps.onViewableItemsChanged === this.props.onViewableItemsChanged, "Changing onViewableItemsChanged on the fly is not supported");
(0, import_react_native_web_internals.invariant)(!(0, import_deepDiffer.deepDiffer)(prevProps.viewabilityConfig, this.props.viewabilityConfig), "Changing viewabilityConfig on the fly is not supported");
(0, import_react_native_web_internals.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);
(0, import_react_native_web_internals.invariant)(!getItem && !getItemCount, "FlatList does not support custom data formats.");
if (numColumns > 1) {
(0, import_react_native_web_internals.invariant)(!horizontal, "numColumns does not support horizontal.");
} else {
(0, import_react_native_web_internals.invariant)(!columnWrapperStyle, "columnWrapperStyle not supported for single column lists");
}
(0, import_react_native_web_internals.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 ?? import_VirtualizeUtils.keyExtractor;
if (numColumns > 1) {
(0, import_react_native_web_internals.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 ?? import_VirtualizeUtils.keyExtractor;
v.item.forEach((item, ii) => {
(0, import_react_native_web_internals.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__ */(0, import_jsx_runtime.jsx)(ListItemComponent, {
...props
});
} else if (renderItem) {
return renderItem(props);
} else {
return null;
}
};
const renderProp = info => {
if (cols > 1) {
const {
item,
index
} = info;
(0, import_react_native_web_internals.invariant)(Array.isArray(item), "Expected array of items with numColumns > 1");
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_View.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__ */(0, import_jsx_runtime.jsx)(import_react.default.Fragment, {
children: element
}, kk) : null;
})
});
} else {
return render(info);
}
};
return ListItemComponent ? {
ListItemComponent: renderProp
} : {
renderItem: renderProp
};
};
_memoizedRenderer = (0, import_memoize_one.default)(this._renderer);
render() {
const {
numColumns,
columnWrapperStyle,
removeClippedSubviews: _removeClippedSubviews,
strictMode = false,
...restProps
} = this.props;
const renderer = strictMode ? this._memoizedRenderer : this._renderer;
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_VirtualizedList.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;