@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
60 lines (59 loc) • 2.75 kB
JavaScript
import { isKey } from "../utils/keyboardUtils.js";
import { useScrollTo } from "../hooks/useScrollTo.js";
import { HvHorizontalScrollListItem } from "./HorizontalScrollListItem/HorizontalScrollListItem.js";
import { useClasses } from "./ScrollToHorizontal.styles.js";
import { theme } from "@hitachivantara/uikit-styles";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { jsx } from "react/jsx-runtime";
import { useTheme as useTheme$1 } from "@mui/material/styles";
import useMediaQuery from "@mui/material/useMediaQuery";
//#region src/ScrollToHorizontal/ScrollToHorizontal.tsx
/**
* The horizontal scroll to element can be used to quickly navigate in a page.
*/
var HvScrollToHorizontal = (props) => {
const { id, defaultSelectedIndex = 0, scrollElementId, navigationMode = "push", relativeLinks = false, onChange, onClick, onEnter, className, classes: classesProp, options, offset = 0, position = "relative", tooltipPosition = "top", ...others } = useDefaultProps("HvScrollToHorizontal", props);
const { classes, css, cx } = useClasses(classesProp);
const muiTheme = useTheme$1();
const downSm = useMediaQuery(muiTheme.breakpoints.down("sm"));
const upMd = useMediaQuery(muiTheme.breakpoints.up("md"));
const [selectedIndex, setScrollTo, elements] = useScrollTo(defaultSelectedIndex, scrollElementId, navigationMode, relativeLinks, offset, options, onChange);
const tabs = elements.map((option, index) => /* @__PURE__ */ jsx(HvHorizontalScrollListItem, {
onClick: (event) => {
event.preventDefault();
setScrollTo(event, option.value, index, () => onChange?.(event, index));
onClick?.(event, index);
},
onKeyDown: (event) => {
if (isKey(event, "Enter") !== true) return;
event.preventDefault();
setScrollTo(event, option.value, index, () => onChange?.(event, index));
onEnter?.(event, index);
},
href: navigationMode !== "none" ? option.href : void 0,
tooltipPlacement: tooltipPosition,
selected: selectedIndex === index,
label: option.label,
classes: {
bullet: classes.item,
selected: classes.itemSelected
}
}, option.key || option.label));
return /* @__PURE__ */ jsx("ol", {
className: cx(css({
width: position === "fixed" && (upMd || downSm) ? `calc(100% - 2*${theme.spacing(upMd ? 4 : 2)})` : "100%",
marginTop: 0,
marginBottom: 0,
marginRight: position === "fixed" && (upMd || downSm) ? theme.spacing(upMd ? 4 : 2) : 0,
marginLeft: position === "fixed" && (upMd || downSm) ? theme.spacing(upMd ? 4 : 2) : 0
}), classes.root, {
[classes.positionSticky]: position === "sticky",
[classes.positionFixed]: position === "fixed"
}, className),
id,
...others,
children: tabs
});
};
//#endregion
export { HvScrollToHorizontal };