@elliemae/ds-circular-progress-indicator 2.2.0 → 2.3.0-alpha.3

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 (25) hide show
  1. package/cjs/DSCircularProgressIndicator.js +126 -148
  2. package/cjs/DSCircularProgressIndicator.js.map +7 -0
  3. package/cjs/index.js +40 -11
  4. package/cjs/index.js.map +7 -0
  5. package/cjs/v2/DSCircularIndeterminateIndicator.js +149 -0
  6. package/cjs/v2/DSCircularIndeterminateIndicator.js.map +7 -0
  7. package/cjs/v2/index.js +36 -0
  8. package/cjs/v2/index.js.map +7 -0
  9. package/cjs/v2/react-desc-prop-types.js +56 -0
  10. package/cjs/v2/react-desc-prop-types.js.map +7 -0
  11. package/esm/DSCircularProgressIndicator.js +96 -137
  12. package/esm/DSCircularProgressIndicator.js.map +7 -0
  13. package/esm/index.js +15 -1
  14. package/esm/index.js.map +7 -0
  15. package/esm/v2/DSCircularIndeterminateIndicator.js +120 -0
  16. package/esm/v2/DSCircularIndeterminateIndicator.js.map +7 -0
  17. package/esm/v2/index.js +10 -0
  18. package/esm/v2/index.js.map +7 -0
  19. package/esm/v2/react-desc-prop-types.js +27 -0
  20. package/esm/v2/react-desc-prop-types.js.map +7 -0
  21. package/package.json +15 -3
  22. package/types/index.d.ts +1 -0
  23. package/types/v2/DSCircularIndeterminateIndicator.d.ts +9 -0
  24. package/types/v2/index.d.ts +1 -0
  25. package/types/v2/react-desc-prop-types.d.ts +32 -0
