@arcblock/ux 1.16.18 → 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.
Files changed (5) hide show
  1. package/lib/Blocklet/index.js +2 -1
  2. package/lib/NFTDisplay/index.js +15 -2
  3. package/package.json +4 -4
  4. package/src/Blocklet/index.js +60 -25
  5. 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{border:1px solid #f2f2f2;padding:0 16px;border-radius:12px;background:#fff;overflow:hidden;&:hover{filter:drop-shadow(0px 4px 12px rgba(92,92,92,0.04));}}.arcblock-blocklet__content{padding:16px 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;border-top:1px solid #f2f2f2;}.arcblock-blocklet__cover{width:100px;height:100px;margin-right:16px;overflow:hidden;border-radius:12px;}.arcblock-blocklet__info{flex:1;overflow:hidden;.arcblock-blocklet__button{margin-top:16px;display:inline-block;}}.arcblock-blocklet__button{& > *{position:relative;&::before{content:'';position:absolute;display:block;left:50%;top:50%;height:", "%;width:", "%;transform:translate(-50%,-50%);}}& > *:not(.Mui-disabled){background-color:rgba(79,106,246,0.06);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__title{margin-bottom:3px;}.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__content{padding:12px 0;}.arcblock-blocklet__cover{width:48px;height:48px;border-radius:6px;}.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.scaleClickZone * 100, props => props.scaleClickZone * 100, props => props.theme.palette.primary.main);
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,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
- const display = (0, _get.default)(parsed.current, 'credentialSubject.display');
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.18",
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": "d558b1c877b8ea29fc1719ca91bd7506344a6b23",
56
+ "gitHead": "7dac54939fb9d42177bdea4d908f83a563ccf014",
57
57
  "dependencies": {
58
- "@arcblock/icons": "^1.16.18",
59
- "@arcblock/react-hooks": "^1.16.18",
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
- background: #fff;
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: 100px;
47
- height: 100px;
48
- margin-right: 16px;
43
+ width: 80px;
44
+ height: 80px;
45
+ margin-right: 12px;
49
46
  overflow: hidden;
50
47
  border-radius: 12px;
51
48
  }
@@ -58,25 +55,54 @@ const Div = styled.div`
58
55
  display: inline-block;
59
56
  }
60
57
  }
61
- .arcblock-blocklet__button {
62
- & > * {
58
+ // 覆盖 mui-button 的样式 做成 blocklet 内部 button 的专有样式
59
+ .arcblock-blocklet__button--hover {
60
+ &:not(.Mui-disabled) {
63
61
  position: relative;
62
+ z-index: 1;
64
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 {
65
77
  content: '';
66
78
  position: absolute;
67
- display: block;
68
- left: 50%;
69
- top: 50%;
70
- height: ${props => props.scaleClickZone * 100}%;
71
- width: ${props => props.scaleClickZone * 100}%;
72
- transform: translate(-50%, -50%);
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);
73
92
  }
74
93
  }
75
- & > *:not(.Mui-disabled) {
94
+
95
+ &:not(.Mui-disabled) {
76
96
  background-color: rgba(79, 106, 246, 0.06);
77
97
  color: ${props => props.theme.palette.primary.main};
78
98
  }
99
+ &:not(.Mui-disabled) {
100
+ &:hover {
101
+ color: ${props => props.theme.palette.common.white};
102
+ }
103
+ }
79
104
  }
105
+
80
106
  .arcblock-blocklet__title {
81
107
  margin: 0;
82
108
  font-size: 18px;
@@ -104,13 +130,22 @@ const Div = styled.div`
104
130
  .arcblock-blocklet__addons--item {
105
131
  white-space: nowrap;
106
132
  }
107
-
108
133
  &.arcblock-blocklet--size-md {
109
134
  &:hover {
110
135
  position: relative;
111
136
  }
137
+ .arcblock-blocklet__content {
138
+ height: 8.5em;
139
+ }
112
140
  .arcblock-blocklet__title {
113
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;
114
149
  }
115
150
  .arcblock-blocklet__describe {
116
151
  white-space: normal;
@@ -122,14 +157,14 @@ const Div = styled.div`
122
157
  }
123
158
  &.arcblock-blocklet--size-sm,
124
159
  &.arcblock-blocklet--size-xs {
125
- .arcblock-blocklet__content {
126
- padding: 12px 0;
127
- }
128
160
  .arcblock-blocklet__cover {
129
- width: 48px;
130
- height: 48px;
161
+ width: 40px;
162
+ height: 40px;
131
163
  border-radius: 6px;
132
164
  }
165
+ .arcblock-blocklet__content {
166
+ padding: 16px 0;
167
+ }
133
168
  .arcblock-blocklet__addons {
134
169
  padding: 8px 0;
135
170
  .arcblock-blocklet__addons--item {
@@ -143,7 +178,6 @@ const Div = styled.div`
143
178
  }
144
179
  }
145
180
  `;
146
-
147
181
  function BlockletIcon({ name }) {
148
182
  return <Icon name={name} color="inherit" size={15} style={{ marginRight: 8 }} />;
149
183
  }
@@ -261,6 +295,7 @@ export default function Blocklet({
261
295
  (onButtonClick && (
262
296
  <Button
263
297
  rounded
298
+ className="arcblock-blocklet__button--hover"
264
299
  variant="contained"
265
300
  color="primary"
266
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
- const display = get(parsed.current, 'credentialSubject.display');
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