@elliemae/ds-square-indicator 3.15.0 → 3.16.0-next.10
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/DSSquareIndicator.js +7 -7
- package/dist/cjs/DSSquareIndicator.js.map +2 -2
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/package.json +7 -0
- package/dist/cjs/react-desc-prop-types.js +8 -8
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styled.js +1 -1
- package/dist/cjs/styled.js.map +1 -1
- package/dist/esm/DSSquareIndicator.js +4 -4
- package/dist/esm/DSSquareIndicator.js.map +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/package.json +7 -0
- package/dist/esm/react-desc-prop-types.js +1 -1
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styled.js +1 -1
- package/dist/esm/styled.js.map +1 -1
- package/dist/types/DSSquareIndicator.d.ts +2 -2
- package/dist/types/index.d.ts +1 -1
- package/dist/types/styled.d.ts +1 -1
- package/package.json +7 -6
|
@@ -33,15 +33,15 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
33
33
|
var import_react = require("react");
|
|
34
34
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
35
35
|
var import_ds_tooltip = require("@elliemae/ds-tooltip");
|
|
36
|
-
var
|
|
36
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
37
37
|
var import_uid = require("uid");
|
|
38
|
-
var import_react_desc_prop_types = require("./react-desc-prop-types");
|
|
39
|
-
var import_styled = require("./styled");
|
|
40
|
-
var import_constants = require("./constants");
|
|
38
|
+
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
39
|
+
var import_styled = require("./styled.js");
|
|
40
|
+
var import_constants = require("./constants.js");
|
|
41
41
|
const EmptyComp = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: props.children });
|
|
42
42
|
const DSSquareIndicator = (props) => {
|
|
43
|
-
const propsWithDefault = (0,
|
|
44
|
-
const { height, width, cols, rows, wrap, ...globalAttributes } = (0,
|
|
43
|
+
const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
|
|
44
|
+
const { height, width, cols, rows, wrap, ...globalAttributes } = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault);
|
|
45
45
|
const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference } = propsWithDefault;
|
|
46
46
|
const Wrapper = (0, import_react.useMemo)(() => withTooltip ? import_ds_tooltip.DSTooltipV3 : EmptyComp, [withTooltip]);
|
|
47
47
|
const uniqueId = (0, import_react.useMemo)(() => (0, import_uid.uid)(16), []);
|
|
@@ -91,6 +91,6 @@ const DSSquareIndicator = (props) => {
|
|
|
91
91
|
};
|
|
92
92
|
DSSquareIndicator.propTypes = import_react_desc_prop_types.SquareIndicatorPropTypes;
|
|
93
93
|
DSSquareIndicator.displayName = "DSSquareIndicator";
|
|
94
|
-
const DSSquareIndicatorWithSchema = (0,
|
|
94
|
+
const DSSquareIndicatorWithSchema = (0, import_ds_props_helpers.describe)(DSSquareIndicator);
|
|
95
95
|
DSSquareIndicatorWithSchema.propTypes = import_react_desc_prop_types.SquareIndicatorPropTypes;
|
|
96
96
|
//# sourceMappingURL=DSSquareIndicator.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSSquareIndicator.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-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADY0B;AAXjD,mBAA+B;AAC/B,qBAAqB;AACrB,wBAA4B;AAC5B,
|
|
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 type { DSSquareIndicatorT } from './react-desc-prop-types.js';\nimport { defaultProps, SquareIndicatorPropTypes } from './react-desc-prop-types.js';\nimport { StyledLineLeft, StyledLineTop, StyledLineRight, StyledLineBottom } from './styled.js';\nimport { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from './constants.js';\n\n// eslint-disable-next-line react/jsx-no-useless-fragment\nconst EmptyComp: typeof DSTooltipV3 = (props) => <>{props.children}</>;\n\nexport const DSSquareIndicator: React.ComponentType<DSSquareIndicatorT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSSquareIndicatorT.Props>>(props, defaultProps);\n // eslint-disable-next-line no-unused-vars\n const { height, width, cols, rows, wrap, ...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 const paddedCoordinate = useMemo(() => `calc(100% - ${sizeToWeight[size]})`, [size]);\n\n const hexColor = useMemo(() => colorToHex[color], [color]);\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 <svg\n width={sizeToPx[size]}\n height={sizeToPx[size]}\n style={{\n display: 'block',\n margin: 'auto',\n }}\n >\n <defs>\n <linearGradient id={`${uniqueId}-lg1`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"100%\">\n <stop offset=\"20%\" stopColor={`${hexColor}FF`} />\n <stop offset=\"80%\" stopColor={`${hexColor}00`} />\n </linearGradient>\n <linearGradient id={`${uniqueId}-lg2`} x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"0\">\n <stop offset=\"10%\" stopColor={`${hexColor}00`} />\n <stop offset=\"50%\" stopColor={`${hexColor}FF`} />\n </linearGradient>\n <linearGradient id={`${uniqueId}-lg3`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"100%\">\n <stop offset=\"10%\" stopColor={`${hexColor}00`} />\n <stop offset=\"50%\" stopColor={`${hexColor}FF`} />\n </linearGradient>\n <linearGradient id={`${uniqueId}-lg4`} x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"0\">\n <stop offset=\"50%\" stopColor={`${hexColor}FF`} />\n <stop offset=\"90%\" stopColor={`${hexColor}00`} />\n </linearGradient>\n <clipPath id={`${uniqueId}-lcp1`}>\n <rect x={sizeToWeight[size]} y={0} width=\"100%\" height={sizeToWeight[size]} />\n </clipPath>\n <clipPath id={`${uniqueId}-lcp2`}>\n <rect x={paddedCoordinate} y={sizeToWeight[size]} width={sizeToWeight[size]} height=\"100%\" />\n </clipPath>\n <clipPath id={`${uniqueId}-lcp3`}>\n <rect x={0} y={paddedCoordinate} width={paddedCoordinate} height={sizeToWeight[size]} />\n </clipPath>\n </defs>\n <StyledLineLeft size={size} fill={`url(#${uniqueId}-lg1)`} />\n <StyledLineTop size={size} fill={`url(#${uniqueId}-lg2)`} clipPath={`url(#${uniqueId}-lcp1)`} />\n <StyledLineRight size={size} fill={`url(#${uniqueId}-lg3)`} clipPath={`url(#${uniqueId}-lcp2)`} />\n <StyledLineBottom size={size} fill={`url(#${uniqueId}-lg4)`} clipPath={`url(#${uniqueId}-lcp3)`} />\n </svg>\n {text !== '' && showText && (\n <span style={{ color: colorToHex[color], fontSize: sizeToTextSize[size] }}>{text}</span>\n )}\n </Wrapper>\n </Grid>\n );\n};\n\nDSSquareIndicator.propTypes = SquareIndicatorPropTypes;\nDSSquareIndicator.displayName = 'DSSquareIndicator';\nexport const DSSquareIndicatorWithSchema = describe(DSSquareIndicator);\nDSSquareIndicatorWithSchema.propTypes = SquareIndicatorPropTypes;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADY0B;AAXjD,mBAA+B;AAC/B,qBAAqB;AACrB,wBAA4B;AAC5B,8BAA+E;AAC/E,iBAAoB;AAEpB,mCAAuD;AACvD,oBAAiF;AACjF,uBAAmE;AAGnE,MAAM,YAAgC,CAAC,UAAU,2EAAG,gBAAM,UAAS;AAE5D,MAAM,oBAAmE,CAAC,UAAU;AACzF,QAAM,uBAAmB,sDAAiE,OAAO,yCAAY;AAE7G,QAAM,EAAE,QAAQ,OAAO,MAAM,MAAM,SAAS,iBAAiB,QAAI,gDAAuB,gBAAgB;AAExG,QAAM,EAAE,MAAM,OAAO,MAAM,UAAU,aAAa,gCAAgC,IAAI;AAEtF,QAAM,cAA8B,sBAAQ,MAAO,cAAc,gCAAc,WAAY,CAAC,WAAW,CAAC;AAExG,QAAM,eAAW,sBAAQ,UAAM,gBAAI,EAAE,GAAG,CAAC,CAAC;AAC1C,QAAM,uBAAmB,sBAAQ,MAAM,eAAe,8BAAa,UAAU,CAAC,IAAI,CAAC;AAEnF,QAAM,eAAW,sBAAQ,MAAM,4BAAW,QAAQ,CAAC,KAAK,CAAC;AAEzD,SACE,4CAAC,uBAAK,QAAO,MAAK,gBAAe,UAAS,MAAK,UAAS,cAAY,QAAQ,cAAe,GAAG,kBAC5F,uDAAC,WAAQ,MAAY,WAAU,UAAS,0BAA0B,iCAChE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,0BAAS;AAAA,QAChB,QAAQ,0BAAS;AAAA,QACjB,OAAO;AAAA,UACL,SAAS;AAAA,UACT,QAAQ;AAAA,QACV;AAAA,QAEA;AAAA,uDAAC,UACC;AAAA,yDAAC,oBAAe,IAAI,GAAG,gBAAgB,IAAG,KAAI,IAAG,KAAI,IAAG,KAAI,IAAG,QAC7D;AAAA,0DAAC,UAAK,QAAO,OAAM,WAAW,GAAG,cAAc;AAAA,cAC/C,4CAAC,UAAK,QAAO,OAAM,WAAW,GAAG,cAAc;AAAA,eACjD;AAAA,YACA,6CAAC,oBAAe,IAAI,GAAG,gBAAgB,IAAG,KAAI,IAAG,KAAI,IAAG,QAAO,IAAG,KAChE;AAAA,0DAAC,UAAK,QAAO,OAAM,WAAW,GAAG,cAAc;AAAA,cAC/C,4CAAC,UAAK,QAAO,OAAM,WAAW,GAAG,cAAc;AAAA,eACjD;AAAA,YACA,6CAAC,oBAAe,IAAI,GAAG,gBAAgB,IAAG,KAAI,IAAG,KAAI,IAAG,KAAI,IAAG,QAC7D;AAAA,0DAAC,UAAK,QAAO,OAAM,WAAW,GAAG,cAAc;AAAA,cAC/C,4CAAC,UAAK,QAAO,OAAM,WAAW,GAAG,cAAc;AAAA,eACjD;AAAA,YACA,6CAAC,oBAAe,IAAI,GAAG,gBAAgB,IAAG,KAAI,IAAG,KAAI,IAAG,QAAO,IAAG,KAChE;AAAA,0DAAC,UAAK,QAAO,OAAM,WAAW,GAAG,cAAc;AAAA,cAC/C,4CAAC,UAAK,QAAO,OAAM,WAAW,GAAG,cAAc;AAAA,eACjD;AAAA,YACA,4CAAC,cAAS,IAAI,GAAG,iBACf,sDAAC,UAAK,GAAG,8BAAa,OAAO,GAAG,GAAG,OAAM,QAAO,QAAQ,8BAAa,OAAO,GAC9E;AAAA,YACA,4CAAC,cAAS,IAAI,GAAG,iBACf,sDAAC,UAAK,GAAG,kBAAkB,GAAG,8BAAa,OAAO,OAAO,8BAAa,OAAO,QAAO,QAAO,GAC7F;AAAA,YACA,4CAAC,cAAS,IAAI,GAAG,iBACf,sDAAC,UAAK,GAAG,GAAG,GAAG,kBAAkB,OAAO,kBAAkB,QAAQ,8BAAa,OAAO,GACxF;AAAA,aACF;AAAA,UACA,4CAAC,gCAAe,MAAY,MAAM,QAAQ,iBAAiB;AAAA,UAC3D,4CAAC,+BAAc,MAAY,MAAM,QAAQ,iBAAiB,UAAU,QAAQ,kBAAkB;AAAA,UAC9F,4CAAC,iCAAgB,MAAY,MAAM,QAAQ,iBAAiB,UAAU,QAAQ,kBAAkB;AAAA,UAChG,4CAAC,kCAAiB,MAAY,MAAM,QAAQ,iBAAiB,UAAU,QAAQ,kBAAkB;AAAA;AAAA;AAAA,IACnG;AAAA,IACC,SAAS,MAAM,YACd,4CAAC,UAAK,OAAO,EAAE,OAAO,4BAAW,QAAQ,UAAU,gCAAe,MAAM,GAAI,gBAAK;AAAA,KAErF,GACF;AAEJ;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AACzB,MAAM,kCAA8B,kCAAS,iBAAiB;AACrE,4BAA4B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -29,5 +29,5 @@ __export(src_exports, {
|
|
|
29
29
|
});
|
|
30
30
|
module.exports = __toCommonJS(src_exports);
|
|
31
31
|
var React = __toESM(require("react"));
|
|
32
|
-
var import_DSSquareIndicator = require("./DSSquareIndicator");
|
|
32
|
+
var import_DSSquareIndicator = require("./DSSquareIndicator.js");
|
|
33
33
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export { DSSquareIndicator, DSSquareIndicatorWithSchema } from './DSSquareIndicator';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
4
|
+
"sourcesContent": ["export { DSSquareIndicator, DSSquareIndicatorWithSchema } from './DSSquareIndicator.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAA+D;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -29,15 +29,15 @@ __export(react_desc_prop_types_exports, {
|
|
|
29
29
|
});
|
|
30
30
|
module.exports = __toCommonJS(react_desc_prop_types_exports);
|
|
31
31
|
var React = __toESM(require("react"));
|
|
32
|
-
var
|
|
32
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
33
33
|
const SquareIndicatorPropTypes = {
|
|
34
|
-
...
|
|
35
|
-
size:
|
|
36
|
-
color:
|
|
37
|
-
text:
|
|
38
|
-
showText:
|
|
39
|
-
withTooltip:
|
|
40
|
-
tooltipStartPlacementPreference:
|
|
34
|
+
...import_ds_props_helpers.globalAttributesPropTypes,
|
|
35
|
+
size: import_ds_props_helpers.PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl"]).description("Size of the indicator").defaultValue("m"),
|
|
36
|
+
color: import_ds_props_helpers.PropTypes.oneOf(["light", "dark"]).description("Color mode for the indicator").defaultValue("dark"),
|
|
37
|
+
text: import_ds_props_helpers.PropTypes.string.description("Optional text to show under the indicator").defaultValue(""),
|
|
38
|
+
showText: import_ds_props_helpers.PropTypes.bool.description("Whether to show the optional text or not").defaultValue(true),
|
|
39
|
+
withTooltip: import_ds_props_helpers.PropTypes.bool.description("Whether to include a tooltip that shows the optional text on hover").defaultValue(false),
|
|
40
|
+
tooltipStartPlacementPreference: import_ds_props_helpers.PropTypes.oneOf([
|
|
41
41
|
"top-start",
|
|
42
42
|
"top",
|
|
43
43
|
"top-end",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSSquareIndicatorT {\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 SquareIndicatorPropTypes = {\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: DSSquareIndicatorT.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;ADEvB,8BAAqD;AA0B9C,MAAM,2BAA2B;AAAA,EACtC,GAAG;AAAA,EACH,MAAM,kCAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAAE,YAAY,uBAAuB,EAAE,aAAa,GAAG;AAAA,EAC/G,OAAO,kCAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EAAE,YAAY,8BAA8B,EAAE,aAAa,MAAM;AAAA,EACzG,MAAM,kCAAU,OAAO,YAAY,2CAA2C,EAAE,aAAa,EAAE;AAAA,EAC/F,UAAU,kCAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,IAAI;AAAA,EAClG,aAAa,kCAAU,KACpB,YAAY,oEAAoE,EAChF,aAAa,KAAK;AAAA,EACrB,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,EACF,CAAC,EACE,YAAY,4CAA4C,EACxD,aAAa,QAAQ;AAC1B;AAEO,MAAM,eAAyC;AAAA,EACpD,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/styled.js
CHANGED
|
@@ -32,7 +32,7 @@ __export(styled_exports, {
|
|
|
32
32
|
module.exports = __toCommonJS(styled_exports);
|
|
33
33
|
var React = __toESM(require("react"));
|
|
34
34
|
var import_ds_system = require("@elliemae/ds-system");
|
|
35
|
-
var import_constants = require("./constants");
|
|
35
|
+
var import_constants = require("./constants.js");
|
|
36
36
|
const lineLeftAnimation = import_ds_system.kfrm`
|
|
37
37
|
0% {
|
|
38
38
|
y: 100%;
|
package/dist/cjs/styled.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styled.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { kfrm, styled } from '@elliemae/ds-system';\nimport type { DSSquareIndicatorT } from './react-desc-prop-types';\nimport { sizeToWeight } from './constants';\n\ninterface RectProps {\n size: Required<DSSquareIndicatorT.Props>['size'];\n}\n\nconst lineLeftAnimation = kfrm`\n 0% {\n y: 100%;\n height: 100%;\n }\n 12.5%, 50% {\n y: 0;\n height: 100%;\n }\n 62.5%, 100% {\n y: -100%;\n height: 100%;\n }\n`;\n\nconst lineTopAnimation = kfrm`\n 0% {\n x: -100%;\n width: 0%;\n }\n 25%, 50% {\n x: -100%;\n width: 200%;\n }\n 75%, 100% {\n x: 100%;\n width: 200%;\n }\n`;\n\nconst lineRightAnimation = kfrm`\n 0%, 12.5% {\n y: -100%;\n height: 0%;\n }\n 37.5%, 62.5% {\n y: -100%;\n height: 200%;\n }\n 87.5%, 100% {\n y: 100%;\n height: 200%;\n }\n`;\n\nconst lineBottomAnimation = kfrm`\n 0%, 25% {\n x: 200%;\n width: 200%;\n }\n 50%, 75% {\n x: 0%;\n width: 200%;\n }\n 100% {\n x: -200%;\n width: 200%;\n }\n`;\n\nexport const StyledLineLeft = styled.rect<RectProps>`\n x: 0;\n y: 0%;\n width: ${({ size }) => sizeToWeight[size]};\n height: 100%;\n animation: ${lineLeftAnimation} 2.5s linear 0s infinite;\n`;\n\nexport const StyledLineTop = styled.rect<RectProps>`\n x: -100%;\n y: 0;\n width: 200%;\n height: ${({ size }) => sizeToWeight[size]};\n animation: ${lineTopAnimation} 2.5s linear 0s infinite;\n`;\n\nexport const StyledLineRight = styled.rect<RectProps>`\n x: calc(100% - ${({ size }) => sizeToWeight[size]});\n y: -100%;\n width: ${({ size }) => sizeToWeight[size]};\n height: 200%;\n animation: ${lineRightAnimation} 2.5s linear 0s infinite;\n`;\n\nexport const StyledLineBottom = styled.rect<RectProps>`\n x: 0%;\n y: calc(100% - ${({ size }) => sizeToWeight[size]});\n width: 200%;\n height: ${({ size }) => sizeToWeight[size]};\n animation: ${lineBottomAnimation} 2.5s linear 0s infinite;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
4
|
+
"sourcesContent": ["import { kfrm, styled } from '@elliemae/ds-system';\nimport type { DSSquareIndicatorT } from './react-desc-prop-types.js';\nimport { sizeToWeight } from './constants.js';\n\ninterface RectProps {\n size: Required<DSSquareIndicatorT.Props>['size'];\n}\n\nconst lineLeftAnimation = kfrm`\n 0% {\n y: 100%;\n height: 100%;\n }\n 12.5%, 50% {\n y: 0;\n height: 100%;\n }\n 62.5%, 100% {\n y: -100%;\n height: 100%;\n }\n`;\n\nconst lineTopAnimation = kfrm`\n 0% {\n x: -100%;\n width: 0%;\n }\n 25%, 50% {\n x: -100%;\n width: 200%;\n }\n 75%, 100% {\n x: 100%;\n width: 200%;\n }\n`;\n\nconst lineRightAnimation = kfrm`\n 0%, 12.5% {\n y: -100%;\n height: 0%;\n }\n 37.5%, 62.5% {\n y: -100%;\n height: 200%;\n }\n 87.5%, 100% {\n y: 100%;\n height: 200%;\n }\n`;\n\nconst lineBottomAnimation = kfrm`\n 0%, 25% {\n x: 200%;\n width: 200%;\n }\n 50%, 75% {\n x: 0%;\n width: 200%;\n }\n 100% {\n x: -200%;\n width: 200%;\n }\n`;\n\nexport const StyledLineLeft = styled.rect<RectProps>`\n x: 0;\n y: 0%;\n width: ${({ size }) => sizeToWeight[size]};\n height: 100%;\n animation: ${lineLeftAnimation} 2.5s linear 0s infinite;\n`;\n\nexport const StyledLineTop = styled.rect<RectProps>`\n x: -100%;\n y: 0;\n width: 200%;\n height: ${({ size }) => sizeToWeight[size]};\n animation: ${lineTopAnimation} 2.5s linear 0s infinite;\n`;\n\nexport const StyledLineRight = styled.rect<RectProps>`\n x: calc(100% - ${({ size }) => sizeToWeight[size]});\n y: -100%;\n width: ${({ size }) => sizeToWeight[size]};\n height: 200%;\n animation: ${lineRightAnimation} 2.5s linear 0s infinite;\n`;\n\nexport const StyledLineBottom = styled.rect<RectProps>`\n x: 0%;\n y: calc(100% - ${({ size }) => sizeToWeight[size]});\n width: 200%;\n height: ${({ size }) => sizeToWeight[size]};\n animation: ${lineBottomAnimation} 2.5s linear 0s infinite;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA6B;AAE7B,uBAA6B;AAM7B,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe1B,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAezB,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe3B,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAerB,MAAM,iBAAiB,wBAAO;AAAA;AAAA;AAAA,WAG1B,CAAC,EAAE,KAAK,MAAM,8BAAa;AAAA;AAAA,eAEvB;AAAA;AAGR,MAAM,gBAAgB,wBAAO;AAAA;AAAA;AAAA;AAAA,YAIxB,CAAC,EAAE,KAAK,MAAM,8BAAa;AAAA,eACxB;AAAA;AAGR,MAAM,kBAAkB,wBAAO;AAAA,mBACnB,CAAC,EAAE,KAAK,MAAM,8BAAa;AAAA;AAAA,WAEnC,CAAC,EAAE,KAAK,MAAM,8BAAa;AAAA;AAAA,eAEvB;AAAA;AAGR,MAAM,mBAAmB,wBAAO;AAAA;AAAA,mBAEpB,CAAC,EAAE,KAAK,MAAM,8BAAa;AAAA;AAAA,YAElC,CAAC,EAAE,KAAK,MAAM,8BAAa;AAAA,eACxB;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,11 +3,11 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { useMemo } from "react";
|
|
4
4
|
import { Grid } from "@elliemae/ds-grid";
|
|
5
5
|
import { DSTooltipV3 } from "@elliemae/ds-tooltip";
|
|
6
|
-
import { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from "@elliemae/ds-
|
|
6
|
+
import { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
|
|
7
7
|
import { uid } from "uid";
|
|
8
|
-
import { defaultProps, SquareIndicatorPropTypes } from "./react-desc-prop-types";
|
|
9
|
-
import { StyledLineLeft, StyledLineTop, StyledLineRight, StyledLineBottom } from "./styled";
|
|
10
|
-
import { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from "./constants";
|
|
8
|
+
import { defaultProps, SquareIndicatorPropTypes } from "./react-desc-prop-types.js";
|
|
9
|
+
import { StyledLineLeft, StyledLineTop, StyledLineRight, StyledLineBottom } from "./styled.js";
|
|
10
|
+
import { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from "./constants.js";
|
|
11
11
|
const EmptyComp = (props) => /* @__PURE__ */ jsx(Fragment, { children: props.children });
|
|
12
12
|
const DSSquareIndicator = (props) => {
|
|
13
13
|
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSSquareIndicator.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-
|
|
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 type { DSSquareIndicatorT } from './react-desc-prop-types.js';\nimport { defaultProps, SquareIndicatorPropTypes } from './react-desc-prop-types.js';\nimport { StyledLineLeft, StyledLineTop, StyledLineRight, StyledLineBottom } from './styled.js';\nimport { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from './constants.js';\n\n// eslint-disable-next-line react/jsx-no-useless-fragment\nconst EmptyComp: typeof DSTooltipV3 = (props) => <>{props.children}</>;\n\nexport const DSSquareIndicator: React.ComponentType<DSSquareIndicatorT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSSquareIndicatorT.Props>>(props, defaultProps);\n // eslint-disable-next-line no-unused-vars\n const { height, width, cols, rows, wrap, ...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 const paddedCoordinate = useMemo(() => `calc(100% - ${sizeToWeight[size]})`, [size]);\n\n const hexColor = useMemo(() => colorToHex[color], [color]);\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 <svg\n width={sizeToPx[size]}\n height={sizeToPx[size]}\n style={{\n display: 'block',\n margin: 'auto',\n }}\n >\n <defs>\n <linearGradient id={`${uniqueId}-lg1`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"100%\">\n <stop offset=\"20%\" stopColor={`${hexColor}FF`} />\n <stop offset=\"80%\" stopColor={`${hexColor}00`} />\n </linearGradient>\n <linearGradient id={`${uniqueId}-lg2`} x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"0\">\n <stop offset=\"10%\" stopColor={`${hexColor}00`} />\n <stop offset=\"50%\" stopColor={`${hexColor}FF`} />\n </linearGradient>\n <linearGradient id={`${uniqueId}-lg3`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"100%\">\n <stop offset=\"10%\" stopColor={`${hexColor}00`} />\n <stop offset=\"50%\" stopColor={`${hexColor}FF`} />\n </linearGradient>\n <linearGradient id={`${uniqueId}-lg4`} x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"0\">\n <stop offset=\"50%\" stopColor={`${hexColor}FF`} />\n <stop offset=\"90%\" stopColor={`${hexColor}00`} />\n </linearGradient>\n <clipPath id={`${uniqueId}-lcp1`}>\n <rect x={sizeToWeight[size]} y={0} width=\"100%\" height={sizeToWeight[size]} />\n </clipPath>\n <clipPath id={`${uniqueId}-lcp2`}>\n <rect x={paddedCoordinate} y={sizeToWeight[size]} width={sizeToWeight[size]} height=\"100%\" />\n </clipPath>\n <clipPath id={`${uniqueId}-lcp3`}>\n <rect x={0} y={paddedCoordinate} width={paddedCoordinate} height={sizeToWeight[size]} />\n </clipPath>\n </defs>\n <StyledLineLeft size={size} fill={`url(#${uniqueId}-lg1)`} />\n <StyledLineTop size={size} fill={`url(#${uniqueId}-lg2)`} clipPath={`url(#${uniqueId}-lcp1)`} />\n <StyledLineRight size={size} fill={`url(#${uniqueId}-lg3)`} clipPath={`url(#${uniqueId}-lcp2)`} />\n <StyledLineBottom size={size} fill={`url(#${uniqueId}-lg4)`} clipPath={`url(#${uniqueId}-lcp3)`} />\n </svg>\n {text !== '' && showText && (\n <span style={{ color: colorToHex[color], fontSize: sizeToTextSize[size] }}>{text}</span>\n )}\n </Wrapper>\n </Grid>\n );\n};\n\nDSSquareIndicator.propTypes = SquareIndicatorPropTypes;\nDSSquareIndicator.displayName = 'DSSquareIndicator';\nexport const DSSquareIndicatorWithSchema = describe(DSSquareIndicator);\nDSSquareIndicatorWithSchema.propTypes = SquareIndicatorPropTypes;\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { DSSquareIndicator, DSSquareIndicatorWithSchema } from "./DSSquareIndicator";
|
|
2
|
+
import { DSSquareIndicator, DSSquareIndicatorWithSchema } from "./DSSquareIndicator.js";
|
|
3
3
|
export {
|
|
4
4
|
DSSquareIndicator,
|
|
5
5
|
DSSquareIndicatorWithSchema
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSSquareIndicator, DSSquareIndicatorWithSchema } from './DSSquareIndicator';\n"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSSquareIndicator, DSSquareIndicatorWithSchema } from './DSSquareIndicator.js';\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,mBAAmB,mCAAmC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { PropTypes, globalAttributesPropTypes } from "@elliemae/ds-
|
|
2
|
+
import { PropTypes, globalAttributesPropTypes } from "@elliemae/ds-props-helpers";
|
|
3
3
|
const SquareIndicatorPropTypes = {
|
|
4
4
|
...globalAttributesPropTypes,
|
|
5
5
|
size: PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl"]).description("Size of the indicator").defaultValue("m"),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/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-
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSSquareIndicatorT {\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 SquareIndicatorPropTypes = {\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: DSSquareIndicatorT.Props = {\n size: 'm',\n color: 'dark',\n text: '',\n showText: true,\n withTooltip: false,\n tooltipStartPlacementPreference: 'bottom',\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,iCAAiC;AA0B9C,MAAM,2BAA2B;AAAA,EACtC,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,eAAyC;AAAA,EACpD,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/styled.js
CHANGED
package/dist/esm/styled.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { kfrm, styled } from '@elliemae/ds-system';\nimport type { DSSquareIndicatorT } from './react-desc-prop-types';\nimport { sizeToWeight } from './constants';\n\ninterface RectProps {\n size: Required<DSSquareIndicatorT.Props>['size'];\n}\n\nconst lineLeftAnimation = kfrm`\n 0% {\n y: 100%;\n height: 100%;\n }\n 12.5%, 50% {\n y: 0;\n height: 100%;\n }\n 62.5%, 100% {\n y: -100%;\n height: 100%;\n }\n`;\n\nconst lineTopAnimation = kfrm`\n 0% {\n x: -100%;\n width: 0%;\n }\n 25%, 50% {\n x: -100%;\n width: 200%;\n }\n 75%, 100% {\n x: 100%;\n width: 200%;\n }\n`;\n\nconst lineRightAnimation = kfrm`\n 0%, 12.5% {\n y: -100%;\n height: 0%;\n }\n 37.5%, 62.5% {\n y: -100%;\n height: 200%;\n }\n 87.5%, 100% {\n y: 100%;\n height: 200%;\n }\n`;\n\nconst lineBottomAnimation = kfrm`\n 0%, 25% {\n x: 200%;\n width: 200%;\n }\n 50%, 75% {\n x: 0%;\n width: 200%;\n }\n 100% {\n x: -200%;\n width: 200%;\n }\n`;\n\nexport const StyledLineLeft = styled.rect<RectProps>`\n x: 0;\n y: 0%;\n width: ${({ size }) => sizeToWeight[size]};\n height: 100%;\n animation: ${lineLeftAnimation} 2.5s linear 0s infinite;\n`;\n\nexport const StyledLineTop = styled.rect<RectProps>`\n x: -100%;\n y: 0;\n width: 200%;\n height: ${({ size }) => sizeToWeight[size]};\n animation: ${lineTopAnimation} 2.5s linear 0s infinite;\n`;\n\nexport const StyledLineRight = styled.rect<RectProps>`\n x: calc(100% - ${({ size }) => sizeToWeight[size]});\n y: -100%;\n width: ${({ size }) => sizeToWeight[size]};\n height: 200%;\n animation: ${lineRightAnimation} 2.5s linear 0s infinite;\n`;\n\nexport const StyledLineBottom = styled.rect<RectProps>`\n x: 0%;\n y: calc(100% - ${({ size }) => sizeToWeight[size]});\n width: 200%;\n height: ${({ size }) => sizeToWeight[size]};\n animation: ${lineBottomAnimation} 2.5s linear 0s infinite;\n`;\n"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { kfrm, styled } from '@elliemae/ds-system';\nimport type { DSSquareIndicatorT } from './react-desc-prop-types.js';\nimport { sizeToWeight } from './constants.js';\n\ninterface RectProps {\n size: Required<DSSquareIndicatorT.Props>['size'];\n}\n\nconst lineLeftAnimation = kfrm`\n 0% {\n y: 100%;\n height: 100%;\n }\n 12.5%, 50% {\n y: 0;\n height: 100%;\n }\n 62.5%, 100% {\n y: -100%;\n height: 100%;\n }\n`;\n\nconst lineTopAnimation = kfrm`\n 0% {\n x: -100%;\n width: 0%;\n }\n 25%, 50% {\n x: -100%;\n width: 200%;\n }\n 75%, 100% {\n x: 100%;\n width: 200%;\n }\n`;\n\nconst lineRightAnimation = kfrm`\n 0%, 12.5% {\n y: -100%;\n height: 0%;\n }\n 37.5%, 62.5% {\n y: -100%;\n height: 200%;\n }\n 87.5%, 100% {\n y: 100%;\n height: 200%;\n }\n`;\n\nconst lineBottomAnimation = kfrm`\n 0%, 25% {\n x: 200%;\n width: 200%;\n }\n 50%, 75% {\n x: 0%;\n width: 200%;\n }\n 100% {\n x: -200%;\n width: 200%;\n }\n`;\n\nexport const StyledLineLeft = styled.rect<RectProps>`\n x: 0;\n y: 0%;\n width: ${({ size }) => sizeToWeight[size]};\n height: 100%;\n animation: ${lineLeftAnimation} 2.5s linear 0s infinite;\n`;\n\nexport const StyledLineTop = styled.rect<RectProps>`\n x: -100%;\n y: 0;\n width: 200%;\n height: ${({ size }) => sizeToWeight[size]};\n animation: ${lineTopAnimation} 2.5s linear 0s infinite;\n`;\n\nexport const StyledLineRight = styled.rect<RectProps>`\n x: calc(100% - ${({ size }) => sizeToWeight[size]});\n y: -100%;\n width: ${({ size }) => sizeToWeight[size]};\n height: 200%;\n animation: ${lineRightAnimation} 2.5s linear 0s infinite;\n`;\n\nexport const StyledLineBottom = styled.rect<RectProps>`\n x: 0%;\n y: calc(100% - ${({ size }) => sizeToWeight[size]});\n width: 200%;\n height: ${({ size }) => sizeToWeight[size]};\n animation: ${lineBottomAnimation} 2.5s linear 0s infinite;\n`;\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,MAAM,cAAc;AAE7B,SAAS,oBAAoB;AAM7B,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe1B,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAezB,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe3B,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAerB,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA,WAG1B,CAAC,EAAE,KAAK,MAAM,aAAa;AAAA;AAAA,eAEvB;AAAA;AAGR,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA,YAIxB,CAAC,EAAE,KAAK,MAAM,aAAa;AAAA,eACxB;AAAA;AAGR,MAAM,kBAAkB,OAAO;AAAA,mBACnB,CAAC,EAAE,KAAK,MAAM,aAAa;AAAA;AAAA,WAEnC,CAAC,EAAE,KAAK,MAAM,aAAa;AAAA;AAAA,eAEvB;AAAA;AAGR,MAAM,mBAAmB,OAAO;AAAA;AAAA,mBAEpB,CAAC,EAAE,KAAK,MAAM,aAAa;AAAA;AAAA,YAElC,CAAC,EAAE,KAAK,MAAM,aAAa;AAAA,eACxB;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { DSSquareIndicatorT } from './react-desc-prop-types';
|
|
2
|
+
import type { DSSquareIndicatorT } from './react-desc-prop-types.js';
|
|
3
3
|
export declare const DSSquareIndicator: React.ComponentType<DSSquareIndicatorT.Props>;
|
|
4
|
-
export declare const DSSquareIndicatorWithSchema: import("@elliemae/ds-
|
|
4
|
+
export declare const DSSquareIndicatorWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSSquareIndicatorT.Props>;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { DSSquareIndicator, DSSquareIndicatorWithSchema } from './DSSquareIndicator';
|
|
1
|
+
export { DSSquareIndicator, DSSquareIndicatorWithSchema } from './DSSquareIndicator.js';
|
package/dist/types/styled.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-square-indicator",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.16.0-next.10",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Indeterminate Progress Indicator",
|
|
6
6
|
"files": [
|
|
@@ -45,10 +45,11 @@
|
|
|
45
45
|
"dependencies": {
|
|
46
46
|
"styled-components": "~5.3.6",
|
|
47
47
|
"uid": "^2.0.0",
|
|
48
|
-
"@elliemae/ds-grid": "3.
|
|
49
|
-
"@elliemae/ds-
|
|
50
|
-
"@elliemae/ds-
|
|
51
|
-
"@elliemae/ds-
|
|
48
|
+
"@elliemae/ds-grid": "3.16.0-next.10",
|
|
49
|
+
"@elliemae/ds-props-helpers": "3.16.0-next.10",
|
|
50
|
+
"@elliemae/ds-system": "3.16.0-next.10",
|
|
51
|
+
"@elliemae/ds-tooltip": "3.16.0-next.10",
|
|
52
|
+
"@elliemae/ds-utilities": "3.16.0-next.10"
|
|
52
53
|
},
|
|
53
54
|
"peerDependencies": {
|
|
54
55
|
"react": "^17.0.2",
|
|
@@ -65,7 +66,7 @@
|
|
|
65
66
|
"eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../.eslintrc.js' src/",
|
|
66
67
|
"dts": "node ../../scripts/dts.mjs",
|
|
67
68
|
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
|
|
68
|
-
"dev:build": "pnpm --filter {.}... build
|
|
69
|
+
"dev:build": "pnpm --filter {.}... build",
|
|
69
70
|
"dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
|
|
70
71
|
"checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
71
72
|
}
|