@aloudata/aloudata-design 0.2.7 → 0.3.1

package/es/Menu/style/index.less

@@ -4,8 +4,7 @@
 .menu-popup {
   background: @BG100;
   border: 1px solid @NL95;
-  border-radius: @ald-border-radius-base;
-  box-shadow: @shadow-actionsheet;
+  border-radius: @border-radius-base;
 }
 
 .ald-menu,
@@ -17,9 +16,9 @@
     background-color: @NL90;
   }
 
-  .ald-iconfont {
+  .ald-iconSvg {
     font-size: 16px;
-    font-family: @icon-font !important;
+    // font-family: @icon-font !important;
     font-style: normal;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -32,7 +31,8 @@
   .ant-dropdown-menu-submenu-title
     .ant-dropdown-menu-submenu-expand-icon
     .ant-dropdown-menu-submenu-arrow-icon {
-    .ald-iconfont('\e691');
+    color: @NL50;
+    .ald-iconSvg('arrows_right_sm',14px);
   }
 
   .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {

package/es/Modal/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ModalProps } from 'antd';
+import useModal from 'antd/lib/modal/useModal/index';
+import { ModalStaticFunctions, modalGlobalConfig } from 'antd/lib/modal/confirm';
+import { ModalFuncProps } from 'antd/lib/modal/Modal';
+export type { ModalProps, ModalFuncProps };
+export declare const destroyFns: Array<() => void>;
+interface IModalInterface extends React.FC<IOriginModalProps> {
+    useModal: typeof useModal;
+}
+interface IOriginModalProps extends ModalProps {
+    forbidBodyScroll?: boolean;
+    children?: React.ReactNode;
+}
+declare const OriginModal: IModalInterface;
+declare type TOriginModal = typeof OriginModal & ModalStaticFunctions & {
+    destroyAll: () => void;
+    config: typeof modalGlobalConfig;
+};
+declare const Modal: TOriginModal;
+export default Modal;

package/es/Modal/index.js

@@ -0,0 +1,95 @@
+import "antd/es/modal/style";
+import _Modal from "antd/es/modal";
+var _excluded = ["className", "children", "forbidBodyScroll", "footer", "okText", "cancelText", "onOk", "onCancel", "width", "confirmLoading", "closeIcon"];
+
+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; }
+
+import React from 'react';
+import useModal from 'antd/lib/modal/useModal/index';
+import confirm, { withWarn, withInfo, withSuccess, withError, withConfirm, modalGlobalConfig } from 'antd/lib/modal/confirm';
+import classNames from 'classnames';
+import Button from '../Button';
+import CloseLine from '../Icon/icons/CloseLine';
+export var destroyFns = [];
+
+function modalWarn(props) {
+  return confirm(withWarn(props));
+}
+
+var DEFAULT_WIDTH = 552;
+
+var OriginModal = function OriginModal(props) {
+  var className = props.className,
+      children = props.children,
+      forbidBodyScroll = props.forbidBodyScroll,
+      footer = props.footer,
+      okText = props.okText,
+      cancelText = props.cancelText,
+      onOk = props.onOk,
+      onCancel = props.onCancel,
+      width = props.width,
+      confirmLoading = props.confirmLoading,
+      closeIcon = props.closeIcon,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var Footer = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    size: "large",
+    onClick: onCancel
+  }, cancelText || '取消'), /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    loading: confirmLoading,
+    size: "large",
+    onClick: onOk
+  }, okText || '确定'));
+  return /*#__PURE__*/React.createElement(_Modal, Object.assign({}, restProps, {
+    onCancel: onCancel,
+    footer: footer !== undefined ? footer : Footer,
+    className: classNames('ald-modal', className),
+    width: width || DEFAULT_WIDTH,
+    closeIcon: closeIcon || /*#__PURE__*/React.createElement(Button, {
+      size: "small",
+      icon: /*#__PURE__*/React.createElement(CloseLine, {
+        fill: "currentColor",
+        size: 12
+      }),
+      className: "ald-modal-close"
+    })
+  }), children);
+};
+
+OriginModal.useModal = useModal;
+var Modal = OriginModal;
+
+Modal.info = function infoFn(props) {
+  return confirm(withInfo(props));
+};
+
+Modal.success = function successFn(props) {
+  return confirm(withSuccess(props));
+};
+
+Modal.error = function errorFn(props) {
+  return confirm(withError(props));
+};
+
+Modal.warning = modalWarn;
+Modal.warn = modalWarn;
+
+Modal.confirm = function confirmFn(props) {
+  return confirm(withConfirm(props));
+};
+
+Modal.destroyAll = function destroyAllFn() {
+  while (destroyFns.length) {
+    var close = destroyFns.pop();
+
+    if (close) {
+      close();
+    }
+  }
+};
+
+Modal.config = modalGlobalConfig;
+export default Modal;

