@progress/kendo-react-progressbars
Version:
React ProgressBars offer a customizable interface for users to track and display the progress of a task. KendoReact ProgressBars package
120 lines (119 loc) • 3.64 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 O, getLicenseMessage as V, useRtl as q, classNames as f, getTabIndex as D, WatermarkOverlay as G } from "@progress/kendo-react-common";
import { calculateRatio as J } from "../common/utils.mjs";
import { packageMetadata as v } from "../package-metadata.mjs";
const y = e.forwardRef(
(t, h) => {
const C = !O(v, { component: "ChunkProgressBar" }), x = V(v), {
chunkCount: N = a.chunkCount,
className: P,
disabled: c = a.disabled,
orientation: E,
min: i = a.min,
max: u = a.max,
reverse: S = a.reverse,
style: R,
tabIndex: w,
emptyStyle: I,
emptyClassName: L,
progressStyle: M,
progressClassName: B
} = t, n = e.useRef(null), T = e.useCallback(() => {
n.current && n.current.focus();
}, []);
e.useImperativeHandle(
h,
() => ({
element: n.current,
focus: T
})
);
const d = t.value || a.value, k = t.value === null, j = q(n, t.dir), o = E === "vertical", z = {
className: f(
"k-progressbar k-chunk-progressbar",
{
"k-progressbar-horizontal": !o,
"k-progressbar-vertical": o,
"k-progressbar-reverse": S,
"k-progressbar-indeterminate": k,
"k-disabled": c
},
P
),
ref: n,
dir: j,
tabIndex: D(w, c),
role: "progressbar",
"aria-label": t.ariaLabel,
"aria-valuemin": i,
"aria-valuemax": u,
"aria-valuenow": k ? void 0 : d,
"aria-disabled": c,
style: R
}, F = ({ count: l }) => {
const p = [], b = 100 / l + "%", W = J(i, u, d), A = Math.floor(W * l), g = Array(l).fill(!1);
for (let r = 0; r < A; r++)
g[r] = !0;
for (let r = 0; r < l; ++r) {
const m = g[r], H = m ? B : L, K = { ...{
width: o ? void 0 : b,
height: o ? b : void 0
}, ...m ? M : I };
p.push(
/* @__PURE__ */ e.createElement(
"li",
{
key: r,
className: f(
"k-progressbar-chunk",
{
"k-first": r === 0,
"k-last": r === l - 1,
"k-selected": m
},
H
),
style: K
}
)
);
}
return /* @__PURE__ */ e.createElement(e.Fragment, null, p);
};
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { ...z }, /* @__PURE__ */ e.createElement("ul", { className: "k-progressbar-chunks k-reset" }, /* @__PURE__ */ e.createElement(F, { count: N }))), C && /* @__PURE__ */ e.createElement(G, { message: x }));
}
);
y.propTypes = {
chunkCount: s.number,
ariaLabel: s.string,
disabled: s.bool,
reverse: s.bool,
max: s.number,
min: s.number,
value: s.number,
tabIndex: s.number,
emptyStyle: s.object,
emptyClassName: s.string,
progressStyle: s.object,
progressClassName: s.string
};
const a = {
chunkCount: 5,
min: 0,
max: 100,
value: 0,
disabled: !1,
reverse: !1
};
y.displayName = "KendoChunkProgressBar";
export {
y as ChunkProgressBar
};