@oceanbase/ui 0.2.0

package/es/BasicLayout/index.js

@@ -0,0 +1,312 @@
+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); }
+var _excluded = ["children", "location", "banner", "iconUrl", "logoUrl", "simpleLogoUrl", "topHeader", "menus", "defaultCollapsed", "defaultSelectedKeys", "defaultOpenKeys", "sideHeader", "subSideMenuProps", "subSideMenus", "className"];
+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(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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 { CaretRightFilled, LeftOutlined, RightOutlined } from '@ant-design/icons';
+import { setAlpha } from '@ant-design/pro-components';
+import { token } from '@oceanbase/design';
+import { isNullValue } from '@oceanbase/util';
+import { Divider, Layout, Menu, Tooltip } from '@oceanbase/design';
+import classnames from 'classnames';
+import { some } from 'lodash';
+import { pathToRegexp } from 'path-to-regexp';
+import React, { useEffect, useState } from 'react';
+import LocaleWrapper from "../locale/LocaleWrapper";
+import { getPrefix, isEnglish, urlToList } from "../_util";
+import useHistory from "../_util/useHistory";
+import Header from "./Header";
+import "./index.less";
+import zhCN from "./locale/zh-CN";
+var Content = Layout.Content,
+  Sider = Layout.Sider;
+var SubMenu = Menu.SubMenu,
+  Item = Menu.Item;
+var prefix = getPrefix('layout');
+var BasicLayout = function BasicLayout(_ref) {
+  var _classnames2;
+  var children = _ref.children,
+    _ref$location = _ref.location,
+    _ref$location2 = _ref$location === void 0 ? {} : _ref$location,
+    pathname = _ref$location2.pathname,
+    banner = _ref.banner,
+    iconUrl = _ref.iconUrl,
+    logoUrl = _ref.logoUrl,
+    simpleLogoUrl = _ref.simpleLogoUrl,
+    topHeader = _ref.topHeader,
+    _ref$menus = _ref.menus,
+    menus = _ref$menus === void 0 ? [] : _ref$menus,
+    _ref$defaultCollapsed = _ref.defaultCollapsed,
+    defaultCollapsed = _ref$defaultCollapsed === void 0 ? false : _ref$defaultCollapsed,
+    _ref$defaultSelectedK = _ref.defaultSelectedKeys,
+    defaultSelectedKeys = _ref$defaultSelectedK === void 0 ? [] : _ref$defaultSelectedK,
+    _ref$defaultOpenKeys = _ref.defaultOpenKeys,
+    defaultOpenKeys = _ref$defaultOpenKeys === void 0 ? [] : _ref$defaultOpenKeys,
+    sideHeader = _ref.sideHeader,
+    subSideMenuProps = _ref.subSideMenuProps,
+    subSideMenus = _ref.subSideMenus,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  var history = useHistory();
+  // 侧边栏导航是否收起
+  var _useState = useState(defaultCollapsed),
+    _useState2 = _slicedToArray(_useState, 2),
+    collapsed = _useState2[0],
+    setCollapsed = _useState2[1];
+  var _useState3 = useState(defaultSelectedKeys),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedKeys = _useState4[0],
+    setSelectedKeys = _useState4[1];
+  var _useState5 = useState(defaultOpenKeys),
+    _useState6 = _slicedToArray(_useState5, 2),
+    openKeys = _useState6[0],
+    setOpenKeys = _useState6[1];
+  useEffect(function () {
+    // 获取当前选中的菜单
+    var selectedMenuKeys = urlToList(pathname).map(function (itemPath) {
+      return getMenuMatches(getFlatMenuKeys(menus), itemPath).pop();
+    }) || [];
+    var newSelectedKeys = selectedMenuKeys.filter(function (item) {
+      return item;
+    });
+    if (newSelectedKeys.length > 0) {
+      setSelectedKeys([newSelectedKeys[newSelectedKeys.length - 1]]);
+    } else {
+      setSelectedKeys([]);
+    }
+  }, [pathname]);
+  var menuProps = {
+    selectedKeys: selectedKeys,
+    openKeys: openKeys,
+    onSelect: function (_ref2) {
+      var newSelectedKeys = _ref2.selectedKeys;
+      setSelectedKeys(newSelectedKeys);
+    },
+    onOpenChange: function onOpenChange(newOpenKeys) {
+      // 最多只允许一个子菜单展开
+      setOpenKeys(newOpenKeys);
+    }
+  };
+  var getMenuMatches = function getMenuMatches(flatMenuKeys, path) {
+    return flatMenuKeys.filter(function (item) {
+      return pathToRegexp(item).test(path);
+    });
+  };
+  var getFlatMenuKeys = function getFlatMenuKeys(menuList) {
+    var keys = [];
+    (menuList || []).forEach(function (item) {
+      if (item.children) {
+        keys = keys.concat(getFlatMenuKeys(item.children));
+      }
+      keys.push(item.link || '');
+    });
+    return keys;
+  };
+
+  // 渲染菜单中的图标
+  var renderIcon = function renderIcon(item) {
+    var isSubSider = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var realSelectedKeys = isSubSider ? subSideMenuProps.selectedKeys || subSideMenuProps.defaultSelectedKeys : selectedKeys;
+    // 渲染 selectedIcon 的条件: 1. 菜单项被选中  2. 子菜单被选中
+    return realSelectedKeys.includes(item.link) || some(item.children || [], function (child) {
+      return realSelectedKeys.includes(child.link);
+    }) ? item.selectedIcon || item.icon : item.icon;
+  };
+
+  // 渲染菜单
+  var renderMenu = function renderMenu(data) {
+    return data.reduce(function (pre, item) {
+      var _item$children;
+      var _item$accessible = item.accessible,
+        accessible = _item$accessible === void 0 ? true : _item$accessible;
+      if (item.children && (isNullValue(item.accessible) ? // 如果子菜单本身没有设置 accessible，但只要其 children 之一可访问，则子菜单仍然展示
+      (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.some(function (_ref3) {
+        var _ref3$accessible = _ref3.accessible,
+          childAccessible = _ref3$accessible === void 0 ? true : _ref3$accessible;
+        return childAccessible;
+      }) : item.accessible)) {
+        pre.push( /*#__PURE__*/React.createElement(SubMenu, {
+          "data-testid": "menu.sub",
+          key: item.link,
+          title: /*#__PURE__*/React.createElement(Tooltip, _extends({
+            placement: "right",
+            title: item.title
+            // SubMenu 通常都会带 icon，因此这里判断英文环境下如果标题字符长度 > 15 就支持 tooltip 展示
+          }, isEnglish() && item.title && item.title.length > 15 ? {} : {
+            visible: false,
+            // Support for antd 5.0
+            open: false
+          }, {
+            getPopupContainer: function getPopupContainer() {
+              return document.body;
+            }
+          }), /*#__PURE__*/React.createElement("span", null, renderIcon(item), /*#__PURE__*/React.createElement("span", null, item.title)))
+        }, renderMenu(item.children)));
+      } else if (!item.children && accessible) {
+        pre.push( /*#__PURE__*/React.createElement(Item, {
+          "data-testid": "menu.item",
+          key: item.link,
+          onClick: function onClick() {
+            if (pathname !== item.link) {
+              history.push(item.link);
+            }
+          }
+        }, /*#__PURE__*/React.createElement(Tooltip, _extends({
+          placement: "right",
+          title: item.title
+          // 对于 Menu.Item，英文环境下如果标题字符长度 > 20 就支持 tooltip 展示
+        }, isEnglish() && item.title && item.title.length > 20 ? {} : {
+          visible: false,
+          // Support for antd 5.0
+          open: false
+        }, {
+          getPopupContainer: function getPopupContainer() {
+            return document.body;
+          }
+        }), /*#__PURE__*/React.createElement("span", null, renderIcon(item), /*#__PURE__*/React.createElement("span", null, item.title)))));
+      }
+      if (item.divider && accessible) {
+        pre.push( /*#__PURE__*/React.createElement(Divider, {
+          style: {
+            // 渐变的分隔线
+            borderImage: "linear-gradient(90deg, ".concat(token.colorTextQuaternary, " 0%, ").concat(setAlpha(token.colorTextQuaternary, 0), " 100%) 1")
+          }
+        }));
+      }
+      return pre;
+    }, []);
+  };
+
+  // 渲染收起菜单
+  var renderCollapsedMenu = function renderCollapsedMenu(data) {
+    var isSubSider = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    return data.reduce(function (pre, item) {
+      var _item$children2;
+      var _item$accessible2 = item.accessible,
+        accessible = _item$accessible2 === void 0 ? true : _item$accessible2;
+      if (item.children && (isNullValue(item.accessible) ? // 如果子菜单本身没有设置 accessible，但只要其 children 之一可访问，则子菜单仍然展示
+      (_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.some(function (_ref4) {
+        var _ref4$accessible = _ref4.accessible,
+          childAccessible = _ref4$accessible === void 0 ? true : _ref4$accessible;
+        return childAccessible;
+      }) : item.accessible)) {
+        pre.push( /*#__PURE__*/React.createElement(SubMenu, {
+          key: item.link,
+          title: renderIcon(item, isSubSider)
+        }, renderMenu(item.children)));
+      } else if (!item.children && accessible) {
+        pre.push( /*#__PURE__*/React.createElement(Item, {
+          "data-testid": "menu.item",
+          key: item.link,
+          onClick: function onClick() {
+            if (pathname !== item.link) {
+              history.push(item.link);
+            }
+          }
+        }, /*#__PURE__*/React.createElement(Tooltip, {
+          placement: "right",
+          title: item.title,
+          getPopupContainer: function getPopupContainer() {
+            return document.body;
+          }
+        }, /*#__PURE__*/React.createElement("div", null, renderIcon(item, isSubSider)))));
+      }
+      if (item.divider && accessible) {
+        pre.push( /*#__PURE__*/React.createElement(Divider, null));
+      }
+      return pre;
+    }, []);
+  };
+  var siderWidth = 0;
+  // 根据菜单项的配置计算侧边栏的宽度
+  if (subSideMenus && menus) {
+    siderWidth = collapsed ? 104 : 192;
+  } else if (subSideMenus && !menus) {
+    siderWidth = 52;
+  } else if (!subSideMenus && menus) {
+    siderWidth = collapsed ? 52 : 192;
+  } else if (!subSideMenus && !menus) {
+    siderWidth = 0;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, banner && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "-banner-wrapper")
+  }, banner), /*#__PURE__*/React.createElement(Layout, _extends({
+    className: classnames(prefix, className, _defineProperty({}, "".concat(prefix, "-with-banner"), banner))
+  }, restProps), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, _extends({
+    pathname: pathname,
+    iconUrl: iconUrl,
+    logoUrl: logoUrl,
+    simpleLogoUrl: simpleLogoUrl
+  }, topHeader)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Layout, {
+    className: "".concat(prefix, "-content-layout"),
+    style: {
+      marginTop: 48
+    }
+  }, (subSideMenus || menus) && /*#__PURE__*/React.createElement(Sider, {
+    theme: "light",
+    width: siderWidth,
+    className: classnames("".concat(prefix, "-sider"), (_classnames2 = {}, _defineProperty(_classnames2, "".concat(prefix, "-sider-collapsed"), collapsed), _defineProperty(_classnames2, "".concat(prefix, "-sider-has-sub-sider"), subSideMenus), _classnames2))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "-sider-wrapper")
+  }, subSideMenus && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "-sub-sider")
+  }, /*#__PURE__*/React.createElement(Menu, _extends({}, subSideMenuProps, {
+    mode: "vertical",
+    className: "".concat(prefix, "-menu-vertical")
+  }), renderCollapsedMenu(subSideMenus, true))), (sideHeader || menus) && /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "-sider-content")
+  }, sideHeader && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "-sider-header")
+  }, sideHeader), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "-menu-wrapper")
+  }, collapsed ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "-menu-collapsed")
+  }, /*#__PURE__*/React.createElement(Menu, _extends({}, menuProps, {
+    mode: "vertical",
+    className: "".concat(prefix, "-menu-vertical")
+  }), renderCollapsedMenu(menus, false))) : /*#__PURE__*/React.createElement(Menu, _extends({}, menuProps, {
+    mode: "inline",
+    expandIcon: function expandIcon(_ref5) {
+      var isOpen = _ref5.isOpen;
+      return /*#__PURE__*/React.createElement(CaretRightFilled, {
+        rotate: isOpen ? 90 : 0,
+        style: {
+          fontSize: 12
+        }
+      });
+    },
+    className: "".concat(prefix, "-menu")
+  }), renderMenu(menus)))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "-sider-border")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "-sider-collapse"),
+    onClick: function onClick() {
+      setCollapsed(!collapsed);
+      // 导航展开/收起时，重置 openKeys
+      setOpenKeys([]);
+    }
+  }, collapsed ? /*#__PURE__*/React.createElement(RightOutlined, null) : /*#__PURE__*/React.createElement(LeftOutlined, null)))))), /*#__PURE__*/React.createElement(Content, {
+    className: classnames("".concat(prefix, "-content"), "".concat(prefix, "-content-").concat(siderWidth)),
+    style: {
+      marginLeft: siderWidth
+    }
+  }, children))))));
+};
+export default LocaleWrapper({
+  componentName: 'BasicLayout',
+  defaultLocale: zhCN
+})(BasicLayout);