@arcblock/ux 2.1.13 → 2.1.16

package/src/Layout/dashboard/sidebar.js

@@ -1,120 +1,105 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import withTheme from '@mui/styles/withTheme';
 
-import { withRouter, Link } from 'react-router-dom';
-import Button from '@mui/material/Button';
+import { NavLink } from 'react-router-dom';
 import Typography from '@mui/material/Typography';
 import { teal } from '@mui/material/colors';
 
-import ImageIcon from '../../Icon/image';
-import Logo from '../../Logo';
-
-function Sidebar({ location, theme, images, links, prefix, addons, logo, ...rest }) {
-  const isSelected = (url, name) => {
-    const pattern = new RegExp(`/${name}`);
-    return pattern.test(location.pathname);
-  };
-
+function Sidebar({ links, addons, ...rest }) {
   return (
-    <MenuItems {...rest}>
-      <Link to="/" className="sidebar-logo">
-        {logo || <Logo showText={false} size={20} />}
-      </Link>
-      {links.map(({ url, name, title, showBadge }) => {
-        const selected = isSelected(url, name);
-        return (
-          <MenuItem component={Link} key={url} selected={selected} to={url}>
-            <ImageIcon
-              name={images[name]}
-              size={36}
-              color={selected ? '#00c2c4' : theme.typography.color.main}
-              prefix={prefix}
-              showBadge={showBadge}
-            />
-            <Typography component="span" className="menu-title">
-              {title}
-            </Typography>
-          </MenuItem>
-        );
-      })}
+    <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>
       <div style={{ flex: 1 }} />
       {addons}
-    </MenuItems>
+    </Root>
   );
 }
 
 Sidebar.propTypes = {
-  location: PropTypes.object.isRequired,
-  theme: PropTypes.object.isRequired,
-  images: PropTypes.object.isRequired,
   links: PropTypes.array.isRequired,
-  prefix: PropTypes.string,
   addons: PropTypes.any,
-  logo: PropTypes.any,
 };
 
 Sidebar.defaultProps = {
-  prefix: '/images',
   addons: null,
-  logo: null,
 };
 
-const MenuItems = React.memo(styled.div`
-  flex: 1;
+const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))';
+
+const Root = styled.div`
   display: flex;
   flex-direction: column;
-
-  && .sidebar-logo {
-    display: none;
-    border-bottom: 1px solid #eee;
-    background: ${props => props.theme.palette.background.default};
-    position: sticky;
-    top: 0;
-    z-index: 1;
-    padding: 10px 0;
-    text-align: center;
-    font-size: 0;
-  }
-  ${props => props.theme.breakpoints.down('md')} {
-    && .sidebar-logo {
-      display: block;
-    }
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
   }
-`);
-
-const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))';
-
-const MenuItem = styled(Button)`
-  && {
+  .layout-sidebar-link {
     display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
-    width: 100%;
-    transition: all 200ms ease-in-out;
-    background: ${props => (props.selected ? gradient : '')};
-    padding: 24px 0;
-    border-left: 2px solid ${props => (props.selected ? teal.A700 : 'transparent')};
-    border-radius: 0;
+    padding: 16px 0;
+    color: ${props => props.theme.palette.text.secondary};
+    text-decoration: none;
 
-    &:hover {
+    &:hover,
+    &.layout-sidebar-link--active {
+      color: ${props => props.theme.palette.primary.main};
       background: ${gradient};
       border-left-color: ${teal.A700};
     }
-
-    .menu-title {
-      margin-top: 8px;
-      font-size: 12px;
-      font-weight: 500;
-      text-align: center;
-      text-transform: capitalize;
-      letter-spacing: normal;
-      width: 80%;
-      color: ${props => props.theme.palette.text.primary};
+  }
+  .layout-sidebar-icon {
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+    > img,
+    > svg {
+      width: 32px;
+      height: 32px;
     }
   }
+  .layout-sidebar-badge {
+    position: relative;
+    &:after {
+      content: '';
+      position: absolute;
+      width: 10px;
+      height: 10px;
+      border-radius: 10px;
+      background-color: #fe4e44;
+      right: -2px;
+      top: 0;
+      box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1);
+    }
+  }
+  .layout-sidebar-link-text {
+    margin-top: 8px;
+    font-size: 12px;
+    font-weight: 500;
+    text-align: center;
+    text-transform: capitalize;
+    letter-spacing: normal;
+  }
 `;
 
-export default withRouter(withTheme(Sidebar));
+export default Sidebar;

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

@@ -0,0 +1,150 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import Helmet from 'react-helmet';
+import styled from 'styled-components';
+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';
+import Header from './header';
+import Footer from '../../Footer';
+
+const Wrapper = styled.div`
+  &.dashboard {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+  }
+  .dashboard__body {
+    overflow: hidden;
+    flex: 1;
+  }
+  .dashboard__main {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    flex: 1;
+  }
+  .dashboard__content {
+    flex: 1;
+  }
+  .dashboard__footer {
+    padding-left: 30px;
+  }
+
+  .drawerPaper {
+    position: relative;
+    white-space: nowrap;
+    width: 120px;
+    background: ${props => props.theme.palette.background.default};
+    box-shadow: 2px 16px 10px 0
+      rgba(0, 0, 0, ${props => (props.theme.mode === 'light' ? 0.05 : 0.5)});
+    border: 0;
+  }
+`;
+
+export default function Dashboard({
+  children,
+  title,
+  brand,
+  description,
+  brandAddon,
+  headerAddon,
+  images,
+  links,
+  prefix,
+  fullWidth,
+  contentLayout,
+  className,
+  homeUrl,
+  logo,
+  ...rest
+}) {
+  const breakpoint = 960;
+  const { width } = useWindowSize();
+  const [drawerMode, setDrawerMode] = useState(width >= breakpoint ? 'permanent' : 'temporary');
+  const [drawerOpen, setDrawerOpen] = useState(drawerMode === 'permanent');
+
+  useEffect(() => {
+    const newMode = width >= breakpoint ? 'permanent' : 'temporary';
+    setDrawerMode(newMode);
+    setDrawerOpen(newMode !== 'temporary');
+  }, [width]);
+
+  const onToggleDrawer = () => {
+    setDrawerOpen(!drawerOpen);
+  };
+  const isFullWidth = fullWidth || contentLayout === 'row';
+
+  return (
+    <Wrapper className={`dashboard ${className}`} {...rest}>
+      <Helmet title={`${title}-${brand}`} />
+
+      <Header
+        className="dashboard__header"
+        onToggleMenu={onToggleDrawer}
+        brand={brand}
+        brandAddon={brandAddon}
+        description={description}
+        addons={headerAddon}
+        homeUrl={homeUrl}
+        logo={logo}
+      />
+      <Box display="flex" className="dashboard__body">
+        <Drawer
+          variant={drawerMode}
+          className="drawer"
+          classes={{ paper: 'drawerPaper' }}
+          open={drawerOpen}
+          onClose={onToggleDrawer}
+          ModalProps={{ disablePortal: true, keepMounted: true }}>
+          <Sidebar
+            className="dashboard__sidebar"
+            images={images}
+            links={links}
+            prefix={prefix}
+            logo={logo}
+          />
+        </Drawer>
+        <Box className="dashboard__main">
+          <Container maxWidth={isFullWidth ? false : 'lg'} className="dashboard__content">
+            {children}
+          </Container>
+          <Footer className="dashboard__footer" />
+        </Box>
+      </Box>
+    </Wrapper>
+  );
+}
+
+Dashboard.propTypes = {
+  children: PropTypes.any.isRequired,
+  title: PropTypes.string,
+  brand: PropTypes.string.isRequired,
+  links: PropTypes.array.isRequired,
+  images: PropTypes.object.isRequired,
+  brandAddon: PropTypes.object,
+  description: PropTypes.any.isRequired,
+  headerAddon: PropTypes.any,
+  prefix: PropTypes.string,
+  // 兼容旧版的设置，新版使用 fullWidth 进行设置
+  contentLayout: PropTypes.oneOf(['row', 'column']),
+  fullWidth: PropTypes.bool,
+  className: PropTypes.string,
+  homeUrl: PropTypes.string,
+  logo: PropTypes.any,
+};
+
+Dashboard.defaultProps = {
+  title: 'Home',
+  contentLayout: 'column',
+  headerAddon: null,
+  brandAddon: null,
+  prefix: '/images',
+  fullWidth: false,
+  className: '',
+  homeUrl: '/',
+  logo: null,
+};

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

@@ -0,0 +1,120 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import withTheme from '@mui/styles/withTheme';
+
+import { withRouter, Link } from 'react-router-dom';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import { teal } from '@mui/material/colors';
+
+import ImageIcon from '../../Icon/image';
+import Logo from '../../Logo';
+
+function Sidebar({ location, theme, images, links, prefix, addons, logo, ...rest }) {
+  const isSelected = (url, name) => {
+    const pattern = new RegExp(`/${name}`);
+    return pattern.test(location.pathname);
+  };
+
+  return (
+    <MenuItems {...rest}>
+      <Link to="/" className="sidebar-logo">
+        {logo || <Logo showText={false} size={20} />}
+      </Link>
+      {links.map(({ url, name, title, showBadge }) => {
+        const selected = isSelected(url, name);
+        return (
+          <MenuItem component={Link} key={url} selected={selected} to={url}>
+            <ImageIcon
+              name={images[name]}
+              size={36}
+              color={selected ? '#00c2c4' : theme.typography.color.main}
+              prefix={prefix}
+              showBadge={showBadge}
+            />
+            <Typography component="span" className="menu-title">
+              {title}
+            </Typography>
+          </MenuItem>
+        );
+      })}
+      <div style={{ flex: 1 }} />
+      {addons}
+    </MenuItems>
+  );
+}
+
+Sidebar.propTypes = {
+  location: PropTypes.object.isRequired,
+  theme: PropTypes.object.isRequired,
+  images: PropTypes.object.isRequired,
+  links: PropTypes.array.isRequired,
+  prefix: PropTypes.string,
+  addons: PropTypes.any,
+  logo: PropTypes.any,
+};
+
+Sidebar.defaultProps = {
+  prefix: '/images',
+  addons: null,
+  logo: null,
+};
+
+const MenuItems = React.memo(styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+
+  && .sidebar-logo {
+    display: none;
+    border-bottom: 1px solid #eee;
+    background: ${props => props.theme.palette.background.default};
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    padding: 10px 0;
+    text-align: center;
+    font-size: 0;
+  }
+  ${props => props.theme.breakpoints.down('md')} {
+    && .sidebar-logo {
+      display: block;
+    }
+  }
+`);
+
+const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))';
+
+const MenuItem = styled(Button)`
+  && {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    transition: all 200ms ease-in-out;
+    background: ${props => (props.selected ? gradient : '')};
+    padding: 24px 0;
+    border-left: 2px solid ${props => (props.selected ? teal.A700 : 'transparent')};
+    border-radius: 0;
+
+    &:hover {
+      background: ${gradient};
+      border-left-color: ${teal.A700};
+    }
+
+    .menu-title {
+      margin-top: 8px;
+      font-size: 12px;
+      font-weight: 500;
+      text-align: center;
+      text-transform: capitalize;
+      letter-spacing: normal;
+      width: 80%;
+      color: ${props => props.theme.palette.text.primary};
+    }
+  }
+`;
+
+export default withRouter(withTheme(Sidebar));

package/src/NavMenu/nav-menu.js

@@ -120,7 +120,7 @@ function Item({ id: _id, icon, label, active, onClick, ...rest }) {
     if (active) {
       activate(id);
     }
-  }, []);
+  }, [active]);
   const handleClick = () => {
     onClick?.();
     activate(id);
@@ -138,8 +138,6 @@ Item.propTypes = {
   id: PropTypes.string,
   icon: PropTypes.element,
   label: PropTypes.node,
-  // 未显式指定各个 item#id 时, 不方便设置 NavMenu#defaultActiveId, 此时可以给 item 指定 active, 表示 nav menu 默认激活该 item
-  // (仅在初始化时有效, 后续更新无效)
   active: PropTypes.bool,
   onClick: PropTypes.func,
 };

package/src/Wallet/Open.js

@@ -5,7 +5,7 @@ import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
 import Fab from '@mui/material/Fab';
 
 export default function OpenInWallet({ locale, link }) {
-  const buttonText = locale === 'zh' ? '在 ABT 钱包打开' : 'Open in DID Wallet';
+  const buttonText = locale === 'zh' ? '在 DID 钱包打开' : 'Open in DID Wallet';
   const browser = useBrowser();
 
   if (browser.mobile.any && !browser.wallet && !browser.wechat) {

package/src/WechatPrompt/index.js

@@ -26,7 +26,7 @@ export default function WechatPrompt() {
           <Typography className="wechat-title">1. 轻触右上方菜单</Typography>
           <div className="wechat-tip">
             <Typography className="wechat-tip-text">
-              2. 点击“在浏览器打开”，才能调起 ABT 钱包
+              2. 点击“在浏览器打开”，才能调起 DID 钱包
             </Typography>
             <img className="wechat-tip-img" src={AndroidImage} alt="Open in Android Browser" />
           </div>
@@ -41,7 +41,7 @@ export default function WechatPrompt() {
         <Typography className="wechat-title">1. 轻触右上方菜单</Typography>
         <div className="wechat-tip">
           <Typography className="wechat-tip-text">
-            2. 点击“在Safari中打开”，才能调起 ABT 钱包
+            2. 点击“在Safari中打开”，才能调起 DID 钱包
           </Typography>
           <img className="wechat-tip-img" src={IosImage} alt="Open in Safari" />
         </div>