@arcblock/ux 1.16.42 → 1.16.43
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/lib/ActivityIndicator/index.js +61 -15
- package/package.json +4 -4
- package/src/ActivityIndicator/index.js +43 -88
|
@@ -19,7 +19,8 @@ var _Logo = _interopRequireDefault(require("../Logo"));
|
|
|
19
19
|
|
|
20
20
|
var _Colors = _interopRequireDefault(require("../Colors"));
|
|
21
21
|
|
|
22
|
-
const _excluded = ["messages", "interval"]
|
|
22
|
+
const _excluded = ["messages", "interval"],
|
|
23
|
+
_excluded2 = ["size", "orbitColor", "atomColor", "duration"];
|
|
23
24
|
|
|
24
25
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
25
26
|
|
|
@@ -59,19 +60,21 @@ function ActivityIndicator(_ref) {
|
|
|
59
60
|
transform: 'scale(0.6)'
|
|
60
61
|
},
|
|
61
62
|
showText: false
|
|
62
|
-
}), /*#__PURE__*/_react.default.createElement(
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
}, /*#__PURE__*/_react.default.createElement(
|
|
73
|
-
|
|
74
|
-
|
|
63
|
+
}), /*#__PURE__*/_react.default.createElement(Orbit, {
|
|
64
|
+
size: 56,
|
|
65
|
+
orbitColor: _green.default[500],
|
|
66
|
+
atomColor: _green.default[500],
|
|
67
|
+
duration: 1
|
|
68
|
+
}), /*#__PURE__*/_react.default.createElement(Orbit, {
|
|
69
|
+
size: 80,
|
|
70
|
+
orbitColor: _blue.default[800],
|
|
71
|
+
atomColor: _blue.default[800],
|
|
72
|
+
duration: 1.5
|
|
73
|
+
}), /*#__PURE__*/_react.default.createElement(Orbit, {
|
|
74
|
+
size: 100,
|
|
75
|
+
orbitColor: _Colors.default.grey[900],
|
|
76
|
+
atomColor: _Colors.default.grey[900]
|
|
77
|
+
}))));
|
|
75
78
|
}
|
|
76
79
|
|
|
77
80
|
ActivityIndicator.propTypes = {
|
|
@@ -86,4 +89,47 @@ ActivityIndicator.defaultProps = {
|
|
|
86
89
|
const Div = _styledComponents.default.div.withConfig({
|
|
87
90
|
displayName: "ActivityIndicator__Div",
|
|
88
91
|
componentId: "sc-rsk6jb-0"
|
|
89
|
-
})(["&&{padding:20px;width:100%;height:100%;min-height:360px;z-index:100;transition:opacity 0.5s linear;display:flex;align-items:center;flex-direction:column;justify-content:center;}
|
|
92
|
+
})(["&&{box-sizing:border-box;padding:20px;width:100%;height:100%;min-height:360px;z-index:100;transition:opacity 0.5s linear;display:flex;align-items:center;flex-direction:column;justify-content:center;}.pm-loader-text{color:", ";font-size:14px;text-align:center;position:relative;height:70px;-webkit-user-select:none;}.pm-loader-container{width:100%;height:100%;display:flex;align-items:center;flex-direction:column;justify-content:center;flex:1;}.pm-loader-atoms{width:100px;height:100px;display:flex;position:relative;align-items:center;justify-content:center;}"], _Colors.default.grey[900]);
|
|
93
|
+
|
|
94
|
+
const Orbit = _ref2 => {
|
|
95
|
+
let {
|
|
96
|
+
size,
|
|
97
|
+
orbitColor,
|
|
98
|
+
atomColor,
|
|
99
|
+
duration
|
|
100
|
+
} = _ref2,
|
|
101
|
+
rest = _objectWithoutProperties(_ref2, _excluded2);
|
|
102
|
+
|
|
103
|
+
return /*#__PURE__*/_react.default.createElement(OrbitRoot, Object.assign({
|
|
104
|
+
$duration: duration,
|
|
105
|
+
style: {
|
|
106
|
+
width: size,
|
|
107
|
+
height: size,
|
|
108
|
+
border: "1px solid ".concat(orbitColor)
|
|
109
|
+
}
|
|
110
|
+
}, rest), /*#__PURE__*/_react.default.createElement("div", {
|
|
111
|
+
style: {
|
|
112
|
+
background: atomColor
|
|
113
|
+
}
|
|
114
|
+
}));
|
|
115
|
+
};
|
|
116
|
+
|
|
117
|
+
Orbit.propTypes = {
|
|
118
|
+
size: _propTypes.default.number.isRequired,
|
|
119
|
+
orbitColor: _propTypes.default.string.isRequired,
|
|
120
|
+
atomColor: _propTypes.default.string.isRequired,
|
|
121
|
+
duration: _propTypes.default.number
|
|
122
|
+
};
|
|
123
|
+
Orbit.defaultProps = {
|
|
124
|
+
duration: 2
|
|
125
|
+
};
|
|
126
|
+
|
|
127
|
+
const OrbitRoot = _styledComponents.default.div.withConfig({
|
|
128
|
+
displayName: "ActivityIndicator__OrbitRoot",
|
|
129
|
+
componentId: "sc-rsk6jb-1"
|
|
130
|
+
})(["@keyframes orbit{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}position:absolute;border-radius:50%;animation:orbit ", "s infinite;animation-timing-function:linear;transform-origin:center;> div{position:absolute;top:50%;width:6px;height:6px;transform:translateX(-50%);border-radius:50%;}"], _ref3 => {
|
|
131
|
+
let {
|
|
132
|
+
$duration
|
|
133
|
+
} = _ref3;
|
|
134
|
+
return $duration;
|
|
135
|
+
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arcblock/ux",
|
|
3
|
-
"version": "1.16.
|
|
3
|
+
"version": "1.16.43",
|
|
4
4
|
"description": "Common used react components for arcblock products",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -53,10 +53,10 @@
|
|
|
53
53
|
"react": ">=16.12.0",
|
|
54
54
|
"react-ga": "^2.7.0"
|
|
55
55
|
},
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "e4ea73a6f81cb2b5ef424bf15158091432bcc75b",
|
|
57
57
|
"dependencies": {
|
|
58
|
-
"@arcblock/icons": "^1.16.
|
|
59
|
-
"@arcblock/react-hooks": "^1.16.
|
|
58
|
+
"@arcblock/icons": "^1.16.43",
|
|
59
|
+
"@arcblock/react-hooks": "^1.16.43",
|
|
60
60
|
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
|
61
61
|
"@material-ui/core": "^4.12.3",
|
|
62
62
|
"@material-ui/icons": "4.11.2",
|
|
@@ -29,15 +29,9 @@ export default function ActivityIndicator({ messages, interval, ...rest }) {
|
|
|
29
29
|
</div>
|
|
30
30
|
<div className="pm-loader-atoms">
|
|
31
31
|
<Logo style={{ transform: 'scale(0.6)' }} showText={false} />
|
|
32
|
-
<
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
<div className="pm-loader-orbit-2">
|
|
36
|
-
<div className="pm-loader-atom-2" />
|
|
37
|
-
</div>
|
|
38
|
-
<div className="pm-loader-orbit-3">
|
|
39
|
-
<div className="pm-loader-atom-3" />
|
|
40
|
-
</div>
|
|
32
|
+
<Orbit size={56} orbitColor={green[500]} atomColor={green[500]} duration={1} />
|
|
33
|
+
<Orbit size={80} orbitColor={blue[800]} atomColor={blue[800]} duration={1.5} />
|
|
34
|
+
<Orbit size={100} orbitColor={colors.grey[900]} atomColor={colors.grey[900]} />
|
|
41
35
|
</div>
|
|
42
36
|
</div>
|
|
43
37
|
</Div>
|
|
@@ -56,6 +50,7 @@ ActivityIndicator.defaultProps = {
|
|
|
56
50
|
|
|
57
51
|
const Div = styled.div`
|
|
58
52
|
&& {
|
|
53
|
+
box-sizing: border-box;
|
|
59
54
|
padding: 20px;
|
|
60
55
|
width: 100%;
|
|
61
56
|
height: 100%;
|
|
@@ -68,16 +63,6 @@ const Div = styled.div`
|
|
|
68
63
|
justify-content: center;
|
|
69
64
|
}
|
|
70
65
|
|
|
71
|
-
@keyframes orbit {
|
|
72
|
-
0% {
|
|
73
|
-
transform: rotate(0deg);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
100% {
|
|
77
|
-
transform: rotate(360deg);
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
|
|
81
66
|
.pm-loader-text {
|
|
82
67
|
color: ${colors.grey[900]};
|
|
83
68
|
font-size: 14px;
|
|
@@ -105,82 +90,52 @@ const Div = styled.div`
|
|
|
105
90
|
align-items: center;
|
|
106
91
|
justify-content: center;
|
|
107
92
|
}
|
|
93
|
+
`;
|
|
108
94
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
top: 20px;
|
|
120
|
-
left: 20px;
|
|
121
|
-
width: 56px;
|
|
122
|
-
height: 56px;
|
|
123
|
-
position: absolute;
|
|
124
|
-
border-radius: 50%;
|
|
125
|
-
border: 1px solid ${green[500]};
|
|
126
|
-
}
|
|
95
|
+
const Orbit = ({ size, orbitColor, atomColor, duration, ...rest }) => {
|
|
96
|
+
return (
|
|
97
|
+
<OrbitRoot
|
|
98
|
+
$duration={duration}
|
|
99
|
+
style={{ width: size, height: size, border: `1px solid ${orbitColor}` }}
|
|
100
|
+
{...rest}>
|
|
101
|
+
<div style={{ background: atomColor }} />
|
|
102
|
+
</OrbitRoot>
|
|
103
|
+
);
|
|
104
|
+
};
|
|
127
105
|
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
position: absolute;
|
|
135
|
-
border: 1px solid ${blue[800]};
|
|
136
|
-
}
|
|
106
|
+
Orbit.propTypes = {
|
|
107
|
+
size: PropTypes.number.isRequired,
|
|
108
|
+
orbitColor: PropTypes.string.isRequired,
|
|
109
|
+
atomColor: PropTypes.string.isRequired,
|
|
110
|
+
duration: PropTypes.number,
|
|
111
|
+
};
|
|
137
112
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
width: 104px;
|
|
142
|
-
height: 104px;
|
|
143
|
-
position: absolute;
|
|
144
|
-
border-radius: 50%;
|
|
145
|
-
border: 1px solid ${colors.grey[900]};
|
|
146
|
-
}
|
|
113
|
+
Orbit.defaultProps = {
|
|
114
|
+
duration: 2,
|
|
115
|
+
};
|
|
147
116
|
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
animation: orbit 1s infinite;
|
|
157
|
-
animation-timing-function: linear;
|
|
158
|
-
-webkit-transform-origin: 24px 24px;
|
|
117
|
+
const OrbitRoot = styled.div`
|
|
118
|
+
@keyframes orbit {
|
|
119
|
+
0% {
|
|
120
|
+
transform: rotate(0deg);
|
|
121
|
+
}
|
|
122
|
+
100% {
|
|
123
|
+
transform: rotate(360deg);
|
|
124
|
+
}
|
|
159
125
|
}
|
|
160
126
|
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
border-radius: 50%;
|
|
167
|
-
background-color: ${blue[800]};
|
|
168
|
-
transform-origin: 32px 32px;
|
|
169
|
-
animation: orbit 2s infinite;
|
|
170
|
-
animation-timing-function: linear;
|
|
171
|
-
-webkit-transform-origin: 32px 32px;
|
|
172
|
-
}
|
|
127
|
+
position: absolute;
|
|
128
|
+
border-radius: 50%;
|
|
129
|
+
animation: orbit ${({ $duration }) => $duration}s infinite;
|
|
130
|
+
animation-timing-function: linear;
|
|
131
|
+
transform-origin: center;
|
|
173
132
|
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
133
|
+
> div {
|
|
134
|
+
position: absolute;
|
|
135
|
+
top: 50%;
|
|
136
|
+
width: 6px;
|
|
137
|
+
height: 6px;
|
|
138
|
+
transform: translateX(-50%);
|
|
179
139
|
border-radius: 50%;
|
|
180
|
-
background-color: ${colors.grey[900]};
|
|
181
|
-
transform-origin: 41px 41px;
|
|
182
|
-
animation: orbit 3s infinite;
|
|
183
|
-
animation-timing-function: linear;
|
|
184
|
-
-webkit-transform-origin: 41px 41px;
|
|
185
140
|
}
|
|
186
141
|
`;
|