@arcblock/ux 1.16.51 → 1.16.54
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/Blocklet/index.js +3 -4
- package/lib/Spinner/index.js +1 -20
- package/package.json +4 -4
- package/src/Blocklet/index.js +3 -8
- package/src/Spinner/index.js +0 -14
package/lib/Blocklet/index.js
CHANGED
|
@@ -45,12 +45,12 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
45
45
|
const Div = _styledComponents.default.div.withConfig({
|
|
46
46
|
displayName: "Blocklet__Div",
|
|
47
47
|
componentId: "sc-3dga5l-0"
|
|
48
|
-
})(["&.arcblock-blocklet{padding:0 16px;background:", ";overflow:hidden;box-shadow:0px 0px 8px #f0f0f0;&:hover{box-shadow:0px 2px 12px #f0f0f0;}}.arcblock-blocklet__content{padding:16px 0 0 0;}.arcblock-blocklet__content--main{display:flex;align-items:center;cursor:pointer;}.arcblock-blocklet__content--body{overflow:hidden;flex:1;display:flex;align-items:flex-start;}.arcblock-blocklet__addons{padding:16px 0;}.arcblock-blocklet__cover{width:80px;height:80px;margin-right:12px;overflow:hidden;border-radius:12px;transform:translateZ(0);}.arcblock-blocklet__info{flex:1;overflow:hidden;.arcblock-blocklet__button{margin-top:16px;display:inline-block;}}.arcblock-blocklet__button--hover{&:not(.Mui-disabled){position:relative;z-index:1;&::before{content:'';
|
|
48
|
+
})(["&.arcblock-blocklet{padding:0 16px;background:", ";overflow:hidden;box-shadow:0px 0px 8px #f0f0f0;&:hover{box-shadow:0px 2px 12px #f0f0f0;}}.arcblock-blocklet__content{padding:16px 0 0 0;}.arcblock-blocklet__content--main{display:flex;align-items:center;cursor:pointer;}.arcblock-blocklet__content--body{overflow:hidden;flex:1;display:flex;align-items:flex-start;}.arcblock-blocklet__addons{padding:16px 0;}.arcblock-blocklet__cover{width:80px;height:80px;margin-right:12px;overflow:hidden;border-radius:12px;transform:translateZ(0);}.arcblock-blocklet__info{flex:1;overflow:hidden;.arcblock-blocklet__button{margin-top:16px;display:inline-block;}}.arcblock-blocklet__button--hover{&:not(.Mui-disabled){position:relative;z-index:1;&::before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;transition:opacity 0.3s;}&:hover::before{opacity:0;}&::after{content:'';position:absolute;height:100%;width:100%;background-color:", ";transform:scale(0.1);opacity:0;z-index:-1;transition:transform 0.3s,opacity 0.3s,background-color 0.3s;}&:hover::after{opacity:1;transform-origin:center;transform:scale(1);}}&:not(.Mui-disabled){background-color:transparent !important;color:", ";}&:not(.Mui-disabled){&:hover{color:", ";}}}.arcblock-blocklet__title{margin:0;font-size:18px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__describe{margin:0 0 2px 0;color:#999;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__addons{display:flex;justify-content:space-between;color:#999;font-size:14px;position:relative;}.arcblock-blocklet__addons--item{white-space:nowrap;}&.arcblock-blocklet--size-md{&:hover{position:relative;}.arcblock-blocklet__title{height:2.3em;margin-bottom:3px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:initial;white-space:initial;word-break:break-all;}.arcblock-blocklet__describe{white-space:normal;height:2.86em;}.arcblock-blocklet__button{margin-top:5px;}}&.arcblock-blocklet--size-sm,&.arcblock-blocklet--size-xs{.arcblock-blocklet__cover{width:40px;height:40px;border-radius:6px;}.arcblock-blocklet__content{padding:16px 0;}.arcblock-blocklet__addons{padding:8px 0;.arcblock-blocklet__addons--item{font-size:12px;}}}&.arcblock-blocklet--size-xs{.arcblock-blocklet__addons{display:none !important;}}"], props => props.theme.palette.common.white, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white);
|
|
49
49
|
|
|
50
50
|
const ActionButton = _styledComponents.default.div.withConfig({
|
|
51
51
|
displayName: "Blocklet__ActionButton",
|
|
52
52
|
componentId: "sc-3dga5l-1"
|
|
53
|
-
})(["background-color:transparent !important;& >:not(.Mui-disabled){position:relative;z-index:1;&::before{content:'';
|
|
53
|
+
})(["background-color:transparent !important;& >:not(.Mui-disabled){position:relative;z-index:1;&::before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;transition:opacity 0.3s;}&:hover::before{opacity:0;}&::after{content:'';position:absolute;height:100%;width:100%;background-color:", ";transform:scale(0.1);opacity:0;z-index:-1;transition:transform 0.3s,opacity 0.3s,background-color 0.3s;}&:hover::after{opacity:1;transform-origin:center;transform:scale(1);}}& >:not(.Mui-disabled){background-color:transparent !important;color:", "!important;}& >:not(.Mui-disabled){&:hover{color:", "!important;}}"], props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white);
|
|
54
54
|
|
|
55
55
|
exports.ActionButton = ActionButton;
|
|
56
56
|
|
|
@@ -189,9 +189,8 @@ function Blocklet(_ref2) {
|
|
|
189
189
|
display: isStickyButton ? 'block' : ''
|
|
190
190
|
}
|
|
191
191
|
}, button || onButtonClick && /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
192
|
-
rounded: true,
|
|
193
192
|
className: "arcblock-blocklet__button--hover",
|
|
194
|
-
variant: "
|
|
193
|
+
variant: "outlined",
|
|
195
194
|
color: "primary",
|
|
196
195
|
size: "small",
|
|
197
196
|
disabled: buttonDisabled || buttonLoading,
|
package/lib/Spinner/index.js
CHANGED
|
@@ -7,8 +7,6 @@ exports.default = Spinner;
|
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
|
10
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
10
|
var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));
|
|
13
11
|
|
|
14
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -28,29 +26,12 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
|
|
|
28
26
|
* - color 默认使用 #4598fa, 如果调用方传入了 color prop 或 style#color, 则默认 color 被覆盖
|
|
29
27
|
*/
|
|
30
28
|
function Spinner(props) {
|
|
31
|
-
var _props$style;
|
|
32
|
-
|
|
33
29
|
const _props = _objectSpread({}, props); // 兼容之前的 size prop (设置外圈/内圈的尺寸)
|
|
34
30
|
|
|
35
31
|
|
|
36
32
|
if (_props.size && Array.isArray(_props.size)) {
|
|
37
33
|
[_props.size] = _props.size;
|
|
38
|
-
} // 默认 color: #4598fa
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
if (!(_props.color || (_props$style = _props.style) !== null && _props$style !== void 0 && _props$style.color)) {
|
|
42
|
-
_props.style = _objectSpread(_objectSpread({}, _props.style), {}, {
|
|
43
|
-
color: '#4598fa'
|
|
44
|
-
});
|
|
45
34
|
}
|
|
46
35
|
|
|
47
36
|
return /*#__PURE__*/_react.default.createElement(_CircularProgress.default, _props);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
Spinner.propTypes = {
|
|
51
|
-
// 改为基于 @material-ui/core/CircularProgress 的实现后, 该 prop 将被废弃
|
|
52
|
-
duration: _propTypes.default.array
|
|
53
|
-
};
|
|
54
|
-
Spinner.defaultProps = {
|
|
55
|
-
duration: [1, 1.6]
|
|
56
|
-
};
|
|
37
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arcblock/ux",
|
|
3
|
-
"version": "1.16.
|
|
3
|
+
"version": "1.16.54",
|
|
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": "070dd99f5cf6961813e61ce533dd2d54c0611b95",
|
|
57
57
|
"dependencies": {
|
|
58
|
-
"@arcblock/icons": "^1.16.
|
|
59
|
-
"@arcblock/react-hooks": "^1.16.
|
|
58
|
+
"@arcblock/icons": "^1.16.54",
|
|
59
|
+
"@arcblock/react-hooks": "^1.16.54",
|
|
60
60
|
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
|
61
61
|
"@fontsource/lato": "^4.5.3",
|
|
62
62
|
"@material-ui/core": "^4.12.3",
|
package/src/Blocklet/index.js
CHANGED
|
@@ -64,7 +64,6 @@ const Div = styled.div`
|
|
|
64
64
|
z-index: 1;
|
|
65
65
|
&::before {
|
|
66
66
|
content: '';
|
|
67
|
-
border-radius: 100vw;
|
|
68
67
|
position: absolute;
|
|
69
68
|
height: 100%;
|
|
70
69
|
width: 100%;
|
|
@@ -84,7 +83,6 @@ const Div = styled.div`
|
|
|
84
83
|
transform: scale(0.1);
|
|
85
84
|
opacity: 0;
|
|
86
85
|
z-index: -1;
|
|
87
|
-
border-radius: 100vw;
|
|
88
86
|
transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
|
|
89
87
|
}
|
|
90
88
|
&:hover::after {
|
|
@@ -95,7 +93,7 @@ const Div = styled.div`
|
|
|
95
93
|
}
|
|
96
94
|
|
|
97
95
|
&:not(.Mui-disabled) {
|
|
98
|
-
background-color:
|
|
96
|
+
background-color: transparent !important;
|
|
99
97
|
color: ${props => props.theme.palette.primary.main};
|
|
100
98
|
}
|
|
101
99
|
&:not(.Mui-disabled) {
|
|
@@ -185,7 +183,6 @@ const ActionButton = styled.div`
|
|
|
185
183
|
z-index: 1;
|
|
186
184
|
&::before {
|
|
187
185
|
content: '';
|
|
188
|
-
border-radius: 100vw;
|
|
189
186
|
position: absolute;
|
|
190
187
|
height: 100%;
|
|
191
188
|
width: 100%;
|
|
@@ -205,7 +202,6 @@ const ActionButton = styled.div`
|
|
|
205
202
|
transform: scale(0.1);
|
|
206
203
|
opacity: 0;
|
|
207
204
|
z-index: -1;
|
|
208
|
-
border-radius: 100vw;
|
|
209
205
|
transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
|
|
210
206
|
}
|
|
211
207
|
&:hover::after {
|
|
@@ -215,7 +211,7 @@ const ActionButton = styled.div`
|
|
|
215
211
|
}
|
|
216
212
|
}
|
|
217
213
|
& > :not(.Mui-disabled) {
|
|
218
|
-
background-color:
|
|
214
|
+
background-color: transparent !important;
|
|
219
215
|
color: ${props => props.theme.palette.primary.main}!important;
|
|
220
216
|
}
|
|
221
217
|
& > :not(.Mui-disabled) {
|
|
@@ -340,9 +336,8 @@ export default function Blocklet({
|
|
|
340
336
|
{button ||
|
|
341
337
|
(onButtonClick && (
|
|
342
338
|
<Button
|
|
343
|
-
rounded
|
|
344
339
|
className="arcblock-blocklet__button--hover"
|
|
345
|
-
variant="
|
|
340
|
+
variant="outlined"
|
|
346
341
|
color="primary"
|
|
347
342
|
size="small"
|
|
348
343
|
disabled={buttonDisabled || buttonLoading}
|
package/src/Spinner/index.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
2
|
import CircularProgress from '@material-ui/core/CircularProgress';
|
|
4
3
|
|
|
5
4
|
/**
|
|
@@ -16,18 +15,5 @@ export default function Spinner(props) {
|
|
|
16
15
|
if (_props.size && Array.isArray(_props.size)) {
|
|
17
16
|
[_props.size] = _props.size;
|
|
18
17
|
}
|
|
19
|
-
// 默认 color: #4598fa
|
|
20
|
-
if (!(_props.color || _props.style?.color)) {
|
|
21
|
-
_props.style = { ..._props.style, color: '#4598fa' };
|
|
22
|
-
}
|
|
23
18
|
return <CircularProgress {..._props} />;
|
|
24
19
|
}
|
|
25
|
-
|
|
26
|
-
Spinner.propTypes = {
|
|
27
|
-
// 改为基于 @material-ui/core/CircularProgress 的实现后, 该 prop 将被废弃
|
|
28
|
-
duration: PropTypes.array,
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
Spinner.defaultProps = {
|
|
32
|
-
duration: [1, 1.6],
|
|
33
|
-
};
|