@elliemae/ds-circular-progress-indicator 2.2.0-next.4 → 2.3.0-alpha.2

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 (10) hide show
  1. package/cjs/DSCircularProgressIndicator.js +126 -148
  2. package/cjs/DSCircularProgressIndicator.js.map +7 -0
  3. package/cjs/index.js +37 -11
  4. package/cjs/index.js.map +7 -0
  5. package/esm/DSCircularProgressIndicator.js +96 -137
  6. package/esm/DSCircularProgressIndicator.js.map +7 -0
  7. package/esm/index.js +12 -1
  8. package/esm/index.js.map +7 -0
  9. package/package.json +3 -3
  10. package/types/DSCircularProgressIndicator.d.ts +1 -7
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,37 @@
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
+ DSCircularProgressIndicator: () => import_DSCircularProgressIndicator.default,
32
+ default: () => import_DSCircularProgressIndicator.default
33
+ });
34
+ var React = __toESM(require("react"));
35
+ var import_DSCircularProgressIndicator = __toESM(require("./DSCircularProgressIndicator"));
36
+ module.exports = __toCommonJS(src_exports);
37
+ //# 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';\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,yCAIO;",
6
+ "names": []
7
+ }
package/esm/DSCircularProgressIndicator.js CHANGED
@@ -1,258 +1,217 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import 'react';
3
- import { PropTypes, describe } from 'react-desc';
4
- import { convertPropToCssClassName } from '@elliemae/ds-classnames';
5
- import DSTooltip from '@elliemae/ds-tooltip';
6
-
7
- var _path, _path2;
8
- const {
9
- classNameBlock,
10
- classNameElement
11
- } = convertPropToCssClassName('circular-progress-indicator');
12
-
13
- const CircularProgressIndicator = _ref => {
14
- let {
15
- size,
16
- showLabel,
17
- showTooltip,
18
- waiting,
19
- loading
20
- } = _ref;
21
- const waitingLabel = 'Waiting...';
22
- const loadingLabel = 'Loading...';
1
+ import * as React from "react";
2
+ import React2 from "react";
3
+ import { describe, PropTypes } from "react-desc";
4
+ import { convertPropToCssClassName } from "@elliemae/ds-classnames";
5
+ import DSTooltip from "@elliemae/ds-tooltip";
6
+ const { classNameBlock, classNameElement } = convertPropToCssClassName("circular-progress-indicator");
7
+ const CircularProgressIndicator = ({ size, showLabel, showTooltip, waiting, loading }) => {
8
+ const waitingLabel = "Waiting...";
9
+ const loadingLabel = "Loading...";
23
10
  const currentLabel = waiting && !loading ? waitingLabel : loadingLabel;
24
11
  let sizePx;
25
12
  let sizeLabel;
26
13
  let strokeWidth;
27
14
  let trackWidth;
28
- let markerHeight = '0.7';
29
- let markerRefY = '4.8';
30
- let grayArcStrokeDasharray = '45 170';
31
- let grayArcStrokeDashoffset = '127.5';
32
-
15
+ let markerHeight = "0.7";
16
+ let markerRefY = "4.8";
17
+ let grayArcStrokeDasharray = "45 170";
18
+ let grayArcStrokeDashoffset = "127.5";
33
19
  switch (size.toUpperCase()) {
34
- case 'XS':
20
+ case "XS":
35
21
  sizePx = 8;
36
22
  sizeLabel = 12;
37
23
  strokeWidth = 10;
38
24
  trackWidth = 3;
39
- markerHeight = '1';
40
- grayArcStrokeDasharray = '46 174';
41
- grayArcStrokeDashoffset = '133';
25
+ markerHeight = "1";
26
+ grayArcStrokeDasharray = "46 174";
27
+ grayArcStrokeDashoffset = "133";
42
28
  break;
43
-
44
- case 'S':
29
+ case "S":
45
30
  sizePx = 16;
46
31
  sizeLabel = 12;
47
32
  strokeWidth = 8;
48
33
  trackWidth = 3;
49
- markerHeight = '1';
50
- grayArcStrokeDasharray = '46 174';
51
- grayArcStrokeDashoffset = '133';
34
+ markerHeight = "1";
35
+ grayArcStrokeDasharray = "46 174";
36
+ grayArcStrokeDashoffset = "133";
52
37
  break;
53
-
54
- case 'M':
38
+ case "M":
55
39
  sizePx = 24;
56
40
  sizeLabel = 12;
57
41
  strokeWidth = 7;
58
42
  trackWidth = 3;
59
- markerHeight = '1';
60
- markerRefY = '5.5';
61
- grayArcStrokeDasharray = '46 174';
62
- grayArcStrokeDashoffset = '133';
43
+ markerHeight = "1";
44
+ markerRefY = "5.5";
45
+ grayArcStrokeDasharray = "46 174";
46
+ grayArcStrokeDashoffset = "133";
63
47
  break;
64
-
65
- case 'L':
48
+ case "L":
66
49
  sizePx = 32;
67
50
  sizeLabel = 13;
68
51
  strokeWidth = 6;
69
52
  trackWidth = 3;
70
- markerRefY = '5';
53
+ markerRefY = "5";
71
54
  break;
72
-
73
- case 'XL':
55
+ case "XL":
74
56
  sizePx = 48;
75
57
  sizeLabel = 14;
76
58
  strokeWidth = 5;
77
59
  trackWidth = 1;
78
60
  break;
79
-
80
- case 'XXL':
61
+ case "XXL":
81
62
  sizePx = 56;
82
63
  sizeLabel = 16;
83
64
  strokeWidth = 4;
84
65
  trackWidth = 1;
85
66
  break;
86
-
87
- case 'XXXL':
67
+ case "XXXL":
88
68
  sizePx = 64;
89
69
  sizeLabel = 16;
90
70
  strokeWidth = 5;
91
71
  trackWidth = 2;
92
72
  break;
73
+ default:
74
+ break;
93
75
  }
94
-
95
- const labelText = /*#__PURE__*/_jsx("p", {
76
+ const labelText = /* @__PURE__ */ React2.createElement("p", {
96
77
  "data-testid": "circular-indicator-label",
97
- className: classNameElement('label'),
98
- style: {
99
- fontSize: "".concat(sizeLabel, "px")
100
- }
101
- }, void 0, currentLabel); // Only adds the tooltip if sizePx < 17 or showTooltip is true
102
-
103
-
104
- const buildIndicator = Component => sizePx < 17 || showTooltip ? /*#__PURE__*/_jsx(DSTooltip, {
78
+ className: classNameElement("label"),
79
+ style: { fontSize: `${sizeLabel}px` }
80
+ }, currentLabel);
81
+ const buildIndicator = (Component) => sizePx < 17 || showTooltip ? /* @__PURE__ */ React2.createElement(DSTooltip, {
105
82
  containerProps: {
106
- id: 'ds-circular-progress-indicator',
107
- 'data-testid': 'circular-indicator-title'
83
+ id: "ds-circular-progress-indicator",
84
+ "data-testid": "circular-indicator-title"
108
85
  },
109
86
  interactionType: "hover",
110
87
  title: currentLabel,
111
88
  triggerComponent: Component,
112
89
  placement: "bottom"
113
90
  }) : Component;
114
-
115
- const grayTrack = /*#__PURE__*/_jsx("circle", {
116
- className: classNameElement('track'),
91
+ const grayTrack = /* @__PURE__ */ React2.createElement("circle", {
92
+ className: classNameElement("track"),
117
93
  cx: "50%",
118
94
  cy: "50%",
119
95
  fill: "none",
120
96
  r: "28",
121
- strokeWidth: "".concat(trackWidth, "px")
97
+ strokeWidth: `${trackWidth}px`
122
98
  });
123
-
124
- const grayArc = /*#__PURE__*/_jsx("circle", {
125
- className: classNameElement('arc-gray'),
99
+ const grayArc = /* @__PURE__ */ React2.createElement("circle", {
100
+ className: classNameElement("arc-gray"),
126
101
  stroke: "#E0E3E8",
127
- strokeDasharray: "".concat(grayArcStrokeDasharray),
128
- strokeDashoffset: "".concat(grayArcStrokeDashoffset),
102
+ strokeDasharray: `${grayArcStrokeDasharray}`,
103
+ strokeDashoffset: `${grayArcStrokeDashoffset}`,
129
104
  cx: "50%",
130
105
  cy: "50%",
131
106
  fill: "none",
132
107
  r: "28",
133
- strokeWidth: "".concat(trackWidth, "px")
108
+ strokeWidth: `${trackWidth}px`
134
109
  });
135
-
136
- const indicator = /*#__PURE__*/_jsx("svg", {
137
- height: "".concat(sizePx, "px"),
110
+ const indicator = /* @__PURE__ */ React2.createElement("svg", {
111
+ height: `${sizePx}px`,
138
112
  version: "1.1",
139
113
  viewBox: "0 0 66 66",
140
- width: "".concat(sizePx, "px"),
114
+ width: `${sizePx}px`,
141
115
  "data-testid": "circular-indicator"
142
- }, void 0, /*#__PURE__*/_jsx("defs", {}, void 0, /*#__PURE__*/_jsx("linearGradient", {
116
+ }, /* @__PURE__ */ React2.createElement("defs", null, /* @__PURE__ */ React2.createElement("linearGradient", {
143
117
  id: "grad1",
144
118
  x1: "0%",
145
119
  x2: "100%",
146
120
  y1: "100%",
147
121
  y2: "0%"
148
- }, void 0, /*#__PURE__*/_jsx("stop", {
122
+ }, /* @__PURE__ */ React2.createElement("stop", {
149
123
  offset: "0%",
150
- style: {
151
- stopColor: '#E0E3E8',
152
- stopOpacity: 1
153
- }
154
- }), /*#__PURE__*/_jsx("stop", {
124
+ style: { stopColor: "#E0E3E8", stopOpacity: 1 }
125
+ }), /* @__PURE__ */ React2.createElement("stop", {
155
126
  offset: "89%",
156
- style: {
157
- stopColor: '#5594e2',
158
- stopOpacity: 1
159
- }
160
- }), /*#__PURE__*/_jsx("stop", {
127
+ style: { stopColor: "#5594e2", stopOpacity: 1 }
128
+ }), /* @__PURE__ */ React2.createElement("stop", {
161
129
  offset: "100%",
162
- style: {
163
- stopColor: '#5594e2',
164
- stopOpacity: 1
165
- }
166
- })), /*#__PURE__*/_jsx("linearGradient", {
130
+ style: { stopColor: "#5594e2", stopOpacity: 1 }
131
+ })), /* @__PURE__ */ React2.createElement("linearGradient", {
167
132
  id: "grad2",
168
133
  x1: "0%",
169
134
  x2: "100%",
170
135
  y1: "100%",
171
136
  y2: "0%"
172
- }, void 0, /*#__PURE__*/_jsx("stop", {
137
+ }, /* @__PURE__ */ React2.createElement("stop", {
173
138
  offset: "0%",
174
- style: {
175
- stopColor: '#5594e2',
176
- stopOpacity: 1
177
- }
178
- }), /*#__PURE__*/_jsx("stop", {
139
+ style: { stopColor: "#5594e2", stopOpacity: 1 }
140
+ }), /* @__PURE__ */ React2.createElement("stop", {
179
141
  offset: "11%",
180
- style: {
181
- stopColor: '#5594e2',
182
- stopOpacity: 1
183
- }
184
- }), /*#__PURE__*/_jsx("stop", {
142
+ style: { stopColor: "#5594e2", stopOpacity: 1 }
143
+ }), /* @__PURE__ */ React2.createElement("stop", {
185
144
  offset: "100%",
186
- style: {
187
- stopColor: '#E0E3E8',
188
- stopOpacity: 1
189
- }
190
- })), /*#__PURE__*/_jsx("marker", {
145
+ style: { stopColor: "#E0E3E8", stopOpacity: 1 }
146
+ })), /* @__PURE__ */ React2.createElement("marker", {
191
147
  id: "inverseL",
192
148
  viewBox: "0 0 5 10",
193
149
  refX: "0.5",
194
- refY: "".concat(markerRefY),
150
+ refY: `${markerRefY}`,
195
151
  markerUnits: "strokeWidth",
196
152
  markerWidth: "0.5",
197
- markerHeight: "".concat(markerHeight),
153
+ markerHeight: `${markerHeight}`,
198
154
  orient: "auto"
199
- }, void 0, _path || (_path = /*#__PURE__*/_jsx("path", {
155
+ }, /* @__PURE__ */ React2.createElement("path", {
200
156
  d: "M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z",
201
157
  fill: "#FFF"
202
- }))), /*#__PURE__*/_jsx("marker", {
158
+ })), /* @__PURE__ */ React2.createElement("marker", {
203
159
  id: "inverseR",
204
160
  viewBox: "0 0 5 10",
205
161
  refX: "0",
206
162
  refY: "5",
207
163
  markerUnits: "strokeWidth",
208
164
  markerWidth: "0.7",
209
- markerHeight: "".concat(markerHeight)
210
- }, void 0, _path2 || (_path2 = /*#__PURE__*/_jsx("path", {
165
+ markerHeight: `${markerHeight}`
166
+ }, /* @__PURE__ */ React2.createElement("path", {
211
167
  d: "M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z",
212
168
  fill: "#FFF"
213
- })))), grayTrack, !waiting && /*#__PURE__*/_jsx("g", {
169
+ }))), grayTrack, !waiting && /* @__PURE__ */ React2.createElement("g", {
214
170
  fill: "none",
215
171
  fillRule: "evenodd",
216
172
  stroke: "none",
217
173
  strokeWidth: "1"
218
- }, void 0, /*#__PURE__*/_jsx("path", {
219
- className: classNameElement('arc-blue'),
174
+ }, /* @__PURE__ */ React2.createElement("path", {
175
+ className: classNameElement("arc-blue"),
220
176
  d: "M30,5 C17.536025,6 6,17.536027 5,31",
221
177
  stroke: "#5594e2",
222
- strokeWidth: "".concat(strokeWidth - 0.5, "px"),
178
+ strokeWidth: `${strokeWidth - 0.5}px`,
223
179
  strokeLinecap: "round",
224
180
  "data-testid": "circular-indicator-blue-arc"
225
- }), /*#__PURE__*/_jsx("path", {
226
- className: classNameElement('arc-white'),
181
+ }), /* @__PURE__ */ React2.createElement("path", {
182
+ className: classNameElement("arc-white"),
227
183
  d: "M33,5 C17.536027,5 5,17.536027 5,33",
228
184
  stroke: "#FFF",
229
- strokeWidth: "".concat(strokeWidth + 2, "px"),
185
+ strokeWidth: `${strokeWidth + 2}px`,
230
186
  markerStart: "url(#inverseR)",
231
187
  markerEnd: "url(#inverseL)"
232
188
  }), grayArc));
233
-
234
- return /*#__PURE__*/_jsx("div", {
235
- className: classNameBlock('wrapper'),
189
+ return /* @__PURE__ */ React2.createElement("div", {
190
+ className: classNameBlock("wrapper"),
236
191
  role: "status",
237
- "aria-hidden": waiting || loading ? 'false' : 'true'
238
- }, void 0, buildIndicator(indicator), showLabel && labelText);
192
+ "aria-hidden": waiting || loading ? "false" : "true"
193
+ }, buildIndicator(indicator), showLabel && labelText);
239
194
  };
240
-
241
195
  CircularProgressIndicator.defaultProps = {
242
- size: 'm',
196
+ size: "m",
243
197
  showLabel: false,
244
198
  showTooltip: false,
245
199
  waiting: false,
246
200
  loading: false
247
201
  };
248
202
  const circularProgressIndicatorProps = {
249
- size: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl']).description('Defines the size of the indicator').defaultValue('m'),
250
- showLabel: PropTypes.bool.description('Wheter the indicator displays its state on a label or not').defaultValue(false),
251
- showTooltip: PropTypes.bool.description('Wheter the indicator displays its state on a tooltip or not').defaultValue(false),
252
- waiting: PropTypes.bool.description('Defines the state of the indicator as Waiting and only displays the gray track').defaultValue(false),
253
- loading: PropTypes.bool.description('Defines the state of the indicator as Loading and displays a blue spinner animation').defaultValue(false)
203
+ size: PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl", "xxxl"]).description("Defines the size of the indicator").defaultValue("m"),
204
+ showLabel: PropTypes.bool.description("Wheter the indicator displays its state on a label or not").defaultValue(false),
205
+ showTooltip: PropTypes.bool.description("Wheter the indicator displays its state on a tooltip or not").defaultValue(false),
206
+ waiting: PropTypes.bool.description("Defines the state of the indicator as Waiting and only displays the gray track").defaultValue(false),
207
+ loading: PropTypes.bool.description("Defines the state of the indicator as Loading and displays a blue spinner animation").defaultValue(false)
254
208
  };
209
+ CircularProgressIndicator.propTypes = circularProgressIndicatorProps;
255
210
  const CircularProgressIndicatorWithSchema = describe(CircularProgressIndicator);
256
211
  CircularProgressIndicatorWithSchema.propTypes = circularProgressIndicatorProps;
257
-
258
- export { CircularProgressIndicatorWithSchema, CircularProgressIndicator as default };
212
+ var DSCircularProgressIndicator_default = CircularProgressIndicator;
213
+ export {
214
+ CircularProgressIndicatorWithSchema,
215
+ DSCircularProgressIndicator_default as default
216
+ };
217
+ //# sourceMappingURL=DSCircularProgressIndicator.js.map
package/esm/DSCircularProgressIndicator.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSCircularProgressIndicator.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }
package/esm/index.js CHANGED
@@ -1 +1,12 @@
1
- export { CircularProgressIndicatorWithSchema, default as DSCircularProgressIndicator, default } from './DSCircularProgressIndicator.js';
1
+ import * as React from "react";
2
+ import {
3
+ default as default2,
4
+ default as default3,
5
+ CircularProgressIndicatorWithSchema
6
+ } from "./DSCircularProgressIndicator";
7
+ export {
8
+ CircularProgressIndicatorWithSchema,
9
+ default3 as DSCircularProgressIndicator,
10
+ default2 as default
11
+ };
12
+ //# sourceMappingURL=index.js.map
package/esm/index.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/named */\nexport {\n default,\n default as DSCircularProgressIndicator,\n CircularProgressIndicatorWithSchema,\n} from './DSCircularProgressIndicator';\n"],
5
+ "mappings": "AAAA;ACCA;AAAA;AAAA;AAAA;AAAA;",
6
+ "names": []
7
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-circular-progress-indicator",
3
- "version": "2.2.0-next.4",
3
+ "version": "2.3.0-alpha.2",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Circular progress indicator",
6
6
  "module": "./esm/index.js",
@@ -36,8 +36,8 @@
36
36
  "build": "node ../../scripts/build/build.js"
37
37
  },
38
38
  "dependencies": {
39
- "@elliemae/ds-classnames": "2.2.0-next.4",
40
- "@elliemae/ds-tooltip": "2.2.0-next.4",
39
+ "@elliemae/ds-classnames": "2.3.0-alpha.2",
40
+ "@elliemae/ds-tooltip": "2.3.0-alpha.2",
41
41
  "react-desc": "~4.1.3"
42
42
  },
43
43
  "devDependencies": {
package/types/DSCircularProgressIndicator.d.ts CHANGED
@@ -34,13 +34,7 @@ declare const CircularProgressIndicator: {
34
34
  };
35
35
  };
36
36
  declare const CircularProgressIndicatorWithSchema: {
37
- (props?: {
38
- size: any;
39
- showLabel: any;
40
- showTooltip: any;
41
- waiting: any;
42
- loading: any;
43
- } | undefined): JSX.Element;
37
+ (props?: unknown): JSX.Element;
44
38
  propTypes: unknown;
45
39
  toTypescript: () => import("react-desc").TypescriptSchema;
46
40
  };