@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
53 lines (52 loc) • 1.92 kB
JavaScript
import { HvIcon } from "../icons.js";
import { HvButton } from "../Button/Button.js";
import { useLabels } from "../hooks/useLabels.js";
import { useClasses } from "./Carousel.styles.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
//#region src/Carousel/CarouselControls.tsx
var DEFAULT_LABELS = {
backwards: "Backwards",
forwards: "Forwards"
};
var 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]
});
};
//#endregion
export { HvCarouselControls };