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