package/es/Modal/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.less';

package/es/Modal/style/index.js

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.less';

package/es/Modal/style/index.less

@@ -0,0 +1,206 @@
+@import '../../style/index.less';
+@import '../../Button/style/variables.less';
+
+.ald-modal {
+  .ant-modal-content {
+    border-radius: 12px;
+  }
+
+  .ald-modal-close {
+    position: relative;
+    top: 8px;
+    left: -16px;
+  }
+
+  .ant-modal-header {
+    padding: 24px 36px;
+    border-bottom-width: 0;
+    border-radius: 12px 12px 0 0;
+
+    .ant-modal-title {
+      width: 95%;
+      color: @NL0;
+      font-weight: 600;
+      font-size: 20px;
+      font-family: 'PingFang SC', sans-serif;
+      font-style: normal;
+      line-height: 28px;
+    }
+  }
+
+  .ant-modal-body {
+    padding: 16px 36px;
+  }
+
+  .ant-modal-footer {
+    padding: 16px 24px;
+    background-color: @BG95;
+    border-top-width: 0;
+    border-radius: 0 0 12px 12px;
+  }
+}
+
+.ant-modal-confirm {
+  .ant-modal-content {
+    border-radius: 12px;
+
+    .ant-modal-body {
+      padding: 24px 24px 16px 36px;
+    }
+  }
+
+  .ant-modal-confirm-body {
+    & > .anticon {
+      width: 24px;
+      height: 24px;
+      margin-right: 12px;
+    }
+
+    .ant-modal-confirm-title {
+      color: @NL0;
+      font-weight: 600;
+      font-size: 16px;
+      font-family: 'PingFang SC', sans-serif;
+      font-style: normal;
+      line-height: 24px;
+    }
+
+    .ant-modal-confirm-content {
+      margin-top: 12px;
+      color: @NL0;
+      font-weight: 400;
+      font-size: 14px;
+      font-family: 'PingFang SC', sans-serif;
+      font-style: normal;
+      line-height: 20px;
+    }
+
+    .anticon-info-circle {
+      background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMiAwQzUuMzcyNTggMCAwIDUuMzcyNTggMCAxMkMwIDE4LjYyNzQgNS4zNzI1OCAyNCAxMiAyNEMxOC42Mjc0IDI0IDI0IDE4LjYyNzQgMjQgMTJDMjQgNS4zNzI1OCAxOC42Mjc0IDAgMTIgMFpNMTIgMTlDMTEuNDQ3OCAxOSAxMSAxOC41NTIzIDExIDE4TDExIDEwLjVDMTEgOS45NDc2OSAxMS40NDc4IDkuNDk5OTcgMTIgOS40OTk5N0MxMi41NTIzIDkuNDk5OTcgMTMgOS45NDc2OSAxMyAxMC41TDEzIDE4QzEzIDE4LjU1MjMgMTIuNTUyMyAxOSAxMiAxOVpNMTMgNi40OTk5N0MxMyA2Ljc3NjEyIDEyLjc3NjIgNi45OTk5NyAxMi41IDYuOTk5OTdIMTEuNUMxMS4yMjM5IDYuOTk5OTcgMTEgNi43NzYxMiAxMSA2LjQ5OTk3VjUuNDk5OTdDMTEgNS4yMjM4MyAxMS4yMjM5IDQuOTk5OTcgMTEuNSA0Ljk5OTk3SDEyLjVDMTIuNzc2MiA0Ljk5OTk3IDEzIDUuMjIzODMgMTMgNS40OTk5N1Y2LjQ5OTk3WiIgZmlsbD0iIzE1NTJERiIvPgo8L3N2Zz4=');
+    }
+
+    .anticon-check-circle {
+      background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMiAwQzUuMzcyNTggMCAwIDUuMzcyNTggMCAxMkMwIDE4LjYyNzQgNS4zNzI1OCAyNCAxMiAyNEMxOC42Mjc0IDI0IDI0IDE4LjYyNzQgMjQgMTJDMjQgNS4zNzI1OCAxOC42Mjc0IDAgMTIgMFpNMTcuODcyOCA3LjQ4ODExQzE4LjE0MjQgNy4wMDYwOSAxNy45NzAyIDYuMzk2OCAxNy40ODgxIDYuMTI3MjJDMTcuMDA2MSA1Ljg1NzY0IDE2LjM5NjggNi4wMjk4NiAxNi4xMjcyIDYuNTExODhMMTAuODgwMiAxNS44OTM5TDcuNjQwOSAxMy4xODk1QzcuMjE2OTQgMTIuODM1NiA2LjU4NjMzIDEyLjg5MjMgNi4yMzIzOCAxMy4zMTYzQzUuODc4NDMgMTMuNzQwMiA1LjkzNTE5IDE0LjM3MDkgNi4zNTkxNSAxNC43MjQ4TDkuNzcxNDQgMTcuNTczNkM5Ljk3NTQ2IDE3Ljc0NzIgMTAuMjE2NyAxNy44NzQzIDEwLjQ3ODggMTcuOTQyN0MxMC43NDE1IDE4LjAxMTIgMTEuMDE2MiAxOC4wMTg0IDExLjI4MjIgMTcuOTYzNkMxMS41NDQzIDE3LjkxMTIgMTEuNzkwMSAxNy44MDE1IDEyLjAwMzQgMTcuNjQ0NEMxMi4yMTgyIDE3LjQ4NjEgMTIuMzk0NyAxNy4yODM5IDEyLjUyMzIgMTcuMDUzNUwxMi41MjM1IDE3LjA1M0wxNy44NzI4IDcuNDg4MTFaIiBmaWxsPSIjMDU5RjQxIi8+Cjwvc3ZnPgo=');
+    }
+
+    .anticon-close-circle {
+      background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMiAwQzUuMzcyNTggMCAwIDUuMzcyNTggMCAxMkMwIDE4LjYyNzQgNS4zNzI1OCAyNCAxMiAyNEMxOC42Mjc0IDI0IDI0IDE4LjYyNzQgMjQgMTJDMjQgNS4zNzI1OCAxOC42Mjc0IDAgMTIgMFpNNi4zNDMxOCA2LjM0MzEyQzYuNzMzNzEgNS45NTI2IDcuMzY2ODcgNS45NTI2IDcuNzU3MzkgNi4zNDMxMkwxMiAxMC41ODU4TDE2LjI0MjcgNi4zNDMxMkMxNi42MzMyIDUuOTUyNiAxNy4yNjY0IDUuOTUyNiAxNy42NTY5IDYuMzQzMTJDMTguMDQ3NCA2LjczMzY1IDE4LjA0NzQgNy4zNjY4MSAxNy42NTY5IDcuNzU3MzRMMTMuNDE0MiAxMkwxNy42NTY5IDE2LjI0MjZDMTguMDQ3NCAxNi42MzMxIDE4LjA0NzQgMTcuMjY2MyAxNy42NTY5IDE3LjY1NjhDMTcuMjY2NCAxOC4wNDc0IDE2LjYzMzIgMTguMDQ3NCAxNi4yNDI3IDE3LjY1NjhMMTIgMTMuNDE0Mkw3Ljc1NzM5IDE3LjY1NjhDNy4zNjY4NyAxOC4wNDc0IDYuNzMzNyAxOC4wNDc0IDYuMzQzMTggMTcuNjU2OEM1Ljk1MjY1IDE3LjI2NjMgNS45NTI2NSAxNi42MzMxIDYuMzQzMTggMTYuMjQyNkwxMC41ODU4IDEyTDYuMzQzMTggNy43NTczM0M1Ljk1MjY2IDcuMzY2ODEgNS45NTI2NiA2LjczMzY1IDYuMzQzMTggNi4zNDMxMloiIGZpbGw9IiNGNzU0MjYiLz4KPC9zdmc+Cg==');
+    }
+
+    .anticon-exclamation-circle {
+      background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMiAwQzUuMzcyNTggMCAwIDUuMzcyNTggMCAxMkMwIDE4LjYyNzQgNS4zNzI1OCAyNCAxMiAyNEMxOC42Mjc0IDI0IDI0IDE4LjYyNzQgMjQgMTJDMjQgNS4zNzI1OCAxOC42Mjc0IDAgMTIgMFpNMTIgNC45OTk5N0MxMi41NTIzIDQuOTk5OTcgMTMgNS40NDc2OSAxMyA1Ljk5OTk3VjEzLjVDMTMgMTQuMDUyMyAxMi41NTIzIDE0LjUgMTIgMTQuNUMxMS40NDc4IDE0LjUgMTEgMTQuMDUyMyAxMSAxMy41VjUuOTk5OTdDMTEgNS40NDc2OSAxMS40NDc4IDQuOTk5OTcgMTIgNC45OTk5N1pNMTEgMTcuNUMxMSAxNy4yMjM4IDExLjIyMzkgMTcgMTEuNSAxN0gxMi41QzEyLjc3NjIgMTcgMTMgMTcuMjIzOCAxMyAxNy41VjE4LjVDMTMgMTguNzc2MSAxMi43NzYyIDE5IDEyLjUgMTlIMTEuNUMxMS4yMjM5IDE5IDExIDE4Ljc3NjEgMTEgMTguNVYxNy41WiIgZmlsbD0iI0ZGQzIyOSIvPgo8L3N2Zz4K');
+    }
+
+    svg {
+      display: none;
+    }
+  }
+}
+
+// 简装组件的场景下，以下样式先直接替换，后续精装在讨论方案
+:is(.ant-modal-confirm-info, .ant-modal-confirm-success, .ant-modal-confirm-error, .ant-modal-confirm-warning, .ant-modal-confirm-confirm) {
+  .ant-modal-confirm-btns {
+    .ant-btn {
+      padding: @Button-padding;
+    }
+
+    .ant-btn-default {
+      padding: @Button-border-padding-middle;
+      color: @Button-secondary-color;
+      background-color: @Button-secondary-bgColor;
+      border: 1px solid;
+      border-color: @Button-secondary-borderColor;
+      box-shadow: none;
+
+      &:focus {
+        color: @Button-secondary-color;
+        background-color: @Button-secondary-bgColor;
+        border-color: @Button-secondary-borderColor-active;
+        box-shadow: none;
+      }
+
+      &:hover,
+      &:active {
+        color: @Button-secondary-color-active;
+        background-color: @Button-secondary-bgColor-active;
+        border-color: @Button-secondary-borderColor-active;
+      }
+
+      &[disabled],
+      &.ant-btn-loading {
+        color: @Button-secondary-color-disable;
+        background-color: @Button-secondary-bgColor-disable;
+        border-color: @Button-secondary-borderColor;
+        cursor: default;
+
+        &:hover,
+        &:focus,
+        &:active {
+          color: @Button-secondary-color-disable;
+          background-color: @Button-secondary-bgColor-disable;
+          border-color: @Button-secondary-borderColor;
+        }
+      }
+    }
+
+    .ant-btn-primary {
+      min-width: auto;
+      height: @Button-height-middle;
+      color: @Button-primary-color;
+      font-size: @Button-text-size-middle;
+      line-height: @Button-text-size-middle;
+      background-color: @Button-primary-bgColor;
+      border-color: @Button-primary-bgColor;
+      border-radius: @Button-borderRadius-middle;
+      box-shadow: none;
+
+      &:focus {
+        //text-shadow: @text-shadow;
+        color: @Button-primary-color;
+        background-color: @Button-primary-bgColor;
+        border-color: @Button-primary-bgColor;
+        box-shadow: none;
+      }
+
+      &:hover,
+      &:active {
+        color: @Button-primary-color-active;
+        background-color: @Button-primary-bgColor-active;
+        border-color: @Button-primary-bgColor-active;
+      }
+
+      &.ant-btn-loading,
+      &[disabled] {
+        color: @Button-primary-color-disable;
+        background-color: @Button-primary-bgColor-disable;
+        border-color: @Button-primary-bgColor-disable;
+        cursor: default;
+
+        &:hover,
+        &:focus,
+        &:active {
+          color: @Button-primary-color-disable;
+          background-color: @Button-primary-bgColor-disable;
+          border-color: @Button-primary-bgColor-disable;
+        }
+      }
+    }
+
+    .ant-btn-lg {
+      min-width: auto;
+      height: @Button-height-large;
+      font-size: @Button-text-size-large;
+      line-height: @Button-text-size-large;
+      border-radius: @Button-borderRadius-large;
+    }
+
+    .ant-btn-sm {
+      height: @Button-height-small;
+      font-size: @Button-text-size-small;
+      line-height: 22px;
+      border-radius: @Button-borderRadius-small;
+    }
+  }
+}
+
+// 简装组件的场景下，以上样式先直接替换，后续精装在讨论方案

