@progress/kendo-react-progressbars 6.1.1 → 7.0.0-develop.1

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.
Files changed (71) hide show
  1. package/LICENSE.md +1 -1
  2. package/{dist/es/chunkprogressbar → chunkprogressbar}/ChunkProgressBar.d.ts +4 -0
  3. package/chunkprogressbar/interfaces/ChunkProgressBarHandle.d.ts +17 -0
  4. package/{dist/es/chunkprogressbar → chunkprogressbar}/interfaces/ChunkProgressBarProps.d.ts +4 -0
  5. package/{dist/es/common → common}/BaseProps.d.ts +4 -1
  6. package/common/constants.d.ts +20 -0
  7. package/{dist/es/common → common}/utils.d.ts +4 -0
  8. package/dist/cdn/js/kendo-react-progressbars.js +5 -1
  9. package/{dist/es/main.d.ts → index.d.ts} +4 -0
  10. package/index.js +5 -0
  11. package/index.mjs +271 -0
  12. package/package-metadata.d.ts +9 -0
  13. package/package.json +27 -38
  14. package/{dist/npm/progressbar → progressbar}/ProgressBar.d.ts +4 -0
  15. package/progressbar/hooks/usePrevious.d.ts +6 -0
  16. package/progressbar/interfaces/LabelProps.d.ts +13 -0
  17. package/progressbar/interfaces/ProgressBarAnimation.d.ts +13 -0
  18. package/{dist/es/progressbar → progressbar}/interfaces/ProgressBarHandle.d.ts +4 -0
  19. package/{dist/es/progressbar → progressbar}/interfaces/ProgressBarProps.d.ts +4 -1
  20. package/about.md +0 -3
  21. package/dist/es/chunkprogressbar/ChunkProgressBar.js +0 -121
  22. package/dist/es/chunkprogressbar/interfaces/ChunkProgressBarHandle.d.ts +0 -13
  23. package/dist/es/chunkprogressbar/interfaces/ChunkProgressBarHandle.js +0 -1
  24. package/dist/es/chunkprogressbar/interfaces/ChunkProgressBarProps.js +0 -1
  25. package/dist/es/common/BaseProps.js +0 -1
  26. package/dist/es/common/constants.d.ts +0 -16
  27. package/dist/es/common/constants.js +0 -16
  28. package/dist/es/common/utils.js +0 -34
  29. package/dist/es/main.js +0 -7
  30. package/dist/es/package-metadata.d.ts +0 -5
  31. package/dist/es/package-metadata.js +0 -11
  32. package/dist/es/progressbar/ProgressBar.d.ts +0 -17
  33. package/dist/es/progressbar/ProgressBar.js +0 -145
  34. package/dist/es/progressbar/hooks/usePrevious.d.ts +0 -2
  35. package/dist/es/progressbar/hooks/usePrevious.js +0 -9
  36. package/dist/es/progressbar/interfaces/LabelProps.d.ts +0 -9
  37. package/dist/es/progressbar/interfaces/LabelProps.js +0 -1
  38. package/dist/es/progressbar/interfaces/ProgressBarAnimation.d.ts +0 -9
  39. package/dist/es/progressbar/interfaces/ProgressBarAnimation.js +0 -1
  40. package/dist/es/progressbar/interfaces/ProgressBarHandle.js +0 -4
  41. package/dist/es/progressbar/interfaces/ProgressBarProps.js +0 -1
  42. package/dist/npm/chunkprogressbar/ChunkProgressBar.d.ts +0 -17
  43. package/dist/npm/chunkprogressbar/ChunkProgressBar.js +0 -124
  44. package/dist/npm/chunkprogressbar/interfaces/ChunkProgressBarHandle.d.ts +0 -13
  45. package/dist/npm/chunkprogressbar/interfaces/ChunkProgressBarHandle.js +0 -2
  46. package/dist/npm/chunkprogressbar/interfaces/ChunkProgressBarProps.d.ts +0 -10
  47. package/dist/npm/chunkprogressbar/interfaces/ChunkProgressBarProps.js +0 -2
  48. package/dist/npm/common/BaseProps.d.ts +0 -83
  49. package/dist/npm/common/BaseProps.js +0 -2
  50. package/dist/npm/common/constants.d.ts +0 -16
  51. package/dist/npm/common/constants.js +0 -19
  52. package/dist/npm/common/utils.d.ts +0 -17
  53. package/dist/npm/common/utils.js +0 -41
  54. package/dist/npm/main.d.ts +0 -7
  55. package/dist/npm/main.js +0 -23
  56. package/dist/npm/package-metadata.d.ts +0 -5
  57. package/dist/npm/package-metadata.js +0 -14
  58. package/dist/npm/progressbar/ProgressBar.js +0 -148
  59. package/dist/npm/progressbar/hooks/usePrevious.d.ts +0 -2
  60. package/dist/npm/progressbar/hooks/usePrevious.js +0 -13
  61. package/dist/npm/progressbar/interfaces/LabelProps.d.ts +0 -9
  62. package/dist/npm/progressbar/interfaces/LabelProps.js +0 -2
  63. package/dist/npm/progressbar/interfaces/ProgressBarAnimation.d.ts +0 -9
  64. package/dist/npm/progressbar/interfaces/ProgressBarAnimation.js +0 -2
  65. package/dist/npm/progressbar/interfaces/ProgressBarHandle.d.ts +0 -21
  66. package/dist/npm/progressbar/interfaces/ProgressBarHandle.js +0 -5
  67. package/dist/npm/progressbar/interfaces/ProgressBarProps.d.ts +0 -27
  68. package/dist/npm/progressbar/interfaces/ProgressBarProps.js +0 -2
  69. package/dist/systemjs/kendo-react-progressbars.js +0 -1
  70. package/e2e-next/chunkprogressbar.basic.tests.ts +0 -24
  71. package/e2e-next/progressbar.basic.tests.ts +0 -24
