@progress/kendo-react-progressbars 13.3.0 → 13.4.0-develop.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/chunkprogressbar/ChunkProgressBar.d.ts +23 -0
- package/chunkprogressbar/ChunkProgressBar.mjs +1 -1
- package/chunkprogressbar/interfaces/ChunkProgressBarHandle.d.ts +20 -0
- package/chunkprogressbar/interfaces/ChunkProgressBarProps.d.ts +25 -0
- package/common/BaseProps.d.ts +177 -0
- package/common/constants.d.ts +23 -0
- package/common/utils.d.ts +24 -0
- package/dist/cdn/js/kendo-react-progressbars.js +1 -1
- package/index.d.mts +7 -329
- package/index.d.ts +7 -329
- package/package-metadata.d.ts +12 -0
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +10 -16
- package/package.json +4 -4
- package/progressbar/ProgressBar.d.ts +23 -0
- package/progressbar/ProgressBar.mjs +1 -1
- package/progressbar/hooks/usePrevious.d.ts +9 -0
- package/progressbar/interfaces/LabelProps.d.ts +16 -0
- package/progressbar/interfaces/ProgressBarAnimation.d.ts +18 -0
- package/progressbar/interfaces/ProgressBarHandle.d.ts +28 -0
- package/progressbar/interfaces/ProgressBarProps.d.ts +60 -0
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
import { ChunkProgressBarHandle } from './interfaces/ChunkProgressBarHandle.js';
|
|
9
|
+
import { ChunkProgressBarProps } from './interfaces/ChunkProgressBarProps.js';
|
|
10
|
+
import * as React from 'react';
|
|
11
|
+
/**
|
|
12
|
+
* Represents the [KendoReact ChunkProgressBar component](https://www.telerik.com/kendo-react-ui/components/progressbars/chunkprogressbar).
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* ```jsx
|
|
16
|
+
* const App = () => {
|
|
17
|
+
* return (
|
|
18
|
+
* <ChunkProgressBar value={40}/>
|
|
19
|
+
* );
|
|
20
|
+
* };
|
|
21
|
+
* ```
|
|
22
|
+
*/
|
|
23
|
+
export declare const ChunkProgressBar: React.ForwardRefExoticComponent<ChunkProgressBarProps & React.RefAttributes<ChunkProgressBarHandle | null>>;
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import * as e from "react";
|
|
9
9
|
import s from "prop-types";
|
|
10
|
-
import { validatePackage as O, getLicenseMessage as V, useRtl as q,
|
|
10
|
+
import { validatePackage as O, getLicenseMessage as V, useRtl as q, getTabIndex as D, classNames as f, WatermarkOverlay as G } from "@progress/kendo-react-common";
|
|
11
11
|
import { calculateRatio as J } from "../common/utils.mjs";
|
|
12
12
|
import { packageMetadata as v } from "../package-metadata.mjs";
|
|
13
13
|
const y = e.forwardRef(
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* The ChunkProgressBar ref.
|
|
10
|
+
*/
|
|
11
|
+
export interface ChunkProgressBarHandle {
|
|
12
|
+
/**
|
|
13
|
+
* The ChunkProgressBar element.
|
|
14
|
+
*/
|
|
15
|
+
element: HTMLDivElement | null;
|
|
16
|
+
/**
|
|
17
|
+
* Focus the ChunkProgressBar.
|
|
18
|
+
*/
|
|
19
|
+
focus: () => void;
|
|
20
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
import { BaseProps } from '../../common/BaseProps.js';
|
|
9
|
+
/**
|
|
10
|
+
* Represents the props of the [KendoReact ChunkProgressBar component](https://www.telerik.com/kendo-react-ui/components/progressbars/chunkprogressbar).
|
|
11
|
+
*/
|
|
12
|
+
export interface ChunkProgressBarProps extends BaseProps {
|
|
13
|
+
/**
|
|
14
|
+
* Defines the number of chunks into which the ChunkProgressBar is divided. Defaults to `5`.
|
|
15
|
+
* Each chunk visually represents a portion of the progress bar.
|
|
16
|
+
*
|
|
17
|
+
* @default 5
|
|
18
|
+
*
|
|
19
|
+
* @example
|
|
20
|
+
* ```jsx
|
|
21
|
+
* <ChunkProgressBar chunkCount={10} />
|
|
22
|
+
* ```
|
|
23
|
+
*/
|
|
24
|
+
chunkCount?: number;
|
|
25
|
+
}
|
|
@@ -0,0 +1,177 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* @hidden
|
|
10
|
+
*/
|
|
11
|
+
export interface BaseProps {
|
|
12
|
+
/**
|
|
13
|
+
* Specifies the type of progress bar. Can be either `linear` or `circular`.
|
|
14
|
+
*
|
|
15
|
+
* Example:
|
|
16
|
+
* ```jsx
|
|
17
|
+
* <ProgressBar type="linear" />
|
|
18
|
+
* ```
|
|
19
|
+
*
|
|
20
|
+
* @hidden
|
|
21
|
+
*/
|
|
22
|
+
type?: 'linear' | 'circular';
|
|
23
|
+
/**
|
|
24
|
+
* Sets the current value of the progress bar. Must be between the `min` and `max` values. Defaults to `0`.
|
|
25
|
+
* Set to `null` to enable the indeterminate state of the progress bar.
|
|
26
|
+
* See examples ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar)) and ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/chunkprogressbar)).
|
|
27
|
+
*
|
|
28
|
+
* @default 0
|
|
29
|
+
*
|
|
30
|
+
* @example
|
|
31
|
+
* ```jsx
|
|
32
|
+
* <ProgressBar value={50} />
|
|
33
|
+
* ```
|
|
34
|
+
*/
|
|
35
|
+
value?: number | null;
|
|
36
|
+
/**
|
|
37
|
+
* Specifies the minimum value of the progress bar. Defaults to `0`.
|
|
38
|
+
*
|
|
39
|
+
* @default 0
|
|
40
|
+
*
|
|
41
|
+
* @example
|
|
42
|
+
* ```jsx
|
|
43
|
+
* <ProgressBar min={0} />
|
|
44
|
+
* ```
|
|
45
|
+
*/
|
|
46
|
+
min?: number;
|
|
47
|
+
/**
|
|
48
|
+
* Specifies the maximum value of the progress bar. Defaults to `100`.
|
|
49
|
+
*
|
|
50
|
+
* @default 100
|
|
51
|
+
*
|
|
52
|
+
* @example
|
|
53
|
+
* ```jsx
|
|
54
|
+
* <ProgressBar max={100} />
|
|
55
|
+
* ```
|
|
56
|
+
*/
|
|
57
|
+
max?: number;
|
|
58
|
+
/**
|
|
59
|
+
* Sets the `dir` HTML attribute to switch between LTR and RTL directions.
|
|
60
|
+
*
|
|
61
|
+
* @example
|
|
62
|
+
* ```jsx
|
|
63
|
+
* <ProgressBar dir="rtl" />
|
|
64
|
+
* ```
|
|
65
|
+
*/
|
|
66
|
+
dir?: string;
|
|
67
|
+
/**
|
|
68
|
+
* Provides an accessible label for the component.
|
|
69
|
+
*
|
|
70
|
+
* @example
|
|
71
|
+
* ```jsx
|
|
72
|
+
* <ProgressBar ariaLabel="Loading progress" />
|
|
73
|
+
* ```
|
|
74
|
+
*/
|
|
75
|
+
ariaLabel?: string;
|
|
76
|
+
/**
|
|
77
|
+
* Determines whether the progress bar is in a disabled state.
|
|
78
|
+
* See examples ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar/disabled)) and ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/chunkprogressbar/disabled)).
|
|
79
|
+
*
|
|
80
|
+
* @example
|
|
81
|
+
* ```jsx
|
|
82
|
+
* <ProgressBar disabled={true} />
|
|
83
|
+
* ```
|
|
84
|
+
*/
|
|
85
|
+
disabled?: boolean;
|
|
86
|
+
/**
|
|
87
|
+
* Specifies the orientation of the progress bar. Can be `horizontal` or `vertical`. Defaults to `horizontal`.
|
|
88
|
+
* See examples ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar/orientation)) and ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/chunkprogressbar/orientation)).
|
|
89
|
+
*
|
|
90
|
+
* @default "horizontal"
|
|
91
|
+
*
|
|
92
|
+
* @example
|
|
93
|
+
* ```jsx
|
|
94
|
+
* <ProgressBar orientation="vertical" />
|
|
95
|
+
* ```
|
|
96
|
+
*/
|
|
97
|
+
orientation?: 'horizontal' | 'vertical';
|
|
98
|
+
/**
|
|
99
|
+
* If set to `true`, reverses the direction of the progress bar. Defaults to `false`.
|
|
100
|
+
* See examples ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar/direction)) and ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/chunkprogressbar/direction)).
|
|
101
|
+
*
|
|
102
|
+
* @default false
|
|
103
|
+
*
|
|
104
|
+
* @example
|
|
105
|
+
* ```jsx
|
|
106
|
+
* <ProgressBar reverse={true} />
|
|
107
|
+
* ```
|
|
108
|
+
*/
|
|
109
|
+
reverse?: boolean;
|
|
110
|
+
/**
|
|
111
|
+
* Adds a list of CSS classes to the progress bar element.
|
|
112
|
+
*
|
|
113
|
+
* @example
|
|
114
|
+
* ```jsx
|
|
115
|
+
* <ProgressBar className="custom-progress-bar" />
|
|
116
|
+
* ```
|
|
117
|
+
*/
|
|
118
|
+
className?: string;
|
|
119
|
+
/**
|
|
120
|
+
* Applies additional CSS styles to the progress bar.
|
|
121
|
+
*
|
|
122
|
+
* @example
|
|
123
|
+
* ```jsx
|
|
124
|
+
* <ProgressBar style={{ backgroundColor: 'red' }} />
|
|
125
|
+
* ```
|
|
126
|
+
*/
|
|
127
|
+
style?: React.CSSProperties;
|
|
128
|
+
/**
|
|
129
|
+
* Specifies the styles applied to the inner element representing the empty portion of the progress bar.
|
|
130
|
+
* See examples ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar/appearance)) and ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/chunkprogressbar/appearance)).
|
|
131
|
+
*
|
|
132
|
+
* @example
|
|
133
|
+
* ```jsx
|
|
134
|
+
* <ProgressBar emptyStyle={{ backgroundColor: 'lightgray' }} />
|
|
135
|
+
* ```
|
|
136
|
+
*/
|
|
137
|
+
emptyStyle?: React.CSSProperties;
|
|
138
|
+
/**
|
|
139
|
+
* Adds additional CSS classes to the inner element representing the empty portion of the progress bar.
|
|
140
|
+
* See examples ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar/appearance)) and ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/chunkprogressbar/appearance)).
|
|
141
|
+
*
|
|
142
|
+
* @example
|
|
143
|
+
* ```jsx
|
|
144
|
+
* <ProgressBar emptyClassName="custom-empty-class" />
|
|
145
|
+
* ```
|
|
146
|
+
*/
|
|
147
|
+
emptyClassName?: string;
|
|
148
|
+
/**
|
|
149
|
+
* Specifies the styles applied to the inner element representing the full portion of the progress bar.
|
|
150
|
+
* See examples ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar/appearance)) and ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/chunkprogressbar/appearance)).
|
|
151
|
+
*
|
|
152
|
+
* @example
|
|
153
|
+
* ```jsx
|
|
154
|
+
* <ProgressBar progressStyle={{ backgroundColor: 'green' }} />
|
|
155
|
+
* ```
|
|
156
|
+
*/
|
|
157
|
+
progressStyle?: React.CSSProperties;
|
|
158
|
+
/**
|
|
159
|
+
* Adds additional CSS classes to the inner element representing the full portion of the progress bar.
|
|
160
|
+
* See examples ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar/appearance)) and ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/chunkprogressbar/appearance)).
|
|
161
|
+
*
|
|
162
|
+
* @example
|
|
163
|
+
* ```jsx
|
|
164
|
+
* <ProgressBar progressClassName="custom-progress-class" />
|
|
165
|
+
* ```
|
|
166
|
+
*/
|
|
167
|
+
progressClassName?: string;
|
|
168
|
+
/**
|
|
169
|
+
* Sets the `tabIndex` attribute of the progress bar for keyboard navigation.
|
|
170
|
+
*
|
|
171
|
+
* @example
|
|
172
|
+
* ```jsx
|
|
173
|
+
* <ProgressBar tabIndex={0} />
|
|
174
|
+
* ```
|
|
175
|
+
*/
|
|
176
|
+
tabIndex?: number;
|
|
177
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* @hidden
|
|
10
|
+
*/
|
|
11
|
+
export declare const MIN_RATIO = 0.00001;
|
|
12
|
+
/**
|
|
13
|
+
* @hidden
|
|
14
|
+
*/
|
|
15
|
+
export declare const LABEL_DECIMALS = 3;
|
|
16
|
+
/**
|
|
17
|
+
* @hidden
|
|
18
|
+
*/
|
|
19
|
+
export declare const DEFAULT_ANIMATION_DURATION = 400;
|
|
20
|
+
/**
|
|
21
|
+
* @hidden
|
|
22
|
+
*/
|
|
23
|
+
export declare const NO_ANIMATION = 0;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
import * as React from 'react';
|
|
9
|
+
/**
|
|
10
|
+
* @hidden
|
|
11
|
+
*/
|
|
12
|
+
export declare const truncateNumber: (value: number) => string;
|
|
13
|
+
/**
|
|
14
|
+
* @hidden
|
|
15
|
+
*/
|
|
16
|
+
export declare const calculatePercentage: (min: number, max: number, value: number) => number;
|
|
17
|
+
/**
|
|
18
|
+
* @hidden
|
|
19
|
+
*/
|
|
20
|
+
export declare const updateProgress: (progressRef: React.RefObject<HTMLDivElement | null>, progressWrapRef: React.RefObject<HTMLSpanElement | null>, percentage: number, isVertical: boolean) => void;
|
|
21
|
+
/**
|
|
22
|
+
* @hidden
|
|
23
|
+
*/
|
|
24
|
+
export declare const calculateRatio: (min: number, max: number, value: number) => number;
|
|
@@ -12,4 +12,4 @@
|
|
|
12
12
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
13
13
|
*-------------------------------------------------------------------------------------------
|
|
14
14
|
*/
|
|
15
|
-
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-react-animation")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-react-animation"],r):r((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactProgressbars={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoReactAnimation)}(this,
|
|
15
|
+
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-react-animation")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-react-animation"],r):r((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactProgressbars={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoReactAnimation)}(this,function(e,r,a,s,t){"use strict";function n(e){var r=Object.create(null);return e&&Object.keys(e).forEach(function(a){if("default"!==a){var s=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(r,a,s.get?s:{enumerable:!0,get:function(){return e[a]}})}}),r.default=e,Object.freeze(r)}var l=n(r);const o=(e,r,a)=>{const s=Math.abs((r-e)/100);return Math.abs((a-e)/s)},i=(e,r,a,s)=>{const t=Math.max(a,.01),n=100/t*100;e.current&&r.current&&(e.current.style.width=s?"100%":`${t}%`,r.current.style.width=s?"100%":`${n}%`,e.current.style.height=s?`${t}%`:"100%",r.current.style.height=s?`${n}%`:"100%")},c=(e,r,a)=>Math.max((a-e)/(r-e),1e-5),u=Object.freeze({name:"@progress/kendo-react-progressbars",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"13.4.0-develop.2",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"}),m=l.forwardRef((e,r)=>{const a=!s.validatePackage(u,{component:"ChunkProgressBar"}),t=s.getLicenseMessage(u),{chunkCount:n=d.chunkCount,className:o,disabled:i=d.disabled,orientation:m,min:b=d.min,max:p=d.max,reverse:g=d.reverse,style:k,tabIndex:v,emptyStyle:f,emptyClassName:y,progressStyle:h,progressClassName:N}=e,C=l.useRef(null),E=l.useCallback(()=>{C.current&&C.current.focus()},[]);l.useImperativeHandle(r,()=>({element:C.current,focus:E}));const x=e.value||d.value,R=null===e.value,I=s.useRtl(C,e.dir),S="vertical"===m,w={className:s.classNames("k-progressbar k-chunk-progressbar",{"k-progressbar-horizontal":!S,"k-progressbar-vertical":S,"k-progressbar-reverse":g,"k-progressbar-indeterminate":R,"k-disabled":i},o),ref:C,dir:I,tabIndex:s.getTabIndex(v,i),role:"progressbar","aria-label":e.ariaLabel,"aria-valuemin":b,"aria-valuemax":p,"aria-valuenow":R?void 0:x,"aria-disabled":i,style:k},O=({count:e})=>{const r=[],a=100/e+"%",t=c(b,p,x),n=Math.floor(t*e),o=Array(e).fill(!1);for(let e=0;e<n;e++)o[e]=!0;for(let t=0;t<e;++t){const n=o[t],i=n?N:y,c={width:S?void 0:a,height:S?a:void 0,...n?h:f};r.push(l.createElement("li",{key:t,className:s.classNames("k-progressbar-chunk",{"k-first":0===t,"k-last":t===e-1,"k-selected":n},i),style:c}))}return l.createElement(l.Fragment,null,r)};return l.createElement(l.Fragment,null,l.createElement("div",{...w},l.createElement("ul",{className:"k-progressbar-chunks k-reset"},l.createElement(O,{count:n}))),a&&l.createElement(s.WatermarkOverlay,{message:t}))});m.propTypes={chunkCount:a.number,ariaLabel:a.string,disabled:a.bool,reverse:a.bool,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 d={chunkCount:5,min:0,max:100,value:0,disabled:!1,reverse:!1};m.displayName="KendoChunkProgressBar";const b=l.forwardRef((e,r)=>{const{animation:a=p.animation,disabled:n=p.disabled,reverse:c=p.reverse,orientation:u,labelVisible:m=p.labelVisible,labelPlacement:d,max:b=p.max,min:g=p.min,tabIndex:k,className:v,style:f,emptyStyle:y,emptyClassName:h,progressStyle:N,progressClassName:C}=e,E=l.useRef(null),x=l.useRef(null),R=l.useRef(null),I=l.useCallback(()=>{E.current&&E.current.focus()},[]);l.useImperativeHandle(r,()=>({element:E.current,progressStatusElement:x.current,progressStatusWrapElement:R.current,focus:I}));const S=e.value||p.value,w=(e=>{const r=l.useRef(void 0);return l.useEffect(()=>{r.current=e}),r.current})(S),O=null===e.value,P=s.useRtl(E,e.dir),j="vertical"===u,T=(e=>{const r=e.toString().split(".");return 1===r.length?`${r[0]}`:`${r[0]}.${r[1].substr(0,3)}`})(S),K={value:S},$=m?e.label?l.createElement("span",{className:"k-progress-status"},l.createElement(e.label,{...K})):l.createElement("span",{className:"k-progress-status"},T):void 0,M={className:s.classNames("k-progressbar",{"k-progressbar-horizontal":!j,"k-progressbar-vertical":j,"k-progressbar-reverse":c,"k-progressbar-indeterminate":O,"k-disabled":n},v),ref:E,dir:P,tabIndex:s.getTabIndex(k,n),role:"progressbar","aria-label":e.ariaLabel,"aria-valuemin":g,"aria-valuemax":b,"aria-valuenow":O?void 0:S,"aria-disabled":n,style:f},A=s.classNames("k-progress-status-wrap",{"k-progress-start":"start"===d,"k-progress-center":"center"===d,"k-progress-end":"end"===d||void 0===d}),B="boolean"!=typeof a&&void 0!==a?a.duration:a?400:0,D=l.useCallback(()=>{const e=o(g,b,w);i(x,R,e,j)},[j,b,g,w]),L=l.useCallback(e=>{const r=o(g,b,w+(S-w)*e);i(x,R,r,j)},[g,b,w,S,j]),V=l.useCallback(()=>{const e=o(g,b,S);i(x,R,e,j)},[j,b,g,S]);return t.useAnimation({duration:B,onStart:D,onUpdate:L,onEnd:V},[S,B]),l.createElement("div",{...M},l.createElement("span",{className:A+(h?" "+h:""),style:y},$),l.createElement("div",{className:"k-progressbar-value k-selected",style:N,ref:x},l.createElement("span",{className:A+(C?" "+C:""),ref:R},$)))});b.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 p={animation:!1,min:0,max:100,value:0,disabled:!1,reverse:!1,labelVisible:!0};b.displayName="KendoProgressBar",e.ChunkProgressBar=m,e.ProgressBar=b});
|
package/index.d.mts
CHANGED
|
@@ -5,332 +5,10 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
*
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
* Specifies the type of progress bar. Can be either `linear` or `circular`.
|
|
16
|
-
*
|
|
17
|
-
* Example:
|
|
18
|
-
* ```jsx
|
|
19
|
-
* <ProgressBar type="linear" />
|
|
20
|
-
* ```
|
|
21
|
-
*
|
|
22
|
-
* @hidden
|
|
23
|
-
*/
|
|
24
|
-
type?: 'linear' | 'circular';
|
|
25
|
-
/**
|
|
26
|
-
* Sets the current value of the progress bar. Must be between the `min` and `max` values. Defaults to `0`.
|
|
27
|
-
* Set to `null` to enable the indeterminate state of the progress bar.
|
|
28
|
-
* See examples ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar)) and ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/chunkprogressbar)).
|
|
29
|
-
*
|
|
30
|
-
* @default 0
|
|
31
|
-
*
|
|
32
|
-
* @example
|
|
33
|
-
* ```jsx
|
|
34
|
-
* <ProgressBar value={50} />
|
|
35
|
-
* ```
|
|
36
|
-
*/
|
|
37
|
-
value?: number | null;
|
|
38
|
-
/**
|
|
39
|
-
* Specifies the minimum value of the progress bar. Defaults to `0`.
|
|
40
|
-
*
|
|
41
|
-
* @default 0
|
|
42
|
-
*
|
|
43
|
-
* @example
|
|
44
|
-
* ```jsx
|
|
45
|
-
* <ProgressBar min={0} />
|
|
46
|
-
* ```
|
|
47
|
-
*/
|
|
48
|
-
min?: number;
|
|
49
|
-
/**
|
|
50
|
-
* Specifies the maximum value of the progress bar. Defaults to `100`.
|
|
51
|
-
*
|
|
52
|
-
* @default 100
|
|
53
|
-
*
|
|
54
|
-
* @example
|
|
55
|
-
* ```jsx
|
|
56
|
-
* <ProgressBar max={100} />
|
|
57
|
-
* ```
|
|
58
|
-
*/
|
|
59
|
-
max?: number;
|
|
60
|
-
/**
|
|
61
|
-
* Sets the `dir` HTML attribute to switch between LTR and RTL directions.
|
|
62
|
-
*
|
|
63
|
-
* @example
|
|
64
|
-
* ```jsx
|
|
65
|
-
* <ProgressBar dir="rtl" />
|
|
66
|
-
* ```
|
|
67
|
-
*/
|
|
68
|
-
dir?: string;
|
|
69
|
-
/**
|
|
70
|
-
* Provides an accessible label for the component.
|
|
71
|
-
*
|
|
72
|
-
* @example
|
|
73
|
-
* ```jsx
|
|
74
|
-
* <ProgressBar ariaLabel="Loading progress" />
|
|
75
|
-
* ```
|
|
76
|
-
*/
|
|
77
|
-
ariaLabel?: string;
|
|
78
|
-
/**
|
|
79
|
-
* Determines whether the progress bar is in a disabled state.
|
|
80
|
-
* See examples ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar/disabled)) and ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/chunkprogressbar/disabled)).
|
|
81
|
-
*
|
|
82
|
-
* @example
|
|
83
|
-
* ```jsx
|
|
84
|
-
* <ProgressBar disabled={true} />
|
|
85
|
-
* ```
|
|
86
|
-
*/
|
|
87
|
-
disabled?: boolean;
|
|
88
|
-
/**
|
|
89
|
-
* Specifies the orientation of the progress bar. Can be `horizontal` or `vertical`. Defaults to `horizontal`.
|
|
90
|
-
* See examples ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar/orientation)) and ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/chunkprogressbar/orientation)).
|
|
91
|
-
*
|
|
92
|
-
* @default "horizontal"
|
|
93
|
-
*
|
|
94
|
-
* @example
|
|
95
|
-
* ```jsx
|
|
96
|
-
* <ProgressBar orientation="vertical" />
|
|
97
|
-
* ```
|
|
98
|
-
*/
|
|
99
|
-
orientation?: 'horizontal' | 'vertical';
|
|
100
|
-
/**
|
|
101
|
-
* If set to `true`, reverses the direction of the progress bar. Defaults to `false`.
|
|
102
|
-
* See examples ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar/direction)) and ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/chunkprogressbar/direction)).
|
|
103
|
-
*
|
|
104
|
-
* @default false
|
|
105
|
-
*
|
|
106
|
-
* @example
|
|
107
|
-
* ```jsx
|
|
108
|
-
* <ProgressBar reverse={true} />
|
|
109
|
-
* ```
|
|
110
|
-
*/
|
|
111
|
-
reverse?: boolean;
|
|
112
|
-
/**
|
|
113
|
-
* Adds a list of CSS classes to the progress bar element.
|
|
114
|
-
*
|
|
115
|
-
* @example
|
|
116
|
-
* ```jsx
|
|
117
|
-
* <ProgressBar className="custom-progress-bar" />
|
|
118
|
-
* ```
|
|
119
|
-
*/
|
|
120
|
-
className?: string;
|
|
121
|
-
/**
|
|
122
|
-
* Applies additional CSS styles to the progress bar.
|
|
123
|
-
*
|
|
124
|
-
* @example
|
|
125
|
-
* ```jsx
|
|
126
|
-
* <ProgressBar style={{ backgroundColor: 'red' }} />
|
|
127
|
-
* ```
|
|
128
|
-
*/
|
|
129
|
-
style?: React.CSSProperties;
|
|
130
|
-
/**
|
|
131
|
-
* Specifies the styles applied to the inner element representing the empty portion of the progress bar.
|
|
132
|
-
* See examples ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar/appearance)) and ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/chunkprogressbar/appearance)).
|
|
133
|
-
*
|
|
134
|
-
* @example
|
|
135
|
-
* ```jsx
|
|
136
|
-
* <ProgressBar emptyStyle={{ backgroundColor: 'lightgray' }} />
|
|
137
|
-
* ```
|
|
138
|
-
*/
|
|
139
|
-
emptyStyle?: React.CSSProperties;
|
|
140
|
-
/**
|
|
141
|
-
* Adds additional CSS classes to the inner element representing the empty portion of the progress bar.
|
|
142
|
-
* See examples ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar/appearance)) and ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/chunkprogressbar/appearance)).
|
|
143
|
-
*
|
|
144
|
-
* @example
|
|
145
|
-
* ```jsx
|
|
146
|
-
* <ProgressBar emptyClassName="custom-empty-class" />
|
|
147
|
-
* ```
|
|
148
|
-
*/
|
|
149
|
-
emptyClassName?: string;
|
|
150
|
-
/**
|
|
151
|
-
* Specifies the styles applied to the inner element representing the full portion of the progress bar.
|
|
152
|
-
* See examples ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar/appearance)) and ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/chunkprogressbar/appearance)).
|
|
153
|
-
*
|
|
154
|
-
* @example
|
|
155
|
-
* ```jsx
|
|
156
|
-
* <ProgressBar progressStyle={{ backgroundColor: 'green' }} />
|
|
157
|
-
* ```
|
|
158
|
-
*/
|
|
159
|
-
progressStyle?: React.CSSProperties;
|
|
160
|
-
/**
|
|
161
|
-
* Adds additional CSS classes to the inner element representing the full portion of the progress bar.
|
|
162
|
-
* See examples ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar/appearance)) and ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/chunkprogressbar/appearance)).
|
|
163
|
-
*
|
|
164
|
-
* @example
|
|
165
|
-
* ```jsx
|
|
166
|
-
* <ProgressBar progressClassName="custom-progress-class" />
|
|
167
|
-
* ```
|
|
168
|
-
*/
|
|
169
|
-
progressClassName?: string;
|
|
170
|
-
/**
|
|
171
|
-
* Sets the `tabIndex` attribute of the progress bar for keyboard navigation.
|
|
172
|
-
*
|
|
173
|
-
* @example
|
|
174
|
-
* ```jsx
|
|
175
|
-
* <ProgressBar tabIndex={0} />
|
|
176
|
-
* ```
|
|
177
|
-
*/
|
|
178
|
-
tabIndex?: number;
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
/**
|
|
182
|
-
* Represents the [KendoReact ChunkProgressBar component](https://www.telerik.com/kendo-react-ui/components/progressbars/chunkprogressbar).
|
|
183
|
-
*
|
|
184
|
-
* @example
|
|
185
|
-
* ```jsx
|
|
186
|
-
* const App = () => {
|
|
187
|
-
* return (
|
|
188
|
-
* <ChunkProgressBar value={40}/>
|
|
189
|
-
* );
|
|
190
|
-
* };
|
|
191
|
-
* ```
|
|
192
|
-
*/
|
|
193
|
-
export declare const ChunkProgressBar: React_2.ForwardRefExoticComponent<ChunkProgressBarProps & React_2.RefAttributes<ChunkProgressBarHandle | null>>;
|
|
194
|
-
|
|
195
|
-
/**
|
|
196
|
-
* The ChunkProgressBar ref.
|
|
197
|
-
*/
|
|
198
|
-
declare interface ChunkProgressBarHandle {
|
|
199
|
-
/**
|
|
200
|
-
* The ChunkProgressBar element.
|
|
201
|
-
*/
|
|
202
|
-
element: HTMLDivElement | null;
|
|
203
|
-
/**
|
|
204
|
-
* Focus the ChunkProgressBar.
|
|
205
|
-
*/
|
|
206
|
-
focus: () => void;
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
/**
|
|
210
|
-
* Represents the props of the [KendoReact ChunkProgressBar component](https://www.telerik.com/kendo-react-ui/components/progressbars/chunkprogressbar).
|
|
211
|
-
*/
|
|
212
|
-
export declare interface ChunkProgressBarProps extends BaseProps {
|
|
213
|
-
/**
|
|
214
|
-
* Defines the number of chunks into which the ChunkProgressBar is divided. Defaults to `5`.
|
|
215
|
-
* Each chunk visually represents a portion of the progress bar.
|
|
216
|
-
*
|
|
217
|
-
* @default 5
|
|
218
|
-
*
|
|
219
|
-
* @example
|
|
220
|
-
* ```jsx
|
|
221
|
-
* <ChunkProgressBar chunkCount={10} />
|
|
222
|
-
* ```
|
|
223
|
-
*/
|
|
224
|
-
chunkCount?: number;
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
/**
|
|
228
|
-
* An interface for the ProgressBar label.
|
|
229
|
-
*/
|
|
230
|
-
export declare interface LabelProps {
|
|
231
|
-
/**
|
|
232
|
-
* The current value of the ProgressBar. Can be a number or `null` for indeterminate state.
|
|
233
|
-
*/
|
|
234
|
-
value?: number | null;
|
|
235
|
-
}
|
|
236
|
-
|
|
237
|
-
/**
|
|
238
|
-
* Represents the [KendoReact ProgressBar component](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar).
|
|
239
|
-
*
|
|
240
|
-
* @example
|
|
241
|
-
* ```jsx
|
|
242
|
-
* const App = () => {
|
|
243
|
-
* return (
|
|
244
|
-
* <ProgressBar value={75}/>
|
|
245
|
-
* );
|
|
246
|
-
* };
|
|
247
|
-
* ```
|
|
248
|
-
*/
|
|
249
|
-
export declare const ProgressBar: React_2.ForwardRefExoticComponent<ProgressBarProps & React_2.RefAttributes<ProgressBarHandle | null>>;
|
|
250
|
-
|
|
251
|
-
/**
|
|
252
|
-
* Specifies the animation settings of the ProgressBar.
|
|
253
|
-
*/
|
|
254
|
-
export declare interface ProgressBarAnimation {
|
|
255
|
-
/**
|
|
256
|
-
* Specifies the duration of the ProgressBar animation. Defaults to `400`.
|
|
257
|
-
*
|
|
258
|
-
* @default 400
|
|
259
|
-
*/
|
|
260
|
-
duration: number;
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
/**
|
|
264
|
-
* The ProgressBar ref.
|
|
265
|
-
*/
|
|
266
|
-
export declare interface ProgressBarHandle {
|
|
267
|
-
/**
|
|
268
|
-
* The ProgressBar element.
|
|
269
|
-
*/
|
|
270
|
-
element: HTMLDivElement | null;
|
|
271
|
-
/**
|
|
272
|
-
* The progress status element.
|
|
273
|
-
*/
|
|
274
|
-
progressStatusElement: HTMLDivElement | null;
|
|
275
|
-
/**
|
|
276
|
-
* The progress status wrap element.
|
|
277
|
-
*/
|
|
278
|
-
progressStatusWrapElement: HTMLSpanElement | null;
|
|
279
|
-
/**
|
|
280
|
-
* Focus the ProgressBar.
|
|
281
|
-
*/
|
|
282
|
-
focus: () => void;
|
|
283
|
-
}
|
|
284
|
-
|
|
285
|
-
/**
|
|
286
|
-
* Represents the props of the [KendoReact ProgressBar component](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar).
|
|
287
|
-
*/
|
|
288
|
-
export declare interface ProgressBarProps extends BaseProps {
|
|
289
|
-
/**
|
|
290
|
-
* Configures the animation settings of the ProgressBar. Defaults to `false`.
|
|
291
|
-
* If set to a boolean, it enables or disables the default animation.
|
|
292
|
-
* If set to a `ProgressBarAnimation` object, it allows customization of the slide animation duration in milliseconds.
|
|
293
|
-
*
|
|
294
|
-
* @default false
|
|
295
|
-
*
|
|
296
|
-
* @example
|
|
297
|
-
* ```jsx
|
|
298
|
-
* <ProgressBar animation={{ duration: 500 }} />
|
|
299
|
-
* ```
|
|
300
|
-
*/
|
|
301
|
-
animation?: boolean | ProgressBarAnimation;
|
|
302
|
-
/**
|
|
303
|
-
* Provides a custom label component for the ProgressBar ([see example](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar/label)).
|
|
304
|
-
*
|
|
305
|
-
* @example
|
|
306
|
-
* ```jsx
|
|
307
|
-
* const CustomLabel = (props) => <span>{props.value}%</span>;
|
|
308
|
-
* <ProgressBar label={CustomLabel} />
|
|
309
|
-
* ```
|
|
310
|
-
*/
|
|
311
|
-
label?: React.ComponentType<LabelProps>;
|
|
312
|
-
/**
|
|
313
|
-
* Determines whether the progress status label is visible. Defaults to `true`.
|
|
314
|
-
*
|
|
315
|
-
* @default true
|
|
316
|
-
*
|
|
317
|
-
* @example
|
|
318
|
-
* ```jsx
|
|
319
|
-
* <ProgressBar labelVisible={false} />
|
|
320
|
-
* ```
|
|
321
|
-
*/
|
|
322
|
-
labelVisible?: boolean;
|
|
323
|
-
/**
|
|
324
|
-
* Specifies the position of the progress status label. Defaults to `end` ([see example](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar/label)).
|
|
325
|
-
*
|
|
326
|
-
* @default "end"
|
|
327
|
-
*
|
|
328
|
-
* @example
|
|
329
|
-
* ```jsx
|
|
330
|
-
* <ProgressBar labelPlacement="center" />
|
|
331
|
-
* ```
|
|
332
|
-
*/
|
|
333
|
-
labelPlacement?: 'start' | 'center' | 'end';
|
|
334
|
-
}
|
|
335
|
-
|
|
336
|
-
export { }
|
|
8
|
+
export * from './chunkprogressbar/ChunkProgressBar.js';
|
|
9
|
+
export * from './chunkprogressbar/interfaces/ChunkProgressBarProps.js';
|
|
10
|
+
export * from './progressbar/ProgressBar.js';
|
|
11
|
+
export * from './progressbar/interfaces/ProgressBarHandle.js';
|
|
12
|
+
export * from './progressbar/interfaces/ProgressBarProps.js';
|
|
13
|
+
export * from './progressbar/interfaces/ProgressBarAnimation.js';
|
|
14
|
+
export * from './progressbar/interfaces/LabelProps.js';
|
package/index.d.ts
CHANGED
|
@@ -5,332 +5,10 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
*
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
* Specifies the type of progress bar. Can be either `linear` or `circular`.
|
|
16
|
-
*
|
|
17
|
-
* Example:
|
|
18
|
-
* ```jsx
|
|
19
|
-
* <ProgressBar type="linear" />
|
|
20
|
-
* ```
|
|
21
|
-
*
|
|
22
|
-
* @hidden
|
|
23
|
-
*/
|
|
24
|
-
type?: 'linear' | 'circular';
|
|
25
|
-
/**
|
|
26
|
-
* Sets the current value of the progress bar. Must be between the `min` and `max` values. Defaults to `0`.
|
|
27
|
-
* Set to `null` to enable the indeterminate state of the progress bar.
|
|
28
|
-
* See examples ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar)) and ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/chunkprogressbar)).
|
|
29
|
-
*
|
|
30
|
-
* @default 0
|
|
31
|
-
*
|
|
32
|
-
* @example
|
|
33
|
-
* ```jsx
|
|
34
|
-
* <ProgressBar value={50} />
|
|
35
|
-
* ```
|
|
36
|
-
*/
|
|
37
|
-
value?: number | null;
|
|
38
|
-
/**
|
|
39
|
-
* Specifies the minimum value of the progress bar. Defaults to `0`.
|
|
40
|
-
*
|
|
41
|
-
* @default 0
|
|
42
|
-
*
|
|
43
|
-
* @example
|
|
44
|
-
* ```jsx
|
|
45
|
-
* <ProgressBar min={0} />
|
|
46
|
-
* ```
|
|
47
|
-
*/
|
|
48
|
-
min?: number;
|
|
49
|
-
/**
|
|
50
|
-
* Specifies the maximum value of the progress bar. Defaults to `100`.
|
|
51
|
-
*
|
|
52
|
-
* @default 100
|
|
53
|
-
*
|
|
54
|
-
* @example
|
|
55
|
-
* ```jsx
|
|
56
|
-
* <ProgressBar max={100} />
|
|
57
|
-
* ```
|
|
58
|
-
*/
|
|
59
|
-
max?: number;
|
|
60
|
-
/**
|
|
61
|
-
* Sets the `dir` HTML attribute to switch between LTR and RTL directions.
|
|
62
|
-
*
|
|
63
|
-
* @example
|
|
64
|
-
* ```jsx
|
|
65
|
-
* <ProgressBar dir="rtl" />
|
|
66
|
-
* ```
|
|
67
|
-
*/
|
|
68
|
-
dir?: string;
|
|
69
|
-
/**
|
|
70
|
-
* Provides an accessible label for the component.
|
|
71
|
-
*
|
|
72
|
-
* @example
|
|
73
|
-
* ```jsx
|
|
74
|
-
* <ProgressBar ariaLabel="Loading progress" />
|
|
75
|
-
* ```
|
|
76
|
-
*/
|
|
77
|
-
ariaLabel?: string;
|
|
78
|
-
/**
|
|
79
|
-
* Determines whether the progress bar is in a disabled state.
|
|
80
|
-
* See examples ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar/disabled)) and ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/chunkprogressbar/disabled)).
|
|
81
|
-
*
|
|
82
|
-
* @example
|
|
83
|
-
* ```jsx
|
|
84
|
-
* <ProgressBar disabled={true} />
|
|
85
|
-
* ```
|
|
86
|
-
*/
|
|
87
|
-
disabled?: boolean;
|
|
88
|
-
/**
|
|
89
|
-
* Specifies the orientation of the progress bar. Can be `horizontal` or `vertical`. Defaults to `horizontal`.
|
|
90
|
-
* See examples ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar/orientation)) and ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/chunkprogressbar/orientation)).
|
|
91
|
-
*
|
|
92
|
-
* @default "horizontal"
|
|
93
|
-
*
|
|
94
|
-
* @example
|
|
95
|
-
* ```jsx
|
|
96
|
-
* <ProgressBar orientation="vertical" />
|
|
97
|
-
* ```
|
|
98
|
-
*/
|
|
99
|
-
orientation?: 'horizontal' | 'vertical';
|
|
100
|
-
/**
|
|
101
|
-
* If set to `true`, reverses the direction of the progress bar. Defaults to `false`.
|
|
102
|
-
* See examples ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar/direction)) and ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/chunkprogressbar/direction)).
|
|
103
|
-
*
|
|
104
|
-
* @default false
|
|
105
|
-
*
|
|
106
|
-
* @example
|
|
107
|
-
* ```jsx
|
|
108
|
-
* <ProgressBar reverse={true} />
|
|
109
|
-
* ```
|
|
110
|
-
*/
|
|
111
|
-
reverse?: boolean;
|
|
112
|
-
/**
|
|
113
|
-
* Adds a list of CSS classes to the progress bar element.
|
|
114
|
-
*
|
|
115
|
-
* @example
|
|
116
|
-
* ```jsx
|
|
117
|
-
* <ProgressBar className="custom-progress-bar" />
|
|
118
|
-
* ```
|
|
119
|
-
*/
|
|
120
|
-
className?: string;
|
|
121
|
-
/**
|
|
122
|
-
* Applies additional CSS styles to the progress bar.
|
|
123
|
-
*
|
|
124
|
-
* @example
|
|
125
|
-
* ```jsx
|
|
126
|
-
* <ProgressBar style={{ backgroundColor: 'red' }} />
|
|
127
|
-
* ```
|
|
128
|
-
*/
|
|
129
|
-
style?: React.CSSProperties;
|
|
130
|
-
/**
|
|
131
|
-
* Specifies the styles applied to the inner element representing the empty portion of the progress bar.
|
|
132
|
-
* See examples ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar/appearance)) and ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/chunkprogressbar/appearance)).
|
|
133
|
-
*
|
|
134
|
-
* @example
|
|
135
|
-
* ```jsx
|
|
136
|
-
* <ProgressBar emptyStyle={{ backgroundColor: 'lightgray' }} />
|
|
137
|
-
* ```
|
|
138
|
-
*/
|
|
139
|
-
emptyStyle?: React.CSSProperties;
|
|
140
|
-
/**
|
|
141
|
-
* Adds additional CSS classes to the inner element representing the empty portion of the progress bar.
|
|
142
|
-
* See examples ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar/appearance)) and ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/chunkprogressbar/appearance)).
|
|
143
|
-
*
|
|
144
|
-
* @example
|
|
145
|
-
* ```jsx
|
|
146
|
-
* <ProgressBar emptyClassName="custom-empty-class" />
|
|
147
|
-
* ```
|
|
148
|
-
*/
|
|
149
|
-
emptyClassName?: string;
|
|
150
|
-
/**
|
|
151
|
-
* Specifies the styles applied to the inner element representing the full portion of the progress bar.
|
|
152
|
-
* See examples ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar/appearance)) and ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/chunkprogressbar/appearance)).
|
|
153
|
-
*
|
|
154
|
-
* @example
|
|
155
|
-
* ```jsx
|
|
156
|
-
* <ProgressBar progressStyle={{ backgroundColor: 'green' }} />
|
|
157
|
-
* ```
|
|
158
|
-
*/
|
|
159
|
-
progressStyle?: React.CSSProperties;
|
|
160
|
-
/**
|
|
161
|
-
* Adds additional CSS classes to the inner element representing the full portion of the progress bar.
|
|
162
|
-
* See examples ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar/appearance)) and ([here](https://www.telerik.com/kendo-react-ui/components/progressbars/chunkprogressbar/appearance)).
|
|
163
|
-
*
|
|
164
|
-
* @example
|
|
165
|
-
* ```jsx
|
|
166
|
-
* <ProgressBar progressClassName="custom-progress-class" />
|
|
167
|
-
* ```
|
|
168
|
-
*/
|
|
169
|
-
progressClassName?: string;
|
|
170
|
-
/**
|
|
171
|
-
* Sets the `tabIndex` attribute of the progress bar for keyboard navigation.
|
|
172
|
-
*
|
|
173
|
-
* @example
|
|
174
|
-
* ```jsx
|
|
175
|
-
* <ProgressBar tabIndex={0} />
|
|
176
|
-
* ```
|
|
177
|
-
*/
|
|
178
|
-
tabIndex?: number;
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
/**
|
|
182
|
-
* Represents the [KendoReact ChunkProgressBar component](https://www.telerik.com/kendo-react-ui/components/progressbars/chunkprogressbar).
|
|
183
|
-
*
|
|
184
|
-
* @example
|
|
185
|
-
* ```jsx
|
|
186
|
-
* const App = () => {
|
|
187
|
-
* return (
|
|
188
|
-
* <ChunkProgressBar value={40}/>
|
|
189
|
-
* );
|
|
190
|
-
* };
|
|
191
|
-
* ```
|
|
192
|
-
*/
|
|
193
|
-
export declare const ChunkProgressBar: React_2.ForwardRefExoticComponent<ChunkProgressBarProps & React_2.RefAttributes<ChunkProgressBarHandle | null>>;
|
|
194
|
-
|
|
195
|
-
/**
|
|
196
|
-
* The ChunkProgressBar ref.
|
|
197
|
-
*/
|
|
198
|
-
declare interface ChunkProgressBarHandle {
|
|
199
|
-
/**
|
|
200
|
-
* The ChunkProgressBar element.
|
|
201
|
-
*/
|
|
202
|
-
element: HTMLDivElement | null;
|
|
203
|
-
/**
|
|
204
|
-
* Focus the ChunkProgressBar.
|
|
205
|
-
*/
|
|
206
|
-
focus: () => void;
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
/**
|
|
210
|
-
* Represents the props of the [KendoReact ChunkProgressBar component](https://www.telerik.com/kendo-react-ui/components/progressbars/chunkprogressbar).
|
|
211
|
-
*/
|
|
212
|
-
export declare interface ChunkProgressBarProps extends BaseProps {
|
|
213
|
-
/**
|
|
214
|
-
* Defines the number of chunks into which the ChunkProgressBar is divided. Defaults to `5`.
|
|
215
|
-
* Each chunk visually represents a portion of the progress bar.
|
|
216
|
-
*
|
|
217
|
-
* @default 5
|
|
218
|
-
*
|
|
219
|
-
* @example
|
|
220
|
-
* ```jsx
|
|
221
|
-
* <ChunkProgressBar chunkCount={10} />
|
|
222
|
-
* ```
|
|
223
|
-
*/
|
|
224
|
-
chunkCount?: number;
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
/**
|
|
228
|
-
* An interface for the ProgressBar label.
|
|
229
|
-
*/
|
|
230
|
-
export declare interface LabelProps {
|
|
231
|
-
/**
|
|
232
|
-
* The current value of the ProgressBar. Can be a number or `null` for indeterminate state.
|
|
233
|
-
*/
|
|
234
|
-
value?: number | null;
|
|
235
|
-
}
|
|
236
|
-
|
|
237
|
-
/**
|
|
238
|
-
* Represents the [KendoReact ProgressBar component](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar).
|
|
239
|
-
*
|
|
240
|
-
* @example
|
|
241
|
-
* ```jsx
|
|
242
|
-
* const App = () => {
|
|
243
|
-
* return (
|
|
244
|
-
* <ProgressBar value={75}/>
|
|
245
|
-
* );
|
|
246
|
-
* };
|
|
247
|
-
* ```
|
|
248
|
-
*/
|
|
249
|
-
export declare const ProgressBar: React_2.ForwardRefExoticComponent<ProgressBarProps & React_2.RefAttributes<ProgressBarHandle | null>>;
|
|
250
|
-
|
|
251
|
-
/**
|
|
252
|
-
* Specifies the animation settings of the ProgressBar.
|
|
253
|
-
*/
|
|
254
|
-
export declare interface ProgressBarAnimation {
|
|
255
|
-
/**
|
|
256
|
-
* Specifies the duration of the ProgressBar animation. Defaults to `400`.
|
|
257
|
-
*
|
|
258
|
-
* @default 400
|
|
259
|
-
*/
|
|
260
|
-
duration: number;
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
/**
|
|
264
|
-
* The ProgressBar ref.
|
|
265
|
-
*/
|
|
266
|
-
export declare interface ProgressBarHandle {
|
|
267
|
-
/**
|
|
268
|
-
* The ProgressBar element.
|
|
269
|
-
*/
|
|
270
|
-
element: HTMLDivElement | null;
|
|
271
|
-
/**
|
|
272
|
-
* The progress status element.
|
|
273
|
-
*/
|
|
274
|
-
progressStatusElement: HTMLDivElement | null;
|
|
275
|
-
/**
|
|
276
|
-
* The progress status wrap element.
|
|
277
|
-
*/
|
|
278
|
-
progressStatusWrapElement: HTMLSpanElement | null;
|
|
279
|
-
/**
|
|
280
|
-
* Focus the ProgressBar.
|
|
281
|
-
*/
|
|
282
|
-
focus: () => void;
|
|
283
|
-
}
|
|
284
|
-
|
|
285
|
-
/**
|
|
286
|
-
* Represents the props of the [KendoReact ProgressBar component](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar).
|
|
287
|
-
*/
|
|
288
|
-
export declare interface ProgressBarProps extends BaseProps {
|
|
289
|
-
/**
|
|
290
|
-
* Configures the animation settings of the ProgressBar. Defaults to `false`.
|
|
291
|
-
* If set to a boolean, it enables or disables the default animation.
|
|
292
|
-
* If set to a `ProgressBarAnimation` object, it allows customization of the slide animation duration in milliseconds.
|
|
293
|
-
*
|
|
294
|
-
* @default false
|
|
295
|
-
*
|
|
296
|
-
* @example
|
|
297
|
-
* ```jsx
|
|
298
|
-
* <ProgressBar animation={{ duration: 500 }} />
|
|
299
|
-
* ```
|
|
300
|
-
*/
|
|
301
|
-
animation?: boolean | ProgressBarAnimation;
|
|
302
|
-
/**
|
|
303
|
-
* Provides a custom label component for the ProgressBar ([see example](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar/label)).
|
|
304
|
-
*
|
|
305
|
-
* @example
|
|
306
|
-
* ```jsx
|
|
307
|
-
* const CustomLabel = (props) => <span>{props.value}%</span>;
|
|
308
|
-
* <ProgressBar label={CustomLabel} />
|
|
309
|
-
* ```
|
|
310
|
-
*/
|
|
311
|
-
label?: React.ComponentType<LabelProps>;
|
|
312
|
-
/**
|
|
313
|
-
* Determines whether the progress status label is visible. Defaults to `true`.
|
|
314
|
-
*
|
|
315
|
-
* @default true
|
|
316
|
-
*
|
|
317
|
-
* @example
|
|
318
|
-
* ```jsx
|
|
319
|
-
* <ProgressBar labelVisible={false} />
|
|
320
|
-
* ```
|
|
321
|
-
*/
|
|
322
|
-
labelVisible?: boolean;
|
|
323
|
-
/**
|
|
324
|
-
* Specifies the position of the progress status label. Defaults to `end` ([see example](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar/label)).
|
|
325
|
-
*
|
|
326
|
-
* @default "end"
|
|
327
|
-
*
|
|
328
|
-
* @example
|
|
329
|
-
* ```jsx
|
|
330
|
-
* <ProgressBar labelPlacement="center" />
|
|
331
|
-
* ```
|
|
332
|
-
*/
|
|
333
|
-
labelPlacement?: 'start' | 'center' | 'end';
|
|
334
|
-
}
|
|
335
|
-
|
|
336
|
-
export { }
|
|
8
|
+
export * from './chunkprogressbar/ChunkProgressBar.js';
|
|
9
|
+
export * from './chunkprogressbar/interfaces/ChunkProgressBarProps.js';
|
|
10
|
+
export * from './progressbar/ProgressBar.js';
|
|
11
|
+
export * from './progressbar/interfaces/ProgressBarHandle.js';
|
|
12
|
+
export * from './progressbar/interfaces/ProgressBarProps.js';
|
|
13
|
+
export * from './progressbar/interfaces/ProgressBarAnimation.js';
|
|
14
|
+
export * from './progressbar/interfaces/LabelProps.js';
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
import { PackageMetadata } from '@progress/kendo-licensing';
|
|
9
|
+
/**
|
|
10
|
+
* @hidden
|
|
11
|
+
*/
|
|
12
|
+
export declare const packageMetadata: PackageMetadata;
|
package/package-metadata.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-progressbars",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-progressbars",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1770287820,version:"13.4.0-develop.2",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"});exports.packageMetadata=e;
|
package/package-metadata.mjs
CHANGED
|
@@ -1,19 +1,13 @@
|
|
|
1
|
+
// Generated file. DO NOT EDIT.
|
|
1
2
|
/**
|
|
2
|
-
* @
|
|
3
|
-
*-------------------------------------------------------------------------------------------
|
|
4
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
-
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
-
*-------------------------------------------------------------------------------------------
|
|
3
|
+
* @hidden
|
|
7
4
|
*/
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
5
|
+
export const packageMetadata = Object.freeze({
|
|
6
|
+
name: '@progress/kendo-react-progressbars',
|
|
7
|
+
productName: 'KendoReact',
|
|
8
|
+
productCode: 'KENDOUIREACT',
|
|
9
|
+
productCodes: ['KENDOUIREACT'],
|
|
10
|
+
publishDate: 0,
|
|
11
|
+
version: '13.4.0-develop.2',
|
|
12
|
+
licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/components/my-license/'
|
|
16
13
|
});
|
|
17
|
-
export {
|
|
18
|
-
e as packageMetadata
|
|
19
|
-
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-progressbars",
|
|
3
|
-
"version": "13.
|
|
3
|
+
"version": "13.4.0-develop.2",
|
|
4
4
|
"description": "React ProgressBars offer a customizable interface for users to track and display the progress of a task. KendoReact ProgressBars package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
"sideEffects": false,
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"@progress/kendo-licensing": "^1.7.2",
|
|
29
|
-
"@progress/kendo-react-animation": "13.
|
|
30
|
-
"@progress/kendo-react-common": "13.
|
|
29
|
+
"@progress/kendo-react-animation": "13.4.0-develop.2",
|
|
30
|
+
"@progress/kendo-react-common": "13.4.0-develop.2",
|
|
31
31
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
|
|
32
32
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
|
|
33
33
|
},
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"package": {
|
|
57
57
|
"productName": "KendoReact",
|
|
58
58
|
"productCode": "KENDOUIREACT",
|
|
59
|
-
"publishDate":
|
|
59
|
+
"publishDate": 1770287820,
|
|
60
60
|
"licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
61
61
|
}
|
|
62
62
|
},
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
import { ProgressBarProps } from './interfaces/ProgressBarProps.js';
|
|
9
|
+
import { ProgressBarHandle } from './interfaces/ProgressBarHandle.js';
|
|
10
|
+
import * as React from 'react';
|
|
11
|
+
/**
|
|
12
|
+
* Represents the [KendoReact ProgressBar component](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar).
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* ```jsx
|
|
16
|
+
* const App = () => {
|
|
17
|
+
* return (
|
|
18
|
+
* <ProgressBar value={75}/>
|
|
19
|
+
* );
|
|
20
|
+
* };
|
|
21
|
+
* ```
|
|
22
|
+
*/
|
|
23
|
+
export declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<ProgressBarHandle | null>>;
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
import * as e from "react";
|
|
9
9
|
import a from "prop-types";
|
|
10
10
|
import { useAnimation as H } from "@progress/kendo-react-animation";
|
|
11
|
-
import { useRtl as K,
|
|
11
|
+
import { useRtl as K, getTabIndex as q, classNames as I } from "@progress/kendo-react-common";
|
|
12
12
|
import { truncateNumber as G, updateProgress as f, calculatePercentage as v } from "../common/utils.mjs";
|
|
13
13
|
import { usePrevious as J } from "./hooks/usePrevious.mjs";
|
|
14
14
|
import { DEFAULT_ANIMATION_DURATION as Q, NO_ANIMATION as X } from "../common/constants.mjs";
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
/** @hidden */
|
|
9
|
+
export declare const usePrevious: (value: any) => any;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* An interface for the ProgressBar label.
|
|
10
|
+
*/
|
|
11
|
+
export interface LabelProps {
|
|
12
|
+
/**
|
|
13
|
+
* The current value of the ProgressBar. Can be a number or `null` for indeterminate state.
|
|
14
|
+
*/
|
|
15
|
+
value?: number | null;
|
|
16
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* Specifies the animation settings of the ProgressBar.
|
|
10
|
+
*/
|
|
11
|
+
export interface ProgressBarAnimation {
|
|
12
|
+
/**
|
|
13
|
+
* Specifies the duration of the ProgressBar animation. Defaults to `400`.
|
|
14
|
+
*
|
|
15
|
+
* @default 400
|
|
16
|
+
*/
|
|
17
|
+
duration: number;
|
|
18
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* The ProgressBar ref.
|
|
10
|
+
*/
|
|
11
|
+
export interface ProgressBarHandle {
|
|
12
|
+
/**
|
|
13
|
+
* The ProgressBar element.
|
|
14
|
+
*/
|
|
15
|
+
element: HTMLDivElement | null;
|
|
16
|
+
/**
|
|
17
|
+
* The progress status element.
|
|
18
|
+
*/
|
|
19
|
+
progressStatusElement: HTMLDivElement | null;
|
|
20
|
+
/**
|
|
21
|
+
* The progress status wrap element.
|
|
22
|
+
*/
|
|
23
|
+
progressStatusWrapElement: HTMLSpanElement | null;
|
|
24
|
+
/**
|
|
25
|
+
* Focus the ProgressBar.
|
|
26
|
+
*/
|
|
27
|
+
focus: () => void;
|
|
28
|
+
}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
import { BaseProps } from '../../common/BaseProps.js';
|
|
9
|
+
import { ProgressBarAnimation } from './ProgressBarAnimation.js';
|
|
10
|
+
import { LabelProps } from './LabelProps.js';
|
|
11
|
+
/**
|
|
12
|
+
* Represents the props of the [KendoReact ProgressBar component](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar).
|
|
13
|
+
*/
|
|
14
|
+
export interface ProgressBarProps extends BaseProps {
|
|
15
|
+
/**
|
|
16
|
+
* Configures the animation settings of the ProgressBar. Defaults to `false`.
|
|
17
|
+
* If set to a boolean, it enables or disables the default animation.
|
|
18
|
+
* If set to a `ProgressBarAnimation` object, it allows customization of the slide animation duration in milliseconds.
|
|
19
|
+
*
|
|
20
|
+
* @default false
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* ```jsx
|
|
24
|
+
* <ProgressBar animation={{ duration: 500 }} />
|
|
25
|
+
* ```
|
|
26
|
+
*/
|
|
27
|
+
animation?: boolean | ProgressBarAnimation;
|
|
28
|
+
/**
|
|
29
|
+
* Provides a custom label component for the ProgressBar ([see example](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar/label)).
|
|
30
|
+
*
|
|
31
|
+
* @example
|
|
32
|
+
* ```jsx
|
|
33
|
+
* const CustomLabel = (props) => <span>{props.value}%</span>;
|
|
34
|
+
* <ProgressBar label={CustomLabel} />
|
|
35
|
+
* ```
|
|
36
|
+
*/
|
|
37
|
+
label?: React.ComponentType<LabelProps>;
|
|
38
|
+
/**
|
|
39
|
+
* Determines whether the progress status label is visible. Defaults to `true`.
|
|
40
|
+
*
|
|
41
|
+
* @default true
|
|
42
|
+
*
|
|
43
|
+
* @example
|
|
44
|
+
* ```jsx
|
|
45
|
+
* <ProgressBar labelVisible={false} />
|
|
46
|
+
* ```
|
|
47
|
+
*/
|
|
48
|
+
labelVisible?: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* Specifies the position of the progress status label. Defaults to `end` ([see example](https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar/label)).
|
|
51
|
+
*
|
|
52
|
+
* @default "end"
|
|
53
|
+
*
|
|
54
|
+
* @example
|
|
55
|
+
* ```jsx
|
|
56
|
+
* <ProgressBar labelPlacement="center" />
|
|
57
|
+
* ```
|
|
58
|
+
*/
|
|
59
|
+
labelPlacement?: 'start' | 'center' | 'end';
|
|
60
|
+
}
|