@arcblock/ux 2.13.70 → 3.0.0

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

@@ -1,26 +1,21 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Button from '@mui/material/IconButton';
-import AppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import Hidden from '@mui/material/Hidden';
-import MenuIcon from '@mui/icons-material/Menu';
-import { Link } from 'react-router-dom';
-import Logo from '../../Logo';
-import { styled } from '../../Theme';
-const StyledAppBar = styled(AppBar)`
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import { Menu as m } from "@mui/icons-material";
+import { AppBar as x, Toolbar as f, Button as u, Box as o, Typography as n } from "@mui/material";
+import { Link as y } from "react-router-dom";
+import g from "../../Logo/index.js";
+import { styled as b } from "../../Theme/index.js";
+const k = b(x)`
   && {
-    z-index: ${props => props.theme.zIndex.drawer};
-    background: ${props => props.theme.palette.background.default};
+    z-index: ${(e) => e.theme.zIndex.drawer};
+    background: ${(e) => e.theme.palette.background.default};
     box-shadow: none;
     top: 0;
     height: auto;
   }
   .header-toolbar {
-    background: ${props => props.theme.palette.background.default};
-    color: ${props => props.theme.palette.text.primary};
-    margin: ${props => props.theme.spacing(1)}px 0;
+    background: ${(e) => e.theme.palette.background.default};
+    color: ${(e) => e.theme.palette.text.primary};
+    margin: ${(e) => e.theme.spacing(1)}px 0;
   }
   .header-link {
     display: flex;
@@ -40,7 +35,7 @@ const StyledAppBar = styled(AppBar)`
   .header-title__primary {
     font-size: 24px;
     font-weight: 800;
-    color: ${props => props.theme.typography.color.main};
+    color: ${(e) => e.theme.typography.color.main};
     text-transform: uppercase;
     display: flex;
     align-items: center;
@@ -48,7 +43,7 @@ const StyledAppBar = styled(AppBar)`
   .header-title__secondary {
     font-size: 14px;
     line-height: 1.71;
-    color: ${props => props.theme.typography.color.gray};
+    color: ${(e) => e.theme.typography.color.gray};
   }
 
   .header-addons {
@@ -68,7 +63,7 @@ const StyledAppBar = styled(AppBar)`
   .header-menu {
     display: none;
   }
-  ${props => props.theme.breakpoints.down('md')} {
+  ${(e) => e.theme.breakpoints.down("md")} {
     .header-title {
       display: none;
     }
@@ -80,75 +75,63 @@ const StyledAppBar = styled(AppBar)`
     }
   }
 `;
-/*
-  自定义 logo 相关:
-  如果为 logo prop 传入一个自定义的 svg, 并且 svg 中的元素通过 id 引用了 defs 中的元素 (比如 linearGradient),
-  这种情况下因为 header 和 sidebar 中会各有一个相同的 svg, defs 中元素的 id 会出现冲突,
-  当屏幕较窄时, header 会通过设置 display:none 将 svg logo 隐藏,
-  这会导致 svg defs 中的元素不能被正常引用 (比如 fill 引用的 color 失效), 这会进一步导致 sidebar 中的 logo 不能正常显示.
-  考虑到上述问题, 目前使用 Hidden 组件控制 logo 的显示/隐藏
-  参考: https://blog.patw.me/archives/1820/inline-svg-same-id-and-display-none-issue/
-*/
-export default function Header({
-  onToggleMenu,
-  brand,
-  description,
-  addons,
-  brandAddon,
-  homeUrl = '/',
-  logo,
-  children,
-  ...rest
+function j({
+  onToggleMenu: e,
+  brand: i,
+  description: l,
+  addons: d,
+  brandAddon: s,
+  homeUrl: h = "/",
+  logo: p,
+  children: t,
+  ...c
 }) {
-  return /*#__PURE__*/_jsx(StyledAppBar, {
-    position: "sticky",
-    className: "header",
-    ...rest,
-    children: /*#__PURE__*/_jsxs(Toolbar, {
-      disableGutters: false,
-      className: "header-toolbar",
-      children: [/*#__PURE__*/_jsx(Button, {
+  return /* @__PURE__ */ r(k, { position: "sticky", className: "header", ...c, children: /* @__PURE__ */ a(f, { disableGutters: !1, className: "header-toolbar", children: [
+    /* @__PURE__ */ r(
+      u,
+      {
         color: "inherit",
         "aria-label": "open drawer",
-        edge: "start",
         className: "header-menu",
         "aira-label": "header menu button",
-        onClick: onToggleMenu,
-        children: /*#__PURE__*/_jsx(MenuIcon, {})
-      }), /*#__PURE__*/_jsxs(Link, {
-        to: homeUrl,
-        className: "header-link",
-        children: [/*#__PURE__*/_jsx(Hidden, {
-          mdDown: true,
-          children: /*#__PURE__*/_jsx("div", {
-            className: "header-logo",
-            children: logo || /*#__PURE__*/_jsx(Logo, {
-              showText: false
-            })
-          })
-        }), /*#__PURE__*/_jsxs("div", {
-          className: "header-title",
-          children: [/*#__PURE__*/_jsxs(Typography, {
-            component: "h2",
-            noWrap: true,
-            className: "header-title__primary",
-            children: [brand, brandAddon]
-          }), /*#__PURE__*/_jsx(Typography, {
-            component: "p",
-            noWrap: true,
-            className: "header-title__secondary",
-            children: description
-          })]
-        })]
-      }), /*#__PURE__*/_jsx(Box, {
-        flexGrow: 1
-      }), !!children && /*#__PURE__*/_jsx("div", {
-        className: "header-children",
-        children: children
-      }), /*#__PURE__*/_jsx("div", {
-        className: "header-addons",
-        children: addons
-      })]
-    })
-  });
-}
+        onClick: e,
+        children: /* @__PURE__ */ r(m, {})
+      }
+    ),
+    /* @__PURE__ */ a(y, { to: h, className: "header-link", children: [
+      /* @__PURE__ */ r(
+        o,
+        {
+          sx: {
+            display: {
+              xs: "none",
+              md: "block"
+            }
+          },
+          className: "header-logo",
+          children: p || /* @__PURE__ */ r(g, { showText: !1 })
+        }
+      ),
+      /* @__PURE__ */ a("div", { className: "header-title", children: [
+        /* @__PURE__ */ a(n, { component: "h2", noWrap: !0, className: "header-title__primary", children: [
+          i,
+          s
+        ] }),
+        /* @__PURE__ */ r(n, { component: "p", noWrap: !0, className: "header-title__secondary", children: l })
+      ] })
+    ] }),
+    /* @__PURE__ */ r(
+      o,
+      {
+        sx: {
+          flexGrow: 1
+        }
+      }
+    ),
+    !!t && /* @__PURE__ */ r("div", { className: "header-children", children: t }),
+    /* @__PURE__ */ r("div", { className: "header-addons", children: d })
+  ] }) });
+}
+export {
+  j as default
+};

package/lib/Layout/dashboard-legacy/index.d.ts

@@ -1,5 +1,5 @@
-import { type SxProps } from '@mui/material';
-import { type LinkItem } from './sidebar';
+import { SxProps } from '@mui/material';
+import { LinkItem } from './sidebar';
 export interface DashboardProps extends React.HTMLAttributes<HTMLDivElement> {
     links?: LinkItem[];
     brand?: string;

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

@@ -1,15 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import Helmet from 'react-helmet';
-import Container from '@mui/material/Container';
-import Box from '@mui/material/Box';
-import Drawer from '@mui/material/Drawer';
-import { useSize } from 'ahooks';
-import Sidebar from './sidebar';
-import Header from './header';
-import Footer from '../../Footer';
-import { styled } from '../../Theme';
-const Wrapper = styled('div')`
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { useState as c, useEffect as P } from "react";
+import H from "react-helmet";
+import { Box as h, Drawer as S, Container as W } from "@mui/material";
+import { useSize as j } from "ahooks";
+import C from "./sidebar.js";
+import F from "./header.js";
+import O from "../../Footer/index.js";
+import { styled as T } from "../../Theme/index.js";
+const B = T("div")`
   &.dashboard {
     display: flex;
     flex-direction: column;
@@ -33,86 +31,80 @@ const Wrapper = styled('div')`
     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});
