@arcblock/ux 2.10.67 → 2.10.69

package/src/Layout/dashboard/{sidebar.jsx → sidebar.tsx}

@@ -1,12 +1,22 @@
-/* eslint-disable react/no-array-index-key */
-import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 import { teal } from '@mui/material/colors';
 import clsx from 'clsx';
 import { styled } from '../../Theme';
 import { NavLink } from './external-link';
 
-function renderItem(item, index) {
+export type LinkItem = {
+  url: string;
+  title: React.ReactNode;
+  icon?: React.ReactNode;
+  iconZoom?: number;
+  color?: string;
+  showBadge?: false | true;
+  external?: false | true;
+  active?: boolean;
+  children?: LinkItem[];
+};
+
+function renderItem(item: LinkItem, index: number) {
   if (item.children?.length) {
     // eslint-disable-next-line no-use-before-define
     return renderGroup(item, index);
@@ -18,9 +28,7 @@ function renderItem(item, index) {
       <NavLink
         external={external}
         to={url}
-        className={({ isActive }) =>
-          clsx('layout-sidebar-link', { 'layout-sidebar-link--active': external ? active : isActive })
-        }>
+        className={() => clsx('layout-sidebar-link', { 'layout-sidebar-link--active': external ? active : false })}>
         {icon && <span className={`layout-sidebar-icon ${showBadge ? 'layout-sidebar-badge' : ''}`}>{icon}</span>}
         <Typography component="span" className="layout-sidebar-link-text">
           {title}
@@ -30,16 +38,22 @@ function renderItem(item, index) {
   );
 }
 
-function renderGroup(item, index) {
+function renderGroup(item: LinkItem, index: number) {
   return (
     <li key={`group-${item.title}-${index}`} className="layout-sidebar-group">
       <span className="layout-sidebar-group-title">{item.title}</span>
-      <ul>{item.children.map(renderItem)}</ul>
+      <ul>{item.children!.map(renderItem)}</ul>
     </li>
   );
 }
 
-function Sidebar({ links, addons, dense, ...rest }) {
+export interface SidebarProps {
+  links: LinkItem[];
+  addons?: React.ReactNode;
+  dense?: false | true;
+}
+
+function Sidebar({ links, addons, dense = false, ...rest }: SidebarProps) {
   return (
     <Root {...rest} className={clsx({ 'layout-sidebar-dense': dense })}>
       <ul>{links.map(renderItem)}</ul>
@@ -49,17 +63,6 @@ function Sidebar({ links, addons, dense, ...rest }) {
   );
 }
 
-Sidebar.propTypes = {
-  links: PropTypes.array.isRequired,
-  addons: PropTypes.any,
-  dense: PropTypes.bool,
-};
-
-Sidebar.defaultProps = {
-  addons: null,
-  dense: false,
-};
-
 const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))';
 
 const Root = styled('div')`

package/src/Layout/dashboard-legacy/{header.jsx → header.tsx}

@@ -1,6 +1,5 @@
-import PropTypes from 'prop-types';
 import Button from '@mui/material/IconButton';
-import AppBar from '@mui/material/AppBar';
+import AppBar, { type AppBarProps } from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
@@ -83,6 +82,16 @@ const StyledAppBar = styled(AppBar)`
   }
 `;
 
+export interface HeaderProps extends AppBarProps {
+  onToggleMenu: () => void;
+  brand?: string;
+  description?: React.ReactNode;
+  addons?: React.ReactNode;
+  brandAddon?: React.ReactNode;
+  homeUrl?: string;
+  logo?: React.ReactNode;
+}
+
 /*
   自定义 logo 相关:
   如果为 logo prop 传入一个自定义的 svg, 并且 svg 中的元素通过 id 引用了 defs 中的元素 (比如 linearGradient),
@@ -93,16 +102,16 @@ const StyledAppBar = styled(AppBar)`
   参考: https://blog.patw.me/archives/1820/inline-svg-same-id-and-display-none-issue/
 */
 export default function Header({
-  children,
+  onToggleMenu,
   brand,
-  brandAddon,
   description,
   addons,
-  onToggleMenu,
-  homeUrl,
+  brandAddon,
+  homeUrl = '/',
   logo,
+  children,
   ...rest
-}) {
+}: HeaderProps) {
   return (
     <StyledAppBar position="sticky" className="header" {...rest}>
       <Toolbar disableGutters={false} className="header-toolbar">
@@ -136,22 +145,3 @@ export default function Header({
     </StyledAppBar>
   );
 }
-
-Header.propTypes = {
-  onToggleMenu: PropTypes.func.isRequired,
-  brand: PropTypes.string.isRequired,
-  brandAddon: PropTypes.object,
-  description: PropTypes.any.isRequired,
-  children: PropTypes.any,
-  addons: PropTypes.any,
-  homeUrl: PropTypes.string,
-  logo: PropTypes.any,
-};
-
-Header.defaultProps = {
-  children: null,
-  addons: null,
-  brandAddon: null,
-  homeUrl: '/',
-  logo: null,
-};

package/src/Layout/dashboard-legacy/{index.jsx → index.tsx}

@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
 import Container from '@mui/material/Container';
 import Box from '@mui/material/Box';
-import Drawer from '@mui/material/Drawer';
+import { type SxProps } from '@mui/material';
+import Drawer, { type DrawerProps } from '@mui/material/Drawer';
 import { useSize } from 'ahooks';
 
-import Sidebar from './sidebar';
+import Sidebar, { type LinkItem } from './sidebar';
 import Header from './header';
 import Footer from '../../Footer';
 import { styled } from '../../Theme';
@@ -41,27 +41,43 @@ const Wrapper = styled('div')`
   }
 `;
 
+export interface DashboardProps extends React.HTMLAttributes<HTMLDivElement> {
+  links?: LinkItem[];
+  brand?: string;
+  description?: React.ReactNode;
+  images: Record<string, string>;
+  title?: string;
+  brandAddon?: React.ReactNode;
+  headerAddon?: React.ReactNode;
+  prefix?: string;
+  fullWidth?: false | true;
+  contentLayout?: 'row' | 'column';
+  homeUrl?: string;
+  logo?: React.ReactNode;
+  sx?: SxProps;
+}
+
 export default function Dashboard({
-  children,
-  title,
-  brand,
-  description,
+  links = [],
+  brand = '',
+  description = '',
+  images,
+  title = 'Home',
   brandAddon,
   headerAddon,
-  images,
-  links,
-  prefix,
-  fullWidth,
-  contentLayout,
-  className,
-  homeUrl,
+  prefix = '/images',
+  fullWidth = false,
+  contentLayout = 'column',
+  className = '',
+  homeUrl = '/',
   logo,
+  children,
   ...rest
-}) {
+}: DashboardProps) {
   const breakpoint = 960;
   const size = useSize(document.body);
   const width = size?.width || 0;
-  const [drawerMode, setDrawerMode] = useState(width >= breakpoint ? 'permanent' : 'temporary');
+  const [drawerMode, setDrawerMode] = useState<DrawerProps['variant']>(width >= breakpoint ? 'permanent' : 'temporary');
   const [drawerOpen, setDrawerOpen] = useState(drawerMode === 'permanent');
 
   useEffect(() => {
@@ -109,33 +125,3 @@ export default function Dashboard({
     </Wrapper>
   );
 }
-
-Dashboard.propTypes = {
-  children: PropTypes.any.isRequired,
-  title: PropTypes.string,
-  brand: PropTypes.string.isRequired,
-  links: PropTypes.array.isRequired,
-  images: PropTypes.object.isRequired,
-  brandAddon: PropTypes.object,
-  description: PropTypes.any.isRequired,
-  headerAddon: PropTypes.any,
-  prefix: PropTypes.string,
-  // 兼容旧版的设置，新版使用 fullWidth 进行设置
-  contentLayout: PropTypes.oneOf(['row', 'column']),
-  fullWidth: PropTypes.bool,
-  className: PropTypes.string,
-  homeUrl: PropTypes.string,
-  logo: PropTypes.any,
-};
-
-Dashboard.defaultProps = {
-  title: 'Home',
-  contentLayout: 'column',
-  headerAddon: null,
-  brandAddon: null,
-  prefix: '/images',
-  fullWidth: false,
-  className: '',
-  homeUrl: '/',
-  logo: null,
-};

package/src/Layout/dashboard-legacy/{sidebar.jsx → sidebar.tsx}

@@ -1,18 +1,36 @@
 import { memo } from 'react';
-import PropTypes from 'prop-types';
 import { Link, useLocation } from 'react-router-dom';
-import Button from '@mui/material/Button';
+import Button, { type ButtonProps } from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 import { teal } from '@mui/material/colors';
+import { type SxProps } from '@mui/material';
 
 import ImageIcon from '../../Icon/image';
 import Logo from '../../Logo';
 import { styled, useTheme } from '../../Theme';
 
-export default function Sidebar({ images, links, prefix, addons, logo, ...rest }) {
+export type LinkItem = {
+  url: string;
+  title: React.ReactNode;
+  name: string;
+  showBadge?: false | true;
+};
+
+// const a: LinkItem = {};
+
+export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+  images: Record<string, string>;
+  links: LinkItem[];
+  prefix: string;
+  addons?: React.ReactNode;
+  logo?: React.ReactNode;
+  sx?: SxProps;
+}
+
+export default function Sidebar({ images, links, prefix = '/images', addons, logo, ...rest }: SidebarProps) {
   const theme = useTheme();
   const location = useLocation();
-  const isSelected = (url, name) => {
+  const isSelected = (_: string, name: string) => {
     const pattern = new RegExp(`/${name}`);
     return pattern.test(location.pathname);
   };
@@ -45,20 +63,6 @@ export default function Sidebar({ images, links, prefix, addons, logo, ...rest }
   );
 }
 
-Sidebar.propTypes = {
-  images: PropTypes.object.isRequired,
-  links: PropTypes.array.isRequired,
-  prefix: PropTypes.string,
-  addons: PropTypes.any,
-  logo: PropTypes.any,
-};
-
-Sidebar.defaultProps = {
-  prefix: '/images',
-  addons: null,
-  logo: null,
-};
-
 const MenuItems = memo(styled('div')`
   flex: 1;
   display: flex;
@@ -84,7 +88,11 @@ const MenuItems = memo(styled('div')`
 
 const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))';
 
-const MenuItem = styled(Button)`
+type MenuItemProps = {
+  selected: boolean;
+};
+
+const MenuItem = styled(Button)<MenuItemProps & ButtonProps<typeof Link, { component: typeof Link }>>`
   && {
     display: flex;
     flex-direction: column;

package/src/Layout/{index.jsx → index.tsx}

@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
 import {
   AppBar,
@@ -13,6 +12,7 @@ import {
   ListItemText,
   Toolbar,
   Typography,
+  type SxProps,
 } from '@mui/material';
 import MenuIcon from '@mui/icons-material/Menu';
 
@@ -21,23 +21,44 @@ import OpenInWallet from '../Wallet/Open';
 import Icon from '../Icon';
 import Logo from '../Logo';
 import { styled } from '../Theme';
+import { type LinkItem } from './dashboard/sidebar';
+
+export interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string;
+  brand: React.ReactNode;
+  description?: React.ReactNode;
+  links?: LinkItem[];
+  logo?: React.ReactNode;
+  showLogo?: false | true;
+  addons?: React.ReactNode;
+  footer?: React.ReactNode;
+  baseUrl?: string;
+  homeUrl?: string;
+  variant?: 'shadow' | 'border';
+  contentOnly?: false | true;
+  sx?: SxProps;
+}
 
 export default function Layout({
   title,
   brand,
   description,
-  links,
-  logo,
-  showLogo,
+  links = [],
+  logo = <Logo showText={false} style={{ width: '40px', height: '40px' }} />,
+  showLogo = false,
   addons,
-  footer,
-  baseUrl,
-  homeUrl,
+  footer = (
+    <Container>
+      <Footer />
+    </Container>
+  ),
+  baseUrl = '',
+  homeUrl = '/',
+  variant = 'shadow',
+  contentOnly = false,
   children,
-  variant,
-  contentOnly,
   ...rest
-}) {
+}: LayoutProps) {
   const [drawerOpen, setDrawerOpen] = useState(false);
   const onToggleDrawer = () => {
     setDrawerOpen(!drawerOpen);
@@ -45,8 +66,9 @@ export default function Layout({
 
   useEffect(() => {
     const { searchParams } = new URL(window.location.href);
-    if (searchParams.get('inviter')) {
-      window.localStorage.setItem('inviter', searchParams.get('inviter'));
+    const inviter = searchParams.get('inviter');
+    if (inviter) {
+      window.localStorage.setItem('inviter', inviter);
     }
   }, []);
 
@@ -55,6 +77,7 @@ export default function Layout({
   }
 
   let activeLink = '';
+  // @ts-expect-error
   const { pathname: currentPath } = new URL(window.location);
   links.forEach((link) => {
     if (currentPath.startsWith(link.url) && link.url.length > activeLink.length) {
@@ -74,8 +97,10 @@ export default function Layout({
           <Link className="nav-link" key={x.url} href={x.url} underline="hover">
             <ListItem button className={activeLink === x.url ? 'drawer-highlight-nav' : ''}>
               <ListItemText>
-                {x.icon && (
+                {typeof x.icon === 'string' ? (
                   <Icon name={x.icon} size={18 * (x.iconZoom || 1)} color="inherit" style={{ marginRight: '5px' }} />
+                ) : (
+                  x.icon
                 )}
                 {x.title}
               </ListItemText>
@@ -127,13 +152,15 @@ export default function Layout({
                     className={`nav-link ${activeLink === x.url ? 'highlight-nav' : ''}`}
                     color={x.color}
                     underline="hover">
-                    {x.icon && (
+                    {typeof x.icon === 'string' ? (
                       <Icon
                         name={x.icon}
                         size={20 * (x.iconZoom || 1)}
                         color="inherit"
                         style={{ marginRight: '5px' }}
                       />
+                    ) : (
+                      x.icon
                     )}
                     {x.title}
                   </Link>
@@ -167,39 +194,6 @@ export default function Layout({
   );
 }
 
-Layout.propTypes = {
-  title: PropTypes.string.isRequired,
-  brand: PropTypes.any.isRequired,
-  description: PropTypes.any,
-  addons: PropTypes.any,
-  showLogo: PropTypes.bool,
-  logo: PropTypes.any,
-  links: PropTypes.array,
-  children: PropTypes.any.isRequired,
-  baseUrl: PropTypes.string,
-  homeUrl: PropTypes.string,
-  variant: PropTypes.oneOf(['shadow', 'border']),
-  footer: PropTypes.any,
-  contentOnly: PropTypes.bool,
-};
-
-Layout.defaultProps = {
-  contentOnly: false,
-  baseUrl: '',
-  homeUrl: '/',
-  links: [],
-  showLogo: false,
-  logo: <Logo showText={false} style={{ width: '40px', height: '40px' }} />,
-  variant: 'shadow',
-  addons: undefined,
-  description: undefined,
-  footer: (
-    <Container>
-      <Footer />
-    </Container>
-  ),
-};
-
 const Div = styled('div')`
   width: 100%;
   min-height: 100vh;

package/src/LoadingMask/{index.jsx → index.tsx}

@@ -1,13 +1,28 @@
-import PropTypes from 'prop-types';
 import { Box } from '@mui/material';
 
 import { temp as colors } from '../Colors';
 
-export default function LoadingMask({ size, padding, borderWidth, borderRadius, duration, children }) {
+export interface LoadingMaskProps {
+  size?: number;
+  padding?: number;
+  borderWidth?: number;
+  borderRadius?: number;
+  duration?: number;
+  children?: React.ReactNode;
+}
+
+export default function LoadingMask({
+  size = 64,
+  padding,
+  borderWidth,
+  borderRadius,
+  duration,
+  children,
+}: LoadingMaskProps) {
   const finialSize = size;
   const finialRadius = borderRadius ?? finialSize / 8;
   const finialBorderWidth = borderWidth ?? finialSize / 32;
-  const finialPadding = padding ?? finialSize * 0.2 - finialBorderWidth;
+  const finialPadding = padding ?? finialSize * 0.25 - finialBorderWidth;
   const finialDuration = duration ?? 2.5;
   return (
     <Box
@@ -81,20 +96,3 @@ export default function LoadingMask({ size, padding, borderWidth, borderRadius,
     </Box>
   );
 }
-
-LoadingMask.propTypes = {
-  size: PropTypes.number,
-  padding: PropTypes.number,
-  borderRadius: PropTypes.number,
-  borderWidth: PropTypes.number,
-  duration: PropTypes.number,
-  children: PropTypes.node.isRequired,
-};
-
-LoadingMask.defaultProps = {
-  size: 64,
-  padding: undefined,
-  borderWidth: undefined,
-  duration: undefined,
-  borderRadius: undefined,
-};

package/src/Locale/{browser-lang.js → browser-lang.ts}

@@ -1,7 +1,6 @@
 /* eslint-disable no-param-reassign */
-function startsWith(string, target, position) {
+function startsWith(string: string, target: string, position: number = 0) {
   const { length } = string;
-  position = position == null ? 0 : position;
   if (position < 0) {
     position = 0;
   } else if (position > length) {
@@ -17,22 +16,25 @@ function getBrowserLang() {
     return null;
   }
 
-  const lang =
+  const lang: string =
     (window.navigator.languages && window.navigator.languages[0]) ||
     window.navigator.language ||
+    // @ts-expect-error
     window.navigator.browserLanguage ||
+    // @ts-expect-error
     window.navigator.userLanguage ||
+    // @ts-expect-error
     window.navigator.systemLanguage ||
     null;
 
   return lang;
 }
 
-function normalizeCode(code) {
+function normalizeCode(code?: string | null) {
   return (code || '').toLowerCase().replace(/-/, '_');
 }
 
-function getPreferredLanguage(options) {
+function getPreferredLanguage(options?: { languages?: string[]; fallback: string }) {
   if (!options) {
     return getBrowserLang();
   }
@@ -49,14 +51,14 @@ function getPreferredLanguage(options) {
     return fallback;
   }
 
-  const match = languages.filter((lang) => normalizeCode(lang) === browserLanguage);
+  const match = languages!.filter((lang) => normalizeCode(lang) === browserLanguage);
 
   if (match.length > 0) {
     return match[0] || fallback;
   }
 
   // en == en_US
-  const matchCodeOnly = languages.filter((lang) => startsWith(browserLanguage, lang));
+  const matchCodeOnly = languages!.filter((lang) => startsWith(browserLanguage, lang));
   return matchCodeOnly[0] || fallback;
 }
 

package/src/Locale/context.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-prototype-builtins */
-import React, { createContext, useState, useEffect, useContext, useRef, useCallback, ReactNode } from 'react';
+import { createContext, useState, useEffect, useContext, useRef, useCallback, ReactNode } from 'react';
 import get from 'lodash/get';
 import Cookie from 'js-cookie';
 
@@ -7,6 +7,7 @@ import browserLang from './browser-lang';
 import { translate } from './util';
 
 import { getCookieOptions } from '../Util';
+import type { Locale } from '../type';
 
 const cookieName = 'nf_lang';
 
@@ -22,7 +23,7 @@ const getLocaleFromSearchParams = (
   return null;
 };
 
-const setLocaleParam = (locale: string, url: string = window.location.href) => {
+const setLocaleParam = (locale: Locale, url: string = window.location.href) => {
   const urlObj = new URL(url);
   const hasLocaleParam = urlObj.searchParams.has('locale');
   if (hasLocaleParam) {
@@ -37,10 +38,10 @@ const getLocale = (languages: { code: string }[] = []): string => {
     // 取 languages 首个元素的 code 值, 如果不存在则取 'en'
     fallback: languages?.[0]?.code || 'en',
   };
-  return getLocaleFromSearchParams(languages) || Cookie.get(cookieName) || browserLang(langParams);
+  return getLocaleFromSearchParams(languages) || Cookie.get(cookieName) || browserLang(langParams)!;
 };
 
-const setLocale = (locale: string) => {
+const setLocale = (locale: Locale) => {
   Cookie.set(cookieName, locale, getCookieOptions());
   setLocaleParam(locale);
 };
@@ -63,15 +64,21 @@ const getLanguages = (arg?: { code: string; name: string }[]): { code: string; n
 
 interface LocaleProviderProps {
   children: ReactNode;
-  locale?: string;
-  fallbackLocale?: string;
+  locale?: Locale;
+  fallbackLocale?: Locale;
   translations: Record<string, any>;
-  // eslint-disable-next-line no-unused-vars
-  onLoadingTranslation?: (locale: string, languages: { code: string }[]) => void;
+  onLoadingTranslation?: (locale: Locale, languages: { code: string }[]) => void;
   languages?: { code: string; name: string }[];
 }
 
-const LocaleContext = createContext<any>(null);
+export interface LocaleContextType {
+  locale: Locale;
+  changeLocale: (locale: Locale) => void;
+  t: (key: string, data?: Record<string, string>) => string;
+  languages: { code: string; name: string }[];
+}
+
+const LocaleContext = createContext<LocaleContextType>(null!);
 const { Provider, Consumer } = LocaleContext;
 
 function LocaleProvider({
@@ -85,11 +92,11 @@ function LocaleProvider({
 }: LocaleProviderProps) {
   const langs = getLanguages(languages);
   // eslint-disable-next-line prefer-const
-  let [currentLocale, setCurrentLocale] = useState<string>(locale || getLocale(langs));
+  let [currentLocale, setCurrentLocale] = useState<Locale>(locale || getLocale(langs));
   const lastCurrentLocale = useRef<string>(fallbackLocale || '');
   const [, setForceUpdate] = useState(0);
 
-  const changeLocale = (newLocale: string) => {
+  const changeLocale = (newLocale: Locale) => {
     setCurrentLocale(newLocale);
     setLocale(newLocale);
   };

package/src/Locale/{languages.js → languages.ts}

@@ -1,5 +1,5 @@
 // from: https://github.com/meikidd/iso-639-1/blob/master/src/data.js
-const languages = {
+const languages: Record<string, { name: string; nativeName: string }> = {
   ar: {
     name: 'Arabic',
     nativeName: 'اَلْعَرَبِيَّةُ',