@arcblock/ux 1.16.21 → 1.16.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/lib/Blocklet/index.js +2 -2
- package/package.json +4 -4
- package/src/Blocklet/index.js +66 -61
package/lib/Blocklet/index.js
CHANGED
|
@@ -44,7 +44,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
44
44
|
const Div = _styledComponents.default.div.withConfig({
|
|
45
45
|
displayName: "Blocklet__Div",
|
|
46
46
|
componentId: "sc-3dga5l-0"
|
|
47
|
-
})(["&.arcblock-blocklet{
|
|
47
|
+
})(["&.arcblock-blocklet{padding:0 16px;background:", ";overflow:hidden;&:hover{filter:drop-shadow(0px 4px 12px rgba(92,92,92,0.04));}border-bottom:1px solid #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;}.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:'';border-radius:100vw;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;border-radius:100vw;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:rgba(79,106,246,0.06);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:2px 0 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__content{height:8.5em;}.arcblock-blocklet__title{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);
|
|
48
48
|
|
|
49
49
|
function BlockletIcon(_ref) {
|
|
50
50
|
let {
|
|
@@ -182,7 +182,7 @@ function Blocklet(_ref2) {
|
|
|
182
182
|
}
|
|
183
183
|
}, button || onButtonClick && /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
184
184
|
rounded: true,
|
|
185
|
-
className: "
|
|
185
|
+
className: "arcblock-blocklet__button--hover",
|
|
186
186
|
variant: "contained",
|
|
187
187
|
color: "primary",
|
|
188
188
|
size: "small",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arcblock/ux",
|
|
3
|
-
"version": "1.16.
|
|
3
|
+
"version": "1.16.22",
|
|
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": "7dac54939fb9d42177bdea4d908f83a563ccf014",
|
|
57
57
|
"dependencies": {
|
|
58
|
-
"@arcblock/icons": "^1.16.
|
|
59
|
-
"@arcblock/react-hooks": "^1.16.
|
|
58
|
+
"@arcblock/icons": "^1.16.22",
|
|
59
|
+
"@arcblock/react-hooks": "^1.16.22",
|
|
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",
|
package/src/Blocklet/index.js
CHANGED
|
@@ -14,19 +14,17 @@ import Img from '../Img';
|
|
|
14
14
|
|
|
15
15
|
const Div = styled.div`
|
|
16
16
|
&.arcblock-blocklet {
|
|
17
|
-
border: 1px solid #f2f2f2;
|
|
18
17
|
padding: 0 16px;
|
|
19
|
-
border-radius: 12px;
|
|
20
18
|
background: ${props => props.theme.palette.common.white};
|
|
21
19
|
overflow: hidden;
|
|
22
20
|
&:hover {
|
|
23
21
|
filter: drop-shadow(0px 4px 12px rgba(92, 92, 92, 0.04));
|
|
24
22
|
}
|
|
23
|
+
border-bottom: 1px solid #f0f0f0;
|
|
25
24
|
}
|
|
26
25
|
.arcblock-blocklet__content {
|
|
27
|
-
padding: 16px 0;
|
|
26
|
+
padding: 16px 0 0 0;
|
|
28
27
|
}
|
|
29
|
-
|
|
30
28
|
.arcblock-blocklet__content--main {
|
|
31
29
|
display: flex;
|
|
32
30
|
align-items: center;
|
|
@@ -40,12 +38,11 @@ const Div = styled.div`
|
|
|
40
38
|
}
|
|
41
39
|
.arcblock-blocklet__addons {
|
|
42
40
|
padding: 16px 0;
|
|
43
|
-
border-top: 1px solid #f2f2f2;
|
|
44
41
|
}
|
|
45
42
|
.arcblock-blocklet__cover {
|
|
46
|
-
width:
|
|
47
|
-
height:
|
|
48
|
-
margin-right:
|
|
43
|
+
width: 80px;
|
|
44
|
+
height: 80px;
|
|
45
|
+
margin-right: 12px;
|
|
49
46
|
overflow: hidden;
|
|
50
47
|
border-radius: 12px;
|
|
51
48
|
}
|
|
@@ -56,52 +53,52 @@ const Div = styled.div`
|
|
|
56
53
|
.arcblock-blocklet__button {
|
|
57
54
|
margin-top: 16px;
|
|
58
55
|
display: inline-block;
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
// 覆盖 mui-button 的样式 做成 blocklet 内部 button 的专有样式
|
|
59
|
+
.arcblock-blocklet__button--hover {
|
|
60
|
+
&:not(.Mui-disabled) {
|
|
61
|
+
position: relative;
|
|
62
|
+
z-index: 1;
|
|
63
|
+
&::before {
|
|
64
|
+
content: '';
|
|
65
|
+
border-radius: 100vw;
|
|
66
|
+
position: absolute;
|
|
67
|
+
height: 100%;
|
|
68
|
+
width: 100%;
|
|
69
|
+
left: 0;
|
|
70
|
+
top: 0;
|
|
71
|
+
transition: opacity 0.3s;
|
|
72
|
+
}
|
|
73
|
+
&:hover::before {
|
|
74
|
+
opacity: 0;
|
|
75
|
+
}
|
|
76
|
+
&::after {
|
|
77
|
+
content: '';
|
|
78
|
+
position: absolute;
|
|
79
|
+
height: 100%;
|
|
80
|
+
width: 100%;
|
|
81
|
+
background-color: ${props => props.theme.palette.primary.main};
|
|
82
|
+
transform: scale(0.1);
|
|
83
|
+
opacity: 0;
|
|
84
|
+
z-index: -1;
|
|
85
|
+
border-radius: 100vw;
|
|
86
|
+
transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
|
|
87
|
+
}
|
|
88
|
+
&:hover::after {
|
|
89
|
+
opacity: 1;
|
|
90
|
+
transform-origin: center;
|
|
91
|
+
transform: scale(1);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
95
94
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
}
|
|
104
|
-
}
|
|
95
|
+
&:not(.Mui-disabled) {
|
|
96
|
+
background-color: rgba(79, 106, 246, 0.06);
|
|
97
|
+
color: ${props => props.theme.palette.primary.main};
|
|
98
|
+
}
|
|
99
|
+
&:not(.Mui-disabled) {
|
|
100
|
+
&:hover {
|
|
101
|
+
color: ${props => props.theme.palette.common.white};
|
|
105
102
|
}
|
|
106
103
|
}
|
|
107
104
|
}
|
|
@@ -133,13 +130,22 @@ const Div = styled.div`
|
|
|
133
130
|
.arcblock-blocklet__addons--item {
|
|
134
131
|
white-space: nowrap;
|
|
135
132
|
}
|
|
136
|
-
|
|
137
133
|
&.arcblock-blocklet--size-md {
|
|
138
134
|
&:hover {
|
|
139
135
|
position: relative;
|
|
140
136
|
}
|
|
137
|
+
.arcblock-blocklet__content {
|
|
138
|
+
height: 8.5em;
|
|
139
|
+
}
|
|
141
140
|
.arcblock-blocklet__title {
|
|
142
141
|
margin-bottom: 3px;
|
|
142
|
+
display: -webkit-box;
|
|
143
|
+
-webkit-box-orient: vertical;
|
|
144
|
+
-webkit-line-clamp: 2;
|
|
145
|
+
overflow: hidden;
|
|
146
|
+
text-overflow: initial;
|
|
147
|
+
white-space: initial;
|
|
148
|
+
word-break: break-all;
|
|
143
149
|
}
|
|
144
150
|
.arcblock-blocklet__describe {
|
|
145
151
|
white-space: normal;
|
|
@@ -151,14 +157,14 @@ const Div = styled.div`
|
|
|
151
157
|
}
|
|
152
158
|
&.arcblock-blocklet--size-sm,
|
|
153
159
|
&.arcblock-blocklet--size-xs {
|
|
154
|
-
.arcblock-blocklet__content {
|
|
155
|
-
padding: 12px 0;
|
|
156
|
-
}
|
|
157
160
|
.arcblock-blocklet__cover {
|
|
158
|
-
width:
|
|
159
|
-
height:
|
|
161
|
+
width: 40px;
|
|
162
|
+
height: 40px;
|
|
160
163
|
border-radius: 6px;
|
|
161
164
|
}
|
|
165
|
+
.arcblock-blocklet__content {
|
|
166
|
+
padding: 16px 0;
|
|
167
|
+
}
|
|
162
168
|
.arcblock-blocklet__addons {
|
|
163
169
|
padding: 8px 0;
|
|
164
170
|
.arcblock-blocklet__addons--item {
|
|
@@ -172,7 +178,6 @@ const Div = styled.div`
|
|
|
172
178
|
}
|
|
173
179
|
}
|
|
174
180
|
`;
|
|
175
|
-
|
|
176
181
|
function BlockletIcon({ name }) {
|
|
177
182
|
return <Icon name={name} color="inherit" size={15} style={{ marginRight: 8 }} />;
|
|
178
183
|
}
|
|
@@ -290,7 +295,7 @@ export default function Blocklet({
|
|
|
290
295
|
(onButtonClick && (
|
|
291
296
|
<Button
|
|
292
297
|
rounded
|
|
293
|
-
className="
|
|
298
|
+
className="arcblock-blocklet__button--hover"
|
|
294
299
|
variant="contained"
|
|
295
300
|
color="primary"
|
|
296
301
|
size="small"
|