@arcblock/ux 2.9.91 → 2.10.1
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 +36 -48
- package/lib/ActivityIndicator/index.js +122 -75
- package/lib/Address/compact-text.js +48 -66
- package/lib/Address/did-address.js +114 -87
- package/lib/Address/index.js +15 -27
- package/lib/Address/responsive-did-address.js +48 -50
- package/lib/Alert/index.js +58 -52
- package/lib/AnimationWaiter/index.js +123 -69
- package/lib/Async/index.js +8 -22
- package/lib/Avatar/did-motif.js +38 -52
- package/lib/Avatar/etherscan-blockies.js +4 -10
- package/lib/Avatar/index.js +71 -77
- package/lib/Badge/index.js +49 -56
- package/lib/Blocklet/blocklet.js +181 -97
- package/lib/Blocklet/index.js +4 -24
- package/lib/Blocklet/utils.js +50 -13
- package/lib/BlockletContext/index.js +21 -31
- package/lib/BlockletNFT/index.js +255 -115
- package/lib/Button/index.js +5 -11
- package/lib/Button/wrap.js +45 -56
- package/lib/ButtonGroup/index.js +3 -9
- package/lib/CardSelector/index.js +67 -43
- package/lib/Center/index.js +19 -20
- package/lib/ClickToCopy/copy-button.js +37 -50
- package/lib/ClickToCopy/hook.js +10 -18
- package/lib/ClickToCopy/index.js +54 -66
- package/lib/CodeBlock/LightBox.js +84 -11
- package/lib/CodeBlock/index.js +175 -101
- package/lib/Colors/index.js +3 -20
- package/lib/Colors/themes/default.js +1 -7
- package/lib/Colors/themes/temp.js +1 -7
- package/lib/ContactForm/index.js +95 -60
- package/lib/CookieConsent/index.js +58 -52
- package/lib/CountDown/index.js +90 -59
- package/lib/DID/index.js +80 -96
- package/lib/Datatable/CustomToolbar.js +188 -137
- package/lib/Datatable/DatatableContext.js +14 -21
- package/lib/Datatable/TableSearch.js +99 -58
- package/lib/Datatable/index.js +312 -139
- package/lib/Datatable/utils.js +9 -17
- package/lib/Dialog/confirm.js +46 -58
- package/lib/Dialog/dialog.js +110 -66
- package/lib/Dialog/index.js +4 -27
- package/lib/Dialog/use-confirm.js +40 -65
- package/lib/DidLogo/index.js +14 -22
- package/lib/DriftBot/index.js +34 -19
- package/lib/Earth/index.js +214 -110
- package/lib/Earth/util.js +6 -19
- package/lib/Empty/index.js +33 -38
- package/lib/ErrorBoundary/fallback.js +45 -43
- package/lib/ErrorBoundary/index.js +1 -16
- package/lib/Footer/index.js +96 -48
- package/lib/Header/auto-hidden.js +28 -31
- package/lib/Header/header.js +151 -69
- package/lib/Header/index.js +2 -20
- package/lib/Header/responsive-header.js +67 -60
- package/lib/Icon/image.js +41 -45
- package/lib/Icon/index.js +51 -53
- package/lib/Img/index.js +77 -88
- package/lib/InfoRow/index.js +66 -48
- package/lib/Layout/dashboard/external-link.js +38 -53
- package/lib/Layout/dashboard/full-page.js +27 -41
- package/lib/Layout/dashboard/index.js +177 -132
- package/lib/Layout/dashboard/sidebar.js +164 -61
- package/lib/Layout/dashboard-legacy/header.js +119 -66
- package/lib/Layout/dashboard-legacy/index.js +90 -79
- package/lib/Layout/dashboard-legacy/sidebar.js +95 -62
- package/lib/Layout/index.js +200 -106
- package/lib/LoadingMask/index.js +31 -38
- package/lib/Locale/browser-lang.js +2 -8
- package/lib/Locale/context.js +46 -69
- package/lib/Locale/languages.js +6 -15
- package/lib/Locale/selector.js +116 -92
- package/lib/Locale/util.js +7 -16
- package/lib/Logo/index.js +54 -57
- package/lib/Metric/index.js +103 -40
- package/lib/NFTDisplay/aspect-ratio-container.js +33 -40
- package/lib/NFTDisplay/broken.js +68 -52
- package/lib/NFTDisplay/index.js +140 -129
- package/lib/NFTDisplay/loading.js +14 -13
- package/lib/NFTDisplay/svg-embedder/img.js +18 -33
- package/lib/NFTDisplay/svg-embedder/inline-svg.js +28 -32
- package/lib/NavMenu/index.js +2 -13
- package/lib/NavMenu/nav-menu.js +133 -148
- package/lib/NavMenu/style.js +179 -12
- package/lib/PageScroller/index.js +82 -93
- package/lib/PageScroller/story/FifthComponent.js +4 -10
- package/lib/PageScroller/story/FirstComponent.js +4 -10
- package/lib/PageScroller/story/FourthComponent.js +4 -10
- package/lib/PageScroller/story/FullPage.js +21 -28
- package/lib/PageScroller/story/PageContain.js +23 -30
- package/lib/PageScroller/story/SecondComponent.js +4 -10
- package/lib/PageScroller/story/ThirdComponent.js +4 -10
- package/lib/PageScroller/usePrevValue.js +4 -11
- package/lib/Passport/index.js +2 -9
- package/lib/Passport/passport.js +38 -51
- package/lib/PoweredByArcBlock/index.js +19 -33
- package/lib/PricingTable/PricingPlan.js +90 -34
- package/lib/PricingTable/index.js +28 -26
- package/lib/QRCode/index.js +38 -50
- package/lib/RelativeTime/index.js +44 -59
- package/lib/Result/common.js +85 -107
- package/lib/Result/index.js +22 -34
- package/lib/Result/result.js +35 -41
- package/lib/Result/translations.js +1 -7
- package/lib/Screenshot/BaseScreenshot/index.js +65 -43
- package/lib/Screenshot/BaseScreenshot/shells/Macbook.js +17 -27
- package/lib/Screenshot/BaseScreenshot/shells/Phone.js +14 -25
- package/lib/Screenshot/index.js +103 -92
- package/lib/SessionBlocklet/index.js +125 -143
- package/lib/SessionManager/index.js +2 -9
- package/lib/SessionPermission/index.js +13 -23
- package/lib/SessionUser/components/logged-in.js +139 -158
- package/lib/SessionUser/components/session-user-item.js +44 -58
- package/lib/SessionUser/components/session-user-switch.js +133 -152
- package/lib/SessionUser/components/un-login.js +27 -35
- package/lib/SessionUser/components/user-info.js +62 -74
- package/lib/SessionUser/index.js +26 -34
- package/lib/SessionUser/libs/translation.js +1 -7
- package/lib/SessionUser/libs/utils.js +13 -34
- package/lib/Sparkline/index.js +4 -10
- package/lib/Spinner/index.js +11 -17
- package/lib/SplitButton/index.js +72 -68
- package/lib/Success/index.js +28 -34
- package/lib/Switch/index.js +64 -75
- package/lib/Tabs/index.js +84 -103
- package/lib/Tag/index.js +52 -56
- package/lib/TextCollapse/index.js +57 -50
- package/lib/Theme/index.js +8 -47
- package/lib/Theme/theme-provider.js +19 -26
- package/lib/Theme/theme.js +49 -62
- package/lib/Toast/index.js +41 -73
- package/lib/Typography/index.js +44 -55
- package/lib/Util/constant.js +16 -22
- package/lib/Util/deprecate.js +14 -26
- package/lib/Util/federated.js +16 -38
- package/lib/Util/index.js +63 -113
- package/lib/Util/passport.js +23 -33
- package/lib/Util/wallet.js +5 -14
- package/lib/Video/index.js +34 -34
- package/lib/Wallet/Action.js +72 -49
- package/lib/Wallet/Download.js +132 -115
- package/lib/Wallet/Open.js +26 -25
- package/lib/WalletOSIcon/index.js +33 -42
- package/lib/WebWalletSWKeeper/index.js +42 -55
- package/lib/WechatPrompt/index.js +53 -33
- package/lib/index.js +38 -265
- package/lib/withTheme/index.js +53 -33
- package/lib/withTracker/error_boundary.js +7 -18
- package/lib/withTracker/index.js +25 -34
- package/package.json +9 -316
- package/src/WalletOSIcon/index.jsx +1 -1
- package/es/ActionButton/index.js +0 -99
- package/es/ActivityIndicator/index.js +0 -180
- package/es/Address/compact-text.js +0 -105
- package/es/Address/did-address.js +0 -222
- package/es/Address/index.js +0 -23
- package/es/Address/responsive-did-address.js +0 -87
- package/es/Alert/index.js +0 -134
- package/es/AnimationWaiter/default-animation.json +0 -1
- package/es/AnimationWaiter/index.js +0 -240
- package/es/Async/index.js +0 -38
- package/es/Avatar/did-motif.js +0 -68
- package/es/Avatar/etherscan-blockies.js +0 -83
- package/es/Avatar/index.js +0 -179
- package/es/Badge/index.js +0 -98
- package/es/Blocklet/blocklet.js +0 -298
- package/es/Blocklet/index.js +0 -4
- package/es/Blocklet/utils.js +0 -52
- package/es/BlockletContext/index.js +0 -65
- package/es/BlockletNFT/index.js +0 -412
- package/es/Button/index.js +0 -8
- package/es/Button/wrap.js +0 -140
- package/es/ButtonGroup/index.js +0 -6
- package/es/CardSelector/index.js +0 -149
- package/es/Center/index.js +0 -41
- package/es/ClickToCopy/copy-button.js +0 -72
- package/es/ClickToCopy/hook.js +0 -39
- package/es/ClickToCopy/index.js +0 -92
- package/es/CodeBlock/LightBox.js +0 -85
- package/es/CodeBlock/index.js +0 -222
- package/es/Colors/index.js +0 -3
- package/es/Colors/themes/default.js +0 -77
- package/es/Colors/themes/temp.js +0 -41
- package/es/ContactForm/index.js +0 -230
- package/es/CookieConsent/index.js +0 -113
- package/es/CountDown/index.js +0 -178
- package/es/DID/index.js +0 -249
- package/es/Datatable/CustomToolbar.js +0 -396
- package/es/Datatable/DatatableContext.js +0 -34
- package/es/Datatable/TableSearch.js +0 -166
- package/es/Datatable/index.js +0 -629
- package/es/Datatable/utils.js +0 -132
- package/es/Dialog/confirm.js +0 -123
- package/es/Dialog/dialog.js +0 -201
- package/es/Dialog/index.js +0 -4
- package/es/Dialog/types.d.ts +0 -17
- package/es/Dialog/use-confirm.js +0 -133
- package/es/DidLogo/index.js +0 -31
- package/es/DriftBot/index.js +0 -70
- package/es/Earth/countries.json +0 -8057
- package/es/Earth/index.js +0 -521
- package/es/Earth/util.js +0 -51
- package/es/Empty/index.js +0 -65
- package/es/ErrorBoundary/fallback.js +0 -73
- package/es/ErrorBoundary/index.js +0 -1
- package/es/Footer/index.js +0 -172
- package/es/Header/auto-hidden.js +0 -35
- package/es/Header/header.js +0 -223
- package/es/Header/index.js +0 -2
- package/es/Header/responsive-header.js +0 -146
- package/es/Icon/image.js +0 -65
- package/es/Icon/index.js +0 -84
- package/es/Img/index.js +0 -218
- package/es/InfoRow/index.js +0 -87
- package/es/Layout/dashboard/external-link.js +0 -58
- package/es/Layout/dashboard/full-page.js +0 -53
- package/es/Layout/dashboard/index.js +0 -282
- package/es/Layout/dashboard/sidebar.js +0 -209
- package/es/Layout/dashboard-legacy/header.js +0 -174
- package/es/Layout/dashboard-legacy/index.js +0 -148
- package/es/Layout/dashboard-legacy/sidebar.js +0 -129
- package/es/Layout/index.js +0 -335
- package/es/LoadingMask/index.js +0 -102
- package/es/Locale/browser-lang.js +0 -52
- package/es/Locale/context.js +0 -139
- package/es/Locale/languages.js +0 -60
- package/es/Locale/selector.js +0 -186
- package/es/Locale/util.js +0 -21
- package/es/Logo/images/logo-dark-text.svg +0 -3
- package/es/Logo/images/logo-dark-top.svg +0 -6
- package/es/Logo/images/logo-light-text.svg +0 -3
- package/es/Logo/images/logo-light-top.svg +0 -6
- package/es/Logo/index.js +0 -136
- package/es/Metric/index.js +0 -132
- package/es/NFTDisplay/NFTBroken.svg +0 -34
- package/es/NFTDisplay/README.md +0 -59
- package/es/NFTDisplay/aspect-ratio-container.js +0 -39
- package/es/NFTDisplay/broken.js +0 -132
- package/es/NFTDisplay/demo/data/asset-state-display-url.json +0 -7
- package/es/NFTDisplay/demo/data/asset-state-gzipped-svg-1-1.json +0 -10
- package/es/NFTDisplay/demo/data/asset-state-gzipped-svg-374-130.json +0 -10
- package/es/NFTDisplay/demo/data/asset-state-gzipped-svg-with-foreign-object.json +0 -20
- package/es/NFTDisplay/demo/data/asset-state-svg.json +0 -29
- package/es/NFTDisplay/demo/data/asset-state-url.json +0 -10
- package/es/NFTDisplay/index.js +0 -328
- package/es/NFTDisplay/loading.js +0 -18
- package/es/NFTDisplay/svg-embedder/img.js +0 -45
- package/es/NFTDisplay/svg-embedder/inline-svg.js +0 -39
- package/es/NavMenu/index.js +0 -2
- package/es/NavMenu/nav-menu.js +0 -358
- package/es/NavMenu/style.js +0 -181
- package/es/PageScroller/index.js +0 -286
- package/es/PageScroller/story/FifthComponent.js +0 -9
- package/es/PageScroller/story/FirstComponent.js +0 -9
- package/es/PageScroller/story/FourthComponent.js +0 -12
- package/es/PageScroller/story/FullPage.js +0 -47
- package/es/PageScroller/story/PageContain.js +0 -59
- package/es/PageScroller/story/SecondComponent.js +0 -9
- package/es/PageScroller/story/ThirdComponent.js +0 -9
- package/es/PageScroller/story/index.css +0 -115
- package/es/PageScroller/usePrevValue.js +0 -9
- package/es/Passport/index.js +0 -2
- package/es/Passport/passport.js +0 -103
- package/es/PoweredByArcBlock/index.js +0 -31
- package/es/PricingTable/PricingPlan.js +0 -124
- package/es/PricingTable/index.js +0 -53
- package/es/QRCode/index.js +0 -73
- package/es/RelativeTime/index.js +0 -107
- package/es/Result/common.js +0 -140
- package/es/Result/demo/fixtures/result-image-404.svg +0 -1
- package/es/Result/index.js +0 -33
- package/es/Result/result.js +0 -59
- package/es/Result/translations.js +0 -54
- package/es/Screenshot/BaseScreenshot/index.js +0 -91
- package/es/Screenshot/BaseScreenshot/shells/Macbook.js +0 -51
- package/es/Screenshot/BaseScreenshot/shells/Phone.js +0 -36
- package/es/Screenshot/demo/images/bg-00.jpg +0 -0
- package/es/Screenshot/demo/images/bg-01.jpg +0 -0
- package/es/Screenshot/demo/images/bg-02.jpg +0 -0
- package/es/Screenshot/demo/images/bg-03.jpg +0 -0
- package/es/Screenshot/demo/images/bg-04.jpg +0 -0
- package/es/Screenshot/demo/images/bg-05.jpg +0 -0
- package/es/Screenshot/demo/images/bg-06.jpg +0 -0
- package/es/Screenshot/demo/images/bg-07.jpg +0 -0
- package/es/Screenshot/demo/images/bg-08.jpg +0 -0
- package/es/Screenshot/demo/images/bg-09.jpg +0 -0
- package/es/Screenshot/devices.css +0 -1366
- package/es/Screenshot/index.js +0 -299
- package/es/SessionBlocklet/index.js +0 -173
- package/es/SessionManager/index.js +0 -2
- package/es/SessionPermission/index.js +0 -28
- package/es/SessionUser/components/logged-in.js +0 -229
- package/es/SessionUser/components/session-user-item.js +0 -102
- package/es/SessionUser/components/session-user-switch.js +0 -223
- package/es/SessionUser/components/un-login.js +0 -64
- package/es/SessionUser/components/user-info.js +0 -167
- package/es/SessionUser/index.js +0 -49
- package/es/SessionUser/libs/translation.js +0 -19
- package/es/SessionUser/libs/utils.js +0 -29
- package/es/Sparkline/index.js +0 -193
- package/es/Spinner/index.js +0 -28
- package/es/SplitButton/index.js +0 -145
- package/es/Success/index.js +0 -175
- package/es/Switch/index.js +0 -96
- package/es/Tabs/index.js +0 -214
- package/es/Tag/index.js +0 -108
- package/es/TextCollapse/index.js +0 -92
- package/es/Theme/index.js +0 -16
- package/es/Theme/theme-provider.js +0 -39
- package/es/Theme/theme.js +0 -145
- package/es/Toast/index.js +0 -97
- package/es/Typography/index.js +0 -95
- package/es/Util/constant.js +0 -42
- package/es/Util/deprecate.js +0 -28
- package/es/Util/federated.js +0 -91
- package/es/Util/index.js +0 -363
- package/es/Util/passport.js +0 -62
- package/es/Util/wallet.js +0 -32
- package/es/Video/index.js +0 -89
- package/es/Wallet/Action.js +0 -119
- package/es/Wallet/Download.js +0 -331
- package/es/Wallet/Open.js +0 -45
- package/es/Wallet/images/abtwallet.png +0 -0
- package/es/Wallet/images/android_download.svg +0 -23
- package/es/Wallet/images/app-store.svg +0 -20
- package/es/Wallet/images/google-play.svg +0 -70
- package/es/WalletOSIcon/index.js +0 -82
- package/es/WebWalletSWKeeper/index.js +0 -117
- package/es/WechatPrompt/images/android.png +0 -0
- package/es/WechatPrompt/images/ios.png +0 -0
- package/es/WechatPrompt/index.js +0 -88
- package/es/index.js +0 -38
- package/es/withTheme/index.js +0 -69
- package/es/withTracker/README.md +0 -34
- package/es/withTracker/error_boundary.js +0 -34
- package/es/withTracker/index.js +0 -55
@@ -1,34 +1,16 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
}
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
var _noop = _interopRequireDefault(require("lodash/noop"));
|
15
|
-
var _Theme = require("../Theme");
|
16
|
-
var _Util = require("../Util");
|
17
|
-
var _compactText = _interopRequireDefault(require("./compact-text"));
|
18
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
19
|
-
var _templateObject;
|
20
|
-
const _excluded = ["component", "size", "copyable", "content", "children", "prepend", "append", "compact", "startChars", "endChars", "locale", "showCopyButtonInTooltip"];
|
21
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
22
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
23
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
24
|
-
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
25
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
26
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
27
|
-
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; }
|
28
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
|
29
|
-
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
30
|
-
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
|
-
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; }
|
1
|
+
import React, { useRef, useState, forwardRef } from 'react';
|
2
|
+
import PropTypes from 'prop-types';
|
3
|
+
import '@fontsource/ubuntu-mono/400.css';
|
4
|
+
import { green } from '@mui/material/colors';
|
5
|
+
import { Tooltip, Box } from '@mui/material';
|
6
|
+
import copy from 'copy-to-clipboard';
|
7
|
+
import { ContentCopy as CopyIcon, Check as CheckIcon } from '@mui/icons-material';
|
8
|
+
import noop from 'lodash/noop';
|
9
|
+
import { styled } from '../Theme';
|
10
|
+
import { getFontSize } from '../Util';
|
11
|
+
import CompactText from './compact-text';
|
12
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
13
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
32
14
|
const translations = {
|
33
15
|
en: {
|
34
16
|
copy: 'Click To Copy',
|
@@ -53,32 +35,31 @@ const translations = {
|
|
53
35
|
* - 为保证 copy 功能正常工作, 原 children 始终渲染, 但在紧凑式下会隐藏
|
54
36
|
* - 可配合 useMediaQuery 使用
|
55
37
|
*/
|
56
|
-
const DidAddress = /*#__PURE__*/
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
rest = _objectWithoutProperties(_ref, _excluded);
|
38
|
+
const DidAddress = /*#__PURE__*/forwardRef(({
|
39
|
+
component,
|
40
|
+
size,
|
41
|
+
copyable,
|
42
|
+
content,
|
43
|
+
children,
|
44
|
+
prepend,
|
45
|
+
append,
|
46
|
+
compact,
|
47
|
+
startChars,
|
48
|
+
endChars,
|
49
|
+
locale,
|
50
|
+
showCopyButtonInTooltip,
|
51
|
+
...rest
|
52
|
+
}, ref) => {
|
72
53
|
if (!translations[locale]) {
|
73
54
|
// eslint-disable-next-line no-param-reassign
|
74
55
|
locale = 'en';
|
75
56
|
}
|
76
|
-
const [copied, setCopied] =
|
77
|
-
const textRef =
|
57
|
+
const [copied, setCopied] = useState(false);
|
58
|
+
const textRef = useRef();
|
78
59
|
const onCopy = e => {
|
79
60
|
e.stopPropagation();
|
80
61
|
e.preventDefault();
|
81
|
-
(
|
62
|
+
copy(content || textRef.current.textContent);
|
82
63
|
setCopied(true);
|
83
64
|
// 恢复 copied 状态
|
84
65
|
setTimeout(() => {
|
@@ -87,88 +68,88 @@ const DidAddress = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
87
68
|
};
|
88
69
|
let copyElement = null;
|
89
70
|
if (copyable) {
|
90
|
-
copyElement = /*#__PURE__*/(
|
71
|
+
copyElement = /*#__PURE__*/_jsx("span", {
|
91
72
|
className: "did-address-copy-wrapper",
|
92
73
|
title: copied ? '' : translations[locale].copy,
|
93
|
-
children: copied ? /*#__PURE__*/(
|
74
|
+
children: copied ? /*#__PURE__*/_jsx(Tooltip, {
|
94
75
|
title: translations[locale].copied,
|
95
76
|
placement: "bottom",
|
96
77
|
arrow: true,
|
97
78
|
open: copied,
|
98
|
-
children: /*#__PURE__*/(
|
79
|
+
children: /*#__PURE__*/_jsx(CheckIcon, {
|
99
80
|
className: "did-address-copy",
|
100
81
|
style: {
|
101
|
-
color:
|
82
|
+
color: green[500]
|
102
83
|
}
|
103
84
|
})
|
104
85
|
}) :
|
105
86
|
/*#__PURE__*/
|
106
87
|
/* title prop 直接加在 icon 上不生效 */
|
107
|
-
(
|
88
|
+
_jsx(CopyIcon, {
|
108
89
|
className: "did-address-copy",
|
109
90
|
onClick: onCopy
|
110
91
|
})
|
111
92
|
});
|
112
93
|
}
|
113
|
-
return /*#__PURE__*/(
|
94
|
+
return /*#__PURE__*/_jsxs(Root, {
|
114
95
|
as: component,
|
115
|
-
size: size
|
116
|
-
|
96
|
+
size: size,
|
97
|
+
...rest,
|
117
98
|
ref: ref,
|
118
|
-
children: [prepend, /*#__PURE__*/(
|
99
|
+
children: [prepend, /*#__PURE__*/_jsx(Box, {
|
119
100
|
sx: {
|
120
101
|
display: 'none'
|
121
102
|
},
|
122
103
|
ref: textRef,
|
123
104
|
children: children
|
124
|
-
}), /*#__PURE__*/(
|
105
|
+
}), /*#__PURE__*/_jsx(Tooltip, {
|
125
106
|
title: copyable ? '' : translations[locale].copied,
|
126
107
|
placement: "bottom",
|
127
108
|
arrow: true,
|
128
109
|
open: copied,
|
129
|
-
children: compact ? /*#__PURE__*/(
|
110
|
+
children: compact ? /*#__PURE__*/_jsx(Box, {
|
130
111
|
component: "span",
|
131
112
|
className: "did-address-text",
|
132
113
|
sx: {
|
133
114
|
cursor: copyable ? 'unset' : 'pointer'
|
134
115
|
},
|
135
|
-
onDoubleClick: copyable ?
|
136
|
-
children: /*#__PURE__*/(
|
116
|
+
onDoubleClick: copyable ? noop : onCopy,
|
117
|
+
children: /*#__PURE__*/_jsx(CompactText, {
|
137
118
|
startChars: startChars,
|
138
119
|
endChars: endChars,
|
139
120
|
showCopyButtonInTooltip: showCopyButtonInTooltip,
|
140
121
|
children: children
|
141
122
|
})
|
142
|
-
}) : /*#__PURE__*/(
|
123
|
+
}) : /*#__PURE__*/_jsx(Box, {
|
143
124
|
component: "span",
|
144
125
|
className: "did-address-text did-address-truncate",
|
145
126
|
sx: {
|
146
127
|
display: compact ? 'none' : 'inline',
|
147
128
|
cursor: copyable ? 'unset' : 'pointer'
|
148
129
|
},
|
149
|
-
onDoubleClick: copyable ?
|
130
|
+
onDoubleClick: copyable ? noop : onCopy,
|
150
131
|
children: children
|
151
132
|
})
|
152
133
|
}), copyElement, append]
|
153
|
-
})
|
134
|
+
});
|
154
135
|
});
|
155
|
-
|
136
|
+
export default DidAddress;
|
156
137
|
DidAddress.propTypes = {
|
157
|
-
component:
|
158
|
-
size:
|
159
|
-
copyable:
|
138
|
+
component: PropTypes.string,
|
139
|
+
size: PropTypes.number,
|
140
|
+
copyable: PropTypes.bool,
|
160
141
|
// compact mode 下, hover 时会在 tooltip 中显示完整地址, showCopyButtonInTooltip = true 时会在完整地址后显示一个复制按钮
|
161
|
-
showCopyButtonInTooltip:
|
162
|
-
children:
|
163
|
-
content:
|
164
|
-
inline:
|
165
|
-
prepend:
|
166
|
-
append:
|
142
|
+
showCopyButtonInTooltip: PropTypes.bool,
|
143
|
+
children: PropTypes.any,
|
144
|
+
content: PropTypes.string,
|
145
|
+
inline: PropTypes.bool,
|
146
|
+
prepend: PropTypes.any,
|
147
|
+
append: PropTypes.any,
|
167
148
|
// 紧凑模式
|
168
|
-
compact:
|
169
|
-
startChars:
|
170
|
-
endChars:
|
171
|
-
locale:
|
149
|
+
compact: PropTypes.bool,
|
150
|
+
startChars: PropTypes.number,
|
151
|
+
endChars: PropTypes.number,
|
152
|
+
locale: PropTypes.oneOf(['en', 'zh'])
|
172
153
|
};
|
173
154
|
DidAddress.defaultProps = {
|
174
155
|
component: 'span',
|
@@ -185,11 +166,57 @@ DidAddress.defaultProps = {
|
|
185
166
|
endChars: 6,
|
186
167
|
locale: 'en'
|
187
168
|
};
|
188
|
-
const Root =
|
169
|
+
const Root = styled(Box, {
|
189
170
|
shouldForwardProp: prop => prop !== 'inline'
|
190
|
-
})
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
}
|
171
|
+
})`
|
172
|
+
font-family: 'Ubuntu Mono', monospace;
|
173
|
+
&& {
|
174
|
+
display: ${({
|
175
|
+
inline
|
176
|
+
}) => inline ? 'inline-flex' : 'flex'};
|
177
|
+
align-items: center;
|
178
|
+
max-width: 100%;
|
179
|
+
overflow: hidden;
|
180
|
+
color: #ccc;
|
181
|
+
font-size: ${props => getFontSize(props.size)};
|
182
|
+
font-weight: 400;
|
183
|
+
|
184
|
+
svg {
|
185
|
+
fill: currentColor;
|
186
|
+
}
|
187
|
+
}
|
188
|
+
|
189
|
+
.did-address-text {
|
190
|
+
color: #666;
|
191
|
+
}
|
192
|
+
/* truncate string with ellipsis */
|
193
|
+
.did-address-truncate {
|
194
|
+
white-space: nowrap;
|
195
|
+
overflow: hidden;
|
196
|
+
text-overflow: ellipsis;
|
197
|
+
}
|
198
|
+
|
199
|
+
.did-address-copy-wrapper {
|
200
|
+
display: flex;
|
201
|
+
justify-content: center;
|
202
|
+
align-items: center;
|
203
|
+
width: 1em;
|
204
|
+
height: 1em;
|
205
|
+
margin-left: 8px;
|
206
|
+
}
|
207
|
+
.did-address-copy {
|
208
|
+
flex: 0 0 auto;
|
209
|
+
font-size: 1em;
|
210
|
+
color: #999;
|
211
|
+
cursor: pointer;
|
212
|
+
}
|
213
|
+
|
214
|
+
/* link */
|
215
|
+
a {
|
216
|
+
color: #666;
|
217
|
+
}
|
218
|
+
&:hover a {
|
219
|
+
color: #222;
|
220
|
+
text-decoration: underline;
|
221
|
+
}
|
222
|
+
`;
|
package/lib/Address/index.js
CHANGED
@@ -1,34 +1,22 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
var _responsiveDidAddress = _interopRequireDefault(require("./responsive-did-address"));
|
10
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
11
|
-
const _excluded = ["responsive"];
|
12
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
13
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
14
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
15
|
-
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; }
|
16
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
|
17
|
-
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
18
|
-
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; }
|
19
|
-
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; }
|
20
|
-
function DidAddressWrapper(_ref) {
|
21
|
-
let {
|
22
|
-
responsive
|
23
|
-
} = _ref,
|
24
|
-
rest = _objectWithoutProperties(_ref, _excluded);
|
1
|
+
import PropTypes from 'prop-types';
|
2
|
+
import DidAddress from './did-address';
|
3
|
+
import ResponsiveDidAddress from './responsive-did-address';
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
5
|
+
export default function DidAddressWrapper({
|
6
|
+
responsive,
|
7
|
+
...rest
|
8
|
+
}) {
|
25
9
|
if (responsive) {
|
26
|
-
return /*#__PURE__*/(
|
10
|
+
return /*#__PURE__*/_jsx(ResponsiveDidAddress, {
|
11
|
+
...rest
|
12
|
+
});
|
27
13
|
}
|
28
|
-
return /*#__PURE__*/(
|
14
|
+
return /*#__PURE__*/_jsx(DidAddress, {
|
15
|
+
...rest
|
16
|
+
});
|
29
17
|
}
|
30
18
|
DidAddressWrapper.propTypes = {
|
31
|
-
responsive:
|
19
|
+
responsive: PropTypes.bool
|
32
20
|
};
|
33
21
|
DidAddressWrapper.defaultProps = {
|
34
22
|
responsive: true
|
@@ -1,17 +1,9 @@
|
|
1
|
-
|
1
|
+
import { useState, createRef, useEffect, useRef } from 'react';
|
2
|
+
import PropTypes from 'prop-types';
|
3
|
+
import { useSize } from 'ahooks';
|
4
|
+
import { styled } from '../Theme';
|
5
|
+
import DidAddress from './did-address';
|
2
6
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.default = ResponsiveDidAddress;
|
7
|
-
var _react = require("react");
|
8
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
9
|
-
var _ahooks = require("ahooks");
|
10
|
-
var _Theme = require("../Theme");
|
11
|
-
var _didAddress = _interopRequireDefault(require("./did-address"));
|
12
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
13
|
-
var _templateObject, _templateObject2;
|
14
|
-
const _excluded = ["style", "className", "component"];
|
15
7
|
/**
|
16
8
|
* 根据父容器宽度自动切换 compact 模式
|
17
9
|
*
|
@@ -22,68 +14,74 @@ const _excluded = ["style", "className", "component"];
|
|
22
14
|
* - 监听容器宽度变化, 当容器宽度变化时, 对比容器宽度和 did address full-width, => 切换 compact 模式
|
23
15
|
* - TODO: 初始化时, 在确定是否应该以 compact 模式渲染前, 隐藏显示, 避免闪烁问题
|
24
16
|
*/
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
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; }
|
34
|
-
function ResponsiveDidAddress(_ref) {
|
35
|
-
let {
|
36
|
-
style,
|
37
|
-
className,
|
38
|
-
component
|
39
|
-
} = _ref,
|
40
|
-
rest = _objectWithoutProperties(_ref, _excluded);
|
41
|
-
const [compact, setCompact] = (0, _react.useState)(false);
|
17
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
18
|
+
export default function ResponsiveDidAddress({
|
19
|
+
style,
|
20
|
+
className,
|
21
|
+
component,
|
22
|
+
...rest
|
23
|
+
}) {
|
24
|
+
const [compact, setCompact] = useState(false);
|
42
25
|
// did address 完整显示时的宽度
|
43
|
-
const [addressFullWidth, setAddressFullWidth] =
|
44
|
-
const containerRef =
|
45
|
-
const size =
|
46
|
-
const containerWidth =
|
47
|
-
const ref = /*#__PURE__*/
|
26
|
+
const [addressFullWidth, setAddressFullWidth] = useState(null);
|
27
|
+
const containerRef = useRef(null);
|
28
|
+
const size = useSize(containerRef);
|
29
|
+
const containerWidth = size?.width || 0;
|
30
|
+
const ref = /*#__PURE__*/createRef();
|
48
31
|
// 存储完整显示时 address 组件的宽度
|
49
|
-
|
32
|
+
useEffect(() => {
|
50
33
|
if (!compact && addressFullWidth === null) {
|
51
34
|
setAddressFullWidth(ref.current.offsetWidth);
|
52
35
|
}
|
53
36
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
54
37
|
}, []);
|
55
|
-
|
38
|
+
useEffect(() => {
|
56
39
|
if (containerWidth && addressFullWidth) {
|
57
40
|
setCompact(containerWidth < addressFullWidth);
|
58
41
|
}
|
59
42
|
}, [containerWidth, addressFullWidth]);
|
60
|
-
return /*#__PURE__*/(
|
43
|
+
return /*#__PURE__*/_jsx(Root, {
|
61
44
|
as: component,
|
62
45
|
ref: containerRef,
|
63
46
|
style: style,
|
64
47
|
className: className,
|
65
|
-
children: /*#__PURE__*/(
|
48
|
+
children: /*#__PURE__*/_jsx(StyledDidAddress, {
|
49
|
+
...rest,
|
66
50
|
component: component,
|
67
51
|
inline: true,
|
68
52
|
compact: compact,
|
69
53
|
ref: ref
|
70
|
-
})
|
54
|
+
})
|
71
55
|
});
|
72
56
|
}
|
73
57
|
ResponsiveDidAddress.propTypes = {
|
74
|
-
style:
|
75
|
-
className:
|
76
|
-
component:
|
58
|
+
style: PropTypes.object,
|
59
|
+
className: PropTypes.string,
|
60
|
+
component: PropTypes.string
|
77
61
|
};
|
78
62
|
ResponsiveDidAddress.defaultProps = {
|
79
63
|
style: {},
|
80
64
|
className: '',
|
81
65
|
component: 'span'
|
82
66
|
};
|
83
|
-
const Root =
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
})
|
89
|
-
|
67
|
+
const Root = styled('div')`
|
68
|
+
display: block;
|
69
|
+
overflow: hidden;
|
70
|
+
${({
|
71
|
+
inline
|
72
|
+
}) => inline && `
|
73
|
+
display: inline-block;
|
74
|
+
width: 100%;
|
75
|
+
`}
|
76
|
+
`;
|
77
|
+
const StyledDidAddress = styled(DidAddress)`
|
78
|
+
&& {
|
79
|
+
max-width: none;
|
80
|
+
}
|
81
|
+
.did-address-text {
|
82
|
+
/* 禁止文本 Ellipsis/截断, 以便测量真实的宽度 */
|
83
|
+
white-space: nowrap;
|
84
|
+
overflow: visible;
|
85
|
+
text-overflow: unset;
|
86
|
+
}
|
87
|
+
`;
|
package/lib/Alert/index.js
CHANGED
@@ -1,51 +1,35 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
}
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
var _Util = require("../Util");
|
12
|
-
var _Colors = _interopRequireDefault(require("../Colors"));
|
13
|
-
var _Theme = require("../Theme");
|
14
|
-
var _deprecate = require("../Util/deprecate");
|
15
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
16
|
-
var _templateObject;
|
17
|
-
const _excluded = ["type", "children", "style", "className", "variant"];
|
18
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
19
|
-
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
20
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
21
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
22
|
-
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; }
|
23
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
|
24
|
-
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
25
|
-
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; }
|
26
|
-
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; }
|
1
|
+
import PropTypes from 'prop-types';
|
2
|
+
import Typography from '@mui/material/Typography';
|
3
|
+
import { blueGrey } from '@mui/material/colors';
|
4
|
+
import Icon from '../Icon';
|
5
|
+
import { mergeProps } from '../Util';
|
6
|
+
import colors from '../Colors';
|
7
|
+
import { styled } from '../Theme';
|
8
|
+
import { withDeprecated } from '../Util/deprecate';
|
9
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
10
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
27
11
|
const types = {
|
28
12
|
error: {
|
29
13
|
icon: 'exclamation-circle',
|
30
|
-
color:
|
14
|
+
color: colors.error.main,
|
31
15
|
borderColor: '#e35b54',
|
32
16
|
backgroundColor: 'rgba(227, 91, 84, 0.2)'
|
33
17
|
},
|
34
18
|
warning: {
|
35
19
|
icon: 'exclamation-triangle',
|
36
|
-
color:
|
20
|
+
color: colors.warning.main,
|
37
21
|
borderColor: '#f7d040',
|
38
22
|
backgroundColor: 'rgba(247, 208, 64, 0.2)'
|
39
23
|
},
|
40
24
|
success: {
|
41
25
|
icon: 'check-circle',
|
42
|
-
color:
|
26
|
+
color: colors.success.main,
|
43
27
|
borderColor: '#89ddd9',
|
44
28
|
backgroundColor: 'rgba(137, 221, 217, 0.2)'
|
45
29
|
},
|
46
30
|
tip: {
|
47
31
|
icon: 'info-circle',
|
48
|
-
color:
|
32
|
+
color: colors.grey[500],
|
49
33
|
borderColor: '#222222',
|
50
34
|
backgroundColor: '#EEEEEE'
|
51
35
|
}
|
@@ -69,15 +53,15 @@ const types = {
|
|
69
53
|
*/
|
70
54
|
function Alert(props) {
|
71
55
|
/** @type {AlertProps} */
|
72
|
-
const newProps =
|
56
|
+
const newProps = mergeProps(props, Alert, ['style']);
|
73
57
|
const {
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
58
|
+
type,
|
59
|
+
children,
|
60
|
+
style,
|
61
|
+
className,
|
62
|
+
variant,
|
63
|
+
...rest
|
64
|
+
} = newProps;
|
81
65
|
const {
|
82
66
|
icon,
|
83
67
|
color,
|
@@ -87,33 +71,34 @@ function Alert(props) {
|
|
87
71
|
|
88
72
|
/** @type {import('react').CSSProperties} */
|
89
73
|
const styles = Object.assign({
|
90
|
-
color:
|
74
|
+
color: blueGrey[500],
|
91
75
|
backgroundColor: variant === 'border' ? backgroundColor : 'transparent',
|
92
|
-
borderLeft: variant === 'border' ?
|
76
|
+
borderLeft: variant === 'border' ? `5px solid ${borderColor}` : 'none'
|
93
77
|
}, style);
|
94
|
-
return /*#__PURE__*/(
|
95
|
-
|
78
|
+
return /*#__PURE__*/_jsxs(Container, {
|
79
|
+
...rest,
|
80
|
+
className: `alert alert--${type} alert--${variant} ${className}`.trim(),
|
96
81
|
style: styles,
|
97
|
-
children: [variant === 'icon' && /*#__PURE__*/(
|
82
|
+
children: [variant === 'icon' && /*#__PURE__*/_jsx(Icon, {
|
98
83
|
className: "alert-icon",
|
99
84
|
name: icon,
|
100
85
|
size: 24,
|
101
86
|
style: {
|
102
87
|
color
|
103
88
|
}
|
104
|
-
}), /*#__PURE__*/(
|
89
|
+
}), /*#__PURE__*/_jsx(Typography, {
|
105
90
|
component: "div",
|
106
91
|
className: "alert-content",
|
107
92
|
children: children
|
108
93
|
})]
|
109
|
-
})
|
94
|
+
});
|
110
95
|
}
|
111
96
|
Alert.propTypes = {
|
112
|
-
type:
|
113
|
-
children:
|
114
|
-
className:
|
115
|
-
style:
|
116
|
-
variant:
|
97
|
+
type: PropTypes.oneOf(Object.keys(types)),
|
98
|
+
children: PropTypes.any.isRequired,
|
99
|
+
className: PropTypes.string,
|
100
|
+
style: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
|
101
|
+
variant: PropTypes.oneOf(['border', 'icon'])
|
117
102
|
};
|
118
103
|
Alert.defaultProps = {
|
119
104
|
type: 'tip',
|
@@ -121,8 +106,29 @@ Alert.defaultProps = {
|
|
121
106
|
style: '{}',
|
122
107
|
variant: 'border'
|
123
108
|
};
|
124
|
-
|
109
|
+
export default withDeprecated(Alert, {
|
125
110
|
name: 'Alert',
|
126
111
|
alternative: '@mui/material/Alert'
|
127
112
|
});
|
128
|
-
const Container =
|
113
|
+
const Container = styled('div')`
|
114
|
+
display: flex;
|
115
|
+
align-items: center;
|
116
|
+
font-size: 16px;
|
117
|
+
margin: 0;
|
118
|
+
padding: 16px;
|
119
|
+
margin: 16px 0;
|
120
|
+
|
121
|
+
strong {
|
122
|
+
margin: 0 5px;
|
123
|
+
}
|
124
|
+
|
125
|
+
.alert-icon {
|
126
|
+
margin-right: 16px;
|
127
|
+
}
|
128
|
+
|
129
|
+
.alert-content {
|
130
|
+
flex: 1;
|
131
|
+
display: flex;
|
132
|
+
flex-direction: column;
|
133
|
+
}
|
134
|
+
`;
|