@arcblock/ux 2.2.3 → 2.4.0

package/src/Layout/dashboard/index.js

@@ -1,17 +1,19 @@
 import { useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { withRouter, Link, useLocation, matchPath } from 'react-router-dom';
+import { useLocation, matchPath } from 'react-router-dom';
 import Helmet from 'react-helmet';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { useTheme } from '@mui/material/styles';
 import Container from '@mui/material/Container';
 import Hidden from '@mui/material/Hidden';
 import Box from '@mui/material/Box';
+import clsx from 'clsx';
 import DashboardLegacy from '../dashboard-legacy';
 import { ResponsiveHeader } from '../../Header';
 import NavMenu from '../../NavMenu';
 import Footer from '../../Footer';
 import Sidebar from './sidebar';
+import { Link } from './with-external-link';
 
 // 监听 location 变化并关闭 header 中的 menu (确保 drawer - disablePortal:false, keepMounted:true)
 // 直接监听 menu 中 link 点击来触发 closeMenu 会有问题 (Suspense & lazy)
@@ -25,21 +27,33 @@ function NavMenuWrapper({ closeMenu, ...rest }) {
   return <NavMenu {...rest} />;
 }
 
-function Dashboard({ children, title, headerProps, links, fullWidth, ...rest }) {
+function formatLinks(links, location) {
+  return links.map((link) => {
+    if (Array.isArray(link)) {
+      return formatLinks(link, location);
+    }
+    return {
+      ...link,
+      label: (
+        <Link external={link.external} to={link.url}>
+          {link.title}
+        </Link>
+      ),
+      active: !!matchPath({ path: link.url, end: false }, location.pathname),
+    };
+  });
+}
+
+function Dashboard({ children, title, headerProps, links, fullWidth, dense, ...rest }) {
   const theme = useTheme();
   const location = useLocation();
-  const navItems = useMemo(
-    () =>
-      links.map((link) => ({
-        ...link,
-        label: <Link to={link.url}>{link.title}</Link>,
-        active: !!matchPath(location.pathname, { path: link.url, exact: false }),
-      })),
-    [location, links]
-  );
+  const navItems = useMemo(() => formatLinks(links, location), [location, links]);
+  const flattendNavItems = navItems.flat();
+  const _dense = dense === 'auto' ? flattendNavItems.length >= 8 : dense;
+  const classes = clsx('dashboard', { 'dashboard-dense': _dense }, rest.className);
 
   return (
-    <Wrapper {...rest} className={`dashboard ${rest.className}`}>
+    <Wrapper {...rest} className={classes}>
       <Helmet title={title} key={title} />
 
       <StyledUxHeader {...headerProps} $theme={theme}>
@@ -48,7 +62,7 @@ function Dashboard({ children, title, headerProps, links, fullWidth, ...rest })
             return (
               <NavMenuWrapper
                 mode="inline"
-                items={navItems}
+                items={flattendNavItems}
                 closeMenu={closeMenu}
                 bgColor="transparent"
                 activeTextColor={theme.palette.primary.main}
@@ -62,7 +76,7 @@ function Dashboard({ children, title, headerProps, links, fullWidth, ...rest })
       <Box display="flex" className="dashboard-body">
         <Hidden mdDown>
           <Box className="dashboard-sidebar">
-            <Sidebar links={links} />
+            <Sidebar links={links} dense={_dense} />
           </Box>
         </Hidden>
         <Box className="dashboard-main">
@@ -79,15 +93,21 @@ function Dashboard({ children, title, headerProps, links, fullWidth, ...rest })
 Dashboard.propTypes = {
   children: PropTypes.any.isRequired,
   title: PropTypes.string,
+  // 支持分组, links item 如果是数组, 则视为一个 group
   links: PropTypes.array.isRequired,
   headerProps: PropTypes.object,
   fullWidth: PropTypes.bool,
+  sidebarWidth: PropTypes.number,
+  // sidenav 稠密一些的布局, 纵向空间占用较少, 默认为 auto, 当 links 个数 > 8 时自动启用
+  dense: PropTypes.oneOf([true, false, 'auto']),
 };
 
 Dashboard.defaultProps = {
   title: 'Home',
   headerProps: {},
   fullWidth: false,
+  sidebarWidth: 120,
+  dense: 'auto',
 };
 
 const Wrapper = styled.div`
@@ -103,7 +123,7 @@ const Wrapper = styled.div`
   .dashboard-sidebar {
     box-sizing: border-box;
     flex: 0 0 auto;
-    width: 104px;
+    width: ${(props) => props.sidebarWidth}px;
     &:hover {
       overflow-y: auto;
     }
@@ -117,24 +137,35 @@ const Wrapper = styled.div`
   .dashboard-content {
     flex: 1;
   }
-`;
-
-const StyledUxHeader = styled(ResponsiveHeader)`
-  .header-container {
-    max-width: 100%;
+  &.dashboard-dense {
+    .dashboard-sidebar {
+      width: auto;
+    }
   }
-  ${(props) => props.$theme.breakpoints.up('md')} {
+  ${(props) => props.theme.breakpoints.up('md')} {
     .header-logo {
       display: flex;
       justify-content: center;
-      /* logo 与 sidebar 中的 icon 垂直对齐, 104 - 24 * 2 = 56 */
-      width: 56px;
+      /* logo 与 sidebar 中的 icon 垂直对齐, sidebarWidth - 24 * 2 */
+      width: ${(props) => props.sidebarWidth - 24 * 2}px;
+    }
+    &.dashboard-dense {
+      .header-logo {
+        /* dense = true 时 logo 与 sidenav icons 不需要对齐 */
+        width: auto;
+      }
     }
   }
 `;
 
+const StyledUxHeader = styled(ResponsiveHeader)`
+  .header-container {
+    max-width: 100%;
+  }
+`;
+
 // 兼容旧版 dashboard
-function DashboardWrapper({ legacy, ...rest }) {
+export default function DashboardWrapper({ legacy, ...rest }) {
   if (legacy) {
     return <DashboardLegacy {...rest} />;
   }
@@ -150,5 +181,3 @@ DashboardWrapper.defaultProps = {
   ...Dashboard.defaultProps,
   legacy: true,
 };
-
-export default withRouter(DashboardWrapper);

package/src/Layout/dashboard/sidebar.js

@@ -1,27 +1,52 @@
+/* eslint-disable react/no-array-index-key */
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
-import { NavLink } from 'react-router-dom';
 import Typography from '@mui/material/Typography';
 import { teal } from '@mui/material/colors';
+import clsx from 'clsx';
+import { NavLink } from './with-external-link';
 
-function Sidebar({ links, addons, ...rest }) {
+// 渲染 links, 为 group links 添加分隔线, 返回展平后的、包含分隔线元素的 links 数组
+function renderLinks(links) {
+  const result = [];
+  links.forEach((item, index) => {
+    const prev = links[index - 1];
+    // 当当前元素和前一个元素仅有一个为 group (array) 时, 在当前元素前面位置添加一个分隔线元素
+    if (index > 0 && ((Array.isArray(prev) && !Array.isArray(item)) || (Array.isArray(item) && !Array.isArray(prev)))) {
+      result.push(<li className="layout-sidebar-divider" key={`divider-after-${index}`} />);
+    }
+    result.push(renderLinksItem(item));
+  });
+  return result.flat();
+}
+
+function renderLinksItem(item) {
+  if (Array.isArray(item)) {
+    return item.map(renderLinksItem);
+  }
+  const { url, icon, title, showBadge, external } = item;
+  return (
+    <li key={url}>
+      <NavLink
+        to={url}
+        external={external}
+        className={({ isActive }) =>
+          isActive ? 'layout-sidebar-link layout-sidebar-link--active' : 'layout-sidebar-link'
+        }>
+        <span className={`layout-sidebar-icon ${showBadge ? 'layout-sidebar-badge' : ''}`}>{icon}</span>
+        <Typography component="span" className="layout-sidebar-link-text">
+          {title}
+        </Typography>
+      </NavLink>
+    </li>
+  );
+}
+
+function Sidebar({ links, addons, dense, ...rest }) {
   return (
-    <Root {...rest}>
-      <ul>
-        {links.map(({ url, icon, title, showBadge }) => {
-          return (
-            <li key={url}>
-              <NavLink to={url} className="layout-sidebar-link" activeClassName="layout-sidebar-link--active">
-                <span className={`layout-sidebar-icon ${showBadge ? 'layout-sidebar-badge' : ''}`}>{icon}</span>
-                <Typography component="span" className="layout-sidebar-link-text">
-                  {title}
-                </Typography>
-              </NavLink>
-            </li>
-          );
-        })}
-      </ul>
+    <Root {...rest} className={clsx({ 'layout-sidebar-dense': dense })}>
+      <ul>{renderLinks(links)}</ul>
       <div style={{ flex: 1 }} />
       {addons}
     </Root>
@@ -31,10 +56,12 @@ function Sidebar({ links, addons, ...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))';
@@ -94,6 +121,61 @@ const Root = styled.div`
     text-transform: capitalize;
     letter-spacing: normal;
   }
+  .layout-sidebar-divider {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &::after {
+      content: '';
+      display: inline-block;
+      width: 80px;
+      max-width: 100%;
+      border-bottom: 1px solid #ddd;
+    }
+  }
+  &.layout-sidebar-dense {
+    box-sizing: border-box;
+    height: 100%;
+    padding-top: 28px;
+    border-right: 1px solid #ddd;
+    .layout-sidebar-link {
+      flex-direction: row;
+      align-items: center;
+      padding: 10px 36px 10px 24px;
+    }
+    .layout-sidebar-icon {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      margin-right: 12px;
+      > img,
+      > svg {
+        width: 20px;
+        height: 20px;
+      }
+    }
+    .layout-sidebar-badge {
+      &:after {
+        width: 6px;
+        height: 6px;
+        border-radius: 6px;
+        right: -2px;
+        top: 0;
+      }
+    }
+    .layout-sidebar-link-text {
+      margin-top: 0;
+      font-size: 14px;
+    }
+    .layout-sidebar-divider {
+      &::after {
+        content: '';
+        display: inline-block;
+        width: 100%;
+        margin: 12px 0;
+      }
+    }
+  }
 `;
 
 export default Sidebar;

package/src/Layout/dashboard/with-external-link.js

@@ -0,0 +1,20 @@
+import { Link as RouterLink, NavLink as RouterNavLink } from 'react-router-dom';
+
+// 包裹 router Link/NavLink 组件, 支持 external link (external 为 true 时通过 click 事件跳转)
+export function withExternalLink(RouterLinkComponent) {
+  // eslint-disable-next-line react/prop-types
+  return function WithExternalLink({ to, external, ...rest }) {
+    const handleClick = (e) => {
+      e.preventDefault();
+      window.location.href = to;
+    };
+    if (external) {
+      return <RouterLinkComponent onClick={handleClick} to={to} {...rest} />;
+    }
+    return <RouterLinkComponent to={to} {...rest} />;
+  };
+}
+
+export const Link = withExternalLink(RouterLink);
+
+export const NavLink = withExternalLink(RouterNavLink);

package/src/Layout/dashboard-legacy/header.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import Button from '@mui/material/IconButton';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';

package/src/Layout/dashboard-legacy/index.js

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import Container from '@mui/material/Container';
 import Box from '@mui/material/Box';
 import Drawer from '@mui/material/Drawer';

package/src/Layout/dashboard-legacy/sidebar.js

@@ -1,8 +1,8 @@
 import { memo } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
-import { withRouter, Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { useTheme } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
@@ -11,8 +11,9 @@ import { teal } from '@mui/material/colors';
 import ImageIcon from '../../Icon/image';
 import Logo from '../../Logo';
 
-function Sidebar({ location, images, links, prefix, addons, logo, ...rest }) {
+export default function Sidebar({ images, links, prefix, addons, logo, ...rest }) {
   const theme = useTheme();
+  const location = useLocation();
   const isSelected = (url, name) => {
     const pattern = new RegExp(`/${name}`);
     return pattern.test(location.pathname);
@@ -47,7 +48,6 @@ function Sidebar({ location, images, links, prefix, addons, logo, ...rest }) {
 }
 
 Sidebar.propTypes = {
-  location: PropTypes.object.isRequired,
   images: PropTypes.object.isRequired,
   links: PropTypes.array.isRequired,
   prefix: PropTypes.string,
@@ -116,5 +116,3 @@ const MenuItem = styled(Button)`
     }
   }
 `;
-
-export default withRouter(Sidebar);

package/src/Layout/index.js

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import Helmet from 'react-helmet';
 import Link from '@mui/material/Link';
 

package/src/Locale/selector.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-no-bind */
 import { useState, useContext, useRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import { useTheme } from '@mui/material/styles';
 import Button from '@mui/material/Button';

package/src/Logo/index.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import { ReactComponent as LightLogo } from './images/logo-light-top.svg';
 import { ReactComponent as LightText } from './images/logo-light-text.svg';

package/src/Metric/index.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-danger */
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import ImageIcon from '../Icon/image';
 

package/src/NFTDisplay/aspect-ratio-container.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 function AspectRatioContainer({ aspect, children, ...rest }) {
   return (

package/src/NFTDisplay/broken.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import BrokenImage from '@mui/icons-material/BrokenImage';
 
 export default function Broken() {

package/src/NFTDisplay/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { useRef, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import clsx from 'clsx';
 import { Buffer } from 'buffer';
 import get from 'lodash/get';

package/src/NFTDisplay/loading.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 export default function Loading() {
   return <Root className="nft-display__loading">loading...</Root>;

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

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import root from 'react-shadow/styled-components';
+import styled from '@emotion/styled';
+import root from 'react-shadow/emotion';
 
 /**
  * inline svg 的方式嵌入 svg, 使用 shadow DOM 避免样式污染

package/src/NavMenu/style.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 const NavMenuBase = styled.nav`
   background-color: ${(props) => props.$bgColor};

package/src/PricingTable/PricingPlan.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import Card from '@mui/material/Card';
 import Button from '@mui/material/Button';

package/src/PricingTable/index.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import Grid from '@mui/material/Grid';
 
 import PricingPlan from './PricingPlan';

package/src/Result/result.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import Box from '@mui/material/Box';
 
 function Result({ icon, title, description, extra, ...rest }) {

package/src/Screenshot/index.js

@@ -1,6 +1,6 @@
 import { createElement, Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import { mergeProps } from '../Util';
 

package/src/SplitButton/index.js

@@ -1,6 +1,6 @@
 import { useState, useRef, isValidElement } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import Popper from '@mui/material/Popper';
 import Paper from '@mui/material/Paper';

package/src/Tag/index.js

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/material/styles';

package/src/TextCollapse/index.js

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

package/src/Theme/theme-provider.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { ThemeProvider as StyledThemeProvider } from 'styled-components';
+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';
@@ -9,17 +9,16 @@ const defaultTheme = create();
 
 /**
  * 默认的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider
- * 注: 目前 UX 依赖 styled-components, 所以该组件也内置了一个 StyledThemeProvider
  */
 export default function ThemeProvider({ children, theme }) {
   return (
     // injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
     <StyledEngineProvider injectFirst>
       <MuiThemeProvider theme={theme}>
-        <StyledThemeProvider theme={theme}>
+        <EmotionThemeProvider theme={theme}>
           <CssBaseline />
           {children}
-        </StyledThemeProvider>
+        </EmotionThemeProvider>
       </MuiThemeProvider>
     </StyledEngineProvider>
   );

package/src/Video/index.js

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import PropTypes from 'prop-types';
 import Player from 'react-player';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import CircularProgress from '@mui/material/CircularProgress';
 

package/src/Wallet/Action.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import Typography from '@mui/material/Typography';
 

package/src/Wallet/Download.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import Typography from '@mui/material/Typography';
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';

package/src/Wallet/Open.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
 import Fab from '@mui/material/Fab';
 

package/src/WechatPrompt/index.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import Typography from '@mui/material/Typography';
 import Dialog from '@mui/material/Dialog';

package/src/withTheme/index.js

@@ -1,15 +1,17 @@
 import * as React from 'react';
-import { ThemeProvider, createGlobalStyle } from 'styled-components';
+import { Global, ThemeProvider, css } from '@emotion/react';
 import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 
 import { create } from '../Theme';
 
-const GlobalStyle = createGlobalStyle`
+const globalStyles = css`
   font-family: ${(props) => props.theme.typography.fontFamily};
   color: ${(props) => props.theme.typography.color.main};
 
-  a, a:hover, a:active {
+  a,
+  a:hover,
+  a:active {
     text-decoration: none;
     color: ${(props) => props.theme.palette.primary.dark};
   }
@@ -57,7 +59,7 @@ function withTheme(Component, { mode = 'light', pageWidth = 'md', palette, typog
       return (
         <MuiThemeProvider theme={this.theme}>
           <CssBaseline />
-          <GlobalStyle theme={this.theme} />
+          <Global styles={globalStyles} />
           <ThemeProvider theme={this.theme}>
             <Component {...this.props} />
           </ThemeProvider>