@elliemae/ds-circular-progress-indicator 3.0.0-next.13 → 3.0.0-next.17
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 +19 -4
- package/dist/cjs/v2/DSCircularIndeterminateIndicator.js.map +2 -2
- package/dist/cjs/v2/react-desc-prop-types.js +1 -1
- package/dist/cjs/v2/react-desc-prop-types.js.map +1 -1
- package/dist/cjs/v2/styled.js +9 -0
- package/dist/cjs/v2/styled.js.map +2 -2
- package/dist/esm/v2/DSCircularIndeterminateIndicator.js +19 -4
- package/dist/esm/v2/DSCircularIndeterminateIndicator.js.map +2 -2
- package/dist/esm/v2/react-desc-prop-types.js +1 -1
- package/dist/esm/v2/react-desc-prop-types.js.map +1 -1
- package/dist/esm/v2/styled.js +9 -0
- package/dist/esm/v2/styled.js.map +2 -2
- package/package.json +4 -4
|
@@ -19,6 +19,18 @@ var __spreadValues = (a, b) => {
|
|
|
19
19
|
return a;
|
|
20
20
|
};
|
|
21
21
|
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
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
|
+
};
|
|
22
34
|
var __export = (target, all) => {
|
|
23
35
|
for (var name in all)
|
|
24
36
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -53,24 +65,27 @@ var import_uid = require("uid");
|
|
|
53
65
|
var import_react_desc_prop_types = require("./react-desc-prop-types");
|
|
54
66
|
var import_constants = require("./constants");
|
|
55
67
|
var import_styled = require("./styled");
|
|
68
|
+
const EmptyComp = (props) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, props.children);
|
|
56
69
|
const DSCircularIndeterminateIndicator = (props) => {
|
|
57
70
|
const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
|
|
58
|
-
const
|
|
71
|
+
const _a = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault), { height, width, rows, cols } = _a, globalAttributes = __objRest(_a, ["height", "width", "rows", "cols"]);
|
|
59
72
|
const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference, __duration } = propsWithDefault;
|
|
60
|
-
const Wrapper = (0, import_react.useMemo)(() => withTooltip ? import_ds_tooltip.DSTooltipV3 :
|
|
73
|
+
const Wrapper = (0, import_react.useMemo)(() => withTooltip ? import_ds_tooltip.DSTooltipV3 : EmptyComp, [withTooltip]);
|
|
61
74
|
const uniqueId = (0, import_react.useMemo)(() => (0, import_uid.uid)(16), []);
|
|
62
75
|
const circleRadius = (0, import_react.useMemo)(() => (import_constants.sizeToPx[size] - Number.parseInt(import_constants.sizeToWeight[size], 10)) / 2, [size]);
|
|
63
76
|
return /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, __spreadValues({
|
|
64
77
|
gutter: "xs",
|
|
65
78
|
justifyContent: "center",
|
|
66
|
-
role: "status"
|
|
79
|
+
role: "status",
|
|
80
|
+
"aria-label": text || "Loading..."
|
|
67
81
|
}, globalAttributes), /* @__PURE__ */ import_react.default.createElement(Wrapper, {
|
|
68
82
|
text,
|
|
69
83
|
textAlign: "center",
|
|
70
84
|
startPlacementPreference: tooltipStartPlacementPreference
|
|
71
85
|
}, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledSvg, {
|
|
72
86
|
width: import_constants.sizeToPx[size],
|
|
73
|
-
height: import_constants.sizeToPx[size]
|
|
87
|
+
height: import_constants.sizeToPx[size],
|
|
88
|
+
__duration
|
|
74
89
|
}, /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("clipPath", {
|
|
75
90
|
id: `not-gradient-clip-${uniqueId}`
|
|
76
91
|
}, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledRect, {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/v2/DSCircularIndeterminateIndicator.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/naming-convention */\nimport React, {
|
|
5
|
-
"mappings": "
|
|
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-props-helpers';\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, __duration } = 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]} __duration={__duration}>\n <defs>\n <clipPath id={`not-gradient-clip-${uniqueId}`}>\n <StyledRect x=\"0%\" y=\"0%\" width=\"52%\" height=\"100%\" __duration={__duration} />\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 __duration={__duration}\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 __duration={__duration}\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;\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;ADCvB,mBAA+B;AAC/B,qBAAqB;AACrB,wBAA4B;AAC5B,8BAA+E;AAC/E,iBAAoB;AACpB,mCAIO;AACP,uBAAmE;AACnE,oBAAgE;AAGhE,MAAM,YAAgC,CAAC,UAAU,wFAAG,MAAM;AAEnD,MAAM,mCAAiG,CAC5G,UACG;AACH,QAAM,mBAAmB,0DACvB,OACA;AAEF,QAA2D,yDAAuB,mBAA1E,UAAQ,OAAO,MAAM,SAA8B,IAArB,6BAAqB,IAArB,CAA9B,UAAQ,SAAO,QAAM;AAE7B,QAAM,EAAE,MAAM,OAAO,MAAM,UAAU,aAAa,iCAAiC,eAAe;AAElG,QAAM,UAA8B,0BAAQ,MAAO,cAAc,gCAAc,WAAY,CAAC;AAE5F,QAAM,WAAW,0BAAQ,MAAM,oBAAI,KAAK;AAExC,QAAM,eAAe,0BAAQ,MAAO,2BAAS,QAAQ,OAAO,SAAS,8BAAa,OAAO,OAAO,GAAG,CAAC;AAEpG,SACE,mDAAC,qBAAD;AAAA,IAAM,QAAO;AAAA,IAAK,gBAAe;AAAA,IAAS,MAAK;AAAA,IAAS,cAAY,QAAQ;AAAA,KAAkB,mBAC5F,mDAAC,SAAD;AAAA,IAAS;AAAA,IAAY,WAAU;AAAA,IAAS,0BAA0B;AAAA,KAChE,mDAAC,yBAAD;AAAA,IAAW,OAAO,0BAAS;AAAA,IAAO,QAAQ,0BAAS;AAAA,IAAO;AAAA,KACxD,mDAAC,QAAD,MACE,mDAAC,YAAD;AAAA,IAAU,IAAI,qBAAqB;AAAA,KACjC,mDAAC,0BAAD;AAAA,IAAY,GAAE;AAAA,IAAK,GAAE;AAAA,IAAK,OAAM;AAAA,IAAM,QAAO;AAAA,IAAO;AAAA,OAEtD,mDAAC,kBAAD;AAAA,IAAgB,IAAI,kBAAkB;AAAA,IAAY,IAAG;AAAA,IAAK,IAAG;AAAA,IAAK,IAAG;AAAA,IAAK,IAAG;AAAA,KAC3E,mDAAC,QAAD;AAAA,IAAM,QAAO;AAAA,IAAM,WAAW,GAAG,4BAAW;AAAA,MAC5C,mDAAC,QAAD;AAAA,IAAM,QAAO;AAAA,IAAM,WAAW,GAAG,4BAAW;AAAA,QAGhD,mDAAC,4BAAD;AAAA,IACE,IAAG;AAAA,IACH,IAAG;AAAA,IACH,GAAG;AAAA,IACH,aAAa,8BAAa;AAAA,IAC1B,QAAQ,4BAAW;AAAA,IACnB,eAAc;AAAA,IACd,UAAU,0BAA0B;AAAA,IACpC;AAAA,MAYF,mDAAC,0BAAD;AAAA,IACE,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,IACH;AAAA,OAGH,SAAS,MAAM,YACd,mDAAC,QAAD;AAAA,IAAM,OAAO,EAAE,OAAO,UAAU,UAAU,YAAY,aAAa,UAAU,gCAAe;AAAA,KACzF;AAAA;AAQb,iCAAiC,YAAY;AAEtC,MAAM,6CAA6C,sCAAS;AACnE,2CAA2C,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -77,7 +77,7 @@ const defaultProps = {
|
|
|
77
77
|
showText: true,
|
|
78
78
|
withTooltip: false,
|
|
79
79
|
tooltipStartPlacementPreference: "bottom",
|
|
80
|
-
__duration:
|
|
80
|
+
__duration: 10
|
|
81
81
|
};
|
|
82
82
|
module.exports = __toCommonJS(react_desc_prop_types_exports);
|
|
83
83
|
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/v2/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\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 __duration: number;\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 __duration:
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\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 __duration: number;\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 __duration: 10,\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAAqD;AA2B9C,MAAM,0CAA0C,iCAClD,oDADkD;AAAA,EAErD,MAAM,kCAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,QAAQ,YAAY,yBAAyB,aAAa;AAAA,EAC5G,OAAO,kCAAU,MAAM,CAAC,SAAS,SAAS,YAAY,gCAAgC,aAAa;AAAA,EACnG,MAAM,kCAAU,OAAO,YAAY,6CAA6C,aAAa;AAAA,EAC7F,UAAU,kCAAU,KAAK,YAAY,4CAA4C,aAAa;AAAA,EAC9F,aAAa,kCAAU,KACpB,YAAY,sEACZ,aAAa;AAAA,EAChB,iCAAiC,kCAAU,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;AAGX,MAAM,eAAwD;AAAA,EACnE,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AAAA,EACjC,YAAY;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/v2/styled.js
CHANGED
|
@@ -37,6 +37,14 @@ var import_styled_components = __toESM(require("styled-components"));
|
|
|
37
37
|
var import_ds_system = require("@elliemae/ds-system");
|
|
38
38
|
const { PI } = Math;
|
|
39
39
|
const getArcLength = (percentage, radius) => 2 * PI * radius / 100 * percentage;
|
|
40
|
+
const svgRotateAnimation = import_ds_system.kfrm`
|
|
41
|
+
0% {
|
|
42
|
+
transform: rotate(0);
|
|
43
|
+
}
|
|
44
|
+
100% {
|
|
45
|
+
transform: rotate(360deg);
|
|
46
|
+
}
|
|
47
|
+
`;
|
|
40
48
|
const strokeTailAnimation = (r) => {
|
|
41
49
|
const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;
|
|
42
50
|
const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;
|
|
@@ -116,6 +124,7 @@ const StyledSvg = import_styled_components.default.svg`
|
|
|
116
124
|
margin: auto;
|
|
117
125
|
transform-origin: center center;
|
|
118
126
|
transform: rotate(-90deg);
|
|
127
|
+
animation: ${svgRotateAnimation} ${(props) => props.__duration / 4}s linear infinite;
|
|
119
128
|
`;
|
|
120
129
|
const StyledPath = import_styled_components.default.path`
|
|
121
130
|
transform-origin: center center;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/v2/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable no-underscore-dangle */\nimport styled from 'styled-components';\nimport { kfrm } from '@elliemae/ds-system';\n\nconst { PI } = Math;\n\nconst getArcLength = (percentage: number, radius: number) => ((2 * PI * radius) / 100) * percentage;\n\nconst strokeTailAnimation = (r: number) => {\n const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;\n const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;\n\n return kfrm`\n 0% {\n stroke-dasharray: ${miniDash};\n }\n 50% {\n stroke-dasharray: ${fullDash};\n }\n 100% {\n stroke-dasharray: ${miniDash};\n }\n`;\n};\n\nconst rotateAnimation = kfrm`\n 0%, 12.5% {\n transform: rotate(0);\n }\n 25%, 37.5% {\n transform: rotate(270deg);\n }\n 50%, 62.5% {\n transform: rotate(540deg);\n }\n 75%, 87.5% {\n transform: rotate(810deg);\n }\n 100% {\n transform: rotate(1080deg);\n }\n`;\n\nconst dashAnimation = (r: number) => {\n const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;\n const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;\n\n return kfrm`\n 0% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: 0;\n }\n 12.5% {\n stroke-dasharray: ${fullDash};\n stroke-dashoffset: 0;\n }\n 25% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: ${getArcLength(-75, r)};\n }\n 37.5% {\n stroke-dasharray: ${fullDash};\n stroke-dashoffset: ${getArcLength(-75, r)};\n }\n 50% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: ${getArcLength(-150, r)};\n }\n 62.5% {\n stroke-dasharray: ${fullDash};\n stroke-dashoffset: ${getArcLength(-150, r)};\n }\n 75% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: ${getArcLength(-225, r)};\n }\n 87.5% {\n stroke-dasharray: ${fullDash};\n stroke-dashoffset: ${getArcLength(-225, r)};\n }\n 100% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: ${getArcLength(-300, r)};\n }\n`;\n};\n\nexport const StyledSvg = styled.svg
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,+BAAmB;AACnB,uBAAqB;AAErB,MAAM,EAAE,OAAO;AAEf,MAAM,eAAe,CAAC,YAAoB,WAAqB,IAAI,KAAK,SAAU,MAAO;AAEzF,MAAM,sBAAsB,CAAC,MAAc;AACzC,QAAM,WAAW,GAAG,aAAa,GAAG,MAAM,aAAa,KAAK;AAC5D,QAAM,WAAW,GAAG,aAAa,IAAI,MAAM,aAAa,IAAI;AAE5D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAAA;AAK5B,MAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBxB,MAAM,gBAAgB,CAAC,MAAc;AACnC,QAAM,WAAW,GAAG,aAAa,GAAG,MAAM,aAAa,KAAK;AAC5D,QAAM,WAAW,GAAG,aAAa,IAAI,MAAM,aAAa,IAAI;AAE5D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA,6BACC,aAAa,KAAK;AAAA;AAAA;AAAA,4BAGnB;AAAA,6BACC,aAAa,KAAK;AAAA;AAAA;AAAA,4BAGnB;AAAA,6BACC,aAAa,MAAM;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM;AAAA;AAAA;AAAA;AAKzC,MAAM,YAAY,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable no-underscore-dangle */\nimport styled from 'styled-components';\nimport { kfrm } from '@elliemae/ds-system';\n\nconst { PI } = Math;\n\nconst getArcLength = (percentage: number, radius: number) => ((2 * PI * radius) / 100) * percentage;\n\nconst svgRotateAnimation = kfrm`\n 0% {\n transform: rotate(0);\n }\n 100% {\n transform: rotate(360deg);\n }\n`;\n\nconst strokeTailAnimation = (r: number) => {\n const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;\n const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;\n\n return kfrm`\n 0% {\n stroke-dasharray: ${miniDash};\n }\n 50% {\n stroke-dasharray: ${fullDash};\n }\n 100% {\n stroke-dasharray: ${miniDash};\n }\n`;\n};\n\nconst rotateAnimation = kfrm`\n 0%, 12.5% {\n transform: rotate(0);\n }\n 25%, 37.5% {\n transform: rotate(270deg);\n }\n 50%, 62.5% {\n transform: rotate(540deg);\n }\n 75%, 87.5% {\n transform: rotate(810deg);\n }\n 100% {\n transform: rotate(1080deg);\n }\n`;\n\nconst dashAnimation = (r: number) => {\n const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;\n const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;\n\n return kfrm`\n 0% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: 0;\n }\n 12.5% {\n stroke-dasharray: ${fullDash};\n stroke-dashoffset: 0;\n }\n 25% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: ${getArcLength(-75, r)};\n }\n 37.5% {\n stroke-dasharray: ${fullDash};\n stroke-dashoffset: ${getArcLength(-75, r)};\n }\n 50% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: ${getArcLength(-150, r)};\n }\n 62.5% {\n stroke-dasharray: ${fullDash};\n stroke-dashoffset: ${getArcLength(-150, r)};\n }\n 75% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: ${getArcLength(-225, r)};\n }\n 87.5% {\n stroke-dasharray: ${fullDash};\n stroke-dashoffset: ${getArcLength(-225, r)};\n }\n 100% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: ${getArcLength(-300, r)};\n }\n`;\n};\n\nexport const StyledSvg = styled.svg<{ __duration: number }>`\n display: block;\n margin: auto;\n transform-origin: center center;\n transform: rotate(-90deg);\n animation: ${svgRotateAnimation} ${(props) => props.__duration / 4}s linear infinite;\n`;\n\nexport const StyledPath = styled.path<{ __duration: number; r: number }>`\n transform-origin: center center;\n animation: ${rotateAnimation} ${(props) => props.__duration}s linear infinite,\n ${(props) => strokeTailAnimation(props.r)} ${(props) => props.__duration / 4}s linear infinite;\n`;\n\nexport const StyledRect = styled.rect<{ __duration: number }>`\n transform-origin: center center;\n animation: ${rotateAnimation} ${(props) => props.__duration}s linear infinite;\n`;\n\nexport const StyledCircle = styled.circle<{ r: number; __duration: number }>`\n stroke-dashoffset: 0;\n fill: none;\n animation: ${(props) => dashAnimation(props.r)} ${(props) => props.__duration}s linear infinite;\n clip-path: ${(props) => props.clipPath};\n -webkit-clip-path: ${(props) => props.clipPath};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,+BAAmB;AACnB,uBAAqB;AAErB,MAAM,EAAE,OAAO;AAEf,MAAM,eAAe,CAAC,YAAoB,WAAqB,IAAI,KAAK,SAAU,MAAO;AAEzF,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3B,MAAM,sBAAsB,CAAC,MAAc;AACzC,QAAM,WAAW,GAAG,aAAa,GAAG,MAAM,aAAa,KAAK;AAC5D,QAAM,WAAW,GAAG,aAAa,IAAI,MAAM,aAAa,IAAI;AAE5D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAAA;AAK5B,MAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBxB,MAAM,gBAAgB,CAAC,MAAc;AACnC,QAAM,WAAW,GAAG,aAAa,GAAG,MAAM,aAAa,KAAK;AAC5D,QAAM,WAAW,GAAG,aAAa,IAAI,MAAM,aAAa,IAAI;AAE5D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA,6BACC,aAAa,KAAK;AAAA;AAAA;AAAA,4BAGnB;AAAA,6BACC,aAAa,KAAK;AAAA;AAAA;AAAA,4BAGnB;AAAA,6BACC,aAAa,MAAM;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM;AAAA;AAAA;AAAA;AAKzC,MAAM,YAAY,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKjB,sBAAsB,CAAC,UAAU,MAAM,aAAa;AAAA;AAG5D,MAAM,aAAa,iCAAO;AAAA;AAAA,eAElB,mBAAmB,CAAC,UAAU,MAAM;AAAA,MAC7C,CAAC,UAAU,oBAAoB,MAAM,MAAM,CAAC,UAAU,MAAM,aAAa;AAAA;AAGxE,MAAM,aAAa,iCAAO;AAAA;AAAA,eAElB,mBAAmB,CAAC,UAAU,MAAM;AAAA;AAG5C,MAAM,eAAe,iCAAO;AAAA;AAAA;AAAA,eAGpB,CAAC,UAAU,cAAc,MAAM,MAAM,CAAC,UAAU,MAAM;AAAA,eACtD,CAAC,UAAU,MAAM;AAAA,uBACT,CAAC,UAAU,MAAM;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -14,6 +14,18 @@ var __spreadValues = (a, b) => {
|
|
|
14
14
|
}
|
|
15
15
|
return a;
|
|
16
16
|
};
|
|
17
|
+
var __objRest = (source, exclude) => {
|
|
18
|
+
var target = {};
|
|
19
|
+
for (var prop in source)
|
|
20
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
21
|
+
target[prop] = source[prop];
|
|
22
|
+
if (source != null && __getOwnPropSymbols)
|
|
23
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
24
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
25
|
+
target[prop] = source[prop];
|
|
26
|
+
}
|
|
27
|
+
return target;
|
|
28
|
+
};
|
|
17
29
|
import * as React from "react";
|
|
18
30
|
import React2, { useMemo } from "react";
|
|
19
31
|
import { Grid } from "@elliemae/ds-grid";
|
|
@@ -26,24 +38,27 @@ import {
|
|
|
26
38
|
} from "./react-desc-prop-types";
|
|
27
39
|
import { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from "./constants";
|
|
28
40
|
import { StyledCircle, StyledPath, StyledRect, StyledSvg } from "./styled";
|
|
41
|
+
const EmptyComp = (props) => /* @__PURE__ */ React2.createElement(React2.Fragment, null, props.children);
|
|
29
42
|
const DSCircularIndeterminateIndicator = (props) => {
|
|
30
43
|
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
|
|
31
|
-
const
|
|
44
|
+
const _a = useGetGlobalAttributes(propsWithDefault), { height, width, rows, cols } = _a, globalAttributes = __objRest(_a, ["height", "width", "rows", "cols"]);
|
|
32
45
|
const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference, __duration } = propsWithDefault;
|
|
33
|
-
const Wrapper = useMemo(() => withTooltip ? DSTooltipV3 :
|
|
46
|
+
const Wrapper = useMemo(() => withTooltip ? DSTooltipV3 : EmptyComp, [withTooltip]);
|
|
34
47
|
const uniqueId = useMemo(() => uid(16), []);
|
|
35
48
|
const circleRadius = useMemo(() => (sizeToPx[size] - Number.parseInt(sizeToWeight[size], 10)) / 2, [size]);
|
|
36
49
|
return /* @__PURE__ */ React2.createElement(Grid, __spreadValues({
|
|
37
50
|
gutter: "xs",
|
|
38
51
|
justifyContent: "center",
|
|
39
|
-
role: "status"
|
|
52
|
+
role: "status",
|
|
53
|
+
"aria-label": text || "Loading..."
|
|
40
54
|
}, globalAttributes), /* @__PURE__ */ React2.createElement(Wrapper, {
|
|
41
55
|
text,
|
|
42
56
|
textAlign: "center",
|
|
43
57
|
startPlacementPreference: tooltipStartPlacementPreference
|
|
44
58
|
}, /* @__PURE__ */ React2.createElement(StyledSvg, {
|
|
45
59
|
width: sizeToPx[size],
|
|
46
|
-
height: sizeToPx[size]
|
|
60
|
+
height: sizeToPx[size],
|
|
61
|
+
__duration
|
|
47
62
|
}, /* @__PURE__ */ React2.createElement("defs", null, /* @__PURE__ */ React2.createElement("clipPath", {
|
|
48
63
|
id: `not-gradient-clip-${uniqueId}`
|
|
49
64
|
}, /* @__PURE__ */ React2.createElement(StyledRect, {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/DSCircularIndeterminateIndicator.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/naming-convention */\nimport React, {
|
|
5
|
-
"mappings": "
|
|
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-props-helpers';\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, __duration } = 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]} __duration={__duration}>\n <defs>\n <clipPath id={`not-gradient-clip-${uniqueId}`}>\n <StyledRect x=\"0%\" y=\"0%\" width=\"52%\" height=\"100%\" __duration={__duration} />\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 __duration={__duration}\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 __duration={__duration}\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;\n\nexport const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);\nDSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypes;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAKA;AACA;AAGA,MAAM,YAAgC,CAAC,UAAU,4DAAG,MAAM;AAEnD,MAAM,mCAAiG,CAC5G,UACG;AACH,QAAM,mBAAmB,6BACvB,OACA;AAEF,QAA2D,4BAAuB,mBAA1E,UAAQ,OAAO,MAAM,SAA8B,IAArB,6BAAqB,IAArB,CAA9B,UAAQ,SAAO,QAAM;AAE7B,QAAM,EAAE,MAAM,OAAO,MAAM,UAAU,aAAa,iCAAiC,eAAe;AAElG,QAAM,UAA8B,QAAQ,MAAO,cAAc,cAAc,WAAY,CAAC;AAE5F,QAAM,WAAW,QAAQ,MAAM,IAAI,KAAK;AAExC,QAAM,eAAe,QAAQ,MAAO,UAAS,QAAQ,OAAO,SAAS,aAAa,OAAO,OAAO,GAAG,CAAC;AAEpG,SACE,qCAAC,MAAD;AAAA,IAAM,QAAO;AAAA,IAAK,gBAAe;AAAA,IAAS,MAAK;AAAA,IAAS,cAAY,QAAQ;AAAA,KAAkB,mBAC5F,qCAAC,SAAD;AAAA,IAAS;AAAA,IAAY,WAAU;AAAA,IAAS,0BAA0B;AAAA,KAChE,qCAAC,WAAD;AAAA,IAAW,OAAO,SAAS;AAAA,IAAO,QAAQ,SAAS;AAAA,IAAO;AAAA,KACxD,qCAAC,QAAD,MACE,qCAAC,YAAD;AAAA,IAAU,IAAI,qBAAqB;AAAA,KACjC,qCAAC,YAAD;AAAA,IAAY,GAAE;AAAA,IAAK,GAAE;AAAA,IAAK,OAAM;AAAA,IAAM,QAAO;AAAA,IAAO;AAAA,OAEtD,qCAAC,kBAAD;AAAA,IAAgB,IAAI,kBAAkB;AAAA,IAAY,IAAG;AAAA,IAAK,IAAG;AAAA,IAAK,IAAG;AAAA,IAAK,IAAG;AAAA,KAC3E,qCAAC,QAAD;AAAA,IAAM,QAAO;AAAA,IAAM,WAAW,GAAG,WAAW;AAAA,MAC5C,qCAAC,QAAD;AAAA,IAAM,QAAO;AAAA,IAAM,WAAW,GAAG,WAAW;AAAA,QAGhD,qCAAC,cAAD;AAAA,IACE,IAAG;AAAA,IACH,IAAG;AAAA,IACH,GAAG;AAAA,IACH,aAAa,aAAa;AAAA,IAC1B,QAAQ,WAAW;AAAA,IACnB,eAAc;AAAA,IACd,UAAU,0BAA0B;AAAA,IACpC;AAAA,MAYF,qCAAC,YAAD;AAAA,IACE,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,IACH;AAAA,OAGH,SAAS,MAAM,YACd,qCAAC,QAAD;AAAA,IAAM,OAAO,EAAE,OAAO,UAAU,UAAU,YAAY,aAAa,UAAU,eAAe;AAAA,KACzF;AAAA;AAQb,iCAAiC,YAAY;AAEtC,MAAM,6CAA6C,SAAS;AACnE,2CAA2C,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/react-desc-prop-types.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\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 __duration: number;\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 __duration:
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\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 __duration: number;\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 __duration: 10,\n};\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AA2BO,MAAM,0CAA0C,iCAClD,4BADkD;AAAA,EAErD,MAAM,UAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,QAAQ,YAAY,yBAAyB,aAAa;AAAA,EAC5G,OAAO,UAAU,MAAM,CAAC,SAAS,SAAS,YAAY,gCAAgC,aAAa;AAAA,EACnG,MAAM,UAAU,OAAO,YAAY,6CAA6C,aAAa;AAAA,EAC7F,UAAU,UAAU,KAAK,YAAY,4CAA4C,aAAa;AAAA,EAC9F,aAAa,UAAU,KACpB,YAAY,sEACZ,aAAa;AAAA,EAChB,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,KAEC,YAAY,8CACZ,aAAa;AAAA;AAGX,MAAM,eAAwD;AAAA,EACnE,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AAAA,EACjC,YAAY;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/v2/styled.js
CHANGED
|
@@ -3,6 +3,14 @@ import styled from "styled-components";
|
|
|
3
3
|
import { kfrm } from "@elliemae/ds-system";
|
|
4
4
|
const { PI } = Math;
|
|
5
5
|
const getArcLength = (percentage, radius) => 2 * PI * radius / 100 * percentage;
|
|
6
|
+
const svgRotateAnimation = kfrm`
|
|
7
|
+
0% {
|
|
8
|
+
transform: rotate(0);
|
|
9
|
+
}
|
|
10
|
+
100% {
|
|
11
|
+
transform: rotate(360deg);
|
|
12
|
+
}
|
|
13
|
+
`;
|
|
6
14
|
const strokeTailAnimation = (r) => {
|
|
7
15
|
const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;
|
|
8
16
|
const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;
|
|
@@ -82,6 +90,7 @@ const StyledSvg = styled.svg`
|
|
|
82
90
|
margin: auto;
|
|
83
91
|
transform-origin: center center;
|
|
84
92
|
transform: rotate(-90deg);
|
|
93
|
+
animation: ${svgRotateAnimation} ${(props) => props.__duration / 4}s linear infinite;
|
|
85
94
|
`;
|
|
86
95
|
const StyledPath = styled.path`
|
|
87
96
|
transform-origin: center center;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-underscore-dangle */\nimport styled from 'styled-components';\nimport { kfrm } from '@elliemae/ds-system';\n\nconst { PI } = Math;\n\nconst getArcLength = (percentage: number, radius: number) => ((2 * PI * radius) / 100) * percentage;\n\nconst strokeTailAnimation = (r: number) => {\n const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;\n const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;\n\n return kfrm`\n 0% {\n stroke-dasharray: ${miniDash};\n }\n 50% {\n stroke-dasharray: ${fullDash};\n }\n 100% {\n stroke-dasharray: ${miniDash};\n }\n`;\n};\n\nconst rotateAnimation = kfrm`\n 0%, 12.5% {\n transform: rotate(0);\n }\n 25%, 37.5% {\n transform: rotate(270deg);\n }\n 50%, 62.5% {\n transform: rotate(540deg);\n }\n 75%, 87.5% {\n transform: rotate(810deg);\n }\n 100% {\n transform: rotate(1080deg);\n }\n`;\n\nconst dashAnimation = (r: number) => {\n const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;\n const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;\n\n return kfrm`\n 0% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: 0;\n }\n 12.5% {\n stroke-dasharray: ${fullDash};\n stroke-dashoffset: 0;\n }\n 25% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: ${getArcLength(-75, r)};\n }\n 37.5% {\n stroke-dasharray: ${fullDash};\n stroke-dashoffset: ${getArcLength(-75, r)};\n }\n 50% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: ${getArcLength(-150, r)};\n }\n 62.5% {\n stroke-dasharray: ${fullDash};\n stroke-dashoffset: ${getArcLength(-150, r)};\n }\n 75% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: ${getArcLength(-225, r)};\n }\n 87.5% {\n stroke-dasharray: ${fullDash};\n stroke-dashoffset: ${getArcLength(-225, r)};\n }\n 100% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: ${getArcLength(-300, r)};\n }\n`;\n};\n\nexport const StyledSvg = styled.svg
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AAEA,MAAM,EAAE,OAAO;AAEf,MAAM,eAAe,CAAC,YAAoB,WAAqB,IAAI,KAAK,SAAU,MAAO;AAEzF,MAAM,sBAAsB,CAAC,MAAc;AACzC,QAAM,WAAW,GAAG,aAAa,GAAG,MAAM,aAAa,KAAK;AAC5D,QAAM,WAAW,GAAG,aAAa,IAAI,MAAM,aAAa,IAAI;AAE5D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAAA;AAK5B,MAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBxB,MAAM,gBAAgB,CAAC,MAAc;AACnC,QAAM,WAAW,GAAG,aAAa,GAAG,MAAM,aAAa,KAAK;AAC5D,QAAM,WAAW,GAAG,aAAa,IAAI,MAAM,aAAa,IAAI;AAE5D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA,6BACC,aAAa,KAAK;AAAA;AAAA;AAAA,4BAGnB;AAAA,6BACC,aAAa,KAAK;AAAA;AAAA;AAAA,4BAGnB;AAAA,6BACC,aAAa,MAAM;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM;AAAA;AAAA;AAAA;AAKzC,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-underscore-dangle */\nimport styled from 'styled-components';\nimport { kfrm } from '@elliemae/ds-system';\n\nconst { PI } = Math;\n\nconst getArcLength = (percentage: number, radius: number) => ((2 * PI * radius) / 100) * percentage;\n\nconst svgRotateAnimation = kfrm`\n 0% {\n transform: rotate(0);\n }\n 100% {\n transform: rotate(360deg);\n }\n`;\n\nconst strokeTailAnimation = (r: number) => {\n const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;\n const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;\n\n return kfrm`\n 0% {\n stroke-dasharray: ${miniDash};\n }\n 50% {\n stroke-dasharray: ${fullDash};\n }\n 100% {\n stroke-dasharray: ${miniDash};\n }\n`;\n};\n\nconst rotateAnimation = kfrm`\n 0%, 12.5% {\n transform: rotate(0);\n }\n 25%, 37.5% {\n transform: rotate(270deg);\n }\n 50%, 62.5% {\n transform: rotate(540deg);\n }\n 75%, 87.5% {\n transform: rotate(810deg);\n }\n 100% {\n transform: rotate(1080deg);\n }\n`;\n\nconst dashAnimation = (r: number) => {\n const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;\n const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;\n\n return kfrm`\n 0% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: 0;\n }\n 12.5% {\n stroke-dasharray: ${fullDash};\n stroke-dashoffset: 0;\n }\n 25% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: ${getArcLength(-75, r)};\n }\n 37.5% {\n stroke-dasharray: ${fullDash};\n stroke-dashoffset: ${getArcLength(-75, r)};\n }\n 50% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: ${getArcLength(-150, r)};\n }\n 62.5% {\n stroke-dasharray: ${fullDash};\n stroke-dashoffset: ${getArcLength(-150, r)};\n }\n 75% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: ${getArcLength(-225, r)};\n }\n 87.5% {\n stroke-dasharray: ${fullDash};\n stroke-dashoffset: ${getArcLength(-225, r)};\n }\n 100% {\n stroke-dasharray: ${miniDash};\n stroke-dashoffset: ${getArcLength(-300, r)};\n }\n`;\n};\n\nexport const StyledSvg = styled.svg<{ __duration: number }>`\n display: block;\n margin: auto;\n transform-origin: center center;\n transform: rotate(-90deg);\n animation: ${svgRotateAnimation} ${(props) => props.__duration / 4}s linear infinite;\n`;\n\nexport const StyledPath = styled.path<{ __duration: number; r: number }>`\n transform-origin: center center;\n animation: ${rotateAnimation} ${(props) => props.__duration}s linear infinite,\n ${(props) => strokeTailAnimation(props.r)} ${(props) => props.__duration / 4}s linear infinite;\n`;\n\nexport const StyledRect = styled.rect<{ __duration: number }>`\n transform-origin: center center;\n animation: ${rotateAnimation} ${(props) => props.__duration}s linear infinite;\n`;\n\nexport const StyledCircle = styled.circle<{ r: number; __duration: number }>`\n stroke-dashoffset: 0;\n fill: none;\n animation: ${(props) => dashAnimation(props.r)} ${(props) => props.__duration}s linear infinite;\n clip-path: ${(props) => props.clipPath};\n -webkit-clip-path: ${(props) => props.clipPath};\n`;\n"],
|
|
5
|
+
"mappings": "AAAA;ACCA;AACA;AAEA,MAAM,EAAE,OAAO;AAEf,MAAM,eAAe,CAAC,YAAoB,WAAqB,IAAI,KAAK,SAAU,MAAO;AAEzF,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3B,MAAM,sBAAsB,CAAC,MAAc;AACzC,QAAM,WAAW,GAAG,aAAa,GAAG,MAAM,aAAa,KAAK;AAC5D,QAAM,WAAW,GAAG,aAAa,IAAI,MAAM,aAAa,IAAI;AAE5D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAAA;AAK5B,MAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBxB,MAAM,gBAAgB,CAAC,MAAc;AACnC,QAAM,WAAW,GAAG,aAAa,GAAG,MAAM,aAAa,KAAK;AAC5D,QAAM,WAAW,GAAG,aAAa,IAAI,MAAM,aAAa,IAAI;AAE5D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA,6BACC,aAAa,KAAK;AAAA;AAAA;AAAA,4BAGnB;AAAA,6BACC,aAAa,KAAK;AAAA;AAAA;AAAA,4BAGnB;AAAA,6BACC,aAAa,MAAM;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM;AAAA;AAAA;AAAA;AAKzC,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKjB,sBAAsB,CAAC,UAAU,MAAM,aAAa;AAAA;AAG5D,MAAM,aAAa,OAAO;AAAA;AAAA,eAElB,mBAAmB,CAAC,UAAU,MAAM;AAAA,MAC7C,CAAC,UAAU,oBAAoB,MAAM,MAAM,CAAC,UAAU,MAAM,aAAa;AAAA;AAGxE,MAAM,aAAa,OAAO;AAAA;AAAA,eAElB,mBAAmB,CAAC,UAAU,MAAM;AAAA;AAG5C,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA,eAGpB,CAAC,UAAU,cAAc,MAAM,MAAM,CAAC,UAAU,MAAM;AAAA,eACtD,CAAC,UAAU,MAAM;AAAA,uBACT,CAAC,UAAU,MAAM;AAAA;",
|
|
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.0.0-next.
|
|
3
|
+
"version": "3.0.0-next.17",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Circular progress indicator",
|
|
6
6
|
"files": [
|
|
@@ -51,9 +51,9 @@
|
|
|
51
51
|
"indent": 4
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
|
-
"@elliemae/ds-classnames": "3.0.0-next.
|
|
55
|
-
"@elliemae/ds-props-helpers": "3.0.0-next.
|
|
56
|
-
"@elliemae/ds-tooltip": "3.0.0-next.
|
|
54
|
+
"@elliemae/ds-classnames": "3.0.0-next.17",
|
|
55
|
+
"@elliemae/ds-props-helpers": "3.0.0-next.17",
|
|
56
|
+
"@elliemae/ds-tooltip": "3.0.0-next.17",
|
|
57
57
|
"react-desc": "~4.1.3"
|
|
58
58
|
},
|
|
59
59
|
"devDependencies": {
|