package/es/Navigator/components/Header/index.d.ts

@@ -0,0 +1,8 @@
+export interface IAppList {
+    logoSrc: string;
+}
+interface INavHeaderProps {
+    logoSrc: string;
+}
+declare function Header(props: INavHeaderProps): JSX.Element;
+export default Header;

package/es/Navigator/components/Header/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+function Header(props) {
+  var logoSrc = props.logoSrc;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "ald-nav-header"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ald-nav-header-content"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: logoSrc,
+    alt: "",
+    className: "ald-nav-logo-img"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "ald-nav-header-select"
+  }));
+}
+
+export default Header;

package/es/Navigator/components/Menu/index.d.ts

@@ -1,19 +1,12 @@
-import React from 'react';
-declare function Menu(props: IMenuProps & {
+import { IMenuItem } from '../MenuItem';
+export type { IMenuItem } from '../MenuItem';
+interface IMenuProps {
+    menuList: IMenuItem[];
+    selectedKey: string;
     onMenuSelect?: (menuInfo: {
         key: string;
         path: string;
     }) => void;
-}): JSX.Element;
-interface IMenuProps {
-    menuList: IMenuItem[];
-    selectedKey: string;
-}
-export interface IMenuItem {
-    title: string;
-    key: string;
-    path: string;
-    icon?: React.ReactNode;
-    children?: Omit<IMenuItem, 'children'>[];
 }
+declare function Menu(props: IMenuProps): JSX.Element;
 export default Menu;

package/es/Navigator/components/Menu/index.js

@@ -1,9 +1,3 @@
-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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -16,129 +10,42 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useCallback, useState, useEffect, useMemo } from 'react';
-import AntdMenu from 'antd/lib/menu';
+import React, { useState, useEffect, useCallback } from 'react';
+import MenuItem from '../MenuItem';
 
 function Menu(props) {
   var menuList = props.menuList,
       selectedKey = props.selectedKey,
-      onMenuSelect = props.onMenuSelect;
-
-  var _useMemo = useMemo(function () {
-    return getFlattenMenuByKey(menuList);
-  }, [menuList]),
-      flattenMenuByMenuKey = _useMemo.flattenMenuByMenuKey,
-      parentKeys = _useMemo.parentKeys;
+      _props$onMenuSelect = props.onMenuSelect,
+      onMenuSelectCallback = _props$onMenuSelect === void 0 ? function () {} : _props$onMenuSelect;
 
-  var _useState = useState(''),
+  var _useState = useState(selectedKey),
       _useState2 = _slicedToArray(_useState, 2),
-      currentSelectedKey = _useState2[0],
-      setCurrentSelectedKey = _useState2[1]; // 当前选中的菜单项
+      currentSelectKey = _useState2[0],
+      setCurrentSelectKey = _useState2[1];
 
-
-  var renderExpandIcon = useCallback(function () {
-    return null;
-  }, []);
+  var onMenuSelect = useCallback(function (menuInfo) {
+    setCurrentSelectKey(menuInfo.key);
+    onMenuSelectCallback(menuInfo);
+  }, [onMenuSelectCallback]);
   useEffect(function () {
-    setCurrentSelectedKey(selectedKey);
+    setCurrentSelectKey(selectedKey);
   }, [selectedKey]);
-  /**
-   * 处理选中菜单项变化
-   */
-
-  var onMenuChange = useCallback(function (key) {
-    if (onMenuSelect && flattenMenuByMenuKey[key]) {
-      var path = flattenMenuByMenuKey[key].path;
-      var menuInfo = {
-        key: key,
-        path: path
-      };
-      onMenuSelect(menuInfo);
-    }
-  }, [flattenMenuByMenuKey, onMenuSelect]);
-  /**
-   * 子级菜单项或者一级菜单点击
-   */
-
-  var onMenuItemClick = useCallback(function (key) {
-    if (key === currentSelectedKey) {
-      return;
-    }
-
-    setCurrentSelectedKey(key);
-    onMenuChange(key);
-  }, [currentSelectedKey, onMenuChange]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "ald-nav-menu-wrap"
-  }, /*#__PURE__*/React.createElement(AntdMenu, {
-    selectedKeys: [currentSelectedKey],
-    expandIcon: renderExpandIcon,
-    openKeys: parentKeys,
-    mode: "inline",
-    style: {
-      padding: '0 12px'
-    }
-  }, Array.isArray(menuList) && menuList.map(function (item) {
-    if (item.children) {
-      return /*#__PURE__*/React.createElement(AntdMenu.SubMenu, {
-        key: item.key,
-        icon: item.icon,
-        title: item.title
-      }, item.children.map(function (subItem) {
-        return /*#__PURE__*/React.createElement(AntdMenu.Item, {
-          onClick: function onClick() {
-            return onMenuItemClick(subItem.key);
-          },
-          key: subItem.key
-        }, subItem.title);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, Array.isArray(menuList) && menuList.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "ald-nav-group",
+      key: "".concat(String(index), "_key")
+    }, item.groupTitle && /*#__PURE__*/React.createElement("div", {
+      className: "ald-nav-group-title"
+    }, item.groupTitle), item.children.map(function (data) {
+      return /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, data, {
+        key: data.key,
+        menuItemKey: data.key,
+        selectedKey: currentSelectKey,
+        onMenuSelect: onMenuSelect
       }));
-    }
-
-    return /*#__PURE__*/React.createElement(AntdMenu.Item, {
-      key: item.key,
-      icon: item.icon,
-      onClick: function onClick() {
-        return onMenuItemClick(item.key);
-      }
-    }, item.title);
-  })));
-}
-
-function getFlattenMenuByKey(menuList) {
-  var flattenMenuByMenuKey = {};
-  var parentKeys = [];
-  var menuKeys = []; // 存储所有的key 用来判断是否有重复的key
-
-  var menuInvalidFlag = true; // 传入的menuList是否有效
-
-  menuList.forEach(function (item) {
-    if (!item.key) {
-      menuInvalidFlag = false;
-    }
-
-    if (item.children) {
-      flattenMenuByMenuKey[item.key] = _objectSpread(_objectSpread({}, item), {}, {
-        openKey: ''
-      });
-      item.children.forEach(function (childItem) {
-        flattenMenuByMenuKey[childItem.key] = _objectSpread(_objectSpread({}, childItem), {}, {
-          openKey: item.key
-        });
-        menuKeys.push(childItem.key);
-      });
-      parentKeys.push(item.key);
-    } else {
-      flattenMenuByMenuKey[item.key] = _objectSpread(_objectSpread({}, item), {}, {
-        openKey: ''
-      });
-      menuKeys.push(item.key);
-    }
-  });
-  return {
-    menuInvalidFlag: menuInvalidFlag,
-    flattenMenuByMenuKey: flattenMenuByMenuKey,
-    parentKeys: parentKeys
-  };
+    }));
+  }));
 }
 
 export default Menu;

