@progress/kendo-react-progressbars 6.1.1-dev.202311151536 → 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
@@ -0,0 +1,9 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2023 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ import { PackageMetadata } from '@progress/kendo-licensing';
6
+ /**
7
+ * @hidden
8
+ */
9
+ export declare const packageMetadata: PackageMetadata;
package/package.json CHANGED
@@ -1,21 +1,29 @@
1
1
  {
2
2
  "name": "@progress/kendo-react-progressbars",
3
+ "version": "7.0.0-develop.1",
3
4
  "description": "React ProgressBars offer a customizable interface for users to track and display the progress of a task. KendoReact ProgressBars package",
4
- "version": "6.1.1-dev.202311151536",
5
- "repository": {
6
- "type": "git",
7
- "url": "https://github.com/telerik/kendo-react.git"
5
+ "author": "Progress",
6
+ "license": "SEE LICENSE IN LICENSE.md",
7
+ "homepage": "https://www.telerik.com/kendo-react-ui",
8
+ "main": "./index.js",
9
+ "types": "./index.d.ts",
10
+ "exports": {
11
+ ".": {
12
+ "import": "./index.mjs",
13
+ "require": "./index.js"
14
+ }
15
+ },
16
+ "sideEffects": false,
17
+ "peerDependencies": {
18
+ "@progress/kendo-licensing": "^1.3.0",
19
+ "@progress/kendo-react-animation": "7.0.0-develop.1",
20
+ "@progress/kendo-react-common": "7.0.0-develop.1",
21
+ "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
22
+ "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
8
23
  },
9
- "main": "dist/npm/main.js",
10
- "types": "dist/npm/main.d.ts",
11
- "module": "dist/es/main.js",
12
- "jsnext:main": "dist/es/main.js",
13
- "scripts": {
14
- "test": "cd ../../ && npm run test -- --testPathPattern=/packages/progressbars/.*",
15
- "start": "gulp start",
16
- "build-package": "gulp build-package"
24
+ "dependencies": {
25
+ "prop-types": "^15.6.0"
17
26
  },
18
- "homepage": "https://www.telerik.com/kendo-react-ui",
19
27
  "keywords": [
20
28
  "Kendo UI",
21
29
  "React",
@@ -30,34 +38,15 @@
30
38
  "React component",
31
39
  "Telerik"
32
40
  ],
33
- "peerDependencies": {
34
- "@progress/kendo-licensing": "^1.3.0",
35
- "@progress/kendo-react-animation": "^6.0.0",
36
- "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
37
- "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
38
- },
39
- "devDependencies": {
40
- "@progress/kendo-drawing": "^1.17.2",
41
- "@progress/kendo-licensing": "^1.3.0",
42
- "@progress/kendo-react-animation": "6.1.1-dev.202311151536",
43
- "@progress/kendo-react-buttons": "6.1.1-dev.202311151536",
44
- "@progress/kendo-react-dropdowns": "6.1.1-dev.202311151536",
45
- "@progress/kendo-react-form": "6.1.1-dev.202311151536",
46
- "@progress/kendo-react-inputs": "6.1.1-dev.202311151536",
47
- "@progress/kendo-react-intl": "6.1.1-dev.202311151536"
48
- },
49
- "dependencies": {
50
- "@progress/kendo-react-common": "6.1.1-dev.202311151536",
51
- "prop-types": "^15.6.0"
52
- },
53
41
  "@progress": {
54
42
  "friendlyName": "ProgressBars",
55
43
  "framework": "KendoReact"
56
44
  },
57
- "author": "Progress",
58
- "license": "SEE LICENSE IN LICENSE.md",
45
+ "repository": {
46
+ "type": "git",
47
+ "url": "https://github.com/telerik/kendo-react.git"
48
+ },
59
49
  "publishConfig": {
60
50
  "access": "public"
61
- },
62
- "sideEffects": false
63
- }
51
+ }
52
+ }
@@ -1,3 +1,7 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2023 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
4
+ *-------------------------------------------------------------------------------------------*/
1
5
  import * as React from 'react';
2
6
  import { ProgressBarProps } from './interfaces/ProgressBarProps';
3
7
  import { ProgressBarHandle } from './interfaces/ProgressBarHandle';
