xmirror-components 1.0.20 → 1.0.21
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/build/dist/index.cjs +51 -34
- package/build/dist/index.mjs +275 -246
- package/build/es/components/GlobalLoading/index.js +26 -16
- package/build/lib/components/GlobalLoading/index.js +26 -16
- package/build/package.json +1 -1
- package/package.json +1 -1
|
@@ -9,29 +9,39 @@ import { keyframes } from '@emotion/react';
|
|
|
9
9
|
var setGlobalLoading = function (_value) {
|
|
10
10
|
console.warn('GlobalLoading 未被引入，你可以直接使用 App 组件，或直接引用 GlobalLoading 组件到项目中！');
|
|
11
11
|
};
|
|
12
|
-
var
|
|
13
|
-
var
|
|
14
|
-
var
|
|
15
|
-
var Dot = styled.div(
|
|
16
|
-
var delay = _a.delay;
|
|
17
|
-
return
|
|
12
|
+
var rotate = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n 0% { transform: rotate(0deg) translateX(30px) rotate(0deg); }\n 50% { transform: rotate(360deg) translateX(30px) rotate(-360deg); }\n 100% { transform: rotate(360deg) translateX(30px) rotate(-360deg); }\n"], ["\n 0% { transform: rotate(0deg) translateX(30px) rotate(0deg); }\n 50% { transform: rotate(360deg) translateX(30px) rotate(-360deg); }\n 100% { transform: rotate(360deg) translateX(30px) rotate(-360deg); }\n"])));
|
|
13
|
+
var GlobalLoadingWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n z-index: 999999;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.3);\n opacity: 1;\n transition: opacity 500ms;\n &.global-loading-transition-enter {\n opacity: 0;\n }\n &.global-loading-transition-enter-active {\n opacity: 1;\n }\n &.global-loading-transition-exit {\n opacity: 1;\n }\n &.global-loading-transition-exit-active {\n opacity: 0;\n }\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n z-index: 999999;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.3);\n opacity: 1;\n transition: opacity 500ms;\n &.global-loading-transition-enter {\n opacity: 0;\n }\n &.global-loading-transition-enter-active {\n opacity: 1;\n }\n &.global-loading-transition-exit {\n opacity: 1;\n }\n &.global-loading-transition-exit-active {\n opacity: 0;\n }\n"])));
|
|
14
|
+
var LoadingContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 120px;\n height: 120px;\n position: relative;\n filter: url('#goo');\n margin: 400px auto;\n transform: rotateZ(-90deg);\n display: flex;\n justify-content: center;\n align-items: center;\n"], ["\n width: 120px;\n height: 120px;\n position: relative;\n filter: url('#goo');\n margin: 400px auto;\n transform: rotateZ(-90deg);\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
|
|
15
|
+
var Dot = styled.div(function (_a) {
|
|
16
|
+
var size = _a.size, delay = _a.delay;
|
|
17
|
+
return ({
|
|
18
|
+
position: 'absolute',
|
|
19
|
+
margin: 'auto',
|
|
20
|
+
borderRadius: '50%',
|
|
21
|
+
backgroundImage: ' linear-gradient(var(--color-primary) 10%, var(--color-primary-hover) 100%)',
|
|
22
|
+
transform: 'rotate(0deg) translateX(30px) rotate(0deg)',
|
|
23
|
+
width: size,
|
|
24
|
+
height: size,
|
|
25
|
+
animation: "".concat(rotate, " 4s ease-in-out infinite"),
|
|
26
|
+
animationDelay: delay || '0s',
|
|
27
|
+
});
|
|
18
28
|
});
|
|
19
29
|
function GlobalLoading() {
|
|
20
30
|
var ref = useRef(null);
|
|
21
|
-
var _a = useState(
|
|
31
|
+
var _a = useState(true), loading = _a[0], setLoading = _a[1];
|
|
22
32
|
useEffect(function () {
|
|
23
33
|
setGlobalLoading = function (value) {
|
|
24
34
|
setLoading(value);
|
|
25
35
|
};
|
|
26
36
|
}, []);
|
|
27
37
|
return (React.createElement(CSSTransition, { in: loading, nodeRef: ref, timeout: 500, classNames: "global-loading-transition", unmountOnExit: true }, function () {
|
|
28
|
-
return (React.createElement(GlobalLoadingWrapper, { ref: ref },
|
|
29
|
-
React.createElement(LoadingContainer,
|
|
30
|
-
React.createElement(Dot, { delay: 0 }),
|
|
31
|
-
React.createElement(Dot, { delay: 0.
|
|
32
|
-
React.createElement(Dot, { delay: 0.
|
|
33
|
-
React.createElement(Dot, { delay: 0.
|
|
34
|
-
React.createElement(Dot, { delay: 0.
|
|
38
|
+
return (React.createElement(GlobalLoadingWrapper, { ref: ref, className: "global-loading" },
|
|
39
|
+
React.createElement(LoadingContainer, { className: "global-loading-container" },
|
|
40
|
+
React.createElement(Dot, { className: "dot dot-1", size: 15, delay: "0.0s" }),
|
|
41
|
+
React.createElement(Dot, { className: "dot dot-2", size: 13, delay: "0.2s" }),
|
|
42
|
+
React.createElement(Dot, { className: "dot dot-3", size: 11, delay: "0.4s" }),
|
|
43
|
+
React.createElement(Dot, { className: "dot dot-4", size: 9, delay: "0.6s" }),
|
|
44
|
+
React.createElement(Dot, { className: "dot dot-5", size: 7, delay: "0.8s" })),
|
|
35
45
|
React.createElement("svg", { style: {
|
|
36
46
|
visibility: 'hidden',
|
|
37
47
|
position: 'absolute'
|
|
@@ -39,10 +49,10 @@ function GlobalLoading() {
|
|
|
39
49
|
React.createElement("defs", null,
|
|
40
50
|
React.createElement("filter", { id: "goo" },
|
|
41
51
|
React.createElement("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "3", result: "blur" }),
|
|
42
|
-
React.createElement("feColorMatrix", { in: "blur", type: "matrix", values: "\n 1 0 0 0 0\n 0 1 0 0 0\n 0 0 1 0 0\n 0 0 0 18 -
|
|
52
|
+
React.createElement("feColorMatrix", { in: "blur", type: "matrix", values: "\n 1 0 0 0 0\n 0 1 0 0 0\n 0 0 1 0 0\n 0 0 0 18 -6" }),
|
|
43
53
|
React.createElement("feComposite", { in: "SourceGraphic", in2: "goo", operator: "atop" }))))));
|
|
44
54
|
}));
|
|
45
55
|
}
|
|
46
56
|
export { setGlobalLoading };
|
|
47
57
|
export default GlobalLoading;
|
|
48
|
-
var templateObject_1, templateObject_2, templateObject_3
|
|
58
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -49,29 +49,39 @@ var setGlobalLoading = function (_value) {
|
|
|
49
49
|
console.warn('GlobalLoading 未被引入，你可以直接使用 App 组件，或直接引用 GlobalLoading 组件到项目中！');
|
|
50
50
|
};
|
|
51
51
|
exports.setGlobalLoading = setGlobalLoading;
|
|
52
|
-
var
|
|
53
|
-
var
|
|
54
|
-
var
|
|
55
|
-
var Dot = styled_1.default.div(
|
|
56
|
-
var delay = _a.delay;
|
|
57
|
-
return
|
|
52
|
+
var rotate = (0, react_2.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n 0% { transform: rotate(0deg) translateX(30px) rotate(0deg); }\n 50% { transform: rotate(360deg) translateX(30px) rotate(-360deg); }\n 100% { transform: rotate(360deg) translateX(30px) rotate(-360deg); }\n"], ["\n 0% { transform: rotate(0deg) translateX(30px) rotate(0deg); }\n 50% { transform: rotate(360deg) translateX(30px) rotate(-360deg); }\n 100% { transform: rotate(360deg) translateX(30px) rotate(-360deg); }\n"])));
|
|
53
|
+
var GlobalLoadingWrapper = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n z-index: 999999;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.3);\n opacity: 1;\n transition: opacity 500ms;\n &.global-loading-transition-enter {\n opacity: 0;\n }\n &.global-loading-transition-enter-active {\n opacity: 1;\n }\n &.global-loading-transition-exit {\n opacity: 1;\n }\n &.global-loading-transition-exit-active {\n opacity: 0;\n }\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n z-index: 999999;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.3);\n opacity: 1;\n transition: opacity 500ms;\n &.global-loading-transition-enter {\n opacity: 0;\n }\n &.global-loading-transition-enter-active {\n opacity: 1;\n }\n &.global-loading-transition-exit {\n opacity: 1;\n }\n &.global-loading-transition-exit-active {\n opacity: 0;\n }\n"])));
|
|
54
|
+
var LoadingContainer = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 120px;\n height: 120px;\n position: relative;\n filter: url('#goo');\n margin: 400px auto;\n transform: rotateZ(-90deg);\n display: flex;\n justify-content: center;\n align-items: center;\n"], ["\n width: 120px;\n height: 120px;\n position: relative;\n filter: url('#goo');\n margin: 400px auto;\n transform: rotateZ(-90deg);\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
|
|
55
|
+
var Dot = styled_1.default.div(function (_a) {
|
|
56
|
+
var size = _a.size, delay = _a.delay;
|
|
57
|
+
return ({
|
|
58
|
+
position: 'absolute',
|
|
59
|
+
margin: 'auto',
|
|
60
|
+
borderRadius: '50%',
|
|
61
|
+
backgroundImage: ' linear-gradient(var(--color-primary) 10%, var(--color-primary-hover) 100%)',
|
|
62
|
+
transform: 'rotate(0deg) translateX(30px) rotate(0deg)',
|
|
63
|
+
width: size,
|
|
64
|
+
height: size,
|
|
65
|
+
animation: "".concat(rotate, " 4s ease-in-out infinite"),
|
|
66
|
+
animationDelay: delay || '0s',
|
|
67
|
+
});
|
|
58
68
|
});
|
|
59
69
|
function GlobalLoading() {
|
|
60
70
|
var ref = (0, react_1.useRef)(null);
|
|
61
|
-
var _a = (0, react_1.useState)(
|
|
71
|
+
var _a = (0, react_1.useState)(true), loading = _a[0], setLoading = _a[1];
|
|
62
72
|
(0, react_1.useEffect)(function () {
|
|
63
73
|
exports.setGlobalLoading = setGlobalLoading = function (value) {
|
|
64
74
|
setLoading(value);
|
|
65
75
|
};
|
|
66
76
|
}, []);
|
|
67
77
|
return (react_1.default.createElement(react_transition_group_1.CSSTransition, { in: loading, nodeRef: ref, timeout: 500, classNames: "global-loading-transition", unmountOnExit: true }, function () {
|
|
68
|
-
return (react_1.default.createElement(GlobalLoadingWrapper, { ref: ref },
|
|
69
|
-
react_1.default.createElement(LoadingContainer,
|
|
70
|
-
react_1.default.createElement(Dot, { delay: 0 }),
|
|
71
|
-
react_1.default.createElement(Dot, { delay: 0.
|
|
72
|
-
react_1.default.createElement(Dot, { delay: 0.
|
|
73
|
-
react_1.default.createElement(Dot, { delay: 0.
|
|
74
|
-
react_1.default.createElement(Dot, { delay: 0.
|
|
78
|
+
return (react_1.default.createElement(GlobalLoadingWrapper, { ref: ref, className: "global-loading" },
|
|
79
|
+
react_1.default.createElement(LoadingContainer, { className: "global-loading-container" },
|
|
80
|
+
react_1.default.createElement(Dot, { className: "dot dot-1", size: 15, delay: "0.0s" }),
|
|
81
|
+
react_1.default.createElement(Dot, { className: "dot dot-2", size: 13, delay: "0.2s" }),
|
|
82
|
+
react_1.default.createElement(Dot, { className: "dot dot-3", size: 11, delay: "0.4s" }),
|
|
83
|
+
react_1.default.createElement(Dot, { className: "dot dot-4", size: 9, delay: "0.6s" }),
|
|
84
|
+
react_1.default.createElement(Dot, { className: "dot dot-5", size: 7, delay: "0.8s" })),
|
|
75
85
|
react_1.default.createElement("svg", { style: {
|
|
76
86
|
visibility: 'hidden',
|
|
77
87
|
position: 'absolute'
|
|
@@ -79,9 +89,9 @@ function GlobalLoading() {
|
|
|
79
89
|
react_1.default.createElement("defs", null,
|
|
80
90
|
react_1.default.createElement("filter", { id: "goo" },
|
|
81
91
|
react_1.default.createElement("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "3", result: "blur" }),
|
|
82
|
-
react_1.default.createElement("feColorMatrix", { in: "blur", type: "matrix", values: "\n 1 0 0 0 0\n 0 1 0 0 0\n 0 0 1 0 0\n 0 0 0 18 -
|
|
92
|
+
react_1.default.createElement("feColorMatrix", { in: "blur", type: "matrix", values: "\n 1 0 0 0 0\n 0 1 0 0 0\n 0 0 1 0 0\n 0 0 0 18 -6" }),
|
|
83
93
|
react_1.default.createElement("feComposite", { in: "SourceGraphic", in2: "goo", operator: "atop" }))))));
|
|
84
94
|
}));
|
|
85
95
|
}
|
|
86
96
|
exports.default = GlobalLoading;
|
|
87
|
-
var templateObject_1, templateObject_2, templateObject_3
|
|
97
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
package/build/package.json
CHANGED