@progress/kendo-react-progressbars/progressbar/ProgressBar.js

React ProgressBars offer a customizable interface for users to track and display the progress of a task. KendoReact ProgressBars package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const F=require("react"),a=require("prop-types"),H=require("@progress/kendo-react-animation"),y=require("@progress/kendo-react-common"),c=require("../common/utils.js"),K=require("./hooks/usePrevious.js"),C=require("../common/constants.js");function G(s){const m=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const r in s)if(r!=="default"){const u=Object.getOwnPropertyDescriptor(s,r);Object.defineProperty(m,r,u.get?u:{enumerable:!0,get:()=>s[r]})}}return m.default=s,Object.freeze(m)}const e=G(F),N=e.forwardRef((s,m)=>{const{animation:r=i.animation,disabled:u=i.disabled,reverse:I=i.reverse,orientation:x,labelVisible:T=i.labelVisible,labelPlacement:v,max:l=i.max,min:o=i.min,tabIndex:A,className:j,style:q,emptyStyle:V,emptyClassName:k,progressStyle:_,progressClassName:P}=s,b=e.useRef(null),d=e.useRef(null),p=e.useRef(null),w=e.useCallback(()=>{b.current&&b.current.focus()},[]);e.useImperativeHandle(m,()=>({element:b.current,progressStatusElement:d.current,progressStatusWrapElement:p.current,focus:w}));const t=s.value||i.value,g=K.usePrevious(t),S=s.value===null,D=y.useRtl(b,s.dir),n=x==="vertical",L=c.truncateNumber(t),h={value:t},E=T?s.label?e.createElement("span",{className:"k-progress-status"},e.createElement(s.label,{...h})):e.createElement("span",{className:"k-progress-status"},L):void 0,M={className:y.classNames("k-progressbar",{"k-progressbar-horizontal":!n,"k-progressbar-vertical":n,"k-progressbar-reverse":I,"k-progressbar-indeterminate":S,"k-disabled":u},j),ref:b,dir:D,tabIndex:y.getTabIndex(A,u),role:"progressbar","aria-label":s.ariaLabel,"aria-valuemin":o,"aria-valuemax":l,"aria-valuenow":S?void 0:t,"aria-disabled":u,style:q},R=y.classNames("k-progress-status-wrap",{"k-progress-start":v==="start","k-progress-center":v==="center","k-progress-end":v==="end"||v===void 0}),O=typeof r!="boolean"&&r!==void 0?r.duration:r?C.DEFAULT_ANIMATION_DURATION:C.NO_ANIMATION,U=e.useCallback(()=>{const f=c.calculatePercentage(o,l,g);c.updateProgress(d,p,f,n)},[n,l,o,g]),B=e.useCallback(f=>{const W=c.calculatePercentage(o,l,g+(t-g)*f);c.updateProgress(d,p,W,n)},[o,l,g,t,n]),z=e.useCallback(()=>{const f=c.calculatePercentage(o,l,t);c.updateProgress(d,p,f,n)},[n,l,o,t]);return H.useAnimation({duration:O,onStart:U,onUpdate:B,onEnd:z},[t,O]),e.createElement("div",{...M},e.createElement("span",{className:R+(k?" "+k:""),style:V},E),e.createElement("div",{className:"k-progressbar-value k-selected",style:_,ref:d},e.createElement("span",{className:R+(P?" "+P:""),ref:p},E)))});N.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 i={animation:!1,min:0,max:100,value:0,disabled:!1,reverse:!1,labelVisible:!0};N.displayName="KendoProgressBar";exports.ProgressBar=N;