package/cjs/DSCircularProgressIndicator.js CHANGED
@@ -1,268 +1,246 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var _jsx = require('@babel/runtime/helpers/jsx');
6
- require('react');
7
- var reactDesc = require('react-desc');
8
- var dsClassnames = require('@elliemae/ds-classnames');
9
- var DSTooltip = require('@elliemae/ds-tooltip');
10
-
11
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
12
-
13
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
14
- var DSTooltip__default = /*#__PURE__*/_interopDefaultLegacy(DSTooltip);
15
-
16
- var _path, _path2;
17
- const {
18
- classNameBlock,
19
- classNameElement
20
- } = dsClassnames.convertPropToCssClassName('circular-progress-indicator');
21
-
22
- const CircularProgressIndicator = _ref => {
23
- let {
24
- size,
25
- showLabel,
26
- showTooltip,
27
- waiting,
28
- loading
29
- } = _ref;
30
- const waitingLabel = 'Waiting...';
31
- const loadingLabel = 'Loading...';
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __reExport = (target, module2, copyDefault, desc) => {
13
+ if (module2 && typeof module2 === "object" || typeof module2 === "function") {
14
+ for (let key of __getOwnPropNames(module2))
15
+ if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
16
+ __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
17
+ }
18
+ return target;
19
+ };
20
+ var __toESM = (module2, isNodeMode) => {
21
+ return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
22
+ };
23
+ var __toCommonJS = /* @__PURE__ */ ((cache) => {
24
+ return (module2, temp) => {
25
+ return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
26
+ };
27
+ })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
28
+ var DSCircularProgressIndicator_exports = {};
29
+ __export(DSCircularProgressIndicator_exports, {
30
+ CircularProgressIndicatorWithSchema: () => CircularProgressIndicatorWithSchema,
31
+ default: () => DSCircularProgressIndicator_default
32
+ });
33
+ var React = __toESM(require("react"));
34
+ var import_react = __toESM(require("react"));
35
+ var import_react_desc = require("react-desc");
36
+ var import_ds_classnames = require("@elliemae/ds-classnames");
37
+ var import_ds_tooltip = __toESM(require("@elliemae/ds-tooltip"));
38
+ const { classNameBlock, classNameElement } = (0, import_ds_classnames.convertPropToCssClassName)("circular-progress-indicator");
39
+ const CircularProgressIndicator = ({ size, showLabel, showTooltip, waiting, loading }) => {
40
+ const waitingLabel = "Waiting...";
41
+ const loadingLabel = "Loading...";
32
42
  const currentLabel = waiting && !loading ? waitingLabel : loadingLabel;
33
43
  let sizePx;
34
44
  let sizeLabel;
35
45
  let strokeWidth;
36
46
  let trackWidth;
37
- let markerHeight = '0.7';
38
- let markerRefY = '4.8';
39
- let grayArcStrokeDasharray = '45 170';
40
- let grayArcStrokeDashoffset = '127.5';
41
-
47
+ let markerHeight = "0.7";
48
+ let markerRefY = "4.8";
49
+ let grayArcStrokeDasharray = "45 170";
50
+ let grayArcStrokeDashoffset = "127.5";
42
51
  switch (size.toUpperCase()) {
43
- case 'XS':
52
+ case "XS":
44
53
  sizePx = 8;
45
54
  sizeLabel = 12;
46
55
  strokeWidth = 10;
47
56
  trackWidth = 3;
48
- markerHeight = '1';
49
- grayArcStrokeDasharray = '46 174';
50
- grayArcStrokeDashoffset = '133';
57
+ markerHeight = "1";
58
+ grayArcStrokeDasharray = "46 174";
59
+ grayArcStrokeDashoffset = "133";
51
60
  break;
52
-
53
- case 'S':
61
+ case "S":
54
62
  sizePx = 16;
55
63
  sizeLabel = 12;
56
64
  strokeWidth = 8;
57
65
  trackWidth = 3;
58
- markerHeight = '1';
59
- grayArcStrokeDasharray = '46 174';
60
- grayArcStrokeDashoffset = '133';
66
+ markerHeight = "1";
67
+ grayArcStrokeDasharray = "46 174";
68
+ grayArcStrokeDashoffset = "133";
61
69
  break;
62
-
63
- case 'M':
70
+ case "M":
64
71
  sizePx = 24;
65
72
  sizeLabel = 12;
66
73
  strokeWidth = 7;
67
74
  trackWidth = 3;
68
- markerHeight = '1';
69
- markerRefY = '5.5';
70
- grayArcStrokeDasharray = '46 174';
71
- grayArcStrokeDashoffset = '133';
75
+ markerHeight = "1";
76
+ markerRefY = "5.5";
77
+ grayArcStrokeDasharray = "46 174";
78
+ grayArcStrokeDashoffset = "133";
72
79
  break;
73
-
74
- case 'L':
80
+ case "L":
75
81
  sizePx = 32;
76
82
  sizeLabel = 13;
77
83
  strokeWidth = 6;
78
84
  trackWidth = 3;
79
- markerRefY = '5';
85
+ markerRefY = "5";
80
86
  break;
81
-
82
- case 'XL':
87
+ case "XL":
83
88
  sizePx = 48;
84
89
  sizeLabel = 14;
85
90
  strokeWidth = 5;
86
91
  trackWidth = 1;
87
92
  break;
88
-
89
- case 'XXL':
93
+ case "XXL":
90
94
  sizePx = 56;
91
95
  sizeLabel = 16;
92
96
  strokeWidth = 4;
93
97
  trackWidth = 1;
94
98
  break;
95
-
96
- case 'XXXL':
99
+ case "XXXL":
97
100
  sizePx = 64;
98
101
  sizeLabel = 16;
99
102
  strokeWidth = 5;
100
103
  trackWidth = 2;
101
104
  break;
105
+ default:
106
+ break;
102
107
  }
103
-
104
- const labelText = /*#__PURE__*/_jsx__default["default"]("p", {
108
+ const labelText = /* @__PURE__ */ import_react.default.createElement("p", {
105
109
  "data-testid": "circular-indicator-label",
106
- className: classNameElement('label'),
107
- style: {
108
- fontSize: "".concat(sizeLabel, "px")
109
- }
110
- }, void 0, currentLabel); // Only adds the tooltip if sizePx < 17 or showTooltip is true
111
-
112
-
113
- const buildIndicator = Component => sizePx < 17 || showTooltip ? /*#__PURE__*/_jsx__default["default"](DSTooltip__default["default"], {
110
+ className: classNameElement("label"),
111
+ style: { fontSize: `${sizeLabel}px` }
112
+ }, currentLabel);
113
+ const buildIndicator = (Component) => sizePx < 17 || showTooltip ? /* @__PURE__ */ import_react.default.createElement(import_ds_tooltip.default, {
114
114
  containerProps: {
115
- id: 'ds-circular-progress-indicator',
116
- 'data-testid': 'circular-indicator-title'
115
+ id: "ds-circular-progress-indicator",
116
+ "data-testid": "circular-indicator-title"
117
117
  },
118
118
  interactionType: "hover",
119
119
  title: currentLabel,
120
120
  triggerComponent: Component,
121
121
  placement: "bottom"
122
122
  }) : Component;
123
-
124
- const grayTrack = /*#__PURE__*/_jsx__default["default"]("circle", {
125
- className: classNameElement('track'),
123
+ const grayTrack = /* @__PURE__ */ import_react.default.createElement("circle", {
124
+ className: classNameElement("track"),
126
125
  cx: "50%",
127
126
  cy: "50%",
128
127
  fill: "none",
129
128
  r: "28",
130
- strokeWidth: "".concat(trackWidth, "px")
129
+ strokeWidth: `${trackWidth}px`
131
130
  });
132
-
133
- const grayArc = /*#__PURE__*/_jsx__default["default"]("circle", {
134
- className: classNameElement('arc-gray'),
131
+ const grayArc = /* @__PURE__ */ import_react.default.createElement("circle", {
132
+ className: classNameElement("arc-gray"),
135
133
  stroke: "#E0E3E8",
136
- strokeDasharray: "".concat(grayArcStrokeDasharray),
137
- strokeDashoffset: "".concat(grayArcStrokeDashoffset),
134
+ strokeDasharray: `${grayArcStrokeDasharray}`,
135
+ strokeDashoffset: `${grayArcStrokeDashoffset}`,
138
136
  cx: "50%",
139
137
  cy: "50%",
140
138
  fill: "none",
141
139
  r: "28",
142
- strokeWidth: "".concat(trackWidth, "px")
140
+ strokeWidth: `${trackWidth}px`
143
141
  });
144
-
145
- const indicator = /*#__PURE__*/_jsx__default["default"]("svg", {
146
- height: "".concat(sizePx, "px"),
142
+ const indicator = /* @__PURE__ */ import_react.default.createElement("svg", {
143
+ height: `${sizePx}px`,
147
144
  version: "1.1",
148
145
  viewBox: "0 0 66 66",
149
- width: "".concat(sizePx, "px"),
146
+ width: `${sizePx}px`,
150
147
  "data-testid": "circular-indicator"
151
- }, void 0, /*#__PURE__*/_jsx__default["default"]("defs", {}, void 0, /*#__PURE__*/_jsx__default["default"]("linearGradient", {
148
+ }, /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("linearGradient", {
152
149
  id: "grad1",
153
150
  x1: "0%",
154
151
  x2: "100%",
155
152
  y1: "100%",
156
153
  y2: "0%"
157
- }, void 0, /*#__PURE__*/_jsx__default["default"]("stop", {
154
+ }, /* @__PURE__ */ import_react.default.createElement("stop", {
158
155
  offset: "0%",
159
- style: {
160
- stopColor: '#E0E3E8',
161
- stopOpacity: 1
162
- }
163
- }), /*#__PURE__*/_jsx__default["default"]("stop", {
156
+ style: { stopColor: "#E0E3E8", stopOpacity: 1 }
157
+ }), /* @__PURE__ */ import_react.default.createElement("stop", {
164
158
  offset: "89%",
165
- style: {
166
- stopColor: '#5594e2',
167
- stopOpacity: 1
168
- }
169
- }), /*#__PURE__*/_jsx__default["default"]("stop", {
159
+ style: { stopColor: "#5594e2", stopOpacity: 1 }
160
+ }), /* @__PURE__ */ import_react.default.createElement("stop", {
170
161
  offset: "100%",
171
- style: {
172
- stopColor: '#5594e2',
173
- stopOpacity: 1
174
- }
175
- })), /*#__PURE__*/_jsx__default["default"]("linearGradient", {
162
+ style: { stopColor: "#5594e2", stopOpacity: 1 }
163
+ })), /* @__PURE__ */ import_react.default.createElement("linearGradient", {
176
164
  id: "grad2",
177
165
  x1: "0%",
178
166
  x2: "100%",
179
167
  y1: "100%",
180
168
  y2: "0%"
181
- }, void 0, /*#__PURE__*/_jsx__default["default"]("stop", {
169
+ }, /* @__PURE__ */ import_react.default.createElement("stop", {
182
170
  offset: "0%",
183
- style: {
184
- stopColor: '#5594e2',
185
- stopOpacity: 1
186
- }
187
- }), /*#__PURE__*/_jsx__default["default"]("stop", {
171
+ style: { stopColor: "#5594e2", stopOpacity: 1 }
172
+ }), /* @__PURE__ */ import_react.default.createElement("stop", {
188
173
  offset: "11%",
189
- style: {
190
- stopColor: '#5594e2',
191
- stopOpacity: 1
192
- }
193
- }), /*#__PURE__*/_jsx__default["default"]("stop", {
174
+ style: { stopColor: "#5594e2", stopOpacity: 1 }
175
+ }), /* @__PURE__ */ import_react.default.createElement("stop", {
194
176
  offset: "100%",
195
- style: {
196
- stopColor: '#E0E3E8',
197
- stopOpacity: 1
198
- }
199
- })), /*#__PURE__*/_jsx__default["default"]("marker", {
177
+ style: { stopColor: "#E0E3E8", stopOpacity: 1 }
178
+ })), /* @__PURE__ */ import_react.default.createElement("marker", {
200
179
  id: "inverseL",
201
180
  viewBox: "0 0 5 10",
202
181
  refX: "0.5",
203
- refY: "".concat(markerRefY),
182
+ refY: `${markerRefY}`,
204
183
  markerUnits: "strokeWidth",
205
184
  markerWidth: "0.5",
206
- markerHeight: "".concat(markerHeight),
185
+ markerHeight: `${markerHeight}`,
207
186
  orient: "auto"
208
- }, void 0, _path || (_path = /*#__PURE__*/_jsx__default["default"]("path", {
187
+ }, /* @__PURE__ */ import_react.default.createElement("path", {
209
188
  d: "M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z",
210
189
  fill: "#FFF"
211
- }))), /*#__PURE__*/_jsx__default["default"]("marker", {
190
+ })), /* @__PURE__ */ import_react.default.createElement("marker", {
212
191
  id: "inverseR",
213
192
  viewBox: "0 0 5 10",
214
193
  refX: "0",
215
194
  refY: "5",
216
195
  markerUnits: "strokeWidth",
217
196
  markerWidth: "0.7",
218
- markerHeight: "".concat(markerHeight)
219
- }, void 0, _path2 || (_path2 = /*#__PURE__*/_jsx__default["default"]("path", {
197
+ markerHeight: `${markerHeight}`
198
+ }, /* @__PURE__ */ import_react.default.createElement("path", {
220
199
  d: "M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z",
221
200
  fill: "#FFF"
222
- })))), grayTrack, !waiting && /*#__PURE__*/_jsx__default["default"]("g", {
201
+ }))), grayTrack, !waiting && /* @__PURE__ */ import_react.default.createElement("g", {
223
202
  fill: "none",
224
203
  fillRule: "evenodd",
225
204
  stroke: "none",
226
205
  strokeWidth: "1"
227
- }, void 0, /*#__PURE__*/_jsx__default["default"]("path", {
228
- className: classNameElement('arc-blue'),
206
+ }, /* @__PURE__ */ import_react.default.createElement("path", {
207
+ className: classNameElement("arc-blue"),
229
208
  d: "M30,5 C17.536025,6 6,17.536027 5,31",
230
209
  stroke: "#5594e2",
231
- strokeWidth: "".concat(strokeWidth - 0.5, "px"),
210
+ strokeWidth: `${strokeWidth - 0.5}px`,
232
211
  strokeLinecap: "round",
233
212
  "data-testid": "circular-indicator-blue-arc"
234
- }), /*#__PURE__*/_jsx__default["default"]("path", {
235
- className: classNameElement('arc-white'),
213
+ }), /* @__PURE__ */ import_react.default.createElement("path", {
214
+ className: classNameElement("arc-white"),
236
215
  d: "M33,5 C17.536027,5 5,17.536027 5,33",
237
216
  stroke: "#FFF",
238
- strokeWidth: "".concat(strokeWidth + 2, "px"),
217
+ strokeWidth: `${strokeWidth + 2}px`,
239
218
  markerStart: "url(#inverseR)",
240
219
  markerEnd: "url(#inverseL)"
241
220
  }), grayArc));
242
-
243
- return /*#__PURE__*/_jsx__default["default"]("div", {
244
- className: classNameBlock('wrapper'),
221
+ return /* @__PURE__ */ import_react.default.createElement("div", {
222
+ className: classNameBlock("wrapper"),
245
223
  role: "status",
246
- "aria-hidden": waiting || loading ? 'false' : 'true'
247
- }, void 0, buildIndicator(indicator), showLabel && labelText);
224
+ "aria-hidden": waiting || loading ? "false" : "true"
225
+ }, buildIndicator(indicator), showLabel && labelText);
248
226
  };
249
-
250
227
  CircularProgressIndicator.defaultProps = {
251
- size: 'm',
228
+ size: "m",
252
229
  showLabel: false,
253
230
  showTooltip: false,
254
231
  waiting: false,
255
232
  loading: false
256
233
  };
257
234
  const circularProgressIndicatorProps = {
258
- size: reactDesc.PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl']).description('Defines the size of the indicator').defaultValue('m'),
259
- showLabel: reactDesc.PropTypes.bool.description('Wheter the indicator displays its state on a label or not').defaultValue(false),
260
- showTooltip: reactDesc.PropTypes.bool.description('Wheter the indicator displays its state on a tooltip or not').defaultValue(false),
261
- waiting: reactDesc.PropTypes.bool.description('Defines the state of the indicator as Waiting and only displays the gray track').defaultValue(false),
262
- loading: reactDesc.PropTypes.bool.description('Defines the state of the indicator as Loading and displays a blue spinner animation').defaultValue(false)
235
+ size: import_react_desc.PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl", "xxxl"]).description("Defines the size of the indicator").defaultValue("m"),
236
+ showLabel: import_react_desc.PropTypes.bool.description("Wheter the indicator displays its state on a label or not").defaultValue(false),
237
+ showTooltip: import_react_desc.PropTypes.bool.description("Wheter the indicator displays its state on a tooltip or not").defaultValue(false),
238
+ waiting: import_react_desc.PropTypes.bool.description("Defines the state of the indicator as Waiting and only displays the gray track").defaultValue(false),
239
+ loading: import_react_desc.PropTypes.bool.description("Defines the state of the indicator as Loading and displays a blue spinner animation").defaultValue(false)
263
240
  };
264
- const CircularProgressIndicatorWithSchema = reactDesc.describe(CircularProgressIndicator);
241
+ CircularProgressIndicator.propTypes = circularProgressIndicatorProps;
242
+ const CircularProgressIndicatorWithSchema = (0, import_react_desc.describe)(CircularProgressIndicator);
265
243
  CircularProgressIndicatorWithSchema.propTypes = circularProgressIndicatorProps;
266
-
267
- exports.CircularProgressIndicatorWithSchema = CircularProgressIndicatorWithSchema;
268
- exports["default"] = CircularProgressIndicator;
244
+ var DSCircularProgressIndicator_default = CircularProgressIndicator;
245
+ module.exports = __toCommonJS(DSCircularProgressIndicator_exports);
246
+ //# sourceMappingURL=DSCircularProgressIndicator.js.map
package/cjs/DSCircularProgressIndicator.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/DSCircularProgressIndicator.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport React from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport DSTooltip from '@elliemae/ds-tooltip';\n\nconst { classNameBlock, classNameElement } = convertPropToCssClassName('circular-progress-indicator');\n\nconst CircularProgressIndicator = ({ size, showLabel, showTooltip, waiting, loading }) => {\n const waitingLabel = 'Waiting...';\n const loadingLabel = 'Loading...';\n const currentLabel = waiting && !loading ? waitingLabel : loadingLabel;\n let sizePx;\n let sizeLabel;\n let strokeWidth;\n let trackWidth;\n let markerHeight = '0.7';\n let markerRefY = '4.8';\n let grayArcStrokeDasharray = '45 170';\n let grayArcStrokeDashoffset = '127.5';\n\n switch (size.toUpperCase()) {\n case 'XS':\n sizePx = 8;\n sizeLabel = 12;\n strokeWidth = 10;\n trackWidth = 3;\n markerHeight = '1';\n grayArcStrokeDasharray = '46 174';\n grayArcStrokeDashoffset = '133';\n break;\n case 'S':\n sizePx = 16;\n sizeLabel = 12;\n strokeWidth = 8;\n trackWidth = 3;\n markerHeight = '1';\n grayArcStrokeDasharray = '46 174';\n grayArcStrokeDashoffset = '133';\n break;\n case 'M':\n sizePx = 24;\n sizeLabel = 12;\n strokeWidth = 7;\n trackWidth = 3;\n markerHeight = '1';\n markerRefY = '5.5';\n grayArcStrokeDasharray = '46 174';\n grayArcStrokeDashoffset = '133';\n break;\n case 'L':\n sizePx = 32;\n sizeLabel = 13;\n strokeWidth = 6;\n trackWidth = 3;\n markerRefY = '5';\n break;\n case 'XL':\n sizePx = 48;\n sizeLabel = 14;\n strokeWidth = 5;\n trackWidth = 1;\n break;\n case 'XXL':\n sizePx = 56;\n sizeLabel = 16;\n strokeWidth = 4;\n trackWidth = 1;\n break;\n case 'XXXL':\n sizePx = 64;\n sizeLabel = 16;\n strokeWidth = 5;\n trackWidth = 2;\n break;\n default:\n break;\n }\n\n const labelText = (\n <p\n data-testid=\"circular-indicator-label\"\n className={classNameElement('label')}\n style={{ fontSize: `${sizeLabel}px` }}\n >\n {currentLabel}\n </p>\n );\n\n // Only adds the tooltip if sizePx < 17 or showTooltip is true\n const buildIndicator = (Component: JSX.Element) =>\n sizePx < 17 || showTooltip ? (\n <DSTooltip\n containerProps={{\n id: 'ds-circular-progress-indicator',\n 'data-testid': 'circular-indicator-title',\n }}\n interactionType=\"hover\"\n title={currentLabel}\n triggerComponent={Component}\n placement=\"bottom\"\n />\n ) : (\n Component\n );\n\n const grayTrack = (\n <circle\n className={classNameElement('track')}\n cx=\"50%\"\n cy=\"50%\"\n fill=\"none\"\n r=\"28\"\n strokeWidth={`${trackWidth}px`}\n />\n );\n\n const grayArc = (\n <circle\n className={classNameElement('arc-gray')}\n stroke=\"#E0E3E8\"\n strokeDasharray={`${grayArcStrokeDasharray}`}\n strokeDashoffset={`${grayArcStrokeDashoffset}`}\n cx=\"50%\"\n cy=\"50%\"\n fill=\"none\"\n r=\"28\"\n strokeWidth={`${trackWidth}px`}\n />\n );\n\n const indicator = (\n <svg\n height={`${sizePx}px`}\n version=\"1.1\"\n viewBox=\"0 0 66 66\"\n width={`${sizePx}px`}\n data-testid=\"circular-indicator\"\n >\n <defs>\n <linearGradient id=\"grad1\" x1=\"0%\" x2=\"100%\" y1=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" style={{ stopColor: '#E0E3E8', stopOpacity: 1 }} />\n <stop offset=\"89%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n <stop offset=\"100%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n </linearGradient>\n <linearGradient id=\"grad2\" x1=\"0%\" x2=\"100%\" y1=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n <stop offset=\"11%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n <stop offset=\"100%\" style={{ stopColor: '#E0E3E8', stopOpacity: 1 }} />\n </linearGradient>\n <marker\n id=\"inverseL\"\n viewBox=\"0 0 5 10\"\n refX=\"0.5\"\n refY={`${markerRefY}`}\n markerUnits=\"strokeWidth\"\n markerWidth=\"0.5\"\n markerHeight={`${markerHeight}`}\n orient=\"auto\"\n >\n <path d=\"M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z\" fill=\"#FFF\" />\n </marker>\n <marker\n id=\"inverseR\"\n viewBox=\"0 0 5 10\"\n refX=\"0\"\n refY=\"5\"\n markerUnits=\"strokeWidth\"\n markerWidth=\"0.7\"\n markerHeight={`${markerHeight}`}\n >\n <path d=\"M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z\" fill=\"#FFF\" />\n </marker>\n </defs>\n {grayTrack}\n {!waiting && (\n <g fill=\"none\" fillRule=\"evenodd\" stroke=\"none\" strokeWidth=\"1\">\n <path\n className={classNameElement('arc-blue')}\n d=\"M30,5 C17.536025,6 6,17.536027 5,31\"\n stroke=\"#5594e2\"\n strokeWidth={`${strokeWidth - 0.5}px`}\n strokeLinecap=\"round\"\n data-testid=\"circular-indicator-blue-arc\"\n />\n <path\n className={classNameElement('arc-white')}\n d=\"M33,5 C17.536027,5 5,17.536027 5,33\"\n stroke=\"#FFF\"\n strokeWidth={`${strokeWidth + 2}px`}\n markerStart=\"url(#inverseR)\"\n markerEnd=\"url(#inverseL)\"\n />\n {grayArc}\n </g>\n )}\n </svg>\n );\n\n return (\n <div className={classNameBlock('wrapper')} role=\"status\" aria-hidden={waiting || loading ? 'false' : 'true'}>\n {buildIndicator(indicator)}\n {showLabel && labelText}\n </div>\n );\n};\n\nCircularProgressIndicator.defaultProps = {\n size: 'm',\n showLabel: false,\n showTooltip: false,\n waiting: false,\n loading: false,\n};\n\nconst circularProgressIndicatorProps = {\n size: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'])\n .description('Defines the size of the indicator')\n .defaultValue('m'),\n showLabel: PropTypes.bool\n .description('Wheter the indicator displays its state on a label or not')\n .defaultValue(false),\n showTooltip: PropTypes.bool\n .description('Wheter the indicator displays its state on a tooltip or not')\n .defaultValue(false),\n waiting: PropTypes.bool\n .description('Defines the state of the indicator as Waiting and only displays the gray track')\n .defaultValue(false),\n loading: PropTypes.bool\n .description('Defines the state of the indicator as Loading and displays a blue spinner animation')\n .defaultValue(false),\n};\n\nCircularProgressIndicator.propTypes = circularProgressIndicatorProps;\n\nconst CircularProgressIndicatorWithSchema = describe(CircularProgressIndicator);\nCircularProgressIndicatorWithSchema.propTypes = circularProgressIndicatorProps;\n\nexport { CircularProgressIndicatorWithSchema };\nexport default CircularProgressIndicator;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }
package/cjs/index.js CHANGED
@@ -1,11 +1,40 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var DSCircularProgressIndicator = require('./DSCircularProgressIndicator.js');
6
-
7
-
8
-
9
- exports.CircularProgressIndicatorWithSchema = DSCircularProgressIndicator.CircularProgressIndicatorWithSchema;
10
- exports.DSCircularProgressIndicator = DSCircularProgressIndicator["default"];
11
- exports["default"] = DSCircularProgressIndicator["default"];
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __reExport = (target, module2, copyDefault, desc) => {
13
+ if (module2 && typeof module2 === "object" || typeof module2 === "function") {
14
+ for (let key of __getOwnPropNames(module2))
15
+ if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
16
+ __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
17
+ }
18
+ return target;
19
+ };
20
+ var __toESM = (module2, isNodeMode) => {
21
+ return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
22
+ };
23
+ var __toCommonJS = /* @__PURE__ */ ((cache) => {
24
+ return (module2, temp) => {
25
+ return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
26
+ };
27
+ })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
28
+ var src_exports = {};
29
+ __export(src_exports, {
30
+ CircularProgressIndicatorWithSchema: () => import_DSCircularProgressIndicator.CircularProgressIndicatorWithSchema,
31
+ DSCircularIndeterminateIndicator: () => import_v2.DSCircularIndeterminateIndicator,
32
+ DSCircularIndeterminateIndicatorWithSchema: () => import_v2.DSCircularIndeterminateIndicatorWithSchema,
33
+ DSCircularProgressIndicator: () => import_DSCircularProgressIndicator.default,
34
+ default: () => import_DSCircularProgressIndicator.default
35
+ });
36
+ var React = __toESM(require("react"));
37
+ var import_DSCircularProgressIndicator = __toESM(require("./DSCircularProgressIndicator"));
38
+ var import_v2 = require("./v2");
39
+ module.exports = __toCommonJS(src_exports);
40
+ //# sourceMappingURL=index.js.map
package/cjs/index.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["/* eslint-disable import/named */\nexport {\n default,\n default as DSCircularProgressIndicator,\n CircularProgressIndicatorWithSchema,\n} from './DSCircularProgressIndicator';\nexport { DSCircularIndeterminateIndicator, DSCircularIndeterminateIndicatorWithSchema } from './v2';\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,yCAIO;AACP,gBAA6F;",
6
+ "names": []
7
+ }
package/cjs/v2/DSCircularIndeterminateIndicator.js ADDED
@@ -0,0 +1,149 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __reExport = (target, module2, copyDefault, desc) => {
13
+ if (module2 && typeof module2 === "object" || typeof module2 === "function") {
14
+ for (let key of __getOwnPropNames(module2))
15
+ if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
16
+ __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
17
+ }
18
+ return target;
19
+ };
20
+ var __toESM = (module2, isNodeMode) => {
21
+ return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
22
+ };
23
+ var __toCommonJS = /* @__PURE__ */ ((cache) => {
24
+ return (module2, temp) => {
25
+ return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
26
+ };
27
+ })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
28
+ var DSCircularIndeterminateIndicator_exports = {};
29
+ __export(DSCircularIndeterminateIndicator_exports, {
30
+ DSCircularIndeterminateIndicator: () => DSCircularIndeterminateIndicator,
31
+ DSCircularIndeterminateIndicatorWithSchema: () => DSCircularIndeterminateIndicatorWithSchema
32
+ });
33
+ var React = __toESM(require("react"));
34
+ var import_react = __toESM(require("react"));
35
+ var import_ds_grid = require("@elliemae/ds-grid");
36
+ var import_ds_tooltip = require("@elliemae/ds-tooltip");
37
+ var import_react_desc = require("react-desc");
38
+ var import_styled_components = __toESM(require("styled-components"));
39
+ var import_ds_system = require("@elliemae/ds-system");
40
+ var import_uid = require("uid");
41
+ var import_react_desc_prop_types = require("./react-desc-prop-types");
42
+ const r = import_ds_system.kfrm`to { transform: rotate(2turn) }`;
43
+ const s = import_ds_system.kfrm`0%, 39% { stroke-dasharray: 942px 2826px }`;
44
+ const StyledSvg = import_styled_components.default.svg`
45
+ #gg {
46
+ transform: rotate(45deg);
47
+ stroke: url(#${(props) => props.linearGradientUid});
48
+ mask: url(#${(props) => props.maskUid});
49
+ }
50
+ mask use {
51
+ stroke: #fff;
52
+ stroke-linecap: round;
53
+ stroke-dasharray: 942px 2826px;
54
+ animation: ${r} ${(props) => props.duration}s cubic-bezier(0.5, -0.43, 0.5, 1.43) infinite,
55
+ ${s} ${(props) => props.duration / 2}s ease-in-out infinite alternate;
56
+ }
57
+ `;
58
+ const sizeToPx = {
59
+ xs: "16px",
60
+ s: "24px",
61
+ m: "32px",
62
+ l: "48px",
63
+ xl: "56px",
64
+ xxl: "64px"
65
+ };
66
+ const sizeToWeight = {
67
+ xs: "10%",
68
+ s: "9%",
69
+ m: "8%",
70
+ l: "6%",
71
+ xl: "5%",
72
+ xxl: "4%"
73
+ };
74
+ const colorToHex = {
75
+ light: "#FFFFFF",
76
+ dark: "#0F364A"
77
+ };
78
+ const sizeToTextSize = {
79
+ xs: "12px",
80
+ s: "12px",
81
+ m: "12px",
82
+ l: "13px",
83
+ xl: "14px",
84
+ xxl: "16px"
85
+ };
86
+ const DSCircularIndeterminateIndicator = ({
87
+ size = "m",
88
+ color = "dark",
89
+ text = "",
90
+ showText = true,
91
+ withTooltip = false,
92
+ tooltipStartPlacementPreference = "bottom",
93
+ __duration = 1.5
94
+ }) => {
95
+ const Wrapper = withTooltip ? import_ds_tooltip.DSTooltipV3 : ({ children }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, children);
96
+ const linearGradientUid = (0, import_uid.uid)(16);
97
+ const maskUid = (0, import_uid.uid)(16);
98
+ const circleUid = (0, import_uid.uid)(16);
99
+ return /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
100
+ gutter: "xs",
101
+ justifyContent: "center",
102
+ role: "status"
103
+ }, /* @__PURE__ */ import_react.default.createElement(Wrapper, {
104
+ text,
105
+ textAlign: "center",
106
+ startPlacementPreference: tooltipStartPlacementPreference
107
+ }, /* @__PURE__ */ import_react.default.createElement(StyledSvg, {
108
+ viewBox: "-1950 -975 3900 1950",
109
+ fill: "none",
110
+ stroke: "transparent",
111
+ strokeWidth: sizeToWeight[size],
112
+ width: sizeToPx[size],
113
+ height: sizeToPx[size],
114
+ style: { display: "block", margin: "auto" },
115
+ linearGradientUid,
116
+ maskUid,
117
+ duration: __duration
118
+ }, /* @__PURE__ */ import_react.default.createElement("g", {
119
+ transform: "scale(2.298)"
120
+ }, /* @__PURE__ */ import_react.default.createElement("linearGradient", {
121
+ id: linearGradientUid
122
+ }, /* @__PURE__ */ import_react.default.createElement("stop", {
123
+ stopColor: color === "dark" ? "#48a3ff" : "#ccd6ff"
124
+ }), /* @__PURE__ */ import_react.default.createElement("stop", {
125
+ stopColor: color === "dark" ? "#49d0ff" : "#ebf6ff",
126
+ offset: "1"
127
+ })), /* @__PURE__ */ import_react.default.createElement("mask", {
128
+ id: maskUid
129
+ }, /* @__PURE__ */ import_react.default.createElement("circle", {
130
+ r: "1200",
131
+ fill: "#000"
132
+ }), /* @__PURE__ */ import_react.default.createElement("use", {
133
+ xlinkHref: `#${circleUid}`
134
+ })), /* @__PURE__ */ import_react.default.createElement("circle", {
135
+ id: circleUid,
136
+ r: "600"
137
+ }), /* @__PURE__ */ import_react.default.createElement("g", {
138
+ id: "gg"
139
+ }, /* @__PURE__ */ import_react.default.createElement("use", {
140
+ xlinkHref: `#${circleUid}`
141
+ })))), text !== "" && showText && /* @__PURE__ */ import_react.default.createElement("span", {
142
+ style: { color: colorToHex[color], fontSize: sizeToTextSize[size] }
143
+ }, text)));
144
+ };
145
+ DSCircularIndeterminateIndicator.propTypes = import_react_desc_prop_types.CircularIndeterminateIndicatorPropTypes;
146
+ const DSCircularIndeterminateIndicatorWithSchema = (0, import_react_desc.describe)(DSCircularIndeterminateIndicator);
147
+ DSCircularIndeterminateIndicatorWithSchema.propTypes = import_react_desc_prop_types.CircularIndeterminateIndicatorPropTypes;
148
+ module.exports = __toCommonJS(DSCircularIndeterminateIndicator_exports);
149
+ //# sourceMappingURL=DSCircularIndeterminateIndicator.js.map