@arcblock/ux 1.17.21 → 2.0.0

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