@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
67 lines (66 loc) • 2.07 kB
JavaScript
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { useLabels } from "../hooks/useLabels.js";
import { HvIcon } from "../icons.js";
import { useClasses } from "./Carousel.styles.js";
import { HvButton } from "../Button/Button.js";
const DEFAULT_LABELS = {
backwards: "Backwards",
forwards: "Forwards"
};
const HvCarouselControls = (props) => {
const {
classes: classesProp,
className,
showDots,
page,
pages,
canPrevious,
canNext,
actions,
labels: labelsProps,
onPreviousClick,
onNextClick
} = useDefaultProps("HvCarouselControls", props);
const { classes, cx } = useClasses(classesProp, false);
const labels = useLabels(DEFAULT_LABELS, labelsProps);
const selectedIndex = page || 0;
const numSlides = pages;
return /* @__PURE__ */ jsxs("div", { className: cx(classes.controls, className), children: [
showDots ? /* @__PURE__ */ jsx("div", { className: classes.dots, children: Array.from(Array(numSlides)).map((el, index) => /* @__PURE__ */ jsx(
"span",
{
className: cx(classes.dot, {
[classes.dotSelected]: index === selectedIndex
})
},
`circle-${index}`
)) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
HvButton,
{
icon: true,
disabled: !canPrevious,
"aria-label": labels.backwards,
onClick: onPreviousClick,
children: /* @__PURE__ */ jsx(HvIcon, { name: "Backwards", size: "xs" })
}
),
/* @__PURE__ */ jsx("div", { className: classes.pageCounter, children: `${selectedIndex + 1} / ${numSlides}` }),
/* @__PURE__ */ jsx(
HvButton,
{
icon: true,
disabled: !canNext,
"aria-label": labels.forwards,
onClick: onNextClick,
children: /* @__PURE__ */ jsx(HvIcon, { name: "Forwards", size: "xs" })
}
)
] }),
actions
] });
};
export {
HvCarouselControls
};