@arcblock/ux 1.16.19 → 1.16.23
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 -2
- package/lib/NFTDisplay/index.js +15 -2
- package/package.json +4 -4
- package/src/Blocklet/index.js +31 -22
- package/src/NFTDisplay/index.js +13 -1
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 {
|
|
@@ -137,7 +137,7 @@ function Blocklet(_ref2) {
|
|
|
137
137
|
|
|
138
138
|
const actualSize = size === 'auto' ? isDownSm ? 'xs' : isDownMd ? 'sm' : 'md' : size; // eslint-disable-next-line no-nested-ternary
|
|
139
139
|
|
|
140
|
-
const didAvatarSize = size === 'auto' ? isUPLg ?
|
|
140
|
+
const didAvatarSize = size === 'auto' ? isUPLg ? 80 : 40 : size === 'md' ? 80 : 40;
|
|
141
141
|
const container = (0, _react.useRef)(null);
|
|
142
142
|
return /*#__PURE__*/_react.default.createElement(Div, Object.assign({}, rest, {
|
|
143
143
|
scaleClickZone: scaleClickZone,
|
|
@@ -182,6 +182,7 @@ function Blocklet(_ref2) {
|
|
|
182
182
|
}
|
|
183
183
|
}, button || onButtonClick && /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
184
184
|
rounded: true,
|
|
185
|
+
className: "arcblock-blocklet__button--hover",
|
|
185
186
|
variant: "contained",
|
|
186
187
|
color: "primary",
|
|
187
188
|
size: "small",
|
package/lib/NFTDisplay/index.js
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
+
exports.getNFTData = getNFTData;
|
|
6
7
|
exports.default = void 0;
|
|
7
8
|
|
|
8
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
@@ -50,6 +51,17 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
|
|
|
50
51
|
|
|
51
52
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
52
53
|
|
|
54
|
+
/**
|
|
55
|
+
* 从 assetState 中获取 nft data, 兼容新旧两种类型的数据结构, 建议将该方法的返回值传入 NFTDisplay 组件的 data prop
|
|
56
|
+
* - 旧: assetState.data.value (.credentialSubject.display)
|
|
57
|
+
* - 新: assetState.display
|
|
58
|
+
*/
|
|
59
|
+
function getNFTData(assetState) {
|
|
60
|
+
var _assetState$data;
|
|
61
|
+
|
|
62
|
+
return (assetState === null || assetState === void 0 ? void 0 : assetState.display) || (assetState === null || assetState === void 0 ? void 0 : (_assetState$data = assetState.data) === null || _assetState$data === void 0 ? void 0 : _assetState$data.value);
|
|
63
|
+
}
|
|
64
|
+
|
|
53
65
|
function fromBase64(v) {
|
|
54
66
|
if (typeof v !== 'string') {
|
|
55
67
|
throw new Error('fromBase64 requires input to be a string');
|
|
@@ -111,8 +123,9 @@ function NFTDisplay(_ref) {
|
|
|
111
123
|
|
|
112
124
|
const {
|
|
113
125
|
vcId
|
|
114
|
-
} = parsed.current;
|
|
115
|
-
|
|
126
|
+
} = parsed.current; // 需要兼容新旧两种类型的数据结构, nft data 有 credentialSubject 属性, 说明是旧 nft data, 否则是新 nft data
|
|
127
|
+
|
|
128
|
+
const display = parsed.current.credentialSubject ? (0, _get.default)(parsed.current, 'credentialSubject.display') : parsed.current;
|
|
116
129
|
const {
|
|
117
130
|
content,
|
|
118
131
|
type
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arcblock/ux",
|
|
3
|
-
"version": "1.16.
|
|
3
|
+
"version": "1.16.23",
|
|
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": "25ba7a8a7ce1ae41a112c73a4e3e884e0be505bb",
|
|
57
57
|
"dependencies": {
|
|
58
|
-
"@arcblock/icons": "^1.16.
|
|
59
|
-
"@arcblock/react-hooks": "^1.16.
|
|
58
|
+
"@arcblock/icons": "^1.16.23",
|
|
59
|
+
"@arcblock/react-hooks": "^1.16.23",
|
|
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
|
}
|
|
@@ -58,9 +55,9 @@ const Div = styled.div`
|
|
|
58
55
|
display: inline-block;
|
|
59
56
|
}
|
|
60
57
|
}
|
|
61
|
-
//
|
|
62
|
-
.arcblock-blocklet__button {
|
|
63
|
-
|
|
58
|
+
// 覆盖 mui-button 的样式 做成 blocklet 内部 button 的专有样式
|
|
59
|
+
.arcblock-blocklet__button--hover {
|
|
60
|
+
&:not(.Mui-disabled) {
|
|
64
61
|
position: relative;
|
|
65
62
|
z-index: 1;
|
|
66
63
|
&::before {
|
|
@@ -95,14 +92,17 @@ const Div = styled.div`
|
|
|
95
92
|
}
|
|
96
93
|
}
|
|
97
94
|
|
|
98
|
-
|
|
95
|
+
&:not(.Mui-disabled) {
|
|
99
96
|
background-color: rgba(79, 106, 246, 0.06);
|
|
100
97
|
color: ${props => props.theme.palette.primary.main};
|
|
101
98
|
}
|
|
102
|
-
&:
|
|
103
|
-
|
|
99
|
+
&:not(.Mui-disabled) {
|
|
100
|
+
&:hover {
|
|
101
|
+
color: ${props => props.theme.palette.common.white};
|
|
102
|
+
}
|
|
104
103
|
}
|
|
105
104
|
}
|
|
105
|
+
|
|
106
106
|
.arcblock-blocklet__title {
|
|
107
107
|
margin: 0;
|
|
108
108
|
font-size: 18px;
|
|
@@ -130,13 +130,22 @@ const Div = styled.div`
|
|
|
130
130
|
.arcblock-blocklet__addons--item {
|
|
131
131
|
white-space: nowrap;
|
|
132
132
|
}
|
|
133
|
-
|
|
134
133
|
&.arcblock-blocklet--size-md {
|
|
135
134
|
&:hover {
|
|
136
135
|
position: relative;
|
|
137
136
|
}
|
|
137
|
+
.arcblock-blocklet__content {
|
|
138
|
+
height: 8.5em;
|
|
139
|
+
}
|
|
138
140
|
.arcblock-blocklet__title {
|
|
139
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;
|
|
140
149
|
}
|
|
141
150
|
.arcblock-blocklet__describe {
|
|
142
151
|
white-space: normal;
|
|
@@ -148,14 +157,14 @@ const Div = styled.div`
|
|
|
148
157
|
}
|
|
149
158
|
&.arcblock-blocklet--size-sm,
|
|
150
159
|
&.arcblock-blocklet--size-xs {
|
|
151
|
-
.arcblock-blocklet__content {
|
|
152
|
-
padding: 12px 0;
|
|
153
|
-
}
|
|
154
160
|
.arcblock-blocklet__cover {
|
|
155
|
-
width:
|
|
156
|
-
height:
|
|
161
|
+
width: 40px;
|
|
162
|
+
height: 40px;
|
|
157
163
|
border-radius: 6px;
|
|
158
164
|
}
|
|
165
|
+
.arcblock-blocklet__content {
|
|
166
|
+
padding: 16px 0;
|
|
167
|
+
}
|
|
159
168
|
.arcblock-blocklet__addons {
|
|
160
169
|
padding: 8px 0;
|
|
161
170
|
.arcblock-blocklet__addons--item {
|
|
@@ -169,7 +178,6 @@ const Div = styled.div`
|
|
|
169
178
|
}
|
|
170
179
|
}
|
|
171
180
|
`;
|
|
172
|
-
|
|
173
181
|
function BlockletIcon({ name }) {
|
|
174
182
|
return <Icon name={name} color="inherit" size={15} style={{ marginRight: 8 }} />;
|
|
175
183
|
}
|
|
@@ -238,7 +246,7 @@ export default function Blocklet({
|
|
|
238
246
|
// eslint-disable-next-line no-nested-ternary
|
|
239
247
|
const actualSize = size === 'auto' ? (isDownSm ? 'xs' : isDownMd ? 'sm' : 'md') : size;
|
|
240
248
|
// eslint-disable-next-line no-nested-ternary
|
|
241
|
-
const didAvatarSize = size === 'auto' ? (isUPLg ?
|
|
249
|
+
const didAvatarSize = size === 'auto' ? (isUPLg ? 80 : 40) : size === 'md' ? 80 : 40;
|
|
242
250
|
const container = useRef(null);
|
|
243
251
|
|
|
244
252
|
return (
|
|
@@ -287,6 +295,7 @@ export default function Blocklet({
|
|
|
287
295
|
(onButtonClick && (
|
|
288
296
|
<Button
|
|
289
297
|
rounded
|
|
298
|
+
className="arcblock-blocklet__button--hover"
|
|
290
299
|
variant="contained"
|
|
291
300
|
color="primary"
|
|
292
301
|
size="small"
|
package/src/NFTDisplay/index.js
CHANGED
|
@@ -12,6 +12,15 @@ import InlineSvgEmbedder from './svg-embedder/inline-svg';
|
|
|
12
12
|
import DefaultLoading from './loading';
|
|
13
13
|
import DefaultBrokenImage from './broken';
|
|
14
14
|
|
|
15
|
+
/**
|
|
16
|
+
* 从 assetState 中获取 nft data, 兼容新旧两种类型的数据结构, 建议将该方法的返回值传入 NFTDisplay 组件的 data prop
|
|
17
|
+
* - 旧: assetState.data.value (.credentialSubject.display)
|
|
18
|
+
* - 新: assetState.display
|
|
19
|
+
*/
|
|
20
|
+
export function getNFTData(assetState) {
|
|
21
|
+
return assetState?.display || assetState?.data?.value;
|
|
22
|
+
}
|
|
23
|
+
|
|
15
24
|
function fromBase64(v) {
|
|
16
25
|
if (typeof v !== 'string') {
|
|
17
26
|
throw new Error('fromBase64 requires input to be a string');
|
|
@@ -66,7 +75,10 @@ function NFTDisplay({
|
|
|
66
75
|
// console.log('[debug] parse data')
|
|
67
76
|
}
|
|
68
77
|
const { vcId } = parsed.current;
|
|
69
|
-
|
|
78
|
+
// 需要兼容新旧两种类型的数据结构, nft data 有 credentialSubject 属性, 说明是旧 nft data, 否则是新 nft data
|
|
79
|
+
const display = parsed.current.credentialSubject
|
|
80
|
+
? get(parsed.current, 'credentialSubject.display')
|
|
81
|
+
: parsed.current;
|
|
70
82
|
const { content, type } = display;
|
|
71
83
|
const isUrlType = type === 'url';
|
|
72
84
|
|