@elliemae/ds-circular-progress-indicator 3.1.0-next.2 → 3.1.0-next.20
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/DSCircularProgressIndicator.js +7 -7
- package/dist/cjs/DSCircularProgressIndicator.js.map +2 -2
- package/dist/cjs/v2/DSCircularIndeterminateIndicator.js +5 -9
- package/dist/cjs/v2/DSCircularIndeterminateIndicator.js.map +2 -2
- package/dist/cjs/v2/react-desc-prop-types.js +1 -2
- package/dist/cjs/v2/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/v2/styled.js +8 -10
- package/dist/cjs/v2/styled.js.map +2 -2
- package/dist/esm/DSCircularProgressIndicator.js +1 -1
- package/dist/esm/DSCircularProgressIndicator.js.map +1 -1
- package/dist/esm/v2/DSCircularIndeterminateIndicator.js +5 -9
- package/dist/esm/v2/DSCircularIndeterminateIndicator.js.map +2 -2
- package/dist/esm/v2/react-desc-prop-types.js +1 -2
- package/dist/esm/v2/react-desc-prop-types.js.map +2 -2
- package/dist/esm/v2/styled.js +5 -7
- package/dist/esm/v2/styled.js.map +2 -2
- package/package.json +19 -15
|
@@ -26,7 +26,7 @@ __export(DSCircularProgressIndicator_exports, {
|
|
|
26
26
|
module.exports = __toCommonJS(DSCircularProgressIndicator_exports);
|
|
27
27
|
var React = __toESM(require("react"));
|
|
28
28
|
var import_react = __toESM(require("react"));
|
|
29
|
-
var
|
|
29
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
30
30
|
var import_ds_classnames = require("@elliemae/ds-classnames");
|
|
31
31
|
var import_ds_tooltip = __toESM(require("@elliemae/ds-tooltip"));
|
|
32
32
|
const { classNameBlock, classNameElement } = (0, import_ds_classnames.convertPropToCssClassName)("circular-progress-indicator");
|
|
@@ -226,15 +226,15 @@ CircularProgressIndicator.defaultProps = {
|
|
|
226
226
|
loading: false
|
|
227
227
|
};
|
|
228
228
|
const circularProgressIndicatorProps = {
|
|
229
|
-
size:
|
|
230
|
-
showLabel:
|
|
231
|
-
showTooltip:
|
|
232
|
-
waiting:
|
|
233
|
-
loading:
|
|
229
|
+
size: import_ds_utilities.PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl", "xxxl"]).description("Defines the size of the indicator").defaultValue("m"),
|
|
230
|
+
showLabel: import_ds_utilities.PropTypes.bool.description("Wheter the indicator displays its state on a label or not").defaultValue(false),
|
|
231
|
+
showTooltip: import_ds_utilities.PropTypes.bool.description("Wheter the indicator displays its state on a tooltip or not").defaultValue(false),
|
|
232
|
+
waiting: import_ds_utilities.PropTypes.bool.description("Defines the state of the indicator as Waiting and only displays the gray track").defaultValue(false),
|
|
233
|
+
loading: import_ds_utilities.PropTypes.bool.description("Defines the state of the indicator as Loading and displays a blue spinner animation").defaultValue(false)
|
|
234
234
|
};
|
|
235
235
|
CircularProgressIndicator.propTypes = circularProgressIndicatorProps;
|
|
236
236
|
CircularProgressIndicator.displayName = "CircularProgressIndicator";
|
|
237
|
-
const CircularProgressIndicatorWithSchema = (0,
|
|
237
|
+
const CircularProgressIndicatorWithSchema = (0, import_ds_utilities.describe)(CircularProgressIndicator);
|
|
238
238
|
CircularProgressIndicatorWithSchema.propTypes = circularProgressIndicatorProps;
|
|
239
239
|
var DSCircularProgressIndicator_default = CircularProgressIndicator;
|
|
240
240
|
//# sourceMappingURL=DSCircularProgressIndicator.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSCircularProgressIndicator.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport React from 'react';\nimport { describe, PropTypes } from '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAkB;AAClB,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\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;\nCircularProgressIndicator.displayName = 'CircularProgressIndicator';\nconst CircularProgressIndicatorWithSchema = describe(CircularProgressIndicator);\nCircularProgressIndicatorWithSchema.propTypes = circularProgressIndicatorProps;\n\nexport { CircularProgressIndicatorWithSchema };\nexport default CircularProgressIndicator;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -63,7 +63,7 @@ const EmptyComp = (props) => /* @__PURE__ */ import_react.default.createElement(
|
|
|
63
63
|
const DSCircularIndeterminateIndicator = (props) => {
|
|
64
64
|
const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
|
|
65
65
|
const _a = (0, import_ds_utilities.useGetGlobalAttributes)(propsWithDefault), { height, width, rows, cols } = _a, globalAttributes = __objRest(_a, ["height", "width", "rows", "cols"]);
|
|
66
|
-
const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference
|
|
66
|
+
const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference } = propsWithDefault;
|
|
67
67
|
const Wrapper = (0, import_react.useMemo)(() => withTooltip ? import_ds_tooltip.DSTooltipV3 : EmptyComp, [withTooltip]);
|
|
68
68
|
const uniqueId = (0, import_react.useMemo)(() => (0, import_uid.uid)(16), []);
|
|
69
69
|
const circleRadius = (0, import_react.useMemo)(() => (import_constants.sizeToPx[size] - Number.parseInt(import_constants.sizeToWeight[size], 10)) / 2, [size]);
|
|
@@ -78,16 +78,14 @@ const DSCircularIndeterminateIndicator = (props) => {
|
|
|
78
78
|
startPlacementPreference: tooltipStartPlacementPreference
|
|
79
79
|
}, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledSvg, {
|
|
80
80
|
width: import_constants.sizeToPx[size],
|
|
81
|
-
height: import_constants.sizeToPx[size]
|
|
82
|
-
__duration
|
|
81
|
+
height: import_constants.sizeToPx[size]
|
|
83
82
|
}, /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("clipPath", {
|
|
84
83
|
id: `not-gradient-clip-${uniqueId}`
|
|
85
84
|
}, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledRect, {
|
|
86
85
|
x: "0%",
|
|
87
86
|
y: "0%",
|
|
88
87
|
width: "52%",
|
|
89
|
-
height: "100%"
|
|
90
|
-
__duration
|
|
88
|
+
height: "100%"
|
|
91
89
|
})), /* @__PURE__ */ import_react.default.createElement("linearGradient", {
|
|
92
90
|
id: `gradient-color-${uniqueId}`,
|
|
93
91
|
x1: "0%",
|
|
@@ -107,8 +105,7 @@ const DSCircularIndeterminateIndicator = (props) => {
|
|
|
107
105
|
strokeWidth: import_constants.sizeToWeight[size],
|
|
108
106
|
stroke: import_constants.colorToHex[color],
|
|
109
107
|
strokeLinecap: "round",
|
|
110
|
-
clipPath: `url(#not-gradient-clip-${uniqueId})
|
|
111
|
-
__duration
|
|
108
|
+
clipPath: `url(#not-gradient-clip-${uniqueId})`
|
|
112
109
|
}), /* @__PURE__ */ import_react.default.createElement(import_styled.StyledPath, {
|
|
113
110
|
d: `M ${import_constants.sizeToPx[size] / 2} ${import_constants.sizeToPx[size] / 2}
|
|
114
111
|
m ${circleRadius}, 0
|
|
@@ -117,8 +114,7 @@ const DSCircularIndeterminateIndicator = (props) => {
|
|
|
117
114
|
fill: "transparent",
|
|
118
115
|
stroke: `url(#gradient-color-${uniqueId})`,
|
|
119
116
|
strokeLinecap: "round",
|
|
120
|
-
r: circleRadius
|
|
121
|
-
__duration
|
|
117
|
+
r: circleRadius
|
|
122
118
|
})), text !== "" && showText && /* @__PURE__ */ import_react.default.createElement("span", {
|
|
123
119
|
style: { color: color === "light" ? "#FFFFFF" : "#25292F99", fontSize: import_constants.sizeToTextSize[size] }
|
|
124
120
|
}, text)));
|
|
@@ -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, { 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
|
|
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,QAA2D,qDAAuB,gBAAgB,GAA1F,UAAQ,OAAO,MAAM,SAA8B,IAArB,6BAAqB,IAArB,CAA9B,UAAQ,SAAO,QAAM;AAE7B,QAAM,EAAE,MAAM,OAAO,MAAM,UAAU,aAAa,
|
|
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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,QAA2D,qDAAuB,gBAAgB,GAA1F,UAAQ,OAAO,MAAM,SAA8B,IAArB,6BAAqB,IAArB,CAA9B,UAAQ,SAAO,QAAM;AAE7B,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,KAAkB,mBAC5F,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,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-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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAAqD;
|
|
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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAAqD;AA0B9C,MAAM,0CAA0C,iCAClD,gDADkD;AAAA,EAErD,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
|
}
|
package/dist/cjs/v2/styled.js
CHANGED
|
@@ -27,7 +27,6 @@ __export(styled_exports, {
|
|
|
27
27
|
});
|
|
28
28
|
module.exports = __toCommonJS(styled_exports);
|
|
29
29
|
var React = __toESM(require("react"));
|
|
30
|
-
var import_styled_components = __toESM(require("styled-components"));
|
|
31
30
|
var import_ds_system = require("@elliemae/ds-system");
|
|
32
31
|
const { PI } = Math;
|
|
33
32
|
const getArcLength = (percentage, radius) => 2 * PI * radius / 100 * percentage;
|
|
@@ -113,26 +112,25 @@ const dashAnimation = (r) => {
|
|
|
113
112
|
}
|
|
114
113
|
`;
|
|
115
114
|
};
|
|
116
|
-
const StyledSvg =
|
|
115
|
+
const StyledSvg = import_ds_system.styled.svg`
|
|
117
116
|
display: block;
|
|
118
117
|
margin: auto;
|
|
119
118
|
transform-origin: center center;
|
|
120
119
|
transform: rotate(-90deg);
|
|
121
|
-
animation: ${svgRotateAnimation}
|
|
120
|
+
animation: ${svgRotateAnimation} 2.5s linear infinite;
|
|
122
121
|
`;
|
|
123
|
-
const StyledPath =
|
|
122
|
+
const StyledPath = import_ds_system.styled.path`
|
|
124
123
|
transform-origin: center center;
|
|
125
|
-
animation: ${rotateAnimation} ${(props) => props.
|
|
126
|
-
${(props) => strokeTailAnimation(props.r)} ${(props) => props.__duration / 4}s linear infinite;
|
|
124
|
+
animation: ${rotateAnimation} 10s linear infinite, ${(props) => strokeTailAnimation(props.r)} 2.5s linear infinite;
|
|
127
125
|
`;
|
|
128
|
-
const StyledRect =
|
|
126
|
+
const StyledRect = import_ds_system.styled.rect`
|
|
129
127
|
transform-origin: center center;
|
|
130
|
-
animation: ${rotateAnimation}
|
|
128
|
+
animation: ${rotateAnimation} 10s linear infinite;
|
|
131
129
|
`;
|
|
132
|
-
const StyledCircle =
|
|
130
|
+
const StyledCircle = import_ds_system.styled.circle`
|
|
133
131
|
stroke-dashoffset: 0;
|
|
134
132
|
fill: none;
|
|
135
|
-
animation: ${(props) => dashAnimation(props.r)}
|
|
133
|
+
animation: ${(props) => dashAnimation(props.r)} 10s linear infinite;
|
|
136
134
|
clip-path: ${(props) => props.clipPath};
|
|
137
135
|
-webkit-clip-path: ${(props) => props.clipPath};
|
|
138
136
|
`;
|
|
@@ -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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB
|
|
4
|
+
"sourcesContent": ["/* eslint-disable no-underscore-dangle */\nimport { kfrm, styled } 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`\n display: block;\n margin: auto;\n transform-origin: center center;\n transform: rotate(-90deg);\n animation: ${svgRotateAnimation} 2.5s linear infinite;\n`;\n\nexport const StyledPath = styled.path<{ r: number }>`\n transform-origin: center center;\n animation: ${rotateAnimation} 10s linear infinite, ${(props) => strokeTailAnimation(props.r)} 2.5s linear infinite;\n`;\n\nexport const StyledRect = styled.rect`\n transform-origin: center center;\n animation: ${rotateAnimation} 10s linear infinite;\n`;\n\nexport const StyledCircle = styled.circle<{ r: number }>`\n stroke-dashoffset: 0;\n fill: none;\n animation: ${(props) => dashAnimation(props.r)} 10s 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;AAAA;ACAA,YAAuB;ADCvB,uBAA6B;AAE7B,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,CAAC,KAAK,aAAa,KAAK,CAAC;AAC7D,QAAM,WAAW,GAAG,aAAa,IAAI,CAAC,KAAK,aAAa,IAAI,CAAC;AAE7D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAG5B;AAEA,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,CAAC,KAAK,aAAa,KAAK,CAAC;AAC7D,QAAM,WAAW,GAAG,aAAa,IAAI,CAAC,KAAK,aAAa,IAAI,CAAC;AAE7D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA,6BACC,aAAa,KAAK,CAAC;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,KAAK,CAAC;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAGjD;AAEO,MAAM,YAAY,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKjB;AAAA;AAGR,MAAM,aAAa,wBAAO;AAAA;AAAA,eAElB,wCAAwC,CAAC,UAAU,oBAAoB,MAAM,CAAC;AAAA;AAGtF,MAAM,aAAa,wBAAO;AAAA;AAAA,eAElB;AAAA;AAGR,MAAM,eAAe,wBAAO;AAAA;AAAA;AAAA,eAGpB,CAAC,UAAU,cAAc,MAAM,CAAC;AAAA,eAChC,CAAC,UAAU,MAAM;AAAA,uBACT,CAAC,UAAU,MAAM;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import React2 from "react";
|
|
3
|
-
import { describe, PropTypes } from "
|
|
3
|
+
import { describe, PropTypes } from "@elliemae/ds-utilities";
|
|
4
4
|
import { convertPropToCssClassName } from "@elliemae/ds-classnames";
|
|
5
5
|
import DSTooltip from "@elliemae/ds-tooltip";
|
|
6
6
|
const { classNameBlock, classNameElement } = convertPropToCssClassName("circular-progress-indicator");
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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 '
|
|
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 '@elliemae/ds-utilities';\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;\nCircularProgressIndicator.displayName = 'CircularProgressIndicator';\nconst CircularProgressIndicatorWithSchema = describe(CircularProgressIndicator);\nCircularProgressIndicatorWithSchema.propTypes = circularProgressIndicatorProps;\n\nexport { CircularProgressIndicatorWithSchema };\nexport default CircularProgressIndicator;\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -42,7 +42,7 @@ const EmptyComp = (props) => /* @__PURE__ */ React2.createElement(React2.Fragmen
|
|
|
42
42
|
const DSCircularIndeterminateIndicator = (props) => {
|
|
43
43
|
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
|
|
44
44
|
const _a = useGetGlobalAttributes(propsWithDefault), { height, width, rows, cols } = _a, globalAttributes = __objRest(_a, ["height", "width", "rows", "cols"]);
|
|
45
|
-
const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference
|
|
45
|
+
const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference } = propsWithDefault;
|
|
46
46
|
const Wrapper = useMemo(() => withTooltip ? DSTooltipV3 : EmptyComp, [withTooltip]);
|
|
47
47
|
const uniqueId = useMemo(() => uid(16), []);
|
|
48
48
|
const circleRadius = useMemo(() => (sizeToPx[size] - Number.parseInt(sizeToWeight[size], 10)) / 2, [size]);
|
|
@@ -57,16 +57,14 @@ const DSCircularIndeterminateIndicator = (props) => {
|
|
|
57
57
|
startPlacementPreference: tooltipStartPlacementPreference
|
|
58
58
|
}, /* @__PURE__ */ React2.createElement(StyledSvg, {
|
|
59
59
|
width: sizeToPx[size],
|
|
60
|
-
height: sizeToPx[size]
|
|
61
|
-
__duration
|
|
60
|
+
height: sizeToPx[size]
|
|
62
61
|
}, /* @__PURE__ */ React2.createElement("defs", null, /* @__PURE__ */ React2.createElement("clipPath", {
|
|
63
62
|
id: `not-gradient-clip-${uniqueId}`
|
|
64
63
|
}, /* @__PURE__ */ React2.createElement(StyledRect, {
|
|
65
64
|
x: "0%",
|
|
66
65
|
y: "0%",
|
|
67
66
|
width: "52%",
|
|
68
|
-
height: "100%"
|
|
69
|
-
__duration
|
|
67
|
+
height: "100%"
|
|
70
68
|
})), /* @__PURE__ */ React2.createElement("linearGradient", {
|
|
71
69
|
id: `gradient-color-${uniqueId}`,
|
|
72
70
|
x1: "0%",
|
|
@@ -86,8 +84,7 @@ const DSCircularIndeterminateIndicator = (props) => {
|
|
|
86
84
|
strokeWidth: sizeToWeight[size],
|
|
87
85
|
stroke: colorToHex[color],
|
|
88
86
|
strokeLinecap: "round",
|
|
89
|
-
clipPath: `url(#not-gradient-clip-${uniqueId})
|
|
90
|
-
__duration
|
|
87
|
+
clipPath: `url(#not-gradient-clip-${uniqueId})`
|
|
91
88
|
}), /* @__PURE__ */ React2.createElement(StyledPath, {
|
|
92
89
|
d: `M ${sizeToPx[size] / 2} ${sizeToPx[size] / 2}
|
|
93
90
|
m ${circleRadius}, 0
|
|
@@ -96,8 +93,7 @@ const DSCircularIndeterminateIndicator = (props) => {
|
|
|
96
93
|
fill: "transparent",
|
|
97
94
|
stroke: `url(#gradient-color-${uniqueId})`,
|
|
98
95
|
strokeLinecap: "round",
|
|
99
|
-
r: circleRadius
|
|
100
|
-
__duration
|
|
96
|
+
r: circleRadius
|
|
101
97
|
})), text !== "" && showText && /* @__PURE__ */ React2.createElement("span", {
|
|
102
98
|
style: { color: color === "light" ? "#FFFFFF" : "#25292F99", fontSize: sizeToTextSize[size] }
|
|
103
99
|
}, text)));
|
|
@@ -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, { 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
|
|
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,QAA2D,4BAAuB,gBAAgB,GAA1F,UAAQ,OAAO,MAAM,SAA8B,IAArB,6BAAqB,IAArB,CAA9B,UAAQ,SAAO,QAAM;AAE7B,QAAM,EAAE,MAAM,OAAO,MAAM,UAAU,aAAa,
|
|
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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;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,QAA2D,4BAAuB,gBAAgB,GAA1F,UAAQ,OAAO,MAAM,SAA8B,IAArB,6BAAqB,IAArB,CAA9B,UAAQ,SAAO,QAAM;AAE7B,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,KAAkB,mBAC5F,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,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-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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;
|
|
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": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AA0BO,MAAM,0CAA0C,iCAClD,4BADkD;AAAA,EAErD,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/dist/esm/v2/styled.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import styled from "
|
|
3
|
-
import { kfrm } from "@elliemae/ds-system";
|
|
2
|
+
import { kfrm, styled } from "@elliemae/ds-system";
|
|
4
3
|
const { PI } = Math;
|
|
5
4
|
const getArcLength = (percentage, radius) => 2 * PI * radius / 100 * percentage;
|
|
6
5
|
const svgRotateAnimation = kfrm`
|
|
@@ -90,21 +89,20 @@ const StyledSvg = styled.svg`
|
|
|
90
89
|
margin: auto;
|
|
91
90
|
transform-origin: center center;
|
|
92
91
|
transform: rotate(-90deg);
|
|
93
|
-
animation: ${svgRotateAnimation}
|
|
92
|
+
animation: ${svgRotateAnimation} 2.5s linear infinite;
|
|
94
93
|
`;
|
|
95
94
|
const StyledPath = styled.path`
|
|
96
95
|
transform-origin: center center;
|
|
97
|
-
animation: ${rotateAnimation} ${(props) => props.
|
|
98
|
-
${(props) => strokeTailAnimation(props.r)} ${(props) => props.__duration / 4}s linear infinite;
|
|
96
|
+
animation: ${rotateAnimation} 10s linear infinite, ${(props) => strokeTailAnimation(props.r)} 2.5s linear infinite;
|
|
99
97
|
`;
|
|
100
98
|
const StyledRect = styled.rect`
|
|
101
99
|
transform-origin: center center;
|
|
102
|
-
animation: ${rotateAnimation}
|
|
100
|
+
animation: ${rotateAnimation} 10s linear infinite;
|
|
103
101
|
`;
|
|
104
102
|
const StyledCircle = styled.circle`
|
|
105
103
|
stroke-dashoffset: 0;
|
|
106
104
|
fill: none;
|
|
107
|
-
animation: ${(props) => dashAnimation(props.r)}
|
|
105
|
+
animation: ${(props) => dashAnimation(props.r)} 10s linear infinite;
|
|
108
106
|
clip-path: ${(props) => props.clipPath};
|
|
109
107
|
-webkit-clip-path: ${(props) => props.clipPath};
|
|
110
108
|
`;
|
|
@@ -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
|
|
5
|
-
"mappings": "AAAA;ACCA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-underscore-dangle */\nimport { kfrm, styled } 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`\n display: block;\n margin: auto;\n transform-origin: center center;\n transform: rotate(-90deg);\n animation: ${svgRotateAnimation} 2.5s linear infinite;\n`;\n\nexport const StyledPath = styled.path<{ r: number }>`\n transform-origin: center center;\n animation: ${rotateAnimation} 10s linear infinite, ${(props) => strokeTailAnimation(props.r)} 2.5s linear infinite;\n`;\n\nexport const StyledRect = styled.rect`\n transform-origin: center center;\n animation: ${rotateAnimation} 10s linear infinite;\n`;\n\nexport const StyledCircle = styled.circle<{ r: number }>`\n stroke-dashoffset: 0;\n fill: none;\n animation: ${(props) => dashAnimation(props.r)} 10s linear infinite;\n clip-path: ${(props) => props.clipPath};\n -webkit-clip-path: ${(props) => props.clipPath};\n`;\n"],
|
|
5
|
+
"mappings": "AAAA;ACCA;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,CAAC,KAAK,aAAa,KAAK,CAAC;AAC7D,QAAM,WAAW,GAAG,aAAa,IAAI,CAAC,KAAK,aAAa,IAAI,CAAC;AAE7D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAG5B;AAEA,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,CAAC,KAAK,aAAa,KAAK,CAAC;AAC7D,QAAM,WAAW,GAAG,aAAa,IAAI,CAAC,KAAK,aAAa,IAAI,CAAC;AAE7D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA,6BACC,aAAa,KAAK,CAAC;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,KAAK,CAAC;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAGjD;AAEO,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKjB;AAAA;AAGR,MAAM,aAAa,OAAO;AAAA;AAAA,eAElB,wCAAwC,CAAC,UAAU,oBAAoB,MAAM,CAAC;AAAA;AAGtF,MAAM,aAAa,OAAO;AAAA;AAAA,eAElB;AAAA;AAGR,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA,eAGpB,CAAC,UAAU,cAAc,MAAM,CAAC;AAAA,eAChC,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.1.0-next.
|
|
3
|
+
"version": "3.1.0-next.20",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Circular progress indicator",
|
|
6
6
|
"files": [
|
|
@@ -50,22 +50,18 @@
|
|
|
50
50
|
"reportFile": "tests.xml",
|
|
51
51
|
"indent": 4
|
|
52
52
|
},
|
|
53
|
-
"scripts": {
|
|
54
|
-
"dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
|
|
55
|
-
"test": "node ../../scripts/testing/test.mjs",
|
|
56
|
-
"lint": "node ../../scripts/lint.mjs",
|
|
57
|
-
"dts": "node ../../scripts/dts.mjs",
|
|
58
|
-
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
|
|
59
|
-
},
|
|
60
53
|
"dependencies": {
|
|
61
|
-
"@elliemae/ds-classnames": "3.1.0-next.
|
|
62
|
-
"@elliemae/ds-
|
|
63
|
-
"@elliemae/ds-
|
|
64
|
-
"
|
|
54
|
+
"@elliemae/ds-classnames": "3.1.0-next.20",
|
|
55
|
+
"@elliemae/ds-grid": "3.1.0-next.20",
|
|
56
|
+
"@elliemae/ds-system": "3.1.0-next.20",
|
|
57
|
+
"@elliemae/ds-tooltip": "3.1.0-next.20",
|
|
58
|
+
"@elliemae/ds-utilities": "3.1.0-next.20",
|
|
59
|
+
"styled-components": "^5.3.5",
|
|
60
|
+
"uid": "~2.0.0"
|
|
65
61
|
},
|
|
66
62
|
"devDependencies": {
|
|
67
|
-
"@testing-library/jest-dom": "~5.16.
|
|
68
|
-
"@testing-library/react": "~12.1.
|
|
63
|
+
"@testing-library/jest-dom": "~5.16.4",
|
|
64
|
+
"@testing-library/react": "~12.1.3"
|
|
69
65
|
},
|
|
70
66
|
"peerDependencies": {
|
|
71
67
|
"react": "^17.0.2",
|
|
@@ -74,5 +70,13 @@
|
|
|
74
70
|
"publishConfig": {
|
|
75
71
|
"access": "public",
|
|
76
72
|
"typeSafety": false
|
|
73
|
+
},
|
|
74
|
+
"scripts": {
|
|
75
|
+
"dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
|
|
76
|
+
"test": "node ../../scripts/testing/test.mjs",
|
|
77
|
+
"lint": "node ../../scripts/lint.mjs",
|
|
78
|
+
"dts": "node ../../scripts/dts.mjs",
|
|
79
|
+
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
|
|
80
|
+
"checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
77
81
|
}
|
|
78
|
-
}
|
|
82
|
+
}
|