@arcblock/ux 2.5.58 → 2.5.60
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/ActionButton/index.js +20 -39
- package/lib/ActivityIndicator/index.js +20 -41
- package/lib/Address/compact-text.js +16 -38
- package/lib/Address/did-address.js +22 -51
- package/lib/Address/index.js +6 -19
- package/lib/Address/responsive-did-address.js +20 -36
- package/lib/Alert/index.js +12 -34
- package/lib/AnimationWaiter/index.js +35 -59
- package/lib/Async/index.js +5 -19
- package/lib/Avatar/did-motif.js +12 -26
- package/lib/Avatar/etherscan-blockies.js +2 -20
- package/lib/Avatar/index.js +28 -54
- package/lib/Badge/index.js +12 -33
- package/lib/Blocklet/blocklet.js +20 -47
- package/lib/Blocklet/index.js +0 -6
- package/lib/Blocklet/utils.js +0 -6
- package/lib/BlockletNFT/index.js +37 -67
- package/lib/Button/index.js +0 -4
- package/lib/Button/wrap.js +19 -38
- package/lib/ButtonGroup/index.js +0 -5
- package/lib/CardSelector/index.js +9 -22
- package/lib/Center/index.js +2 -12
- package/lib/ClickToCopy/copy-button.js +9 -26
- package/lib/ClickToCopy/hook.js +0 -10
- package/lib/ClickToCopy/index.js +13 -41
- package/lib/CodeBlock/LightBox.js +1 -6
- package/lib/CodeBlock/index.js +12 -80
- package/lib/Colors/index.js +0 -2
- package/lib/Colors/themes/default.js +2 -3
- package/lib/ContactForm/index.js +5 -35
- package/lib/CookieConsent/index.js +10 -32
- package/lib/CountDown/index.js +10 -35
- package/lib/DID/index.js +8 -32
- package/lib/Datatable/CustomToolbar.js +9 -56
- package/lib/Datatable/DatatableContext.js +2 -5
- package/lib/Datatable/TableSearch.js +0 -21
- package/lib/Datatable/index.js +76 -152
- package/lib/Datatable/utils.js +14 -27
- package/lib/Dialog/confirm.js +18 -31
- package/lib/Dialog/dialog.js +24 -50
- package/lib/Dialog/index.js +0 -3
- package/lib/DidLogo/index.js +0 -7
- package/lib/DriftBot/index.js +1 -12
- package/lib/Earth/index.js +17 -58
- package/lib/Earth/util.js +0 -7
- package/lib/Empty/index.js +9 -23
- package/lib/ErrorBoundary/fallback.js +0 -14
- package/lib/ErrorBoundary/index.js +0 -2
- package/lib/Footer/index.js +1 -14
- package/lib/Header/auto-hidden.js +9 -23
- package/lib/Header/header.js +19 -38
- package/lib/Header/index.js +0 -3
- package/lib/Header/responsive-header.js +16 -40
- package/lib/Icon/image.js +12 -26
- package/lib/Icon/index.js +15 -34
- package/lib/Img/index.js +32 -54
- package/lib/InfoRow/index.js +11 -27
- package/lib/Layout/dashboard/external-link.js +13 -30
- package/lib/Layout/dashboard/full-page.js +8 -24
- package/lib/Layout/dashboard/index.js +28 -72
- package/lib/Layout/dashboard/sidebar.js +11 -31
- package/lib/Layout/dashboard-legacy/header.js +14 -36
- package/lib/Layout/dashboard-legacy/index.js +19 -44
- package/lib/Layout/dashboard-legacy/sidebar.js +10 -32
- package/lib/Layout/index.js +18 -52
- package/lib/Locale/browser-lang.js +6 -19
- package/lib/Locale/context.js +15 -51
- package/lib/Locale/languages.js +3 -7
- package/lib/Locale/selector.js +11 -44
- package/lib/Locale/util.js +0 -10
- package/lib/Logo/index.js +10 -33
- package/lib/Metric/index.js +1 -9
- package/lib/NFTDisplay/aspect-ratio-container.js +7 -20
- package/lib/NFTDisplay/broken.js +0 -8
- package/lib/NFTDisplay/index.js +63 -110
- package/lib/NFTDisplay/loading.js +0 -6
- package/lib/NFTDisplay/svg-embedder/img.js +9 -22
- package/lib/NFTDisplay/svg-embedder/inline-svg.js +9 -23
- package/lib/NavMenu/index.js +0 -2
- package/lib/NavMenu/nav-menu.js +40 -69
- package/lib/NavMenu/style.js +1 -5
- package/lib/PageScroller/index.js +9 -39
- package/lib/PageScroller/story/FifthComponent.js +0 -2
- package/lib/PageScroller/story/FirstComponent.js +0 -2
- package/lib/PageScroller/story/FourthComponent.js +0 -2
- package/lib/PageScroller/story/FullPage.js +1 -14
- package/lib/PageScroller/story/PageContain.js +1 -14
- package/lib/PageScroller/story/SecondComponent.js +0 -2
- package/lib/PageScroller/story/ThirdComponent.js +0 -2
- package/lib/PageScroller/usePrevValue.js +1 -2
- package/lib/PricingTable/PricingPlan.js +0 -12
- package/lib/PricingTable/index.js +0 -14
- package/lib/QRCode/index.js +14 -24
- package/lib/RelativeTime/index.js +12 -45
- package/lib/Result/common.js +43 -63
- package/lib/Result/index.js +6 -23
- package/lib/Result/result.js +9 -23
- package/lib/Screenshot/BaseScreenshot/index.js +9 -26
- package/lib/Screenshot/BaseScreenshot/shells/Macbook.js +9 -10
- package/lib/Screenshot/BaseScreenshot/shells/Phone.js +3 -8
- package/lib/Screenshot/index.js +32 -65
- package/lib/SessionManager/federated-login-detecter.js +171 -0
- package/lib/SessionManager/index.js +189 -271
- package/lib/SessionManager/user-popper.js +83 -0
- package/lib/Sparkline/index.js +40 -42
- package/lib/Spinner/index.js +12 -23
- package/lib/SplitButton/index.js +20 -48
- package/lib/Switch/index.js +7 -22
- package/lib/Tabs/index.js +8 -22
- package/lib/Tag/index.js +13 -33
- package/lib/TextCollapse/index.js +14 -31
- package/lib/Theme/index.js +3 -13
- package/lib/Theme/theme-provider.js +1 -10
- package/lib/Theme/theme.js +15 -27
- package/lib/Toast/index.js +13 -40
- package/lib/Util/deprecate.js +3 -12
- package/lib/Util/index.js +13 -74
- package/lib/Util/wallet.js +3 -10
- package/lib/Video/index.js +3 -19
- package/lib/Wallet/Action.js +9 -28
- package/lib/Wallet/Download.js +11 -36
- package/lib/Wallet/Open.js +0 -12
- package/lib/WebWalletSWKeeper/index.js +30 -55
- package/lib/WechatPrompt/index.js +0 -16
- package/lib/index.js +0 -38
- package/lib/withTheme/index.js +3 -15
- package/lib/withTracker/error_boundary.js +3 -14
- package/lib/withTracker/index.js +3 -24
- package/package.json +5 -5
- package/src/Blocklet/blocklet.js +1 -1
- package/src/BlockletNFT/index.js +1 -1
- package/src/NFTDisplay/index.js +4 -4
- package/src/SessionManager/federated-login-detecter.jsx +138 -0
- package/src/SessionManager/index.jsx +140 -233
- package/src/SessionManager/user-popper.jsx +121 -0
package/lib/NFTDisplay/index.js
CHANGED
@@ -5,79 +5,55 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.default = void 0;
|
7
7
|
exports.getNFTData = getNFTData;
|
8
|
-
|
9
8
|
var _react = require("react");
|
10
|
-
|
11
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
12
|
-
|
13
10
|
var _clsx = _interopRequireDefault(require("clsx"));
|
14
|
-
|
15
11
|
var _buffer = require("buffer");
|
16
|
-
|
17
12
|
var _get = _interopRequireDefault(require("lodash/get"));
|
18
|
-
|
19
13
|
var _pako = _interopRequireDefault(require("pako"));
|
20
|
-
|
21
14
|
var _base64Url = _interopRequireDefault(require("base64-url"));
|
22
|
-
|
23
15
|
var _isSvg = _interopRequireDefault(require("is-svg"));
|
24
|
-
|
25
16
|
var _aspectRatioContainer = _interopRequireDefault(require("./aspect-ratio-container"));
|
26
|
-
|
27
17
|
var _img = _interopRequireDefault(require("./svg-embedder/img"));
|
28
|
-
|
29
18
|
var _inlineSvg = _interopRequireDefault(require("./svg-embedder/inline-svg"));
|
30
|
-
|
31
19
|
var _loading = _interopRequireDefault(require("./loading"));
|
32
|
-
|
33
20
|
var _broken = _interopRequireDefault(require("./broken"));
|
34
|
-
|
35
21
|
var _Theme = require("../Theme");
|
36
|
-
|
37
22
|
var _jsxRuntime = require("react/jsx-runtime");
|
38
|
-
|
39
23
|
var _templateObject;
|
40
|
-
|
41
24
|
const _excluded = ["data", "address", "inset", "aspect", "component", "className", "renderError", "renderLoading", "preferredSvgEmbedder", "checkSvg", "minimumLoadingTime", "onCompleted"],
|
42
|
-
|
43
|
-
|
25
|
+
_excluded2 = ["aspect", "inset"];
|
26
|
+
/* eslint-disable react-hooks/rules-of-hooks */
|
27
|
+
/**
|
28
|
+
* 从 assetState 中获取 nft data, 兼容新旧两种类型的数据结构, 建议将该方法的返回值传入 NFTDisplay 组件的 data prop
|
29
|
+
* - 旧: assetState.data.value (.credentialSubject.display)
|
30
|
+
* - 新: assetState.display
|
31
|
+
*/
|
44
32
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
45
|
-
|
46
33
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
47
|
-
|
48
34
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
49
|
-
|
50
35
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
51
|
-
|
52
|
-
function
|
53
|
-
|
36
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
37
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
38
|
+
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
54
39
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
55
|
-
|
56
40
|
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; }
|
57
|
-
|
58
|
-
/**
|
59
|
-
* 从 assetState 中获取 nft data, 兼容新旧两种类型的数据结构, 建议将该方法的返回值传入 NFTDisplay 组件的 data prop
|
60
|
-
* - 旧: assetState.data.value (.credentialSubject.display)
|
61
|
-
* - 新: assetState.display
|
62
|
-
*/
|
63
41
|
function getNFTData(assetState) {
|
64
42
|
var _assetState$data;
|
65
|
-
|
66
43
|
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);
|
67
44
|
}
|
68
|
-
|
69
45
|
function fromBase64(v) {
|
70
46
|
if (typeof v !== 'string') {
|
71
47
|
throw new Error('fromBase64 requires input to be a string');
|
72
48
|
}
|
73
|
-
|
74
49
|
return _buffer.Buffer.from(_base64Url.default.unescape(v), 'base64');
|
75
|
-
}
|
50
|
+
}
|
51
|
+
|
52
|
+
// const isVC = type => {
|
76
53
|
// return String(type).includes('VerifiableCredential');
|
77
54
|
// };
|
78
|
-
// 仅针对非 url type 的情况
|
79
|
-
|
80
55
|
|
56
|
+
// 仅针对非 url type 的情况
|
81
57
|
const getSvgEmbedder = preferredSvgEmbedder => {
|
82
58
|
const embedders = {
|
83
59
|
img: _img.default,
|
@@ -85,30 +61,28 @@ const getSvgEmbedder = preferredSvgEmbedder => {
|
|
85
61
|
};
|
86
62
|
return embedders[preferredSvgEmbedder];
|
87
63
|
};
|
64
|
+
|
88
65
|
/**
|
89
66
|
* TODO:
|
90
67
|
* 考虑把 asset data 解析部分和 nft display 分离, android 端有相关使用场景 - 只传入 svg 或 url, 也可以传入 asset data,
|
91
68
|
* 目前如果想直接传入 svg 或 url, 需要构造一个 asset data 的数据才能使用 NFTDisplay 组件
|
92
69
|
*/
|
93
|
-
|
94
|
-
|
95
70
|
function NFTDisplay(_ref) {
|
96
71
|
let {
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
72
|
+
data,
|
73
|
+
address,
|
74
|
+
inset,
|
75
|
+
aspect,
|
76
|
+
component,
|
77
|
+
className,
|
78
|
+
renderError,
|
79
|
+
renderLoading,
|
80
|
+
preferredSvgEmbedder,
|
81
|
+
checkSvg,
|
82
|
+
minimumLoadingTime,
|
83
|
+
onCompleted
|
84
|
+
} = _ref,
|
85
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
112
86
|
const wrapRoot = children => /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, _objectSpread(_objectSpread({
|
113
87
|
as: component
|
114
88
|
}, rest), {}, {
|
@@ -117,85 +91,82 @@ function NFTDisplay(_ref) {
|
|
117
91
|
}),
|
118
92
|
children: children
|
119
93
|
}));
|
120
|
-
|
121
94
|
const parsed = (0, _react.useRef)(data);
|
122
|
-
|
123
95
|
try {
|
124
96
|
// 如果是 raw data 先解析
|
125
97
|
if (typeof parsed.current === 'string') {
|
126
|
-
parsed.current = JSON.parse(data);
|
98
|
+
parsed.current = JSON.parse(data);
|
99
|
+
// console.log('[debug] parse data')
|
127
100
|
}
|
128
101
|
|
129
102
|
const {
|
130
103
|
vcId
|
131
|
-
} = parsed.current;
|
132
|
-
|
104
|
+
} = parsed.current;
|
105
|
+
// 需要兼容新旧两种类型的数据结构, nft data 有 credentialSubject 属性, 说明是旧 nft data, 否则是新 nft data
|
133
106
|
const display = parsed.current.credentialSubject ? (0, _get.default)(parsed.current, 'credentialSubject.display') : parsed.current;
|
134
107
|
const {
|
135
108
|
content,
|
136
109
|
type
|
137
110
|
} = display;
|
138
|
-
const isUrlType = type === 'url';
|
111
|
+
const isUrlType = type === 'url';
|
139
112
|
|
113
|
+
// 首次加载, 对于 url type 的情况, loading 为 true
|
140
114
|
const [state, setState] = (0, _react.useState)({
|
141
115
|
loading: isUrlType,
|
142
116
|
error: false
|
143
117
|
});
|
144
|
-
const [minimumLoadingReady, setMinimumLoadingReady] = (0, _react.useState)(minimumLoadingTime <= 0);
|
118
|
+
const [minimumLoadingReady, setMinimumLoadingReady] = (0, _react.useState)(minimumLoadingTime <= 0);
|
119
|
+
// console.log('[debug] render', {type, minimumLoadingTime}, JSON.stringify(state))
|
145
120
|
|
146
121
|
(0, _react.useEffect)(() => {
|
147
122
|
let timer;
|
148
|
-
|
149
123
|
if (minimumLoadingTime > 0) {
|
150
124
|
timer = setTimeout(() => setMinimumLoadingReady(true), minimumLoadingTime);
|
151
125
|
}
|
126
|
+
return () => clearTimeout(timer);
|
127
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
128
|
+
}, []);
|
152
129
|
|
153
|
-
|
154
|
-
}, []); // onCompleted
|
155
|
-
|
130
|
+
// onCompleted
|
156
131
|
(0, _react.useEffect)(() => {
|
157
132
|
if (!state.loading && minimumLoadingReady || state.error) {
|
158
133
|
onCompleted();
|
159
|
-
}
|
160
|
-
|
134
|
+
}
|
135
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
161
136
|
}, [state, minimumLoadingReady]);
|
162
|
-
|
163
137
|
if (state.error) {
|
164
138
|
throw new Error('Failed to render NFT Display.');
|
165
139
|
}
|
166
|
-
|
167
140
|
const renderNFT = () => {
|
168
141
|
if (content) {
|
169
142
|
switch (type) {
|
170
143
|
case 'url':
|
171
144
|
{
|
172
145
|
const urlObj = new URL(content);
|
173
|
-
|
174
146
|
if (!urlObj.searchParams.has('assetId')) {
|
175
147
|
urlObj.searchParams.append('assetId', address);
|
176
148
|
}
|
177
|
-
|
178
149
|
if (!urlObj.searchParams.has('vcId')) {
|
179
150
|
urlObj.searchParams.append('vcId', vcId);
|
180
151
|
}
|
181
|
-
|
182
152
|
const url = urlObj.href;
|
183
|
-
return
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
153
|
+
return (
|
154
|
+
/*#__PURE__*/
|
155
|
+
// eslint-disable-next-line jsx-a11y/alt-text
|
156
|
+
(0, _jsxRuntime.jsx)("object", {
|
157
|
+
data: url
|
158
|
+
// onError={() => setState({ ...state, error: true })}
|
159
|
+
,
|
160
|
+
onLoad: () => setState(_objectSpread(_objectSpread({}, state), {}, {
|
161
|
+
loading: false
|
162
|
+
})),
|
163
|
+
style: {
|
164
|
+
width: 'auto',
|
165
|
+
height: 'auto'
|
166
|
+
}
|
167
|
+
})
|
168
|
+
);
|
197
169
|
}
|
198
|
-
|
199
170
|
case 'uri':
|
200
171
|
{
|
201
172
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
|
@@ -209,54 +180,43 @@ function NFTDisplay(_ref) {
|
|
209
180
|
alt: "NFT Display"
|
210
181
|
});
|
211
182
|
}
|
212
|
-
|
213
183
|
case 'svg_gzipped':
|
214
184
|
{
|
215
185
|
const buffer = _pako.default.ungzip(fromBase64(content), {});
|
216
|
-
|
217
186
|
const svg = _buffer.Buffer.from(buffer).toString('utf8');
|
218
|
-
|
219
187
|
if (checkSvg && !(0, _isSvg.default)(svg)) {
|
220
188
|
throw new Error('Invalid SVG of type svg_gzipped');
|
221
189
|
}
|
222
|
-
|
223
190
|
const Embedder = getSvgEmbedder(preferredSvgEmbedder);
|
224
191
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Embedder, {
|
225
192
|
svg: svg
|
226
193
|
});
|
227
194
|
}
|
228
|
-
|
229
195
|
case 'svg':
|
230
196
|
{
|
231
197
|
if (checkSvg && !(0, _isSvg.default)(content)) {
|
232
198
|
throw new Error('Invalid SVG of type svg');
|
233
199
|
}
|
234
|
-
|
235
200
|
const Embedder = getSvgEmbedder(preferredSvgEmbedder);
|
236
201
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Embedder, {
|
237
202
|
svg: content
|
238
203
|
});
|
239
204
|
}
|
240
205
|
// TODO: 准备测试数据
|
241
|
-
|
242
206
|
case 'html':
|
243
207
|
{
|
244
208
|
break;
|
245
209
|
}
|
246
|
-
|
247
210
|
default:
|
248
211
|
}
|
249
212
|
}
|
250
|
-
|
251
213
|
throw new Error("unsupported display protocol: ".concat(display.type));
|
252
214
|
};
|
253
|
-
|
254
215
|
return wrapRoot( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
255
216
|
children: [(state.loading || !minimumLoadingReady) && (renderLoading ? renderLoading() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_loading.default, {})), renderNFT()]
|
256
217
|
}));
|
257
218
|
} catch (e) {
|
258
219
|
var _parsed$current;
|
259
|
-
|
260
220
|
console.error(e === null || e === void 0 ? void 0 : e.message, {
|
261
221
|
nftId: address,
|
262
222
|
vcId: parsed === null || parsed === void 0 ? void 0 : (_parsed$current = parsed.current) === null || _parsed$current === void 0 ? void 0 : _parsed$current.vcId
|
@@ -264,7 +224,6 @@ function NFTDisplay(_ref) {
|
|
264
224
|
return wrapRoot(renderError ? renderError() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_broken.default, {}));
|
265
225
|
}
|
266
226
|
}
|
267
|
-
|
268
227
|
NFTDisplay.propTypes = {
|
269
228
|
// asset data 可以是 raw data 和 parsed data
|
270
229
|
data: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]).isRequired,
|
@@ -297,19 +256,16 @@ NFTDisplay.defaultProps = {
|
|
297
256
|
onCompleted: () => {}
|
298
257
|
};
|
299
258
|
const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n /* \u9ED8\u8BA4\u5C3A\u5BF8 */\n width: 150px;\n height: 150px;\n overflow: hidden;\n\n &,\n img {\n max-width: 100%;\n max-height: 100%;\n }\n\n img {\n width: 100%;\n height: 100%;\n }\n\n &.nft-display--inset {\n width: 100%;\n height: 100%;\n }\n"])));
|
300
|
-
|
301
259
|
function withAspectRatio(Component) {
|
302
260
|
// eslint-disable-next-line func-names, react/prop-types
|
303
261
|
return function (_ref2) {
|
304
262
|
let {
|
305
|
-
|
306
|
-
|
307
|
-
|
308
|
-
|
309
|
-
|
263
|
+
aspect,
|
264
|
+
inset
|
265
|
+
} = _ref2,
|
266
|
+
rest = _objectWithoutProperties(_ref2, _excluded2);
|
310
267
|
// inset 比 aspect ratio 优先级高, 如果同时设置了 inset 和 aspect, 则后者不生效
|
311
268
|
const applyAspectRatio = aspect > 0 && !inset;
|
312
|
-
|
313
269
|
if (applyAspectRatio) {
|
314
270
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_aspectRatioContainer.default, {
|
315
271
|
aspect: aspect,
|
@@ -318,13 +274,10 @@ function withAspectRatio(Component) {
|
|
318
274
|
}, rest))
|
319
275
|
});
|
320
276
|
}
|
321
|
-
|
322
277
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread({
|
323
278
|
inset: inset
|
324
279
|
}, rest));
|
325
280
|
};
|
326
281
|
}
|
327
|
-
|
328
282
|
var _default = withAspectRatio(NFTDisplay);
|
329
|
-
|
330
283
|
exports.default = _default;
|
@@ -4,20 +4,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.default = Loading;
|
7
|
-
|
8
7
|
var _Theme = require("../Theme");
|
9
|
-
|
10
8
|
var _jsxRuntime = require("react/jsx-runtime");
|
11
|
-
|
12
9
|
var _templateObject;
|
13
|
-
|
14
10
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
15
|
-
|
16
11
|
function Loading() {
|
17
12
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
|
18
13
|
className: "nft-display__loading",
|
19
14
|
children: "loading..."
|
20
15
|
});
|
21
16
|
}
|
22
|
-
|
23
17
|
const Root = (0, _Theme.styled)('span')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n width: 100%;\n height: 100%;\n color: #ccc;\n background-color: #eee;\n"])));
|
@@ -4,27 +4,18 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.default = void 0;
|
7
|
-
|
8
7
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
9
|
-
|
10
8
|
var _inlineSvg = _interopRequireDefault(require("./inline-svg"));
|
11
|
-
|
12
9
|
var _jsxRuntime = require("react/jsx-runtime");
|
13
|
-
|
14
10
|
const _excluded = ["svg", "alt", "fallback"];
|
15
|
-
|
16
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
17
|
-
|
18
12
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
19
|
-
|
20
13
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
21
|
-
|
22
|
-
function
|
23
|
-
|
14
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
15
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
16
|
+
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
24
17
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
25
|
-
|
26
18
|
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; }
|
27
|
-
|
28
19
|
const svgToImgUrl = svg => {
|
29
20
|
// fix: #225, https://stackoverflow.com/a/52135328)
|
30
21
|
const blob = new Blob([svg], {
|
@@ -32,26 +23,23 @@ const svgToImgUrl = svg => {
|
|
32
23
|
});
|
33
24
|
return URL.createObjectURL(blob);
|
34
25
|
};
|
26
|
+
|
35
27
|
/**
|
36
28
|
* 基于 <img> 嵌入 svg
|
37
29
|
*/
|
38
|
-
|
39
|
-
|
40
30
|
function ImgEmbedder(_ref) {
|
41
31
|
let {
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
32
|
+
svg,
|
33
|
+
alt,
|
34
|
+
fallback
|
35
|
+
} = _ref,
|
36
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
48
37
|
// 包含 foreignObject 的 svg, fallback 到 shadow dom
|
49
38
|
if (fallback && svg.indexOf('</foreignObject>') > -1) {
|
50
39
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_inlineSvg.default, {
|
51
40
|
svg: svg
|
52
41
|
});
|
53
42
|
}
|
54
|
-
|
55
43
|
const url = svgToImgUrl(svg);
|
56
44
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", _objectSpread({
|
57
45
|
src: url,
|
@@ -59,7 +47,6 @@ function ImgEmbedder(_ref) {
|
|
59
47
|
alt: alt
|
60
48
|
}, rest));
|
61
49
|
}
|
62
|
-
|
63
50
|
ImgEmbedder.propTypes = {
|
64
51
|
svg: _propTypes.default.string.isRequired,
|
65
52
|
alt: _propTypes.default.string,
|
@@ -4,42 +4,29 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.default = void 0;
|
7
|
-
|
8
7
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
9
|
-
|
10
8
|
var _emotion = _interopRequireDefault(require("react-shadow/emotion"));
|
11
|
-
|
12
9
|
var _Theme = require("../../Theme");
|
13
|
-
|
14
10
|
var _jsxRuntime = require("react/jsx-runtime");
|
15
|
-
|
16
11
|
var _templateObject, _templateObject2;
|
17
|
-
|
18
12
|
const _excluded = ["svg"];
|
19
|
-
|
13
|
+
/**
|
14
|
+
* inline svg 的方式嵌入 svg, 使用 shadow DOM 避免样式污染
|
15
|
+
*/
|
20
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
21
|
-
|
22
17
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
23
|
-
|
24
18
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
25
|
-
|
26
19
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
27
|
-
|
28
|
-
function
|
29
|
-
|
20
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
21
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
22
|
+
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
30
23
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
31
|
-
|
32
24
|
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; }
|
33
|
-
|
34
|
-
/**
|
35
|
-
* inline svg 的方式嵌入 svg, 使用 shadow DOM 避免样式污染
|
36
|
-
*/
|
37
25
|
function InlineSvg(_ref) {
|
38
26
|
let {
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
27
|
+
svg
|
28
|
+
} = _ref,
|
29
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
43
30
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, _objectSpread(_objectSpread({}, rest), {}, {
|
44
31
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Inner, {
|
45
32
|
dangerouslySetInnerHTML: {
|
@@ -48,7 +35,6 @@ function InlineSvg(_ref) {
|
|
48
35
|
})
|
49
36
|
}));
|
50
37
|
}
|
51
|
-
|
52
38
|
InlineSvg.propTypes = {
|
53
39
|
svg: _propTypes.default.string.isRequired
|
54
40
|
};
|
package/lib/NavMenu/index.js
CHANGED