@arcblock/ux 2.9.90 → 2.10.0

package/lib/NavMenu/nav-menu.js

@@ -1,116 +1,101 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _MoreHoriz = _interopRequireDefault(require("@mui/icons-material/MoreHoriz"));
-var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
-var _Menu = _interopRequireDefault(require("@mui/icons-material/Menu"));
-var _ahooks = require("ahooks");
-var _style = require("./style");
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["items", "mode", "children", "activeId", "textColor", "activeTextColor", "bgColor", "onSelected"],
-  _excluded2 = ["id", "icon", "label", "active", "onClick"],
-  _excluded3 = ["id", "icon", "label", "children", "expandIcon"];
-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; }
-const NavMenuContext = /*#__PURE__*/(0, _react.createContext)();
+import { Children, cloneElement, useEffect, createContext, useContext, useMemo, useState, useRef, useCallback, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import MenuIcon from '@mui/icons-material/Menu';
+import { useMemoizedFn } from 'ahooks';
+import { HorizontalStyle, InlineStyle } from './style';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const NavMenuContext = /*#__PURE__*/createContext();
 
 // 过滤 children 中的 Item/Sub, 忽略其它类型的 element
 function filterItems(children) {
   if (children) {
-    return _react.Children.toArray(children).filter(child => child.type === Item || child.type === Sub);
+    return Children.toArray(children).filter(child => child.type === Item || child.type === Sub);
   }
   return null;
 }
 function useUniqueId(id) {
-  const _id = (0, _react.useRef)(id || "navmenu-item-id-".concat(Math.random().toString(36).slice(2)));
+  const _id = useRef(id || `navmenu-item-id-${Math.random().toString(36).slice(2)}`);
   return _id.current;
 }
 
 /**
  * NavMenu, 导航组件, 可用于 header/footer/sidebar
  */
-function NavMenu(_ref) {
-  var _children, _itemRefs$current, _children2;
-  let {
-      items,
-      mode,
-      children,
-      activeId,
-      textColor,
-      activeTextColor,
-      bgColor,
-      onSelected
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
+function NavMenu({
+  items,
+  mode,
+  children,
+  activeId,
+  textColor,
+  activeTextColor,
+  bgColor,
+  onSelected,
+  ...rest
+}) {
   // eslint-disable-next-line no-param-reassign
   children = filterItems(children);
-  if (!(items !== null && items !== void 0 && items.length) && !((_children = children) !== null && _children !== void 0 && _children.length)) {
+  if (!items?.length && !children?.length) {
     throw new Error("One of 'items' or 'children' is required by NavMenu component.");
   }
-  const [state, setState] = (0, _react.useState)({
+  const [state, setState] = useState({
     activeId,
     openedIds: []
   });
-  const activate = (0, _react.useCallback)(id => {
-    setState(prev => _objectSpread(_objectSpread({}, prev), {}, {
+  const activate = useCallback(id => {
+    setState(prev => ({
+      ...prev,
       activeId: id
     }));
-    onSelected === null || onSelected === void 0 ? void 0 : onSelected(id);
+    onSelected?.(id);
   }, [onSelected]);
-  const open = (0, _react.useCallback)(id => {
-    setState(prev => _objectSpread(_objectSpread({}, prev), {}, {
+  const open = useCallback(id => {
+    setState(prev => ({
+      ...prev,
       openedIds: [...prev.openedIds, id]
     }));
   }, []);
-  const close = (0, _react.useCallback)(id => {
-    setState(prev => _objectSpread(_objectSpread({}, prev), {}, {
+  const close = useCallback(id => {
+    setState(prev => ({
+      ...prev,
       openedIds: prev.openedIds.filter(item => item !== id)
     }));
   }, []);
-  const contextValue = (0, _react.useMemo)(() => {
-    return _objectSpread(_objectSpread({}, state), {}, {
+  const contextValue = useMemo(() => {
+    return {
+      ...state,
       mode,
       activate,
       open,
       close
-    });
+    };
   }, [state, mode, activate, open, close]);
-  const [hiddenItemCount, setHiddenItemCount] = (0, _react.useState)(0);
-  const navMenuRef = (0, _react.useRef)();
-  const itemRefs = (0, _react.useRef)([]);
-  const moreIconRef = (0, _react.useRef)();
-  const isAllItemsHidden = hiddenItemCount === ((_itemRefs$current = itemRefs.current) === null || _itemRefs$current === void 0 ? void 0 : _itemRefs$current.length);
-  const icon = isAllItemsHidden ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_MoreHoriz.default, {});
+  const [hiddenItemCount, setHiddenItemCount] = useState(0);
+  const navMenuRef = useRef();
+  const itemRefs = useRef([]);
+  const moreIconRef = useRef();
+  const isAllItemsHidden = hiddenItemCount === itemRefs.current?.length;
+  const icon = isAllItemsHidden ? /*#__PURE__*/_jsx(MenuIcon, {}) : /*#__PURE__*/_jsx(MoreHorizIcon, {});
   const style = isAllItemsHidden ? {
     marginLeft: '0px'
   } : undefined;
   const renderChildrenWithRef = childrenElement => {
-    return _react.Children.map(childrenElement, (child, index) => {
-      return /*#__PURE__*/(0, _react.cloneElement)(child, {
+    return Children.map(childrenElement, (child, index) => {
+      return /*#__PURE__*/cloneElement(child, {
         ref: el => {
           itemRefs.current[index] = el;
         }
       });
     });
   };
-  const checkItemsFit = (0, _ahooks.useMemoizedFn)(() => {
-    var _navMenuRef$current;
+  const checkItemsFit = useMemoizedFn(() => {
     let totalWidthUsed = 0;
     let newHiddenCount = 0;
     let leftAllHidden = false;
-    const containerWidth = ((_navMenuRef$current = navMenuRef.current) === null || _navMenuRef$current === void 0 ? void 0 : _navMenuRef$current.offsetWidth) || 0;
+    const containerWidth = navMenuRef.current?.offsetWidth || 0;
     const moreIconWidth = moreIconRef.current ? moreIconRef.current.offsetWidth + parseFloat(window.getComputedStyle(moreIconRef.current).marginLeft) : 0;
     itemRefs.current.forEach((item, index) => {
       if (item) {
@@ -130,7 +115,7 @@ function NavMenu(_ref) {
       setHiddenItemCount(newHiddenCount);
     }
   }, [hiddenItemCount]);
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     if (mode === 'horizontal') {
       checkItemsFit();
       window.addEventListener('resize', checkItemsFit);
@@ -141,21 +126,21 @@ function NavMenu(_ref) {
     return undefined;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mode]);
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     // NavMenu#activeId 和 Item#active prop 都可以用来控制激活状态 (一般不会混用这两种方式)
     // 如果未传入 NavMenu#activeId, 应该避免设置一个空值的 activeId 状态 (会与 Item#active 冲突)
     if (activeId !== undefined && activeId !== null) {
-      setState(prev => _objectSpread(_objectSpread({}, prev), {}, {
+      setState(prev => ({
+        ...prev,
         activeId
       }));
     }
   }, [activeId]);
-  const classes = (0, _clsx.default)('navmenu', "navmenu--".concat(mode), rest.className);
-  const renderItem = function renderItem(item, index) {
-    let isTopLevel = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-    if (item !== null && item !== void 0 && item.children) {
+  const classes = clsx('navmenu', `navmenu--${mode}`, rest.className);
+  const renderItem = (item, index, isTopLevel = false) => {
+    if (item?.children) {
       // 对于 Sub 组件，如果它是顶级组件，则包含 ref
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Sub, {
+      return /*#__PURE__*/_jsx(Sub, {
         id: item.id,
         icon: item.icon,
         label: item.label,
@@ -167,7 +152,7 @@ function NavMenu(_ref) {
     }
 
     // 顶级 Item 组件总是包含 ref
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
+    return /*#__PURE__*/_jsx(Item, {
       id: item.id,
       icon: item.icon,
       label: item.label,
@@ -177,19 +162,20 @@ function NavMenu(_ref) {
       } : undefined
     }, index);
   };
-  const content = items ? items === null || items === void 0 ? void 0 : items.slice(-hiddenItemCount).map((item, index) => renderItem(item, index)) : (_children2 = children) === null || _children2 === void 0 ? void 0 : _children2.slice(-hiddenItemCount);
-  const StyledRoot = mode === 'inline' ? _style.InlineStyle : _style.HorizontalStyle;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(NavMenuContext.Provider, {
+  const content = items ? items?.slice(-hiddenItemCount).map((item, index) => renderItem(item, index)) : children?.slice(-hiddenItemCount);
+  const StyledRoot = mode === 'inline' ? InlineStyle : HorizontalStyle;
+  return /*#__PURE__*/_jsx(NavMenuContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledRoot, _objectSpread(_objectSpread({}, rest), {}, {
+    children: /*#__PURE__*/_jsx(StyledRoot, {
+      ...rest,
       className: classes,
       $textColor: textColor,
       $activeTextColor: activeTextColor,
       $bgColor: bgColor,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
+      children: /*#__PURE__*/_jsxs("ul", {
         className: "navmenu-root",
         ref: navMenuRef,
-        children: [items ? items.map((item, index) => renderItem(item, index, true)) : renderChildrenWithRef(children), hiddenItemCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(Sub, {
+        children: [items ? items.map((item, index) => renderItem(item, index, true)) : renderChildrenWithRef(children), hiddenItemCount > 0 && /*#__PURE__*/_jsx(Sub, {
           expandIcon: false,
           icon: icon,
           label: "",
@@ -198,20 +184,20 @@ function NavMenu(_ref) {
           children: content
         })]
       })
-    }))
+    })
   });
 }
 NavMenu.propTypes = {
-  items: _propTypes.default.array,
+  items: PropTypes.array,
   // 默认水平方向布局,
   // inline 模式: 垂直布局, 且通过 click 事件来收缩/伸展子菜单, 适用于移动端
-  mode: _propTypes.default.oneOf(['horizontal', 'vertical', 'inline']),
-  children: _propTypes.default.array,
-  activeId: _propTypes.default.string,
-  textColor: _propTypes.default.string,
-  activeTextColor: _propTypes.default.string,
-  bgColor: _propTypes.default.string,
-  onSelected: _propTypes.default.func
+  mode: PropTypes.oneOf(['horizontal', 'vertical', 'inline']),
+  children: PropTypes.array,
+  activeId: PropTypes.string,
+  textColor: PropTypes.string,
+  activeTextColor: PropTypes.string,
+  bgColor: PropTypes.string,
+  onSelected: PropTypes.func
 };
 NavMenu.defaultProps = {
   items: null,
@@ -227,56 +213,56 @@ NavMenu.defaultProps = {
 /**
  * Item
  */
-const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
-  let {
-      id: _id,
-      icon,
-      label,
-      active,
-      onClick
-    } = _ref2,
-    rest = _objectWithoutProperties(_ref2, _excluded2);
+const Item = /*#__PURE__*/forwardRef(({
+  id: _id,
+  icon,
+  label,
+  active,
+  onClick,
+  ...rest
+}, ref) => {
   const id = useUniqueId(_id);
   const {
     activeId,
     activate
-  } = (0, _react.useContext)(NavMenuContext);
-  const classes = (0, _clsx.default)('navmenu-item', {
+  } = useContext(NavMenuContext);
+  const classes = clsx('navmenu-item', {
     'navmenu-item--active': activeId === id
   }, rest.className);
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     if (active) {
       activate(id);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [active]);
   const handleClick = () => {
-    onClick === null || onClick === void 0 ? void 0 : onClick();
+    onClick?.();
     activate(id);
   };
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    (0, _jsxRuntime.jsxs)("li", _objectSpread(_objectSpread({}, rest), {}, {
+    _jsxs("li", {
+      ...rest,
       className: classes,
       onClick: handleClick,
       ref: ref,
-      children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: [icon && /*#__PURE__*/_jsx("span", {
         className: "navmenu-item-icon",
         children: icon
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      }), /*#__PURE__*/_jsx("span", {
         className: "navmenu-item-label",
         children: label
       })]
-    }))
+    })
   );
 });
 Item.propTypes = {
-  id: _propTypes.default.string,
-  icon: _propTypes.default.element,
-  label: _propTypes.default.node,
-  active: _propTypes.default.bool,
-  onClick: _propTypes.default.func
+  id: PropTypes.string,
+  icon: PropTypes.element,
+  label: PropTypes.node,
+  active: PropTypes.bool,
+  onClick: PropTypes.func
 };
 Item.defaultProps = {
   id: null,
@@ -289,24 +275,23 @@ Item.defaultProps = {
 /**
  * Sub
  */
-const Sub = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
-  let {
-      id: _id,
-      icon,
-      label,
-      children,
-      expandIcon
-    } = _ref3,
-    rest = _objectWithoutProperties(_ref3, _excluded3);
+const Sub = /*#__PURE__*/forwardRef(({
+  id: _id,
+  icon,
+  label,
+  children,
+  expandIcon,
+  ...rest
+}, ref) => {
   const id = useUniqueId(_id);
   const {
     openedIds,
     open,
     close,
     mode
-  } = (0, _react.useContext)(NavMenuContext);
+  } = useContext(NavMenuContext);
   const isOpen = openedIds.includes(id);
-  const classes = (0, _clsx.default)('navmenu-sub', {
+  const classes = clsx('navmenu-sub', {
     'navmenu-sub--opened': isOpen
   }, rest.className);
   const isInlineMode = mode === 'inline';
@@ -321,53 +306,53 @@ const Sub = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   const containerProps = isInlineMode ? {
     onClick: e => e.stopPropagation()
   } : {};
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", _objectSpread(_objectSpread(_objectSpread({}, rest), {}, {
-    className: classes
-  }, props), {}, {
+  return /*#__PURE__*/_jsxs("li", {
+    ...rest,
+    className: classes,
+    ...props,
     ref: ref,
-    children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    children: [icon && /*#__PURE__*/_jsx("span", {
       className: "navmenu-sub-icon",
       children: icon
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    }), /*#__PURE__*/_jsx("span", {
       className: "navmenu-sub-label",
       children: label
-    }), expandIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    }), expandIcon && /*#__PURE__*/_jsx("span", {
       className: "navmenu-sub-expand-icon",
-      children: (expandIcon === null || expandIcon === void 0 ? void 0 : expandIcon({
+      children: expandIcon?.({
         isOpen
-      })) || expandIcon
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
-      className: "navmenu-sub-container"
-    }, containerProps), {}, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+      }) || expandIcon
+    }), /*#__PURE__*/_jsx("div", {
+      className: "navmenu-sub-container",
+      ...containerProps,
+      children: /*#__PURE__*/_jsx("ul", {
         className: "navmenu-sub-list",
         children: filterItems(children)
       })
-    }))]
-  }));
+    })]
+  });
 });
 Sub.propTypes = {
-  id: _propTypes.default.string,
-  icon: _propTypes.default.element,
-  label: _propTypes.default.node.isRequired,
-  children: _propTypes.default.array.isRequired,
-  expandIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func])
+  id: PropTypes.string,
+  icon: PropTypes.element,
+  label: PropTypes.node.isRequired,
+  children: PropTypes.array.isRequired,
+  expandIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
 };
 Sub.defaultProps = {
   id: null,
   icon: null,
   // eslint-disable-next-line react/prop-types
-  expandIcon: _ref4 => {
-    let {
-      isOpen
-    } = _ref4;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {
+  expandIcon: ({
+    isOpen
+  }) => {
+    return /*#__PURE__*/_jsx(ExpandMoreIcon, {
       style: {
-        transform: "rotate(".concat(isOpen ? 180 : 0, "deg)")
+        transform: `rotate(${isOpen ? 180 : 0}deg)`
       }
     });
   }
 };
 NavMenu.Item = Item;
 NavMenu.Sub = Sub;
-var _default = exports.default = NavMenu;
+export default NavMenu;

package/lib/NavMenu/style.js

@@ -1,14 +1,181 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.InlineStyle = exports.HorizontalStyle = void 0;
-var _Theme = require("../Theme");
-var _templateObject, _templateObject2, _templateObject3;
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const NavMenuBase = (0, _Theme.styled)('nav')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  font-size: 16px;\n  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .navmenu-item,\n  .navmenu-sub {\n    display: flex;\n    align-items: center;\n  }\n  a {\n    color: inherit;\n    text-decoration: none;\n  }\n  /* active/hover */\n  .navmenu-item,\n  .navmenu-sub {\n    color: ", ";\n  }\n  .navmenu-item--active,\n  .navmenu-item:hover,\n  .navmenu-sub--opened {\n    color: ", ";\n  }\n\n  .navmenu-item {\n    position: relative;\n    cursor: pointer;\n    transition: color 0.2s ease-in-out;\n    a {\n      white-space: nowrap;\n    }\n    a::before {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      background-color: transparent;\n      content: '';\n    }\n  }\n\n  .navmenu-sub {\n    position: relative;\n    cursor: pointer;\n  }\n  /* icon & expand icon */\n  .navmenu-item-icon,\n  .navmenu-sub-icon,\n  .navmenu-sub-expand-icon {\n    display: flex;\n    line-height: 1;\n  }\n  .navmenu-item-icon,\n  .navmenu-sub-icon {\n    margin-right: 4px;\n  }\n  .navmenu-item-icon > *,\n  .navmenu-sub-icon > * {\n    width: auto;\n    height: 22px;\n    max-height: 22px;\n    font-size: 1.5em;\n  }\n  .navmenu-sub-expand-icon {\n    margin-left: 8px;\n    > * {\n      width: 0.8em;\n      height: 0.8em;\n      transition: transform 0.2s ease-in-out;\n    }\n  }\n"])), props => props.$bgColor, props => props.$textColor, props => props.$activeTextColor);
-const HorizontalStyle = exports.HorizontalStyle = (0, _Theme.styled)(NavMenuBase)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 8px 16px;\n  min-width: 50px;\n  flex-grow: 1;\n\n  .navmenu-root {\n    display: flex;\n    align-items: center;\n  }\n  /* \u9876\u7EA7\u83DC\u5355\u95F4\u9694 */\n  .navmenu-root > .navmenu-item,\n  .navmenu-root > .navmenu-sub {\n    margin-left: 24px;\n    white-space: nowrap;\n  }\n  .navmenu-root > .navmenu-item:first-of-type,\n  .navmenu-root > .navmenu-sub:first-of-type {\n    margin-left: 0;\n  }\n\n  /* \u5B50\u7EA7\u5217\u8868 */\n  .navmenu-sub-container {\n    display: none;\n    position: absolute;\n    top: 100%;\n  }\n  .navmenu-sub-list {\n    padding: 16px;\n    border-radius: 4px;\n    background: #fff;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n    .navmenu-item + .navmenu-item {\n      margin-top: 8px;\n    }\n  }\n  /* \u4E8C\u7EA7 sub menu */\n  .navmenu-root > .navmenu-sub {\n    white-space: nowrap;\n    > .navmenu-sub-container {\n      left: 50%;\n      transform: translateX(-50%);\n      padding-top: 16px;\n    }\n    &.navmenu-sub--opened > .navmenu-sub-container {\n      display: block;\n    }\n  }\n"])));
+import { styled } from '../Theme';
+const NavMenuBase = styled('nav')`
+  background-color: ${props => props.$bgColor};
+  font-size: 16px;
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .navmenu-item,
+  .navmenu-sub {
+    display: flex;
+    align-items: center;
+  }
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+  /* active/hover */
+  .navmenu-item,
+  .navmenu-sub {
+    color: ${props => props.$textColor};
+  }
+  .navmenu-item--active,
+  .navmenu-item:hover,
+  .navmenu-sub--opened {
+    color: ${props => props.$activeTextColor};
+  }
+
+  .navmenu-item {
+    position: relative;
+    cursor: pointer;
+    transition: color 0.2s ease-in-out;
+    a {
+      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;
+  }
+  /* icon & expand icon */
+  .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 > * {
+    width: auto;
+    height: 22px;
+    max-height: 22px;
+    font-size: 1.5em;
+  }
+  .navmenu-sub-expand-icon {
+    margin-left: 8px;
+    > * {
+      width: 0.8em;
+      height: 0.8em;
+      transition: transform 0.2s ease-in-out;
+    }
+  }
+`;
+export const HorizontalStyle = styled(NavMenuBase)`
+  padding: 8px 16px;
+  min-width: 50px;
+  flex-grow: 1;
+
+  .navmenu-root {
+    display: flex;
+    align-items: center;
+  }
+  /* 顶级菜单间隔 */
+  .navmenu-root > .navmenu-item,
+  .navmenu-root > .navmenu-sub {
+    margin-left: 24px;
+    white-space: nowrap;
+  }
+  .navmenu-root > .navmenu-item:first-of-type,
+  .navmenu-root > .navmenu-sub:first-of-type {
+    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;
+    }
+  }
+  /* 二级 sub menu */
+  .navmenu-root > .navmenu-sub {
+    white-space: nowrap;
+    > .navmenu-sub-container {
+      left: 50%;
+      transform: translateX(-50%);
+      padding-top: 16px;
+    }
+    &.navmenu-sub--opened > .navmenu-sub-container {
+      display: block;
+    }
+  }
+`;
 
 /* inline mode */
-const InlineStyle = exports.InlineStyle = (0, _Theme.styled)(NavMenuBase)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  font-size: 16px;\n  .navmenu-root {\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .navmenu-item,\n  .navmenu-sub {\n    padding: 0 16px;\n  }\n  & .navmenu-sub {\n    flex-wrap: wrap;\n  }\n  /* \u9876\u7EA7 */\n  .navmenu-root > .navmenu-item,\n  .navmenu-root > .navmenu-sub {\n    line-height: 48px;\n    border-bottom: 1px solid #eee;\n  }\n  /* icon */\n  .navmenu-item-icon,\n  .navmenu-sub-icon {\n    width: 30px;\n    margin: 0;\n  }\n  .navmenu-sub-expand-icon {\n    margin-left: auto;\n  }\n  /* \u5B50\u7EA7\u5217\u8868 */\n  .navmenu-sub-container {\n    display: none;\n    flex: 1 0 100%;\n    margin: 0 -16px;\n    padding-bottom: 8px;\n    .navmenu-item,\n    .navmenu-sub {\n      line-height: 32px;\n    }\n  }\n  .navmenu-sub-list {\n    padding-left: 16px;\n    .navmenu-item,\n    .navmenu-sub {\n      padding-left: 30px;\n      font-size: 13px;\n    }\n  }\n  /* \u4E8C\u7EA7 menu */\n  .navmenu-sub--opened > .navmenu-sub-container {\n    display: block;\n  }\n"])));
+export const InlineStyle = styled(NavMenuBase)`
+  font-size: 16px;
+  .navmenu-root {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .navmenu-item,
+  .navmenu-sub {
+    padding: 0 16px;
+  }
+  & .navmenu-sub {
+    flex-wrap: wrap;
+  }
+  /* 顶级 */
+  .navmenu-root > .navmenu-item,
+  .navmenu-root > .navmenu-sub {
+    line-height: 48px;
+    border-bottom: 1px solid #eee;
+  }
+  /* icon */
+  .navmenu-item-icon,
+  .navmenu-sub-icon {
+    width: 30px;
+    margin: 0;
+  }
+  .navmenu-sub-expand-icon {
+    margin-left: auto;
+  }
+  /* 子级列表 */
+  .navmenu-sub-container {
+    display: none;
+    flex: 1 0 100%;
+    margin: 0 -16px;
+    padding-bottom: 8px;
+    .navmenu-item,
+    .navmenu-sub {
+      line-height: 32px;
+    }
+  }
+  .navmenu-sub-list {
+    padding-left: 16px;
+    .navmenu-item,
+    .navmenu-sub {
+      padding-left: 30px;
+      font-size: 13px;
+    }
+  }
+  /* 二级 menu */
+  .navmenu-sub--opened > .navmenu-sub-container {
+    display: block;
+  }
+`;