@arcblock/ux 1.17.21 → 2.0.2

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';

package/src/Wallet/Open.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
-import Fab from '@material-ui/core/Fab';
+import Fab from '@mui/material/Fab';
 
 export default function OpenInWallet({ locale, link }) {
   const buttonText = locale === 'zh' ? '在 ABT 钱包打开' : 'Open in DID Wallet';

package/src/WechatPrompt/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import Typography from '@material-ui/core/Typography';
-import Dialog from '@material-ui/core/Dialog';
+import Typography from '@mui/material/Typography';
+import Dialog from '@mui/material/Dialog';
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
 
 import IosImage from './images/ios.png';

package/src/withTheme/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ThemeProvider, createGlobalStyle } from 'styled-components';
-import { MuiThemeProvider } from '@material-ui/core/styles';
-import CssBaseline from '@material-ui/core/CssBaseline';
+import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
 
 import { create } from '../Theme';
 

package/lib/Theme/responsiveFontSizes.js

@@ -1,83 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = responsiveFontSizes;
-
-var _cssUtils = require("@material-ui/core/styles/cssUtils");
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function responsiveFontSizes(themeInput) {
-  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const {
-    breakpoints = ['sm', 'md', 'lg'],
-    disableAlign = false,
-    factor = 3,
-    maxSize = 2.5,
-    // minSize = 0.8,
-    variants = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline']
-  } = options;
-
-  const theme = _objectSpread({}, themeInput);
-
-  theme.typography = _objectSpread({}, theme.typography);
-  const {
-    typography
-  } = theme; // Convert between css lengths e.g. em->px or px->rem
-  // Set the baseFontSize for your project. Defaults to 16px (also the browser default).
-
-  const convert = (0, _cssUtils.convertLength)(typography.htmlFontSize);
-  const breakpointValues = breakpoints.map(x => theme.breakpoints.values[x]);
-  variants.forEach(variant => {
-    const style = typography[variant];
-    const remFontSize = parseFloat(convert(style.fontSize, 'rem'));
-
-    if (remFontSize <= 1) {
-      return;
-    }
-
-    const maxFontSize = Math.min(remFontSize, maxSize);
-    const minFontSize = 1 + (maxFontSize - 1) / factor;
-    let {
-      lineHeight
-    } = style;
-
-    if (!(0, _cssUtils.isUnitless)(lineHeight) && !disableAlign) {
-      throw new Error(['Material-UI: unsupported non-unitless line height with grid alignment.', 'Use unitless line heights instead.'].join('\n'));
-    }
-
-    if (!(0, _cssUtils.isUnitless)(lineHeight)) {
-      // make it unitless
-      lineHeight = parseFloat(convert(lineHeight, 'rem')) / parseFloat(remFontSize);
-    }
-
-    let transform = null;
-
-    if (!disableAlign) {
-      transform = value => (0, _cssUtils.alignProperty)({
-        size: value,
-        grid: (0, _cssUtils.fontGrid)({
-          pixels: 4,
-          lineHeight,
-          htmlFontSize: typography.htmlFontSize
-        })
-      });
-    }
-
-    typography[variant] = _objectSpread(_objectSpread({}, style), (0, _cssUtils.responsiveProperty)({
-      cssProperty: 'fontSize',
-      min: minFontSize,
-      max: maxFontSize,
-      unit: 'rem',
-      breakpoints: breakpointValues,
-      transform
-    }));
-  });
-  return theme;
-}

package/src/Theme/responsiveFontSizes.js

@@ -1,94 +0,0 @@
-// https://github.com/mui-org/material-ui/blob/f2d74e9144ffec1ba6a098528573c7dfb3957b48/packages/material-ui/src/styles/responsiveFontSizes.js
-import {
-  isUnitless,
-  convertLength,
-  responsiveProperty,
-  alignProperty,
-  fontGrid,
-} from '@material-ui/core/styles/cssUtils';
-
-export default function responsiveFontSizes(themeInput, options = {}) {
-  const {
-    breakpoints = ['sm', 'md', 'lg'],
-    disableAlign = false,
-    factor = 3,
-    maxSize = 2.5,
-    // minSize = 0.8,
-    variants = [
-      'h1',
-      'h2',
-      'h3',
-      'h4',
-      'h5',
-      'h6',
-      'subtitle1',
-      'subtitle2',
-      'body1',
-      'body2',
-      'caption',
-      'button',
-      'overline',
-    ],
-  } = options;
-
-  const theme = { ...themeInput };
-  theme.typography = { ...theme.typography };
-  const { typography } = theme;
-
-  // Convert between css lengths e.g. em->px or px->rem
-  // Set the baseFontSize for your project. Defaults to 16px (also the browser default).
-  const convert = convertLength(typography.htmlFontSize);
-  const breakpointValues = breakpoints.map(x => theme.breakpoints.values[x]);
-
-  variants.forEach(variant => {
-    const style = typography[variant];
-    const remFontSize = parseFloat(convert(style.fontSize, 'rem'));
-
-    if (remFontSize <= 1) {
-      return;
-    }
-
-    const maxFontSize = Math.min(remFontSize, maxSize);
-    const minFontSize = 1 + (maxFontSize - 1) / factor;
-
-    let { lineHeight } = style;
-
-    if (!isUnitless(lineHeight) && !disableAlign) {
-      throw new Error(
-        [
-          'Material-UI: unsupported non-unitless line height with grid alignment.',
-          'Use unitless line heights instead.',
-        ].join('\n')
-      );
-    }
-
-    if (!isUnitless(lineHeight)) {
-      // make it unitless
-      lineHeight = parseFloat(convert(lineHeight, 'rem')) / parseFloat(remFontSize);
-    }
-
-    let transform = null;
-
-    if (!disableAlign) {
-      transform = value =>
-        alignProperty({
-          size: value,
-          grid: fontGrid({ pixels: 4, lineHeight, htmlFontSize: typography.htmlFontSize }),
-        });
-    }
-
-    typography[variant] = {
-      ...style,
-      ...responsiveProperty({
-        cssProperty: 'fontSize',
-        min: minFontSize,
-        max: maxFontSize,
-        unit: 'rem',
-        breakpoints: breakpointValues,
-        transform,
-      }),
-    };
-  });
-
-  return theme;
-}