xmirror-components 1.0.20 → 1.0.22
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 -245
- package/build/es/components/GlobalLoading/index.js +26 -15
- package/build/lib/components/GlobalLoading/index.js +26 -15
- package/build/package.json +1 -1
- package/package.json +1 -1
|
@@ -9,12 +9,23 @@ 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(35px) rotate(0deg); }\n 50% { transform: rotate(360deg) translateX(35px) rotate(-360deg); }\n 100% { transform: rotate(360deg) translateX(35px) rotate(-360deg); }\n"], ["\n 0% { transform: rotate(0deg) translateX(35px) rotate(0deg); }\n 50% { transform: rotate(360deg) translateX(35px) rotate(-360deg); }\n 100% { transform: rotate(360deg) translateX(35px) 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: 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: 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(#0060a7 10%, #1d77b3 100%)',
|
|
22
|
+
backgroundImage: ' linear-gradient(var(--color-primary) 10%, var(--color-primary-hover) 100%)',
|
|
23
|
+
transform: 'rotate(0deg) translateX(35px) rotate(0deg)',
|
|
24
|
+
width: size,
|
|
25
|
+
height: size,
|
|
26
|
+
animation: "".concat(rotate, " 4s ease-in-out infinite"),
|
|
27
|
+
animationDelay: delay || '0s',
|
|
28
|
+
});
|
|
18
29
|
});
|
|
19
30
|
function GlobalLoading() {
|
|
20
31
|
var ref = useRef(null);
|
|
@@ -25,13 +36,13 @@ function GlobalLoading() {
|
|
|
25
36
|
};
|
|
26
37
|
}, []);
|
|
27
38
|
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.
|
|
39
|
+
return (React.createElement(GlobalLoadingWrapper, { ref: ref, className: "global-loading" },
|
|
40
|
+
React.createElement(LoadingContainer, { className: "global-loading-container" },
|
|
41
|
+
React.createElement(Dot, { className: "dot dot-1", size: 15, delay: "0.0s" }),
|
|
42
|
+
React.createElement(Dot, { className: "dot dot-2", size: 13, delay: "0.2s" }),
|
|
43
|
+
React.createElement(Dot, { className: "dot dot-3", size: 11, delay: "0.4s" }),
|
|
44
|
+
React.createElement(Dot, { className: "dot dot-4", size: 9, delay: "0.6s" }),
|
|
45
|
+
React.createElement(Dot, { className: "dot dot-5", size: 7, delay: "0.8s" })),
|
|
35
46
|
React.createElement("svg", { style: {
|
|
36
47
|
visibility: 'hidden',
|
|
37
48
|
position: 'absolute'
|
|
@@ -39,10 +50,10 @@ function GlobalLoading() {
|
|
|
39
50
|
React.createElement("defs", null,
|
|
40
51
|
React.createElement("filter", { id: "goo" },
|
|
41
52
|
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 -
|
|
53
|
+
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
54
|
React.createElement("feComposite", { in: "SourceGraphic", in2: "goo", operator: "atop" }))))));
|
|
44
55
|
}));
|
|
45
56
|
}
|
|
46
57
|
export { setGlobalLoading };
|
|
47
58
|
export default GlobalLoading;
|
|
48
|
-
var templateObject_1, templateObject_2, templateObject_3
|
|
59
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -49,12 +49,23 @@ 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(35px) rotate(0deg); }\n 50% { transform: rotate(360deg) translateX(35px) rotate(-360deg); }\n 100% { transform: rotate(360deg) translateX(35px) rotate(-360deg); }\n"], ["\n 0% { transform: rotate(0deg) translateX(35px) rotate(0deg); }\n 50% { transform: rotate(360deg) translateX(35px) rotate(-360deg); }\n 100% { transform: rotate(360deg) translateX(35px) 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: 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: 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(#0060a7 10%, #1d77b3 100%)',
|
|
62
|
+
backgroundImage: ' linear-gradient(var(--color-primary) 10%, var(--color-primary-hover) 100%)',
|
|
63
|
+
transform: 'rotate(0deg) translateX(35px) rotate(0deg)',
|
|
64
|
+
width: size,
|
|
65
|
+
height: size,
|
|
66
|
+
animation: "".concat(rotate, " 4s ease-in-out infinite"),
|
|
67
|
+
animationDelay: delay || '0s',
|
|
68
|
+
});
|
|
58
69
|
});
|
|
59
70
|
function GlobalLoading() {
|
|
60
71
|
var ref = (0, react_1.useRef)(null);
|
|
@@ -65,13 +76,13 @@ function GlobalLoading() {
|
|
|
65
76
|
};
|
|
66
77
|
}, []);
|
|
67
78
|
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.
|
|
79
|
+
return (react_1.default.createElement(GlobalLoadingWrapper, { ref: ref, className: "global-loading" },
|
|
80
|
+
react_1.default.createElement(LoadingContainer, { className: "global-loading-container" },
|
|
81
|
+
react_1.default.createElement(Dot, { className: "dot dot-1", size: 15, delay: "0.0s" }),
|
|
82
|
+
react_1.default.createElement(Dot, { className: "dot dot-2", size: 13, delay: "0.2s" }),
|
|
83
|
+
react_1.default.createElement(Dot, { className: "dot dot-3", size: 11, delay: "0.4s" }),
|
|
84
|
+
react_1.default.createElement(Dot, { className: "dot dot-4", size: 9, delay: "0.6s" }),
|
|
85
|
+
react_1.default.createElement(Dot, { className: "dot dot-5", size: 7, delay: "0.8s" })),
|
|
75
86
|
react_1.default.createElement("svg", { style: {
|
|
76
87
|
visibility: 'hidden',
|
|
77
88
|
position: 'absolute'
|
|
@@ -79,9 +90,9 @@ function GlobalLoading() {
|
|
|
79
90
|
react_1.default.createElement("defs", null,
|
|
80
91
|
react_1.default.createElement("filter", { id: "goo" },
|
|
81
92
|
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 -
|
|
93
|
+
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
94
|
react_1.default.createElement("feComposite", { in: "SourceGraphic", in2: "goo", operator: "atop" }))))));
|
|
84
95
|
}));
|
|
85
96
|
}
|
|
86
97
|
exports.default = GlobalLoading;
|
|
87
|
-
var templateObject_1, templateObject_2, templateObject_3
|
|
98
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
package/build/package.json
CHANGED