@zendeskgarden/react-loaders 9.0.0-next.7 → 9.0.0-next.9
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/elements/Dots.js +93 -0
- package/dist/esm/elements/Inline.js +51 -0
- package/dist/esm/elements/Progress.js +59 -0
- package/dist/esm/elements/Skeleton.js +42 -0
- package/dist/esm/elements/Spinner.js +99 -0
- package/dist/esm/index.js +11 -0
- package/dist/esm/styled/StyledDots.js +52 -0
- package/dist/esm/styled/StyledInline.js +37 -0
- package/dist/esm/styled/StyledLoadingPlaceholder.js +23 -0
- package/dist/esm/styled/StyledProgress.js +47 -0
- package/dist/esm/styled/StyledSVG.js +26 -0
- package/dist/esm/styled/StyledSkeleton.js +52 -0
- package/dist/esm/styled/StyledSpinnerCircle.js +28 -0
- package/dist/esm/types/index.js +9 -0
- package/dist/esm/utils/animations.js +13 -0
- package/dist/esm/utils/spinner-coordinates.js +71 -0
- package/dist/index.cjs.js +17 -33
- package/package.json +5 -5
- package/dist/index.esm.js +0 -544
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
const STROKE_WIDTH_FRAMES = {
|
|
8
|
+
0: 6,
|
|
9
|
+
14: 5,
|
|
10
|
+
26: 4,
|
|
11
|
+
36: 3,
|
|
12
|
+
46: 2,
|
|
13
|
+
58: 3,
|
|
14
|
+
70: 4,
|
|
15
|
+
80: 5,
|
|
16
|
+
91: 6
|
|
17
|
+
};
|
|
18
|
+
const ROTATION_FRAMES = {
|
|
19
|
+
0: -90,
|
|
20
|
+
8: -81,
|
|
21
|
+
36: -30,
|
|
22
|
+
41: -18,
|
|
23
|
+
44: -8,
|
|
24
|
+
48: 0,
|
|
25
|
+
55: 22,
|
|
26
|
+
63: 53,
|
|
27
|
+
64: 62,
|
|
28
|
+
66: 67,
|
|
29
|
+
68: 78,
|
|
30
|
+
69: 90,
|
|
31
|
+
71: 99,
|
|
32
|
+
73: 112,
|
|
33
|
+
74: 129,
|
|
34
|
+
76: 138,
|
|
35
|
+
78: 159,
|
|
36
|
+
79: 180,
|
|
37
|
+
81: 190,
|
|
38
|
+
83: 207,
|
|
39
|
+
84: 221,
|
|
40
|
+
86: 226,
|
|
41
|
+
88: 235,
|
|
42
|
+
90: 243,
|
|
43
|
+
99: 270
|
|
44
|
+
};
|
|
45
|
+
const DASHARRAY_FRAMES = {
|
|
46
|
+
0: 0,
|
|
47
|
+
13: 2,
|
|
48
|
+
26: 13,
|
|
49
|
+
53: 86,
|
|
50
|
+
58: 90,
|
|
51
|
+
63: 89,
|
|
52
|
+
64: 88,
|
|
53
|
+
66: 86,
|
|
54
|
+
68: 83,
|
|
55
|
+
69: 81,
|
|
56
|
+
71: 76,
|
|
57
|
+
73: 70,
|
|
58
|
+
74: 62,
|
|
59
|
+
76: 58,
|
|
60
|
+
78: 47,
|
|
61
|
+
79: 37,
|
|
62
|
+
81: 31,
|
|
63
|
+
83: 23,
|
|
64
|
+
84: 16,
|
|
65
|
+
88: 10,
|
|
66
|
+
89: 7,
|
|
67
|
+
98: 1,
|
|
68
|
+
99: 0
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
export { DASHARRAY_FRAMES, ROTATION_FRAMES, STROKE_WIDTH_FRAMES };
|
package/dist/index.cjs.js
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
8
7
|
'use strict';
|
|
9
8
|
|
|
10
9
|
var React = require('react');
|
|
@@ -20,21 +19,6 @@ var React__default = /*#__PURE__*/_interopDefault(React);
|
|
|
20
19
|
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
|
|
21
20
|
var styled__default = /*#__PURE__*/_interopDefault(styled);
|
|
22
21
|
|
|
23
|
-
function _extends() {
|
|
24
|
-
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
25
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
26
|
-
var source = arguments[i];
|
|
27
|
-
for (var key in source) {
|
|
28
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
29
|
-
target[key] = source[key];
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
return target;
|
|
34
|
-
};
|
|
35
|
-
return _extends.apply(this, arguments);
|
|
36
|
-
}
|
|
37
|
-
|
|
38
22
|
const dotOneKeyframes = styled.keyframes(["0%{transform:translate(0,5px);}3%{transform:translate(1px,-5px);}6%{transform:translate(3px,-15px);}8%{transform:translate(5px,-18px);}9%{transform:translate(7px,-21px);}11%{transform:translate(8px,-22px);}13%{transform:translate(9px,-23px);}16%{transform:translate(12px,-25px);}18%{transform:translate(13px,-26px);}23%{transform:translate(18px,-26px);}24%{transform:translate(19px,-25px);}28%{transform:translate(22px,-23px);}31%{transform:translate(24px,-21px);}33%{transform:translate(26px,-18px);}34%{transform:translate(28px,-14px);}36%{transform:translate(29px,-12px);}38%{transform:translate(30px,-5px);}39%{transform:translate(31px,5px);}54%{transform:translate(31px,3px);}59%{transform:translate(33px);}61%{transform:translate(43px);}63%{transform:translate(48px);}64%{transform:translate(51px);}66%{transform:translate(53px);}68%{transform:translate(55px);}69%{transform:translate(57px);}76%{transform:translate(60px);}81%{transform:translate(61px);}83%,100%{transform:translate(62px);}"]);
|
|
39
23
|
const dotTwoKeyframes = styled.keyframes(["4%{transform:translate(0);}6%{transform:translate(-1px);}8%{transform:translate(-2px);}9%{transform:translate(-5px);}11%{transform:translate(-7px);}13%{transform:translate(-12px);}14%{transform:translate(-17px);}16%{transform:translate(-19px);}18%{transform:translate(-22px);}19%{transform:translate(-25px);}21%{transform:translate(-26px);}23%{transform:translate(-27px);}24%{transform:translate(-28px);}26%{transform:translate(-29px);}29%{transform:translate(-30px);}33%,89%{transform:translate(-31px);}91%{transform:translate(-31px,1px);}94%{transform:translate(-31px,2px);}98%{transform:translate(-31px,3px);}99%{transform:translate(-31px,4px);}100%{transform:translate(-31px,5px);}"]);
|
|
40
24
|
const dotThreeKeyframes = styled.keyframes(["39%{transform:translate(0);}44%{transform:translate(0,1px);}46%{transform:translate(0,2px);}48%{transform:translate(0,3px);}49%{transform:translate(0,4px);}51%{transform:translate(0,5px);}53%{transform:translate(-1px,-6px);}54%{transform:translate(-2px,-13px);}56%{transform:translate(-3px,-15px);}58%{transform:translate(-5px,-19px);}59%{transform:translate(-7px,-21px);}61%{transform:translate(-8px,-22px);}63%{transform:translate(-9px,-24px);}64%{transform:translate(-11px,-25px);}66%{transform:translate(-12px,-26px);}74%{transform:translate(-19px,-26px);}76%{transform:translate(-20px,-25px);}78%{transform:translate(-22px,-24px);}81%{transform:translate(-24px,-21px);}83%{transform:translate(-26px,-19px);}84%{transform:translate(-28px,-15px);}86%{transform:translate(-29px,-13px);}88%{transform:translate(-30px,-6px);}89%{transform:translate(-31px,5px);}91%{transform:translate(-31px,4px);}93%{transform:translate(-31px,3px);}94%{transform:translate(-31px,2px);}98%{transform:translate(-31px,1px);}100%{transform:translate(-31px);}"]);
|
|
@@ -83,7 +67,7 @@ StyledDotsCircleThree.defaultProps = {
|
|
|
83
67
|
const COMPONENT_ID$5 = 'loaders.loading_placeholder';
|
|
84
68
|
const StyledLoadingPlaceholder = styled__default.default.div.attrs({
|
|
85
69
|
'data-garden-id': COMPONENT_ID$5,
|
|
86
|
-
'data-garden-version': '9.0.0-next.
|
|
70
|
+
'data-garden-version': '9.0.0-next.9',
|
|
87
71
|
role: 'progressbar'
|
|
88
72
|
}).withConfig({
|
|
89
73
|
displayName: "StyledLoadingPlaceholder",
|
|
@@ -107,7 +91,7 @@ const sizeToBorderRadius = (size, theme) => sizeToHeight(size, theme) / 2;
|
|
|
107
91
|
const PROGRESS_BACKGROUND_COMPONENT_ID = 'loaders.progress_background';
|
|
108
92
|
const StyledProgressBackground = styled__default.default.div.attrs(props => ({
|
|
109
93
|
'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
|
|
110
|
-
'data-garden-version': '9.0.0-next.
|
|
94
|
+
'data-garden-version': '9.0.0-next.9',
|
|
111
95
|
borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
|
|
112
96
|
})).withConfig({
|
|
113
97
|
displayName: "StyledProgress__StyledProgressBackground",
|
|
@@ -119,7 +103,7 @@ StyledProgressBackground.defaultProps = {
|
|
|
119
103
|
const PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
|
|
120
104
|
const StyledProgressIndicator = styled__default.default.div.attrs(props => ({
|
|
121
105
|
'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
|
|
122
|
-
'data-garden-version': '9.0.0-next.
|
|
106
|
+
'data-garden-version': '9.0.0-next.9',
|
|
123
107
|
height: props.height || sizeToHeight(props.size, props.theme),
|
|
124
108
|
borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
|
|
125
109
|
})).withConfig({
|
|
@@ -162,7 +146,7 @@ const retrieveSkeletonGradient = _ref3 => {
|
|
|
162
146
|
};
|
|
163
147
|
const StyledSkeleton = styled__default.default.div.attrs({
|
|
164
148
|
'data-garden-id': COMPONENT_ID$4,
|
|
165
|
-
'data-garden-version': '9.0.0-next.
|
|
149
|
+
'data-garden-version': '9.0.0-next.9'
|
|
166
150
|
}).withConfig({
|
|
167
151
|
displayName: "StyledSkeleton",
|
|
168
152
|
componentId: "sc-1raozze-0"
|
|
@@ -190,7 +174,7 @@ StyledSpinnerCircle.defaultProps = {
|
|
|
190
174
|
};
|
|
191
175
|
|
|
192
176
|
const StyledSVG = styled__default.default.svg.attrs(props => ({
|
|
193
|
-
'data-garden-version': '9.0.0-next.
|
|
177
|
+
'data-garden-version': '9.0.0-next.9',
|
|
194
178
|
xmlns: 'http://www.w3.org/2000/svg',
|
|
195
179
|
width: props.width,
|
|
196
180
|
height: props.height,
|
|
@@ -220,7 +204,7 @@ StyledCircle.defaultProps = {
|
|
|
220
204
|
};
|
|
221
205
|
const StyledInline = styled__default.default.svg.attrs(props => ({
|
|
222
206
|
'data-garden-id': COMPONENT_ID$3,
|
|
223
|
-
'data-garden-version': '9.0.0-next.
|
|
207
|
+
'data-garden-version': '9.0.0-next.9',
|
|
224
208
|
viewBox: '0 0 16 4',
|
|
225
209
|
width: props.size,
|
|
226
210
|
height: props.size * 0.25
|
|
@@ -271,7 +255,7 @@ const Dots = React.forwardRef((_ref, ref) => {
|
|
|
271
255
|
fontSize: size
|
|
272
256
|
}, "\xA0");
|
|
273
257
|
}
|
|
274
|
-
return React__default.default.createElement(StyledSVG,
|
|
258
|
+
return React__default.default.createElement(StyledSVG, Object.assign({
|
|
275
259
|
ref: ref,
|
|
276
260
|
fontSize: size,
|
|
277
261
|
color: color,
|
|
@@ -320,9 +304,9 @@ const Progress = React__default.default.forwardRef((_ref, ref) => {
|
|
|
320
304
|
'aria-label': label
|
|
321
305
|
}, 'aria-label', 'Progress');
|
|
322
306
|
return (
|
|
323
|
-
React__default.default.createElement(StyledProgressBackground,
|
|
307
|
+
React__default.default.createElement(StyledProgressBackground, Object.assign({
|
|
324
308
|
"data-garden-id": COMPONENT_ID$1,
|
|
325
|
-
"data-garden-version": '9.0.0-next.
|
|
309
|
+
"data-garden-version": '9.0.0-next.9',
|
|
326
310
|
"aria-valuemax": 100,
|
|
327
311
|
"aria-valuemin": 0,
|
|
328
312
|
"aria-valuenow": percentage,
|
|
@@ -354,7 +338,7 @@ const Skeleton = React.forwardRef((_ref, ref) => {
|
|
|
354
338
|
isLight,
|
|
355
339
|
...other
|
|
356
340
|
} = _ref;
|
|
357
|
-
return React__default.default.createElement(StyledSkeleton,
|
|
341
|
+
return React__default.default.createElement(StyledSkeleton, Object.assign({
|
|
358
342
|
ref: ref,
|
|
359
343
|
isLight: isLight,
|
|
360
344
|
customWidth: width,
|
|
@@ -487,7 +471,7 @@ const Spinner = React.forwardRef((_ref, ref) => {
|
|
|
487
471
|
fontSize: size
|
|
488
472
|
}, "\xA0");
|
|
489
473
|
}
|
|
490
|
-
return React__default.default.createElement(StyledSVG,
|
|
474
|
+
return React__default.default.createElement(StyledSVG, Object.assign({
|
|
491
475
|
ref: ref,
|
|
492
476
|
fontSize: size,
|
|
493
477
|
color: color,
|
|
@@ -524,7 +508,7 @@ const Inline = React.forwardRef((_ref, ref) => {
|
|
|
524
508
|
} = _ref;
|
|
525
509
|
const ariaLabel = reactTheming.useText(Inline, other, 'aria-label', 'loading');
|
|
526
510
|
return (
|
|
527
|
-
React__default.default.createElement(StyledInline,
|
|
511
|
+
React__default.default.createElement(StyledInline, Object.assign({
|
|
528
512
|
ref: ref,
|
|
529
513
|
size: size,
|
|
530
514
|
color: color,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-loaders",
|
|
3
|
-
"version": "9.0.0-next.
|
|
3
|
+
"version": "9.0.0-next.9",
|
|
4
4
|
"description": "Components relating to loaders in the Garden Design System",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Zendesk Garden <garden@zendesk.com>",
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"url": "https://github.com/zendeskgarden/react-components/issues"
|
|
11
11
|
},
|
|
12
12
|
"main": "dist/index.cjs.js",
|
|
13
|
-
"module": "dist/index.
|
|
13
|
+
"module": "dist/esm/index.js",
|
|
14
14
|
"files": [
|
|
15
15
|
"dist"
|
|
16
16
|
],
|
|
@@ -26,13 +26,13 @@
|
|
|
26
26
|
"prop-types": "^15.5.7"
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
29
|
-
"@zendeskgarden/react-theming": "
|
|
29
|
+
"@zendeskgarden/react-theming": ">=9.0.0-next",
|
|
30
30
|
"react": ">=16.8.0",
|
|
31
31
|
"react-dom": ">=16.8.0",
|
|
32
32
|
"styled-components": "^5.3.1"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
|
-
"@zendeskgarden/react-theming": "^9.0.0-next.
|
|
35
|
+
"@zendeskgarden/react-theming": "^9.0.0-next.9"
|
|
36
36
|
},
|
|
37
37
|
"keywords": [
|
|
38
38
|
"components",
|
|
@@ -44,5 +44,5 @@
|
|
|
44
44
|
"access": "public"
|
|
45
45
|
},
|
|
46
46
|
"zendeskgarden:src": "src/index.ts",
|
|
47
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "771281b562d376a6aee04b0cd71dd888b3ae4a1d"
|
|
48
48
|
}
|