@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.
- package/LICENSE.md +1 -1
- package/{dist/es/chunkprogressbar → chunkprogressbar}/ChunkProgressBar.d.ts +4 -0
- package/chunkprogressbar/interfaces/ChunkProgressBarHandle.d.ts +17 -0
- package/{dist/es/chunkprogressbar → chunkprogressbar}/interfaces/ChunkProgressBarProps.d.ts +4 -0
- package/{dist/es/common → common}/BaseProps.d.ts +4 -1
- package/common/constants.d.ts +20 -0
- package/{dist/es/common → common}/utils.d.ts +4 -0
- package/dist/cdn/js/kendo-react-progressbars.js +5 -1
- package/{dist/es/main.d.ts → index.d.ts} +4 -0
- package/index.js +5 -0
- package/index.mjs +271 -0
- package/package-metadata.d.ts +9 -0
- package/package.json +27 -38
- package/{dist/npm/progressbar → progressbar}/ProgressBar.d.ts +4 -0
- package/progressbar/hooks/usePrevious.d.ts +6 -0
- package/progressbar/interfaces/LabelProps.d.ts +13 -0
- package/progressbar/interfaces/ProgressBarAnimation.d.ts +13 -0
- package/{dist/es/progressbar → progressbar}/interfaces/ProgressBarHandle.d.ts +4 -0
- package/{dist/es/progressbar → progressbar}/interfaces/ProgressBarProps.d.ts +4 -1
- package/about.md +0 -3
- package/dist/es/chunkprogressbar/ChunkProgressBar.js +0 -121
- package/dist/es/chunkprogressbar/interfaces/ChunkProgressBarHandle.d.ts +0 -13
- package/dist/es/chunkprogressbar/interfaces/ChunkProgressBarHandle.js +0 -1
- package/dist/es/chunkprogressbar/interfaces/ChunkProgressBarProps.js +0 -1
- package/dist/es/common/BaseProps.js +0 -1
- package/dist/es/common/constants.d.ts +0 -16
- package/dist/es/common/constants.js +0 -16
- package/dist/es/common/utils.js +0 -34
- package/dist/es/main.js +0 -7
- package/dist/es/package-metadata.d.ts +0 -5
- package/dist/es/package-metadata.js +0 -11
- package/dist/es/progressbar/ProgressBar.d.ts +0 -17
- package/dist/es/progressbar/ProgressBar.js +0 -145
- package/dist/es/progressbar/hooks/usePrevious.d.ts +0 -2
- package/dist/es/progressbar/hooks/usePrevious.js +0 -9
- package/dist/es/progressbar/interfaces/LabelProps.d.ts +0 -9
- package/dist/es/progressbar/interfaces/LabelProps.js +0 -1
- package/dist/es/progressbar/interfaces/ProgressBarAnimation.d.ts +0 -9
- package/dist/es/progressbar/interfaces/ProgressBarAnimation.js +0 -1
- package/dist/es/progressbar/interfaces/ProgressBarHandle.js +0 -4
- package/dist/es/progressbar/interfaces/ProgressBarProps.js +0 -1
- package/dist/npm/chunkprogressbar/ChunkProgressBar.d.ts +0 -17
- package/dist/npm/chunkprogressbar/ChunkProgressBar.js +0 -124
- package/dist/npm/chunkprogressbar/interfaces/ChunkProgressBarHandle.d.ts +0 -13
- package/dist/npm/chunkprogressbar/interfaces/ChunkProgressBarHandle.js +0 -2
- package/dist/npm/chunkprogressbar/interfaces/ChunkProgressBarProps.d.ts +0 -10
- package/dist/npm/chunkprogressbar/interfaces/ChunkProgressBarProps.js +0 -2
- package/dist/npm/common/BaseProps.d.ts +0 -83
- package/dist/npm/common/BaseProps.js +0 -2
- package/dist/npm/common/constants.d.ts +0 -16
- package/dist/npm/common/constants.js +0 -19
- package/dist/npm/common/utils.d.ts +0 -17
- package/dist/npm/common/utils.js +0 -41
- package/dist/npm/main.d.ts +0 -7
- package/dist/npm/main.js +0 -23
- package/dist/npm/package-metadata.d.ts +0 -5
- package/dist/npm/package-metadata.js +0 -14
- package/dist/npm/progressbar/ProgressBar.js +0 -148
- package/dist/npm/progressbar/hooks/usePrevious.d.ts +0 -2
- package/dist/npm/progressbar/hooks/usePrevious.js +0 -13
- package/dist/npm/progressbar/interfaces/LabelProps.d.ts +0 -9
- package/dist/npm/progressbar/interfaces/LabelProps.js +0 -2
- package/dist/npm/progressbar/interfaces/ProgressBarAnimation.d.ts +0 -9
- package/dist/npm/progressbar/interfaces/ProgressBarAnimation.js +0 -2
- package/dist/npm/progressbar/interfaces/ProgressBarHandle.d.ts +0 -21
- package/dist/npm/progressbar/interfaces/ProgressBarHandle.js +0 -5
- package/dist/npm/progressbar/interfaces/ProgressBarProps.d.ts +0 -27
- package/dist/npm/progressbar/interfaces/ProgressBarProps.js +0 -2
- package/dist/systemjs/kendo-react-progressbars.js +0 -1
- package/e2e-next/chunkprogressbar.basic.tests.ts +0 -24
- 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
|
-
"
|
|
5
|
-
"
|
|
6
|
-
|
|
7
|
-
|
|
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
|
-
"
|
|
10
|
-
|
|
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",
|
|
43
|
-
"@progress/kendo-react-buttons": "6.1.1",
|
|
44
|
-
"@progress/kendo-react-dropdowns": "6.1.1",
|
|
45
|
-
"@progress/kendo-react-form": "6.1.1",
|
|
46
|
-
"@progress/kendo-react-inputs": "6.1.1",
|
|
47
|
-
"@progress/kendo-react-intl": "6.1.1"
|
|
48
|
-
},
|
|
49
|
-
"dependencies": {
|
|
50
|
-
"@progress/kendo-react-common": "6.1.1",
|
|
51
|
-
"prop-types": "^15.6.0"
|
|
52
|
-
},
|
|
53
41
|
"@progress": {
|
|
54
42
|
"friendlyName": "ProgressBars",
|
|
55
43
|
"framework": "KendoReact"
|
|
56
44
|
},
|
|
57
|
-
"
|
|
58
|
-
|
|
45
|
+
"repository": {
|
|
46
|
+
"type": "git",
|
|
47
|
+
"url": "https://github.com/telerik/kendo-react.git"
|
|
48
|
+
},
|
|
59
49
|
"publishConfig": {
|
|
60
50
|
"access": "public"
|
|
61
|
-
}
|
|
62
|
-
|
|
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
|
-
|
|
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 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -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;
|
package/dist/es/common/utils.js
DELETED
|
@@ -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,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: 1700063549,
|
|
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 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
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>>;
|