@arcblock/ux 2.9.10 → 2.9.12

Sign up to get free protection for your applications and to get access to all the features.
Files changed (13) hide show
  1. package/es/NFTDisplay/NFTBroken.svg +34 -0
  2. package/es/NFTDisplay/broken.js +125 -11
  3. package/es/NFTDisplay/index.js +9 -4
  4. package/es/NFTDisplay/loading.js +1 -1
  5. package/lib/NFTDisplay/NFTBroken.svg +34 -0
  6. package/lib/NFTDisplay/broken.js +102 -4
  7. package/lib/NFTDisplay/index.js +8 -4
  8. package/lib/NFTDisplay/loading.js +1 -1
  9. package/package.json +4 -4
  10. package/src/NFTDisplay/NFTBroken.svg +34 -0
  11. package/src/NFTDisplay/broken.js +45 -11
  12. package/src/NFTDisplay/index.js +4 -2
  13. package/src/NFTDisplay/loading.js +1 -1
package/es/NFTDisplay/NFTBroken.svg ADDED
@@ -0,0 +1,34 @@
1
+ <svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g clip-path="url(#clip0_317_299)">
3
+ <rect x="60" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
4
+ <rect width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
5
+ <rect x="180" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
6
+ <rect x="120" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
7
+ <rect x="240" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
8
+ <rect y="60" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
9
+ <rect x="60" y="60" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
10
+ <rect x="120" y="60" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
11
+ <rect x="240" y="59.9999" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
12
+ <rect x="180" y="59.9999" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
13
+ <rect y="120" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
14
+ <rect y="180" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
15
+ <rect y="240" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
16
+ <rect x="60" y="120" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
17
+ <rect x="60" y="180" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
18
+ <rect x="60" y="240" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
19
+ <rect x="120" y="120" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
20
+ <rect x="180" y="180" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
21
+ <rect x="120" y="240" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
22
+ <rect x="240" y="120" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
23
+ <rect x="120" y="180" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
24
+ <rect x="180" y="240" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
25
+ <rect x="180" y="120" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
26
+ <rect x="240" y="180" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
27
+ <rect x="240" y="240" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
28
+ </g>
29
+ <defs>
30
+ <clipPath id="clip0_317_299">
31
+ <rect width="300" height="300" fill="white" style="fill:white;fill-opacity:1;"/>
32
+ </clipPath>
33
+ </defs>
34
+ </svg>
package/es/NFTDisplay/broken.js CHANGED
@@ -1,18 +1,132 @@
1
- import BrokenImage from '@mui/icons-material/BrokenImage';
1
+ import React from "react";
2
+ import Box from '@mui/material/Box';
3
+ import PropTypes from 'prop-types';
4
+ var NFTBroken = function NFTBroken(props) {
5
+ return /*#__PURE__*/_jsxs("svg", {
6
+ ...props,
7
+ children: [/*#__PURE__*/_jsxs("g", {
8
+ clipPath: "url(#a)",
9
+ children: [/*#__PURE__*/_jsx("path", {
10
+ fill: "color(display-p3 .9529 .9569 .9647)",
11
+ d: "M60 0h60v60H60z"
12
+ }), /*#__PURE__*/_jsx("path", {
13
+ fill: "color(display-p3 .9765 .9804 .9843)",
14
+ d: "M0 0h60v60H0zM180 0h60v60h-60z"
15
+ }), /*#__PURE__*/_jsx("path", {
16
+ fill: "color(display-p3 .898 .9059 .9216)",
17
+ d: "M120 0h60v60h-60zM240 0h60v60h-60zM0 60h60v60H0z"
18
+ }), /*#__PURE__*/_jsx("path", {
19
+ fill: "color(display-p3 .9765 .9804 .9843)",
20
+ d: "M60 60h60v60H60z"
21
+ }), /*#__PURE__*/_jsx("path", {
22
+ fill: "color(display-p3 .9529 .9569 .9647)",
23
+ d: "M120 60h60v60h-60zM240 60h60v60h-60z"
24
+ }), /*#__PURE__*/_jsx("path", {
25
+ fill: "color(display-p3 .898 .9059 .9216)",
26
+ d: "M180 60h60v60h-60z"
27
+ }), /*#__PURE__*/_jsx("path", {
28
+ fill: "color(display-p3 .9529 .9569 .9647)",
29
+ d: "M0 120h60v60H0z"
30
+ }), /*#__PURE__*/_jsx("path", {
31
+ fill: "color(display-p3 .9765 .9804 .9843)",
32
+ d: "M0 180h60v60H0z"
33
+ }), /*#__PURE__*/_jsx("path", {
34
+ fill: "color(display-p3 .9529 .9569 .9647)",
35
+ d: "M0 240h60v60H0z"
36
+ }), /*#__PURE__*/_jsx("path", {
37
+ fill: "color(display-p3 .898 .9059 .9216)",
38
+ d: "M60 120h60v60H60z"
39
+ }), /*#__PURE__*/_jsx("path", {
40
+ fill: "color(display-p3 .9529 .9569 .9647)",
41
+ d: "M60 180h60v60H60z"
42
+ }), /*#__PURE__*/_jsx("path", {
43
+ fill: "color(display-p3 .898 .9059 .9216)",
44
+ d: "M60 240h60v60H60z"
45
+ }), /*#__PURE__*/_jsx("path", {
46
+ fill: "color(display-p3 .9765 .9804 .9843)",
47
+ d: "M120 120h60v60h-60zM180 180h60v60h-60z"
48
+ }), /*#__PURE__*/_jsx("path", {
49
+ fill: "color(display-p3 .9529 .9569 .9647)",
50
+ d: "M120 240h60v60h-60z"
51
+ }), /*#__PURE__*/_jsx("path", {
52
+ fill: "color(display-p3 .9765 .9804 .9843)",
53
+ d: "M240 120h60v60h-60z"
54
+ }), /*#__PURE__*/_jsx("path", {
55
+ fill: "color(display-p3 .898 .9059 .9216)",
56
+ d: "M120 180h60v60h-60zM180 240h60v60h-60z"
57
+ }), /*#__PURE__*/_jsx("path", {
58
+ fill: "color(display-p3 .9529 .9569 .9647)",
59
+ d: "M180 120h60v60h-60zM240 180h60v60h-60z"
60
+ }), /*#__PURE__*/_jsx("path", {
61
+ fill: "color(display-p3 .9765 .9804 .9843)",
62
+ d: "M240 240h60v60h-60z"
63
+ })]
64
+ }), /*#__PURE__*/_jsx("defs", {
65
+ children: /*#__PURE__*/_jsx("clipPath", {
66
+ id: "a",
67
+ children: /*#__PURE__*/_jsx("path", {
68
+ fill: "#fff",
69
+ d: "M0 0h300v300H0z"
70
+ })
71
+ })
72
+ })]
73
+ });
74
+ };
75
+ NFTBroken.defaultProps = {
76
+ width: "300",
77
+ height: "300",
78
+ viewBox: "0 0 300 300",
79
+ fill: "none",
80
+ xmlns: "http://www.w3.org/2000/svg"
81
+ };
2
82
  import { styled } from '../Theme';
