@aloudata/aloudata-design 0.2.5 → 0.3.0-beta.1

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

@@ -1,19 +1,13 @@
-import React from 'react';
-declare function Menu(props: IMenuProps & {
+/// <reference types="react" />
+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/lib/Navigator/components/Menu/index.js

@@ -9,9 +9,7 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _menu = _interopRequireDefault(require("antd/lib/menu"));
-
-var _Icon = _interopRequireDefault(require("../../../Icon"));
+var _MenuItem = _interopRequireDefault(require("../MenuItem"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -19,12 +17,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 _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."); }
@@ -40,165 +32,36 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function Menu(props) {
   var menuList = props.menuList,
       selectedKey = props.selectedKey,
-      onMenuSelect = props.onMenuSelect;
+      _props$onMenuSelect = props.onMenuSelect,
+      onMenuSelectCallback = _props$onMenuSelect === void 0 ? function () {} : _props$onMenuSelect;
 
-  var _useMemo = (0, _react.useMemo)(function () {
-    return getFlattenMenuByKey(menuList);
-  }, [menuList]),
-      flattenMenuByMenuKey = _useMemo.flattenMenuByMenuKey;
-
-  var _useState = (0, _react.useState)(''),
+  var _useState = (0, _react.useState)(selectedKey),
       _useState2 = _slicedToArray(_useState, 2),
-      openKey = _useState2[0],
-      setOpenKey = _useState2[1]; // 当前展开的菜单项
-
-
-  var _useState3 = (0, _react.useState)(''),
-      _useState4 = _slicedToArray(_useState3, 2),
-      currentSelectedKey = _useState4[0],
-      setCurrentSelectedKey = _useState4[1]; // 当前选中的菜单项
+      currentSelectKey = _useState2[0],
+      setCurrentSelectKey = _useState2[1];
 
-
-  var renderExpandIcon = (0, _react.useCallback)(function (renderIconInfo) {
-    var isOpen = renderIconInfo.isOpen;
-
-    if (isOpen) {
-      return /*#__PURE__*/_react.default.createElement(_Icon.default, {
-        type: "arrow_drop_up",
-        size: 20,
-        className: "ald-nav-menu-icon-right"
-      });
-    }
-
-    return /*#__PURE__*/_react.default.createElement(_Icon.default, {
-      type: "arrow_drop_down",
-      size: 20,
-      className: "ald-nav-menu-icon-right"
-    });
-  }, []);
+  var onMenuSelect = (0, _react.useCallback)(function (menuInfo) {
+    setCurrentSelectKey(menuInfo.key);
+    onMenuSelectCallback(menuInfo);
+  }, [onMenuSelectCallback]);
   (0, _react.useEffect)(function () {
-    setCurrentSelectedKey(selectedKey);
+    setCurrentSelectKey(selectedKey);
   }, [selectedKey]);
-  /**
-   * 处理选中菜单项变化
-   */
-
-  var onMenuChange = (0, _react.useCallback)(function (key) {
-    if (onMenuSelect && flattenMenuByMenuKey[key]) {
-      var path = flattenMenuByMenuKey[key].path;
-      var menuInfo = {
-        key: key,
-        path: path
-      };
-      onMenuSelect(menuInfo);
-    }
-  }, [flattenMenuByMenuKey, onMenuSelect]);
-  /**
-   * 根据当前选中的菜单项，设置展开的菜单项
-   */
-
-  (0, _react.useEffect)(function () {
-    var _flattenMenuByMenuKey;
-
-    setOpenKey(((_flattenMenuByMenuKey = flattenMenuByMenuKey[currentSelectedKey]) === null || _flattenMenuByMenuKey === void 0 ? void 0 : _flattenMenuByMenuKey.openKey) || '');
-  }, [currentSelectedKey, flattenMenuByMenuKey, onMenuSelect]);
-  /**
-   * 父级菜单点击
-   */
-
-  var onSupMenuClick = (0, _react.useCallback)(function (key) {
-    if (key === openKey) {
-      return;
-    }
-
-    var FIRST_INDEX = 0;
-    var firstChildrenKey = flattenMenuByMenuKey[key].children[FIRST_INDEX].key;
-    setCurrentSelectedKey(firstChildrenKey);
-    onMenuChange(firstChildrenKey);
-  }, [flattenMenuByMenuKey, openKey, onMenuChange]);
-  /**
-   * 子级菜单项或者一级菜单点击
-   */
-
-  var onMenuItemClick = (0, _react.useCallback)(function (key) {
-    if (key === currentSelectedKey) {
-      return;
-    }
-
-    setCurrentSelectedKey(key);
-    onMenuChange(key);
-  }, [currentSelectedKey, onMenuChange]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "ald-nav-menu-wrap"
-  }, /*#__PURE__*/_react.default.createElement(_menu.default, {
-    selectedKeys: [currentSelectedKey],
-    expandIcon: renderExpandIcon,
-    openKeys: [openKey],
-    mode: "inline",
-    style: {
-      padding: '0 12px'
-    }
-  }, Array.isArray(menuList) && menuList.map(function (item) {
-    if (item.children) {
-      return /*#__PURE__*/_react.default.createElement(_menu.default.SubMenu, {
-        key: item.key,
-        icon: item.icon,
-        title: item.title,
-        onTitleClick: function onTitleClick() {
-          return onSupMenuClick(item.key);
-        }
-      }, item.children.map(function (subItem) {
-        return /*#__PURE__*/_react.default.createElement(_menu.default.Item, {
-          onClick: function onClick() {
-            return onMenuItemClick(subItem.key);
-          },
-          key: subItem.key
-        }, subItem.title);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, Array.isArray(menuList) && menuList.map(function (item, index) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "ald-nav-group",
+      key: "".concat(String(index), "_key")
+    }, item.groupTitle && /*#__PURE__*/_react.default.createElement("div", {
+      className: "ald-nav-group-title"
+    }, item.groupTitle), item.children.map(function (data) {
+      return /*#__PURE__*/_react.default.createElement(_MenuItem.default, Object.assign({}, data, {
+        key: data.key,
+        menuItemKey: data.key,
+        selectedKey: currentSelectKey,
+        onMenuSelect: onMenuSelect
       }));
-    }
-
-    return /*#__PURE__*/_react.default.createElement(_menu.default.Item, {
-      key: item.key,
-      icon: item.icon,
-      onClick: function onClick() {
-        return onMenuItemClick(item.key);
-      }
-    }, item.title);
-  })));
-}
-
-function getFlattenMenuByKey(menuList) {
-  var flattenMenuByMenuKey = {};
-  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);
-      });
-    } else {
-      flattenMenuByMenuKey[item.key] = _objectSpread(_objectSpread({}, item), {}, {
-        openKey: ''
-      });
-      menuKeys.push(item.key);
-    }
-  });
-  return {
-    menuInvalidFlag: menuInvalidFlag,
-    flattenMenuByMenuKey: flattenMenuByMenuKey
-  };
+    }));
+  }));
 }
 
 var _default = Menu;

