@progress/kendo-react-scrollview
Version:
React ScrollView (React Carousel) displays images or content in a horizontally scrollable collection. KendoReact ScrollView package
187 lines (186 loc) • 6.13 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as e from "react";
import s from "prop-types";
import { validatePackage as X, getLicenseMessage as Z, useRtl as ee, KEYS as w, classNames as D, IconWrap as P, WatermarkOverlay as te } from "@progress/kendo-react-common";
import { packageMetadata as S } from "./package-metadata.mjs";
import { chevronRightIcon as K, chevronLeftIcon as T } from "@progress/kendo-svg-icons";
import { useLocalization as ae } from "@progress/kendo-react-intl";
import { next as A, messages as O, previous as z } from "./messages.mjs";
const M = e.forwardRef((d, W) => {
const B = !X(S, { component: "ScrollView" }), H = Z(S), {
className: b,
style: $,
children: y,
pagerOverlay: f = m.pageOverlay,
pageable: j = m.pageable,
arrows: F = m.arrows,
endless: r = m.endless,
activeView: Y = m.activeView,
automaticViewChange: C = m.automaticViewChange,
automaticViewChangeInterval: E = m.automaticViewChangeInterval
} = d, [a, n] = e.useState(Y || 1), c = e.useRef(null), v = e.useRef(null), h = e.useRef(null), l = e.Children.toArray(y), p = ee(c, d.dir), i = p === "rtl", N = ae(), I = e.useCallback(() => {
c.current && c.current.focus();
}, []), _ = e.useCallback(
() => ({
element: c.current,
focus: I
}),
[I]
);
e.useImperativeHandle(W, _);
const u = e.useCallback(() => {
r ? a > 1 ? n(a - 1) : n(l.length) : a > 1 && n(a - 1);
}, [a, l.length, r]), g = e.useCallback(() => {
r ? a < l.length ? n(a + 1) : n(1) : a < l.length && n(a + 1);
}, [a, l.length, r]), V = e.useCallback(
(t) => {
var R, x;
const o = t.target;
o.classList.contains("k-scrollview-prev") ? (u(), !((r || a > 2) && l.length > 0) && ((R = c.current) == null || R.focus())) : o.classList.contains("k-scrollview-next") && (g(), !((r || a < l.length - 1) && l.length > 0) && ((x = c.current) == null || x.focus()));
},
[a, l.length, r]
);
e.useEffect(() => {
const t = l.length;
v.current && (v.current.style.setProperty("--kendo-scrollview-views", `${t}`), v.current.style.setProperty("--kendo-scrollview-current", `${a}`));
}, [l, a, p]);
function L() {
h.current && clearTimeout(h.current);
}
e.useEffect(() => {
if (C)
return L(), h.current = setTimeout(
() => n((t) => t === l.length ? r ? 1 : t : t + 1),
E
), () => {
L();
};
}, [C, E, l.length, a, r]);
const k = e.useCallback(
(t) => {
switch (t.key) {
case w.left:
t.preventDefault(), i ? g() : u();
break;
case w.right:
t.preventDefault(), i ? u() : g();
break;
case w.space:
t.preventDefault(), V(t);
break;
case w.enter:
t.preventDefault(), V(t);
break;
}
},
[i, g, u]
), q = e.useMemo(
() => D(
"k-scrollview",
{
"k-scrollview-light": f === "light",
"k-scrollview-dark": f === "dark"
},
b
),
[b, f]
), G = e.Children.map(y || null, (t, o) => /* @__PURE__ */ e.createElement("div", { className: "k-scrollview-view", "aria-hidden": a !== o + 1 }, t)), J = e.useCallback(() => {
let t;
return t = a > 1, (r || t) && l.length > 0;
}, [a, l.length, r]), Q = e.useCallback(() => {
let t;
return t = a < l.length, (r || t) && l.length > 0;
}, [a, l.length, r]);
return /* @__PURE__ */ e.createElement(
"div",
{
className: q,
style: $,
ref: c,
tabIndex: 0,
dir: p,
onKeyDown: k
},
/* @__PURE__ */ e.createElement("div", { className: "k-scrollview-wrap k-scrollview-animate", ref: v }, G),
/* @__PURE__ */ e.createElement("div", { className: "k-scrollview-elements" }, F && /* @__PURE__ */ e.createElement(e.Fragment, null, J() && /* @__PURE__ */ e.createElement(
"span",
{
className: "k-scrollview-prev",
"aria-label": N.toLanguageString(A, O[A]),
role: "button",
tabIndex: 0,
onClick: u,
onKeyDown: k
},
/* @__PURE__ */ e.createElement(
P,
{
name: i ? "chevron-right" : "chevron-left",
icon: i ? K : T,
size: "xxxlarge"
}
)
), Q() && /* @__PURE__ */ e.createElement(
"span",
{
className: "k-scrollview-next",
"aria-label": N.toLanguageString(z, O[z]),
role: "button",
tabIndex: 0,
onClick: g,
onKeyDown: k
},
/* @__PURE__ */ e.createElement(
P,
{
name: i ? "chevron-left" : "chevron-right",
icon: i ? T : K,
size: "xxxlarge"
}
)
)), j && /* @__PURE__ */ e.createElement("div", { className: "k-scrollview-nav-wrap" }, /* @__PURE__ */ e.createElement("div", { className: "k-scrollview-nav" }, l.map((t, o) => /* @__PURE__ */ e.createElement(
"span",
{
className: D("k-link", {
"k-primary": a === o + 1
}),
key: o + 1,
onClick: () => n(o + 1)
}
))))),
/* @__PURE__ */ e.createElement("div", { "aria-live": "polite", "aria-atomic": "true", className: "k-sr-only" }),
B && /* @__PURE__ */ e.createElement(te, { message: H })
);
});
M.propTypes = {
activeView: s.number,
arrows: s.bool,
automaticViewChange: s.bool,
automaticViewChangeInterval: s.number,
children: s.any,
className: s.string,
dir: s.string,
endless: s.bool,
pageable: s.bool,
pageOverlay: s.string,
style: s.object
};
const m = {
activeView: 1,
arrows: !0,
automaticViewChange: !0,
automaticViewChangeInterval: 5e3,
endless: !1,
pageable: !0,
pageOverlay: "none"
};
M.displayName = "KendoScrollView";
export {
M as ScrollView
};