@arcblock/ux 0.78.26 → 1.6.60

package/lib/Img/index.js

@@ -0,0 +1,212 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _core = require("@material-ui/core");
+
+var _reactIntersectionObserver = require("react-intersection-observer");
+
+var _Alert = _interopRequireDefault(require("mdi-material-ui/Alert"));
+
+var _Image = _interopRequireDefault(require("mdi-material-ui/Image"));
+
+const _excluded = ["lazy", "width", "height", "repeat", "ratio", "alt", "size", "position", "src", "placeholder", "fallback", "style", "className", "onError", "onSuccess"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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; }
+
+const useStyles = (0, _core.makeStyles)(() => ({
+  root: {
+    position: 'relative',
+    overflow: 'hidden',
+    '& .image--state, & .image--img': {
+      minWidth: '100%',
+      minHeight: '100%',
+      position: 'absolute',
+      top: 0,
+      left: '50%',
+      transform: 'translateX(-50%)'
+    },
+    '& .image--state': {
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      color: '#999',
+      background: '#eee',
+      width: '100%',
+      height: '100%'
+    },
+    '& .image--img': {
+      opacity: 0
+    },
+    '& .image--icon': {
+      fontSize: 30,
+      maxWidth: '80%',
+      maxHeight: '80%'
+    }
+  }
+}));
+
+function Img(_ref) {
+  let {
+    lazy,
+    width,
+    height,
+    repeat,
+    ratio,
+    alt,
+    size,
+    position,
+    src,
+    placeholder,
+    fallback,
+    style,
+    className,
+    onError,
+    onSuccess
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const classes = useStyles();
+  const [ref, inView] = lazy ? (0, _reactIntersectionObserver.useInView)({
+    threshold: 0,
+    triggerOnce: true
+  }) : [null, true];
+  const [imgState, setImgState] = (0, _react.useState)('init');
+  const actualSrc = (0, _react.useMemo)(() => {
+    switch (imgState) {
+      case 'init':
+      case 'loading':
+        return placeholder;
+
+      case 'error':
+        return fallback;
+
+      case 'loaded':
+        return src;
+
+      default:
+        return null;
+    }
+  }, [placeholder, fallback, src, imgState]);
+  const actualRatio = (0, _react.useMemo)(() => {
+    if (width && height) return 100 * height / width;
+    return ratio * 100;
+  });
+  const mergedStyle = (0, _react.useMemo)(() => ({
+    backgroundImage: actualSrc ? "url(".concat(actualSrc, ")") : '',
+    backgroundPosition: position,
+    backgroundSize: size,
+    backgroundRepeat: repeat,
+    paddingTop: "".concat(actualRatio, "%")
+  }), [actualSrc, position, size, imgState]);
+
+  const outerStyle = _objectSpread(_objectSpread({}, style), {}, {
+    display: 'inline-block',
+    width: width ? "".concat(width, "px") : '100%'
+  });
+
+  function loadImg() {
+    const img = new Image();
+    img.src = src;
+    setImgState('loading');
+
+    img.onload = () => {
+      setImgState('loaded');
+      onSuccess();
+    };
+
+    img.onerror = err => {
+      setImgState('error');
+      onError(err);
+    };
+  }
+
+  (0, _react.useEffect)(() => {
+    if (inView) loadImg();
+  }, [inView]);
+  return (
+    /*#__PURE__*/
+    // paddingTop 要求元素本身的宽度为 100%，所以只能加一个外层元素去限制宽度
+    _react.default.createElement("div", Object.assign({
+      ref: ref,
+      style: outerStyle
+    }, rest), /*#__PURE__*/_react.default.createElement("div", {
+      className: "image ".concat(className, " ").concat(classes.root),
+      style: mergedStyle
+    }, !fallback && imgState === 'error' && /*#__PURE__*/_react.default.createElement("div", {
+      className: "image--state",
+      title: "loading image"
+    }, /*#__PURE__*/_react.default.createElement(_core.SvgIcon, {
+      component: _Alert.default,
+      className: "image--icon"
+    })), !placeholder && imgState === 'loading' && /*#__PURE__*/_react.default.createElement("div", {
+      className: "image--state",
+      title: "Image load error"
+    }, /*#__PURE__*/_react.default.createElement(_core.SvgIcon, {
+      component: _Image.default,
+      className: "image--icon"
+    })), imgState === 'loaded' && /*#__PURE__*/_react.default.createElement("img", {
+      className: "image--img",
+      src: src,
+      alt: alt
+    })))
+  );
+}
+
+Img.propTypes = {
+  src: _propTypes.default.string.isRequired,
+  alt: _propTypes.default.string,
+  size: _propTypes.default.string,
+  position: _propTypes.default.string,
+  style: _propTypes.default.object,
+  ratio: _propTypes.default.number,
+  repeat: _propTypes.default.string,
+  width: _propTypes.default.number,
+  height: _propTypes.default.number,
+  lazy: _propTypes.default.bool,
+  placeholder: _propTypes.default.string,
+  fallback: _propTypes.default.string,
+  className: _propTypes.default.string,
+  onError: _propTypes.default.func,
+  onSuccess: _propTypes.default.func
+};
+Img.defaultProps = {
+  alt: null,
+  size: 'cover',
+  position: 'top center',
+  repeat: 'no-repeat',
+  style: null,
+  ratio: 1,
+  width: null,
+  height: null,
+  lazy: true,
+  placeholder: null,
+  fallback: null,
+  className: '',
+  onError: () => {},
+  onSuccess: () => {}
+};
+var _default = Img;
+exports.default = _default;

package/lib/InfoRow/index.js

@@ -17,14 +17,15 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
 
+const _excluded = ["name", "nameFormatter", "layout", "children", "valueComponent", "nameWidth"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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; }
 
-// eslint-disable-next-line object-curly-newline
-const InfoRow = (_ref) => {
+const InfoRow = _ref => {
   let {
     name,
     nameFormatter,
@@ -33,15 +34,15 @@ const InfoRow = (_ref) => {
     valueComponent,
     nameWidth
   } = _ref,
-      rest = _objectWithoutProperties(_ref, ["name", "nameFormatter", "layout", "children", "valueComponent", "nameWidth"]);
+      rest = _objectWithoutProperties(_ref, _excluded);
 
-  return _react.default.createElement(Container, Object.assign({
+  return /*#__PURE__*/_react.default.createElement(Container, Object.assign({
     layout: layout,
     width: nameWidth
-  }, rest), _react.default.createElement(_Typography.default, {
+  }, rest), /*#__PURE__*/_react.default.createElement(_Typography.default, {
     color: "textSecondary",
     className: "info-row__name"
-  }, nameFormatter(name)), children && _react.default.createElement(_Typography.default, {
+  }, nameFormatter(name)), children && /*#__PURE__*/_react.default.createElement(_Typography.default, {
     color: "textPrimary",
     component: valueComponent,
     className: "info-row__value"

package/lib/Layout/dashboard/header.js

@@ -11,65 +11,84 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _reactRouterDom = require("react-router-dom");
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _AppBar = _interopRequireDefault(require("@material-ui/core/AppBar"));
 
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _Toolbar = _interopRequireDefault(require("@material-ui/core/Toolbar"));
+
+var _Box = _interopRequireDefault(require("@material-ui/core/Box"));
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
 
 var _Menu = _interopRequireDefault(require("@material-ui/icons/Menu"));
 
-var _Logo = _interopRequireDefault(require("@arcblock/ux/lib/Logo"));
+var _reactRouterDom = require("react-router-dom");
+
+var _Logo = _interopRequireDefault(require("../../Logo"));
+
+const _excluded = ["children", "brand", "brandAddon", "description", "addons", "onToggleMenu", "homeUrl", "logo"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// eslint-disable-next-line import/no-unresolved
-// eslint-disable-next-line object-curly-newline
+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; }
+
+const StyledAppBar = (0, _styledComponents.default)(_AppBar.default).withConfig({
+  displayName: "header__StyledAppBar",
+  componentId: "sc-yt81c4-0"
+})(["&&{z-index:", ";background:", ";box-shadow:none;top:0;height:auto;}.header-toolbar{background:", ";color:", ";margin:", "px 0;}.header-link{display:flex;text-decoration:none;flex-shrink:1;overflow:hidden;}.header-logo{margin-right:20px;}.header-title{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;}.header-title__primary{font-size:24px;font-weight:800;color:", ";text-transform:uppercase;display:flex;align-items:center;}.header-title__secondary{font-size:14px;line-height:1.71;color:", ";}.header-addons{display:flex;justify-content:center;align-items:center;flex-shrink:9999999;.user-addon{.header-avatar{width:32px;border-radius:16px;height:auto;}}}.header-menu{display:none;}@media (max-width:", "px){.header-logo{position:absolute;width:0;height:0;overflow:hidden;}.header-title{display:none;}.header-title__primary{font-size:20px;}.header-menu{display:block;}}"], props => props.theme.zIndex.drawer + 1, props => props.theme.palette.background.default, props => props.theme.palette.background.default, props => props.theme.palette.text.primary, props => props.theme.spacing(1), props => props.theme.typography.color.main, props => props.theme.typography.color.gray, props => props.theme.breakpoints.values.md);
+
 function Header(_ref) {
   let {
-    onToggleMenu,
+    children,
     brand,
     brandAddon,
     description,
-    children,
-    addons
-  } = _ref;
-  return _react.default.createElement(Div, null, _react.default.createElement(_IconButton.default, {
+    addons,
+    onToggleMenu,
+    homeUrl,
+    logo
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(StyledAppBar, Object.assign({
+    position: "sticky",
+    className: "header"
+  }, rest), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
+    disableGutters: false,
+    className: "header-toolbar"
+  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     color: "inherit",
     "aria-label": "open drawer",
     edge: "start",
-    onClick: onToggleMenu,
-    className: "menu-addon"
-  }, _react.default.createElement(_Menu.default, null)), _react.default.createElement(_reactRouterDom.Link, {
-    to: "/",
+    className: "header-menu",
+    onClick: onToggleMenu
+  }, /*#__PURE__*/_react.default.createElement(_Menu.default, null)), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
+    to: homeUrl,
     className: "header-link"
-  }, _react.default.createElement("div", {
-    className: "header-image"
-  }, _react.default.createElement(_Logo.default, {
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "header-logo"
+  }, logo || /*#__PURE__*/_react.default.createElement(_Logo.default, {
     showText: false
-  })), _react.default.createElement("div", {
+  })), /*#__PURE__*/_react.default.createElement("div", {
     className: "header-title"
-  }, _react.default.createElement(_Typography.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     component: "h2",
     noWrap: true,
-    className: "header-title__primary header-title--desktop"
-  }, brand, brandAddon), _react.default.createElement(_Typography.default, {
+    className: "header-title__primary"
+  }, brand, brandAddon), /*#__PURE__*/_react.default.createElement(_Typography.default, {
     component: "p",
     noWrap: true,
-    className: "header-title__secondary header-title--desktop"
-  }, description), _react.default.createElement(_Typography.default, {
-    component: "h2",
-    noWrap: true,
-    className: "header-title__primary header-title--mobile"
-  }, brand, brandAddon), _react.default.createElement(_Typography.default, {
-    component: "p",
-    noWrap: true,
-    className: "header-title__secondary header-title--mobile"
-  }, description))), !!children && _react.default.createElement("div", {
+    className: "header-title__secondary"
+  }, description))), /*#__PURE__*/_react.default.createElement(_Box.default, {
+    flexGrow: 1
+  }), !!children && /*#__PURE__*/_react.default.createElement("div", {
     className: "header-children"
-  }, children), _react.default.createElement("div", {
+  }, children), /*#__PURE__*/_react.default.createElement("div", {
     className: "header-addons"
-  }, addons));
+  }, addons)));
 }
 
 Header.propTypes = {
@@ -78,15 +97,14 @@ Header.propTypes = {
   brandAddon: _propTypes.default.object,
   description: _propTypes.default.string.isRequired,
   children: _propTypes.default.any,
-  addons: _propTypes.default.any
+  addons: _propTypes.default.any,
+  homeUrl: _propTypes.default.string,
+  logo: _propTypes.default.any
 };
 Header.defaultProps = {
   children: null,
   addons: null,
-  brandAddon: null
-};
-
-const Div = _styledComponents.default.div.withConfig({
-  displayName: "header__Div",
-  componentId: "yt81c4-0"
-})(["flex:1;display:flex;justify-content:space-between;align-items:center;.menu-addon{@media (min-width:", "px){display:none;}}.header-link{display:flex;flex:1;.header-image{margin-right:", "px;margin-left:0;margin-top:8px;position:relative;color:", ";display:flex;flex-direction:column;@media (max-width:", "px){display:none;}}.header-title{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;.header-title--mobile{display:none;}@media (max-width:", "px){.header-title--desktop{display:none;}}}.header-title__primary{font-size:24px;font-weight:800;color:", ";text-transform:uppercase;display:flex;align-items:center;@media (max-width:", "px){font-size:22px;}}.header-title__secondary{font-size:14px;line-height:1.71;color:", ";}}.header-addons{display:flex;justify-content:center;align-items:center;.user-addon{.header-avatar{width:32px;border-radius:16px;height:auto;}}}"], props => props.theme.breakpoints.values.md, props => props.theme.spacing(2), props => props.theme.colors.green, props => props.theme.breakpoints.values.md, props => props.theme.breakpoints.values.lg, props => props.theme.typography.color.main, props => props.theme.breakpoints.values.md, props => props.theme.typography.color.gray);
+  brandAddon: null,
+  homeUrl: '/',
+  logo: null
+};

package/lib/Layout/dashboard/index.js

@@ -9,45 +9,60 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _reactHelmet = _interopRequireDefault(require("react-helmet"));
 
-var _useWindowSize = _interopRequireDefault(require("react-use/lib/useWindowSize"));
-
-var _Drawer = _interopRequireDefault(require("@material-ui/core/Drawer"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _AppBar = _interopRequireDefault(require("@material-ui/core/AppBar"));
+var _Container = _interopRequireDefault(require("@material-ui/core/Container"));
 
-var _Toolbar = _interopRequireDefault(require("@material-ui/core/Toolbar"));
+var _Box = _interopRequireDefault(require("@material-ui/core/Box"));
 
-var _Container = _interopRequireDefault(require("@material-ui/core/Container"));
+var _Drawer = _interopRequireDefault(require("@material-ui/core/Drawer"));
 
-var _Footer = _interopRequireDefault(require("@arcblock/ux/lib/Footer"));
+var _useWindowSize = _interopRequireDefault(require("react-use/lib/useWindowSize"));
 
 var _sidebar = _interopRequireDefault(require("./sidebar"));
 
 var _header = _interopRequireDefault(require("./header"));
 
+var _Footer = _interopRequireDefault(require("../../Footer"));
+
+const _excluded = ["children", "title", "brand", "description", "brandAddon", "headerAddon", "images", "links", "prefix", "fullWidth", "contentLayout", "className", "homeUrl", "logo"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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 _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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; }
+
+const Wrapper = _styledComponents.default.div.withConfig({
+  displayName: "dashboard__Wrapper",
+  componentId: "sc-arvc7q-0"
+})(["&.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:", ";box-shadow:2px 16px 10px 0 rgba(0,0,0,", ");border:0;}"], props => props.theme.palette.background.default, props => props.theme.mode === 'light' ? 0.05 : 0.5);
 
 function Dashboard(_ref) {
   let {
     children,
-    links,
-    images,
     title,
     brand,
-    brandAddon,
     description,
+    brandAddon,
     headerAddon,
+    images,
+    links,
+    prefix,
+    fullWidth,
     contentLayout,
-    prefix
-  } = _ref;
+    className,
+    homeUrl,
+    logo
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
   const breakpoint = 960;
   const {
     width
@@ -64,30 +79,24 @@ function Dashboard(_ref) {
     setDrawerOpen(!drawerOpen);
   };
 
-  const contentStyle = {};
-
-  if (contentLayout === 'row') {
-    contentStyle.width = '100%';
-    contentStyle.maxWidth = '100%';
-    contentStyle.paddingLeft = 0;
-    contentStyle.paddingRight = 0;
-  }
-
-  return _react.default.createElement(Wrapper, null, _react.default.createElement(_reactHelmet.default, {
+  const isFullWidth = fullWidth || contentLayout === 'row';
+  return /*#__PURE__*/_react.default.createElement(Wrapper, Object.assign({
+    className: "dashboard ".concat(className)
+  }, rest), /*#__PURE__*/_react.default.createElement(_reactHelmet.default, {
     title: "".concat(title, "-").concat(brand)
-  }), _react.default.createElement(_AppBar.default, {
-    position: "absolute",
-    className: "appBar"
-  }, _react.default.createElement(_Toolbar.default, {
-    disableGutters: false,
-    className: "toolbar"
-  }, _react.default.createElement(_header.default, {
+  }), /*#__PURE__*/_react.default.createElement(_header.default, {
+    className: "dashboard__header",
     onToggleMenu: onToggleDrawer,
     brand: brand,
     brandAddon: brandAddon,
     description: description,
-    addons: headerAddon
-  }))), _react.default.createElement(_Drawer.default, {
+    addons: headerAddon,
+    homeUrl: homeUrl,
+    logo: logo
+  }), /*#__PURE__*/_react.default.createElement(_Box.default, {
+    display: "flex",
+    className: "dashboard__body"
+  }, /*#__PURE__*/_react.default.createElement(_Drawer.default, {
     variant: drawerMode,
     className: "drawer",
     classes: {
@@ -99,44 +108,47 @@ function Dashboard(_ref) {
       disablePortal: true,
       keepMounted: true
     }
-  }, _react.default.createElement(_sidebar.default, {
+  }, /*#__PURE__*/_react.default.createElement(_sidebar.default, {
+    className: "dashboard__sidebar",
     images: images,
     links: links,
-    prefix: prefix
-  })), _react.default.createElement("main", {
-    className: "main"
-  }, _react.default.createElement(Content, {
-    layout: contentLayout,
-    style: contentStyle,
-    maxWidth: false
-  }, children, _react.default.createElement(_Footer.default, null))));
+    prefix: prefix,
+    logo: logo
+  })), /*#__PURE__*/_react.default.createElement(_Box.default, {
+    className: "dashboard__main"
+  }, /*#__PURE__*/_react.default.createElement(_Container.default, {
+    maxWidth: isFullWidth ? false : 'lg',
+    className: "dashboard__content"
+  }, children), /*#__PURE__*/_react.default.createElement(_Footer.default, {
+    className: "dashboard__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,
-  contentLayout: _propTypes.default.string,
-  brand: _propTypes.default.string.isRequired,
   brandAddon: _propTypes.default.object,
   description: _propTypes.default.string.isRequired,
-  title: _propTypes.default.string,
   headerAddon: _propTypes.default.any,
-  prefix: _propTypes.default.string
+  prefix: _propTypes.default.string,
+  // 兼容旧版的设置，新版使用 fullWidth 进行设置
+  contentLayout: _propTypes.default.oneOf(['row', 'column']),
+  fullWidth: _propTypes.default.bool,
+  className: _propTypes.default.string,
+  homeUrl: _propTypes.default.string,
+  logo: _propTypes.default.any
 };
 Dashboard.defaultProps = {
-  contentLayout: 'column',
   title: 'Home',
+  contentLayout: 'column',
   headerAddon: null,
   brandAddon: null,
-  prefix: '/images'
-};
-const Content = (0, _styledComponents.default)(_Container.default).withConfig({
-  displayName: "dashboard__Content",
-  componentId: "arvc7q-0"
-})(["height:", ";overflow:", ";margin-top:", "px;flex:1 0 auto;display:flex;flex-direction:", ";box-sizing:border-box;max-width:1440px;@media (max-width:", "px){flex:0 1 auto;}"], props => props.layout === 'row' ? '100%' : 'auto', props => props.layout === 'row' ? 'hidden' : 'auto', props => props.layout === 'row' ? 0 : 32, props => props.layout, props => props.theme.breakpoints.values.md);
-
-const Wrapper = _styledComponents.default.div.withConfig({
-  displayName: "dashboard__Wrapper",
-  componentId: "arvc7q-1"
-})(["display:flex;.toolbar{background:", ";color:", ";margin-top:", "px;}.network-switcher{align-self:center;}.appBar{z-index:", ";background:", ";box-shadow:0 0 0 0 transparent;}.drawer{width:120px;}.drawerPaper{position:relative;padding-top:80px;white-space:no-wrap;width:120px;background:", ";box-shadow:2px 16px 10px 0 rgba(0,0,0,", ");border:0;}.search-box{@media (max-width:", "px){display:none;}}.main{flex-grow:1;padding-top:80px;height:100vh;overflow:auto;box-sizing:border-box;position:relative;@media (max-width:", "px){padding-top:50px;}.secondary-links{@media (max-width:", "px){display:none;}}}h5{margin-bottom:", "px;}"], props => props.theme.palette.background.default, props => props.theme.palette.text.primary, props => props.theme.spacing(1), props => props.theme.zIndex.drawer + 1, props => props.theme.palette.background.default, props => props.theme.palette.background.default, props => props.theme.mode === 'light' ? 0.05 : 0.5, props => props.theme.breakpoints.values.md, props => props.theme.breakpoints.values.md, props => props.theme.breakpoints.values.md, props => props.theme.spacing(2));
+  prefix: '/images',
+  fullWidth: false,
+  className: '',
+  homeUrl: '/',
+  logo: null
+};