@arcblock/ux 3.4.15 → 3.5.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/package.json.js +1 -1
- package/package.json +10 -7
- package/src/ActionButton/ActionButton.stories.jsx +0 -61
- package/src/ActionButton/index.jsx +0 -106
- package/src/ActivityIndicator/ActivityIndicator.stories.jsx +0 -9
- package/src/ActivityIndicator/index.jsx +0 -140
- package/src/Address/Address.stories.jsx +0 -38
- package/src/Address/compact-text.jsx +0 -76
- package/src/Address/did-address.tsx +0 -223
- package/src/Address/index.tsx +0 -21
- package/src/Address/responsive-did-address.tsx +0 -154
- package/src/Alert/Alert.stories.jsx +0 -100
- package/src/Alert/index.jsx +0 -130
- package/src/AnimationWaiter/AnimationWaiter.stories.jsx +0 -35
- package/src/AnimationWaiter/dark-animation.json +0 -1
- package/src/AnimationWaiter/default-animation.json +0 -1
- package/src/AnimationWaiter/index.jsx +0 -296
- package/src/Async/index.tsx +0 -44
- package/src/Avatar/Avatar.stories.jsx +0 -11
- package/src/Avatar/did-motif.jsx +0 -38
- package/src/Avatar/etherscan-blockies.js +0 -81
- package/src/Avatar/index.jsx +0 -195
- package/src/Badge/Badge.stories.jsx +0 -41
- package/src/Badge/index.jsx +0 -101
- package/src/Blocklet/Blocklet.stories.jsx +0 -21
- package/src/Blocklet/blocklet.jsx +0 -276
- package/src/Blocklet/index.js +0 -5
- package/src/Blocklet/utils.jsx +0 -58
- package/src/BlockletContext/index.tsx +0 -72
- package/src/BlockletNFT/BlockletNFT.stories.jsx +0 -21
- package/src/BlockletNFT/index.jsx +0 -378
- package/src/BlockletV2/Blocklet.stories.jsx +0 -34
- package/src/BlockletV2/blocklet.tsx +0 -247
- package/src/BlockletV2/components/icon-text.tsx +0 -47
- package/src/BlockletV2/components/tooltip-icon.tsx +0 -52
- package/src/BlockletV2/index.ts +0 -6
- package/src/BlockletV2/utils.js +0 -75
- package/src/Button/Button.stories.jsx +0 -24
- package/src/Button/index.js +0 -9
- package/src/Button/wrap.jsx +0 -126
- package/src/ButtonGroup/index.js +0 -16
- package/src/CardSelector/index.tsx +0 -136
- package/src/Center/Center.stories.jsx +0 -20
- package/src/Center/index.tsx +0 -33
- package/src/ClickToCopy/ClickToCopy.stories.jsx +0 -24
- package/src/ClickToCopy/copy-button.tsx +0 -43
- package/src/ClickToCopy/hook.ts +0 -42
- package/src/ClickToCopy/index.tsx +0 -96
- package/src/CloseButton/index.tsx +0 -37
- package/src/CodeBlock/CodeBlock.stories.jsx +0 -22
- package/src/CodeBlock/LightBox.tsx +0 -87
- package/src/CodeBlock/index.tsx +0 -217
- package/src/Colors/Colors.stories.jsx +0 -211
- package/src/Colors/index.ts +0 -4
- package/src/Colors/themes/default.ts +0 -8
- package/src/Colors/themes/did-connect.ts +0 -64
- package/src/Colors/themes/temp.ts +0 -52
- package/src/Config/Config.stories.jsx +0 -16
- package/src/Config/config-provider.tsx +0 -62
- package/src/Config/index.ts +0 -2
- package/src/Config/theme-mode-toggle.tsx +0 -38
- package/src/ContactForm/ContactForm.stories.jsx +0 -32
- package/src/ContactForm/index.tsx +0 -264
- package/src/CookieConsent/CookieConsent.stories.jsx +0 -33
- package/src/CookieConsent/index.tsx +0 -104
- package/src/CountDown/CountDown.stories.jsx +0 -15
- package/src/CountDown/index.tsx +0 -170
- package/src/DID/DID.stories.jsx +0 -37
- package/src/DID/index.tsx +0 -393
- package/src/DIDConnect/app-icon.tsx +0 -37
- package/src/DIDConnect/app-info-item.tsx +0 -93
- package/src/DIDConnect/auth-apps/auth-apps-info.tsx +0 -77
- package/src/DIDConnect/auth-apps/index.tsx +0 -278
- package/src/DIDConnect/auth-apps/switch-role.tsx +0 -47
- package/src/DIDConnect/did-connect-container.tsx +0 -326
- package/src/DIDConnect/did-connect-footer.tsx +0 -76
- package/src/DIDConnect/did-connect-logo.tsx +0 -8
- package/src/DIDConnect/icons/did-wallet-logo.tsx +0 -18
- package/src/DIDConnect/icons/github-logo.tsx +0 -17
- package/src/DIDConnect/index.ts +0 -11
- package/src/DIDConnect/landing-page.tsx +0 -218
- package/src/DIDConnect/powered-by.tsx +0 -48
- package/src/DIDConnect/provider-icon.tsx +0 -62
- package/src/DIDConnect/request-storage-access-api-dialog.tsx +0 -304
- package/src/DIDConnect/with-container.tsx +0 -323
- package/src/DIDConnect/with-ux-theme.tsx +0 -22
- package/src/DIDLogo/Logo.stories.jsx +0 -11
- package/src/DIDLogo/index.tsx +0 -168
- package/src/Datatable/CustomToolbar.jsx +0 -415
- package/src/Datatable/Datatable.stories.jsx +0 -92
- package/src/Datatable/DatatableContext.jsx +0 -35
- package/src/Datatable/TableSearch.jsx +0 -166
- package/src/Datatable/index.jsx +0 -652
- package/src/Datatable/utils.js +0 -161
- package/src/Dialog/Dialog.stories.jsx +0 -21
- package/src/Dialog/confirm.jsx +0 -143
- package/src/Dialog/dialog.jsx +0 -199
- package/src/Dialog/index.js +0 -4
- package/src/Dialog/types.d.ts +0 -20
- package/src/Dialog/use-confirm.jsx +0 -188
- package/src/DriftBot/index.tsx +0 -81
- package/src/Earth/Earth.stories.jsx +0 -39
- package/src/Earth/countries.json +0 -8057
- package/src/Earth/index.tsx +0 -515
- package/src/Earth/util.ts +0 -72
- package/src/Empty/Empty.stories.jsx +0 -23
- package/src/Empty/index.jsx +0 -48
- package/src/ErrorBoundary/ErrorBoundary.stories.jsx +0 -13
- package/src/ErrorBoundary/fallback.tsx +0 -85
- package/src/ErrorBoundary/index.ts +0 -1
- package/src/Footer/Footer.stories.jsx +0 -13
- package/src/Footer/index.tsx +0 -130
- package/src/Header/Header.stories.jsx +0 -30
- package/src/Header/addon-button.tsx +0 -41
- package/src/Header/auto-hidden.tsx +0 -31
- package/src/Header/header-addons.tsx +0 -37
- package/src/Header/header.tsx +0 -214
- package/src/Header/index.ts +0 -3
- package/src/Header/responsive-header.tsx +0 -145
- package/src/Icon/Icon.stories.jsx +0 -45
- package/src/Icon/image.tsx +0 -53
- package/src/Icon/index.tsx +0 -63
- package/src/Img/Img.stories.jsx +0 -17
- package/src/Img/index.jsx +0 -258
- package/src/InfoRow/InfoRow.stories.jsx +0 -14
- package/src/InfoRow/index.tsx +0 -91
- package/src/Layout/Layout.stories.jsx +0 -24
- package/src/Layout/dashboard/external-link.tsx +0 -59
- package/src/Layout/dashboard/full-page.tsx +0 -58
- package/src/Layout/dashboard/index.tsx +0 -260
- package/src/Layout/dashboard/sidebar.tsx +0 -198
- package/src/Layout/dashboard-legacy/header.tsx +0 -156
- package/src/Layout/dashboard-legacy/index.tsx +0 -127
- package/src/Layout/dashboard-legacy/sidebar.tsx +0 -129
- package/src/Layout/index.tsx +0 -310
- package/src/LoadingMask/index.tsx +0 -108
- package/src/Locale/LocaleSelector.stories.jsx +0 -44
- package/src/Locale/browser-lang.ts +0 -65
- package/src/Locale/context.tsx +0 -162
- package/src/Locale/languages.ts +0 -58
- package/src/Locale/selector.tsx +0 -174
- package/src/Locale/util.ts +0 -38
- package/src/Logo/Logo.stories.jsx +0 -23
- package/src/Logo/images/logo-dark-text.svg +0 -3
- package/src/Logo/images/logo-dark-top.svg +0 -6
- package/src/Logo/images/logo-light-text.svg +0 -3
- package/src/Logo/images/logo-light-top.svg +0 -6
- package/src/Logo/index.tsx +0 -58
- package/src/Metric/Metric.stories.jsx +0 -29
- package/src/Metric/index.tsx +0 -130
- package/src/MuiWrap/index.tsx +0 -10
- package/src/NFTDisplay/NFTBroken.svg +0 -34
- package/src/NFTDisplay/NFTDisplay.stories.jsx +0 -30
- package/src/NFTDisplay/README.md +0 -59
- package/src/NFTDisplay/aspect-ratio-container.tsx +0 -36
- package/src/NFTDisplay/broken.tsx +0 -51
- package/src/NFTDisplay/displayApi.ts +0 -43
- package/src/NFTDisplay/index.tsx +0 -393
- package/src/NFTDisplay/loading.tsx +0 -16
- package/src/NFTDisplay/preview.tsx +0 -84
- package/src/NFTDisplay/render-svg.tsx +0 -21
- package/src/NFTDisplay/svg-embedder/img.tsx +0 -27
- package/src/NFTDisplay/svg-embedder/inline-svg.tsx +0 -36
- package/src/NavMenu/NavMenu.stories.jsx +0 -17
- package/src/NavMenu/images/OCAP.svg +0 -1
- package/src/NavMenu/images/abt-network.svg +0 -1
- package/src/NavMenu/images/ai-kit.svg +0 -1
- package/src/NavMenu/images/aigne-image-smith.svg +0 -1
- package/src/NavMenu/images/aigne.svg +0 -1
- package/src/NavMenu/images/aistro.png +0 -0
- package/src/NavMenu/images/arcsphere.svg +0 -1
- package/src/NavMenu/images/blocklet-framework.svg +0 -1
- package/src/NavMenu/images/blocklet-launcher.svg +0 -1
- package/src/NavMenu/images/blocklet-server.svg +0 -1
- package/src/NavMenu/images/blocklet-store.svg +0 -1
- package/src/NavMenu/images/creator-studio.svg +0 -1
- package/src/NavMenu/images/did-wallet.svg +0 -1
- package/src/NavMenu/images/did.svg +0 -1
- package/src/NavMenu/images/nft-studio.svg +0 -1
- package/src/NavMenu/images/payment-kit.png +0 -0
- package/src/NavMenu/images/vc.svg +0 -1
- package/src/NavMenu/images/web3-kit.svg +0 -1
- package/src/NavMenu/index.ts +0 -3
- package/src/NavMenu/nav-menu-context.tsx +0 -30
- package/src/NavMenu/nav-menu.tsx +0 -441
- package/src/NavMenu/products.tsx +0 -830
- package/src/NavMenu/style.ts +0 -258
- package/src/NavMenu/sub-container.tsx +0 -125
- package/src/NavMenu/sub-item-group.tsx +0 -42
- package/src/OrgTransfer/index.tsx +0 -53
- package/src/OrgTransfer/locales.ts +0 -25
- package/src/OrgTransfer/selector.tsx +0 -252
- package/src/OrgTransfer/type.ts +0 -31
- package/src/PageScroller/index.tsx +0 -316
- package/src/PageScroller/story/FifthComponent.jsx +0 -7
- package/src/PageScroller/story/FirstComponent.jsx +0 -7
- package/src/PageScroller/story/FourthComponent.jsx +0 -7
- package/src/PageScroller/story/FullPage.jsx +0 -55
- package/src/PageScroller/story/PageContain.jsx +0 -59
- package/src/PageScroller/story/PageScroller.stories.jsx +0 -18
- package/src/PageScroller/story/SecondComponent.jsx +0 -7
- package/src/PageScroller/story/ThirdComponent.jsx +0 -7
- package/src/PageScroller/story/index.css +0 -115
- package/src/PageScroller/usePrevValue.ts +0 -11
- package/src/Passport/index.ts +0 -3
- package/src/Passport/passport.tsx +0 -118
- package/src/PhoneInput/PhoneInput.stories.jsx +0 -12
- package/src/PhoneInput/country-select.tsx +0 -148
- package/src/PhoneInput/index.tsx +0 -269
- package/src/PoweredByArcBlock/index.tsx +0 -27
- package/src/PricingTable/PricingPlan.tsx +0 -120
- package/src/PricingTable/PricingTable.stories.jsx +0 -38
- package/src/PricingTable/index.tsx +0 -59
- package/src/QRCode/QRCode.stories.jsx +0 -13
- package/src/QRCode/index.tsx +0 -66
- package/src/RelativeTime/RelativeTime.stories.jsx +0 -20
- package/src/RelativeTime/index.tsx +0 -334
- package/src/Result/Result.stories.jsx +0 -61
- package/src/Result/common.tsx +0 -119
- package/src/Result/index.tsx +0 -30
- package/src/Result/result.tsx +0 -65
- package/src/Result/translations.ts +0 -57
- package/src/Screenshot/BaseScreenshot/index.tsx +0 -73
- package/src/Screenshot/BaseScreenshot/shells/Macbook.tsx +0 -38
- package/src/Screenshot/BaseScreenshot/shells/Phone.tsx +0 -35
- package/src/Screenshot/Screenshot.stories.jsx +0 -44
- package/src/Screenshot/devices.css +0 -1366
- package/src/Screenshot/index.tsx +0 -300
- package/src/SessionBlocklet/index.tsx +0 -178
- package/src/SessionManager/SessionManager.stories.jsx +0 -9
- package/src/SessionManager/index.tsx +0 -3
- package/src/SessionPermission/index.tsx +0 -26
- package/src/SessionUser/components/did-space.tsx +0 -68
- package/src/SessionUser/components/logged-in.tsx +0 -338
- package/src/SessionUser/components/quick-login-item.tsx +0 -132
- package/src/SessionUser/components/session-user-item.tsx +0 -93
- package/src/SessionUser/components/session-user-switch.tsx +0 -240
- package/src/SessionUser/components/un-login.tsx +0 -257
- package/src/SessionUser/components/user-info.tsx +0 -201
- package/src/SessionUser/index.tsx +0 -68
- package/src/SessionUser/libs/translation.ts +0 -30
- package/src/SessionUser/libs/utils.ts +0 -39
- package/src/SharedBridge/index.tsx +0 -126
- package/src/SocialShare/index.tsx +0 -194
- package/src/Sparkline/Sparkline.stories.jsx +0 -13
- package/src/Sparkline/index.tsx +0 -231
- package/src/Spinner/Spinner.stories.jsx +0 -98
- package/src/Spinner/index.tsx +0 -20
- package/src/SplitButton/SplitButton.stories.jsx +0 -32
- package/src/SplitButton/index.tsx +0 -116
- package/src/SplitButton/useClickAway.tsx +0 -24
- package/src/Success/index.tsx +0 -175
- package/src/Switch/Switch.stories.jsx +0 -16
- package/src/Switch/index.jsx +0 -79
- package/src/Tabs/Tabs.stories.jsx +0 -18
- package/src/Tabs/index.tsx +0 -255
- package/src/Tag/Tag.stories.jsx +0 -15
- package/src/Tag/index.jsx +0 -106
- package/src/TextCollapse/TextCollapse.stories.jsx +0 -73
- package/src/TextCollapse/index.tsx +0 -85
- package/src/Theme/Theme.stories.jsx +0 -11
- package/src/Theme/index.ts +0 -21
- package/src/Theme/theme-provider.tsx +0 -374
- package/src/Theme/theme.ts +0 -229
- package/src/Toast/Toast.stories.jsx +0 -28
- package/src/Toast/index.tsx +0 -80
- package/src/Typography/index.tsx +0 -124
- package/src/UserCard/Cards/avatar-only.tsx +0 -27
- package/src/UserCard/Cards/basic-info.tsx +0 -43
- package/src/UserCard/Cards/index.tsx +0 -16
- package/src/UserCard/Cards/social-actions.tsx +0 -196
- package/src/UserCard/Container/card.tsx +0 -63
- package/src/UserCard/Container/dialog.tsx +0 -37
- package/src/UserCard/Content/basic.tsx +0 -330
- package/src/UserCard/Content/clock.tsx +0 -82
- package/src/UserCard/Content/minimal.tsx +0 -113
- package/src/UserCard/Content/shorten-label.tsx +0 -32
- package/src/UserCard/Content/tooltip-avatar.tsx +0 -80
- package/src/UserCard/UserCard.stories.jsx +0 -19
- package/src/UserCard/components.tsx +0 -81
- package/src/UserCard/index.tsx +0 -132
- package/src/UserCard/types.ts +0 -165
- package/src/UserCard/use-follow.tsx +0 -111
- package/src/UserCard/utils.ts +0 -155
- package/src/Util/WebWalletOpener.stories.jsx +0 -5
- package/src/Util/client.ts +0 -4
- package/src/Util/constant.ts +0 -70
- package/src/Util/deprecate.tsx +0 -29
- package/src/Util/federated.ts +0 -125
- package/src/Util/iframe.ts +0 -19
- package/src/Util/index.ts +0 -760
- package/src/Util/logger.ts +0 -44
- package/src/Util/passport.ts +0 -127
- package/src/Util/security.ts +0 -72
- package/src/Util/style.ts +0 -17
- package/src/Util/wallet.ts +0 -35
- package/src/VerificationCode/index.tsx +0 -83
- package/src/Video/Video.stories.jsx +0 -6
- package/src/Video/index.tsx +0 -70
- package/src/Wallet/Action.stories.jsx +0 -8
- package/src/Wallet/Action.tsx +0 -118
- package/src/Wallet/Download.stories.jsx +0 -9
- package/src/Wallet/Download.tsx +0 -157
- package/src/Wallet/Open.tsx +0 -47
- package/src/Wallet/OpenInWallet.stories.jsx +0 -5
- package/src/Wallet/images/abtwallet.png +0 -0
- package/src/Wallet/images/android_download.svg +0 -22
- package/src/Wallet/images/app-store.svg +0 -30
- package/src/Wallet/images/google-play.svg +0 -69
- package/src/WalletOSIcon/index.tsx +0 -47
- package/src/WebWalletSWKeeper/index.tsx +0 -117
- package/src/WechatPrompt/images/android.png +0 -0
- package/src/WechatPrompt/images/ios.png +0 -0
- package/src/WechatPrompt/index.tsx +0 -75
- package/src/global.d.ts +0 -28
- package/src/hooks/use-blocklet-logo.tsx +0 -32
- package/src/hooks/use-clock.tsx +0 -62
- package/src/hooks/use-location-state.tsx +0 -117
- package/src/hooks/use-mobile.tsx +0 -6
- package/src/index.ts +0 -79
- package/src/type.d.ts +0 -44
- package/src/withTheme/index.tsx +0 -72
- package/src/withTracker/README.md +0 -37
- package/src/withTracker/action/bind-wallet.tsx +0 -17
- package/src/withTracker/action/login.tsx +0 -18
- package/src/withTracker/action/pay.tsx +0 -14
- package/src/withTracker/action/switch-passport.tsx +0 -20
- package/src/withTracker/constant/index.tsx +0 -3
- package/src/withTracker/env.tsx +0 -1
- package/src/withTracker/error_boundary.jsx +0 -34
- package/src/withTracker/index.tsx +0 -50
- package/src/withTracker/libs/utm.ts +0 -46
- package/vite.config.mjs +0 -37
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
import { Box } from '@mui/material';
|
|
2
|
-
|
|
3
|
-
export interface LoadingMaskProps {
|
|
4
|
-
size?: number;
|
|
5
|
-
padding?: number;
|
|
6
|
-
borderWidth?: number;
|
|
7
|
-
borderRadius?: number;
|
|
8
|
-
duration?: number;
|
|
9
|
-
children: React.ReactNode;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
export default function LoadingMask({
|
|
13
|
-
size = 64,
|
|
14
|
-
padding = undefined,
|
|
15
|
-
borderWidth = undefined,
|
|
16
|
-
borderRadius = undefined,
|
|
17
|
-
duration = undefined,
|
|
18
|
-
children,
|
|
19
|
-
}: LoadingMaskProps) {
|
|
20
|
-
const finialSize = size;
|
|
21
|
-
const finialRadius = borderRadius ?? finialSize / 8;
|
|
22
|
-
const finialBorderWidth = borderWidth ?? finialSize / 32;
|
|
23
|
-
const finialPadding = padding ?? finialSize * 0.35 - finialBorderWidth;
|
|
24
|
-
const finialDuration = duration ?? 2.5;
|
|
25
|
-
return (
|
|
26
|
-
<Box
|
|
27
|
-
sx={{
|
|
28
|
-
display: 'inline-flex',
|
|
29
|
-
justifyContent: 'center',
|
|
30
|
-
alignItems: 'center',
|
|
31
|
-
width: finialSize,
|
|
32
|
-
height: finialSize,
|
|
33
|
-
position: 'relative',
|
|
34
|
-
}}>
|
|
35
|
-
<Box
|
|
36
|
-
sx={{
|
|
37
|
-
pointerEvents: 'none',
|
|
38
|
-
position: 'absolute',
|
|
39
|
-
top: 0,
|
|
40
|
-
left: 0,
|
|
41
|
-
right: 0,
|
|
42
|
-
bottom: 0,
|
|
43
|
-
display: 'flex',
|
|
44
|
-
justifyContent: 'center',
|
|
45
|
-
alignItems: 'center',
|
|
46
|
-
width: finialSize,
|
|
47
|
-
height: finialSize,
|
|
48
|
-
overflow: 'hidden',
|
|
49
|
-
borderRadius: `${finialRadius}px`,
|
|
50
|
-
backgroundColor: 'grey.200',
|
|
51
|
-
'&::before,&::after': {
|
|
52
|
-
content: '""',
|
|
53
|
-
position: 'absolute',
|
|
54
|
-
pointerEvents: 'none',
|
|
55
|
-
},
|
|
56
|
-
'&::after': {
|
|
57
|
-
left: finialBorderWidth,
|
|
58
|
-
right: finialBorderWidth,
|
|
59
|
-
top: finialBorderWidth,
|
|
60
|
-
bottom: finialBorderWidth,
|
|
61
|
-
backgroundColor: 'background.default',
|
|
62
|
-
borderRadius: `${finialRadius - finialBorderWidth}px`,
|
|
63
|
-
},
|
|
64
|
-
'&::before': {
|
|
65
|
-
width: finialSize * 5,
|
|
66
|
-
height: finialSize * 5,
|
|
67
|
-
top: '50%',
|
|
68
|
-
left: '50%',
|
|
69
|
-
transform: 'translate(-50%, -50%)',
|
|
70
|
-
background: ({ palette }) =>
|
|
71
|
-
`conic-gradient(from 45deg, transparent 0%, transparent 50%, ${palette.secondary.main} 90%, ${palette.secondary.main} 100%)`,
|
|
72
|
-
animation: `rotate ${finialDuration}s linear infinite`,
|
|
73
|
-
'@keyframes rotate': {
|
|
74
|
-
'0%': {
|
|
75
|
-
transform: 'translate(-50%, -50%) rotate(0deg)',
|
|
76
|
-
},
|
|
77
|
-
'100%': {
|
|
78
|
-
transform: 'translate(-50%, -50%) rotate(360deg)',
|
|
79
|
-
},
|
|
80
|
-
},
|
|
81
|
-
},
|
|
82
|
-
}}
|
|
83
|
-
/>
|
|
84
|
-
<Box
|
|
85
|
-
sx={{
|
|
86
|
-
position: 'relative',
|
|
87
|
-
display: 'flex',
|
|
88
|
-
justifyContent: 'center',
|
|
89
|
-
alignItems: 'center',
|
|
90
|
-
width: finialSize - finialPadding - finialBorderWidth,
|
|
91
|
-
height: finialSize - finialPadding - finialBorderWidth,
|
|
92
|
-
|
|
93
|
-
animation: 'wait-bounce 1.6s infinite',
|
|
94
|
-
transformOrigin: 'center bottom',
|
|
95
|
-
'@keyframes wait-bounce': {
|
|
96
|
-
'0%': { transform: 'scale(1) translateY(0)' },
|
|
97
|
-
'20%': { transform: 'scale(1.03) translateY(-4px)' },
|
|
98
|
-
'40%': { transform: 'scale(0.98) translateY(2px)' },
|
|
99
|
-
'60%': { transform: 'scale(1.01) translateY(-2px)' },
|
|
100
|
-
'80%': { transform: 'scale(0.99) translateY(1px)' },
|
|
101
|
-
'100%': { transform: 'scale(1) translateY(0)' },
|
|
102
|
-
},
|
|
103
|
-
}}>
|
|
104
|
-
{children}
|
|
105
|
-
</Box>
|
|
106
|
-
</Box>
|
|
107
|
-
);
|
|
108
|
-
}
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import { LocaleProvider } from './context';
|
|
2
|
-
|
|
3
|
-
import Basic from './demo/basic';
|
|
4
|
-
import WithText from './demo/with-text';
|
|
5
|
-
import DarkMode from './demo/dark-mode';
|
|
6
|
-
import PopperProps from './demo/popper-props';
|
|
7
|
-
import PopperTypeProps from './demo/popper-type-props';
|
|
8
|
-
import IconProps from './demo/icon-props';
|
|
9
|
-
import Languages from './demo/languages';
|
|
10
|
-
|
|
11
|
-
export default {
|
|
12
|
-
title: 'Basic/LocaleSelector',
|
|
13
|
-
|
|
14
|
-
parameters: {
|
|
15
|
-
docs: {
|
|
16
|
-
description: {
|
|
17
|
-
component:
|
|
18
|
-
'If you have multiple locales and want to give your users the option of selecting a language, you can use the LocaleSelector component.',
|
|
19
|
-
},
|
|
20
|
-
inlineStories: false,
|
|
21
|
-
iframeHeight: 160,
|
|
22
|
-
},
|
|
23
|
-
},
|
|
24
|
-
decorators: [
|
|
25
|
-
(StoryFn) => (
|
|
26
|
-
<LocaleProvider translations={{}}>
|
|
27
|
-
<StoryFn />
|
|
28
|
-
</LocaleProvider>
|
|
29
|
-
),
|
|
30
|
-
],
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
// demo 中使用了 react element, 设置 `inlineStories: false` 时导致 storybook 崩溃
|
|
34
|
-
IconProps.parameters = {
|
|
35
|
-
docs: {
|
|
36
|
-
inlineStories: true,
|
|
37
|
-
},
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
Languages.argTypes = {
|
|
41
|
-
fallbackLocale: { control: 'select', options: [null, 'en'] },
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
export { Basic, WithText, DarkMode, PopperProps, PopperTypeProps, IconProps, Languages };
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
/* eslint-disable no-param-reassign */
|
|
2
|
-
function startsWith(string: string, target: string, position: number = 0) {
|
|
3
|
-
const { length } = string;
|
|
4
|
-
if (position < 0) {
|
|
5
|
-
position = 0;
|
|
6
|
-
} else if (position > length) {
|
|
7
|
-
position = length;
|
|
8
|
-
}
|
|
9
|
-
target = `${target}`;
|
|
10
|
-
// eslint-disable-next-line eqeqeq
|
|
11
|
-
return string.slice(position, position + target.length) == target;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
function getBrowserLang() {
|
|
15
|
-
if (typeof window === 'undefined') {
|
|
16
|
-
return null;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
const lang: string =
|
|
20
|
-
(window.navigator.languages && window.navigator.languages[0]) ||
|
|
21
|
-
window.navigator.language ||
|
|
22
|
-
// @ts-expect-error
|
|
23
|
-
window.navigator.browserLanguage ||
|
|
24
|
-
// @ts-expect-error
|
|
25
|
-
window.navigator.userLanguage ||
|
|
26
|
-
// @ts-expect-error
|
|
27
|
-
window.navigator.systemLanguage ||
|
|
28
|
-
null;
|
|
29
|
-
|
|
30
|
-
return lang;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
function normalizeCode(code?: string | null) {
|
|
34
|
-
return (code || '').toLowerCase().replace(/-/, '_');
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
function getPreferredLanguage(options?: { languages?: string[]; fallback: string }) {
|
|
38
|
-
if (!options) {
|
|
39
|
-
return getBrowserLang();
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
const { languages, fallback } = options;
|
|
43
|
-
if (!options.languages) {
|
|
44
|
-
return fallback;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
// some browsers report language as en-US instead of en_US
|
|
48
|
-
const browserLanguage = normalizeCode(getBrowserLang());
|
|
49
|
-
|
|
50
|
-
if (!browserLanguage) {
|
|
51
|
-
return fallback;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
const match = languages!.filter((lang) => normalizeCode(lang) === browserLanguage);
|
|
55
|
-
|
|
56
|
-
if (match.length > 0) {
|
|
57
|
-
return match[0] || fallback;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
// en == en_US
|
|
61
|
-
const matchCodeOnly = languages!.filter((lang) => startsWith(browserLanguage, lang));
|
|
62
|
-
return matchCodeOnly[0] || fallback;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
export default getPreferredLanguage;
|
package/src/Locale/context.tsx
DELETED
|
@@ -1,162 +0,0 @@
|
|
|
1
|
-
/* eslint-disable no-prototype-builtins */
|
|
2
|
-
import { createContext, useState, useEffect, use, useRef, useCallback, ReactNode } from 'react';
|
|
3
|
-
import get from 'lodash/get';
|
|
4
|
-
import Cookie from 'js-cookie';
|
|
5
|
-
|
|
6
|
-
import browserLang from './browser-lang';
|
|
7
|
-
import { translate } from './util';
|
|
8
|
-
|
|
9
|
-
import { getCookieOptions, resolveRootDomain } from '../Util';
|
|
10
|
-
import type { Locale } from '../type';
|
|
11
|
-
|
|
12
|
-
const cookieName = 'nf_lang';
|
|
13
|
-
|
|
14
|
-
// 跨应用传递多语言选择的方式是在 query string 中添加 locale 参数,LocaleSelector 要高优先级遵守这个参数
|
|
15
|
-
const getLocaleFromSearchParams = (
|
|
16
|
-
languages: { code: string }[],
|
|
17
|
-
url: string = window.location.href
|
|
18
|
-
): string | null => {
|
|
19
|
-
const locale = new URL(url).searchParams.get('locale');
|
|
20
|
-
if (languages.find((x) => x.code === locale)) {
|
|
21
|
-
return locale;
|
|
22
|
-
}
|
|
23
|
-
return null;
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
const setLocaleParam = (locale: Locale, url: string = window.location.href) => {
|
|
27
|
-
const urlObj = new URL(url);
|
|
28
|
-
const hasLocaleParam = urlObj.searchParams.has('locale');
|
|
29
|
-
if (hasLocaleParam) {
|
|
30
|
-
urlObj.searchParams.set('locale', locale);
|
|
31
|
-
window.history.replaceState({}, '', urlObj.href);
|
|
32
|
-
}
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
const getLocale = (languages: { code: string }[] = []): string => {
|
|
36
|
-
const langParams = {
|
|
37
|
-
languages: languages.map((item) => item.code),
|
|
38
|
-
// 取 languages 首个元素的 code 值, 如果不存在则取 'en'
|
|
39
|
-
fallback: languages?.[0]?.code || 'en',
|
|
40
|
-
};
|
|
41
|
-
return getLocaleFromSearchParams(languages) || Cookie.get(cookieName) || browserLang(langParams)!;
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
const setLocale = (locale: Locale) => {
|
|
45
|
-
const opts = getCookieOptions();
|
|
46
|
-
|
|
47
|
-
// @compatibility 移除历史上使用根域名的旧 cookie
|
|
48
|
-
if (!opts.domain) {
|
|
49
|
-
const rootDomain = resolveRootDomain();
|
|
50
|
-
if (rootDomain) {
|
|
51
|
-
Cookie.remove(cookieName, { path: opts.path || '/', domain: rootDomain });
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
Cookie.set(cookieName, locale, opts);
|
|
56
|
-
setLocaleParam(locale);
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
const getLanguages = (arg?: { code: string; name: string }[]): { code: string; name: string }[] => {
|
|
60
|
-
const env = get(window, 'blocklet.languages');
|
|
61
|
-
if (Array.isArray(env) && env.length) {
|
|
62
|
-
return env;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
if (Array.isArray(arg) && arg.length) {
|
|
66
|
-
return arg;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
return [
|
|
70
|
-
{ code: 'en', name: 'English' },
|
|
71
|
-
{ code: 'zh', name: '简体中文' },
|
|
72
|
-
];
|
|
73
|
-
};
|
|
74
|
-
|
|
75
|
-
export interface LocaleProviderProps {
|
|
76
|
-
children: ReactNode;
|
|
77
|
-
locale?: Locale;
|
|
78
|
-
fallbackLocale?: Locale;
|
|
79
|
-
translations: Record<string, any>;
|
|
80
|
-
onLoadingTranslation?: (locale: Locale, languages: { code: string }[]) => void;
|
|
81
|
-
languages?: { code: string; name: string }[];
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
export interface LocaleContextType {
|
|
85
|
-
locale: Locale;
|
|
86
|
-
defaultLocale: Locale;
|
|
87
|
-
changeLocale: (locale: Locale) => void;
|
|
88
|
-
t: (key: string, data?: Record<string, any>) => string;
|
|
89
|
-
languages: { code: string; name: string }[];
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
// FIXME: @wangshijun revert this before release
|
|
93
|
-
const LocaleContext = createContext<LocaleContextType>(null!);
|
|
94
|
-
const { Provider, Consumer } = LocaleContext;
|
|
95
|
-
|
|
96
|
-
function LocaleProvider({
|
|
97
|
-
children,
|
|
98
|
-
locale = undefined,
|
|
99
|
-
fallbackLocale = 'en',
|
|
100
|
-
translations,
|
|
101
|
-
onLoadingTranslation = undefined,
|
|
102
|
-
languages = [],
|
|
103
|
-
...rest
|
|
104
|
-
}: LocaleProviderProps) {
|
|
105
|
-
const langs = getLanguages(languages);
|
|
106
|
-
// eslint-disable-next-line prefer-const
|
|
107
|
-
let [currentLocale, setCurrentLocale] = useState<Locale>(locale || getLocale(langs));
|
|
108
|
-
const defaultLocale = langs?.[0]?.code ?? fallbackLocale;
|
|
109
|
-
const lastCurrentLocale = useRef<string>(defaultLocale);
|
|
110
|
-
const [, setForceUpdate] = useState(0);
|
|
111
|
-
|
|
112
|
-
const changeLocale = (newLocale: Locale) => {
|
|
113
|
-
setCurrentLocale(newLocale);
|
|
114
|
-
setLocale(newLocale);
|
|
115
|
-
};
|
|
116
|
-
|
|
117
|
-
useEffect(() => {
|
|
118
|
-
const tmpLocale = locale || getLocale(langs);
|
|
119
|
-
if (tmpLocale !== currentLocale) {
|
|
120
|
-
changeLocale(tmpLocale);
|
|
121
|
-
}
|
|
122
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
123
|
-
}, [locale]);
|
|
124
|
-
|
|
125
|
-
// handle async loading of translations
|
|
126
|
-
if (currentLocale && translations[currentLocale] && typeof translations[currentLocale] === 'function') {
|
|
127
|
-
const tmpLocale = currentLocale;
|
|
128
|
-
try {
|
|
129
|
-
Promise.resolve(translations[tmpLocale]()).then((res) => {
|
|
130
|
-
if (res && typeof res === 'object') {
|
|
131
|
-
translations[tmpLocale] = res;
|
|
132
|
-
setForceUpdate((x) => (x > 999 ? 0 : x + 1));
|
|
133
|
-
}
|
|
134
|
-
});
|
|
135
|
-
} catch (err) {
|
|
136
|
-
console.error(err);
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
onLoadingTranslation?.(tmpLocale, langs);
|
|
140
|
-
currentLocale = lastCurrentLocale.current;
|
|
141
|
-
} else {
|
|
142
|
-
lastCurrentLocale.current = currentLocale;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
const t = useCallback(
|
|
146
|
-
(key: string, data?: Record<string, any>) => translate(translations, key, currentLocale, fallbackLocale, data),
|
|
147
|
-
[translations, currentLocale, fallbackLocale]
|
|
148
|
-
);
|
|
149
|
-
|
|
150
|
-
return (
|
|
151
|
-
<Provider value={{ locale: currentLocale, changeLocale, t, languages: langs, defaultLocale, ...rest }}>
|
|
152
|
-
{children}
|
|
153
|
-
</Provider>
|
|
154
|
-
);
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
function useLocaleContext() {
|
|
158
|
-
const context = use(LocaleContext);
|
|
159
|
-
return context;
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
export { LocaleProvider, Consumer as LocaleConsumer, LocaleContext, useLocaleContext, setLocale, getLocale };
|
package/src/Locale/languages.ts
DELETED
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
// from: https://github.com/meikidd/iso-639-1/blob/master/src/data.js
|
|
2
|
-
const languages: Record<string, { name: string; nativeName: string }> = {
|
|
3
|
-
ar: {
|
|
4
|
-
name: 'Arabic',
|
|
5
|
-
nativeName: 'اَلْعَرَبِيَّةُ',
|
|
6
|
-
},
|
|
7
|
-
de: {
|
|
8
|
-
name: 'German',
|
|
9
|
-
nativeName: 'Deutsch',
|
|
10
|
-
},
|
|
11
|
-
en: {
|
|
12
|
-
name: 'English',
|
|
13
|
-
nativeName: 'English',
|
|
14
|
-
},
|
|
15
|
-
es: {
|
|
16
|
-
name: 'Spanish',
|
|
17
|
-
nativeName: 'Español',
|
|
18
|
-
},
|
|
19
|
-
fr: {
|
|
20
|
-
name: 'French',
|
|
21
|
-
nativeName: 'Français',
|
|
22
|
-
},
|
|
23
|
-
it: {
|
|
24
|
-
name: 'Italian',
|
|
25
|
-
nativeName: 'Italiano',
|
|
26
|
-
},
|
|
27
|
-
ja: {
|
|
28
|
-
name: 'Japanese',
|
|
29
|
-
nativeName: '日本語',
|
|
30
|
-
},
|
|
31
|
-
ko: {
|
|
32
|
-
name: 'Korean',
|
|
33
|
-
nativeName: '한국어',
|
|
34
|
-
},
|
|
35
|
-
mn: {
|
|
36
|
-
name: 'Mongolian',
|
|
37
|
-
nativeName: 'Монгол хэл',
|
|
38
|
-
},
|
|
39
|
-
pt: {
|
|
40
|
-
name: 'Portuguese',
|
|
41
|
-
nativeName: 'Português',
|
|
42
|
-
},
|
|
43
|
-
ru: {
|
|
44
|
-
name: 'Russian',
|
|
45
|
-
nativeName: 'Русский',
|
|
46
|
-
},
|
|
47
|
-
zh: {
|
|
48
|
-
name: 'Simplified Chinese',
|
|
49
|
-
nativeName: '简体中文',
|
|
50
|
-
},
|
|
51
|
-
'zh-TW': {
|
|
52
|
-
name: 'Traditional Chinese',
|
|
53
|
-
nativeName: '繁體中文',
|
|
54
|
-
},
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
export default Object.keys(languages).map((code) => ({ code, ...languages[code] }));
|
|
58
|
-
export { languages as map };
|
package/src/Locale/selector.tsx
DELETED
|
@@ -1,174 +0,0 @@
|
|
|
1
|
-
/* eslint-disable react/jsx-no-bind */
|
|
2
|
-
import React, { useState, use, useRef, useMemo } from 'react';
|
|
3
|
-
import {
|
|
4
|
-
Button,
|
|
5
|
-
Typography,
|
|
6
|
-
IconButton,
|
|
7
|
-
Popper,
|
|
8
|
-
MenuItem,
|
|
9
|
-
MenuList,
|
|
10
|
-
Box,
|
|
11
|
-
ClickAwayListener,
|
|
12
|
-
Paper,
|
|
13
|
-
} from '@mui/material';
|
|
14
|
-
import { Icon as IconifyIcon } from '@iconify/react';
|
|
15
|
-
import CheckIcon from '@iconify-icons/material-symbols/check';
|
|
16
|
-
import LanguageIcon from 'iconify-icons-material-symbols-400/language';
|
|
17
|
-
|
|
18
|
-
import { LocaleContext } from './context';
|
|
19
|
-
import { styled } from '../Theme';
|
|
20
|
-
import type { Locale } from '../type';
|
|
21
|
-
import { mergeSx } from '../Util/style';
|
|
22
|
-
|
|
23
|
-
export interface LocaleSelectorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
24
|
-
showText?: true | false;
|
|
25
|
-
popperProps?: React.HTMLAttributes<HTMLDivElement>;
|
|
26
|
-
popperType?: 'hover' | 'click';
|
|
27
|
-
icon?: React.ComponentType<any>;
|
|
28
|
-
size?: number;
|
|
29
|
-
onChange?: (locale: Locale) => void;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
export default function LocaleSelector({ ...props }: LocaleSelectorProps) {
|
|
33
|
-
const { showText = true, popperProps = {}, popperType = 'click', icon: Icon, size = 24, ...rest } = props;
|
|
34
|
-
const { locale, changeLocale, languages } = use(LocaleContext);
|
|
35
|
-
const anchorEl = useRef<HTMLButtonElement>(null);
|
|
36
|
-
const [open, setOpen] = useState(false);
|
|
37
|
-
|
|
38
|
-
const onSelect = (newLocale: Locale) => {
|
|
39
|
-
changeLocale(newLocale);
|
|
40
|
-
setOpen(false);
|
|
41
|
-
if (typeof props.onChange === 'function') {
|
|
42
|
-
props.onChange(newLocale);
|
|
43
|
-
}
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
const onClose = (e: MouseEvent | TouchEvent) => {
|
|
47
|
-
if (anchorEl.current?.contains(e.target as Node)) {
|
|
48
|
-
return;
|
|
49
|
-
}
|
|
50
|
-
setOpen(false);
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
const ButtonComponent: typeof Button = showText ? Button : IconButton;
|
|
54
|
-
|
|
55
|
-
const handleEventProps =
|
|
56
|
-
popperType === 'hover'
|
|
57
|
-
? {
|
|
58
|
-
onMouseEnter: () => {
|
|
59
|
-
setOpen(true);
|
|
60
|
-
},
|
|
61
|
-
onMouseLeave: () => {
|
|
62
|
-
setOpen(false);
|
|
63
|
-
},
|
|
64
|
-
}
|
|
65
|
-
: {
|
|
66
|
-
onClick: () => {
|
|
67
|
-
setOpen(!open);
|
|
68
|
-
},
|
|
69
|
-
};
|
|
70
|
-
|
|
71
|
-
const renderIcon = useMemo(() => {
|
|
72
|
-
if (Icon) {
|
|
73
|
-
return <Icon />;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
return <IconifyIcon icon={LanguageIcon} fontSize={size} style={{ transform: 'scale(1.10)' }} />;
|
|
77
|
-
}, [Icon, size]);
|
|
78
|
-
|
|
79
|
-
return (
|
|
80
|
-
// @ts-ignore
|
|
81
|
-
<Wrapper {...rest} {...handleEventProps}>
|
|
82
|
-
<ButtonComponent ref={anchorEl} className="trigger" role="button" aria-label="Locale selector button">
|
|
83
|
-
<Box
|
|
84
|
-
sx={{
|
|
85
|
-
display: 'flex',
|
|
86
|
-
alignItems: 'center',
|
|
87
|
-
}}>
|
|
88
|
-
{renderIcon}
|
|
89
|
-
|
|
90
|
-
{showText ? (
|
|
91
|
-
<Typography component="strong" className="trigger-text">
|
|
92
|
-
{languages.find((x) => x.code === locale)?.name}
|
|
93
|
-
</Typography>
|
|
94
|
-
) : (
|
|
95
|
-
''
|
|
96
|
-
)}
|
|
97
|
-
</Box>
|
|
98
|
-
</ButtonComponent>
|
|
99
|
-
<Popper
|
|
100
|
-
open={open}
|
|
101
|
-
anchorEl={anchorEl.current}
|
|
102
|
-
{...popperProps}
|
|
103
|
-
// @ts-ignore
|
|
104
|
-
sx={mergeSx(
|
|
105
|
-
// @ts-ignore
|
|
106
|
-
{ zIndex: (_theme) => _theme.zIndex.tooltip + 10 },
|
|
107
|
-
// @ts-ignore
|
|
108
|
-
popperProps?.sx
|
|
109
|
-
)}>
|
|
110
|
-
<Paper
|
|
111
|
-
variant="outlined"
|
|
112
|
-
className="locales"
|
|
113
|
-
sx={{
|
|
114
|
-
borderRadius: 1,
|
|
115
|
-
}}>
|
|
116
|
-
<ClickAwayListener onClickAway={onClose}>
|
|
117
|
-
<MenuList>
|
|
118
|
-
{languages.map(({ code, name }) => {
|
|
119
|
-
return (
|
|
120
|
-
<MenuItem
|
|
121
|
-
key={code}
|
|
122
|
-
className="locale-item"
|
|
123
|
-
onClick={() => onSelect(code)}
|
|
124
|
-
sx={{
|
|
125
|
-
fontSize: 16,
|
|
126
|
-
fontStyle: 'normal',
|
|
127
|
-
fontStretch: 'normal',
|
|
128
|
-
lineHeight: 'normal',
|
|
129
|
-
letterSpacing: '2px',
|
|
130
|
-
textAlign: 'center',
|
|
131
|
-
color: 'text.primary',
|
|
132
|
-
cursor: 'pointer',
|
|
133
|
-
display: 'flex',
|
|
134
|
-
padding: '16px',
|
|
135
|
-
alignItems: 'center',
|
|
136
|
-
}}>
|
|
137
|
-
<Box
|
|
138
|
-
component={IconifyIcon}
|
|
139
|
-
icon={CheckIcon}
|
|
140
|
-
className={code === locale ? 'check-icon check-icon-visible' : 'check-icon'}
|
|
141
|
-
sx={{
|
|
142
|
-
marginRight: 1,
|
|
143
|
-
visibility: code === locale ? 'visible' : 'hidden',
|
|
144
|
-
}}
|
|
145
|
-
/>
|
|
146
|
-
{name}
|
|
147
|
-
</MenuItem>
|
|
148
|
-
);
|
|
149
|
-
})}
|
|
150
|
-
</MenuList>
|
|
151
|
-
</ClickAwayListener>
|
|
152
|
-
</Paper>
|
|
153
|
-
</Popper>
|
|
154
|
-
</Wrapper>
|
|
155
|
-
);
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
const Wrapper = styled(Box)`
|
|
159
|
-
display: inline-block;
|
|
160
|
-
|
|
161
|
-
.trigger {
|
|
162
|
-
display: flex;
|
|
163
|
-
flex-direction: column;
|
|
164
|
-
justify-content: center;
|
|
165
|
-
font-size: 14px;
|
|
166
|
-
white-space: nowrap;
|
|
167
|
-
|
|
168
|
-
.trigger-text {
|
|
169
|
-
margin-left: 5px;
|
|
170
|
-
font-size: 14px;
|
|
171
|
-
color: ${({ theme }) => theme.palette.text.primary};
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
`;
|
package/src/Locale/util.ts
DELETED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import get from 'lodash/get';
|
|
2
|
-
import type { Locale, Translations } from '../type';
|
|
3
|
-
|
|
4
|
-
/* eslint-disable no-prototype-builtins */
|
|
5
|
-
export const replace = (template: string | Function, data: Record<string, any>) => {
|
|
6
|
-
if (typeof template === 'function') {
|
|
7
|
-
return template(data);
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
return template.replace(/{(\w*)}/g, (m, key) => (data.hasOwnProperty(key) ? data[key] : ''));
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
export const translate = (
|
|
14
|
-
translations: Translations,
|
|
15
|
-
key: string,
|
|
16
|
-
locale: Locale,
|
|
17
|
-
fallbackLocale = 'en',
|
|
18
|
-
data = {}
|
|
19
|
-
) => {
|
|
20
|
-
const translation = translations[locale];
|
|
21
|
-
const translationValue = get(translation, key);
|
|
22
|
-
const fallbackValue = get(translations[fallbackLocale], key);
|
|
23
|
-
|
|
24
|
-
if (!translation || !translationValue) {
|
|
25
|
-
console.warn(`Warning: no ${key} translation of ${locale}`);
|
|
26
|
-
if (fallbackLocale && fallbackValue) {
|
|
27
|
-
return replace(fallbackValue, data);
|
|
28
|
-
}
|
|
29
|
-
return key;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
if (typeof translations[locale] === 'function' || translations[locale].then) {
|
|
33
|
-
return replace(fallbackValue, data);
|
|
34
|
-
}
|
|
35
|
-
return replace(translationValue, data);
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
export const t = translate;
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
export { default as DarkMode } from './demo/dark-mode';
|
|
2
|
-
export { default as DarkModeLogoOnly } from './demo/dark-mode-logo-only';
|
|
3
|
-
export { default as DarkModeHorizontal } from './demo/dark-mode-horizontal';
|
|
4
|
-
export { default as WithStyling } from './demo/with-styling';
|
|
5
|
-
export { default as LightMode } from './demo/light-mode';
|
|
6
|
-
export { default as LightModeLogoOnly } from './demo/light-mode-logo-only';
|
|
7
|
-
export { default as LightModeHorizontal } from './demo/light-mode-horizontal';
|
|
8
|
-
|
|
9
|
-
export default {
|
|
10
|
-
title: 'ArcBlock/Logo',
|
|
11
|
-
|
|
12
|
-
parameters: {
|
|
13
|
-
docs: {
|
|
14
|
-
description: {
|
|
15
|
-
component: 'Arcblock Logo',
|
|
16
|
-
},
|
|
17
|
-
},
|
|
18
|
-
design: {
|
|
19
|
-
type: 'figma',
|
|
20
|
-
url: 'https://www.figma.com/file/E8TSBWCOyXzETmVOjzbqvw/ArcBlock-UI-Kit?node-id=2412%3A11100',
|
|
21
|
-
},
|
|
22
|
-
},
|
|
23
|
-
};
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="99" height="18" viewBox="0 0 99 18">
|
|
2
|
-
<path fill="#000" fill-rule="evenodd" d="M6.5.053h2.864L16.028 18h-2.114l-1.391-3.795H3.504L2.14 18H0L6.5.053zm1.474 1.481L4.04 12.563h7.895L7.975 1.534zm14.44 3.542c1.27 0 2.198.296 2.78.892.58.597.871 1.52.871 2.765v.36c0 .117-.008.245-.026.385h-1.826c.018-.14.027-.292.027-.452v-.48c0-.766-.186-1.283-.551-1.55-.367-.266-.916-.4-1.65-.4-.968 0-1.698.24-2.189.723-.493.48-.738 1.208-.738 2.187v8.308h-1.88V5.341h1.824l-.079 1.443c.376-.614.863-1.053 1.463-1.316a4.868 4.868 0 0 1 1.974-.392zM35.95 15.903c.501-.328.752-1.205.752-2.63h1.852c0 1.924-.403 3.178-1.208 3.765-.806.589-2.158.882-4.055.882-2.65 0-4.24-.538-4.766-1.616-.529-1.076-.793-2.781-.793-5.114 0-2.118.367-3.645 1.102-4.581.732-.934 2.209-1.401 4.43-1.401 1.378 0 2.569.221 3.572.665 1.002.446 1.503 1.497 1.503 3.153v.188a.234.234 0 0 0-.027.106v.106h-1.826c0-1.12-.228-1.851-.685-2.188-.455-.34-1.23-.507-2.322-.507-1.665 0-2.713.259-3.142.782-.43.524-.646 1.67-.646 3.44V12.2c0 1.4.161 2.448.485 3.15.322.7 1.297 1.048 2.926 1.048 1.397 0 2.346-.165 2.848-.495zm15.87-.318c.606-.328.912-1.263.912-2.805 0-.924-.147-1.69-.444-2.302-.294-.611-1.007-.917-2.133-.917H43.065v6.516h5.528c1.543 0 2.617-.165 3.226-.492zm-8.754-13.85v6.036h5.665c1.325 0 2.239-.214 2.737-.643.503-.428.755-1.288.755-2.575 0-1.09-.192-1.834-.577-2.226-.385-.394-1.116-.591-2.19-.591h-6.39zM52 8.466c1.185.322 1.956.816 2.314 1.482.359.67.54 1.581.54 2.739 0 1.6-.325 2.858-.97 3.764-.647.909-1.874 1.363-3.686 1.363H41.05V0h8.62c1.592 0 2.759.312 3.503.934.744.624 1.115 1.78 1.115 3.473 0 1.014-.129 1.855-.386 2.522-.258.669-.89 1.181-1.903 1.536zm5.43 9.348V.001h1.907v17.812H57.43zm13.374-6.168v-.708c0-1.539-.141-2.636-.426-3.297-.284-.658-1.191-.99-2.718-.99h-.401c-1.617 0-2.625.25-3.025.75-.399.5-.599 1.632-.599 3.4V12.822c0 .206.008.407.024.602a9.48 9.48 0 0 0 .216 1.474c.106.465.275.822.505 1.072.196.179.435.302.72.373.283.072.586.116.905.135h1.254c1.083 0 1.914-.151 2.492-.456.577-.302.9-1.043.972-2.22a18.338 18.338 0 0 0 .054-1.447c.015-.233.027-.47.027-.71zm-3.786-6.518c2.399 0 3.956.414 4.672 1.243.717.828 1.074 2.418 1.074 4.766 0 2.048-.219 3.704-.657 4.966C71.668 17.367 70.16 18 67.581 18c-2.237 0-3.782-.347-4.632-1.042-.85-.694-1.275-2.205-1.275-4.54v-1.174c0-2.12.318-3.669.954-4.646.635-.98 2.099-1.471 4.39-1.471zm16.434 10.776c.501-.328.752-1.205.752-2.63h1.853c0 1.924-.403 3.178-1.209 3.765-.804.589-2.157.882-4.054.882-2.648 0-4.24-.538-4.767-1.616-.528-1.076-.79-2.781-.79-5.114 0-2.118.365-3.645 1.1-4.581.732-.934 2.21-1.401 4.43-1.401 1.377 0 2.568.221 3.571.665 1.003.446 1.504 1.497 1.504 3.153v.188a.232.232 0 0 0-.026.106v.106H83.99c0-1.12-.229-1.851-.686-2.188-.455-.34-1.23-.507-2.323-.507-1.665 0-2.712.259-3.142.782-.43.524-.643 1.67-.643 3.44V12.2c0 1.4.16 2.448.482 3.15.324.7 1.298 1.048 2.927 1.048 1.397 0 2.346-.165 2.847-.495zm9.236-4.82L99 17.813h-2.47l-5.317-6.01h-.752v6.01h-1.907V0h1.907v10.362h.752l4.512-5.02h2.309l-5.346 5.741z"/>
|
|
3
|
-
</svg>
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="45" height="52" viewBox="0 0 45 52">
|
|
2
|
-
<g fill="none" fill-rule="evenodd" stroke="#000">
|
|
3
|
-
<path d="M.5 13.077L22.15.577l21.651 12.5v25l-21.65 12.5L.5 38.077zM22.15.577v50M.5 13.077l43.301 25M.5 38.077l43.301-25"/>
|
|
4
|
-
<path d="M22.15 38.077l10.826-6.25-10.825-18.75-10.825 18.75z"/>
|
|
5
|
-
</g>
|
|
6
|
-
</svg>
|