@elliemae/ds-square-indicator 2.3.0-next.2 → 2.3.0-next.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/DSSquareIndicator.js +142 -76
- package/cjs/constants.js +37 -0
- package/cjs/react-desc-prop-types.js +31 -9
- package/cjs/styled.js +86 -0
- package/esm/DSSquareIndicator.js +141 -76
- package/esm/constants.js +30 -0
- package/esm/react-desc-prop-types.js +21 -4
- package/esm/styled.js +74 -0
- package/package.json +12 -3
- package/types/DSSquareIndicator.d.ts +1 -6
- package/types/constants.d.ts +28 -0
- package/types/react-desc-prop-types.d.ts +3 -21
- package/types/styled.d.ts +10 -0
package/cjs/DSSquareIndicator.js
CHANGED
|
@@ -2,101 +2,167 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
10
|
+
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
5
11
|
var _jsx2 = require('@babel/runtime/helpers/jsx');
|
|
6
|
-
require('react');
|
|
12
|
+
var react = require('react');
|
|
7
13
|
var dsGrid = require('@elliemae/ds-grid');
|
|
8
14
|
var dsTooltip = require('@elliemae/ds-tooltip');
|
|
9
|
-
var
|
|
15
|
+
var dsPropsHelpers = require('@elliemae/ds-props-helpers');
|
|
16
|
+
var uid = require('uid');
|
|
10
17
|
var reactDescPropTypes = require('./react-desc-prop-types.js');
|
|
18
|
+
var styled = require('./styled.js');
|
|
19
|
+
var constants = require('./constants.js');
|
|
11
20
|
var jsxRuntime = require('react/jsx-runtime');
|
|
12
21
|
|
|
13
22
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
14
23
|
|
|
24
|
+
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
15
25
|
var _jsx2__default = /*#__PURE__*/_interopDefaultLegacy(_jsx2);
|
|
16
26
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
const colorToHex = {
|
|
34
|
-
light: '#FFFFFF',
|
|
35
|
-
dark: '#0F364A'
|
|
36
|
-
};
|
|
37
|
-
const sizeToTextSize = {
|
|
38
|
-
xs: '12px',
|
|
39
|
-
s: '12px',
|
|
40
|
-
m: '12px',
|
|
41
|
-
l: '13px',
|
|
42
|
-
xl: '14px',
|
|
43
|
-
xxl: '16px'
|
|
44
|
-
};
|
|
45
|
-
const DSSquareIndicator = _ref => {
|
|
46
|
-
let {
|
|
47
|
-
size = 'm',
|
|
48
|
-
color = 'dark',
|
|
49
|
-
text = '',
|
|
50
|
-
showText = true,
|
|
51
|
-
withTooltip = false,
|
|
52
|
-
tooltipStartPlacementPreference = 'bottom',
|
|
53
|
-
__duration = 2.5
|
|
54
|
-
} = _ref;
|
|
55
|
-
const Wrapper = withTooltip ? dsTooltip.DSTooltipV3 : _ref2 => {
|
|
27
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
28
|
+
|
|
29
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
30
|
+
const DSSquareIndicator = props => {
|
|
31
|
+
const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, reactDescPropTypes.defaultProps);
|
|
32
|
+
const globalAttributes = dsPropsHelpers.useGetGlobalAttributes(propsWithDefault);
|
|
33
|
+
const {
|
|
34
|
+
size,
|
|
35
|
+
color,
|
|
36
|
+
text,
|
|
37
|
+
showText,
|
|
38
|
+
withTooltip,
|
|
39
|
+
tooltipStartPlacementPreference,
|
|
40
|
+
__duration
|
|
41
|
+
} = propsWithDefault;
|
|
42
|
+
const Wrapper = react.useMemo(() => withTooltip ? dsTooltip.DSTooltipV3 : _ref => {
|
|
56
43
|
let {
|
|
57
44
|
children
|
|
58
|
-
} =
|
|
45
|
+
} = _ref;
|
|
59
46
|
return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
60
47
|
children: children
|
|
61
48
|
});
|
|
62
|
-
};
|
|
63
|
-
|
|
49
|
+
}, [withTooltip]);
|
|
50
|
+
const uniqueId = react.useMemo(() => uid.uid(16), []);
|
|
51
|
+
const paddedCoordinate = react.useMemo(() => "calc(100% - ".concat(constants.sizeToWeight[size], ")"), [size]);
|
|
52
|
+
const hexColor = react.useMemo(() => constants.colorToHex[color], [color]);
|
|
53
|
+
return /*#__PURE__*/jsxRuntime.jsx(dsGrid.Grid, _objectSpread(_objectSpread({
|
|
64
54
|
gutter: "xs",
|
|
65
55
|
justifyContent: "center",
|
|
66
56
|
role: "status"
|
|
67
|
-
},
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
57
|
+
}, globalAttributes), {}, {
|
|
58
|
+
children: /*#__PURE__*/_jsx2__default["default"](Wrapper, {
|
|
59
|
+
text: text,
|
|
60
|
+
textAlign: "center",
|
|
61
|
+
startPlacementPreference: tooltipStartPlacementPreference
|
|
62
|
+
}, void 0, /*#__PURE__*/_jsx2__default["default"]("svg", {
|
|
63
|
+
width: constants.sizeToPx[size],
|
|
64
|
+
height: constants.sizeToPx[size],
|
|
65
|
+
style: {
|
|
66
|
+
display: 'block',
|
|
67
|
+
margin: 'auto'
|
|
68
|
+
}
|
|
69
|
+
}, void 0, /*#__PURE__*/_jsx2__default["default"]("defs", {}, void 0, /*#__PURE__*/_jsx2__default["default"]("linearGradient", {
|
|
70
|
+
id: "".concat(uniqueId, "-lg1"),
|
|
71
|
+
x1: "0",
|
|
72
|
+
y1: "0",
|
|
73
|
+
x2: "0",
|
|
74
|
+
y2: "100%"
|
|
75
|
+
}, void 0, /*#__PURE__*/_jsx2__default["default"]("stop", {
|
|
76
|
+
offset: "20%",
|
|
77
|
+
stopColor: "".concat(hexColor, "FF")
|
|
78
|
+
}), /*#__PURE__*/_jsx2__default["default"]("stop", {
|
|
79
|
+
offset: "80%",
|
|
80
|
+
stopColor: "".concat(hexColor, "00")
|
|
81
|
+
})), /*#__PURE__*/_jsx2__default["default"]("linearGradient", {
|
|
82
|
+
id: "".concat(uniqueId, "-lg2"),
|
|
83
|
+
x1: "0",
|
|
84
|
+
y1: "0",
|
|
85
|
+
x2: "100%",
|
|
86
|
+
y2: "0"
|
|
87
|
+
}, void 0, /*#__PURE__*/_jsx2__default["default"]("stop", {
|
|
88
|
+
offset: "10%",
|
|
89
|
+
stopColor: "".concat(hexColor, "00")
|
|
90
|
+
}), /*#__PURE__*/_jsx2__default["default"]("stop", {
|
|
91
|
+
offset: "50%",
|
|
92
|
+
stopColor: "".concat(hexColor, "FF")
|
|
93
|
+
})), /*#__PURE__*/_jsx2__default["default"]("linearGradient", {
|
|
94
|
+
id: "".concat(uniqueId, "-lg3"),
|
|
95
|
+
x1: "0",
|
|
96
|
+
y1: "0",
|
|
97
|
+
x2: "0",
|
|
98
|
+
y2: "100%"
|
|
99
|
+
}, void 0, /*#__PURE__*/_jsx2__default["default"]("stop", {
|
|
100
|
+
offset: "10%",
|
|
101
|
+
stopColor: "".concat(hexColor, "00")
|
|
102
|
+
}), /*#__PURE__*/_jsx2__default["default"]("stop", {
|
|
103
|
+
offset: "50%",
|
|
104
|
+
stopColor: "".concat(hexColor, "FF")
|
|
105
|
+
})), /*#__PURE__*/_jsx2__default["default"]("linearGradient", {
|
|
106
|
+
id: "".concat(uniqueId, "-lg4"),
|
|
107
|
+
x1: "0",
|
|
108
|
+
y1: "0",
|
|
109
|
+
x2: "100%",
|
|
110
|
+
y2: "0"
|
|
111
|
+
}, void 0, /*#__PURE__*/_jsx2__default["default"]("stop", {
|
|
112
|
+
offset: "50%",
|
|
113
|
+
stopColor: "".concat(hexColor, "FF")
|
|
114
|
+
}), /*#__PURE__*/_jsx2__default["default"]("stop", {
|
|
115
|
+
offset: "90%",
|
|
116
|
+
stopColor: "".concat(hexColor, "00")
|
|
117
|
+
})), /*#__PURE__*/_jsx2__default["default"]("clipPath", {
|
|
118
|
+
id: "".concat(uniqueId, "-lcp1")
|
|
119
|
+
}, void 0, /*#__PURE__*/_jsx2__default["default"]("rect", {
|
|
120
|
+
x: constants.sizeToWeight[size],
|
|
121
|
+
y: 0,
|
|
122
|
+
width: "100%",
|
|
123
|
+
height: constants.sizeToWeight[size]
|
|
124
|
+
})), /*#__PURE__*/_jsx2__default["default"]("clipPath", {
|
|
125
|
+
id: "".concat(uniqueId, "-lcp2")
|
|
126
|
+
}, void 0, /*#__PURE__*/_jsx2__default["default"]("rect", {
|
|
127
|
+
x: paddedCoordinate,
|
|
128
|
+
y: constants.sizeToWeight[size],
|
|
129
|
+
width: constants.sizeToWeight[size],
|
|
130
|
+
height: "100%"
|
|
131
|
+
})), /*#__PURE__*/_jsx2__default["default"]("clipPath", {
|
|
132
|
+
id: "".concat(uniqueId, "-lcp3")
|
|
133
|
+
}, void 0, /*#__PURE__*/_jsx2__default["default"]("rect", {
|
|
134
|
+
x: 0,
|
|
135
|
+
y: paddedCoordinate,
|
|
136
|
+
width: paddedCoordinate,
|
|
137
|
+
height: constants.sizeToWeight[size]
|
|
138
|
+
}))), /*#__PURE__*/_jsx2__default["default"](styled.StyledLineLeft, {
|
|
139
|
+
size: size,
|
|
140
|
+
__duration: __duration,
|
|
141
|
+
fill: "url(#".concat(uniqueId, "-lg1)")
|
|
142
|
+
}), /*#__PURE__*/_jsx2__default["default"](styled.StyledLineTop, {
|
|
143
|
+
size: size,
|
|
144
|
+
__duration: __duration,
|
|
145
|
+
fill: "url(#".concat(uniqueId, "-lg2)"),
|
|
146
|
+
clipPath: "url(#".concat(uniqueId, "-lcp1)")
|
|
147
|
+
}), /*#__PURE__*/_jsx2__default["default"](styled.StyledLineRight, {
|
|
148
|
+
size: size,
|
|
149
|
+
__duration: __duration,
|
|
150
|
+
fill: "url(#".concat(uniqueId, "-lg3)"),
|
|
151
|
+
clipPath: "url(#".concat(uniqueId, "-lcp2)")
|
|
152
|
+
}), /*#__PURE__*/_jsx2__default["default"](styled.StyledLineBottom, {
|
|
153
|
+
size: size,
|
|
154
|
+
__duration: __duration,
|
|
155
|
+
fill: "url(#".concat(uniqueId, "-lg4)"),
|
|
156
|
+
clipPath: "url(#".concat(uniqueId, "-lcp3)")
|
|
157
|
+
})), text !== '' && showText && /*#__PURE__*/_jsx2__default["default"]("span", {
|
|
158
|
+
style: {
|
|
159
|
+
color: constants.colorToHex[color],
|
|
160
|
+
fontSize: constants.sizeToTextSize[size]
|
|
161
|
+
}
|
|
162
|
+
}, void 0, text))
|
|
163
|
+
}));
|
|
98
164
|
};
|
|
99
|
-
const DSSquareIndicatorWithSchema =
|
|
165
|
+
const DSSquareIndicatorWithSchema = dsPropsHelpers.describe(DSSquareIndicator);
|
|
100
166
|
DSSquareIndicatorWithSchema.propTypes = reactDescPropTypes.SquareIndicatorPropTypes;
|
|
101
167
|
|
|
102
168
|
exports.DSSquareIndicator = DSSquareIndicator;
|
package/cjs/constants.js
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const sizeToPx = {
|
|
6
|
+
xs: '16px',
|
|
7
|
+
s: '24px',
|
|
8
|
+
m: '32px',
|
|
9
|
+
l: '48px',
|
|
10
|
+
xl: '56px',
|
|
11
|
+
xxl: '64px'
|
|
12
|
+
};
|
|
13
|
+
const sizeToWeight = {
|
|
14
|
+
xs: '3px',
|
|
15
|
+
s: '3px',
|
|
16
|
+
m: '3px',
|
|
17
|
+
l: '4px',
|
|
18
|
+
xl: '5px',
|
|
19
|
+
xxl: '6px'
|
|
20
|
+
};
|
|
21
|
+
const colorToHex = {
|
|
22
|
+
light: '#FFFFFF',
|
|
23
|
+
dark: '#0F364A'
|
|
24
|
+
};
|
|
25
|
+
const sizeToTextSize = {
|
|
26
|
+
xs: '12px',
|
|
27
|
+
s: '12px',
|
|
28
|
+
m: '12px',
|
|
29
|
+
l: '13px',
|
|
30
|
+
xl: '14px',
|
|
31
|
+
xxl: '16px'
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
exports.colorToHex = colorToHex;
|
|
35
|
+
exports.sizeToPx = sizeToPx;
|
|
36
|
+
exports.sizeToTextSize = sizeToTextSize;
|
|
37
|
+
exports.sizeToWeight = sizeToWeight;
|
|
@@ -2,16 +2,38 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
10
|
+
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
11
|
+
var dsPropsHelpers = require('@elliemae/ds-props-helpers');
|
|
6
12
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
14
|
+
|
|
15
|
+
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
16
|
+
|
|
17
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
18
|
+
|
|
19
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
20
|
+
const SquareIndicatorPropTypes = _objectSpread(_objectSpread({}, dsPropsHelpers.globalAttributesPropTypes), {}, {
|
|
21
|
+
size: dsPropsHelpers.PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl']).description('Size of the indicator').defaultValue('m'),
|
|
22
|
+
color: dsPropsHelpers.PropTypes.oneOf(['light', 'dark']).description('Color mode for the indicator').defaultValue('dark'),
|
|
23
|
+
text: dsPropsHelpers.PropTypes.string.description('Optional text to show under the indicator').defaultValue(''),
|
|
24
|
+
showText: dsPropsHelpers.PropTypes.bool.description('Whether to show the optional text or not').defaultValue(true),
|
|
25
|
+
withTooltip: dsPropsHelpers.PropTypes.bool.description('Whether to include a tooltip that shows the optional text on hover').defaultValue(false),
|
|
26
|
+
tooltipStartPlacementPreference: dsPropsHelpers.PropTypes.oneOf(['top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start']).description('start placement preference for the tooltip').defaultValue('center')
|
|
27
|
+
});
|
|
28
|
+
const defaultProps = {
|
|
29
|
+
size: 'm',
|
|
30
|
+
color: 'dark',
|
|
31
|
+
text: '',
|
|
32
|
+
showText: true,
|
|
33
|
+
withTooltip: false,
|
|
34
|
+
tooltipStartPlacementPreference: 'bottom',
|
|
35
|
+
__duration: 2.5
|
|
15
36
|
};
|
|
16
37
|
|
|
17
38
|
exports.SquareIndicatorPropTypes = SquareIndicatorPropTypes;
|
|
39
|
+
exports.defaultProps = defaultProps;
|
package/cjs/styled.js
ADDED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
|
|
6
|
+
var styled = require('styled-components');
|
|
7
|
+
var dsSystem = require('@elliemae/ds-system');
|
|
8
|
+
var constants = require('./constants.js');
|
|
9
|
+
|
|
10
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
|
+
|
|
12
|
+
var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
|
|
13
|
+
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
14
|
+
|
|
15
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
16
|
+
const lineLeftAnimation = dsSystem.kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\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"])));
|
|
17
|
+
const lineTopAnimation = dsSystem.kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\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"])));
|
|
18
|
+
const lineRightAnimation = dsSystem.kfrm(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\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"])));
|
|
19
|
+
const lineBottomAnimation = dsSystem.kfrm(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\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"])));
|
|
20
|
+
const StyledLineLeft = /*#__PURE__*/styled__default["default"].rect.withConfig({
|
|
21
|
+
componentId: "sc-df9quy-0"
|
|
22
|
+
})(["x:0;y:0%;width:", ";height:100%;animation:", " ", "s linear 0s infinite;"], _ref => {
|
|
23
|
+
let {
|
|
24
|
+
size
|
|
25
|
+
} = _ref;
|
|
26
|
+
return constants.sizeToWeight[size];
|
|
27
|
+
}, lineLeftAnimation, _ref2 => {
|
|
28
|
+
let {
|
|
29
|
+
__duration
|
|
30
|
+
} = _ref2;
|
|
31
|
+
return __duration;
|
|
32
|
+
});
|
|
33
|
+
const StyledLineTop = /*#__PURE__*/styled__default["default"].rect.withConfig({
|
|
34
|
+
componentId: "sc-df9quy-1"
|
|
35
|
+
})(["x:-100%;y:0;width:200%;height:", ";animation:", " ", "s linear 0s infinite;"], _ref3 => {
|
|
36
|
+
let {
|
|
37
|
+
size
|
|
38
|
+
} = _ref3;
|
|
39
|
+
return constants.sizeToWeight[size];
|
|
40
|
+
}, lineTopAnimation, _ref4 => {
|
|
41
|
+
let {
|
|
42
|
+
__duration
|
|
43
|
+
} = _ref4;
|
|
44
|
+
return __duration;
|
|
45
|
+
});
|
|
46
|
+
const StyledLineRight = /*#__PURE__*/styled__default["default"].rect.withConfig({
|
|
47
|
+
componentId: "sc-df9quy-2"
|
|
48
|
+
})(["x:calc(100% - ", ");y:-100%;width:", ";height:200%;animation:", " ", "s linear 0s infinite;"], _ref5 => {
|
|
49
|
+
let {
|
|
50
|
+
size
|
|
51
|
+
} = _ref5;
|
|
52
|
+
return constants.sizeToWeight[size];
|
|
53
|
+
}, _ref6 => {
|
|
54
|
+
let {
|
|
55
|
+
size
|
|
56
|
+
} = _ref6;
|
|
57
|
+
return constants.sizeToWeight[size];
|
|
58
|
+
}, lineRightAnimation, _ref7 => {
|
|
59
|
+
let {
|
|
60
|
+
__duration
|
|
61
|
+
} = _ref7;
|
|
62
|
+
return __duration;
|
|
63
|
+
});
|
|
64
|
+
const StyledLineBottom = /*#__PURE__*/styled__default["default"].rect.withConfig({
|
|
65
|
+
componentId: "sc-df9quy-3"
|
|
66
|
+
})(["x:0%;y:calc(100% - ", ");width:200%;height:", ";animation:", " ", "s linear 0s infinite;"], _ref8 => {
|
|
67
|
+
let {
|
|
68
|
+
size
|
|
69
|
+
} = _ref8;
|
|
70
|
+
return constants.sizeToWeight[size];
|
|
71
|
+
}, _ref9 => {
|
|
72
|
+
let {
|
|
73
|
+
size
|
|
74
|
+
} = _ref9;
|
|
75
|
+
return constants.sizeToWeight[size];
|
|
76
|
+
}, lineBottomAnimation, _ref10 => {
|
|
77
|
+
let {
|
|
78
|
+
__duration
|
|
79
|
+
} = _ref10;
|
|
80
|
+
return __duration;
|
|
81
|
+
});
|
|
82
|
+
|
|
83
|
+
exports.StyledLineBottom = StyledLineBottom;
|
|
84
|
+
exports.StyledLineLeft = StyledLineLeft;
|
|
85
|
+
exports.StyledLineRight = StyledLineRight;
|
|
86
|
+
exports.StyledLineTop = StyledLineTop;
|
package/esm/DSSquareIndicator.js
CHANGED
|
@@ -1,92 +1,157 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
4
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
6
|
+
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
1
7
|
import _jsx2 from '@babel/runtime/helpers/esm/jsx';
|
|
2
|
-
import 'react';
|
|
8
|
+
import { useMemo } from 'react';
|
|
3
9
|
import { Grid } from '@elliemae/ds-grid';
|
|
4
10
|
import { DSTooltipV3 } from '@elliemae/ds-tooltip';
|
|
5
|
-
import { describe } from '
|
|
6
|
-
import {
|
|
11
|
+
import { describe, useMemoMergePropsWithDefault, useGetGlobalAttributes } from '@elliemae/ds-props-helpers';
|
|
12
|
+
import { uid } from 'uid';
|
|
13
|
+
import { SquareIndicatorPropTypes, defaultProps } from './react-desc-prop-types.js';
|
|
14
|
+
import { StyledLineLeft, StyledLineTop, StyledLineRight, StyledLineBottom } from './styled.js';
|
|
15
|
+
import { sizeToWeight, colorToHex, sizeToPx, sizeToTextSize } from './constants.js';
|
|
7
16
|
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
8
17
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
const colorToHex = {
|
|
26
|
-
light: '#FFFFFF',
|
|
27
|
-
dark: '#0F364A'
|
|
28
|
-
};
|
|
29
|
-
const sizeToTextSize = {
|
|
30
|
-
xs: '12px',
|
|
31
|
-
s: '12px',
|
|
32
|
-
m: '12px',
|
|
33
|
-
l: '13px',
|
|
34
|
-
xl: '14px',
|
|
35
|
-
xxl: '16px'
|
|
36
|
-
};
|
|
37
|
-
const DSSquareIndicator = _ref => {
|
|
38
|
-
let {
|
|
39
|
-
size = 'm',
|
|
40
|
-
color = 'dark',
|
|
41
|
-
text = '',
|
|
42
|
-
showText = true,
|
|
43
|
-
withTooltip = false,
|
|
44
|
-
tooltipStartPlacementPreference = 'bottom',
|
|
45
|
-
__duration = 2.5
|
|
46
|
-
} = _ref;
|
|
47
|
-
const Wrapper = withTooltip ? DSTooltipV3 : _ref2 => {
|
|
18
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
19
|
+
|
|
20
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
21
|
+
const DSSquareIndicator = props => {
|
|
22
|
+
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
|
|
23
|
+
const globalAttributes = useGetGlobalAttributes(propsWithDefault);
|
|
24
|
+
const {
|
|
25
|
+
size,
|
|
26
|
+
color,
|
|
27
|
+
text,
|
|
28
|
+
showText,
|
|
29
|
+
withTooltip,
|
|
30
|
+
tooltipStartPlacementPreference,
|
|
31
|
+
__duration
|
|
32
|
+
} = propsWithDefault;
|
|
33
|
+
const Wrapper = useMemo(() => withTooltip ? DSTooltipV3 : _ref => {
|
|
48
34
|
let {
|
|
49
35
|
children
|
|
50
|
-
} =
|
|
36
|
+
} = _ref;
|
|
51
37
|
return /*#__PURE__*/jsx(Fragment, {
|
|
52
38
|
children: children
|
|
53
39
|
});
|
|
54
|
-
};
|
|
55
|
-
|
|
40
|
+
}, [withTooltip]);
|
|
41
|
+
const uniqueId = useMemo(() => uid(16), []);
|
|
42
|
+
const paddedCoordinate = useMemo(() => "calc(100% - ".concat(sizeToWeight[size], ")"), [size]);
|
|
43
|
+
const hexColor = useMemo(() => colorToHex[color], [color]);
|
|
44
|
+
return /*#__PURE__*/jsx(Grid, _objectSpread(_objectSpread({
|
|
56
45
|
gutter: "xs",
|
|
57
46
|
justifyContent: "center",
|
|
58
47
|
role: "status"
|
|
59
|
-
},
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
48
|
+
}, globalAttributes), {}, {
|
|
49
|
+
children: /*#__PURE__*/_jsx2(Wrapper, {
|
|
50
|
+
text: text,
|
|
51
|
+
textAlign: "center",
|
|
52
|
+
startPlacementPreference: tooltipStartPlacementPreference
|
|
53
|
+
}, void 0, /*#__PURE__*/_jsx2("svg", {
|
|
54
|
+
width: sizeToPx[size],
|
|
55
|
+
height: sizeToPx[size],
|
|
56
|
+
style: {
|
|
57
|
+
display: 'block',
|
|
58
|
+
margin: 'auto'
|
|
59
|
+
}
|
|
60
|
+
}, void 0, /*#__PURE__*/_jsx2("defs", {}, void 0, /*#__PURE__*/_jsx2("linearGradient", {
|
|
61
|
+
id: "".concat(uniqueId, "-lg1"),
|
|
62
|
+
x1: "0",
|
|
63
|
+
y1: "0",
|
|
64
|
+
x2: "0",
|
|
65
|
+
y2: "100%"
|
|
66
|
+
}, void 0, /*#__PURE__*/_jsx2("stop", {
|
|
67
|
+
offset: "20%",
|
|
68
|
+
stopColor: "".concat(hexColor, "FF")
|
|
69
|
+
}), /*#__PURE__*/_jsx2("stop", {
|
|
70
|
+
offset: "80%",
|
|
71
|
+
stopColor: "".concat(hexColor, "00")
|
|
72
|
+
})), /*#__PURE__*/_jsx2("linearGradient", {
|
|
73
|
+
id: "".concat(uniqueId, "-lg2"),
|
|
74
|
+
x1: "0",
|
|
75
|
+
y1: "0",
|
|
76
|
+
x2: "100%",
|
|
77
|
+
y2: "0"
|
|
78
|
+
}, void 0, /*#__PURE__*/_jsx2("stop", {
|
|
79
|
+
offset: "10%",
|
|
80
|
+
stopColor: "".concat(hexColor, "00")
|
|
81
|
+
}), /*#__PURE__*/_jsx2("stop", {
|
|
82
|
+
offset: "50%",
|
|
83
|
+
stopColor: "".concat(hexColor, "FF")
|
|
84
|
+
})), /*#__PURE__*/_jsx2("linearGradient", {
|
|
85
|
+
id: "".concat(uniqueId, "-lg3"),
|
|
86
|
+
x1: "0",
|
|
87
|
+
y1: "0",
|
|
88
|
+
x2: "0",
|
|
89
|
+
y2: "100%"
|
|
90
|
+
}, void 0, /*#__PURE__*/_jsx2("stop", {
|
|
91
|
+
offset: "10%",
|
|
92
|
+
stopColor: "".concat(hexColor, "00")
|
|
93
|
+
}), /*#__PURE__*/_jsx2("stop", {
|
|
94
|
+
offset: "50%",
|
|
95
|
+
stopColor: "".concat(hexColor, "FF")
|
|
96
|
+
})), /*#__PURE__*/_jsx2("linearGradient", {
|
|
97
|
+
id: "".concat(uniqueId, "-lg4"),
|
|
98
|
+
x1: "0",
|
|
99
|
+
y1: "0",
|
|
100
|
+
x2: "100%",
|
|
101
|
+
y2: "0"
|
|
102
|
+
}, void 0, /*#__PURE__*/_jsx2("stop", {
|
|
103
|
+
offset: "50%",
|
|
104
|
+
stopColor: "".concat(hexColor, "FF")
|
|
105
|
+
}), /*#__PURE__*/_jsx2("stop", {
|
|
106
|
+
offset: "90%",
|
|
107
|
+
stopColor: "".concat(hexColor, "00")
|
|
108
|
+
})), /*#__PURE__*/_jsx2("clipPath", {
|
|
109
|
+
id: "".concat(uniqueId, "-lcp1")
|
|
110
|
+
}, void 0, /*#__PURE__*/_jsx2("rect", {
|
|
111
|
+
x: sizeToWeight[size],
|
|
112
|
+
y: 0,
|
|
113
|
+
width: "100%",
|
|
114
|
+
height: sizeToWeight[size]
|
|
115
|
+
})), /*#__PURE__*/_jsx2("clipPath", {
|
|
116
|
+
id: "".concat(uniqueId, "-lcp2")
|
|
117
|
+
}, void 0, /*#__PURE__*/_jsx2("rect", {
|
|
118
|
+
x: paddedCoordinate,
|
|
119
|
+
y: sizeToWeight[size],
|
|
120
|
+
width: sizeToWeight[size],
|
|
121
|
+
height: "100%"
|
|
122
|
+
})), /*#__PURE__*/_jsx2("clipPath", {
|
|
123
|
+
id: "".concat(uniqueId, "-lcp3")
|
|
124
|
+
}, void 0, /*#__PURE__*/_jsx2("rect", {
|
|
125
|
+
x: 0,
|
|
126
|
+
y: paddedCoordinate,
|
|
127
|
+
width: paddedCoordinate,
|
|
128
|
+
height: sizeToWeight[size]
|
|
129
|
+
}))), /*#__PURE__*/_jsx2(StyledLineLeft, {
|
|
130
|
+
size: size,
|
|
131
|
+
__duration: __duration,
|
|
132
|
+
fill: "url(#".concat(uniqueId, "-lg1)")
|
|
133
|
+
}), /*#__PURE__*/_jsx2(StyledLineTop, {
|
|
134
|
+
size: size,
|
|
135
|
+
__duration: __duration,
|
|
136
|
+
fill: "url(#".concat(uniqueId, "-lg2)"),
|
|
137
|
+
clipPath: "url(#".concat(uniqueId, "-lcp1)")
|
|
138
|
+
}), /*#__PURE__*/_jsx2(StyledLineRight, {
|
|
139
|
+
size: size,
|
|
140
|
+
__duration: __duration,
|
|
141
|
+
fill: "url(#".concat(uniqueId, "-lg3)"),
|
|
142
|
+
clipPath: "url(#".concat(uniqueId, "-lcp2)")
|
|
143
|
+
}), /*#__PURE__*/_jsx2(StyledLineBottom, {
|
|
144
|
+
size: size,
|
|
145
|
+
__duration: __duration,
|
|
146
|
+
fill: "url(#".concat(uniqueId, "-lg4)"),
|
|
147
|
+
clipPath: "url(#".concat(uniqueId, "-lcp3)")
|
|
148
|
+
})), text !== '' && showText && /*#__PURE__*/_jsx2("span", {
|
|
149
|
+
style: {
|
|
150
|
+
color: colorToHex[color],
|
|
151
|
+
fontSize: sizeToTextSize[size]
|
|
152
|
+
}
|
|
153
|
+
}, void 0, text))
|
|
154
|
+
}));
|
|
90
155
|
};
|
|
91
156
|
const DSSquareIndicatorWithSchema = describe(DSSquareIndicator);
|
|
92
157
|
DSSquareIndicatorWithSchema.propTypes = SquareIndicatorPropTypes;
|
package/esm/constants.js
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
const sizeToPx = {
|
|
2
|
+
xs: '16px',
|
|
3
|
+
s: '24px',
|
|
4
|
+
m: '32px',
|
|
5
|
+
l: '48px',
|
|
6
|
+
xl: '56px',
|
|
7
|
+
xxl: '64px'
|
|
8
|
+
};
|
|
9
|
+
const sizeToWeight = {
|
|
10
|
+
xs: '3px',
|
|
11
|
+
s: '3px',
|
|
12
|
+
m: '3px',
|
|
13
|
+
l: '4px',
|
|
14
|
+
xl: '5px',
|
|
15
|
+
xxl: '6px'
|
|
16
|
+
};
|
|
17
|
+
const colorToHex = {
|
|
18
|
+
light: '#FFFFFF',
|
|
19
|
+
dark: '#0F364A'
|
|
20
|
+
};
|
|
21
|
+
const sizeToTextSize = {
|
|
22
|
+
xs: '12px',
|
|
23
|
+
s: '12px',
|
|
24
|
+
m: '12px',
|
|
25
|
+
l: '13px',
|
|
26
|
+
xl: '14px',
|
|
27
|
+
xxl: '16px'
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
export { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight };
|
|
@@ -1,13 +1,30 @@
|
|
|
1
|
-
import
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
4
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
6
|
+
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
7
|
+
import { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';
|
|
2
8
|
|
|
3
|
-
|
|
4
|
-
|
|
9
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
10
|
+
|
|
11
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
12
|
+
const SquareIndicatorPropTypes = _objectSpread(_objectSpread({}, globalAttributesPropTypes), {}, {
|
|
5
13
|
size: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl']).description('Size of the indicator').defaultValue('m'),
|
|
6
14
|
color: PropTypes.oneOf(['light', 'dark']).description('Color mode for the indicator').defaultValue('dark'),
|
|
7
15
|
text: PropTypes.string.description('Optional text to show under the indicator').defaultValue(''),
|
|
8
16
|
showText: PropTypes.bool.description('Whether to show the optional text or not').defaultValue(true),
|
|
9
17
|
withTooltip: PropTypes.bool.description('Whether to include a tooltip that shows the optional text on hover').defaultValue(false),
|
|
10
18
|
tooltipStartPlacementPreference: PropTypes.oneOf(['top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start']).description('start placement preference for the tooltip').defaultValue('center')
|
|
19
|
+
});
|
|
20
|
+
const defaultProps = {
|
|
21
|
+
size: 'm',
|
|
22
|
+
color: 'dark',
|
|
23
|
+
text: '',
|
|
24
|
+
showText: true,
|
|
25
|
+
withTooltip: false,
|
|
26
|
+
tooltipStartPlacementPreference: 'bottom',
|
|
27
|
+
__duration: 2.5
|
|
11
28
|
};
|
|
12
29
|
|
|
13
|
-
export { SquareIndicatorPropTypes };
|
|
30
|
+
export { SquareIndicatorPropTypes, defaultProps };
|
package/esm/styled.js
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
|
|
2
|
+
import styled from 'styled-components';
|
|
3
|
+
import { kfrm } from '@elliemae/ds-system';
|
|
4
|
+
import { sizeToWeight } from './constants.js';
|
|
5
|
+
|
|
6
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
7
|
+
const lineLeftAnimation = kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])));
|
|
8
|
+
const lineTopAnimation = kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])));
|
|
9
|
+
const lineRightAnimation = kfrm(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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"])));
|
|
10
|
+
const lineBottomAnimation = kfrm(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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"])));
|
|
11
|
+
const StyledLineLeft = /*#__PURE__*/styled.rect.withConfig({
|
|
12
|
+
componentId: "sc-df9quy-0"
|
|
13
|
+
})(["x:0;y:0%;width:", ";height:100%;animation:", " ", "s linear 0s infinite;"], _ref => {
|
|
14
|
+
let {
|
|
15
|
+
size
|
|
16
|
+
} = _ref;
|
|
17
|
+
return sizeToWeight[size];
|
|
18
|
+
}, lineLeftAnimation, _ref2 => {
|
|
19
|
+
let {
|
|
20
|
+
__duration
|
|
21
|
+
} = _ref2;
|
|
22
|
+
return __duration;
|
|
23
|
+
});
|
|
24
|
+
const StyledLineTop = /*#__PURE__*/styled.rect.withConfig({
|
|
25
|
+
componentId: "sc-df9quy-1"
|
|
26
|
+
})(["x:-100%;y:0;width:200%;height:", ";animation:", " ", "s linear 0s infinite;"], _ref3 => {
|
|
27
|
+
let {
|
|
28
|
+
size
|
|
29
|
+
} = _ref3;
|
|
30
|
+
return sizeToWeight[size];
|
|
31
|
+
}, lineTopAnimation, _ref4 => {
|
|
32
|
+
let {
|
|
33
|
+
__duration
|
|
34
|
+
} = _ref4;
|
|
35
|
+
return __duration;
|
|
36
|
+
});
|
|
37
|
+
const StyledLineRight = /*#__PURE__*/styled.rect.withConfig({
|
|
38
|
+
componentId: "sc-df9quy-2"
|
|
39
|
+
})(["x:calc(100% - ", ");y:-100%;width:", ";height:200%;animation:", " ", "s linear 0s infinite;"], _ref5 => {
|
|
40
|
+
let {
|
|
41
|
+
size
|
|
42
|
+
} = _ref5;
|
|
43
|
+
return sizeToWeight[size];
|
|
44
|
+
}, _ref6 => {
|
|
45
|
+
let {
|
|
46
|
+
size
|
|
47
|
+
} = _ref6;
|
|
48
|
+
return sizeToWeight[size];
|
|
49
|
+
}, lineRightAnimation, _ref7 => {
|
|
50
|
+
let {
|
|
51
|
+
__duration
|
|
52
|
+
} = _ref7;
|
|
53
|
+
return __duration;
|
|
54
|
+
});
|
|
55
|
+
const StyledLineBottom = /*#__PURE__*/styled.rect.withConfig({
|
|
56
|
+
componentId: "sc-df9quy-3"
|
|
57
|
+
})(["x:0%;y:calc(100% - ", ");width:200%;height:", ";animation:", " ", "s linear 0s infinite;"], _ref8 => {
|
|
58
|
+
let {
|
|
59
|
+
size
|
|
60
|
+
} = _ref8;
|
|
61
|
+
return sizeToWeight[size];
|
|
62
|
+
}, _ref9 => {
|
|
63
|
+
let {
|
|
64
|
+
size
|
|
65
|
+
} = _ref9;
|
|
66
|
+
return sizeToWeight[size];
|
|
67
|
+
}, lineBottomAnimation, _ref10 => {
|
|
68
|
+
let {
|
|
69
|
+
__duration
|
|
70
|
+
} = _ref10;
|
|
71
|
+
return __duration;
|
|
72
|
+
});
|
|
73
|
+
|
|
74
|
+
export { StyledLineBottom, StyledLineLeft, StyledLineRight, StyledLineTop };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-square-indicator",
|
|
3
|
-
"version": "2.3.0-next.
|
|
3
|
+
"version": "2.3.0-next.6",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Indeterminate Progress Indicator",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -11,6 +11,10 @@
|
|
|
11
11
|
"import": "./esm/index.js",
|
|
12
12
|
"require": "./cjs/index.js"
|
|
13
13
|
},
|
|
14
|
+
"./styled": {
|
|
15
|
+
"import": "./esm/styled.js",
|
|
16
|
+
"require": "./cjs/styled.js"
|
|
17
|
+
},
|
|
14
18
|
"./react-desc-prop-types": {
|
|
15
19
|
"import": "./esm/react-desc-prop-types.js",
|
|
16
20
|
"require": "./cjs/react-desc-prop-types.js"
|
|
@@ -18,6 +22,10 @@
|
|
|
18
22
|
"./DSSquareIndicator": {
|
|
19
23
|
"import": "./esm/DSSquareIndicator.js",
|
|
20
24
|
"require": "./cjs/DSSquareIndicator.js"
|
|
25
|
+
},
|
|
26
|
+
"./constants": {
|
|
27
|
+
"import": "./esm/constants.js",
|
|
28
|
+
"require": "./cjs/constants.js"
|
|
21
29
|
}
|
|
22
30
|
},
|
|
23
31
|
"sideEffects": [
|
|
@@ -40,8 +48,9 @@
|
|
|
40
48
|
"build": "node ../../scripts/build/build.js"
|
|
41
49
|
},
|
|
42
50
|
"dependencies": {
|
|
43
|
-
"@elliemae/ds-grid": "2.3.0-next.
|
|
44
|
-
"
|
|
51
|
+
"@elliemae/ds-grid": "2.3.0-next.6",
|
|
52
|
+
"@elliemae/ds-props-helpers": "2.3.0-next.6",
|
|
53
|
+
"uid": "~2.0.0"
|
|
45
54
|
},
|
|
46
55
|
"peerDependencies": {
|
|
47
56
|
"react": "^17.0.2",
|
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
/// <reference path="../../../../shared/typings/react-desc.d.ts" />
|
|
2
1
|
import React from 'react';
|
|
3
2
|
import { DSSquareIndicatorT } from './react-desc-prop-types';
|
|
4
3
|
export declare const DSSquareIndicator: React.ComponentType<DSSquareIndicatorT.Props>;
|
|
5
|
-
export declare const DSSquareIndicatorWithSchema:
|
|
6
|
-
(props?: unknown): JSX.Element;
|
|
7
|
-
propTypes: unknown;
|
|
8
|
-
toTypescript: () => import("react-desc").TypescriptSchema;
|
|
9
|
-
};
|
|
4
|
+
export declare const DSSquareIndicatorWithSchema: import("@elliemae/ds-props-helpers/types/propTypes/types").DocumentedReactComponent<DSSquareIndicatorT.Props>;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
export declare const sizeToPx: {
|
|
2
|
+
xs: string;
|
|
3
|
+
s: string;
|
|
4
|
+
m: string;
|
|
5
|
+
l: string;
|
|
6
|
+
xl: string;
|
|
7
|
+
xxl: string;
|
|
8
|
+
};
|
|
9
|
+
export declare const sizeToWeight: {
|
|
10
|
+
xs: string;
|
|
11
|
+
s: string;
|
|
12
|
+
m: string;
|
|
13
|
+
l: string;
|
|
14
|
+
xl: string;
|
|
15
|
+
xxl: string;
|
|
16
|
+
};
|
|
17
|
+
export declare const colorToHex: {
|
|
18
|
+
light: string;
|
|
19
|
+
dark: string;
|
|
20
|
+
};
|
|
21
|
+
export declare const sizeToTextSize: {
|
|
22
|
+
xs: string;
|
|
23
|
+
s: string;
|
|
24
|
+
m: string;
|
|
25
|
+
l: string;
|
|
26
|
+
xl: string;
|
|
27
|
+
xxl: string;
|
|
28
|
+
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import { WeakValidationMap } from 'react';
|
|
2
2
|
export declare namespace DSSquareIndicatorT {
|
|
3
3
|
interface Props {
|
|
4
4
|
size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
|
|
@@ -10,23 +10,5 @@ export declare namespace DSSquareIndicatorT {
|
|
|
10
10
|
__duration: number;
|
|
11
11
|
}
|
|
12
12
|
}
|
|
13
|
-
export declare const SquareIndicatorPropTypes:
|
|
14
|
-
|
|
15
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
16
|
-
};
|
|
17
|
-
color: {
|
|
18
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
19
|
-
};
|
|
20
|
-
text: {
|
|
21
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
22
|
-
};
|
|
23
|
-
showText: {
|
|
24
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
25
|
-
};
|
|
26
|
-
withTooltip: {
|
|
27
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
28
|
-
};
|
|
29
|
-
tooltipStartPlacementPreference: {
|
|
30
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
31
|
-
};
|
|
32
|
-
};
|
|
13
|
+
export declare const SquareIndicatorPropTypes: WeakValidationMap<unknown>;
|
|
14
|
+
export declare const defaultProps: DSSquareIndicatorT.Props;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { DSSquareIndicatorT } from './react-desc-prop-types';
|
|
2
|
+
interface RectProps {
|
|
3
|
+
size: Required<DSSquareIndicatorT.Props>['size'];
|
|
4
|
+
__duration: number;
|
|
5
|
+
}
|
|
6
|
+
export declare const StyledLineLeft: import("styled-components").StyledComponent<"rect", import("styled-components").DefaultTheme, RectProps, never>;
|
|
7
|
+
export declare const StyledLineTop: import("styled-components").StyledComponent<"rect", import("styled-components").DefaultTheme, RectProps, never>;
|
|
8
|
+
export declare const StyledLineRight: import("styled-components").StyledComponent<"rect", import("styled-components").DefaultTheme, RectProps, never>;
|
|
9
|
+
export declare const StyledLineBottom: import("styled-components").StyledComponent<"rect", import("styled-components").DefaultTheme, RectProps, never>;
|
|
10
|
+
export {};
|