@mantine/dates
Version:
Calendars, date and time pickers based on Mantine components
53 lines (52 loc) • 2.21 kB
JavaScript
"use client";
const require_TimePicker_context = require("../TimePicker.context.cjs");
const require_TimeControl = require("./TimeControl.cjs");
let react = require("react");
let react_jsx_runtime = require("react/jsx-runtime");
let _mantine_core = require("@mantine/core");
//#region packages/@mantine/dates/src/components/TimePicker/TimeControlsList/TimeControlsList.tsx
function isElementVisibleInScrollContainer(element, container) {
if (!element || !container) return false;
const elementRect = element.getBoundingClientRect();
const containerRect = container.getBoundingClientRect();
return elementRect.top >= containerRect.top && elementRect.bottom <= containerRect.bottom && elementRect.left >= containerRect.left && elementRect.right <= containerRect.right;
}
function getValuesRange(min, max, step) {
const range = [];
for (let i = min; i <= max; i += step) range.push(i);
return range;
}
function TimeControlsList({ min, max, step, value, onSelect, reversed }) {
const ctx = require_TimePicker_context.useTimePickerContext();
const ref = (0, react.useRef)(null);
const range = getValuesRange(min, max, step);
const controls = (reversed ? range.reverse() : range).map((control) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TimeControl.TimeControl, {
value: control,
active: value === control,
onSelect
}, control));
(0, react.useEffect)(() => {
if (value !== null) {
const scrollToValue = () => {
const target = ref.current?.querySelector(`[data-value="${value}"]`);
if (!isElementVisibleInScrollContainer(target, ref.current)) target?.scrollIntoView({ block: "nearest" });
};
requestAnimationFrame(scrollToValue);
}
}, [value]);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.ScrollArea, {
h: ctx.maxDropdownContentHeight,
type: "never",
viewportRef: ref,
...ctx.getStyles("scrollarea"),
...ctx.scrollAreaProps,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
...ctx.getStyles("controlsList"),
children: controls
})
});
}
TimeControlsList.displayName = "@mantine/dates/TimeControlsList";
//#endregion
exports.TimeControlsList = TimeControlsList;
//# sourceMappingURL=TimeControlsList.cjs.map