@arcblock/ux 2.4.1 → 2.4.4

package/src/NFTDisplay/index.js

@@ -1,18 +1,19 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { useRef, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 import clsx from 'clsx';
 import { Buffer } from 'buffer';
 import get from 'lodash/get';
 import pako from 'pako';
 import base64 from 'base64-url';
 import isSvg from 'is-svg';
+
 import AspectRatioContainer from './aspect-ratio-container';
 import ImgSvgEmbedder from './svg-embedder/img';
 import InlineSvgEmbedder from './svg-embedder/inline-svg';
 import DefaultLoading from './loading';
 import DefaultBrokenImage from './broken';
+import { styled } from '../Theme';
 
 /**
  * 从 assetState 中获取 nft data, 兼容新旧两种类型的数据结构, 建议将该方法的返回值传入 NFTDisplay 组件的 data prop
@@ -220,7 +221,7 @@ NFTDisplay.defaultProps = {
   onCompleted: () => {},
 };
 
-const Root = styled.div`
+const Root = styled('div')`
   display: flex;
   justify-content: center;
   align-items: center;

package/src/NFTDisplay/loading.js

@@ -1,10 +1,10 @@
-import styled from '@emotion/styled';
+import { styled } from '../Theme';
 
 export default function Loading() {
   return <Root className="nft-display__loading">loading...</Root>;
 }
 
-const Root = styled.span`
+const Root = styled('span')`
   display: flex;
   justify-content: center;
   align-items: center;

package/src/NFTDisplay/svg-embedder/inline-svg.js

@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 import root from 'react-shadow/emotion';
 
+import { styled } from '../../Theme';
+
 /**
  * inline svg 的方式嵌入 svg, 使用 shadow DOM 避免样式污染
  */
@@ -23,7 +24,7 @@ const Root = styled(root.span)`
   height: 100%;
 `;
 
-const Inner = styled.div`
+const Inner = styled('div')`
   &,
   & > svg {
     height: 100%;

package/src/NavMenu/style.js

@@ -1,6 +1,6 @@
-import styled from '@emotion/styled';
+import { styled } from '../Theme';
 
-const NavMenuBase = styled.nav`
+const NavMenuBase = styled('nav')`
   background-color: ${(props) => props.$bgColor};
   font-size: 16px;
   ul {

package/src/PricingTable/PricingPlan.js

@@ -1,11 +1,11 @@
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-
 import Card from '@mui/material/Card';
 import Button from '@mui/material/Button';
 import CardContent from '@mui/material/CardContent';
 import Typography from '@mui/material/Typography';
 
+import { styled } from '../Theme';
+
 function PricingPlan({ plan }) {
   return (
     <PlanCard $shadow>

package/src/PricingTable/index.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 import Grid from '@mui/material/Grid';
 
 import PricingPlan from './PricingPlan';
+import { styled } from '../Theme';
 
 function PricingTable({ plans }) {
   if (plans && plans.length > 0) {
@@ -28,7 +28,7 @@ PricingTable.propTypes = {
   plans: PropTypes.array.isRequired,
 };
 
-const Div = styled.div`
+const Div = styled('div')`
   padding: 100px 0;
   text-align: center;
   background-color: ${(props) => (props.variant === 'even' ? '#fbfbfb' : '#ffffff')};

package/src/Result/common.js

@@ -1,11 +1,11 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable no-param-reassign */
-import { useTheme } from '@mui/material/styles';
 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';
+import { useTheme } from '../Theme';
 
 // 优先使用显式指定的 locale, 再尝试使用 context 中的 locale, 最后使用默认 'en'
 const useLocale = (locale) => {

package/src/Result/result.js

@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 import Box from '@mui/material/Box';
 
+import { styled } from '../Theme';
+
 function Result({ icon, title, description, extra, ...rest }) {
   return (
     <Root {...rest}>
@@ -42,7 +43,7 @@ Result.defaultProps = {
   extra: undefined,
 };
 
-const Root = styled.div`
+const Root = styled('div')`
   box-sizing: border-box;
   display: flex;
   flex-direction: column;

package/src/Screenshot/BaseScreenshot/index.jsx

@@ -0,0 +1,77 @@
+import { styled } from '@arcblock/ux/lib/Theme';
+import PropTypes from 'prop-types';
+
+import phone from './shells/Phone';
+
+const map = {
+  phone,
+};
+
+function Screenshot({ width, children, type, sx, ...rest }) {
+  const _type = type.toLowerCase();
+
+  const { Shell, ratio, screenData, width: defaultWidth } = map[_type || 'phone'];
+
+  const Root = styled('div')`
+    position: relative;
+    display: inline-block;
+    width: ${width || `${defaultWidth}px`};
+    &:after {
+      display: block;
+      content: '';
+      padding-bottom: ${ratio * 100}%;
+    }
+    > svg {
+      display: block;
+    }
+
+    .screenshot--container {
+      position: absolute;
+      left: ${screenData.x * 100}%;
+      top: ${screenData.y * 100}%;
+      width: ${screenData.width * 100}%;
+      height: ${screenData.height * 100}%;
+      ${screenData.radius ? `border-radius: ${screenData.radius}` : ''};
+      background-color: #fff;
+      overflow: hidden;
+      > img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        min-width: 100%;
+        min-height: 100%;
+      }
+    }
+
+    .absolute-size {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+    }
+  `;
+
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center' }}>
+      <Root {...rest}>
+        <Shell className="absolute-size" />
+        <div className="screenshot--container">{children}</div>
+      </Root>
+    </div>
+  );
+}
+
+Screenshot.propTypes = {
+  width: PropTypes.number,
+  type: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  sx: PropTypes.object,
+};
+Screenshot.defaultProps = {
+  width: 0,
+  type: 'phone',
+  sx: {},
+};
+
+export default Screenshot;

package/src/Screenshot/BaseScreenshot/shells/Phone.jsx

@@ -0,0 +1,33 @@
+export const width = 268;
+export const height = 554;
+
+export function Shell({ ...rest }) {
+  return (
+    <svg width="268" height="554" viewBox="0 0 268 554" fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
+      <path
+        d="M37 7.5H230.929C247.222 7.5 260.429 20.7076 260.429 37V517C260.429 533.292 247.222 546.5 230.929 546.5H37C20.7076 546.5 7.5 533.292 7.5 517V37C7.5 20.7076 20.7076 7.5 37 7.5Z"
+        fill="#2F2F2F"
+        stroke="#2F2F2F"
+        strokeWidth="15"
+      />
+    </svg>
+  );
+}
+
+export const ratio = 798 / 386;
+
+export const screenData = {
+  x: 15 / 384,
+  y: 15 / 794,
+  width: 354 / 384,
+  height: 764 / 794,
+  radius: '10% / 5%',
+};
+
+export default {
+  Shell,
+  ratio,
+  screenData,
+  width,
+  height,
+};

package/src/Screenshot/index.js

@@ -1,8 +1,9 @@
-import { createElement, Children, cloneElement } from 'react';
+import { createElement, Children, cloneElement, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 
 import { mergeProps } from '../Util';
+import { styled } from '../Theme';
+import BaseScreenshot from './BaseScreenshot';
 
 import './devices.css';
 
@@ -116,8 +117,8 @@ const findChildren = (children, returnArgWhenNotFound = true) => {
 // This component is built upon the awesome device.css lib
 // By default it will find and only render img/video tags in the children
 // If neither of them are found, the whole child tree is rendered
-function Screenshot(props) {
-  const newProps = mergeProps(props, Screenshot, ['style', 'width', 'height']);
+function OldScreenshot(props) {
+  const newProps = mergeProps(props, OldScreenshot, ['style', 'width', 'height']);
   const { type, children, style, className, width, height, ...rest } = newProps;
   const { zIndex = 0, borderRadius = 0 } = types[type] || {};
 
@@ -144,7 +145,7 @@ function Screenshot(props) {
   );
 }
 
-const Div = styled.div`
+const Div = styled('div')`
   @media (max-width: ${(props) => types[props.type].width}px) {
     transform-origin: 0 0;
     transform: scale(${(props) => types[props.type].scale});
@@ -164,7 +165,7 @@ const Div = styled.div`
   }
 `;
 
-Screenshot.propTypes = {
+OldScreenshot.propTypes = {
   type: PropTypes.oneOf(Object.keys(types)),
   children: PropTypes.any.isRequired,
   className: PropTypes.string,
@@ -173,7 +174,7 @@ Screenshot.propTypes = {
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
 };
 
-Screenshot.defaultProps = {
+OldScreenshot.defaultProps = {
   type: 'iphone-x',
   className: '',
   style: '{}',
@@ -181,4 +182,95 @@ Screenshot.defaultProps = {
   height: 0,
 };
 
+/**
+ * 用于修正旧版 Screenshot 无法匹配尺寸的问题
+ * @param {*} props params to OldScreenshot
+ * @returns <OldScreenshot />
+ */
+function ScreenFixer(props) {
+  const screenEl = useRef(null);
+  const [height, setHeight] = useState(undefined);
+  const [scale, setScale] = useState(null);
+
+  useEffect(() => {
+    let resizeObs;
+
+    const fixSize = () => {
+      const { clientWidth } = screenEl.current;
+
+      // 获取内部元素的宽高
+      const { clientWidth: targetWidth, clientHeight: targetHeight } = screenEl.current.children[0];
+
+      const realScale = clientWidth / targetWidth;
+      if (realScale < 1) {
+        setScale(realScale);
+        setHeight(realScale * targetHeight);
+      } else {
+        setScale(null);
+        setHeight(undefined);
+      }
+    };
+
+    if (screenEl.current) {
+      resizeObs = new ResizeObserver(fixSize);
+      resizeObs.observe(screenEl.current);
+    }
+
+    return () => {
+      if (resizeObs) {
+        resizeObs.disconnect();
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [screenEl.current]);
+
+  return (
+    <ReScreen ref={screenEl} style={{ height }}>
+      <OldScreenshot {...props} style={{ transform: scale ? `scale(${scale})` : undefined }} />
+    </ReScreen>
+  );
+}
+
+const ReScreen = styled('div')`
+  div[type] {
+    transform: scale(1);
+    transform-origin: 0 0;
+  }
+`;
+
+function Screenshot({ type, src, children, style, sx, ...rest }) {
+  const _type = type.toLowerCase();
+
+  // 新版采用容器采用BaseScreenshot，svg集成，更容易拓展，响应式更好
+  if (['phone'].includes(_type)) {
+    return (
+      <BaseScreenshot type={_type} sx={{ ...sx, ...style }} {...rest}>
+        {children || (src ? <img src={src} alt="screenshot" /> : null)}
+      </BaseScreenshot>
+    );
+  }
+
+  // 旧版采用纯css制作，定制性欠缺，暂时保留使用
+  return (
+    <ScreenFixer type={type} {...rest} sx={{ ...sx, ...style, margin: 'auto' }}>
+      {children || (src ? <img src={src} alt="screenshot" /> : null)}
+    </ScreenFixer>
+  );
+}
+
+Screenshot.propTypes = {
+  type: PropTypes.string.isRequired,
+  src: PropTypes.string,
+  style: PropTypes.object,
+  sx: PropTypes.object,
+  children: PropTypes.any,
+};
+
+Screenshot.defaultProps = {
+  src: '',
+  children: null,
+  style: {},
+  sx: {},
+};
+
 export default Screenshot;

package/src/SplitButton/index.js

@@ -1,6 +1,5 @@
 import { useState, useRef, isValidElement } from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import Popper from '@mui/material/Popper';
 import Paper from '@mui/material/Paper';
@@ -10,6 +9,8 @@ import MenuItem from '@mui/material/MenuItem';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import Button from '@mui/material/Button';
 
+import { styled } from '../Theme';
+
 /**
  * SplitButton allows the user to execute a default action which is bound to a Button or to choose a predefined action from a drop-down list.
  */

package/src/Switch/index.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import MuiSwitch from '@mui/material/Switch';
+import { styled } from '../Theme';
 
 // 参考: https://mui.com/material-ui/react-switch/#customization
 const IOSSwitch = styled((props) => <MuiSwitch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />)(

package/src/Tabs/index.js

@@ -1,7 +1,7 @@
-import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import MuiTabs from '@mui/material/Tabs';
 import MuiTab from '@mui/material/Tab';
+import { styled } from '../Theme';
 
 const PREFIX = 'index';
 

package/src/Tag/index.js

@@ -1,12 +1,10 @@
 import { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-
 import Typography from '@mui/material/Typography';
-import { useTheme } from '@mui/material/styles';
 
 import { mergeProps } from '../Util';
 import colors from '../Colors';
+import { useTheme, styled } from '../Theme';
 
 const types = {
   error: {

package/src/TextCollapse/index.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
-
 import Typography from '@mui/material/Typography';
-import styled from '@emotion/styled';
+
+import { styled } from '../Theme';
 
 export default function TextCollapse({
   children,

package/src/Theme/index.js

@@ -1,2 +1,3 @@
 export * from './theme';
+export { styled, useTheme } from '@mui/material/styles';
 export { default as ThemeProvider } from './theme-provider';

package/src/Theme/theme-provider.js

@@ -1,11 +1,10 @@
 import PropTypes from 'prop-types';
-import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
 import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
 import StyledEngineProvider from '@mui/material/StyledEngineProvider';
 import CssBaseline from '@mui/material/CssBaseline';
-import { create } from './theme';
+import { createTheme } from './theme';
 
-const defaultTheme = create();
+const defaultTheme = createTheme();
 
 /**
  * 默认的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider
@@ -15,10 +14,8 @@ export default function ThemeProvider({ children, theme, injectFirst }) {
     // injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
     <StyledEngineProvider injectFirst={injectFirst}>
       <MuiThemeProvider theme={theme}>
-        <EmotionThemeProvider theme={theme}>
-          <CssBaseline />
-          {children}
-        </EmotionThemeProvider>
+        <CssBaseline />
+        {children}
       </MuiThemeProvider>
     </StyledEngineProvider>
   );

package/src/Theme/theme.js

@@ -1,10 +1,10 @@
 // https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
-import { createTheme, responsiveFontSizes } from '@mui/material/styles';
+import { createTheme as _createTheme, responsiveFontSizes } from '@mui/material/styles';
 import '@fontsource/lato/400.css';
 import '@fontsource/lato/700.css';
 import colors from '../Colors';
 
-const muiDarkTheme = createTheme({ palette: { mode: 'dark' } });
+const muiDarkTheme = _createTheme({ palette: { mode: 'dark' } });
 
 // https://material-ui.com/customization/default-theme/
 // eslint-disable-next-line import/prefer-default-export
@@ -37,7 +37,7 @@ export const create = ({ mode = 'light', pageWidth = 'md', palette, typography,
           palette || {}
         );
 
-  const theme = createTheme({
+  const theme = _createTheme({
     themeName: 'ArcBlock',
     palette: _palette,
     typography: Object.assign(
@@ -162,3 +162,5 @@ export const create = ({ mode = 'light', pageWidth = 'md', palette, typography,
 
   return enhanced;
 };
+
+export const createTheme = create;

package/src/Video/index.js

@@ -1,11 +1,10 @@
 import { useState } from 'react';
 import PropTypes from 'prop-types';
 import Player from 'react-player';
-import styled from '@emotion/styled';
-
 import CircularProgress from '@mui/material/CircularProgress';
 
 import { mergeProps } from '../Util';
+import { styled } from '../Theme';
 
 const { string, number, array, oneOfType, object } = PropTypes;
 
@@ -50,7 +49,7 @@ Video.defaultProps = {
   style: {},
 };
 
-const Placeholder = styled.div`
+const Placeholder = styled('div')`
   background-color: #222222;
   display: flex;
   justify-content: center;

package/src/Wallet/Action.js

@@ -1,12 +1,11 @@
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-
 import Typography from '@mui/material/Typography';
 
 import logo from './images/abtwallet.png';
 import { mergeProps } from '../Util';
 import colors from '../Colors';
 import Button from '../Button';
+import { styled } from '../Theme';
 
 export default function WalletAction(props) {
   const newProps = mergeProps(props, WalletAction, ['style']);
@@ -62,7 +61,7 @@ const sizes = {
   },
 };
 
-const Content = styled.div`
+const Content = styled('div')`
   display: flex;
   justify-content: center;
   align-items: center;

package/src/Wallet/Download.js

@@ -1,6 +1,4 @@
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-
 import Typography from '@mui/material/Typography';
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
 
@@ -10,6 +8,7 @@ import { ReactComponent as AndroidDownloadIcon } from './images/android_download
 
 import Button from '../Button';
 import { mergeProps } from '../Util';
+import { styled } from '../Theme';
 
 export default function WalletDownload(props) {
   const browser = useBrowser();
@@ -97,7 +96,7 @@ WalletDownload.defaultProps = {
   locale: 'zh',
 };
 
-const Container = styled.div`
+const Container = styled('div')`
   display: flex;
   flex-direction: ${(props) => (props.layout === 'vertical' ? 'column' : 'row')};
   align-items: center;

package/src/Wallet/Open.js

@@ -1,8 +1,9 @@
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
 import Fab from '@mui/material/Fab';
 
+import { styled } from '../Theme';
+
 export default function OpenInWallet({ locale, link }) {
   const buttonText = locale === 'zh' ? '在 DID 钱包打开' : 'Open in DID Wallet';
   const browser = useBrowser();

package/src/WechatPrompt/index.js

@@ -1,11 +1,10 @@
-import styled from '@emotion/styled';
-
 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';
 import AndroidImage from './images/android.png';
+import { styled } from '../Theme';
 
 export default function WechatPrompt() {
   const browser = useBrowser();
@@ -45,7 +44,7 @@ export default function WechatPrompt() {
   );
 }
 
-const Container = styled.div`
+const Container = styled('div')`
   .wechat-title {
     height: 80px;
     line-height: 80px;