@@ -1,124 +0,0 @@
1
- "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- Object.defineProperty(exports, "__esModule", { value: true });
14
- exports.ChunkProgressBar = void 0;
15
- var React = require("react");
16
- var PropTypes = require("prop-types");
17
- var kendo_react_common_1 = require("@progress/kendo-react-common");
18
- var utils_1 = require("../common/utils");
19
- var kendo_react_common_2 = require("@progress/kendo-react-common");
20
- var package_metadata_1 = require("../package-metadata");
21
- /**
22
- * Represents the [KendoReact ChunkProgressBar component]({% slug overview_chunkprogressbar %}).
23
- *
24
- * @example
25
- * ```jsx
26
- * const App = () => {
27
- * return (
28
- * <ChunkProgressBar value={40}/>
29
- * );
30
- * };
31
- * ReactDOM.render(<App />, document.querySelector('my-app'));
32
- * ```
33
- */
34
- exports.ChunkProgressBar = React.forwardRef(function (props, target) {
35
- (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
36
- var _a = props.chunkCount, chunkCount = _a === void 0 ? defaultProps.chunkCount : _a, className = props.className, disabled = props.disabled, orientation = props.orientation, _b = props.min, min = _b === void 0 ? defaultProps.min : _b, _c = props.max, max = _c === void 0 ? defaultProps.max : _c, _d = props.reverse, reverse = _d === void 0 ? defaultProps.reverse : _d, style = props.style, tabIndex = props.tabIndex, emptyStyle = props.emptyStyle, emptyClassName = props.emptyClassName, progressStyle = props.progressStyle, progressClassName = props.progressClassName;
37
- var elementRef = React.useRef(null);
38
- var focusElement = React.useCallback(function () {
39
- if (elementRef.current) {
40
- elementRef.current.focus();
41
- }
42
- }, []);
43
- React.useImperativeHandle(target, function () { return ({
44
- element: elementRef.current,
45
- focus: focusElement
46
- }); });
47
- var value = (props.value || defaultProps.value);
48
- var indeterminateProp = props.value === null;
49
- var dir = (0, kendo_react_common_1.useRtl)(elementRef, props.dir);
50
- var isVertical = orientation === 'vertical';
51
- var wrapperProps = {
52
- className: (0, kendo_react_common_1.classNames)('k-progressbar k-chunk-progressbar', {
53
- 'k-progressbar-horizontal': !isVertical,
54
- 'k-progressbar-vertical': isVertical,
55
- 'k-progressbar-reverse': reverse,
56
- 'k-progressbar-indeterminate': indeterminateProp,
57
- 'k-disabled': disabled
58
- }, className),
59
- ref: elementRef,
60
- dir: dir,
61
- tabIndex: (0, kendo_react_common_1.getTabIndex)(tabIndex, disabled),
62
- role: 'progressbar',
63
- 'aria-label': props.ariaLabel,
64
- 'aria-valuemin': min,
65
- 'aria-valuemax': max,
66
- 'aria-valuenow': indeterminateProp ? undefined : value,
67
- 'aria-disabled': disabled,
68
- style: style
69
- };
70
- var Chunks = function (_a) {
71
- var count = _a.count;
72
- var chunks = [];
73
- var chunkSizePercentage = 100 / count + '%';
74
- var progressRatio = (0, utils_1.calculateRatio)(min, max, value);
75
- var completedChunksCount = Math.floor(progressRatio * count);
76
- var completedChunks = Array(count).fill(false);
77
- for (var i = 0; i < completedChunksCount; i++) {
78
- completedChunks[i] = true;
79
- }
80
- for (var i = 0; i < count; ++i) {
81
- var isComplete = completedChunks[i];
82
- var classes = isComplete ? progressClassName : emptyClassName;
83
- var layoutStyles = {
84
- width: !isVertical ? chunkSizePercentage : undefined,
85
- height: isVertical ? chunkSizePercentage : undefined
86
- };
87
- var styles = isComplete ? progressStyle : emptyStyle;
88
- var mergedStyles = __assign(__assign({}, layoutStyles), styles);
89
- chunks.push(React.createElement("li", { key: i, className: (0, kendo_react_common_1.classNames)('k-progress-chunk', {
90
- 'k-first': i === 0,
91
- 'k-last': i === count - 1,
92
- 'k-selected': isComplete
93
- }, classes), style: mergedStyles }));
94
- }
95
- return React.createElement(React.Fragment, null, chunks);
96
- };
97
- return (React.createElement("div", __assign({}, wrapperProps),
98
- React.createElement("ul", { className: 'k-progressbar-chunks k-reset' },
99
- React.createElement(Chunks, { count: chunkCount || defaultProps.chunkCount }))));
100
- });
101
- exports.ChunkProgressBar.propTypes = {
102
- chunkCount: PropTypes.number,
103
- ariaLabel: PropTypes.string,
104
- disabled: PropTypes.bool,
105
- reverse: PropTypes.bool,
106
- max: PropTypes.number,
107
- min: PropTypes.number,
108
- value: PropTypes.number,
109
- tabIndex: PropTypes.number,
110
- emptyStyle: PropTypes.object,
111
- emptyClassName: PropTypes.string,
112
- progressStyle: PropTypes.object,
113
- progressClassName: PropTypes.string
114
- };
115
- var defaultProps = {
116
- chunkCount: 5,
117
- min: 0,
118
- max: 100,
119
- value: 0,
120
- disabled: false,
121
- reverse: false
122
- };
123
- exports.ChunkProgressBar.defaultProps = defaultProps;
124
- exports.ChunkProgressBar.displayName = 'KendoChunkProgressBar';
@@ -1,13 +0,0 @@
1
- /**
2
- * The ChunkProgressBar ref.
3
- */
4
- export interface ChunkProgressBarHandle {
5
- /**
6
- * The ChunkProgressBar element.
7
- */
8
- element: HTMLDivElement | null;
9
- /**
10
- * Focus the ChunkProgressBar.
11
- */
12
- focus: () => void;
13
- }
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
@@ -1,10 +0,0 @@
1
- import { BaseProps } from '../../common/BaseProps';
2
- /**
3
- * Represents the props of the [KendoReact ChunkProgressBar component]({% slug overview_chunkprogressbar %}).
4
- */
5
- export interface ChunkProgressBarProps extends BaseProps {
6
- /**
7
- * Sets the number of chunks into which the ChunkProgressBar will be split. Defaults to `5`.
8
- */
9
- chunkCount?: number;
10
- }
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
@@ -1,83 +0,0 @@
1
- /// <reference types="react" />
2
- /**
3
- * @hidden
4
- */
5
- export interface BaseProps {
6
- /**
7
- * Sets one of the two visually distinct types of progress bar.
8
- *
9
- * @hidden
10
- */
11
- type?: 'linear' | 'circular';
12
- /**
13
- * Sets the value of the progress bar. Has to be between `min` and `max` values. Defaults to `0`.
14
- * Set `null` to enable the indeterminate state of the progress bar.
15
- * See examples ([here]({% slug overview_progressbar %})) and ([here]({% slug overview_chunkprogressbar %})).
16
- */
17
- value?: number | null;
18
- /**
19
- * The minimum value of the progress bar. Defaults to `0`.
20
- */
21
- min?: number;
22
- /**
23
- * The maximum value of the progress bar. Defaults to `100`.
24
- */
25
- max?: number;
26
- /**
27
- * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
28
- */
29
- dir?: string;
30
- /**
31
- * The accessible label of the component.
32
- */
33
- ariaLabel?: string;
34
- /**
35
- * Sets the disabled state of the progress bar.
36
- * See examples ([here]({% slug progressbar_disabled %})) and ([here]({% slug chunkprogressbar_disabled %})).
37
- */
38
- disabled?: boolean;
39
- /**
40
- * Defines the orientation of the progress bar.
41
- * See examples ([here]({% slug progressbar_orientation %})) and ([here]({% slug chunkprogressbar_orientation %})).
42
- * Defaults to `horizontal`.
43
- */
44
- orientation?: 'horizontal' | 'vertical';
45
- /**
46
- * If set to `true`, the progress bar will be reversed.
47
- * See examples ([here]({% slug progressbar_direction %})) and ([here]({% slug chunkprogressbar_direction %})).
48
- * Defaults to `false`.
49
- */
50
- reverse?: boolean;
51
- /**
52
- * Specifies a list of CSS classes that will be added to the progress bar element.
53
- */
54
- className?: string;
55
- /**
56
- * Sets additional CSS styles to the progress bar.
57
- */
58
- style?: React.CSSProperties;
59
- /**
60
- * The styles that are applied to the inner element which represents the empty portion of the progress bar.
61
- * See examples ([here]({% slug progressbar_appearance %})) and ([here]({% slug chunkprogressbar_appearance %})).
62
- */
63
- emptyStyle?: React.CSSProperties;
64
- /**
65
- * Sets additional classes to the inner element which represents the empty portion of the progress bar.
66
- * See examples ([here]({% slug progressbar_appearance %})) and ([here]({% slug chunkprogressbar_appearance %})).
67
- */
68
- emptyClassName?: string;
69
- /**
70
- * The styles that are applied to the inner element which represents the full portion of the progress bar.
71
- * See examples ([here]({% slug progressbar_appearance %})) and ([here]({% slug chunkprogressbar_appearance %})).
72
- */
73
- progressStyle?: React.CSSProperties;
74
- /**
75
- * Sets additional classes to the inner element which represents the full portion of the progress bar.
76
- * See examples ([here]({% slug progressbar_appearance %})) and ([here]({% slug chunkprogressbar_appearance %})).
77
- */
78
- progressClassName?: string;
79
- /**
80
- * Sets the `tabIndex` property of the progress bar.
81
- */
82
- tabIndex?: number;
83
- }
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
@@ -1,16 +0,0 @@
1
- /**
2
- * @hidden
3
- */
4
- export declare const MIN_RATIO = 0.00001;
5
- /**
6
- * @hidden
7
- */
8
- export declare const LABEL_DECIMALS = 3;
9
- /**
10
- * @hidden
11
- */
12
- export declare const DEFAULT_ANIMATION_DURATION = 400;
13
- /**
14
- * @hidden
15
- */
16
- export declare const NO_ANIMATION = 0;
@@ -1,19 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.NO_ANIMATION = exports.DEFAULT_ANIMATION_DURATION = exports.LABEL_DECIMALS = exports.MIN_RATIO = void 0;
4
- /**
5
- * @hidden
6
- */
7
- exports.MIN_RATIO = 0.00001;
8
- /**
9
- * @hidden
10
- */
11
- exports.LABEL_DECIMALS = 3;
12
- /**
13
- * @hidden
14
- */
15
- exports.DEFAULT_ANIMATION_DURATION = 400;
16
- /**
17
- * @hidden
18
- */
19
- exports.NO_ANIMATION = 0;
@@ -1,17 +0,0 @@
1
- import * as React from 'react';
2
- /**
3
- * @hidden
4
- */
5
- export declare const truncateNumber: (value: number) => string;
6
- /**
7
- * @hidden
8
- */
9
- export declare const calculatePercentage: (min: number, max: number, value: number) => number;
10
- /**
11
- * @hidden
12
- */
13
- export declare const updateProgress: (progressRef: React.RefObject<HTMLDivElement>, progressWrapRef: React.RefObject<HTMLSpanElement>, percentage: number, isVertical: boolean) => void;
14
- /**
15
- * @hidden
16
- */
17
- export declare const calculateRatio: (min: number, max: number, value: number) => number;
@@ -1,41 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.calculateRatio = exports.updateProgress = exports.calculatePercentage = exports.truncateNumber = void 0;
4
- var constants_1 = require("./constants");
5
- /**
6
- * @hidden
7
- */
8
- var truncateNumber = function (value) {
9
- var numberParts = value.toString().split('.');
10
- return numberParts.length === 1 ? "".concat(numberParts[0]) : "".concat(numberParts[0], ".").concat(numberParts[1].substr(0, constants_1.LABEL_DECIMALS));
11
- };
12
- exports.truncateNumber = truncateNumber;
13
- /**
14
- * @hidden
15
- */
16
- var calculatePercentage = function (min, max, value) {
17
- var onePercent = Math.abs((max - min) / 100);
18
- return Math.abs((value - min) / onePercent);
19
- };
20
- exports.calculatePercentage = calculatePercentage;
21
- /**
22
- * @hidden
23
- */
24
- var updateProgress = function (progressRef, progressWrapRef, percentage, isVertical) {
25
- var progressPercentage = Math.max(percentage, 0.01);
26
- var progressWrapPercentage = (100 / progressPercentage) * 100;
27
- if (progressRef.current && progressWrapRef.current) {
28
- progressRef.current.style.width = !isVertical ? "".concat(progressPercentage, "%") : '100%';
29
- progressWrapRef.current.style.width = !isVertical ? "".concat(progressWrapPercentage, "%") : '100%';
30
- progressRef.current.style.height = isVertical ? "".concat(progressPercentage, "%") : '100%';
31
- progressWrapRef.current.style.height = isVertical ? "".concat(progressWrapPercentage, "%") : '100%';
32
- }
33
- };
34
- exports.updateProgress = updateProgress;
35
- /**
36
- * @hidden
37
- */
38
- var calculateRatio = function (min, max, value) {
39
- return Math.max((value - min) / (max - min), constants_1.MIN_RATIO);
40
- };
41
- exports.calculateRatio = calculateRatio;
@@ -1,7 +0,0 @@
1
- export * from './chunkprogressbar/ChunkProgressBar';
2
- export * from './chunkprogressbar/interfaces/ChunkProgressBarProps';
3
- export * from './progressbar/ProgressBar';
4
- export * from './progressbar/interfaces/ProgressBarHandle';
5
- export * from './progressbar/interfaces/ProgressBarProps';
6
- export * from './progressbar/interfaces/ProgressBarAnimation';
7
- export * from './progressbar/interfaces/LabelProps';
package/dist/npm/main.js DELETED
@@ -1,23 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
- for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
- };
16
- Object.defineProperty(exports, "__esModule", { value: true });
17
- __exportStar(require("./chunkprogressbar/ChunkProgressBar"), exports);
18
- __exportStar(require("./chunkprogressbar/interfaces/ChunkProgressBarProps"), exports);
19
- __exportStar(require("./progressbar/ProgressBar"), exports);
20
- __exportStar(require("./progressbar/interfaces/ProgressBarHandle"), exports);
21
- __exportStar(require("./progressbar/interfaces/ProgressBarProps"), exports);
22
- __exportStar(require("./progressbar/interfaces/ProgressBarAnimation"), exports);
23
- __exportStar(require("./progressbar/interfaces/LabelProps"), exports);
@@ -1,5 +0,0 @@
1
- import { PackageMetadata } from '@progress/kendo-licensing';
2
- /**
3
- * @hidden
4
- */
5
- export declare const packageMetadata: PackageMetadata;
@@ -1,14 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.packageMetadata = void 0;
4
- /**
5
- * @hidden
6
- */
7
- exports.packageMetadata = {
8
- name: '@progress/kendo-react-progressbars',
9
- productName: 'KendoReact',
10
- productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
11
- publishDate: 1700063549,
12
- version: '',
13
- licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
14
- };
@@ -1,148 +0,0 @@
1
- "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- Object.defineProperty(exports, "__esModule", { value: true });
14
- exports.ProgressBar = void 0;
15
- var React = require("react");
16
- var PropTypes = require("prop-types");
17
- var kendo_react_animation_1 = require("@progress/kendo-react-animation");
18
- var kendo_react_common_1 = require("@progress/kendo-react-common");
19
- var utils_1 = require("../common/utils");
20
- var usePrevious_1 = require("./hooks/usePrevious");
21
- var constants_1 = require("../common/constants");
22
- var kendo_react_common_2 = require("@progress/kendo-react-common");
23
- var package_metadata_1 = require("../package-metadata");
24
- /**
25
- * Represents the [KendoReact ProgressBar component]({% slug overview_progressbar %}).
26
- *
27
- * @example
28
- * ```jsx
29
- * const App = () => {
30
- * return (
31
- * <ProgressBar value={75}/>
32
- * );
33
- * };
34
- * ReactDOM.render(<App />, document.querySelector('my-app'));
35
- * ```
36
- */
37
- exports.ProgressBar = React.forwardRef(function (props, target) {
38
- (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
39
- var animation = props.animation, disabled = props.disabled, _a = props.reverse, reverse = _a === void 0 ? defaultProps.reverse : _a, orientation = props.orientation, labelVisible = props.labelVisible, labelPlacement = props.labelPlacement, _b = props.max, max = _b === void 0 ? defaultProps.max : _b, _c = props.min, min = _c === void 0 ? defaultProps.min : _c, tabIndex = props.tabIndex, className = props.className, style = props.style, emptyStyle = props.emptyStyle, emptyClassName = props.emptyClassName, progressStyle = props.progressStyle, progressClassName = props.progressClassName;
40
- var elementRef = React.useRef(null);
41
- var progressStatusRef = React.useRef(null);
42
- var progressStatusWrapRef = React.useRef(null);
43
- var focusElement = React.useCallback(function () {
44
- if (elementRef.current) {
45
- elementRef.current.focus();
46
- }
47
- }, []);
48
- React.useImperativeHandle(target, function () { return ({
49
- element: elementRef.current,
50
- progressStatusElement: progressStatusRef.current,
51
- progressStatusWrapElement: progressStatusWrapRef.current,
52
- focus: focusElement
53
- }); });
54
- var value = (props.value || defaultProps.value);
55
- var prevValue = (0, usePrevious_1.usePrevious)(value);
56
- var indeterminateProp = props.value === null;
57
- var dir = (0, kendo_react_common_1.useRtl)(elementRef, props.dir);
58
- var isVertical = orientation === 'vertical';
59
- var formattedLabel = (0, utils_1.truncateNumber)(value);
60
- var labelProps = {
61
- value: value
62
- };
63
- var renderLabel = (labelVisible
64
- ? props.label
65
- ? React.createElement("span", { className: 'k-progress-status' },
66
- React.createElement(props.label, __assign({}, labelProps)))
67
- : React.createElement("span", { className: 'k-progress-status' }, formattedLabel)
68
- : undefined);
69
- var wrapperProps = {
70
- className: (0, kendo_react_common_1.classNames)('k-progressbar', {
71
- 'k-progressbar-horizontal': !isVertical,
72
- 'k-progressbar-vertical': isVertical,
73
- 'k-progressbar-reverse': reverse,
74
- 'k-progressbar-indeterminate': indeterminateProp,
75
- 'k-disabled': disabled
76
- }, className),
77
- ref: elementRef,
78
- dir: dir,
79
- tabIndex: (0, kendo_react_common_1.getTabIndex)(tabIndex, disabled),
80
- role: 'progressbar',
81
- 'aria-label': props.ariaLabel,
82
- 'aria-valuemin': min,
83
- 'aria-valuemax': max,
84
- 'aria-valuenow': indeterminateProp ? undefined : value,
85
- 'aria-disabled': disabled,
86
- style: style
87
- };
88
- var positionClasses = (0, kendo_react_common_1.classNames)('k-progress-status-wrap', {
89
- 'k-progress-start': labelPlacement === 'start',
90
- 'k-progress-center': labelPlacement === 'center',
91
- 'k-progress-end': labelPlacement === 'end' || labelPlacement === undefined
92
- });
93
- var animationDuration = typeof animation !== 'boolean' && animation !== undefined
94
- ? animation.duration
95
- : animation
96
- ? constants_1.DEFAULT_ANIMATION_DURATION
97
- : constants_1.NO_ANIMATION;
98
- var handleStart = React.useCallback(function () {
99
- var percentage = (0, utils_1.calculatePercentage)(min, max, prevValue);
100
- (0, utils_1.updateProgress)(progressStatusRef, progressStatusWrapRef, percentage, isVertical);
101
- }, [isVertical, max, min, prevValue]);
102
- var handleUpdate = React.useCallback(function (progress) {
103
- var percentage = (0, utils_1.calculatePercentage)(min, max, prevValue + (value - prevValue) * progress);
104
- (0, utils_1.updateProgress)(progressStatusRef, progressStatusWrapRef, percentage, isVertical);
105
- }, [min, max, prevValue, value, isVertical]);
106
- var handleEnd = React.useCallback(function () {
107
- var percentage = (0, utils_1.calculatePercentage)(min, max, value);
108
- (0, utils_1.updateProgress)(progressStatusRef, progressStatusWrapRef, percentage, isVertical);
109
- }, [isVertical, max, min, value]);
110
- (0, kendo_react_animation_1.useAnimation)({
111
- duration: animationDuration,
112
- onStart: handleStart,
113
- onUpdate: handleUpdate,
114
- onEnd: handleEnd
115
- }, [value, animationDuration]);
116
- return (React.createElement("div", __assign({}, wrapperProps),
117
- React.createElement("span", { className: positionClasses + (emptyClassName ? ' ' + emptyClassName : ''), style: emptyStyle }, renderLabel),
118
- React.createElement("div", { className: 'k-progressbar-value k-selected', style: progressStyle, ref: progressStatusRef },
119
- React.createElement("span", { className: positionClasses + (progressClassName ? ' ' + progressClassName : ''), ref: progressStatusWrapRef }, renderLabel))));
120
- });
121
- exports.ProgressBar.propTypes = {
122
- animation: PropTypes.any,
123
- ariaLabel: PropTypes.string,
124
- disabled: PropTypes.bool,
125
- reverse: PropTypes.bool,
126
- label: PropTypes.any,
127
- labelVisible: PropTypes.bool,
128
- labelPlacement: PropTypes.oneOf(['start', 'center', 'end']),
129
- max: PropTypes.number,
130
- min: PropTypes.number,
131
- value: PropTypes.number,
132
- tabIndex: PropTypes.number,
133
- emptyStyle: PropTypes.object,
134
- emptyClassName: PropTypes.string,
135
- progressStyle: PropTypes.object,
136
- progressClassName: PropTypes.string
137
- };
138
- var defaultProps = {
139
- animation: false,
140
- min: 0,
141
- max: 100,
142
- value: 0,
143
- disabled: false,
144
- reverse: false,
145
- labelVisible: true
146
- };
147
- exports.ProgressBar.defaultProps = defaultProps;
148
- exports.ProgressBar.displayName = 'KendoProgressBar';
@@ -1,2 +0,0 @@
1
- /** @hidden */
2
- export declare const usePrevious: (value: any) => any;
@@ -1,13 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.usePrevious = void 0;
4
- var React = require("react");
5
- /** @hidden */
6
- var usePrevious = function (value) {
7
- var ref = React.useRef();
8
- React.useEffect(function () {
9
- ref.current = value;
10
- });
11
- return ref.current;
12
- };
13
- exports.usePrevious = usePrevious;
@@ -1,9 +0,0 @@
1
- /**
2
- * An interface for the ProgressBar label.
3
- */
4
- export interface LabelProps {
5
- /**
6
- * Represents the current value of the ProgressBar.
7
- */
8
- value?: number | null;
9
- }
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
@@ -1,9 +0,0 @@
1
- /**
2
- * Specifies the animation settings of the ProgressBar.
3
- */
4
- export interface ProgressBarAnimation {
5
- /**
6
- * Specifies the duration of the ProgressBar animation. Defaults to `400`.
7
- */
8
- duration: number;
9
- }
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
@@ -1,21 +0,0 @@
1
- /**
2
- * The ProgressBar ref.
3
- */
4
- export interface ProgressBarHandle {
5
- /**
6
- * The ProgressBar element.
7
- */
8
- element: HTMLDivElement | null;
9
- /**
10
- * The progress status element.
11
- */
12
- progressStatusElement: HTMLDivElement | null;
13
- /**
14
- * The progress status wrap element.
15
- */
16
- progressStatusWrapElement: HTMLSpanElement | null;
17
- /**
18
- * Focus the ProgressBar.
19
- */
20
- focus: () => void;
21
- }
@@ -1,5 +0,0 @@
1
- "use strict";
2
- /**
3
- * The ProgressBar ref.
4
- */
5
- Object.defineProperty(exports, "__esModule", { value: true });
@@ -1,27 +0,0 @@
1
- /// <reference types="react" />
2
- import { BaseProps } from '../../common/BaseProps';
3
- import { ProgressBarAnimation } from './ProgressBarAnimation';
4
- import { LabelProps } from './LabelProps';
5
- /**
6
- * Represents the props of the [KendoReact ProgressBar component]({% slug overview_progressbar %}).
7
- */
8
- export interface ProgressBarProps extends BaseProps {
9
- /**
10
- * Specifies the animation settings of the ProgressBar. Defaults to `false`.
11
- * If boolean, enables or disables the default animation.
12
- * Use ProgressBarAnimation to set slide animation with customizable duration option. Accepts a number in milliseconds.
13
- */
14
- animation?: boolean | ProgressBarAnimation;
15
- /**
16
- * Overrides the default label ([see example]({% slug progressbar_label %})).
17
- */
18
- label?: React.ComponentType<LabelProps>;
19
- /**
20
- * Sets the visibility of the progress status label. Defaults to `true`.
21
- */
22
- labelVisible?: boolean;
23
- /**
24
- * Sets the position of the progress status label. Defaults to `end` ([see example]({% slug progressbar_label %})).
25
- */
26
- labelPlacement?: 'start' | 'center' | 'end';
27
- }
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });