@arcblock/ux 2.1.15 → 2.1.18

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