@arcblock/ux 1.17.21 → 2.0.0

package/src/Layout/dashboard/index.js

@@ -2,9 +2,9 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
 import styled from 'styled-components';
-import Container from '@material-ui/core/Container';
-import Box from '@material-ui/core/Box';
-import Drawer from '@material-ui/core/Drawer';
+import Container from '@mui/material/Container';
+import Box from '@mui/material/Box';
+import Drawer from '@mui/material/Drawer';
 import useWindowSize from 'react-use/lib/useWindowSize';
 
 import Sidebar from './sidebar';

package/src/Layout/dashboard/sidebar.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import withTheme from '@material-ui/core/styles/withTheme';
+import withTheme from '@mui/styles/withTheme';
 
 import { withRouter, Link } from 'react-router-dom';
-import Button from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
-import teal from '@material-ui/core/colors/teal';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import teal from '@mui/material/colors/teal';
 
 import ImageIcon from '../../Icon/image';
 import Logo from '../../Logo';
@@ -77,7 +77,7 @@ const MenuItems = React.memo(styled.div`
     text-align: center;
     font-size: 0;
   }
-  ${props => props.theme.breakpoints.down('sm')} {
+  ${props => props.theme.breakpoints.down('md')} {
     && .sidebar-logo {
       display: block;
     }
@@ -88,7 +88,10 @@ const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255
 
 const MenuItem = styled(Button)`
   && {
-    display: block;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
     width: 100%;
     transition: all 200ms ease-in-out;
     background: ${props => (props.selected ? gradient : '')};
@@ -109,13 +112,7 @@ const MenuItem = styled(Button)`
       text-transform: capitalize;
       letter-spacing: normal;
       width: 80%;
-    }
-
-    .MuiButton-label {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
+      color: ${props => props.theme.palette.text.primary};
     }
   }
 `;

package/src/Layout/index.js

@@ -2,19 +2,19 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Helmet from 'react-helmet';
-import Link from '@material-ui/core/Link';
+import Link from '@mui/material/Link';
 
-import AppBar from '@material-ui/core/AppBar';
-import Container from '@material-ui/core/Container';
-import Drawer from '@material-ui/core/Drawer';
-import Divider from '@material-ui/core/Divider';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
-import IconButton from '@material-ui/core/IconButton';
-import MenuIcon from '@material-ui/icons/Menu';
+import AppBar from '@mui/material/AppBar';
+import Container from '@mui/material/Container';
+import Drawer from '@mui/material/Drawer';
+import Divider from '@mui/material/Divider';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import IconButton from '@mui/material/IconButton';
+import MenuIcon from '@mui/icons-material/Menu';
 
 import Footer from '../Footer';
 import OpenInWallet from '../Wallet/Open';
@@ -63,7 +63,7 @@ export default function Layout({
       <Divider />
       <List>
         {links.map(x => (
-          <Link className="nav-link" key={x.url} href={x.url}>
+          <Link className="nav-link" key={x.url} href={x.url} underline="hover">
             <ListItem button className={activeLink === x.url ? 'drawer-highlight-nav' : ''}>
               <ListItemText>
                 {x.icon && (
@@ -99,7 +99,8 @@ export default function Layout({
                 aria-label="open drawer"
                 edge="start"
                 onClick={onToggleDrawer}
-                className="menu-button">
+                className="menu-button"
+                size="large">
                 <MenuIcon />
               </IconButton>
               {showLogo ? <div className="menu-logo">{logo}</div> : <></>}
@@ -130,7 +131,8 @@ export default function Layout({
                     key={x.url}
                     href={x.url}
                     className={`nav-link ${activeLink === x.url ? 'highlight-nav' : ''}`}
-                    color={x.color}>
+                    color={x.color}
+                    underline="hover">
                     {x.icon && (
                       <Icon
                         name={x.icon}
@@ -278,7 +280,7 @@ const Div = styled.div`
     }
   }
 
-  ${props => props.theme.breakpoints.down('sm')} {
+  ${props => props.theme.breakpoints.down('md')} {
     .toolbar {
       .nav-links,
       .menu-logo,

package/src/Locale/selector.js

@@ -1,16 +1,18 @@
+/* eslint-disable react/jsx-no-bind */
 import React, { useState, useContext, useRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-import { useTheme } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
-import IconButton from '@material-ui/core/IconButton';
-import ClickAwayListener from '@material-ui/core/ClickAwayListener';
-import Popper from '@material-ui/core/Popper';
-import MenuItem from '@material-ui/core/MenuItem';
-import MenuList from '@material-ui/core/MenuList';
-import CheckIcon from '@material-ui/icons/Check';
+import { useTheme } from '@mui/styles';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import Popper from '@mui/material/Popper';
+import MenuItem from '@mui/material/MenuItem';
+import MenuList from '@mui/material/MenuList';
+import Box from '@mui/material/Box';
+import CheckIcon from '@mui/icons-material/Check';
 
 import { getColor, getBackground } from '../Util';
 
@@ -44,14 +46,16 @@ function LocaleSelector(props) {
   return (
     <Div component="div" dark={dark} theme={theme} {...rest}>
       <ButtonComponent ref={anchorEl} className="trigger" onClick={() => setOpen(!open)}>
-        <img src={dark ? globeDark : globeLight} className="trigger-image" alt="globe" />
-        {showText ? (
-          <Typography component="strong" className="trigger-text">
-            {languages.find(x => x.value === locale).text}
-          </Typography>
-        ) : (
-          ''
-        )}
+        <Box display="flex" alignItems="center">
+          <img src={dark ? globeDark : globeLight} className="trigger-image" alt="globe" />
+          {showText ? (
+            <Typography component="strong" className="trigger-text">
+              {languages.find(x => x.value === locale).text}
+            </Typography>
+          ) : (
+            ''
+          )}
+        </Box>
       </ButtonComponent>
       <Popper open={open} anchorEl={anchorEl.current} {...popperProps} disablePortal>
         <div className="locales">
@@ -105,6 +109,7 @@ const Div = styled.div`
     .trigger-text {
       margin-left: 5px;
       font-size: 14px;
+      color: ${props => getColor(props)};
     }
   }
 

package/src/NFTDisplay/broken.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import BrokenImage from '@material-ui/icons/BrokenImage';
+import BrokenImage from '@mui/icons-material/BrokenImage';
 
 export default function Broken() {
   return <Root className="nft-display__broken" />;

package/src/NavMenu/nav-menu.js

@@ -1,7 +1,7 @@
 import React, { createContext, useContext, useMemo, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { HorizontalStyle, InlineStyle } from './style';
 
 const NavMenuContext = createContext();

package/src/PageScroller/index.js

@@ -220,8 +220,10 @@ const PageScroller = ({
     pageContainer.current.addEventListener(Events.TOUCHMOVE, touchMove);
     pageContainer.current.addEventListener(Events.KEYDOWN, keyPress);
     return () => {
-      pageContainer.current.removeEventListener(Events.TOUCHMOVE, touchMove);
-      pageContainer.current.removeEventListener(Events.KEYDOWN, keyPress);
+      if (pageContainer.current?.removeEventListener) {
+        pageContainer.current.removeEventListener(Events.TOUCHMOVE, touchMove);
+        pageContainer.current.removeEventListener(Events.KEYDOWN, keyPress);
+      }
     };
   }, [touchMove, keyPress]);
 

package/src/PricingTable/PricingPlan.js

@@ -2,10 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-import Card from '@material-ui/core/Card';
-import Button from '@material-ui/core/Button';
-import CardContent from '@material-ui/core/CardContent';
-import Typography from '@material-ui/core/Typography';
+import Card from '@mui/material/Card';
+import Button from '@mui/material/Button';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
 
 const PricingPlan = ({ plan }) => (
   <PlanCard shadow>

package/src/PricingTable/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import Grid from '@material-ui/core/Grid';
+import Grid from '@mui/material/Grid';
 
 import PricingPlan from './PricingPlan';
 
@@ -9,7 +9,7 @@ const PricingTable = ({ plans }) => {
   if (plans && plans.length > 0) {
     return (
       <Div variant="even">
-        <Grid container spacing={2} justify="center">
+        <Grid container spacing={2} justifyContent="center">
           {plans.map(x => (
             <Grid item className="plan-item" key={x.id} xs={12} sm={6} md={3}>
               <PricingPlan plan={x} />

package/src/Result/common.js

@@ -1,9 +1,9 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable no-param-reassign */
 import React from 'react';
-import useTheme from '@material-ui/core/styles/useTheme';
-import InfoIcon from '@material-ui/icons/Info';
-import CancelRoundedIcon from '@material-ui/icons/CancelRounded';
+import useTheme from '@mui/styles/useTheme';
+import InfoIcon from '@mui/icons-material/Info';
+import CancelRoundedIcon from '@mui/icons-material/CancelRounded';
 import Result from './result';
 import translations from './translations';
 import { useLocaleContext } from '../Locale/context';

package/src/Result/index.js

@@ -26,11 +26,9 @@ const ResultWrapper = ({ status, ...rest }) => {
 ResultWrapper.propTypes = {
   status: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   ...Result.propTypes,
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
 };
 ResultWrapper.defaultProps = {
   status: '',
-  title: '',
 };
 
 export default ResultWrapper;

package/src/Result/result.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import Box from '@material-ui/core/Box';
+import Box from '@mui/material/Box';
 
 const Result = ({ icon, title, description, extra, ...rest }) => {
   return (
@@ -30,13 +30,14 @@ const Result = ({ icon, title, description, extra, ...rest }) => {
 
 Result.propTypes = {
   icon: PropTypes.element,
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   description: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   actions: PropTypes.any,
   extra: PropTypes.element,
 };
 Result.defaultProps = {
   icon: undefined,
+  title: '',
   description: '',
   actions: null,
   extra: undefined,

package/src/Spinner/index.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import CircularProgress from '@mui/material/CircularProgress';
 
 /**
  * Spinner
  *
- * 之前的 Spinner 实现由内外 2 个环构成, 现在改为基于 @material-ui/core/CircularProgress 的实现
+ * 之前的 Spinner 实现由内外 2 个环构成, 现在改为基于 @mui/material/CircularProgress 的实现
  *
  * - 之前 size prop 是 array 类型, 需要与 CircularProgress#size 兼容
  * - color 默认使用 #4598fa, 如果调用方传入了 color prop 或 style#color, 则默认 color 被覆盖

package/src/SplitButton/index.js

@@ -1,13 +1,13 @@
 import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import ExpandMore from '@material-ui/icons/ExpandMore';
-import Popper from '@material-ui/core/Popper';
-import Paper from '@material-ui/core/Paper';
-import ClickAwayListener from '@material-ui/core/ClickAwayListener';
-import MenuList from '@material-ui/core/MenuList';
-import MenuItem from '@material-ui/core/MenuItem';
-import ButtonGroup from '@material-ui/core/ButtonGroup';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+import Popper from '@mui/material/Popper';
+import Paper from '@mui/material/Paper';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import ButtonGroup from '@mui/material/ButtonGroup';
 import Button from '../Button';
 
 export default function SplitButton({
@@ -72,7 +72,7 @@ export default function SplitButton({
 
 SplitButton.propTypes = {
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-  color: PropTypes.oneOf(['default', 'primary', 'secondary', 'inherit']),
+  color: PropTypes.oneOf(['primary', 'secondary', 'inherit']),
   menu: PropTypes.oneOfType([PropTypes.node, PropTypes.array]),
   // 也可以是用于渲染主按钮的 function
   children: PropTypes.any,

package/src/Switch/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import MuiSwitch from '@material-ui/core/Switch';
+import { withStyles } from '@mui/styles';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import MuiSwitch from '@mui/material/Switch';
 
 // 参考: https://v4.mui.com/components/switches/
 const IOSSwitch = withStyles(theme => ({

package/src/Tabs/index.js

@@ -1,12 +1,20 @@
 import React from 'react';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core';
-import MuiTabs from '@material-ui/core/Tabs';
-import MuiTab from '@material-ui/core/Tab';
+import MuiTabs from '@mui/material/Tabs';
+import MuiTab from '@mui/material/Tab';
 
-const useStyles = makeStyles(theme => ({
-  tabs: {},
-  tab: {
+const PREFIX = 'index';
+
+const classes = {
+  tabs: `${PREFIX}-tabs`,
+  tab: `${PREFIX}-tab`,
+};
+
+const StyledMuiTabs = styled(MuiTabs)(({ theme }) => ({
+  [`& .${classes.tabs}`]: {},
+
+  [`& .${classes.tab}`]: {
     fontSize: '0.875rem',
     [theme.breakpoints.up('md')]: {
       fontSize: '1rem',
@@ -15,10 +23,8 @@ const useStyles = makeStyles(theme => ({
 }));
 
 export default function Tabs({ tabs, current, onChange, ...rest }) {
-  const classes = useStyles();
-
   return (
-    <MuiTabs
+    <StyledMuiTabs
       scrollButtons="on"
       variant="scrollable"
       value={current}
@@ -35,7 +41,7 @@ export default function Tabs({ tabs, current, onChange, ...rest }) {
           icon={x.icon || null}
         />
       ))}
-    </MuiTabs>
+    </StyledMuiTabs>
   );
 }
 

package/src/Tag/index.js

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-import Typography from '@material-ui/core/Typography';
-import useTheme from '@material-ui/core/styles/useTheme';
+import Typography from '@mui/material/Typography';
+import useTheme from '@mui/styles/useTheme';
 
 import { mergeProps } from '../Util';
 import colors from '../Colors';

package/src/TextCollapse/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import styled from 'styled-components';
 
 export default function TextCollapse({

package/src/Theme/index.js

@@ -1,10 +1,11 @@
 // https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
-import { createTheme } from '@material-ui/core/styles';
+import { createTheme, responsiveFontSizes } from '@mui/material/styles';
 import '@fontsource/lato/400.css';
 import '@fontsource/lato/700.css';
-import responsiveFontSizes from './responsiveFontSizes';
 import colors from '../Colors';
 
+const muiDarkTheme = createTheme({ palette: { mode: 'dark' } });
+
 // https://material-ui.com/customization/default-theme/
 // eslint-disable-next-line import/prefer-default-export
 export const create = ({
@@ -15,19 +16,37 @@ export const create = ({
   overrides,
   ...rest
 } = {}) => {
+  // palette 考虑 light & dark mode, dark mode 需要持续完善
+  // - 能配合 ColorModeContext 使用
+  // - 为 dark mode 系统的设计整个 palette, 不要单个 color 设置
+  const _palette =
+    mode === 'light'
+      ? Object.assign(
+          {
+            ...colors,
+            background: {
+              paper: colors.common.white,
+              default: colors.background.default,
+            },
+            mode,
+          },
+          palette || {}
+        )
+      : Object.assign(
+          {
+            ...muiDarkTheme.palette,
+            background: {
+              paper: colors.grey[900],
+              default: colors.grey[900],
+            },
+            mode,
+          },
+          palette || {}
+        );
+
   const theme = createTheme({
     themeName: 'ArcBlock',
-    palette: Object.assign(
-      {
-        ...colors,
-        background: {
-          paper: mode === 'light' ? colors.common.white : colors.grey[900],
-          default: mode === 'light' ? colors.background.default : colors.grey[900],
-        },
-        type: mode,
-      },
-      palette || {}
-    ),
+    palette: _palette,
     typography: Object.assign(
       {
         useNextVariants: true,
@@ -65,29 +84,23 @@ export const create = ({
       },
       typography || {}
     ),
-    overrides: Object.assign(
-      {
-        MuiButton: {
+    components: {
+      MuiButton: {
+        styleOverrides: {
           root: {
             boxShadow: 'none',
           },
         },
-        MuiButtonGroup: {
-          contained: {
-            boxShadow: 'none',
-          },
-        },
-        MuiAppBar: {
-          root: {
-            height: 80,
-          },
-        },
-        MuiToolbar: {
+      },
+      MuiButtonGroup: {
+        styleOverrides: {
           root: {
-            background: mode === 'light' ? colors.background.default : colors.grey[900],
+            boxShadow: 'none',
           },
         },
-        MuiTableCell: {
+      },
+      MuiTableCell: {
+        styleOverrides: {
           root: {
             borderBottomWidth: '0',
             paddingTop: '14px',
@@ -103,35 +116,9 @@ export const create = ({
             color: mode === 'light' ? colors.grey[900] : colors.grey[300],
           },
         },
-        MuiChip: {
-          root: {
-            padding: '3px',
-            height: '24px',
-            fontSize: '12px',
-            marginRight: '10px',
-          },
-          label: {
-            paddingLeft: '5px',
-            paddingRight: '5px',
-            marginRight: '5px',
-          },
-        },
-        MuiTooltip: {
-          tooltip: {
-            fontSize: '14px',
-          },
-        },
-        MuiTypography: {
-          body1: {
-            color: mode === 'light' ? colors.grey[900] : colors.grey[300],
-          },
-          body2: {
-            color: mode === 'light' ? colors.grey[900] : colors.grey[300],
-          },
-        },
       },
-      overrides || {}
-    ),
+      ...overrides,
+    },
     pageWidth,
     // TODO: 过时的 colors, 需要各项目负责人检查项目中是否使用 "theme.colors", 如果有需要清除,
     //       可以从 Colors 模块/theme.palette/mui colors 中取值

package/src/Toast/index.js

@@ -1,16 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import CheckCircleIcon from '@material-ui/icons/CheckCircle';
-import ErrorIcon from '@material-ui/icons/Error';
-import InfoIcon from '@material-ui/icons/Info';
-import CloseIcon from '@material-ui/icons/Close';
-import WarningIcon from '@material-ui/icons/Warning';
-import IconButton from '@material-ui/core/IconButton';
-import Snackbar from '@material-ui/core/Snackbar';
-import SnackbarContent from '@material-ui/core/SnackbarContent';
-import { amber, green } from '@material-ui/core/colors';
-import { makeStyles } from '@material-ui/core/styles';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import ErrorIcon from '@mui/icons-material/Error';
+import InfoIcon from '@mui/icons-material/Info';
+import CloseIcon from '@mui/icons-material/Close';
+import WarningIcon from '@mui/icons-material/Warning';
+import IconButton from '@mui/material/IconButton';
+import Snackbar from '@mui/material/Snackbar';
+import SnackbarContent from '@mui/material/SnackbarContent';
+import { amber, green } from '@mui/material/colors';
+import { makeStyles } from '@mui/styles';
 
 const variantIcon = {
   success: CheckCircleIcon,
@@ -60,7 +60,7 @@ function SnackbarContentWrapper(props) {
         </span>
       }
       action={[
-        <IconButton key="close" aria-label="close" color="inherit" onClick={onClose}>
+        <IconButton key="close" aria-label="close" color="inherit" onClick={onClose} size="large">
           <CloseIcon className={classes.icon} />
         </IconButton>,
       ]}

package/src/Video/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Player from 'react-player';
 import styled from 'styled-components';
 
-import CircularProgress from '@material-ui/core/CircularProgress';
+import CircularProgress from '@mui/material/CircularProgress';
 
 import { mergeProps } from '../Util';
 

package/src/Wallet/Action.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 
 import logo from './images/abtwallet.png';
 import { mergeProps } from '../Util';

package/src/Wallet/Download.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
 
 import { ReactComponent as AppStoreIcon } from './images/app-store.svg';