@elliemae/ds-circular-progress-indicator 3.2.1-rc.5 → 3.2.1-rc.6
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/dist/cjs/v2/DSCircularIndeterminateIndicator.js +5 -30
- package/dist/cjs/v2/DSCircularIndeterminateIndicator.js.map +1 -1
- package/dist/cjs/v2/react-desc-prop-types.js +3 -19
- package/dist/cjs/v2/react-desc-prop-types.js.map +1 -1
- package/dist/esm/v2/DSCircularIndeterminateIndicator.js +5 -32
- package/dist/esm/v2/DSCircularIndeterminateIndicator.js.map +1 -1
- package/dist/esm/v2/react-desc-prop-types.js +3 -21
- package/dist/esm/v2/react-desc-prop-types.js.map +1 -1
- package/package.json +6 -6
|
@@ -3,34 +3,8 @@ var __create = Object.create;
|
|
|
3
3
|
var __defProp = Object.defineProperty;
|
|
4
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
7
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
8
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
10
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
11
|
-
var __spreadValues = (a, b) => {
|
|
12
|
-
for (var prop in b || (b = {}))
|
|
13
|
-
if (__hasOwnProp.call(b, prop))
|
|
14
|
-
__defNormalProp(a, prop, b[prop]);
|
|
15
|
-
if (__getOwnPropSymbols)
|
|
16
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
17
|
-
if (__propIsEnum.call(b, prop))
|
|
18
|
-
__defNormalProp(a, prop, b[prop]);
|
|
19
|
-
}
|
|
20
|
-
return a;
|
|
21
|
-
};
|
|
22
|
-
var __objRest = (source, exclude) => {
|
|
23
|
-
var target = {};
|
|
24
|
-
for (var prop in source)
|
|
25
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
26
|
-
target[prop] = source[prop];
|
|
27
|
-
if (source != null && __getOwnPropSymbols)
|
|
28
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
29
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
30
|
-
target[prop] = source[prop];
|
|
31
|
-
}
|
|
32
|
-
return target;
|
|
33
|
-
};
|
|
34
8
|
var __export = (target, all) => {
|
|
35
9
|
for (var name in all)
|
|
36
10
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -63,17 +37,18 @@ var import_styled = require("./styled");
|
|
|
63
37
|
const EmptyComp = (props) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, props.children);
|
|
64
38
|
const DSCircularIndeterminateIndicator = (props) => {
|
|
65
39
|
const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
|
|
66
|
-
const
|
|
40
|
+
const { height, width, rows, cols, ...globalAttributes } = (0, import_ds_utilities.useGetGlobalAttributes)(propsWithDefault);
|
|
67
41
|
const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference } = propsWithDefault;
|
|
68
42
|
const Wrapper = (0, import_react.useMemo)(() => withTooltip ? import_ds_tooltip.DSTooltipV3 : EmptyComp, [withTooltip]);
|
|
69
43
|
const uniqueId = (0, import_react.useMemo)(() => (0, import_uid.uid)(16), []);
|
|
70
44
|
const circleRadius = (0, import_react.useMemo)(() => (import_constants.sizeToPx[size] - Number.parseInt(import_constants.sizeToWeight[size], 10)) / 2, [size]);
|
|
71
|
-
return /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid,
|
|
45
|
+
return /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
|
|
72
46
|
gutter: "xs",
|
|
73
47
|
justifyContent: "center",
|
|
74
48
|
role: "status",
|
|
75
|
-
"aria-label": text || "Loading..."
|
|
76
|
-
|
|
49
|
+
"aria-label": text || "Loading...",
|
|
50
|
+
...globalAttributes
|
|
51
|
+
}, /* @__PURE__ */ import_react.default.createElement(Wrapper, {
|
|
77
52
|
text,
|
|
78
53
|
textAlign: "center",
|
|
79
54
|
startPlacementPreference: tooltipStartPlacementPreference
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/v2/DSCircularIndeterminateIndicator.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport {\n DSCircularIndeterminateIndicatorT,\n CircularIndeterminateIndicatorPropTypes,\n defaultProps,\n} from './react-desc-prop-types';\nimport { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from './constants';\nimport { StyledCircle, StyledPath, StyledRect, StyledSvg } from './styled';\n\n// eslint-disable-next-line react/jsx-no-useless-fragment\nconst EmptyComp: typeof DSTooltipV3 = (props) => <>{props.children}</>;\n\nexport const DSCircularIndeterminateIndicator: React.ComponentType<DSCircularIndeterminateIndicatorT.Props> = (\n props,\n) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSCircularIndeterminateIndicatorT.Props>>(\n props,\n defaultProps,\n );\n const { height, width, rows, cols, ...globalAttributes } = useGetGlobalAttributes(propsWithDefault);\n\n const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference } = propsWithDefault;\n\n const Wrapper: typeof DSTooltipV3 = useMemo(() => (withTooltip ? DSTooltipV3 : EmptyComp), [withTooltip]);\n\n const uniqueId = useMemo(() => uid(16), []);\n\n const circleRadius = useMemo(() => (sizeToPx[size] - Number.parseInt(sizeToWeight[size], 10)) / 2, [size]);\n\n return (\n <Grid gutter=\"xs\" justifyContent=\"center\" role=\"status\" aria-label={text || 'Loading...'} {...globalAttributes}>\n <Wrapper text={text} textAlign=\"center\" startPlacementPreference={tooltipStartPlacementPreference}>\n <StyledSvg width={sizeToPx[size]} height={sizeToPx[size]}>\n <defs>\n <clipPath id={`not-gradient-clip-${uniqueId}`}>\n <StyledRect x=\"0%\" y=\"0%\" width=\"52%\" height=\"100%\" />\n </clipPath>\n <linearGradient id={`gradient-color-${uniqueId}`} x1=\"0%\" x2=\"0%\" y1=\"0%\" y2=\"100%\">\n <stop offset=\"10%\" stopColor={`${colorToHex[color]}00`} />\n <stop offset=\"90%\" stopColor={`${colorToHex[color]}FF`} />\n </linearGradient>\n </defs>\n <StyledCircle\n cx=\"50%\"\n cy=\"50%\"\n r={circleRadius}\n strokeWidth={sizeToWeight[size]}\n stroke={colorToHex[color]}\n strokeLinecap=\"round\"\n clipPath={`url(#not-gradient-clip-${uniqueId})`}\n />\n {/* \n Here we are using a path because:\n - Flexible enough to build a circle\n - When rotating, the gradient follows the rotation!!! (This is key)\n - We can use the rotation with keyframes, allowing for custom timing\n \n Using a circle does not pass point 2.\n Animating the gradient is not posible with custom timings.\n This is the best solution without using a custom library.\n */}\n <StyledPath\n d={`M ${sizeToPx[size] / 2} ${sizeToPx[size] / 2}\n m ${circleRadius}, 0\n a ${circleRadius}, ${circleRadius} 0 0, 1 -${circleRadius}, ${circleRadius}`}\n strokeWidth={sizeToWeight[size]}\n fill=\"transparent\"\n stroke={`url(#gradient-color-${uniqueId})`}\n strokeLinecap=\"round\"\n r={circleRadius}\n />\n </StyledSvg>\n {text !== '' && showText && (\n <span style={{ color: color === 'light' ? '#FFFFFF' : '#25292F99', fontSize: sizeToTextSize[size] }}>\n {text}\n </span>\n )}\n </Wrapper>\n </Grid>\n );\n};\n\nDSCircularIndeterminateIndicator.propTypes = CircularIndeterminateIndicatorPropTypes;\nDSCircularIndeterminateIndicator.displayName = 'DSCircularIndeterminateIndicator';\nexport const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);\nDSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypes;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA+B;AAC/B,qBAAqB;AACrB,wBAA4B;AAC5B,0BAA+E;AAC/E,iBAAoB;AACpB,mCAIO;AACP,uBAAmE;AACnE,oBAAgE;AAGhE,MAAM,YAAgC,CAAC,UAAU,wFAAG,MAAM,QAAS;AAE5D,MAAM,mCAAiG,CAC5G,UACG;AACH,QAAM,mBAAmB,sDACvB,OACA,yCACF;AACA,QAAM,EAAE,QAAQ,OAAO,MAAM,SAAS,qBAAqB,gDAAuB,gBAAgB;AAElG,QAAM,EAAE,MAAM,OAAO,MAAM,UAAU,aAAa,oCAAoC;AAEtF,QAAM,UAA8B,0BAAQ,MAAO,cAAc,gCAAc,WAAY,CAAC,WAAW,CAAC;AAExG,QAAM,WAAW,0BAAQ,MAAM,oBAAI,EAAE,GAAG,CAAC,CAAC;AAE1C,QAAM,eAAe,0BAAQ,MAAO,2BAAS,QAAQ,OAAO,SAAS,8BAAa,OAAO,EAAE,KAAK,GAAG,CAAC,IAAI,CAAC;AAEzG,SACE,mDAAC;AAAA,IAAK,QAAO;AAAA,IAAK,gBAAe;AAAA,IAAS,MAAK;AAAA,IAAS,cAAY,QAAQ;AAAA,IAAe,GAAG;AAAA,KAC5F,mDAAC;AAAA,IAAQ;AAAA,IAAY,WAAU;AAAA,IAAS,0BAA0B;AAAA,KAChE,mDAAC;AAAA,IAAU,OAAO,0BAAS;AAAA,IAAO,QAAQ,0BAAS;AAAA,KACjD,mDAAC,cACC,mDAAC;AAAA,IAAS,IAAI,qBAAqB;AAAA,KACjC,mDAAC;AAAA,IAAW,GAAE;AAAA,IAAK,GAAE;AAAA,IAAK,OAAM;AAAA,IAAM,QAAO;AAAA,GAAO,CACtD,GACA,mDAAC;AAAA,IAAe,IAAI,kBAAkB;AAAA,IAAY,IAAG;AAAA,IAAK,IAAG;AAAA,IAAK,IAAG;AAAA,IAAK,IAAG;AAAA,KAC3E,mDAAC;AAAA,IAAK,QAAO;AAAA,IAAM,WAAW,GAAG,4BAAW;AAAA,GAAY,GACxD,mDAAC;AAAA,IAAK,QAAO;AAAA,IAAM,WAAW,GAAG,4BAAW;AAAA,GAAY,CAC1D,CACF,GACA,mDAAC;AAAA,IACC,IAAG;AAAA,IACH,IAAG;AAAA,IACH,GAAG;AAAA,IACH,aAAa,8BAAa;AAAA,IAC1B,QAAQ,4BAAW;AAAA,IACnB,eAAc;AAAA,IACd,UAAU,0BAA0B;AAAA,GACtC,GAWA,mDAAC;AAAA,IACC,GAAG,KAAK,0BAAS,QAAQ,KAAK,0BAAS,QAAQ;AAAA,oBACvC;AAAA,oBACA,iBAAiB,wBAAwB,iBAAiB;AAAA,IAClE,aAAa,8BAAa;AAAA,IAC1B,MAAK;AAAA,IACL,QAAQ,uBAAuB;AAAA,IAC/B,eAAc;AAAA,IACd,GAAG;AAAA,GACL,CACF,GACC,SAAS,MAAM,YACd,mDAAC;AAAA,IAAK,OAAO,EAAE,OAAO,UAAU,UAAU,YAAY,aAAa,UAAU,gCAAe,MAAM;AAAA,KAC/F,IACH,CAEJ,CACF;AAEJ;AAEA,iCAAiC,YAAY;AAC7C,iCAAiC,cAAc;AACxC,MAAM,6CAA6C,kCAAS,gCAAgC;AACnG,2CAA2C,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,27 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
var __create = Object.create;
|
|
3
3
|
var __defProp = Object.defineProperty;
|
|
4
|
-
var __defProps = Object.defineProperties;
|
|
5
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
7
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
10
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
11
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
12
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
13
|
-
var __spreadValues = (a, b) => {
|
|
14
|
-
for (var prop in b || (b = {}))
|
|
15
|
-
if (__hasOwnProp.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
if (__getOwnPropSymbols)
|
|
18
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
19
|
-
if (__propIsEnum.call(b, prop))
|
|
20
|
-
__defNormalProp(a, prop, b[prop]);
|
|
21
|
-
}
|
|
22
|
-
return a;
|
|
23
|
-
};
|
|
24
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
25
8
|
var __export = (target, all) => {
|
|
26
9
|
for (var name in all)
|
|
27
10
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -44,7 +27,8 @@ __export(react_desc_prop_types_exports, {
|
|
|
44
27
|
module.exports = __toCommonJS(react_desc_prop_types_exports);
|
|
45
28
|
var React = __toESM(require("react"));
|
|
46
29
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
47
|
-
const CircularIndeterminateIndicatorPropTypes =
|
|
30
|
+
const CircularIndeterminateIndicatorPropTypes = {
|
|
31
|
+
...import_ds_utilities.globalAttributesPropTypes,
|
|
48
32
|
size: import_ds_utilities.PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl"]).description("Size of the indicator").defaultValue("m"),
|
|
49
33
|
color: import_ds_utilities.PropTypes.oneOf(["light", "dark"]).description("Color mode for the indicator").defaultValue("dark"),
|
|
50
34
|
text: import_ds_utilities.PropTypes.string.description("Optional text to show under the indicator").defaultValue(""),
|
|
@@ -64,7 +48,7 @@ const CircularIndeterminateIndicatorPropTypes = __spreadProps(__spreadValues({},
|
|
|
64
48
|
"left",
|
|
65
49
|
"left-start"
|
|
66
50
|
]).description("start placement preference for the tooltip").defaultValue("center")
|
|
67
|
-
}
|
|
51
|
+
};
|
|
68
52
|
const defaultProps = {
|
|
69
53
|
size: "m",
|
|
70
54
|
color: "dark",
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/v2/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable max-lines */\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-utilities';\nimport { WeakValidationMap } from 'react';\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 }\n}\n\nexport const CircularIndeterminateIndicatorPropTypes = {\n ...globalAttributesPropTypes,\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} as WeakValidationMap<unknown>;\n\nexport const defaultProps: DSCircularIndeterminateIndicatorT.Props = {\n size: 'm',\n color: 'dark',\n text: '',\n showText: true,\n withTooltip: false,\n tooltipStartPlacementPreference: 'bottom',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAAqD;AA0B9C,MAAM,0CAA0C;AAAA,EACrD,GAAG;AAAA,EACH,MAAM,8BAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAAE,YAAY,uBAAuB,EAAE,aAAa,GAAG;AAAA,EAC/G,OAAO,8BAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EAAE,YAAY,8BAA8B,EAAE,aAAa,MAAM;AAAA,EACzG,MAAM,8BAAU,OAAO,YAAY,2CAA2C,EAAE,aAAa,EAAE;AAAA,EAC/F,UAAU,8BAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,IAAI;AAAA,EAClG,aAAa,8BAAU,KACpB,YAAY,oEAAoE,EAChF,aAAa,KAAK;AAAA,EACrB,iCAAiC,8BAAU,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,EACF,CAAC,EACE,YAAY,4CAA4C,EACxD,aAAa,QAAQ;AAC1B;AAEO,MAAM,eAAwD;AAAA,EACnE,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,32 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
4
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
6
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
7
|
-
var __spreadValues = (a, b) => {
|
|
8
|
-
for (var prop in b || (b = {}))
|
|
9
|
-
if (__hasOwnProp.call(b, prop))
|
|
10
|
-
__defNormalProp(a, prop, b[prop]);
|
|
11
|
-
if (__getOwnPropSymbols)
|
|
12
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
13
|
-
if (__propIsEnum.call(b, prop))
|
|
14
|
-
__defNormalProp(a, prop, b[prop]);
|
|
15
|
-
}
|
|
16
|
-
return a;
|
|
17
|
-
};
|
|
18
|
-
var __objRest = (source, exclude) => {
|
|
19
|
-
var target = {};
|
|
20
|
-
for (var prop in source)
|
|
21
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
22
|
-
target[prop] = source[prop];
|
|
23
|
-
if (source != null && __getOwnPropSymbols)
|
|
24
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
25
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
26
|
-
target[prop] = source[prop];
|
|
27
|
-
}
|
|
28
|
-
return target;
|
|
29
|
-
};
|
|
30
2
|
import * as React from "react";
|
|
31
3
|
import React2, { useMemo } from "react";
|
|
32
4
|
import { Grid } from "@elliemae/ds-grid";
|
|
@@ -42,17 +14,18 @@ import { StyledCircle, StyledPath, StyledRect, StyledSvg } from "./styled";
|
|
|
42
14
|
const EmptyComp = (props) => /* @__PURE__ */ React2.createElement(React2.Fragment, null, props.children);
|
|
43
15
|
const DSCircularIndeterminateIndicator = (props) => {
|
|
44
16
|
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
|
|
45
|
-
const
|
|
17
|
+
const { height, width, rows, cols, ...globalAttributes } = useGetGlobalAttributes(propsWithDefault);
|
|
46
18
|
const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference } = propsWithDefault;
|
|
47
19
|
const Wrapper = useMemo(() => withTooltip ? DSTooltipV3 : EmptyComp, [withTooltip]);
|
|
48
20
|
const uniqueId = useMemo(() => uid(16), []);
|
|
49
21
|
const circleRadius = useMemo(() => (sizeToPx[size] - Number.parseInt(sizeToWeight[size], 10)) / 2, [size]);
|
|
50
|
-
return /* @__PURE__ */ React2.createElement(Grid,
|
|
22
|
+
return /* @__PURE__ */ React2.createElement(Grid, {
|
|
51
23
|
gutter: "xs",
|
|
52
24
|
justifyContent: "center",
|
|
53
25
|
role: "status",
|
|
54
|
-
"aria-label": text || "Loading..."
|
|
55
|
-
|
|
26
|
+
"aria-label": text || "Loading...",
|
|
27
|
+
...globalAttributes
|
|
28
|
+
}, /* @__PURE__ */ React2.createElement(Wrapper, {
|
|
56
29
|
text,
|
|
57
30
|
textAlign: "center",
|
|
58
31
|
startPlacementPreference: tooltipStartPlacementPreference
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/DSCircularIndeterminateIndicator.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport {\n DSCircularIndeterminateIndicatorT,\n CircularIndeterminateIndicatorPropTypes,\n defaultProps,\n} from './react-desc-prop-types';\nimport { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from './constants';\nimport { StyledCircle, StyledPath, StyledRect, StyledSvg } from './styled';\n\n// eslint-disable-next-line react/jsx-no-useless-fragment\nconst EmptyComp: typeof DSTooltipV3 = (props) => <>{props.children}</>;\n\nexport const DSCircularIndeterminateIndicator: React.ComponentType<DSCircularIndeterminateIndicatorT.Props> = (\n props,\n) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSCircularIndeterminateIndicatorT.Props>>(\n props,\n defaultProps,\n );\n const { height, width, rows, cols, ...globalAttributes } = useGetGlobalAttributes(propsWithDefault);\n\n const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference } = propsWithDefault;\n\n const Wrapper: typeof DSTooltipV3 = useMemo(() => (withTooltip ? DSTooltipV3 : EmptyComp), [withTooltip]);\n\n const uniqueId = useMemo(() => uid(16), []);\n\n const circleRadius = useMemo(() => (sizeToPx[size] - Number.parseInt(sizeToWeight[size], 10)) / 2, [size]);\n\n return (\n <Grid gutter=\"xs\" justifyContent=\"center\" role=\"status\" aria-label={text || 'Loading...'} {...globalAttributes}>\n <Wrapper text={text} textAlign=\"center\" startPlacementPreference={tooltipStartPlacementPreference}>\n <StyledSvg width={sizeToPx[size]} height={sizeToPx[size]}>\n <defs>\n <clipPath id={`not-gradient-clip-${uniqueId}`}>\n <StyledRect x=\"0%\" y=\"0%\" width=\"52%\" height=\"100%\" />\n </clipPath>\n <linearGradient id={`gradient-color-${uniqueId}`} x1=\"0%\" x2=\"0%\" y1=\"0%\" y2=\"100%\">\n <stop offset=\"10%\" stopColor={`${colorToHex[color]}00`} />\n <stop offset=\"90%\" stopColor={`${colorToHex[color]}FF`} />\n </linearGradient>\n </defs>\n <StyledCircle\n cx=\"50%\"\n cy=\"50%\"\n r={circleRadius}\n strokeWidth={sizeToWeight[size]}\n stroke={colorToHex[color]}\n strokeLinecap=\"round\"\n clipPath={`url(#not-gradient-clip-${uniqueId})`}\n />\n {/* \n Here we are using a path because:\n - Flexible enough to build a circle\n - When rotating, the gradient follows the rotation!!! (This is key)\n - We can use the rotation with keyframes, allowing for custom timing\n \n Using a circle does not pass point 2.\n Animating the gradient is not posible with custom timings.\n This is the best solution without using a custom library.\n */}\n <StyledPath\n d={`M ${sizeToPx[size] / 2} ${sizeToPx[size] / 2}\n m ${circleRadius}, 0\n a ${circleRadius}, ${circleRadius} 0 0, 1 -${circleRadius}, ${circleRadius}`}\n strokeWidth={sizeToWeight[size]}\n fill=\"transparent\"\n stroke={`url(#gradient-color-${uniqueId})`}\n strokeLinecap=\"round\"\n r={circleRadius}\n />\n </StyledSvg>\n {text !== '' && showText && (\n <span style={{ color: color === 'light' ? '#FFFFFF' : '#25292F99', fontSize: sizeToTextSize[size] }}>\n {text}\n </span>\n )}\n </Wrapper>\n </Grid>\n );\n};\n\nDSCircularIndeterminateIndicator.propTypes = CircularIndeterminateIndicatorPropTypes;\nDSCircularIndeterminateIndicator.displayName = 'DSCircularIndeterminateIndicator';\nexport const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);\nDSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypes;\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAKA;AACA;AAGA,MAAM,YAAgC,CAAC,UAAU,4DAAG,MAAM,QAAS;AAE5D,MAAM,mCAAiG,CAC5G,UACG;AACH,QAAM,mBAAmB,6BACvB,OACA,YACF;AACA,QAAM,EAAE,QAAQ,OAAO,MAAM,SAAS,qBAAqB,uBAAuB,gBAAgB;AAElG,QAAM,EAAE,MAAM,OAAO,MAAM,UAAU,aAAa,oCAAoC;AAEtF,QAAM,UAA8B,QAAQ,MAAO,cAAc,cAAc,WAAY,CAAC,WAAW,CAAC;AAExG,QAAM,WAAW,QAAQ,MAAM,IAAI,EAAE,GAAG,CAAC,CAAC;AAE1C,QAAM,eAAe,QAAQ,MAAO,UAAS,QAAQ,OAAO,SAAS,aAAa,OAAO,EAAE,KAAK,GAAG,CAAC,IAAI,CAAC;AAEzG,SACE,qCAAC;AAAA,IAAK,QAAO;AAAA,IAAK,gBAAe;AAAA,IAAS,MAAK;AAAA,IAAS,cAAY,QAAQ;AAAA,IAAe,GAAG;AAAA,KAC5F,qCAAC;AAAA,IAAQ;AAAA,IAAY,WAAU;AAAA,IAAS,0BAA0B;AAAA,KAChE,qCAAC;AAAA,IAAU,OAAO,SAAS;AAAA,IAAO,QAAQ,SAAS;AAAA,KACjD,qCAAC,cACC,qCAAC;AAAA,IAAS,IAAI,qBAAqB;AAAA,KACjC,qCAAC;AAAA,IAAW,GAAE;AAAA,IAAK,GAAE;AAAA,IAAK,OAAM;AAAA,IAAM,QAAO;AAAA,GAAO,CACtD,GACA,qCAAC;AAAA,IAAe,IAAI,kBAAkB;AAAA,IAAY,IAAG;AAAA,IAAK,IAAG;AAAA,IAAK,IAAG;AAAA,IAAK,IAAG;AAAA,KAC3E,qCAAC;AAAA,IAAK,QAAO;AAAA,IAAM,WAAW,GAAG,WAAW;AAAA,GAAY,GACxD,qCAAC;AAAA,IAAK,QAAO;AAAA,IAAM,WAAW,GAAG,WAAW;AAAA,GAAY,CAC1D,CACF,GACA,qCAAC;AAAA,IACC,IAAG;AAAA,IACH,IAAG;AAAA,IACH,GAAG;AAAA,IACH,aAAa,aAAa;AAAA,IAC1B,QAAQ,WAAW;AAAA,IACnB,eAAc;AAAA,IACd,UAAU,0BAA0B;AAAA,GACtC,GAWA,qCAAC;AAAA,IACC,GAAG,KAAK,SAAS,QAAQ,KAAK,SAAS,QAAQ;AAAA,oBACvC;AAAA,oBACA,iBAAiB,wBAAwB,iBAAiB;AAAA,IAClE,aAAa,aAAa;AAAA,IAC1B,MAAK;AAAA,IACL,QAAQ,uBAAuB;AAAA,IAC/B,eAAc;AAAA,IACd,GAAG;AAAA,GACL,CACF,GACC,SAAS,MAAM,YACd,qCAAC;AAAA,IAAK,OAAO,EAAE,OAAO,UAAU,UAAU,YAAY,aAAa,UAAU,eAAe,MAAM;AAAA,KAC/F,IACH,CAEJ,CACF;AAEJ;AAEA,iCAAiC,YAAY;AAC7C,iCAAiC,cAAc;AACxC,MAAM,6CAA6C,SAAS,gCAAgC;AACnG,2CAA2C,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,26 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __defProps = Object.defineProperties;
|
|
4
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
5
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
8
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
9
|
-
var __spreadValues = (a, b) => {
|
|
10
|
-
for (var prop in b || (b = {}))
|
|
11
|
-
if (__hasOwnProp.call(b, prop))
|
|
12
|
-
__defNormalProp(a, prop, b[prop]);
|
|
13
|
-
if (__getOwnPropSymbols)
|
|
14
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
15
|
-
if (__propIsEnum.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
}
|
|
18
|
-
return a;
|
|
19
|
-
};
|
|
20
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
21
2
|
import * as React from "react";
|
|
22
3
|
import { PropTypes, globalAttributesPropTypes } from "@elliemae/ds-utilities";
|
|
23
|
-
const CircularIndeterminateIndicatorPropTypes =
|
|
4
|
+
const CircularIndeterminateIndicatorPropTypes = {
|
|
5
|
+
...globalAttributesPropTypes,
|
|
24
6
|
size: PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl"]).description("Size of the indicator").defaultValue("m"),
|
|
25
7
|
color: PropTypes.oneOf(["light", "dark"]).description("Color mode for the indicator").defaultValue("dark"),
|
|
26
8
|
text: PropTypes.string.description("Optional text to show under the indicator").defaultValue(""),
|
|
@@ -40,7 +22,7 @@ const CircularIndeterminateIndicatorPropTypes = __spreadProps(__spreadValues({},
|
|
|
40
22
|
"left",
|
|
41
23
|
"left-start"
|
|
42
24
|
]).description("start placement preference for the tooltip").defaultValue("center")
|
|
43
|
-
}
|
|
25
|
+
};
|
|
44
26
|
const defaultProps = {
|
|
45
27
|
size: "m",
|
|
46
28
|
color: "dark",
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/react-desc-prop-types.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-utilities';\nimport { WeakValidationMap } from 'react';\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 }\n}\n\nexport const CircularIndeterminateIndicatorPropTypes = {\n ...globalAttributesPropTypes,\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} as WeakValidationMap<unknown>;\n\nexport const defaultProps: DSCircularIndeterminateIndicatorT.Props = {\n size: 'm',\n color: 'dark',\n text: '',\n showText: true,\n withTooltip: false,\n tooltipStartPlacementPreference: 'bottom',\n};\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";AAAA;ACCA;AA0BO,MAAM,0CAA0C;AAAA,EACrD,GAAG;AAAA,EACH,MAAM,UAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAAE,YAAY,uBAAuB,EAAE,aAAa,GAAG;AAAA,EAC/G,OAAO,UAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EAAE,YAAY,8BAA8B,EAAE,aAAa,MAAM;AAAA,EACzG,MAAM,UAAU,OAAO,YAAY,2CAA2C,EAAE,aAAa,EAAE;AAAA,EAC/F,UAAU,UAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,IAAI;AAAA,EAClG,aAAa,UAAU,KACpB,YAAY,oEAAoE,EAChF,aAAa,KAAK;AAAA,EACrB,iCAAiC,UAAU,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,EACF,CAAC,EACE,YAAY,4CAA4C,EACxD,aAAa,QAAQ;AAC1B;AAEO,MAAM,eAAwD;AAAA,EACnE,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-circular-progress-indicator",
|
|
3
|
-
"version": "3.2.1-rc.
|
|
3
|
+
"version": "3.2.1-rc.6",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Circular progress indicator",
|
|
6
6
|
"files": [
|
|
@@ -51,11 +51,11 @@
|
|
|
51
51
|
"indent": 4
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
|
-
"@elliemae/ds-classnames": "3.2.1-rc.
|
|
55
|
-
"@elliemae/ds-grid": "3.2.1-rc.
|
|
56
|
-
"@elliemae/ds-system": "3.2.1-rc.
|
|
57
|
-
"@elliemae/ds-tooltip": "3.2.1-rc.
|
|
58
|
-
"@elliemae/ds-utilities": "3.2.1-rc.
|
|
54
|
+
"@elliemae/ds-classnames": "3.2.1-rc.6",
|
|
55
|
+
"@elliemae/ds-grid": "3.2.1-rc.6",
|
|
56
|
+
"@elliemae/ds-system": "3.2.1-rc.6",
|
|
57
|
+
"@elliemae/ds-tooltip": "3.2.1-rc.6",
|
|
58
|
+
"@elliemae/ds-utilities": "3.2.1-rc.6",
|
|
59
59
|
"styled-components": "^5.3.5",
|
|
60
60
|
"uid": "~2.0.0"
|
|
61
61
|
},
|