+    background: ${(r) => r.theme.palette.background.default};
+    box-shadow: 2px 16px 10px 0 rgba(0, 0, 0, ${(r) => r.theme.palette.mode === "light" ? 0.05 : 0.5});
     border: 0;
   }
 `;
-export default function Dashboard({
-  links = [],
-  brand = '',
-  description = '',
-  images,
-  title = 'Home',
-  brandAddon,
-  headerAddon,
-  prefix = '/images',
-  fullWidth = false,
-  contentLayout = 'column',
-  className = '',
-  homeUrl = '/',
-  logo,
-  children,
-  ...rest
+function R({
+  links: r = [],
+  brand: d = "",
+  description: f = "",
+  images: b,
+  title: u = "Home",
+  brandAddon: w,
+  headerAddon: x,
+  prefix: _ = "/images",
+  fullWidth: g = !1,
+  contentLayout: y = "column",
+  className: N = "",
+  homeUrl: k = "/",
+  logo: s,
+  children: v,
+  ...M
 }) {
-  const breakpoint = 960;
-  const size = useSize(document.body);
-  const width = size?.width || 0;
-  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 /*#__PURE__*/_jsxs(Wrapper, {
-    className: `dashboard ${className}`,
-    ...rest,
-    children: [/*#__PURE__*/_jsx(Helmet, {
-      title: `${title}-${brand}`
-    }), /*#__PURE__*/_jsx(Header, {
-      className: "dashboard__header",
-      onToggleMenu: onToggleDrawer,
-      brand: brand,
-      brandAddon: brandAddon,
-      description: description,
-      addons: headerAddon,
-      homeUrl: homeUrl,
-      logo: logo
-    }), /*#__PURE__*/_jsxs(Box, {
-      display: "flex",
-      className: "dashboard__body",
-      children: [/*#__PURE__*/_jsx(Drawer, {
-        variant: drawerMode,
-        className: "drawer",
-        classes: {
-          paper: 'drawerPaper'
+  const a = j(document.body), o = (a == null ? void 0 : a.width) || 0, [n, D] = c(o >= 960 ? "permanent" : "temporary"), [i, l] = c(n === "permanent");
+  P(() => {
+    const p = o >= 960 ? "permanent" : "temporary";
+    D(p), l(p !== "temporary");
+  }, [o]);
+  const m = () => {
+    l(!i);
+  }, $ = g || y === "row";
+  return /* @__PURE__ */ t(B, { className: `dashboard ${N}`, ...M, children: [
+    /* @__PURE__ */ e(H, { title: `${u}-${d}` }),
+    /* @__PURE__ */ e(
+      F,
+      {
+        className: "dashboard__header",
+        onToggleMenu: m,
+        brand: d,
+        brandAddon: w,
+        description: f,
+        addons: x,
+        homeUrl: k,
+        logo: s
+      }
+    ),
+    /* @__PURE__ */ t(
+      h,
+      {
+        className: "dashboard__body",
+        sx: {
+          display: "flex"
         },
-        open: drawerOpen,
-        onClose: onToggleDrawer,
-        ModalProps: {
-          disablePortal: true,
-          keepMounted: true
-        },
-        children: /*#__PURE__*/_jsx(Sidebar, {
-          className: "dashboard__sidebar",
-          images: images,
-          links: links,
-          prefix: prefix,
-          logo: logo
-        })
-      }), /*#__PURE__*/_jsxs(Box, {
-        className: "dashboard__main",
-        children: [/*#__PURE__*/_jsx(Container, {
-          maxWidth: isFullWidth ? false : 'lg',
-          className: "dashboard__content",
-          children: children
-        }), /*#__PURE__*/_jsx(Footer, {})]
-      })]
-    })]
-  });
-}
+        children: [
+          /* @__PURE__ */ e(
+            S,
+            {
+              variant: n,
+              className: "drawer",
+              classes: { paper: "drawerPaper" },
+              open: i,
+              onClose: m,
+              ModalProps: { disablePortal: !0, keepMounted: !0 },
+              children: /* @__PURE__ */ e(C, { className: "dashboard__sidebar", images: b, links: r, prefix: _, logo: s })
+            }
+          ),
+          /* @__PURE__ */ t(h, { className: "dashboard__main", children: [
+            /* @__PURE__ */ e(W, { maxWidth: $ ? !1 : "lg", className: "dashboard__content", children: v }),
+            /* @__PURE__ */ e(O, {})
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  R as default
+};

package/lib/Layout/dashboard-legacy/sidebar.d.ts

@@ -1,4 +1,4 @@
-import { type SxProps } from '@mui/material';
+import { SxProps } from '@mui/material';
 export type LinkItem = {
     url: string;
     title: React.ReactNode;

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

@@ -1,69 +1,36 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo } from 'react';
-import { Link, useLocation } 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';
-import { styled, useTheme } from '../../Theme';
-
-// const a: LinkItem = {};
-
-export default function Sidebar({
-  images,
-  links,
-  prefix = '/images',
-  addons,
-  logo,
-  ...rest
-}) {
-  const theme = useTheme();
-  const location = useLocation();
-  const isSelected = (_, name) => {
-    const pattern = new RegExp(`/${name}`);
-    return pattern.test(location.pathname);
-  };
-  return /*#__PURE__*/_jsxs(MenuItems, {
-    ...rest,
-    children: [/*#__PURE__*/_jsx(Link, {
-      to: "/",
-      className: "sidebar-logo",
-      children: logo || /*#__PURE__*/_jsx(Logo, {
-        showText: false,
-        size: 20
-      })
-    }), links.map(({
-      url,
-      name,
-      title,
-      showBadge
-    }) => {
-      const selected = isSelected(url, name);
-      return /*#__PURE__*/_jsxs(MenuItem, {
-        component: Link,
-        selected: selected,
-        to: url,
-        children: [/*#__PURE__*/_jsx(ImageIcon, {
-          name: images[name],
-          size: 36,
-          color: selected ? '#00c2c4' : theme.typography.color.main,
-          prefix: prefix,
-          showBadge: showBadge
-        }), /*#__PURE__*/_jsx(Typography, {
-          component: "span",
-          className: "menu-title",
-          children: title
-        })]
-      }, url);
-    }), /*#__PURE__*/_jsx("div", {
-      style: {
-        flex: 1
-      }
-    }), addons]
-  });
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { memo as k } from "react";
+import { useLocation as $, Link as s } from "react-router-dom";
+import { Button as w, useTheme as z, Typography as I } from "@mui/material";
+import { teal as l } from "@mui/material/colors";
+import j from "../../Icon/image.js";
+import v from "../../Logo/index.js";
+import { styled as d } from "../../Theme/index.js";
+function q({ images: e, links: m, prefix: p = "/images", addons: g, logo: f, ...x }) {
+  const u = z(), b = $(), h = (o, n) => new RegExp(`/${n}`).test(b.pathname);
+  return /* @__PURE__ */ a(L, { ...x, children: [
+    /* @__PURE__ */ t(s, { to: "/", className: "sidebar-logo", children: f || /* @__PURE__ */ t(v, { showText: !1, size: 20 }) }),
+    m.map(({ url: o, name: n, title: r, showBadge: y }) => {
+      const i = h(o, n);
+      return /* @__PURE__ */ a(T, { component: s, selected: i, to: o, children: [
+        /* @__PURE__ */ t(
+          j,
+          {
+            name: e[n],
+            size: 36,
+            color: i ? "#00c2c4" : u.typography.color.main,
+            prefix: p,
+            showBadge: y
+          }
+        ),
+        /* @__PURE__ */ t(I, { component: "span", className: "menu-title", children: r })
+      ] }, o);
+    }),
+    /* @__PURE__ */ t("div", { style: { flex: 1 } }),
+    g
+  ] });
 }
-const MenuItems = /*#__PURE__*/memo(styled('div')`
+const L = k(d("div")`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -71,7 +38,7 @@ const MenuItems = /*#__PURE__*/memo(styled('div')`
   && .sidebar-logo {
     display: none;
     border-bottom: 1px solid #eee;
-    background: ${props => props.theme.palette.background.default};
+    background: ${(e) => e.theme.palette.background.default};
     position: sticky;
     top: 0;
     z-index: 1;
@@ -79,14 +46,12 @@ const MenuItems = /*#__PURE__*/memo(styled('div')`
     text-align: center;
     font-size: 0;
   }
-  ${props => props.theme.breakpoints.down('md')} {
+  ${(e) => e.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)`
+`), c = "linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))", T = d(w)`
   && {
     display: flex;
     flex-direction: column;
@@ -94,14 +59,14 @@ const MenuItem = styled(Button)`
     align-items: center;
     width: 100%;
     transition: all 200ms ease-in-out;
-    background: ${props => props.selected ? gradient : ''};
+    background: ${(e) => e.selected ? c : ""};
     padding: 24px 0;
-    border-left: 2px solid ${props => props.selected ? teal.A700 : 'transparent'};
+    border-left: 2px solid ${(e) => e.selected ? l.A700 : "transparent"};
     border-radius: 0;
 
     &:hover {
-      background: ${gradient};
-      border-left-color: ${teal.A700};
+      background: ${c};
+      border-left-color: ${l.A700};
     }
 
     .menu-title {
@@ -112,7 +77,10 @@ const MenuItem = styled(Button)`
       text-transform: capitalize;
       letter-spacing: normal;
       width: 80%;
-      color: ${props => props.theme.palette.text.primary};
+      color: ${(e) => e.theme.palette.text.primary};
     }
   }
-`;
+`;
+export {
+  q as default
+};

package/lib/Layout/index.d.ts

@@ -1,5 +1,5 @@
-import { type SxProps } from '@mui/material';
-import { type LinkItem } from './dashboard/sidebar';
+import { SxProps } from '@mui/material';
+import { LinkItem } from './dashboard/sidebar';
 export interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {
     title: string;
     brand: React.ReactNode;