package/lib/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/lib/Navigator/components/MenuItem/index.js

@@ -0,0 +1,56 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+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 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 = (0, _react.useCallback)(function (menuInfo) {
+    if (menuInfo.key === selectedKey) {
+      return;
+    }
+
+    onMenuSelect(menuInfo);
+  }, [onMenuSelect, selectedKey]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('ald-nav-menu-item', {
+      'ald-nav-menu-item-selected': menuItemKey === selectedKey
+    }),
+    key: menuItemKey,
+    onClick: function onClick() {
+      return onMenuItemClick({
+        path: path,
+        key: menuItemKey
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "ald-nav-menu-item-icon"
+  }, menuIcon), /*#__PURE__*/_react.default.createElement("div", {
+    className: "ald-nav-menu-item-content"
+  }, typeof content === 'string' ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "ald-nav-menu-item-content-text"
+  }, content) : content));
+}
+
+var _default = MenuItem;
+exports.default = _default;

package/lib/Navigator/index.d.ts

@@ -1,7 +1,23 @@
 import React from 'react';
 import { IMenuItem } from './components/Menu';
-export type { IMenuItem } from './components/Menu';
+declare function Navigator(props: INavigatorProps): JSX.Element;
 export interface INavigatorProps {
+    /**
+     * @description 应用logo
+     * @type {string}
+     * @default []
+     */
+    logoSrc: string;
+    /**
+     * @description 当前选中的应用
+     * @type {string}
+     * @default --
+     */
+    /**
+     * @description 应用切换时调用
+     * @type {(appId: string) => void}
+     * @default --
+     */
     /**
      * @description 菜单数据
      * @default []
@@ -12,16 +28,10 @@ export interface INavigatorProps {
      * @default --
      */
     selectedKey: string;
-    /**
-     * @description logo的地址 默认高度为24px
-     * @default --
-     */
-    logoSrc: string;
     /**
      * @description logo的点击（可选）
      * @default --
      */
-    onLogoClick?: () => void;
     /**
      * @description 导航底部信息 可自定义
      * @default null
@@ -36,5 +46,6 @@ export interface INavigatorProps {
         path: string;
     }) => void;
 }
-declare function Navigator(props: INavigatorProps): JSX.Element;
+export type { IMenuItem } from './components/Menu';
+export type { ISelectedMenuInfo } from './components/MenuItem';
 export default Navigator;

package/lib/Navigator/index.js

@@ -13,6 +13,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _Menu = _interopRequireDefault(require("./components/Menu"));
 
+var _Header = _interopRequireDefault(require("./components/Header"));
+
 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); }
@@ -20,12 +22,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 Navigator(props) {
-  var menuList = props.menuList,
+  var logoSrc = props.logoSrc,
+      menuList = props.menuList,
       selectedKey = props.selectedKey,
-      logoSrc = props.logoSrc,
       _props$footer = props.footer,
       footer = _props$footer === void 0 ? null : _props$footer,
-      onLogoClick = props.onLogoClick,
       onMenuSelect = props.onMenuSelect;
   var renderMenu = (0, _react.useCallback)(function () {
     return /*#__PURE__*/_react.default.createElement(_Menu.default, {
@@ -36,18 +37,9 @@ function Navigator(props) {
   }, [selectedKey, menuList, onMenuSelect]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('ald-nav')
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('ald-nav-logo', {
-      'ald-nav-logo-able-click': onLogoClick
-    })
-  }, logoSrc && /*#__PURE__*/_react.default.createElement("div", {
-    onClick: onLogoClick,
-    className: "ald-nav-logo-wrap"
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    src: logoSrc,
-    alt: "",
-    draggable: false
-  }))), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_Header.default, {
+    logoSrc: logoSrc
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('ald-nav-menu', {
       'ald-nav-menu-has-footer': !!footer
     })