@arcblock/ux 1.17.13 → 1.17.16

package/lib/AnimationWaiter/index.js

@@ -15,7 +15,7 @@ var _reactLottiePlayer = _interopRequireDefault(require("react-lottie-player"));
 
 var _defaultAnimation = _interopRequireDefault(require("./default-animation.json"));
 
-const _excluded = ["animationData", "size", "message", "messageDuration", "tips", "tipsDuration", "maybeDuration", "speed", "increaseSpeed"];
+const _excluded = ["animationData", "size", "message", "messageDuration", "messageLoop", "tips", "tipsDuration", "maybeDuration", "speed", "increaseSpeed"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -34,6 +34,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * @param {Number} size 动画的尺寸，单位px
  * @param {String｜Array} message 动画下方的文字；数组情况下会在一定时间切换文案
  * @param {Number} messageDuration 动画下方的文字为数组时，每个文案的持续时间；默认5000ms
+ * @param {Number} messageLoop 动画下方的文字为数组时，文案是否循环播放
  * @param {Array} tips 底部的提示元素
  * @param {Number} tipsDuration 底部提示的切换时间，单位毫秒，默认3000ms
  * @param {Number} speed 动画默认的播放速度
@@ -47,6 +48,7 @@ function AnimationWaiter(_ref) {
     size,
     message,
     messageDuration,
+    messageLoop,
     tips,
     tipsDuration,
     maybeDuration,
@@ -59,8 +61,7 @@ function AnimationWaiter(_ref) {
   const [currentSpeed, setCurrentSpeed] = (0, _react.useState)(speed);
   const [desc, setDesc] = (0, _react.useState)(''); // 动画的开始时间
 
-  const startTime = (0, _react.useRef)(new Date().getTime()); // 省略号
-
+  const startTime = (0, _react.useRef)(new Date().getTime());
   (0, _react.useEffect)(() => {
     if (!message) {
       return;
@@ -75,7 +76,11 @@ function AnimationWaiter(_ref) {
         msgId++;
 
         if (msgId >= message.length) {
-          msgId = 0;
+          if (messageLoop) {
+            msgId = 0;
+          } else {
+            msgId = message.length - 1;
+          }
         }
 
         setDesc(message[msgId]);
@@ -150,6 +155,7 @@ AnimationWaiter.propTypes = {
   size: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   message: _propTypes.default.any,
   messageDuration: _propTypes.default.number,
+  messageLoop: _propTypes.default.bool,
   tips: _propTypes.default.array,
   tipsDuration: _propTypes.default.number,
   speed: _propTypes.default.number,
@@ -161,6 +167,7 @@ AnimationWaiter.defaultProps = {
   size: '',
   message: '',
   messageDuration: 5000,
+  messageLoop: true,
   tips: [],
   tipsDuration: 5000,
   speed: 1,

package/lib/Blocklet/blocklet.js

@@ -36,7 +36,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 const Div = _styledComponents.default.div.withConfig({
   displayName: "blocklet__Div",
   componentId: "sc-atxvkd-0"
-})(["&.arcblock-blocklet{padding:16px 16px 0 16px;}.arcblock-blocklet__content{cursor:pointer;display:flex;", "{align-items:center;}}.arcblock-blocklet__cover{width:64px;height:64px;margin-right:16px;overflow:hidden;border-radius:12px;transform:translateZ(0);", "{width:80px;height:80px;margin-bottom:12px;}}.arcblock-blocklet__button--hover{&:not(.Mui-disabled){position:relative;z-index:1;&::before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;transition:opacity 0.3s;}&:hover::before{opacity:0;}&::after{content:'';position:absolute;height:100%;width:100%;background-color:", ";transform:scale(0.1);opacity:0;z-index:-1;transition:transform 0.3s,opacity 0.3s,background-color 0.3s;}&:hover::after{opacity:1;transform-origin:center;transform:scale(1);}}&:not(.Mui-disabled){background-color:transparent !important;color:", ";}&:not(.Mui-disabled){&:hover{color:", ";}}}.arcblock-blocklet__info{flex:1;overflow:hidden;border-bottom:1px solid ", ";padding-bottom:24px;}.arcblock-blocklet__text{height:57px;overflow:hidden;}.arcblock-blocklet__title{margin:0;font-size:16px;font-weight:500;line-height:19px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:38px;word-break:break-all;}.arcblock-blocklet__describe{margin-top:2px;color:", ";font-size:14px;font-weight:500;line-height:17px;max-height:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__version{color:", ";font-size:12px;}"], props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.up('sm'), props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white, props => props.theme.palette.divider, props => props.theme.palette.grey[600], props => props.theme.palette.grey[600]);
+})(["&.arcblock-blocklet{padding:16px 16px 0 16px;}.arcblock-blocklet__content{cursor:pointer;display:flex;", "{align-items:center;}}.arcblock-blocklet__cover{width:64px;height:64px;margin-right:16px;overflow:hidden;border-radius:12px;transform:translateZ(0);", "{width:80px;height:80px;margin-bottom:12px;}}.arcblock-blocklet__button--hover{&:not(.Mui-disabled){position:relative;z-index:1;&::before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;transition:opacity 0.3s;}&:hover::before{opacity:0;}&::after{content:'';position:absolute;height:100%;width:100%;background-color:", ";transform:scale(0.1);opacity:0;z-index:-1;transition:transform 0.3s,opacity 0.3s,background-color 0.3s;}&:hover::after{opacity:1;transform-origin:center;transform:scale(1);}}&:not(.Mui-disabled){background-color:transparent !important;color:", ";}&:not(.Mui-disabled){&:hover{color:", ";}}}.arcblock-blocklet__info{flex:1;overflow:hidden;border-bottom:1px solid ", ";padding-bottom:24px;}.arcblock-blocklet__text{height:57px;overflow:hidden;}.arcblock-blocklet__title{margin:0;font-size:16px;font-weight:500;line-height:19px;max-height:19px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__describe{margin-top:4px;color:", ";font-size:14px;font-weight:500;line-height:17px;max-height:34px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-all;}.arcblock-blocklet__version{color:", ";font-size:12px;}"], props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.up('sm'), props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white, props => props.theme.palette.divider, props => props.theme.palette.grey[600], props => props.theme.palette.grey[600]);
 
 function BlockletStore(_ref) {
   let {

package/lib/Header/header.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Box = _interopRequireDefault(require("@material-ui/core/Box"));
+
+var _Container = _interopRequireDefault(require("@material-ui/core/Container"));
+
+var _useTheme = _interopRequireDefault(require("@material-ui/core/styles/useTheme"));
+
+const _excluded = ["logo", "brand", "brandAddon", "description", "children", "addons", "prepend", "containerComponent"];
+
+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; }
+
+/**
+ * Header 组件
+ * TODO: Layout/dashboard 可以复用此处的 header
+ */
+function Header(_ref) {
+  let {
+    logo,
+    brand,
+    brandAddon,
+    description,
+    children,
+    addons,
+    prepend,
+    containerComponent: ContainerComponent
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/_react.default.createElement(Root, Object.assign({}, rest, {
+    $theme: theme
+  }), /*#__PURE__*/_react.default.createElement(ContainerComponent, {
+    className: "header-container"
+  }, prepend, logo && /*#__PURE__*/_react.default.createElement("div", {
+    className: "header-logo"
+  }, logo), /*#__PURE__*/_react.default.createElement("div", {
+    className: "header-brand"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "header-brand-title"
+  }, /*#__PURE__*/_react.default.createElement("h2", null, brand), /*#__PURE__*/_react.default.createElement("div", {
+    className: "header-brand-addon"
+  }, brandAddon)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "header-brand-desc"
+  }, description)), children, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    flexGrow: 1
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "header-addons"
+  }, addons)));
+}
+
+Header.propTypes = {
+  logo: _propTypes.default.node,
+  // 相当于 Title
+  brand: _propTypes.default.string,
+  // brand 右侧的内容区域, 可显示一个 badge 或 tag
+  brandAddon: _propTypes.default.node,
+  // brand 下方的描述
+  description: _propTypes.default.string,
+  children: _propTypes.default.node,
+  // 右侧区域, 可以放置 icons/actions/login 等
+  addons: _propTypes.default.node,
+  // logo 左侧内容
+  prepend: _propTypes.default.node,
+  // 默认使用 mui 的 Container, 如果不想限制 header 内容区域的宽度, 可以设置为 div
+  containerComponent: _propTypes.default.elementType
+};
+Header.defaultProps = {
+  logo: null,
+  brand: null,
+  brandAddon: null,
+  description: null,
+  children: null,
+  addons: null,
+  prepend: null,
+  containerComponent: _Container.default
+};
+
+const Root = _styledComponents.default.div.withConfig({
+  displayName: "header__Root",
+  componentId: "sc-15qnwg1-0"
+})(["position:relative;z-index:", ";font-size:14px;background:", ";.header-container{display:flex;align-items:center;height:64px;padding:8px 16px;}.header-logo{display:inline-flex;justify-content:center;position:relative;height:40px;margin-right:16px;img,svg{width:auto;height:100%;}> a{height:100%;line-height:1;}> a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.header-brand{display:flex;flex-direction:column;flex-shrink:0;margin-right:16px;.header-brand-title{display:flex;align-items:center;h2{font-size:16px;}.header-brand-addon{margin-left:8px;}}.header-brand-desc{color:#9397a1;}}.header-addons{display:flex;align-items:center;}", "{.header-brand{margin-right:12px;.header-brand-title{h2{font-size:14px;}}}}", "{.header-container{height:56px;}.header-menu{display:inline-block;}.header-logo{height:32px;}.header-brand{display:none;}}"], props => props.$theme.zIndex.drawer + 1, props => props.$theme.palette.common.white, props => props.$theme.breakpoints.down('md'), props => props.$theme.breakpoints.down('sm'));
+
+var _default = Header;
+exports.default = _default;

package/lib/Header/index.js

@@ -3,122 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _Box = _interopRequireDefault(require("@material-ui/core/Box"));
-
-var _useTheme = _interopRequireDefault(require("@material-ui/core/styles/useTheme"));
-
-var _useMediaQuery = _interopRequireDefault(require("@material-ui/core/useMediaQuery"));
-
-var _Menu = _interopRequireDefault(require("@material-ui/icons/Menu"));
-
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
-
-const _excluded = ["logo", "brand", "brandAddon", "description", "children", "addons", "mobile", "onToggleMenu"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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; }
-
-/**
- * Header 组件
- * TODO: Layout/dashboard 可以复用此处的 header
- */
-function Header(_ref) {
-  let {
-    logo,
-    brand,
-    brandAddon,
-    description,
-    children,
-    addons,
-    mobile,
-    onToggleMenu
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  const theme = (0, _useTheme.default)();
-  const isMobile = (0, _useMediaQuery.default)(theme.breakpoints.down('sm'));
-
-  const _mobile = _objectSpread(_objectSpread({}, Header.defaultProps.mobile), mobile); // 暂时不要通过 display: none 隐藏 logo, https://blog.patw.me/archives/1820/inline-svg-same-id-and-display-none-issue/
-
-
-  const hideLogo = isMobile && _mobile.hideLogo;
-  return /*#__PURE__*/_react.default.createElement(Root, Object.assign({}, rest, {
-    $theme: theme
-  }), _mobile.enableMenu && /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-    color: "inherit",
-    edge: "start",
-    className: "header-menu",
-    onClick: onToggleMenu
-  }, /*#__PURE__*/_react.default.createElement(_Menu.default, null)), !hideLogo && /*#__PURE__*/_react.default.createElement("div", {
-    className: "header-logo"
-  }, logo), /*#__PURE__*/_react.default.createElement("div", {
-    className: "header-brand"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "header-brand-title"
-  }, /*#__PURE__*/_react.default.createElement("h2", null, brand), /*#__PURE__*/_react.default.createElement("div", {
-    className: "header-brand-addon"
-  }, brandAddon)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "header-brand-desc"
-  }, description)), children, /*#__PURE__*/_react.default.createElement(_Box.default, {
-    flexGrow: 1
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "header-addons"
-  }, addons));
-}
+Object.defineProperty(exports, "Header", {
+  enumerable: true,
+  get: function get() {
+    return _header.default;
+  }
+});
+Object.defineProperty(exports, "ResponsiveHeader", {
+  enumerable: true,
+  get: function get() {
+    return _responsiveHeader.default;
+  }
+});
 
-Header.propTypes = {
-  logo: _propTypes.default.any,
-  // 相当于 Title
-  brand: _propTypes.default.string,
-  // brand 右侧的内容区域, 可显示一个 badge 或 tag
-  brandAddon: _propTypes.default.any,
-  // brand 下方的描述
-  description: _propTypes.default.string,
-  children: _propTypes.default.any,
-  // 右侧区域, 可以放置 icons/actions/login 等
-  addons: _propTypes.default.any,
-  // 窄屏下配置
-  mobile: _propTypes.default.shape({
-    enableMenu: _propTypes.default.bool,
-    hideLogo: _propTypes.default.bool
-  }),
-  onToggleMenu: _propTypes.default.func
-};
-Header.defaultProps = {
-  logo: null,
-  brand: null,
-  brandAddon: null,
-  description: null,
-  children: null,
-  addons: null,
-  mobile: {
-    enableMenu: true,
-    hideLogo: true
-  },
-  onToggleMenu: () => {}
-};
+var _header = _interopRequireDefault(require("./header"));
 
-const Root = _styledComponents.default.div.withConfig({
-  displayName: "Header__Root",
-  componentId: "sc-ea5eli-0"
-})(["display:flex;align-items:center;position:relative;z-index:", ";height:64px;padding:12px 24px;font-size:14px;background:#fff;.header-menu{display:none;}.header-logo{display:inline-flex;justify-content:center;position:relative;height:40px;margin-right:16px;img,svg{width:auto;height:100%;}> a{height:100%;line-height:1;}> a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.header-brand{display:flex;flex-direction:column;margin-right:16px;.header-brand-title{display:flex;align-items:center;h2{font-size:16px;}.header-brand-addon{margin-left:8px;}}.header-brand-desc{color:#9397a1;}}.header-addons{display:flex;align-items:center;}", "{height:56px;padding:8px 16px;.header-menu{display:inline-block;}.header-logo{height:32px;}.header-brand{display:none;}}"], props => props.$theme.zIndex.drawer + 1, props => props.$theme.breakpoints.down('sm'));
+var _responsiveHeader = _interopRequireDefault(require("./responsive-header"));
 
-var _default = Header;
-exports.default = _default;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/Header/responsive-header.js

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Menu = _interopRequireDefault(require("@material-ui/icons/Menu"));
+
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+
+var _useTheme = _interopRequireDefault(require("@material-ui/core/styles/useTheme"));
+
+var _useMediaQuery = _interopRequireDefault(require("@material-ui/core/useMediaQuery"));
+
+var _Drawer = _interopRequireDefault(require("@material-ui/core/Drawer"));
+
+var _header = _interopRequireDefault(require("./header"));
+
+const _excluded = ["menu", "prepend", "children"];
+
+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; }
+
+/**
+ * ResponsiveHeader
+ * - 窄屏下显示 burge menu
+ * - 窄屏下将 children 区域显示到 menu 中
+ *
+ * 注意: 暂时不要通过 display: none 隐藏 logo, https://blog.patw.me/archives/1820/inline-svg-same-id-and-display-none-issue/
+ */
+function ResponsiveHeader(_ref) {
+  let {
+    menu,
+    prepend,
+    children
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const theme = (0, _useTheme.default)();
+  const isMobile = (0, _useMediaQuery.default)(theme.breakpoints.down('sm'));
+  const [drawerOpen, setDrawerOpen] = (0, _react.useState)(false);
+
+  const _children = typeof children === 'function' ? children({
+    isMobile,
+    closeMenu: () => setDrawerOpen(false)
+  }) : children;
+
+  const {
+    logo,
+    brand,
+    brandAddon,
+    description
+  } = rest; // 如果 children 没有值, 则使用普通的 Header 组件渲染 (此时并没有什么内容需要在 menu 中显示)
+
+  if (!children) {
+    return /*#__PURE__*/_react.default.createElement(_header.default, Object.assign({
+      prepend: prepend
+    }, rest));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(Root, Object.assign({
+    prepend: prepend || /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+      color: "inherit",
+      edge: "start",
+      className: "header-menu",
+      onClick: () => setDrawerOpen(true)
+    }, /*#__PURE__*/_react.default.createElement(_Menu.default, null))
+  }, rest, {
+    logo: isMobile ? null : logo,
+    $theme: theme
+  }), !isMobile && _children, isMobile && /*#__PURE__*/_react.default.createElement(_Drawer.default, {
+    open: drawerOpen,
+    onClose: () => setDrawerOpen(false),
+    ModalProps: {
+      disablePortal: true,
+      keepMounted: true
+    }
+  }, /*#__PURE__*/_react.default.createElement(Sidebar, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "header-sidebar-head"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "header-sidebar-logo"
+  }, logo), brand && /*#__PURE__*/_react.default.createElement("h2", null, brand), description && /*#__PURE__*/_react.default.createElement("p", {
+    className: "header-sidebar-description"
+  }, description), brandAddon && /*#__PURE__*/_react.default.createElement("div", {
+    className: "header-sidebar-brandaddon"
+  }, brandAddon)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "header-sidebar-content"
+  }, _children))));
+}
+
+ResponsiveHeader.propTypes = _objectSpread(_objectSpread({}, _header.default.PropTypes), {}, {
+  // 如果是 function, 则
+  // - 会传入一个 isMobile 参数, isMobile 为 true 时, 表示 children 会显示在 menu 中, 可以根据 isMobile 参数调整要渲染的内容, 比如如果 isMobile 为 true 则使用 inline 模式的 NavMenu (适用于移动端)
+  // - 会传入一个 closeMenu 参数, 可以关闭 menu
+  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func])
+});
+ResponsiveHeader.defaultProps = _objectSpread({}, _header.default.defaultProps);
+const Root = (0, _styledComponents.default)(_header.default).withConfig({
+  displayName: "responsive-header__Root",
+  componentId: "sc-1dugv47-0"
+})([".header-menu{display:none;}", "{.header-menu{display:block;}}"], props => props.$theme.breakpoints.down('sm'));
+/**
+ * Sidebar
+ */
+
+const Sidebar = _styledComponents.default.div.withConfig({
+  displayName: "responsive-header__Sidebar",
+  componentId: "sc-1dugv47-1"
+})(["min-width:280px;font-size:14px;.header-sidebar-head{display:flex;flex-direction:column;align-items:center;padding:24px 0;border-bottom:1px solid #eee;font-size:12px;.header-sidebar-logo{min-width:44px;height:44px;font-size:44px;> *{width:auto;height:100%;}> a{display:block;}img{max-width:100%;max-height:100%;}}h2{margin-top:12px;font-size:14px;}.header-sidebar-description{margin:2px 0 0 0;}.header-sidebar-brandaddon{margin-top:8px;}}.header-sidebar-content{padding:16px 0;}"]);
+
+var _default = ResponsiveHeader;
+exports.default = _default;