@@ -0,0 +1,6 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2023 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ /** @hidden */
6
+ export declare const usePrevious: (value: any) => any;
@@ -0,0 +1,13 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2023 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ /**
6
+ * An interface for the ProgressBar label.
7
+ */
8
+ export interface LabelProps {
9
+ /**
10
+ * Represents the current value of the ProgressBar.
11
+ */
12
+ value?: number | null;
13
+ }
@@ -0,0 +1,13 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2023 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ /**
6
+ * Specifies the animation settings of the ProgressBar.
7
+ */
8
+ export interface ProgressBarAnimation {
9
+ /**
10
+ * Specifies the duration of the ProgressBar animation. Defaults to `400`.
11
+ */
12
+ duration: number;
13
+ }
@@ -1,3 +1,7 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2023 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
4
+ *-------------------------------------------------------------------------------------------*/
1
5
  /**
2
6
  * The ProgressBar ref.
3
7
  */
@@ -1,4 +1,7 @@
1
- /// <reference types="react" />
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2023 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
4
+ *-------------------------------------------------------------------------------------------*/
2
5
  import { BaseProps } from '../../common/BaseProps';
3
6
  import { ProgressBarAnimation } from './ProgressBarAnimation';
4
7
  import { LabelProps } from './LabelProps';
package/about.md DELETED
@@ -1,3 +0,0 @@
1
- <a href="https://www.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-progressbars&utm_content=banner" target="_blank">
2
- <img src="https://www.telerik.com/kendo-react-ui/components/npm-banner.svg" alt="KendoReact NPM Banner">
3
- </a>
@@ -1,121 +0,0 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
- import * as React from 'react';
13
- import * as PropTypes from 'prop-types';
14
- import { classNames, useRtl, getTabIndex } from '@progress/kendo-react-common';
15
- import { calculateRatio } from '../common/utils';
16
- import { validatePackage } from '@progress/kendo-react-common';
17
- import { packageMetadata } from '../package-metadata';
18
- /**
19
- * Represents the [KendoReact ChunkProgressBar component]({% slug overview_chunkprogressbar %}).
20
- *
21
- * @example
22
- * ```jsx
23
- * const App = () => {
24
- * return (
25
- * <ChunkProgressBar value={40}/>
26
- * );
27
- * };
28
- * ReactDOM.render(<App />, document.querySelector('my-app'));
29
- * ```
30
- */
31
- export var ChunkProgressBar = React.forwardRef(function (props, target) {
32
- validatePackage(packageMetadata);
33
- 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;
34
- var elementRef = React.useRef(null);
35
- var focusElement = React.useCallback(function () {
36
- if (elementRef.current) {
37
- elementRef.current.focus();
38
- }
39
- }, []);
40
- React.useImperativeHandle(target, function () { return ({
41
- element: elementRef.current,
42
- focus: focusElement
43
- }); });
44
- var value = (props.value || defaultProps.value);
45
- var indeterminateProp = props.value === null;
46
- var dir = useRtl(elementRef, props.dir);
47
- var isVertical = orientation === 'vertical';
48
- var wrapperProps = {
49
- className: classNames('k-progressbar k-chunk-progressbar', {
50
- 'k-progressbar-horizontal': !isVertical,
51
- 'k-progressbar-vertical': isVertical,
52
- 'k-progressbar-reverse': reverse,
53
- 'k-progressbar-indeterminate': indeterminateProp,
54
- 'k-disabled': disabled
55
- }, className),
56
- ref: elementRef,
57
- dir: dir,
58
- tabIndex: getTabIndex(tabIndex, disabled),
59
- role: 'progressbar',
60
- 'aria-label': props.ariaLabel,
61
- 'aria-valuemin': min,
62
- 'aria-valuemax': max,
63
- 'aria-valuenow': indeterminateProp ? undefined : value,
64
- 'aria-disabled': disabled,
65
- style: style
66
- };
67
- var Chunks = function (_a) {
68
- var count = _a.count;
69
- var chunks = [];
70
- var chunkSizePercentage = 100 / count + '%';
71
- var progressRatio = calculateRatio(min, max, value);
72
- var completedChunksCount = Math.floor(progressRatio * count);
73
- var completedChunks = Array(count).fill(false);
74
- for (var i = 0; i < completedChunksCount; i++) {
75
- completedChunks[i] = true;
76
- }
77
- for (var i = 0; i < count; ++i) {
78
- var isComplete = completedChunks[i];
79
- var classes = isComplete ? progressClassName : emptyClassName;
80
- var layoutStyles = {
81
- width: !isVertical ? chunkSizePercentage : undefined,
82
- height: isVertical ? chunkSizePercentage : undefined
83
- };
84
- var styles = isComplete ? progressStyle : emptyStyle;
85
- var mergedStyles = __assign(__assign({}, layoutStyles), styles);
86
- chunks.push(React.createElement("li", { key: i, className: classNames('k-progress-chunk', {
87
- 'k-first': i === 0,
88
- 'k-last': i === count - 1,
89
- 'k-selected': isComplete
90
- }, classes), style: mergedStyles }));
91
- }
92
- return React.createElement(React.Fragment, null, chunks);
93
- };
94
- return (React.createElement("div", __assign({}, wrapperProps),
95
- React.createElement("ul", { className: 'k-progressbar-chunks k-reset' },
96
- React.createElement(Chunks, { count: chunkCount || defaultProps.chunkCount }))));
97
- });
98
- ChunkProgressBar.propTypes = {
99
- chunkCount: PropTypes.number,
100
- ariaLabel: PropTypes.string,
101
- disabled: PropTypes.bool,
102
- reverse: PropTypes.bool,
103
- max: PropTypes.number,
104
- min: PropTypes.number,
105
- value: PropTypes.number,
106
- tabIndex: PropTypes.number,
107
- emptyStyle: PropTypes.object,
108
- emptyClassName: PropTypes.string,
109
- progressStyle: PropTypes.object,
110
- progressClassName: PropTypes.string
111
- };
112
- var defaultProps = {
113
- chunkCount: 5,
114
- min: 0,
115
- max: 100,
116
- value: 0,
117
- disabled: false,
118
- reverse: false
119
- };
120
- ChunkProgressBar.defaultProps = defaultProps;
121
- 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 +0,0 @@
1
- export {};
@@ -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,16 +0,0 @@
1
- /**
2
- * @hidden
3
- */
4
- export var MIN_RATIO = 0.00001;
5
- /**
6
- * @hidden
7
- */
8
- export var LABEL_DECIMALS = 3;
9
- /**
10
- * @hidden
11
- */
12
- export var DEFAULT_ANIMATION_DURATION = 400;
13
- /**
14
- * @hidden
15
- */
16
- export var NO_ANIMATION = 0;
@@ -1,34 +0,0 @@
1
- import { LABEL_DECIMALS, MIN_RATIO } from './constants';
2
- /**
3
- * @hidden
4
- */
5
- export var truncateNumber = function (value) {
6
- var numberParts = value.toString().split('.');
7
- return numberParts.length === 1 ? "".concat(numberParts[0]) : "".concat(numberParts[0], ".").concat(numberParts[1].substr(0, LABEL_DECIMALS));
8
- };
9
- /**
10
- * @hidden
11
- */
12
- export var calculatePercentage = function (min, max, value) {
13
- var onePercent = Math.abs((max - min) / 100);
14
- return Math.abs((value - min) / onePercent);
15
- };
16
- /**
17
- * @hidden
18
- */
19
- export var updateProgress = function (progressRef, progressWrapRef, percentage, isVertical) {
20
- var progressPercentage = Math.max(percentage, 0.01);
21
- var progressWrapPercentage = (100 / progressPercentage) * 100;
22
- if (progressRef.current && progressWrapRef.current) {
23
- progressRef.current.style.width = !isVertical ? "".concat(progressPercentage, "%") : '100%';
24
- progressWrapRef.current.style.width = !isVertical ? "".concat(progressWrapPercentage, "%") : '100%';
25
- progressRef.current.style.height = isVertical ? "".concat(progressPercentage, "%") : '100%';
26
- progressWrapRef.current.style.height = isVertical ? "".concat(progressWrapPercentage, "%") : '100%';
27
- }
28
- };
29
- /**
30
- * @hidden
31
- */
32
- export var calculateRatio = function (min, max, value) {
33
- return Math.max((value - min) / (max - min), MIN_RATIO);
34
- };
package/dist/es/main.js DELETED
@@ -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';
@@ -1,5 +0,0 @@
1
- import { PackageMetadata } from '@progress/kendo-licensing';
2
- /**
3
- * @hidden
4
- */
5
- export declare const packageMetadata: PackageMetadata;
@@ -1,11 +0,0 @@
1
- /**
2
- * @hidden
3
- */
4
- export var packageMetadata = {
5
- name: '@progress/kendo-react-progressbars',
6
- productName: 'KendoReact',
7
- productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
8
- publishDate: 1700059862,
9
- version: '',
10
- 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'
11
- };
@@ -1,17 +0,0 @@
1
- import * as React from 'react';
2
- import { ProgressBarProps } from './interfaces/ProgressBarProps';
3
- import { ProgressBarHandle } from './interfaces/ProgressBarHandle';
4
- /**
5
- * Represents the [KendoReact ProgressBar component]({% slug overview_progressbar %}).
6
- *
7
- * @example
8
- * ```jsx
9
- * const App = () => {
10
- * return (
11
- * <ProgressBar value={75}/>
12
- * );
13
- * };
14
- * ReactDOM.render(<App />, document.querySelector('my-app'));
15
- * ```
16
- */
17
- export declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<ProgressBarHandle | null>>;
@@ -1,145 +0,0 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
- import * as React from 'react';
13
- import * as PropTypes from 'prop-types';
14
- import { useAnimation } from '@progress/kendo-react-animation';
15
- import { classNames, useRtl, getTabIndex } from '@progress/kendo-react-common';
16
- import { calculatePercentage, updateProgress, truncateNumber } from '../common/utils';
17
- import { usePrevious } from './hooks/usePrevious';
18
- import { DEFAULT_ANIMATION_DURATION, NO_ANIMATION } from '../common/constants';
19
- import { validatePackage } from '@progress/kendo-react-common';
20
- import { packageMetadata } from '../package-metadata';
21
- /**
22
- * Represents the [KendoReact ProgressBar component]({% slug overview_progressbar %}).
23
- *
24
- * @example
25
- * ```jsx
26
- * const App = () => {
27
- * return (
28
- * <ProgressBar value={75}/>
29
- * );
30
- * };
31
- * ReactDOM.render(<App />, document.querySelector('my-app'));
32
- * ```
33
- */
34
- export var ProgressBar = React.forwardRef(function (props, target) {
35
- validatePackage(packageMetadata);
36
- 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;
37
- var elementRef = React.useRef(null);
38
- var progressStatusRef = React.useRef(null);
39
- var progressStatusWrapRef = React.useRef(null);
40
- var focusElement = React.useCallback(function () {
41
- if (elementRef.current) {
42
- elementRef.current.focus();
43
- }
44
- }, []);
45
- React.useImperativeHandle(target, function () { return ({
46
- element: elementRef.current,
47
- progressStatusElement: progressStatusRef.current,
48
- progressStatusWrapElement: progressStatusWrapRef.current,
49
- focus: focusElement
50
- }); });
51
- var value = (props.value || defaultProps.value);
52
- var prevValue = usePrevious(value);
53
- var indeterminateProp = props.value === null;
54
- var dir = useRtl(elementRef, props.dir);
55
- var isVertical = orientation === 'vertical';
56
- var formattedLabel = truncateNumber(value);
57
- var labelProps = {
58
- value: value
59
- };
60
- var renderLabel = (labelVisible
61
- ? props.label
62
- ? React.createElement("span", { className: 'k-progress-status' },
63
- React.createElement(props.label, __assign({}, labelProps)))
64
- : React.createElement("span", { className: 'k-progress-status' }, formattedLabel)
65
- : undefined);
66
- var wrapperProps = {
67
- className: classNames('k-progressbar', {
68
- 'k-progressbar-horizontal': !isVertical,
69
- 'k-progressbar-vertical': isVertical,
70
- 'k-progressbar-reverse': reverse,
71
- 'k-progressbar-indeterminate': indeterminateProp,
72
- 'k-disabled': disabled
73
- }, className),
74
- ref: elementRef,
75
- dir: dir,
76
- tabIndex: getTabIndex(tabIndex, disabled),
77
- role: 'progressbar',
78
- 'aria-label': props.ariaLabel,
79
- 'aria-valuemin': min,
80
- 'aria-valuemax': max,
81
- 'aria-valuenow': indeterminateProp ? undefined : value,
82
- 'aria-disabled': disabled,
83
- style: style
84
- };
85
- var positionClasses = classNames('k-progress-status-wrap', {
86
- 'k-progress-start': labelPlacement === 'start',
87
- 'k-progress-center': labelPlacement === 'center',
88
- 'k-progress-end': labelPlacement === 'end' || labelPlacement === undefined
89
- });
90
- var animationDuration = typeof animation !== 'boolean' && animation !== undefined
91
- ? animation.duration
92
- : animation
93
- ? DEFAULT_ANIMATION_DURATION
94
- : NO_ANIMATION;
95
- var handleStart = React.useCallback(function () {
96
- var percentage = calculatePercentage(min, max, prevValue);
97
- updateProgress(progressStatusRef, progressStatusWrapRef, percentage, isVertical);
98
- }, [isVertical, max, min, prevValue]);
99
- var handleUpdate = React.useCallback(function (progress) {
100
- var percentage = calculatePercentage(min, max, prevValue + (value - prevValue) * progress);
101
- updateProgress(progressStatusRef, progressStatusWrapRef, percentage, isVertical);
102
- }, [min, max, prevValue, value, isVertical]);
103
- var handleEnd = React.useCallback(function () {
104
- var percentage = calculatePercentage(min, max, value);
105
- updateProgress(progressStatusRef, progressStatusWrapRef, percentage, isVertical);
106
- }, [isVertical, max, min, value]);
107
- useAnimation({
108
- duration: animationDuration,
109
- onStart: handleStart,
110
- onUpdate: handleUpdate,
111
- onEnd: handleEnd
112
- }, [value, animationDuration]);
113
- return (React.createElement("div", __assign({}, wrapperProps),
114
- React.createElement("span", { className: positionClasses + (emptyClassName ? ' ' + emptyClassName : ''), style: emptyStyle }, renderLabel),
115
- React.createElement("div", { className: 'k-progressbar-value k-selected', style: progressStyle, ref: progressStatusRef },
116
- React.createElement("span", { className: positionClasses + (progressClassName ? ' ' + progressClassName : ''), ref: progressStatusWrapRef }, renderLabel))));
117
- });
118
- ProgressBar.propTypes = {
119
- animation: PropTypes.any,
120
- ariaLabel: PropTypes.string,
121
- disabled: PropTypes.bool,
122
- reverse: PropTypes.bool,
123
- label: PropTypes.any,
124
- labelVisible: PropTypes.bool,
125
- labelPlacement: PropTypes.oneOf(['start', 'center', 'end']),
126
- max: PropTypes.number,
127
- min: PropTypes.number,
128
- value: PropTypes.number,
129
- tabIndex: PropTypes.number,
130
- emptyStyle: PropTypes.object,
131
- emptyClassName: PropTypes.string,
132
- progressStyle: PropTypes.object,
133
- progressClassName: PropTypes.string
134
- };
135
- var defaultProps = {
136
- animation: false,
137
- min: 0,
138
- max: 100,
139
- value: 0,
140
- disabled: false,
141
- reverse: false,
142
- labelVisible: true
143
- };
144
- ProgressBar.defaultProps = defaultProps;
145
- ProgressBar.displayName = 'KendoProgressBar';
@@ -1,2 +0,0 @@
1
- /** @hidden */
2
- export declare const usePrevious: (value: any) => any;
@@ -1,9 +0,0 @@
1
- import * as React from 'react';
2
- /** @hidden */
3
- export var usePrevious = function (value) {
4
- var ref = React.useRef();
5
- React.useEffect(function () {
6
- ref.current = value;
7
- });
8
- return ref.current;
9
- };
@@ -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 +0,0 @@
1
- export {};
@@ -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,4 +0,0 @@
1
- /**
2
- * The ProgressBar ref.
3
- */
4
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1,17 +0,0 @@
1
- import * as React from 'react';
2
- import { ChunkProgressBarHandle } from './interfaces/ChunkProgressBarHandle';
3
- import { ChunkProgressBarProps } from './interfaces/ChunkProgressBarProps';
4
- /**
5
- * Represents the [KendoReact ChunkProgressBar component]({% slug overview_chunkprogressbar %}).
6
- *
7
- * @example
8
- * ```jsx
9
- * const App = () => {
10
- * return (
11
- * <ChunkProgressBar value={40}/>
12
- * );
13
- * };
14
- * ReactDOM.render(<App />, document.querySelector('my-app'));
15
- * ```
16
- */
17
- export declare const ChunkProgressBar: React.ForwardRefExoticComponent<ChunkProgressBarProps & React.RefAttributes<ChunkProgressBarHandle | null>>;