@kirz/react-native-toolkit
Version:
Toolkit to speed up React Native development
298 lines (295 loc) • 10.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ListView = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _ListViewItem = require("./ListViewItem");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function groupItems(_ref) {
let {
sections,
numColumns = 1,
sectionHeader,
sectionFooter,
itemSize,
spacing = 0
} = _ref;
let currentOffset = 0;
const flattenSection = (_ref2, sectionIdx) => {
let {
items: sectionItems,
...section
} = _ref2;
return [...(sectionHeader ? [{
type: 'header',
id: `${section.id ?? sectionIdx}_header`
}] : []), ...sectionItems.map((item, itemIndex) => ({
type: 'item',
item,
itemIndex,
id: item.id ?? itemIndex
})), ...[...new Array(sectionItems.length % numColumns === 0 ? 0 : numColumns - sectionItems.length % numColumns).keys()].map(idx => ({
type: 'empty',
id: `${section.id ?? sectionIdx}_empty_${idx}`
})), ...(sectionFooter ? [{
type: 'footer',
id: `${section.id ?? sectionIdx}_footer`
}] : [])];
};
const groupItems = (flatItems, section, sectionIndex) => {
const groupedItems = [];
let currentGroup = [];
let groupIndex = 0;
const wrapGroup = () => {
const size = (() => {
if (typeof itemSize === 'function') {
return Math.max(...currentGroup.filter(x => x.type === 'item').map(x => {
const {
item,
itemIndex
} = x;
return itemSize({
sectionIndex,
section,
itemIndex,
item: item
});
}));
} else {
return itemSize;
}
})();
groupedItems.push({
id: `${section.id ?? sectionIndex}_group_${groupIndex}`,
type: 'group',
section,
sectionIndex,
items: currentGroup,
layout: {
length: size,
offset: currentOffset
}
});
currentGroup = [];
currentOffset += size;
currentOffset += spacing;
groupIndex += 1;
};
for (let i = 0; i < flatItems.length; i++) {
const item = flatItems[i];
if (item.type === 'header') {
const size = typeof sectionHeader.size === 'number' ? sectionHeader.size : sectionHeader.size({
sectionIndex,
section
});
groupedItems.push({
...item,
section,
sectionIndex,
layout: {
length: size,
offset: currentOffset
}
});
currentGroup = [];
currentOffset += size;
currentOffset += spacing;
continue;
}
if (item.type === 'footer') {
const size = typeof sectionFooter.size === 'number' ? sectionFooter.size : sectionFooter.size({
sectionIndex,
section
});
groupedItems.push({
...item,
section,
sectionIndex,
layout: {
length: size,
offset: currentOffset
}
});
currentGroup = [];
currentOffset += size;
currentOffset += spacing;
continue;
}
if (currentGroup.length === numColumns - 1) {
currentGroup.push(item);
wrapGroup();
// eslint-disable-next-line no-continue
continue;
}
currentGroup.push(item);
}
if (currentGroup.length) {
wrapGroup();
}
return groupedItems;
};
const allGroups = [];
sections.forEach((section, sectionIdx) => {
const flatSections = flattenSection(section, sectionIdx);
const groups = groupItems(flatSections, section, sectionIdx);
allGroups.push(...groups);
});
return allGroups;
}
function ListViewInner(_ref3) {
let {
sections: passedSections,
items: passedItems,
itemSize,
spacing = 0,
numColumns = 1,
sectionHeader,
sectionFooter,
flatListProps,
style,
renderItem: renderContent
} = _ref3;
const sections = (0, _react.useMemo)(() => {
if (passedSections) {
return passedSections;
}
return [{
id: '0',
items: passedItems
}];
}, [passedItems, passedSections]);
const items = (0, _react.useMemo)(() => {
return groupItems({
sections,
numColumns,
spacing,
sectionFooter,
sectionHeader,
itemSize
});
}, [sections, numColumns, spacing]);
const getItemLayout = (0, _react.useCallback)((data, index) => {
if (!data) {
return {
index: 0,
length: 0,
offset: 0
};
}
const item = data[index];
return {
length: item.layout.length + (index < data.length - 1 ? spacing : 0),
offset: item.layout.offset,
index
};
}, [spacing]);
const keyExtractor = (0, _react.useCallback)(x => x.id, []);
const renderItem = (0, _react.useCallback)(_ref4 => {
let {
item
} = _ref4;
if (item.type === 'header' || item.type === 'footer') {
return /*#__PURE__*/_react.default.createElement(_ListViewItem.ListViewItem, {
section: item.section,
sectionIndex: item.sectionIndex,
numColumns: 1,
itemSize: item.layout.length,
spacing: spacing,
renderContent: item.type === 'header' ? sectionHeader === null || sectionHeader === void 0 ? void 0 : sectionHeader.renderHeader : sectionFooter === null || sectionFooter === void 0 ? void 0 : sectionFooter.renderFooter
});
}
if (item.type === 'group') {
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: {
flexDirection: 'row'
}
}, item.items.filter(x => x.type === 'item').map(x => {
const nestedItem = x;
return /*#__PURE__*/_react.default.createElement(_ListViewItem.ListViewItem, {
key: nestedItem.id ?? nestedItem.itemIndex,
item: nestedItem.item,
itemIndex: nestedItem.itemIndex,
section: item.section,
sectionIndex: item.sectionIndex,
numColumns: numColumns,
itemSize: item.layout.length,
spacing: spacing,
renderContent: renderContent
});
}));
}
return null;
}, [numColumns, spacing, renderContent]);
const Separator = (0, _react.useMemo)(() => () => {
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: {
height: spacing
}
});
}, [spacing]);
return /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, _extends({}, flatListProps, {
data: items,
numColumns: 1,
renderItem: renderItem,
style: [{
marginLeft: -spacing
}, style],
windowSize: (flatListProps === null || flatListProps === void 0 ? void 0 : flatListProps.windowSize) ?? 10,
contentInsetAdjustmentBehavior: "never",
showsVerticalScrollIndicator: (flatListProps === null || flatListProps === void 0 ? void 0 : flatListProps.showsVerticalScrollIndicator) ?? false,
showsHorizontalScrollIndicator: (flatListProps === null || flatListProps === void 0 ? void 0 : flatListProps.showsHorizontalScrollIndicator) ?? false,
ItemSeparatorComponent: Separator,
getItemLayout: getItemLayout,
keyExtractor: (flatListProps === null || flatListProps === void 0 ? void 0 : flatListProps.keyExtractor) ?? keyExtractor
// @ts-ignore
,
listKey: (flatListProps === null || flatListProps === void 0 ? void 0 : flatListProps.keyExtractor) ?? keyExtractor
}));
}
const Memoized = /*#__PURE__*/(0, _react.memo)(ListViewInner);
function computeSize(_ref5) {
let {
sections: passedSections,
items: passedItems,
...props
} = _ref5;
const sections = passedSections ? passedSections : [{
id: '0',
items: passedItems
}];
const groups = groupItems({
...props,
sections,
...(props.sectionHeaderSize && {
sectionHeader: {
size: props.sectionHeaderSize,
renderHeader: () => null
}
}),
...(props.sectionFooterSize && {
renderFooter: {
size: props.sectionFooterSize,
renderFooter: () => null
}
})
});
const contentSize = groups.length ? groups[groups.length - 1].layout.length + groups[groups.length - 1].layout.offset : 0;
return contentSize + (typeof props.wrapperTotalPaddingSize === 'function' ? props.wrapperTotalPaddingSize({
sections: passedSections,
items: passedItems,
...props
}) : props.wrapperTotalPaddingSize ?? 0) + (typeof props.wrapperTotalBorderSize === 'function' ? props.wrapperTotalBorderSize({
sections: passedSections,
items: passedItems,
...props
}) : props.wrapperTotalBorderSize ?? 0);
}
// @ts-ignore
Memoized.computeSize = computeSize;
const ListView = Memoized;
exports.ListView = ListView;
//# sourceMappingURL=ListView.js.map