@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.
- package/cjs/DSCircularProgressIndicator.js +126 -148
- package/cjs/DSCircularProgressIndicator.js.map +7 -0
- package/cjs/index.js +40 -11
- package/cjs/index.js.map +7 -0
- package/cjs/v2/DSCircularIndeterminateIndicator.js +149 -0
- package/cjs/v2/DSCircularIndeterminateIndicator.js.map +7 -0
- package/cjs/v2/index.js +36 -0
- package/cjs/v2/index.js.map +7 -0
- package/cjs/v2/react-desc-prop-types.js +56 -0
- package/cjs/v2/react-desc-prop-types.js.map +7 -0
- package/esm/DSCircularProgressIndicator.js +96 -137
- package/esm/DSCircularProgressIndicator.js.map +7 -0
- package/esm/index.js +15 -1
- package/esm/index.js.map +7 -0
- package/esm/v2/DSCircularIndeterminateIndicator.js +120 -0
- package/esm/v2/DSCircularIndeterminateIndicator.js.map +7 -0
- package/esm/v2/index.js +10 -0
- package/esm/v2/index.js.map +7 -0
- package/esm/v2/react-desc-prop-types.js +27 -0
- package/esm/v2/react-desc-prop-types.js.map +7 -0
- package/package.json +15 -3
- package/types/index.d.ts +1 -0
- package/types/v2/DSCircularIndeterminateIndicator.d.ts +9 -0
- package/types/v2/index.d.ts +1 -0
- package/types/v2/react-desc-prop-types.d.ts +32 -0
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/v2/DSCircularIndeterminateIndicator.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import React, { PropsWithChildren, WeakValidationMap } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { describe } from 'react-desc';\nimport styled from 'styled-components';\nimport { kfrm } from '@elliemae/ds-system';\nimport { uid } from 'uid';\nimport { DSCircularIndeterminateIndicatorT, CircularIndeterminateIndicatorPropTypes } from './react-desc-prop-types';\n\nconst r = kfrm`to { transform: rotate(2turn) }`;\nconst s = kfrm`0%, 39% { stroke-dasharray: 942px 2826px }`;\n\nconst StyledSvg = styled.svg<{ linearGradientUid: string; maskUid: string; duration: number }>`\n #gg {\n transform: rotate(45deg);\n stroke: url(#${(props) => props.linearGradientUid});\n mask: url(#${(props) => props.maskUid});\n }\n mask use {\n stroke: #fff;\n stroke-linecap: round;\n stroke-dasharray: 942px 2826px;\n animation: ${r} ${(props) => props.duration}s cubic-bezier(0.5, -0.43, 0.5, 1.43) infinite,\n ${s} ${(props) => props.duration / 2}s ease-in-out infinite alternate;\n }\n`;\n\nconst sizeToPx = {\n xs: '16px',\n s: '24px',\n m: '32px',\n l: '48px',\n xl: '56px',\n xxl: '64px',\n};\n\nconst sizeToWeight = {\n xs: '10%',\n s: '9%',\n m: '8%',\n l: '6%',\n xl: '5%',\n xxl: '4%',\n};\n\nconst colorToHex = {\n light: '#FFFFFF',\n dark: '#0F364A',\n};\n\nconst sizeToTextSize = {\n xs: '12px',\n s: '12px',\n m: '12px',\n l: '13px',\n xl: '14px',\n xxl: '16px',\n};\n\nexport const DSCircularIndeterminateIndicator: React.ComponentType<DSCircularIndeterminateIndicatorT.Props> = ({\n size = 'm',\n color = 'dark',\n text = '',\n showText = true,\n withTooltip = false,\n tooltipStartPlacementPreference = 'bottom',\n __duration = 1.5,\n}) => {\n const Wrapper = withTooltip ? DSTooltipV3 : ({ children }: PropsWithChildren<unknown>) => <>{children}</>;\n\n const linearGradientUid = uid(16);\n const maskUid = uid(16);\n const circleUid = uid(16);\n\n return (\n <Grid gutter=\"xs\" justifyContent=\"center\" role=\"status\">\n <Wrapper text={text} textAlign=\"center\" startPlacementPreference={tooltipStartPlacementPreference}>\n <StyledSvg\n viewBox=\"-1950 -975 3900 1950\"\n fill=\"none\"\n stroke=\"transparent\"\n strokeWidth={sizeToWeight[size]}\n width={sizeToPx[size]}\n height={sizeToPx[size]}\n style={{ display: 'block', margin: 'auto' }}\n linearGradientUid={linearGradientUid}\n maskUid={maskUid}\n duration={__duration}\n >\n <g transform=\"scale(2.298)\">\n <linearGradient id={linearGradientUid}>\n <stop stopColor={color === 'dark' ? '#48a3ff' : '#ccd6ff'}></stop>\n <stop stopColor={color === 'dark' ? '#49d0ff' : '#ebf6ff'} offset=\"1\"></stop>\n </linearGradient>\n <mask id={maskUid}>\n <circle r=\"1200\" fill=\"#000\"></circle>\n <use xlinkHref={`#${circleUid}`}></use>\n </mask>\n <circle id={circleUid} r=\"600\"></circle>\n <g id=\"gg\">\n <use xlinkHref={`#${circleUid}`}></use>\n </g>\n </g>\n </StyledSvg>\n {text !== '' && showText && (\n <span style={{ color: colorToHex[color], fontSize: sizeToTextSize[size] }}>{text}</span>\n )}\n </Wrapper>\n </Grid>\n );\n};\n\nDSCircularIndeterminateIndicator.propTypes = CircularIndeterminateIndicatorPropTypes as WeakValidationMap<unknown>;\n\nexport const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);\nDSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypes;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA4D;AAC5D,qBAAqB;AACrB,wBAA4B;AAC5B,wBAAyB;AACzB,+BAAmB;AACnB,uBAAqB;AACrB,iBAAoB;AACpB,mCAA2F;AAE3F,MAAM,IAAI;AACV,MAAM,IAAI;AAEV,MAAM,YAAY,iCAAO;AAAA;AAAA;AAAA,mBAGN,CAAC,UAAU,MAAM;AAAA,iBACnB,CAAC,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAMjB,KAAK,CAAC,UAAU,MAAM;AAAA,QAC/B,KAAK,CAAC,UAAU,MAAM,WAAW;AAAA;AAAA;AAIzC,MAAM,WAAW;AAAA,EACf,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;AAGP,MAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;AAGP,MAAM,aAAa;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA;AAGR,MAAM,iBAAiB;AAAA,EACrB,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;AAGA,MAAM,mCAAiG,CAAC;AAAA,EAC7G,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,WAAW;AAAA,EACX,cAAc;AAAA,EACd,kCAAkC;AAAA,EAClC,aAAa;AAAA,MACT;AACJ,QAAM,UAAU,cAAc,gCAAc,CAAC,EAAE,eAA2C,wFAAG;AAE7F,QAAM,oBAAoB,oBAAI;AAC9B,QAAM,UAAU,oBAAI;AACpB,QAAM,YAAY,oBAAI;AAEtB,SACE,mDAAC,qBAAD;AAAA,IAAM,QAAO;AAAA,IAAK,gBAAe;AAAA,IAAS,MAAK;AAAA,KAC7C,mDAAC,SAAD;AAAA,IAAS;AAAA,IAAY,WAAU;AAAA,IAAS,0BAA0B;AAAA,KAChE,mDAAC,WAAD;AAAA,IACE,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAO;AAAA,IACP,aAAa,aAAa;AAAA,IAC1B,OAAO,SAAS;AAAA,IAChB,QAAQ,SAAS;AAAA,IACjB,OAAO,EAAE,SAAS,SAAS,QAAQ;AAAA,IACnC;AAAA,IACA;AAAA,IACA,UAAU;AAAA,KAEV,mDAAC,KAAD;AAAA,IAAG,WAAU;AAAA,KACX,mDAAC,kBAAD;AAAA,IAAgB,IAAI;AAAA,KAClB,mDAAC,QAAD;AAAA,IAAM,WAAW,UAAU,SAAS,YAAY;AAAA,MAChD,mDAAC,QAAD;AAAA,IAAM,WAAW,UAAU,SAAS,YAAY;AAAA,IAAW,QAAO;AAAA,OAEpE,mDAAC,QAAD;AAAA,IAAM,IAAI;AAAA,KACR,mDAAC,UAAD;AAAA,IAAQ,GAAE;AAAA,IAAO,MAAK;AAAA,MACtB,mDAAC,OAAD;AAAA,IAAK,WAAW,IAAI;AAAA,OAEtB,mDAAC,UAAD;AAAA,IAAQ,IAAI;AAAA,IAAW,GAAE;AAAA,MACzB,mDAAC,KAAD;AAAA,IAAG,IAAG;AAAA,KACJ,mDAAC,OAAD;AAAA,IAAK,WAAW,IAAI;AAAA,SAIzB,SAAS,MAAM,YACd,mDAAC,QAAD;AAAA,IAAM,OAAO,EAAE,OAAO,WAAW,QAAQ,UAAU,eAAe;AAAA,KAAU;AAAA;AAOtF,iCAAiC,YAAY;AAEtC,MAAM,6CAA6C,gCAAS;AACnE,2CAA2C,YAAY;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/cjs/v2/index.js
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
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 v2_exports = {};
|
|
29
|
+
__export(v2_exports, {
|
|
30
|
+
DSCircularIndeterminateIndicator: () => import_DSCircularIndeterminateIndicator.DSCircularIndeterminateIndicator,
|
|
31
|
+
DSCircularIndeterminateIndicatorWithSchema: () => import_DSCircularIndeterminateIndicator.DSCircularIndeterminateIndicatorWithSchema
|
|
32
|
+
});
|
|
33
|
+
var React = __toESM(require("react"));
|
|
34
|
+
var import_DSCircularIndeterminateIndicator = require("./DSCircularIndeterminateIndicator");
|
|
35
|
+
module.exports = __toCommonJS(v2_exports);
|
|
36
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/v2/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["export {\n DSCircularIndeterminateIndicator,\n DSCircularIndeterminateIndicatorWithSchema,\n} from './DSCircularIndeterminateIndicator';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8CAGO;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,56 @@
|
|
|
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 react_desc_prop_types_exports = {};
|
|
29
|
+
__export(react_desc_prop_types_exports, {
|
|
30
|
+
CircularIndeterminateIndicatorPropTypes: () => CircularIndeterminateIndicatorPropTypes
|
|
31
|
+
});
|
|
32
|
+
var React = __toESM(require("react"));
|
|
33
|
+
var import_react_desc = require("react-desc");
|
|
34
|
+
const CircularIndeterminateIndicatorPropTypes = {
|
|
35
|
+
size: import_react_desc.PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl"]).description("Size of the indicator").defaultValue("m"),
|
|
36
|
+
color: import_react_desc.PropTypes.oneOf(["light", "dark"]).description("Color mode for the indicator").defaultValue("dark"),
|
|
37
|
+
text: import_react_desc.PropTypes.string.description("Optional text to show under the indicator").defaultValue(""),
|
|
38
|
+
showText: import_react_desc.PropTypes.bool.description("Whether to show the optional text or not").defaultValue(true),
|
|
39
|
+
withTooltip: import_react_desc.PropTypes.bool.description("Whether to include a tooltip that shows the optional text on hover").defaultValue(false),
|
|
40
|
+
tooltipStartPlacementPreference: import_react_desc.PropTypes.oneOf([
|
|
41
|
+
"top-start",
|
|
42
|
+
"top",
|
|
43
|
+
"top-end",
|
|
44
|
+
"right-start",
|
|
45
|
+
"right",
|
|
46
|
+
"right-end",
|
|
47
|
+
"bottom-end",
|
|
48
|
+
"bottom",
|
|
49
|
+
"bottom-start",
|
|
50
|
+
"left-end",
|
|
51
|
+
"left",
|
|
52
|
+
"left-start"
|
|
53
|
+
]).description("start placement preference for the tooltip").defaultValue("center")
|
|
54
|
+
};
|
|
55
|
+
module.exports = __toCommonJS(react_desc_prop_types_exports);
|
|
56
|
+
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/v2/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { PropTypes } from 'react-desc';\n\nexport declare namespace DSCircularIndeterminateIndicatorT {\n interface Props {\n size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';\n color?: 'light' | 'dark';\n text?: string;\n showText?: boolean;\n withTooltip: boolean;\n tooltipStartPlacementPreference?:\n | 'top-start'\n | 'top'\n | 'top-end'\n | 'right-start'\n | 'right'\n | 'right-end'\n | 'bottom-end'\n | 'bottom'\n | 'bottom-start'\n | 'left-end'\n | 'left'\n | 'left-start';\n __duration: number;\n }\n}\n\nexport const CircularIndeterminateIndicatorPropTypes = {\n size: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl']).description('Size of the indicator').defaultValue('m'),\n color: PropTypes.oneOf(['light', 'dark']).description('Color mode for the indicator').defaultValue('dark'),\n text: PropTypes.string.description('Optional text to show under the indicator').defaultValue(''),\n showText: PropTypes.bool.description('Whether to show the optional text or not').defaultValue(true),\n withTooltip: PropTypes.bool\n .description('Whether to include a tooltip that shows the optional text on hover')\n .defaultValue(false),\n tooltipStartPlacementPreference: PropTypes.oneOf([\n 'top-start',\n 'top',\n 'top-end',\n 'right-start',\n 'right',\n 'right-end',\n 'bottom-end',\n 'bottom',\n 'bottom-start',\n 'left-end',\n 'left',\n 'left-start',\n ])\n .description('start placement preference for the tooltip')\n .defaultValue('center'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,wBAA0B;AA0BnB,MAAM,0CAA0C;AAAA,EACrD,MAAM,4BAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,QAAQ,YAAY,yBAAyB,aAAa;AAAA,EAC5G,OAAO,4BAAU,MAAM,CAAC,SAAS,SAAS,YAAY,gCAAgC,aAAa;AAAA,EACnG,MAAM,4BAAU,OAAO,YAAY,6CAA6C,aAAa;AAAA,EAC7F,UAAU,4BAAU,KAAK,YAAY,4CAA4C,aAAa;AAAA,EAC9F,aAAa,4BAAU,KACpB,YAAY,sEACZ,aAAa;AAAA,EAChB,iCAAiC,4BAAU,MAAM;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEC,YAAY,8CACZ,aAAa;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,258 +1,217 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
import { convertPropToCssClassName } from
|
|
5
|
-
import DSTooltip from
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
const
|
|
9
|
-
|
|
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 =
|
|
29
|
-
let markerRefY =
|
|
30
|
-
let grayArcStrokeDasharray =
|
|
31
|
-
let grayArcStrokeDashoffset =
|
|
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
|
|
20
|
+
case "XS":
|
|
35
21
|
sizePx = 8;
|
|
36
22
|
sizeLabel = 12;
|
|
37
23
|
strokeWidth = 10;
|
|
38
24
|
trackWidth = 3;
|
|
39
|
-
markerHeight =
|
|
40
|
-
grayArcStrokeDasharray =
|
|
41
|
-
grayArcStrokeDashoffset =
|
|
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 =
|
|
50
|
-
grayArcStrokeDasharray =
|
|
51
|
-
grayArcStrokeDashoffset =
|
|
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 =
|
|
60
|
-
markerRefY =
|
|
61
|
-
grayArcStrokeDasharray =
|
|
62
|
-
grayArcStrokeDashoffset =
|
|
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 =
|
|
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(
|
|
98
|
-
style: {
|
|
99
|
-
|
|
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:
|
|
107
|
-
|
|
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
|
-
|
|
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:
|
|
97
|
+
strokeWidth: `${trackWidth}px`
|
|
122
98
|
});
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
className: classNameElement('arc-gray'),
|
|
99
|
+
const grayArc = /* @__PURE__ */ React2.createElement("circle", {
|
|
100
|
+
className: classNameElement("arc-gray"),
|
|
126
101
|
stroke: "#E0E3E8",
|
|
127
|
-
strokeDasharray:
|
|
128
|
-
strokeDashoffset:
|
|
102
|
+
strokeDasharray: `${grayArcStrokeDasharray}`,
|
|
103
|
+
strokeDashoffset: `${grayArcStrokeDashoffset}`,
|
|
129
104
|
cx: "50%",
|
|
130
105
|
cy: "50%",
|
|
131
106
|
fill: "none",
|
|
132
107
|
r: "28",
|
|
133
|
-
strokeWidth:
|
|
108
|
+
strokeWidth: `${trackWidth}px`
|
|
134
109
|
});
|
|
135
|
-
|
|
136
|
-
|
|
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:
|
|
114
|
+
width: `${sizePx}px`,
|
|
141
115
|
"data-testid": "circular-indicator"
|
|
142
|
-
},
|
|
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
|
-
},
|
|
122
|
+
}, /* @__PURE__ */ React2.createElement("stop", {
|
|
149
123
|
offset: "0%",
|
|
150
|
-
style: {
|
|
151
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
},
|
|
137
|
+
}, /* @__PURE__ */ React2.createElement("stop", {
|
|
173
138
|
offset: "0%",
|
|
174
|
-
style: {
|
|
175
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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:
|
|
150
|
+
refY: `${markerRefY}`,
|
|
195
151
|
markerUnits: "strokeWidth",
|
|
196
152
|
markerWidth: "0.5",
|
|
197
|
-
markerHeight:
|
|
153
|
+
markerHeight: `${markerHeight}`,
|
|
198
154
|
orient: "auto"
|
|
199
|
-
},
|
|
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
|
-
}))
|
|
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:
|
|
210
|
-
},
|
|
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
|
-
})))
|
|
169
|
+
}))), grayTrack, !waiting && /* @__PURE__ */ React2.createElement("g", {
|
|
214
170
|
fill: "none",
|
|
215
171
|
fillRule: "evenodd",
|
|
216
172
|
stroke: "none",
|
|
217
173
|
strokeWidth: "1"
|
|
218
|
-
},
|
|
219
|
-
className: classNameElement(
|
|
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:
|
|
178
|
+
strokeWidth: `${strokeWidth - 0.5}px`,
|
|
223
179
|
strokeLinecap: "round",
|
|
224
180
|
"data-testid": "circular-indicator-blue-arc"
|
|
225
|
-
}),
|
|
226
|
-
className: classNameElement(
|
|
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:
|
|
185
|
+
strokeWidth: `${strokeWidth + 2}px`,
|
|
230
186
|
markerStart: "url(#inverseR)",
|
|
231
187
|
markerEnd: "url(#inverseL)"
|
|
232
188
|
}), grayArc));
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
className: classNameBlock('wrapper'),
|
|
189
|
+
return /* @__PURE__ */ React2.createElement("div", {
|
|
190
|
+
className: classNameBlock("wrapper"),
|
|
236
191
|
role: "status",
|
|
237
|
-
"aria-hidden": waiting || loading ?
|
|
238
|
-
},
|
|
192
|
+
"aria-hidden": waiting || loading ? "false" : "true"
|
|
193
|
+
}, buildIndicator(indicator), showLabel && labelText);
|
|
239
194
|
};
|
|
240
|
-
|
|
241
195
|
CircularProgressIndicator.defaultProps = {
|
|
242
|
-
size:
|
|
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([
|
|
250
|
-
showLabel: PropTypes.bool.description(
|
|
251
|
-
showTooltip: PropTypes.bool.description(
|
|
252
|
-
waiting: PropTypes.bool.description(
|
|
253
|
-
loading: PropTypes.bool.description(
|
|
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 {
|
|
212
|
+
var DSCircularProgressIndicator_default = CircularProgressIndicator;
|
|
213
|
+
export {
|
|
214
|
+
CircularProgressIndicatorWithSchema,
|
|
215
|
+
DSCircularProgressIndicator_default as default
|
|
216
|
+
};
|
|
217
|
+
//# sourceMappingURL=DSCircularProgressIndicator.js.map
|
|
@@ -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": "AAAA;ACGA;AACA;AACA;AACA;AAEA,MAAM,EAAE,gBAAgB,qBAAqB,0BAA0B;AAEvE,MAAM,4BAA4B,CAAC,EAAE,MAAM,WAAW,aAAa,SAAS,cAAc;AACxF,QAAM,eAAe;AACrB,QAAM,eAAe;AACrB,QAAM,eAAe,WAAW,CAAC,UAAU,eAAe;AAC1D,MAAI;AACJ,MAAI;AACJ,MAAI;AACJ,MAAI;AACJ,MAAI,eAAe;AACnB,MAAI,aAAa;AACjB,MAAI,yBAAyB;AAC7B,MAAI,0BAA0B;AAE9B,UAAQ,KAAK;AAAA,SACN;AACH,eAAS;AACT,kBAAY;AACZ,oBAAc;AACd,mBAAa;AACb,qBAAe;AACf,+BAAyB;AACzB,gCAA0B;AAC1B;AAAA,SACG;AACH,eAAS;AACT,kBAAY;AACZ,oBAAc;AACd,mBAAa;AACb,qBAAe;AACf,+BAAyB;AACzB,gCAA0B;AAC1B;AAAA,SACG;AACH,eAAS;AACT,kBAAY;AACZ,oBAAc;AACd,mBAAa;AACb,qBAAe;AACf,mBAAa;AACb,+BAAyB;AACzB,gCAA0B;AAC1B;AAAA,SACG;AACH,eAAS;AACT,kBAAY;AACZ,oBAAc;AACd,mBAAa;AACb,mBAAa;AACb;AAAA,SACG;AACH,eAAS;AACT,kBAAY;AACZ,oBAAc;AACd,mBAAa;AACb;AAAA,SACG;AACH,eAAS;AACT,kBAAY;AACZ,oBAAc;AACd,mBAAa;AACb;AAAA,SACG;AACH,eAAS;AACT,kBAAY;AACZ,oBAAc;AACd,mBAAa;AACb;AAAA;AAEA;AAAA;AAGJ,QAAM,YACJ,qCAAC,KAAD;AAAA,IACE,eAAY;AAAA,IACZ,WAAW,iBAAiB;AAAA,IAC5B,OAAO,EAAE,UAAU,GAAG;AAAA,KAErB;AAKL,QAAM,iBAAiB,CAAC,cACtB,SAAS,MAAM,cACb,qCAAC,WAAD;AAAA,IACE,gBAAgB;AAAA,MACd,IAAI;AAAA,MACJ,eAAe;AAAA;AAAA,IAEjB,iBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,kBAAkB;AAAA,IAClB,WAAU;AAAA,OAGZ;AAGJ,QAAM,YACJ,qCAAC,UAAD;AAAA,IACE,WAAW,iBAAiB;AAAA,IAC5B,IAAG;AAAA,IACH,IAAG;AAAA,IACH,MAAK;AAAA,IACL,GAAE;AAAA,IACF,aAAa,GAAG;AAAA;AAIpB,QAAM,UACJ,qCAAC,UAAD;AAAA,IACE,WAAW,iBAAiB;AAAA,IAC5B,QAAO;AAAA,IACP,iBAAiB,GAAG;AAAA,IACpB,kBAAkB,GAAG;AAAA,IACrB,IAAG;AAAA,IACH,IAAG;AAAA,IACH,MAAK;AAAA,IACL,GAAE;AAAA,IACF,aAAa,GAAG;AAAA;AAIpB,QAAM,YACJ,qCAAC,OAAD;AAAA,IACE,QAAQ,GAAG;AAAA,IACX,SAAQ;AAAA,IACR,SAAQ;AAAA,IACR,OAAO,GAAG;AAAA,IACV,eAAY;AAAA,KAEZ,qCAAC,QAAD,MACE,qCAAC,kBAAD;AAAA,IAAgB,IAAG;AAAA,IAAQ,IAAG;AAAA,IAAK,IAAG;AAAA,IAAO,IAAG;AAAA,IAAO,IAAG;AAAA,KACxD,qCAAC,QAAD;AAAA,IAAM,QAAO;AAAA,IAAK,OAAO,EAAE,WAAW,WAAW,aAAa;AAAA,MAC9D,qCAAC,QAAD;AAAA,IAAM,QAAO;AAAA,IAAM,OAAO,EAAE,WAAW,WAAW,aAAa;AAAA,MAC/D,qCAAC,QAAD;AAAA,IAAM,QAAO;AAAA,IAAO,OAAO,EAAE,WAAW,WAAW,aAAa;AAAA,OAElE,qCAAC,kBAAD;AAAA,IAAgB,IAAG;AAAA,IAAQ,IAAG;AAAA,IAAK,IAAG;AAAA,IAAO,IAAG;AAAA,IAAO,IAAG;AAAA,KACxD,qCAAC,QAAD;AAAA,IAAM,QAAO;AAAA,IAAK,OAAO,EAAE,WAAW,WAAW,aAAa;AAAA,MAC9D,qCAAC,QAAD;AAAA,IAAM,QAAO;AAAA,IAAM,OAAO,EAAE,WAAW,WAAW,aAAa;AAAA,MAC/D,qCAAC,QAAD;AAAA,IAAM,QAAO;AAAA,IAAO,OAAO,EAAE,WAAW,WAAW,aAAa;AAAA,OAElE,qCAAC,UAAD;AAAA,IACE,IAAG;AAAA,IACH,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,MAAM,GAAG;AAAA,IACT,aAAY;AAAA,IACZ,aAAY;AAAA,IACZ,cAAc,GAAG;AAAA,IACjB,QAAO;AAAA,KAEP,qCAAC,QAAD;AAAA,IAAM,GAAE;AAAA,IAAwC,MAAK;AAAA,OAEvD,qCAAC,UAAD;AAAA,IACE,IAAG;AAAA,IACH,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,MAAK;AAAA,IACL,aAAY;AAAA,IACZ,aAAY;AAAA,IACZ,cAAc,GAAG;AAAA,KAEjB,qCAAC,QAAD;AAAA,IAAM,GAAE;AAAA,IAAwC,MAAK;AAAA,QAGxD,WACA,CAAC,WACA,qCAAC,KAAD;AAAA,IAAG,MAAK;AAAA,IAAO,UAAS;AAAA,IAAU,QAAO;AAAA,IAAO,aAAY;AAAA,KAC1D,qCAAC,QAAD;AAAA,IACE,WAAW,iBAAiB;AAAA,IAC5B,GAAE;AAAA,IACF,QAAO;AAAA,IACP,aAAa,GAAG,cAAc;AAAA,IAC9B,eAAc;AAAA,IACd,eAAY;AAAA,MAEd,qCAAC,QAAD;AAAA,IACE,WAAW,iBAAiB;AAAA,IAC5B,GAAE;AAAA,IACF,QAAO;AAAA,IACP,aAAa,GAAG,cAAc;AAAA,IAC9B,aAAY;AAAA,IACZ,WAAU;AAAA,MAEX;AAMT,SACE,qCAAC,OAAD;AAAA,IAAK,WAAW,eAAe;AAAA,IAAY,MAAK;AAAA,IAAS,eAAa,WAAW,UAAU,UAAU;AAAA,KAClG,eAAe,YACf,aAAa;AAAA;AAKpB,0BAA0B,eAAe;AAAA,EACvC,MAAM;AAAA,EACN,WAAW;AAAA,EACX,aAAa;AAAA,EACb,SAAS;AAAA,EACT,SAAS;AAAA;AAGX,MAAM,iCAAiC;AAAA,EACrC,MAAM,UAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,OAAO,SACtD,YAAY,qCACZ,aAAa;AAAA,EAChB,WAAW,UAAU,KAClB,YAAY,6DACZ,aAAa;AAAA,EAChB,aAAa,UAAU,KACpB,YAAY,+DACZ,aAAa;AAAA,EAChB,SAAS,UAAU,KAChB,YAAY,kFACZ,aAAa;AAAA,EAChB,SAAS,UAAU,KAChB,YAAY,uFACZ,aAAa;AAAA;AAGlB,0BAA0B,YAAY;AAEtC,MAAM,sCAAsC,SAAS;AACrD,oCAAoC,YAAY;AAGhD,IAAO,sCAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/index.js
CHANGED
|
@@ -1 +1,15 @@
|
|
|
1
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import {
|
|
3
|
+
default as default2,
|
|
4
|
+
default as default3,
|
|
5
|
+
CircularProgressIndicatorWithSchema
|
|
6
|
+
} from "./DSCircularProgressIndicator";
|
|
7
|
+
import { DSCircularIndeterminateIndicator, DSCircularIndeterminateIndicatorWithSchema } from "./v2";
|
|
8
|
+
export {
|
|
9
|
+
CircularProgressIndicatorWithSchema,
|
|
10
|
+
DSCircularIndeterminateIndicator,
|
|
11
|
+
DSCircularIndeterminateIndicatorWithSchema,
|
|
12
|
+
default3 as DSCircularProgressIndicator,
|
|
13
|
+
default2 as default
|
|
14
|
+
};
|
|
15
|
+
//# 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';\nexport { DSCircularIndeterminateIndicator, DSCircularIndeterminateIndicatorWithSchema } from './v2';\n"],
|
|
5
|
+
"mappings": "AAAA;ACCA;AAAA;AAAA;AAAA;AAAA;AAKA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|