@arcblock/ux 2.9.91 → 2.10.0

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

@@ -1,57 +1,68 @@
-"use strict";
+import { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+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';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+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;
+  }
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Dashboard;
-var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactHelmet = _interopRequireDefault(require("react-helmet"));
-var _Container = _interopRequireDefault(require("@mui/material/Container"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _Drawer = _interopRequireDefault(require("@mui/material/Drawer"));
-var _ahooks = require("ahooks");
-var _sidebar = _interopRequireDefault(require("./sidebar"));
-var _header = _interopRequireDefault(require("./header"));
-var _Footer = _interopRequireDefault(require("../../Footer"));
-var _Theme = require("../../Theme");
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "title", "brand", "description", "brandAddon", "headerAddon", "images", "links", "prefix", "fullWidth", "contentLayout", "className", "homeUrl", "logo"];
-var _templateObject;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const Wrapper = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.dashboard {\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n  }\n  .dashboard__body {\n    overflow: hidden;\n    flex: 1;\n  }\n  .dashboard__main {\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    flex: 1;\n  }\n  .dashboard__content {\n    flex: 1;\n  }\n\n  .drawerPaper {\n    position: relative;\n    white-space: nowrap;\n    width: 120px;\n    background: ", ";\n    box-shadow: 2px 16px 10px 0 rgba(0, 0, 0, ", ");\n    border: 0;\n  }\n"])), props => props.theme.palette.background.default, props => props.theme.mode === 'light' ? 0.05 : 0.5);
-function Dashboard(_ref) {
-  let {
-      children,
-      title,
-      brand,
-      description,
-      brandAddon,
-      headerAddon,
-      images,
-      links,
-      prefix,
-      fullWidth,
-      contentLayout,
-      className,
-      homeUrl,
-      logo
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
+  .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 size = (0, _ahooks.useSize)(document.body);
-  const width = (size === null || size === void 0 ? void 0 : size.width) || 0;
-  const [drawerMode, setDrawerMode] = (0, _react.useState)(width >= breakpoint ? 'permanent' : 'temporary');
-  const [drawerOpen, setDrawerOpen] = (0, _react.useState)(drawerMode === 'permanent');
-  (0, _react.useEffect)(() => {
+  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');
@@ -60,12 +71,12 @@ function Dashboard(_ref) {
     setDrawerOpen(!drawerOpen);
   };
   const isFullWidth = fullWidth || contentLayout === 'row';
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, _objectSpread(_objectSpread({
-    className: "dashboard ".concat(className)
-  }, rest), {}, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHelmet.default, {
-      title: "".concat(title, "-").concat(brand)
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_header.default, {
+  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,
@@ -74,10 +85,10 @@ function Dashboard(_ref) {
       addons: headerAddon,
       homeUrl: homeUrl,
       logo: logo
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    }), /*#__PURE__*/_jsxs(Box, {
       display: "flex",
       className: "dashboard__body",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Drawer.default, {
+      children: [/*#__PURE__*/_jsx(Drawer, {
         variant: drawerMode,
         className: "drawer",
         classes: {
@@ -89,40 +100,40 @@ function Dashboard(_ref) {
           disablePortal: true,
           keepMounted: true
         },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebar.default, {
+        children: /*#__PURE__*/_jsx(Sidebar, {
           className: "dashboard__sidebar",
           images: images,
           links: links,
           prefix: prefix,
           logo: logo
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      }), /*#__PURE__*/_jsxs(Box, {
         className: "dashboard__main",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Container.default, {
+        children: [/*#__PURE__*/_jsx(Container, {
           maxWidth: isFullWidth ? false : 'lg',
           className: "dashboard__content",
           children: children
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Footer.default, {})]
+        }), /*#__PURE__*/_jsx(Footer, {})]
       })]
     })]
-  }));
+  });
 }
 Dashboard.propTypes = {
-  children: _propTypes.default.any.isRequired,
-  title: _propTypes.default.string,
-  brand: _propTypes.default.string.isRequired,
-  links: _propTypes.default.array.isRequired,
-  images: _propTypes.default.object.isRequired,
-  brandAddon: _propTypes.default.object,
-  description: _propTypes.default.any.isRequired,
-  headerAddon: _propTypes.default.any,
-  prefix: _propTypes.default.string,
+  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.default.oneOf(['row', 'column']),
-  fullWidth: _propTypes.default.bool,
-  className: _propTypes.default.string,
-  homeUrl: _propTypes.default.string,
-  logo: _propTypes.default.any
+  contentLayout: PropTypes.oneOf(['row', 'column']),
+  fullWidth: PropTypes.bool,
+  className: PropTypes.string,
+  homeUrl: PropTypes.string,
+  logo: PropTypes.any
 };
 Dashboard.defaultProps = {
   title: 'Home',

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

@@ -1,96 +1,129 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Sidebar;
-var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactRouterDom = require("react-router-dom");
-var _Button = _interopRequireDefault(require("@mui/material/Button"));
-var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
-var _colors = require("@mui/material/colors");
-var _image = _interopRequireDefault(require("../../Icon/image"));
-var _Logo = _interopRequireDefault(require("../../Logo"));
-var _Theme = require("../../Theme");
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2;
-const _excluded = ["images", "links", "prefix", "addons", "logo"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function Sidebar(_ref) {
-  let {
-      images,
-      links,
-      prefix,
-      addons,
-      logo
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  const theme = (0, _Theme.useTheme)();
-  const location = (0, _reactRouterDom.useLocation)();
+import { memo } from 'react';
+import PropTypes from 'prop-types';
+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';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function Sidebar({
+  images,
+  links,
+  prefix,
+  addons,
+  logo,
+  ...rest
+}) {
+  const theme = useTheme();
+  const location = useLocation();
   const isSelected = (url, name) => {
-    const pattern = new RegExp("/".concat(name));
+    const pattern = new RegExp(`/${name}`);
     return pattern.test(location.pathname);
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(MenuItems, _objectSpread(_objectSpread({}, rest), {}, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Link, {
+  return /*#__PURE__*/_jsxs(MenuItems, {
+    ...rest,
+    children: [/*#__PURE__*/_jsx(Link, {
       to: "/",
       className: "sidebar-logo",
-      children: logo || /*#__PURE__*/(0, _jsxRuntime.jsx)(_Logo.default, {
+      children: logo || /*#__PURE__*/_jsx(Logo, {
         showText: false,
         size: 20
       })
-    }), links.map(_ref2 => {
-      let {
-        url,
-        name,
-        title,
-        showBadge
-      } = _ref2;
+    }), links.map(({
+      url,
+      name,
+      title,
+      showBadge
+    }) => {
       const selected = isSelected(url, name);
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(MenuItem, {
-        component: _reactRouterDom.Link,
+      return /*#__PURE__*/_jsxs(MenuItem, {
+        component: Link,
         selected: selected,
         to: url,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_image.default, {
+        children: [/*#__PURE__*/_jsx(ImageIcon, {
           name: images[name],
           size: 36,
           color: selected ? '#00c2c4' : theme.typography.color.main,
           prefix: prefix,
           showBadge: showBadge
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        }), /*#__PURE__*/_jsx(Typography, {
           component: "span",
           className: "menu-title",
           children: title
         })]
       }, url);
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), /*#__PURE__*/_jsx("div", {
       style: {
         flex: 1
       }
     }), addons]
-  }));
+  });
 }
 Sidebar.propTypes = {
-  images: _propTypes.default.object.isRequired,
-  links: _propTypes.default.array.isRequired,
-  prefix: _propTypes.default.string,
-  addons: _propTypes.default.any,
-  logo: _propTypes.default.any
+  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 = /*#__PURE__*/(0, _react.memo)((0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n\n  && .sidebar-logo {\n    display: none;\n    border-bottom: 1px solid #eee;\n    background: ", ";\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    padding: 10px 0;\n    text-align: center;\n    font-size: 0;\n  }\n  ", " {\n    && .sidebar-logo {\n      display: block;\n    }\n  }\n"])), props => props.theme.palette.background.default, props => props.theme.breakpoints.down('md')));
+const MenuItems = /*#__PURE__*/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 = (0, _Theme.styled)(_Button.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  && {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    transition: all 200ms ease-in-out;\n    background: ", ";\n    padding: 24px 0;\n    border-left: 2px solid ", ";\n    border-radius: 0;\n\n    &:hover {\n      background: ", ";\n      border-left-color: ", ";\n    }\n\n    .menu-title {\n      margin-top: 8px;\n      font-size: 12px;\n      font-weight: 500;\n      text-align: center;\n      text-transform: capitalize;\n      letter-spacing: normal;\n      width: 80%;\n      color: ", ";\n    }\n  }\n"])), props => props.selected ? gradient : '', props => props.selected ? _colors.teal.A700 : 'transparent', gradient, _colors.teal.A700, props => props.theme.palette.text.primary);
+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};
+    }
+  }
+`;