@oceanbase/design 0.1.2 → 0.2.0

package/es/BasicLayout/index.js

@@ -1,312 +0,0 @@
-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 { isNullValue } from '@oceanbase/util';
-import { Divider, Layout, Menu, Tooltip } from 'antd';
-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 { token } from "../StaticFunction";
-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);