package/es/Navigator/components/MenuItem/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface ISelectedMenuInfo {
+    key: string;
+    path: string;
+}
+export interface IMenuItem {
+    groupTitle: string | null;
+    children: IMenuItemContentProps[];
+}
+interface IMenuItemContentProps {
+    menuIcon: React.ReactNode;
+    content: string | React.ReactNode;
+    key: string;
+    path: string;
+}
+declare function MenuItem(data: IMenuItemContentProps & {
+    selectedKey: string;
+    menuItemKey: string;
+    onMenuSelect?: (menuInfo: ISelectedMenuInfo) => void;
+}): JSX.Element;
+export default MenuItem;

package/es/Navigator/components/MenuItem/index.js

@@ -0,0 +1,39 @@
+import React, { useCallback } from 'react';
+import classNames from 'classnames';
+
+function MenuItem(data) {
+  var menuIcon = data.menuIcon,
+      content = data.content,
+      menuItemKey = data.menuItemKey,
+      path = data.path,
+      selectedKey = data.selectedKey,
+      _data$onMenuSelect = data.onMenuSelect,
+      onMenuSelect = _data$onMenuSelect === void 0 ? function () {} : _data$onMenuSelect;
+  var onMenuItemClick = useCallback(function (menuInfo) {
+    if (menuInfo.key === selectedKey) {
+      return;
+    }
+
+    onMenuSelect(menuInfo);
+  }, [onMenuSelect, selectedKey]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('ald-nav-menu-item', {
+      'ald-nav-menu-item-selected': menuItemKey === selectedKey
+    }),
+    key: menuItemKey,
+    onClick: function onClick() {
+      return onMenuItemClick({
+        path: path,
+        key: menuItemKey
+      });
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ald-nav-menu-item-icon"
+  }, menuIcon), /*#__PURE__*/React.createElement("div", {
+    className: "ald-nav-menu-item-content"
+  }, typeof content === 'string' ? /*#__PURE__*/React.createElement("div", {
+    className: "ald-nav-menu-item-content-text"
+  }, content) : content));
+}
+
+export default MenuItem;