@elliemae/ds-circular-progress-indicator 3.3.0 → 3.3.1-rc.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/DSCircularProgressIndicator.js +0 -1
- package/dist/esm/DSCircularProgressIndicator.js.map +1 -1
- package/dist/esm/index.js +0 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/v2/DSCircularIndeterminateIndicator.js +0 -1
- package/dist/esm/v2/DSCircularIndeterminateIndicator.js.map +1 -1
- package/dist/esm/v2/constants.js +0 -1
- package/dist/esm/v2/constants.js.map +1 -1
- package/dist/esm/v2/index.js +0 -1
- package/dist/esm/v2/index.js.map +1 -1
- package/dist/esm/v2/react-desc-prop-types.js +0 -1
- package/dist/esm/v2/react-desc-prop-types.js.map +1 -1
- package/dist/esm/v2/styled.js +0 -1
- package/dist/esm/v2/styled.js.map +1 -1
- package/package.json +6 -6
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSCircularProgressIndicator.tsx"],
|
|
4
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
|
-
"mappings": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
package/dist/esm/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/named */\nexport {\n default,\n default as DSCircularProgressIndicator,\n CircularProgressIndicatorWithSchema,\n} from './DSCircularProgressIndicator';\nexport { DSCircularIndeterminateIndicator, DSCircularIndeterminateIndicatorWithSchema } from './v2';\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "AAAA;ACCA;AAAA;AAAA;AAAA;AAAA;AAKA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/DSCircularIndeterminateIndicator.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport {\n DSCircularIndeterminateIndicatorT,\n CircularIndeterminateIndicatorPropTypes,\n defaultProps,\n} from './react-desc-prop-types';\nimport { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from './constants';\nimport { StyledCircle, StyledPath, StyledRect, StyledSvg } from './styled';\n\n// eslint-disable-next-line react/jsx-no-useless-fragment\nconst EmptyComp: typeof DSTooltipV3 = (props) => <>{props.children}</>;\n\nexport const DSCircularIndeterminateIndicator: React.ComponentType<DSCircularIndeterminateIndicatorT.Props> = (\n props,\n) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSCircularIndeterminateIndicatorT.Props>>(\n props,\n defaultProps,\n );\n const { height, width, rows, cols, ...globalAttributes } = useGetGlobalAttributes(propsWithDefault);\n\n const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference } = propsWithDefault;\n\n const Wrapper: typeof DSTooltipV3 = useMemo(() => (withTooltip ? DSTooltipV3 : EmptyComp), [withTooltip]);\n\n const uniqueId = useMemo(() => uid(16), []);\n\n const circleRadius = useMemo(() => (sizeToPx[size] - Number.parseInt(sizeToWeight[size], 10)) / 2, [size]);\n\n return (\n <Grid gutter=\"xs\" justifyContent=\"center\" role=\"status\" aria-label={text || 'Loading...'} {...globalAttributes}>\n <Wrapper text={text} textAlign=\"center\" startPlacementPreference={tooltipStartPlacementPreference}>\n <StyledSvg width={sizeToPx[size]} height={sizeToPx[size]}>\n <defs>\n <clipPath id={`not-gradient-clip-${uniqueId}`}>\n <StyledRect x=\"0%\" y=\"0%\" width=\"52%\" height=\"100%\" />\n </clipPath>\n <linearGradient id={`gradient-color-${uniqueId}`} x1=\"0%\" x2=\"0%\" y1=\"0%\" y2=\"100%\">\n <stop offset=\"10%\" stopColor={`${colorToHex[color]}00`} />\n <stop offset=\"90%\" stopColor={`${colorToHex[color]}FF`} />\n </linearGradient>\n </defs>\n <StyledCircle\n cx=\"50%\"\n cy=\"50%\"\n r={circleRadius}\n strokeWidth={sizeToWeight[size]}\n stroke={colorToHex[color]}\n strokeLinecap=\"round\"\n clipPath={`url(#not-gradient-clip-${uniqueId})`}\n />\n {/* \n Here we are using a path because:\n - Flexible enough to build a circle\n - When rotating, the gradient follows the rotation!!! (This is key)\n - We can use the rotation with keyframes, allowing for custom timing\n \n Using a circle does not pass point 2.\n Animating the gradient is not posible with custom timings.\n This is the best solution without using a custom library.\n */}\n <StyledPath\n d={`M ${sizeToPx[size] / 2} ${sizeToPx[size] / 2}\n m ${circleRadius}, 0\n a ${circleRadius}, ${circleRadius} 0 0, 1 -${circleRadius}, ${circleRadius}`}\n strokeWidth={sizeToWeight[size]}\n fill=\"transparent\"\n stroke={`url(#gradient-color-${uniqueId})`}\n strokeLinecap=\"round\"\n r={circleRadius}\n />\n </StyledSvg>\n {text !== '' && showText && (\n <span style={{ color: color === 'light' ? '#FFFFFF' : '#25292F99', fontSize: sizeToTextSize[size] }}>\n {text}\n </span>\n )}\n </Wrapper>\n </Grid>\n );\n};\n\nDSCircularIndeterminateIndicator.propTypes = CircularIndeterminateIndicatorPropTypes;\nDSCircularIndeterminateIndicator.displayName = 'DSCircularIndeterminateIndicator';\nexport const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);\nDSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypes;\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAKA;AACA;AAGA,MAAM,YAAgC,CAAC,UAAU,4DAAG,MAAM,QAAS;AAE5D,MAAM,mCAAiG,CAC5G,UACG;AACH,QAAM,mBAAmB,6BACvB,OACA,YACF;AACA,QAAM,EAAE,QAAQ,OAAO,MAAM,SAAS,qBAAqB,uBAAuB,gBAAgB;AAElG,QAAM,EAAE,MAAM,OAAO,MAAM,UAAU,aAAa,oCAAoC;AAEtF,QAAM,UAA8B,QAAQ,MAAO,cAAc,cAAc,WAAY,CAAC,WAAW,CAAC;AAExG,QAAM,WAAW,QAAQ,MAAM,IAAI,EAAE,GAAG,CAAC,CAAC;AAE1C,QAAM,eAAe,QAAQ,MAAO,UAAS,QAAQ,OAAO,SAAS,aAAa,OAAO,EAAE,KAAK,GAAG,CAAC,IAAI,CAAC;AAEzG,SACE,qCAAC;AAAA,IAAK,QAAO;AAAA,IAAK,gBAAe;AAAA,IAAS,MAAK;AAAA,IAAS,cAAY,QAAQ;AAAA,IAAe,GAAG;AAAA,KAC5F,qCAAC;AAAA,IAAQ;AAAA,IAAY,WAAU;AAAA,IAAS,0BAA0B;AAAA,KAChE,qCAAC;AAAA,IAAU,OAAO,SAAS;AAAA,IAAO,QAAQ,SAAS;AAAA,KACjD,qCAAC,cACC,qCAAC;AAAA,IAAS,IAAI,qBAAqB;AAAA,KACjC,qCAAC;AAAA,IAAW,GAAE;AAAA,IAAK,GAAE;AAAA,IAAK,OAAM;AAAA,IAAM,QAAO;AAAA,GAAO,CACtD,GACA,qCAAC;AAAA,IAAe,IAAI,kBAAkB;AAAA,IAAY,IAAG;AAAA,IAAK,IAAG;AAAA,IAAK,IAAG;AAAA,IAAK,IAAG;AAAA,KAC3E,qCAAC;AAAA,IAAK,QAAO;AAAA,IAAM,WAAW,GAAG,WAAW;AAAA,GAAY,GACxD,qCAAC;AAAA,IAAK,QAAO;AAAA,IAAM,WAAW,GAAG,WAAW;AAAA,GAAY,CAC1D,CACF,GACA,qCAAC;AAAA,IACC,IAAG;AAAA,IACH,IAAG;AAAA,IACH,GAAG;AAAA,IACH,aAAa,aAAa;AAAA,IAC1B,QAAQ,WAAW;AAAA,IACnB,eAAc;AAAA,IACd,UAAU,0BAA0B;AAAA,GACtC,GAWA,qCAAC;AAAA,IACC,GAAG,KAAK,SAAS,QAAQ,KAAK,SAAS,QAAQ;AAAA,oBACvC;AAAA,oBACA,iBAAiB,wBAAwB,iBAAiB;AAAA,IAClE,aAAa,aAAa;AAAA,IAC1B,MAAK;AAAA,IACL,QAAQ,uBAAuB;AAAA,IAC/B,eAAc;AAAA,IACd,GAAG;AAAA,GACL,CACF,GACC,SAAS,MAAM,YACd,qCAAC;AAAA,IAAK,OAAO,EAAE,OAAO,UAAU,UAAU,YAAY,aAAa,UAAU,eAAe,MAAM;AAAA,KAC/F,IACH,CAEJ,CACF;AAEJ;AAEA,iCAAiC,YAAY;AAC7C,iCAAiC,cAAc;AACxC,MAAM,6CAA6C,SAAS,gCAAgC;AACnG,2CAA2C,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/v2/constants.js
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/constants.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const sizeToPx = {\n xs: 16,\n s: 24,\n m: 32,\n l: 48,\n xl: 56,\n xxl: 64,\n};\n\nexport const sizeToWeight = {\n xs: '3px',\n s: '3px',\n m: '3px',\n l: '4px',\n xl: '5px',\n xxl: '6px',\n};\n\nexport const colorToHex = {\n light: '#EBF6FF',\n dark: '#1394E5',\n};\n\nexport const sizeToTextSize = {\n xs: '12px',\n s: '12px',\n m: '12px',\n l: '13px',\n xl: '14px',\n xxl: '16px',\n};\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "AAAA;ACAO,MAAM,WAAW;AAAA,EACtB,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AACP;AAEO,MAAM,eAAe;AAAA,EAC1B,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AACP;AAEO,MAAM,aAAa;AAAA,EACxB,OAAO;AAAA,EACP,MAAM;AACR;AAEO,MAAM,iBAAiB;AAAA,EAC5B,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AACP;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/v2/index.js
CHANGED
package/dist/esm/v2/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export {\n DSCircularIndeterminateIndicator,\n DSCircularIndeterminateIndicatorWithSchema,\n} from './DSCircularIndeterminateIndicator';\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "AAAA;ACAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/react-desc-prop-types.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-utilities';\nimport { WeakValidationMap } from 'react';\n\nexport declare namespace DSCircularIndeterminateIndicatorT {\n interface Props {\n size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';\n color?: 'light' | 'dark';\n text?: string;\n showText?: boolean;\n withTooltip: boolean;\n tooltipStartPlacementPreference?:\n | 'top-start'\n | 'top'\n | 'top-end'\n | 'right-start'\n | 'right'\n | 'right-end'\n | 'bottom-end'\n | 'bottom'\n | 'bottom-start'\n | 'left-end'\n | 'left'\n | 'left-start';\n }\n}\n\nexport const CircularIndeterminateIndicatorPropTypes = {\n ...globalAttributesPropTypes,\n size: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl']).description('Size of the indicator').defaultValue('m'),\n color: PropTypes.oneOf(['light', 'dark']).description('Color mode for the indicator').defaultValue('dark'),\n text: PropTypes.string.description('Optional text to show under the indicator').defaultValue(''),\n showText: PropTypes.bool.description('Whether to show the optional text or not').defaultValue(true),\n withTooltip: PropTypes.bool\n .description('Whether to include a tooltip that shows the optional text on hover')\n .defaultValue(false),\n tooltipStartPlacementPreference: PropTypes.oneOf([\n 'top-start',\n 'top',\n 'top-end',\n 'right-start',\n 'right',\n 'right-end',\n 'bottom-end',\n 'bottom',\n 'bottom-start',\n 'left-end',\n 'left',\n 'left-start',\n ])\n .description('start placement preference for the tooltip')\n .defaultValue('center'),\n} as WeakValidationMap<unknown>;\n\nexport const defaultProps: DSCircularIndeterminateIndicatorT.Props = {\n size: 'm',\n color: 'dark',\n text: '',\n showText: true,\n withTooltip: false,\n tooltipStartPlacementPreference: 'bottom',\n};\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "AAAA;ACCA;AA0BO,MAAM,0CAA0C;AAAA,EACrD,GAAG;AAAA,EACH,MAAM,UAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAAE,YAAY,uBAAuB,EAAE,aAAa,GAAG;AAAA,EAC/G,OAAO,UAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EAAE,YAAY,8BAA8B,EAAE,aAAa,MAAM;AAAA,EACzG,MAAM,UAAU,OAAO,YAAY,2CAA2C,EAAE,aAAa,EAAE;AAAA,EAC/F,UAAU,UAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,IAAI;AAAA,EAClG,aAAa,UAAU,KACpB,YAAY,oEAAoE,EAChF,aAAa,KAAK;AAAA,EACrB,iCAAiC,UAAU,MAAM;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,4CAA4C,EACxD,aAAa,QAAQ;AAC1B;AAEO,MAAM,eAAwD;AAAA,EACnE,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/v2/styled.js
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/styled.tsx"],
|
|
4
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": "
|
|
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.3.
|
|
3
|
+
"version": "3.3.1-rc.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Circular progress indicator",
|
|
6
6
|
"files": [
|
|
@@ -51,11 +51,11 @@
|
|
|
51
51
|
"indent": 4
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
|
-
"@elliemae/ds-classnames": "3.3.
|
|
55
|
-
"@elliemae/ds-grid": "3.3.
|
|
56
|
-
"@elliemae/ds-system": "3.3.
|
|
57
|
-
"@elliemae/ds-tooltip": "3.3.
|
|
58
|
-
"@elliemae/ds-utilities": "3.3.
|
|
54
|
+
"@elliemae/ds-classnames": "3.3.1-rc.2",
|
|
55
|
+
"@elliemae/ds-grid": "3.3.1-rc.2",
|
|
56
|
+
"@elliemae/ds-system": "3.3.1-rc.2",
|
|
57
|
+
"@elliemae/ds-tooltip": "3.3.1-rc.2",
|
|
58
|
+
"@elliemae/ds-utilities": "3.3.1-rc.2",
|
|
59
59
|
"styled-components": "^5.3.5",
|
|
60
60
|
"uid": "~2.0.0"
|
|
61
61
|
},
|