@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
132 lines (131 loc) • 4.03 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 a from "prop-types";
import { useAnimation as H } from "@progress/kendo-react-animation";
import { useRtl as K, classNames as I, getTabIndex as q } from "@progress/kendo-react-common";
import { truncateNumber as G, updateProgress as f, calculatePercentage as v } from "../common/utils.mjs";
import { usePrevious as J } from "./hooks/usePrevious.mjs";
import { DEFAULT_ANIMATION_DURATION as Q, NO_ANIMATION as X } from "../common/constants.mjs";
const R = e.forwardRef((t, S) => {
const {
animation: p = o.animation,
disabled: g = o.disabled,
reverse: C = o.reverse,
orientation: A,
labelVisible: T = o.labelVisible,
labelPlacement: d,
max: l = o.max,
min: n = o.min,
tabIndex: V,
className: L,
style: O,
emptyStyle: h,
emptyClassName: N,
progressStyle: w,
progressClassName: k
} = t, i = e.useRef(null), c = e.useRef(null), m = e.useRef(null), U = e.useCallback(() => {
i.current && i.current.focus();
}, []);
e.useImperativeHandle(
S,
() => ({
element: i.current,
progressStatusElement: c.current,
progressStatusWrapElement: m.current,
focus: U
})
);
const s = t.value || o.value, u = J(s), y = t.value === null, D = K(i, t.dir), r = A === "vertical", _ = G(s), j = {
value: s
}, E = T ? t.label ? /* @__PURE__ */ e.createElement("span", { className: "k-progress-status" }, /* @__PURE__ */ e.createElement(t.label, { ...j })) : /* @__PURE__ */ e.createElement("span", { className: "k-progress-status" }, _) : void 0, B = {
className: I(
"k-progressbar",
{
"k-progressbar-horizontal": !r,
"k-progressbar-vertical": r,
"k-progressbar-reverse": C,
"k-progressbar-indeterminate": y,
"k-disabled": g
},
L
),
ref: i,
dir: D,
tabIndex: q(V, g),
role: "progressbar",
"aria-label": t.ariaLabel,
"aria-valuemin": n,
"aria-valuemax": l,
"aria-valuenow": y ? void 0 : s,
"aria-disabled": g,
style: O
}, P = I("k-progress-status-wrap", {
"k-progress-start": d === "start",
"k-progress-center": d === "center",
"k-progress-end": d === "end" || d === void 0
}), x = typeof p != "boolean" && p !== void 0 ? p.duration : p ? Q : X, M = e.useCallback(() => {
const b = v(n, l, u);
f(c, m, b, r);
}, [r, l, n, u]), W = e.useCallback(
(b) => {
const F = v(n, l, u + (s - u) * b);
f(c, m, F, r);
},
[n, l, u, s, r]
), z = e.useCallback(() => {
const b = v(n, l, s);
f(c, m, b, r);
}, [r, l, n, s]);
return H(
{
duration: x,
onStart: M,
onUpdate: W,
onEnd: z
},
[s, x]
), /* @__PURE__ */ e.createElement("div", { ...B }, /* @__PURE__ */ e.createElement("span", { className: P + (N ? " " + N : ""), style: h }, E), /* @__PURE__ */ e.createElement("div", { className: "k-progressbar-value k-selected", style: w, ref: c }, /* @__PURE__ */ e.createElement(
"span",
{
className: P + (k ? " " + k : ""),
ref: m
},
E
)));
});
R.propTypes = {
animation: a.any,
ariaLabel: a.string,
disabled: a.bool,
reverse: a.bool,
label: a.any,
labelVisible: a.bool,
labelPlacement: a.oneOf(["start", "center", "end"]),
max: a.number,
min: a.number,
value: a.number,
tabIndex: a.number,
emptyStyle: a.object,
emptyClassName: a.string,
progressStyle: a.object,
progressClassName: a.string
};
const o = {
animation: !1,
min: 0,
max: 100,
value: 0,
disabled: !1,
reverse: !1,
labelVisible: !0
};
R.displayName = "KendoProgressBar";
export {
R as ProgressBar
};