@arcblock/ux 1.17.14 → 1.17.15

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;

package/lib/NavMenu/nav-menu.js

@@ -9,15 +9,15 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _clsx = _interopRequireDefault(require("clsx"));
 
-require("./style.css");
+var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
+
+var _style = require("./style");
 
-const _excluded = ["items", "orientation", "children", "defaultActiveId", "textColor", "activeTextColor", "bgColor"],
+const _excluded = ["items", "mode", "children", "defaultActiveId", "textColor", "activeTextColor", "bgColor", "onSelected"],
       _excluded2 = ["id", "icon", "label", "active", "onClick"],
-      _excluded3 = ["id", "icon", "label", "children"];
+      _excluded3 = ["id", "icon", "label", "children", "expandIcon"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -60,12 +60,13 @@ function NavMenu(_ref) {
 
   let {
     items,
-    orientation,
+    mode,
     children,
     defaultActiveId,
     textColor,
     activeTextColor,
-    bgColor
+    bgColor,
+    onSelected
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
@@ -82,10 +83,12 @@ function NavMenu(_ref) {
   });
   const contextValue = (0, _react.useMemo)(() => {
     return _objectSpread(_objectSpread({}, state), {}, {
+      mode,
       activate: id => {
         setState(prev => _objectSpread(_objectSpread({}, prev), {}, {
           activeId: id
         }));
+        onSelected === null || onSelected === void 0 ? void 0 : onSelected(id);
       },
       open: id => {
         setState(prev => _objectSpread(_objectSpread({}, prev), {}, {
@@ -99,7 +102,7 @@ function NavMenu(_ref) {
       }
     });
   }, [state]);
-  const classes = (0, _clsx.default)('navmenu', "navmenu--".concat(orientation), rest.className);
+  const classes = (0, _clsx.default)('navmenu', "navmenu--".concat(mode), rest.className);
 
   const renderItem = (item, index) => {
     if (item.children) {
@@ -124,9 +127,10 @@ function NavMenu(_ref) {
     );
   };
 
+  const StyledRoot = mode === 'inline' ? _style.InlineStyle : _style.HorizontalStyle;
   return /*#__PURE__*/_react.default.createElement(NavMenuContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/_react.default.createElement(Root, Object.assign({}, rest, {
+  }, /*#__PURE__*/_react.default.createElement(StyledRoot, Object.assign({}, rest, {
     className: classes,
     $textColor: textColor,
     $activeTextColor: activeTextColor,
@@ -138,33 +142,30 @@ function NavMenu(_ref) {
 
 NavMenu.propTypes = {
   items: _propTypes.default.array,
-  // 默认水平方向布局
-  orientation: _propTypes.default.oneOf(['horizontal', 'vertical']),
+  // 默认水平方向布局,
+  // inline 模式: 垂直布局, 且通过 click 事件来收缩/伸展子菜单, 适用于移动端
+  mode: _propTypes.default.oneOf(['horizontal', 'vertical', 'inline']),
   children: _propTypes.default.array,
   defaultActiveId: _propTypes.default.string,
   textColor: _propTypes.default.string,
   activeTextColor: _propTypes.default.string,
-  bgColor: _propTypes.default.string
+  bgColor: _propTypes.default.string,
+  onSelected: _propTypes.default.func
 };
 NavMenu.defaultProps = {
   items: null,
-  orientation: 'horizontal',
+  mode: 'horizontal',
   children: null,
   defaultActiveId: null,
   textColor: '#9397a1',
   activeTextColor: '#25292f',
-  bgColor: '#fff'
+  bgColor: '#fff',
+  onSelected: null
 };
-
-const Root = _styledComponents.default.nav.withConfig({
-  displayName: "nav-menu__Root",
-  componentId: "sc-1atwjw0-0"
-})(["--text-color:", ";--active-text-color:", ";--bg-color:", ";padding:8px 16px;background-color:var(--bg-color);font-size:14px;ul{list-style:none;margin:0;padding:0;}.navmenu-item,.navmenu-item a,.navmenu-sub{color:var(--text-color);}.navmenu-item--active,.navmenu-item:hover,.navmenu-item:hover a,.navmenu-item--active a,.navmenu-sub--opened{color:var(--active-text-color);}"], props => props.$textColor, props => props.$activeTextColor, props => props.$bgColor);
 /**
  * Item
  */
 
-
 function Item(_ref2) {
   let {
     id: _id,
@@ -195,14 +196,18 @@ function Item(_ref2) {
     activate(id);
   };
 
-  return /*#__PURE__*/_react.default.createElement(ItemRoot, Object.assign({}, rest, {
-    className: classes,
-    onClick: handleClick
-  }), icon && /*#__PURE__*/_react.default.createElement("span", {
-    className: "navmenu-item-icon"
-  }, icon), /*#__PURE__*/_react.default.createElement("span", {
-    className: "navmenu-item-content"
-  }, label));
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    _react.default.createElement("li", Object.assign({}, rest, {
+      className: classes,
+      onClick: handleClick
+    }), icon && /*#__PURE__*/_react.default.createElement("span", {
+      className: "navmenu-item-icon"
+    }, icon), /*#__PURE__*/_react.default.createElement("span", {
+      className: "navmenu-item-label"
+    }, label))
+  );
 }
 
 Item.propTypes = {
@@ -221,22 +226,17 @@ Item.defaultProps = {
   active: false,
   onClick: null
 };
-
-const ItemRoot = _styledComponents.default.li.withConfig({
-  displayName: "nav-menu__ItemRoot",
-  componentId: "sc-1atwjw0-1"
-})(["position:relative;cursor:pointer;a{text-decoration:none;white-space:nowrap;}a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}"]);
 /**
  * Sub
  */
 
-
 function Sub(_ref3) {
   let {
     id: _id,
     icon,
     label,
-    children
+    children,
+    expandIcon
   } = _ref3,
       rest = _objectWithoutProperties(_ref3, _excluded3);
 
@@ -244,22 +244,38 @@ function Sub(_ref3) {
   const {
     openedIds,
     open,
-    close
+    close,
+    mode
   } = (0, _react.useContext)(NavMenuContext);
+  const isOpen = openedIds.includes(id);
   const classes = (0, _clsx.default)('navmenu-sub', {
-    'navmenu-sub--opened': openedIds.includes(id)
+    'navmenu-sub--opened': isOpen
   }, rest.className);
-  return /*#__PURE__*/_react.default.createElement(SubRoot, Object.assign({}, rest, {
-    className: classes,
+  const isInlineMode = mode === 'inline'; // inline mode 时使用 click 事件控制收缩/伸展子菜单
+
+  const props = isInlineMode ? {
+    onClick: () => openedIds.includes(id) ? close(id) : open(id)
+  } : {
     onMouseEnter: () => open(id),
     onMouseLeave: () => close(id)
-  }), icon && /*#__PURE__*/_react.default.createElement("span", {
+  }; // inline mode, 避免点击子菜单项时触发父菜单的 open/close
+
+  const containerProps = isInlineMode ? {
+    onClick: e => e.stopPropagation()
+  } : {};
+  return /*#__PURE__*/_react.default.createElement("li", Object.assign({}, rest, {
+    className: classes
+  }, props), icon && /*#__PURE__*/_react.default.createElement("span", {
     className: "navmenu-sub-icon"
   }, icon), /*#__PURE__*/_react.default.createElement("span", {
-    className: "navmenu-sub-content"
-  }, label), /*#__PURE__*/_react.default.createElement("div", {
+    className: "navmenu-sub-label"
+  }, label), expandIcon && /*#__PURE__*/_react.default.createElement("span", {
+    className: "navmenu-sub-expand-icon"
+  }, (expandIcon === null || expandIcon === void 0 ? void 0 : expandIcon({
+    isOpen
+  })) || expandIcon), /*#__PURE__*/_react.default.createElement("div", Object.assign({
     className: "navmenu-sub-container"
-  }, /*#__PURE__*/_react.default.createElement("ul", {
+  }, containerProps), /*#__PURE__*/_react.default.createElement("ul", {
     className: "navmenu-sub-list"
   }, filterItems(children))));
 }
@@ -268,18 +284,24 @@ Sub.propTypes = {
   id: _propTypes.default.string,
   icon: _propTypes.default.element,
   label: _propTypes.default.node.isRequired,
-  children: _propTypes.default.array.isRequired
+  children: _propTypes.default.array.isRequired,
+  expandIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func])
 };
 Sub.defaultProps = {
   id: null,
-  icon: null
+  icon: null,
+  // eslint-disable-next-line react/prop-types
+  expandIcon: _ref4 => {
+    let {
+      isOpen
+    } = _ref4;
+    return /*#__PURE__*/_react.default.createElement(_ExpandMore.default, {
+      style: {
+        transform: "rotate(".concat(isOpen ? 180 : 0, "deg)")
+      }
+    });
+  }
 };
-
-const SubRoot = _styledComponents.default.li.withConfig({
-  displayName: "nav-menu__SubRoot",
-  componentId: "sc-1atwjw0-2"
-})(["position:relative;cursor:pointer;.navmenu-sub-container{display:none;position:absolute;}&.navmenu-sub--opened > .navmenu-sub-container{display:block;top:100%;}"]);
-
 NavMenu.Item = Item;
 NavMenu.Sub = Sub;
 var _default = NavMenu;

package/lib/NavMenu/style.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineStyle = exports.HorizontalStyle = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const NavMenuBase = _styledComponents.default.nav.withConfig({
+  displayName: "style__NavMenuBase",
+  componentId: "sc-2g7isz-0"
+})(["--text-color:", ";--active-text-color:", ";--bg-color:", ";background-color:var(--bg-color);font-size:14px;ul{list-style:none;margin:0;padding:0;}.navmenu-item,.navmenu-sub{display:flex;align-items:center;}.navmenu-item,.navmenu-item a,.navmenu-sub{color:var(--text-color);}.navmenu-item--active,.navmenu-item:hover,.navmenu-item:hover a,.navmenu-item--active a,.navmenu-sub--opened{color:var(--active-text-color);}.navmenu-item{position:relative;cursor:pointer;a{text-decoration:none;white-space:nowrap;}a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.navmenu-sub{position:relative;cursor:pointer;}.navmenu-item-icon,.navmenu-sub-icon,.navmenu-sub-expand-icon{display:flex;line-height:1;}.navmenu-item-icon,.navmenu-sub-icon{margin-right:4px;}.navmenu-item-icon > *,.navmenu-sub-icon > *{font-size:1.5em;}.navmenu-sub-expand-icon{margin-left:8px;> *{width:0.8em;height:0.8em;transition:transform 0.2s ease-in-out;}}"], props => props.$textColor, props => props.$activeTextColor, props => props.$bgColor);
+
+const HorizontalStyle = (0, _styledComponents.default)(NavMenuBase).withConfig({
+  displayName: "style__HorizontalStyle",
+  componentId: "sc-2g7isz-1"
+})(["padding:8px 16px;.navmenu-root{display:flex;align-items:center;}.navmenu-root > .navmenu-item,.navmenu-root > .navmenu-sub{margin-left:24px;}.navmenu-root > .navmenu-item:first-child,.navmenu-root > .navmenu-sub:first-child{margin-left:0;}.navmenu-sub-container{display:none;position:absolute;top:100%;}.navmenu-sub-list{padding:16px;border-radius:4px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.15);.navmenu-item + .navmenu-item{margin-top:8px;}}.navmenu-root > .navmenu-sub{> .navmenu-sub-container{left:50%;transform:translateX(-50%);padding-top:16px;}&.navmenu-sub--opened > .navmenu-sub-container{display:block;}}"]);
+/* inline mode */
+
+exports.HorizontalStyle = HorizontalStyle;
+const InlineStyle = (0, _styledComponents.default)(NavMenuBase).withConfig({
+  displayName: "style__InlineStyle",
+  componentId: "sc-2g7isz-2"
+})([".navmenu-root{display:flex;flex-direction:column;align-items:stretch;}.navmenu-item,.navmenu-sub{padding:0 16px;}.navmenu-root > .navmenu-item,.navmenu-root > .navmenu-sub{height:48px;line-height:48px;border-bottom:1px solid #eee;}.navmenu-item-icon,.navmenu-sub-icon{width:32px;margin:0;}.navmenu-sub-expand-icon{margin-left:auto;}.navmenu-sub-container{display:none;position:absolute;top:100%;left:0;right:0;.navmenu-item,.navmenu-sub{line-height:24px;}}.navmenu-sub-list{padding-left:16px;.navmenu-item,.navmenu-sub{padding-left:32px;margin-top:8px;font-size:13px;}}.navmenu-root > .navmenu-sub{&.navmenu-sub--opened{background:#eee;}}.navmenu-sub--opened > .navmenu-sub-container{display:block;}"]);
+exports.InlineStyle = InlineStyle;