3
83
  import { jsx as _jsx } from "react/jsx-runtime";
4
- export default function Broken() {
5
- return /*#__PURE__*/_jsx(Root, {
6
- className: "nft-display-broken"
84
+ import { jsxs as _jsxs } from "react/jsx-runtime";
85
+ export default function Broken({
86
+ children
87
+ } = {}) {
88
+ return /*#__PURE__*/_jsxs(Root, {
89
+ children: [/*#__PURE__*/_jsx(NFTBroken, {
90
+ className: "nft-display-broken-background"
91
+ }), children && /*#__PURE__*/_jsx(Box, {
92
+ className: "nft-display-broken-content",
93
+ children: children
94
+ })]
7
95
  });
8
96
  }
9
- const Root = styled(BrokenImage)`
10
- && {
97
+ Broken.propTypes = {
98
+ children: PropTypes.node
99
+ };
100
+ Broken.defaultProps = {
101
+ children: 'Non-publicly accessible NFT'
102
+ };
103
+ const Root = styled(Box)`
104
+ width: 100%;
105
+ height: 100%;
106
+ position: relative;
107
+
108
+ .nft-display-broken-background {
109
+ width: 100%;
110
+ height: 100%;
111
+ }
112
+
113
+ .nft-display-broken-content {
114
+ display: flex;
11
115
  width: 100%;
12
- max-width: 200px;
13
- height: auto;
14
- max-width: 100%;
15
- max-height: 100%;
16
- fill: #ddd;
116
+ height: 100%;
117
+ justify-content: center;
118
+ align-items: center;
119
+ position: absolute;
120
+ top: 0;
121
+ left: 0;
122
+ right: 0;
123
+ bottom: 0;
124
+ margin: auto;
125
+ mix-blend-mode: plus-darker;
126
+ font-size: 13px;
127
+ color: #9aa3b0;
128
+ text-align: center;
129
+ text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;
130
+ user-select: none;
17
131
  }
18
132
  `;
package/es/NFTDisplay/index.js CHANGED
@@ -145,7 +145,7 @@ function NFTDisplay({
145
145
  return state.fallback ? state.fallback?.() : /*#__PURE__*/_jsx(ReactSVG, {
146
146
  src: url,
147
147
  beforeInjection: svg => {
148
- svg.setAttribute('style', 'pointer-events: none');
148
+ svg.setAttribute('style', 'pointer-events: none; width: 100%; height: 100%;');
149
149
  },
150
150
  afterInjection: safeOnLoad,
151
151
  onError: error => {
@@ -163,9 +163,14 @@ function NFTDisplay({
163
163
  // eslint-disable-next-line jsx-a11y/alt-text
164
164
  _jsx("object", {
165
165
  type: objectType,
166
- data: url
167
- // onError={() => setState({ ...state, error: true })}
168
- ,
166
+ data: url,
167
+ onErrorCapture: () => {
168
+ setState({
169
+ ...state,
170
+ error: true,
171
+ loading: false
172
+ });
173
+ },
169
174
  onLoad: safeOnLoad,
170
175
  style: {
171
176
  width: 'auto',
package/es/NFTDisplay/loading.js CHANGED
@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
3
3
  export default function Loading() {
4
4
  return /*#__PURE__*/_jsx(Root, {
5
5
  className: "nft-display__loading",
6
- children: "loading..."
6
+ children: "Loading..."
7
7
  });
8
8
  }
9
9
  const Root = styled('span')`
package/lib/NFTDisplay/NFTBroken.svg ADDED
@@ -0,0 +1,34 @@
1
+ <svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g clip-path="url(#clip0_317_299)">
3
+ <rect x="60" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
4
+ <rect width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
5
+ <rect x="180" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
6
+ <rect x="120" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
7
+ <rect x="240" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
8
+ <rect y="60" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
9
+ <rect x="60" y="60" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
10
+ <rect x="120" y="60" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
11
+ <rect x="240" y="59.9999" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
12
+ <rect x="180" y="59.9999" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
13
+ <rect y="120" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
14
+ <rect y="180" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
15
+ <rect y="240" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
16
+ <rect x="60" y="120" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
17
+ <rect x="60" y="180" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
18
+ <rect x="60" y="240" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
19
+ <rect x="120" y="120" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
20
+ <rect x="180" y="180" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
21
+ <rect x="120" y="240" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
22
+ <rect x="240" y="120" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
23
+ <rect x="120" y="180" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
24
+ <rect x="180" y="240" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
25
+ <rect x="180" y="120" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
26
+ <rect x="240" y="180" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
27
+ <rect x="240" y="240" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
28
+ </g>
29
+ <defs>
30
+ <clipPath id="clip0_317_299">
31
+ <rect width="300" height="300" fill="white" style="fill:white;fill-opacity:1;"/>
32
+ </clipPath>
33
+ </defs>
34
+ </svg>
package/lib/NFTDisplay/broken.js CHANGED
@@ -4,15 +4,113 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = Broken;
7
- var _BrokenImage = _interopRequireDefault(require("@mui/icons-material/BrokenImage"));
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _Box = _interopRequireDefault(require("@mui/material/Box"));
9
+ var _propTypes = _interopRequireDefault(require("prop-types"));
8
10
  var _Theme = require("../Theme");
9
11
  var _jsxRuntime = require("react/jsx-runtime");
10
12
  var _templateObject;
11
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
+ 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; }
15
+ 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; }
16
+ 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; }
17
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
18
+ 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); }
12
19
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
20
+ var NFTBroken = function NFTBroken(props) {
21
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", _objectSpread(_objectSpread({}, props), {}, {
22
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
23
+ clipPath: "url(#a)",
24
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
25
+ fill: "color(display-p3 .9529 .9569 .9647)",
26
+ d: "M60 0h60v60H60z"
27
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
28
+ fill: "color(display-p3 .9765 .9804 .9843)",
29
+ d: "M0 0h60v60H0zM180 0h60v60h-60z"
30
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
31
+ fill: "color(display-p3 .898 .9059 .9216)",
32
+ d: "M120 0h60v60h-60zM240 0h60v60h-60zM0 60h60v60H0z"
33
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
34
+ fill: "color(display-p3 .9765 .9804 .9843)",
35
+ d: "M60 60h60v60H60z"
36
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
37
+ fill: "color(display-p3 .9529 .9569 .9647)",
38
+ d: "M120 60h60v60h-60zM240 60h60v60h-60z"
39
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
40
+ fill: "color(display-p3 .898 .9059 .9216)",
41
+ d: "M180 60h60v60h-60z"
42
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
43
+ fill: "color(display-p3 .9529 .9569 .9647)",
44
+ d: "M0 120h60v60H0z"
45
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
46
+ fill: "color(display-p3 .9765 .9804 .9843)",
47
+ d: "M0 180h60v60H0z"
48
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
49
+ fill: "color(display-p3 .9529 .9569 .9647)",
50
+ d: "M0 240h60v60H0z"
51
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
52
+ fill: "color(display-p3 .898 .9059 .9216)",
53
+ d: "M60 120h60v60H60z"
54
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
55
+ fill: "color(display-p3 .9529 .9569 .9647)",
56
+ d: "M60 180h60v60H60z"
57
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
58
+ fill: "color(display-p3 .898 .9059 .9216)",
59
+ d: "M60 240h60v60H60z"
60
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
61
+ fill: "color(display-p3 .9765 .9804 .9843)",
62
+ d: "M120 120h60v60h-60zM180 180h60v60h-60z"
63
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
64
+ fill: "color(display-p3 .9529 .9569 .9647)",
65
+ d: "M120 240h60v60h-60z"
66
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
67
+ fill: "color(display-p3 .9765 .9804 .9843)",
68
+ d: "M240 120h60v60h-60z"
69
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
70
+ fill: "color(display-p3 .898 .9059 .9216)",
71
+ d: "M120 180h60v60h-60zM180 240h60v60h-60z"
72
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
73
+ fill: "color(display-p3 .9529 .9569 .9647)",
74
+ d: "M180 120h60v60h-60zM240 180h60v60h-60z"
75
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
76
+ fill: "color(display-p3 .9765 .9804 .9843)",
77
+ d: "M240 240h60v60h-60z"
78
+ })]
79
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("defs", {
80
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {
81
+ id: "a",
82
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
83
+ fill: "#fff",
84
+ d: "M0 0h300v300H0z"
85
+ })
86
+ })
87
+ })]
88
+ }));
89
+ };
90
+ NFTBroken.defaultProps = {
91
+ width: "300",
92
+ height: "300",
93
+ viewBox: "0 0 300 300",
94
+ fill: "none",
95
+ xmlns: "http://www.w3.org/2000/svg"
96
+ };
13
97
  function Broken() {
14
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
15
- className: "nft-display-broken"
98
+ let {
99
+ children
100
+ } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
101
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, {
102
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(NFTBroken, {
103
+ className: "nft-display-broken-background"
104
+ }), children && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
105
+ className: "nft-display-broken-content",
106
+ children: children
107
+ })]
16
108
  });
