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