@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
116 lines (115 loc) • 5.28 kB
JavaScript
"use client";
require("../../_virtual/_rolldown/runtime.cjs");
const require_get_size = require("../../core/utils/get-size/get-size.cjs");
const require_create_vars_resolver = require("../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs");
const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
const require_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");
const require_factory = require("../../core/factory/factory.cjs");
const require_Box = require("../../core/Box/Box.cjs");
const require_get_row_position_data = require("./get-row-position-data.cjs");
const require_use_dimensions = require("./use-dimensions.cjs");
const require_OverflowList_module = require("./OverflowList.module.cjs");
let react = require("react");
let _mantine_hooks = require("@mantine/hooks");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/OverflowList/OverflowList.tsx
const defaultProps = {
maxRows: 1,
maxVisibleItems: Infinity
};
const varsResolver = require_create_vars_resolver.createVarsResolver((_, { gap }) => ({ root: { "--ol-gap": require_get_size.getSpacing(gap) } }));
const OverflowList = require_factory.genericFactory((_props) => {
const props = require_use_props.useProps("OverflowList", defaultProps, _props);
const { classNames, className, style, styles, unstyled, vars, attributes, data, renderOverflow, renderItem, maxRows, maxVisibleItems, ref, ...others } = props;
const getStyles = require_use_styles.useStyles({
name: "OverflowList",
classes: require_OverflowList_module.default,
props,
className,
style,
classNames,
styles,
unstyled,
attributes,
vars,
varsResolver
});
const [visibleCount, setVisibleCount] = (0, react.useState)(data.length);
const [subtractCount, setSubtractCount] = (0, react.useState)(0);
const [phase, setPhase] = (0, react.useState)("normal");
const containerRef = (0, react.useRef)(null);
const rootRef = (0, _mantine_hooks.useMergedRef)(containerRef, ref);
const finalVisibleCount = visibleCount - subtractCount;
const overflowElement = data.length - finalVisibleCount > 0 && phase !== "measuring" ? renderOverflow?.(data.slice(finalVisibleCount)) : null;
const _overflowRef = (0, react.useRef)(null);
const overflowRef = (0, _mantine_hooks.useMergedRef)(_overflowRef, overflowElement?.ref);
const dimensions = require_use_dimensions.useDimensions(containerRef);
(0, _mantine_hooks.useIsomorphicEffect)(() => {
setPhase("measuring");
setVisibleCount(data.length);
setSubtractCount(0);
}, [data.length, maxRows]);
(0, _mantine_hooks.useIsomorphicEffect)(() => {
if (phase === "measuring") {
countVisibleItems();
setPhase("measuring-overflow-indicator");
}
}, [phase]);
(0, _mantine_hooks.useIsomorphicEffect)(() => {
if (phase === "measuring-overflow-indicator") {
if (!updateOverflowIndicator()) setPhase("normal");
}
}, [phase, subtractCount]);
(0, _mantine_hooks.useIsomorphicEffect)(() => {
if (phase === "normal") {
setPhase("measuring");
setSubtractCount(0);
}
}, [dimensions]);
const countVisibleItems = () => {
const rowData = require_get_row_position_data.getRowPositionsData(containerRef, _overflowRef);
if (!rowData) return;
if (data.length === 1) {
const itemRef = rowData.itemsSizesMap[rowData.rowPositions[0]].elements.values().next().value;
const containerWidth = containerRef.current?.getBoundingClientRect().width ?? 0;
if ((itemRef?.getBoundingClientRect().width ?? 0) > containerWidth) setVisibleCount(0);
else setVisibleCount(1);
return;
}
let fittingCount = rowData.rowPositions.slice(0, maxRows).reduce((acc, position) => {
return acc + rowData.itemsSizesMap[position].elements.size;
}, 0);
fittingCount = Math.min(fittingCount, maxVisibleItems);
setVisibleCount(fittingCount);
};
const updateOverflowIndicator = () => {
if (!_overflowRef.current) return false;
const rowData = require_get_row_position_data.getRowPositionsData(containerRef, _overflowRef);
if (!rowData) return false;
const { rowPositions, itemsSizesMap } = rowData;
const overflowRect = _overflowRef.current.getBoundingClientRect();
if (overflowRect.top + overflowRect.height / 2 > itemsSizesMap[rowPositions[rowPositions.length - 1]].bottom) {
setSubtractCount((c) => c + 1);
return true;
}
return false;
};
const clonedOverflowElement = overflowElement ? (0, react.cloneElement)(overflowElement, { ref: overflowRef }) : null;
let finalItems = data;
if (maxVisibleItems) finalItems = finalItems.slice(0, maxVisibleItems);
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
ref: rootRef,
...getStyles("root"),
...others,
children: [finalItems.map((item, index) => {
if (!(phase === "measuring" || index < finalVisibleCount)) return null;
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: renderItem(item, index) }, index);
}), clonedOverflowElement]
});
});
OverflowList.displayName = "@mantine/core/OverflowList";
OverflowList.classes = require_OverflowList_module.default;
OverflowList.varsResolver = varsResolver;
//#endregion
exports.OverflowList = OverflowList;
//# sourceMappingURL=OverflowList.cjs.map