1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 | import { __decorate, __extends } from "tslib";
|
17 | import classNames from "classnames";
|
18 | import * as React from "react";
|
19 | import { polyfill } from "react-lifecycles-compat";
|
20 | import { AbstractPureComponent2, Classes } from "../../common";
|
21 | import { SPINNER_WARN_CLASSES_SIZE } from "../../common/errors";
|
22 | import { DISPLAYNAME_PREFIX } from "../../common/props";
|
23 | import { clamp } from "../../common/utils";
|
24 | export var SpinnerSize;
|
25 | (function (SpinnerSize) {
|
26 | SpinnerSize[SpinnerSize["SMALL"] = 20] = "SMALL";
|
27 | SpinnerSize[SpinnerSize["STANDARD"] = 50] = "STANDARD";
|
28 | SpinnerSize[SpinnerSize["LARGE"] = 100] = "LARGE";
|
29 | })(SpinnerSize || (SpinnerSize = {}));
|
30 |
|
31 | var R = 45;
|
32 | var SPINNER_TRACK = "M 50,50 m 0,-" + R + " a " + R + "," + R + " 0 1 1 0," + R * 2 + " a " + R + "," + R + " 0 1 1 0,-" + R * 2;
|
33 |
|
34 |
|
35 |
|
36 | var PATH_LENGTH = 280;
|
37 | var MIN_SIZE = 10;
|
38 | var STROKE_WIDTH = 4;
|
39 | var MIN_STROKE_WIDTH = 16;
|
40 | var Spinner = (function (_super) {
|
41 | __extends(Spinner, _super);
|
42 | function Spinner() {
|
43 | return _super !== null && _super.apply(this, arguments) || this;
|
44 | }
|
45 | Spinner.prototype.componentDidUpdate = function (prevProps) {
|
46 | if (prevProps.value !== this.props.value) {
|
47 |
|
48 | this.forceUpdate();
|
49 | }
|
50 | };
|
51 | Spinner.prototype.render = function () {
|
52 | var _a;
|
53 | var _b = this.props, className = _b.className, intent = _b.intent, value = _b.value, _c = _b.tagName, tagName = _c === void 0 ? "div" : _c;
|
54 | var size = this.getSize();
|
55 | var classes = classNames(Classes.SPINNER, Classes.intentClass(intent), (_a = {}, _a[Classes.SPINNER_NO_SPIN] = value != null, _a), className);
|
56 |
|
57 | var strokeWidth = Math.min(MIN_STROKE_WIDTH, (STROKE_WIDTH * SpinnerSize.LARGE) / size);
|
58 | var strokeOffset = PATH_LENGTH - PATH_LENGTH * (value == null ? 0.25 : clamp(value, 0, 1));
|
59 |
|
60 |
|
61 |
|
62 | return React.createElement(tagName, {
|
63 | className: classes,
|
64 | role: "progressbar",
|
65 | }, React.createElement(tagName, { className: Classes.SPINNER_ANIMATION }, React.createElement("svg", { width: size, height: size, strokeWidth: strokeWidth.toFixed(2), viewBox: this.getViewBox(strokeWidth) },
|
66 | React.createElement("path", { className: Classes.SPINNER_TRACK, d: SPINNER_TRACK }),
|
67 | React.createElement("path", { className: Classes.SPINNER_HEAD, d: SPINNER_TRACK, pathLength: PATH_LENGTH, strokeDasharray: PATH_LENGTH + " " + PATH_LENGTH, strokeDashoffset: strokeOffset }))));
|
68 | };
|
69 | Spinner.prototype.validateProps = function (_a) {
|
70 | var _b = _a.className, className = _b === void 0 ? "" : _b, size = _a.size;
|
71 | if (size != null && (className.indexOf(Classes.SMALL) >= 0 || className.indexOf(Classes.LARGE) >= 0)) {
|
72 | console.warn(SPINNER_WARN_CLASSES_SIZE);
|
73 | }
|
74 | };
|
75 | |
76 |
|
77 |
|
78 |
|
79 | Spinner.prototype.getSize = function () {
|
80 | var _a = this.props, _b = _a.className, className = _b === void 0 ? "" : _b, size = _a.size;
|
81 | if (size == null) {
|
82 |
|
83 | if (className.indexOf(Classes.SMALL) >= 0) {
|
84 | return SpinnerSize.SMALL;
|
85 | }
|
86 | else if (className.indexOf(Classes.LARGE) >= 0) {
|
87 | return SpinnerSize.LARGE;
|
88 | }
|
89 | return SpinnerSize.STANDARD;
|
90 | }
|
91 | return Math.max(MIN_SIZE, size);
|
92 | };
|
93 |
|
94 | Spinner.prototype.getViewBox = function (strokeWidth) {
|
95 | var radius = R + strokeWidth / 2;
|
96 | var viewBoxX = (50 - radius).toFixed(2);
|
97 | var viewBoxWidth = (radius * 2).toFixed(2);
|
98 | return viewBoxX + " " + viewBoxX + " " + viewBoxWidth + " " + viewBoxWidth;
|
99 | };
|
100 | Spinner.displayName = DISPLAYNAME_PREFIX + ".Spinner";
|
101 |
|
102 | Spinner.SIZE_SMALL = SpinnerSize.SMALL;
|
103 |
|
104 | Spinner.SIZE_STANDARD = SpinnerSize.STANDARD;
|
105 |
|
106 | Spinner.SIZE_LARGE = SpinnerSize.LARGE;
|
107 | Spinner = __decorate([
|
108 | polyfill
|
109 | ], Spinner);
|
110 | return Spinner;
|
111 | }(AbstractPureComponent2));
|
112 | export { Spinner };
|
113 |
|
\ | No newline at end of file |