17
109
  }
18
- const Root = (0, _Theme.styled)(_BrokenImage.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n && {\n width: 100%;\n max-width: 200px;\n height: auto;\n max-width: 100%;\n max-height: 100%;\n fill: #ddd;\n }\n"])));
110
+ Broken.propTypes = {
111
+ children: _propTypes.default.node
112
+ };
113
+ Broken.defaultProps = {
114
+ children: 'Non-publicly accessible NFT'
115
+ };
116
+ const Root = (0, _Theme.styled)(_Box.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n height: 100%;\n position: relative;\n\n .nft-display-broken-background {\n width: 100%;\n height: 100%;\n }\n\n .nft-display-broken-content {\n display: flex;\n width: 100%;\n height: 100%;\n justify-content: center;\n align-items: center;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n mix-blend-mode: plus-darker;\n font-size: 13px;\n color: #9aa3b0;\n text-align: center;\n text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;\n user-select: none;\n }\n"])));
package/lib/NFTDisplay/index.js CHANGED
@@ -163,7 +163,7 @@ function NFTDisplay(_ref) {
163
163
  return state.fallback ? (_state$fallback = state.fallback) === null || _state$fallback === void 0 ? void 0 : _state$fallback.call(state) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSvg.ReactSVG, {
164
164
  src: url,
165
165
  beforeInjection: svg => {
166
- svg.setAttribute('style', 'pointer-events: none');
166
+ svg.setAttribute('style', 'pointer-events: none; width: 100%; height: 100%;');
167
167
  },
168
168
  afterInjection: safeOnLoad,
169
169
  onError: error => {
@@ -182,9 +182,13 @@ function NFTDisplay(_ref) {
182
182
  // eslint-disable-next-line jsx-a11y/alt-text
183
183
  (0, _jsxRuntime.jsx)("object", {
184
184
  type: objectType,
185
- data: url
186
- // onError={() => setState({ ...state, error: true })}
187
- ,
185
+ data: url,
186
+ onErrorCapture: () => {
187
+ setState(_objectSpread(_objectSpread({}, state), {}, {
188
+ error: true,
189
+ loading: false
190
+ }));
191
+ },
188
192
  onLoad: safeOnLoad,
189
193
  style: {
190
194
  width: 'auto',
package/lib/NFTDisplay/loading.js CHANGED
@@ -11,7 +11,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
11
11
  function Loading() {
12
12
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
13
13
  className: "nft-display__loading",
14
- children: "loading..."
14
+ children: "Loading..."
15
15
  });
16
16
  }
17
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"])));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arcblock/ux",
3
- "version": "2.9.10",
3
+ "version": "2.9.12",
4
4
  "description": "Common used react components for arcblock products",
5
5
  "keywords": [
6
6
  "react",
@@ -340,11 +340,11 @@
340
340
  "peerDependencies": {
341
341
  "react": ">=18.1.0"
342
342
  },
343
- "gitHead": "a610c6ed94e231ffad6ded36725148cf1fac1feb",
343
+ "gitHead": "9338ecd08b81f0ff693ef449d6e454ec5b0808ef",
344
344
  "dependencies": {
345
345
  "@arcblock/did-motif": "^1.1.13",
346
- "@arcblock/icons": "^2.9.10",
347
- "@arcblock/react-hooks": "^2.9.10",
346
+ "@arcblock/icons": "^2.9.12",
347
+ "@arcblock/react-hooks": "^2.9.12",
348
348
  "@babel/plugin-syntax-dynamic-import": "^7.8.3",
349
349
  "@emotion/react": "^11.10.4",
350
350
  "@emotion/styled": "^11.10.4",
package/src/NFTDisplay/NFTBroken.svg ADDED
@@ -0,0 +1,34 @@
1
+ <svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g clip-path="url(#clip0_317_299)">
3
+ <rect x="60" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
4
+ <rect width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
5
+ <rect x="180" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
6
+ <rect x="120" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
7
+ <rect x="240" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
8
+ <rect y="60" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
9
+ <rect x="60" y="60" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
10
+ <rect x="120" y="60" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
11
+ <rect x="240" y="59.9999" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
12
+ <rect x="180" y="59.9999" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
13
+ <rect y="120" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
14
+ <rect y="180" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
15
+ <rect y="240" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
16
+ <rect x="60" y="120" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
17
+ <rect x="60" y="180" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
18
+ <rect x="60" y="240" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
19
+ <rect x="120" y="120" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
20
+ <rect x="180" y="180" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
21
+ <rect x="120" y="240" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
22
+ <rect x="240" y="120" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
23
+ <rect x="120" y="180" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
24
+ <rect x="180" y="240" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
25
+ <rect x="180" y="120" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
26
+ <rect x="240" y="180" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
27
+ <rect x="240" y="240" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
28
+ </g>
29
+ <defs>
30
+ <clipPath id="clip0_317_299">
31
+ <rect width="300" height="300" fill="white" style="fill:white;fill-opacity:1;"/>
32
+ </clipPath>
33
+ </defs>
34
+ </svg>
package/src/NFTDisplay/broken.js CHANGED
@@ -1,18 +1,52 @@
1
- import BrokenImage from '@mui/icons-material/BrokenImage';
2
-
1
+ import Box from '@mui/material/Box';
2
+ import PropTypes from 'prop-types';
3
+ import NFTBroken from './NFTBroken.svg';
3
4
  import { styled } from '../Theme';
4
5
 
5
- export default function Broken() {
6
- return <Root className="nft-display-broken" />;
6
+ export default function Broken({ children } = {}) {
7
+ return (
8
+ <Root>
9
+ <NFTBroken className="nft-display-broken-background" />
10
+ {children && <Box className="nft-display-broken-content">{children}</Box>}
11
+ </Root>
12
+ );
7
13
  }
8
14
 
9
- const Root = styled(BrokenImage)`
10
- && {
15
+ Broken.propTypes = {
16
+ children: PropTypes.node,
17
+ };
18
+
19
+ Broken.defaultProps = {
20
+ children: 'Non-publicly accessible NFT',
21
+ };
22
+
23
+ const Root = styled(Box)`
24
+ width: 100%;
25
+ height: 100%;
26
+ position: relative;
27
+
28
+ .nft-display-broken-background {
29
+ width: 100%;
30
+ height: 100%;
31
+ }
32
+
33
+ .nft-display-broken-content {
34
+ display: flex;
11
35
  width: 100%;
12
- max-width: 200px;
13
- height: auto;
14
- max-width: 100%;
15
- max-height: 100%;
16
- fill: #ddd;
36
+ height: 100%;
37
+ justify-content: center;
38
+ align-items: center;
39
+ position: absolute;
40
+ top: 0;
41
+ left: 0;
42
+ right: 0;
43
+ bottom: 0;
44
+ margin: auto;
45
+ mix-blend-mode: plus-darker;
46
+ font-size: 13px;
47
+ color: #9aa3b0;
48
+ text-align: center;
49
+ text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;
50
+ user-select: none;
17
51
  }
18
52
  `;
package/src/NFTDisplay/index.js CHANGED
@@ -142,7 +142,7 @@ function NFTDisplay({
142
142
  <ReactSVG
143
143
  src={url}
144
144
  beforeInjection={(svg) => {
145
- svg.setAttribute('style', 'pointer-events: none');
145
+ svg.setAttribute('style', 'pointer-events: none; width: 100%; height: 100%;');
146
146
  }}
147
147
  afterInjection={safeOnLoad}
148
148
  onError={(error) => {
@@ -162,7 +162,9 @@ function NFTDisplay({
162
162
  key={url}
163
163
  type={objectType}
164
164
  data={url}
165
- // onError={() => setState({ ...state, error: true })}
165
+ onErrorCapture={() => {
166
+ setState({ ...state, error: true, loading: false });
167
+ }}
166
168
  onLoad={safeOnLoad}
167
169
  style={{ width: 'auto', height: 'auto', pointerEvents: 'none' }}
168
170
  />
package/src/NFTDisplay/loading.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { styled } from '../Theme';
2
2
 
3
3
  export default function Loading() {
4
- return <Root className="nft-display__loading">loading...</Root>;
4
+ return <Root className="nft-display__loading">Loading...</Root>;
5
5
  }
6
6
 
7
7
  const Root = styled('span')`