@oceanbase/ui 0.2.32 → 0.2.34

package/es/BasicLayout/index.js

@@ -5,6 +5,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 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); }
@@ -19,7 +23,7 @@ import { Typography, theme } from '@oceanbase/design';
 import { isNullValue } from '@oceanbase/util';
 import { ConfigProvider, Divider, Layout, Menu, Tooltip } from '@oceanbase/design';
 import classNames from 'classnames';
-import { some } from 'lodash';
+import { some, uniq } from 'lodash';
 import { pathToRegexp } from 'path-to-regexp';
 import React, { useEffect, useState, useContext } from 'react';
 import LocaleWrapper from "../locale/LocaleWrapper";
@@ -90,7 +94,13 @@ var BasicLayout = function BasicLayout(_ref) {
       return item;
     });
     if (newSelectedKeys.length > 0) {
-      setSelectedKeys([newSelectedKeys[newSelectedKeys.length - 1]]);
+      // use last selected key to avoid multiple selected menus
+      var selectedKey = newSelectedKeys[newSelectedKeys.length - 1];
+      setSelectedKeys([selectedKey]);
+      // get parent keys of current selectedKey
+      var selectedParentKeys = getParentKeys(menus, selectedKey);
+      // append parent keys as open keys
+      setOpenKeys(uniq([].concat(_toConsumableArray(openKeys), _toConsumableArray(selectedParentKeys))));
     } else {
       setSelectedKeys([]);
     }
@@ -98,12 +108,11 @@ var BasicLayout = function BasicLayout(_ref) {
   var menuProps = {
     selectedKeys: selectedKeys,
     openKeys: openKeys,
-    onSelect: function (_ref2) {
+    onSelect: function onSelect(_ref2) {
       var newSelectedKeys = _ref2.selectedKeys;
       setSelectedKeys(newSelectedKeys);
     },
     onOpenChange: function onOpenChange(newOpenKeys) {
-      // 最多只允许一个子菜单展开
       setOpenKeys(newOpenKeys);
     }
   };
@@ -112,6 +121,21 @@ var BasicLayout = function BasicLayout(_ref) {
       return pathToRegexp(item).test(path);
     });
   };
+  var getParentKeys = function getParentKeys(menuList, selectedKey) {
+    var keys = [];
+    (menuList || []).forEach(function (item) {
+      var itemChildren = item.children || [];
+      var childrenKeys = itemChildren.map(function (child) {
+        return child.link;
+      });
+      if (childrenKeys.includes(selectedKey)) {
+        keys = [].concat(_toConsumableArray(keys), [item.link]);
+      } else {
+        keys = [].concat(_toConsumableArray(keys), [getParentKeys(itemChildren, selectedKey)]);
+      }
+    });
+    return keys;
+  };
   var getFlatMenuKeys = function getFlatMenuKeys(menuList) {
     var keys = [];
     (menuList || []).forEach(function (item) {

package/es/Highlight/index.d.ts

@@ -29,7 +29,7 @@ export declare const THEME_DARK = "dark";
 export declare const THEME_LIGHT = "light";
 declare const ThemeTypes: ["dark", "light"];
 export type ThemeType = (typeof ThemeTypes)[number];
-declare const supportedLanguages: ("ruby" | "css" | "bash" | "json" | "java" | "go" | "javascript" | "typescript" | "groovy" | "python" | "cpp" | "http" | "markdown" | "nginx" | "sql" | "xml" | "dockerfile" | "yaml" | "solidity" | "tsx" | "jsx")[];
+declare const supportedLanguages: ("ruby" | "css" | "json" | "sql" | "tsx" | "javascript" | "typescript" | "groovy" | "java" | "python" | "bash" | "cpp" | "http" | "markdown" | "nginx" | "xml" | "dockerfile" | "go" | "yaml" | "solidity" | "jsx")[];
 export type LanguageType = (typeof supportedLanguages)[number] | 'html';
 export interface HighlightProps extends LocaleWrapperProps {
     /**

package/es/IconFont/index.d.ts

@@ -5,5 +5,8 @@ export interface IconFontProps {
     className?: string;
     style?: React.CSSProperties;
 }
+/**
+ * @deprecated Please use `@oceanbase/icons` instead.
+ */
 declare const IconFont: (props: IconFontProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
 export default IconFont;

package/es/IconFont/index.js

@@ -7,24 +7,17 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 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 _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 { createFromIconfontCN } from '@oceanbase/icons';
 import React from 'react';
 import "./font/iconfont.css";
 import { jsx as _jsx } from "react/jsx-runtime";
-var CustomIcon = createFromIconfontCN({
-  // 在 iconfont.cn 上生成
-  scriptUrl: '//at.alicdn.com/t/a/font_3786261_ifhixq9j5c.js'
-});
-var iconfontList = ['backup', 'backup-colored', 'cluster', 'cluster-colored', 'data-source', 'data-source-colored', 'docs', 'diagnosis', 'diagnosis-colored', 'host', 'host-colored', 'log', 'log-colored', 'migration', 'migration-colored', 'monitor', 'monitor-colored', 'notification', 'obproxy', 'obproxy-colored', 'package', 'package-colored', 'overview', 'overview-colored', 'property', 'property-colored', 'tenant', 'tenant-colored', 'sync', 'sync-colored', 'system', 'system-colored', 'user'];
+/**
+ * @deprecated Please use `@oceanbase/icons` instead.
+ */
 var IconFont = function IconFont(props) {
   var type = props.type,
     className = props.className,
     restProps = _objectWithoutProperties(props, _excluded);
-  // TODO: 后续建议统一使用 iconfont.cn 上的图标，这里先兼容两种用法
-  return iconfontList.includes(type) ? /*#__PURE__*/_jsx(CustomIcon, _objectSpread({
-    type: type,
-    className: className
-  }, restProps)) : /*#__PURE__*/_jsx("i", _objectSpread({
+  return /*#__PURE__*/_jsx("i", _objectSpread({
     className: "iconfont ".concat(type, " ").concat(className)
   }, restProps));
 };

package/es/TagSelect/style/index.js

@@ -46,7 +46,7 @@ export var genTagSelectStyle = function genTagSelectStyle(token) {
     position: 'relative',
     display: 'inline-block',
     fontSize: token.fontSize,
-    color: token.colorTextLabel,
+    color: token.colorText,
     background: token.colorWhite,
     border: "".concat(token.lineWidth, "px ").concat(token.lineType, " ").concat(token.colorBorder),
     borderRadius: token.borderRadius,
@@ -76,8 +76,12 @@ export var genTagSelectStyle = function genTagSelectStyle(token) {
     }
   }), _defineProperty(_ref, "".concat(componentCls, "-large").concat(componentCls, "-img"), _objectSpread(_objectSpread({}, genImgCoverStyle('228px', '120px')), {}, {
     marginRight: '16px'
-  })), _defineProperty(_ref, "".concat(componentCls, "-small").concat(componentCls, "-img"), genImgCoverStyle('76px', '32px')), _defineProperty(_ref, "".concat(componentCls, "-large"), genSizeStyle(token.paddingContentVerticalSM, token.fontSize)), _defineProperty(_ref, "".concat(componentCls, "-small"), genSizeStyle(0, token.fontSize)), _defineProperty(_ref, "".concat(componentCls, "-wrapper:not(").concat(componentCls, "-disabled):hover"), {
-    borderColor: token.colorPrimaryText
+  })), _defineProperty(_ref, "".concat(componentCls, "-small").concat(componentCls, "-img"), genImgCoverStyle('76px', '32px')), _defineProperty(_ref, "".concat(componentCls, "-large"), genSizeStyle(token.paddingContentVerticalSM, token.fontSize)), _defineProperty(_ref, "".concat(componentCls, "-small"), _objectSpread(_objectSpread({}, genSizeStyle(0, token.fontSize)), {}, {
+    paddingLeft: "".concat(token.paddingSM, "px"),
+    paddingRight: "".concat(token.paddingSM, "px")
+  })), _defineProperty(_ref, "".concat(componentCls, "-wrapper:not(").concat(componentCls, "-disabled):hover"), {
+    borderColor: token.colorPrimaryText,
+    color: token.colorPrimaryText
   }), _defineProperty(_ref, "".concat(componentCls, "-checked"), genColoredStyle(token.blue, token.colorPrimaryBg, token.colorPrimaryText)), _defineProperty(_ref, "".concat(componentCls, "-wrapper:not(").concat(componentCls, "-disabled):active"), {
     boxShadow: "0px 0px 3px ".concat(token.colorPrimary),
     borderColor: "".concat(token.colorPrimary)
@@ -85,11 +89,11 @@ export var genTagSelectStyle = function genTagSelectStyle(token) {
     '&:hover': _objectSpread(_objectSpread({}, genColoredStyle(token.colorInfoBorder, '#EBF1FF', token.colorInfoTextHover)), {}, _defineProperty({}, "".concat(componentCls, "-inner"), {
       borderTopColor: "".concat(token.colorPrimaryTextHover, " !important")
     }))
-  }), _defineProperty(_ref, "".concat(componentCls, "-disabled:not(").concat(componentCls, "-checked)"), _objectSpread(_objectSpread({}, genColoredStyle(token.colorBorder, '#F6F8FE', '#CDD5E3')), {}, {
+  }), _defineProperty(_ref, "".concat(componentCls, "-disabled:not(").concat(componentCls, "-checked)"), _objectSpread(_objectSpread({}, genColoredStyle(token.colorBorder, token.colorFillContent, token.colorTextDisabled)), {}, {
     cursor: 'not-allowed'
   })), _defineProperty(_ref, "".concat(componentCls, "-disabled").concat(componentCls, "-checked"), _objectSpread({
     cursor: 'not-allowed'
-  }, genColoredStyle(token.colorBorder, '#E2E8F3', token.colorTextTertiary))), _defineProperty(_ref, "".concat(componentCls, "-checked").concat(componentCls, "-disabled.multiple"), _defineProperty({}, "".concat(componentCls, "-inner"), genMultipleStyle('#CDD5E3', token))), _defineProperty(_ref, "".concat(componentCls, "-checked:not(").concat(componentCls, "-disabled).multiple"), _defineProperty({}, "".concat(componentCls, "-inner"), genMultipleStyle(token.colorPrimary, token))), _ref;
+  }, genColoredStyle(token.colorBorder, token.colorFill, token.colorTextDisabled))), _defineProperty(_ref, "".concat(componentCls, "-checked").concat(componentCls, "-disabled.multiple"), _defineProperty({}, "".concat(componentCls, "-inner"), genMultipleStyle(token.colorTextDisabled, token))), _defineProperty(_ref, "".concat(componentCls, "-checked:not(").concat(componentCls, "-disabled).multiple"), _defineProperty({}, "".concat(componentCls, "-inner"), genMultipleStyle(token.colorPrimary, token))), _ref;
 };
 export default (function (prefixCls) {
   var useStyle = genComponentStyleHook('TagSelect', function (token) {

package/lib/BasicLayout/index.js

@@ -80,7 +80,10 @@ var BasicLayout = ({
     const selectedMenuKeys = (0, import_util2.urlToList)(pathname).map((itemPath) => getMenuMatches(getFlatMenuKeys(menus), itemPath).pop()) || [];
     const newSelectedKeys = selectedMenuKeys.filter((item) => item);
     if (newSelectedKeys.length > 0) {
-      setSelectedKeys([newSelectedKeys[newSelectedKeys.length - 1]]);
+      const selectedKey = newSelectedKeys[newSelectedKeys.length - 1];
+      setSelectedKeys([selectedKey]);
+      const selectedParentKeys = getParentKeys(menus, selectedKey);
+      setOpenKeys((0, import_lodash.uniq)([...openKeys, ...selectedParentKeys]));
     } else {
       setSelectedKeys([]);
     }
@@ -100,6 +103,19 @@ var BasicLayout = ({
       return (0, import_path_to_regexp.pathToRegexp)(item).test(path);
     });
   };
+  const getParentKeys = (menuList, selectedKey) => {
+    let keys = [];
+    (menuList || []).forEach((item) => {
+      const itemChildren = item.children || [];
+      const childrenKeys = itemChildren.map((child) => child.link);
+      if (childrenKeys.includes(selectedKey)) {
+        keys = [...keys, item.link];
+      } else {
+        keys = [...keys, getParentKeys(itemChildren, selectedKey)];
+      }
+    });
+    return keys;
+  };
   const getFlatMenuKeys = (menuList) => {
     let keys = [];
     (menuList || []).forEach((item) => {

package/lib/Highlight/index.d.ts

@@ -29,7 +29,7 @@ export declare const THEME_DARK = "dark";
 export declare const THEME_LIGHT = "light";
 declare const ThemeTypes: ["dark", "light"];
 export type ThemeType = (typeof ThemeTypes)[number];
-declare const supportedLanguages: ("ruby" | "css" | "bash" | "json" | "java" | "go" | "javascript" | "typescript" | "groovy" | "python" | "cpp" | "http" | "markdown" | "nginx" | "sql" | "xml" | "dockerfile" | "yaml" | "solidity" | "tsx" | "jsx")[];
+declare const supportedLanguages: ("ruby" | "css" | "json" | "sql" | "tsx" | "javascript" | "typescript" | "groovy" | "java" | "python" | "bash" | "cpp" | "http" | "markdown" | "nginx" | "xml" | "dockerfile" | "go" | "yaml" | "solidity" | "jsx")[];
 export type LanguageType = (typeof supportedLanguages)[number] | 'html';
 export interface HighlightProps extends LocaleWrapperProps {
     /**

package/lib/IconFont/index.d.ts

@@ -5,5 +5,8 @@ export interface IconFontProps {
     className?: string;
     style?: React.CSSProperties;
 }
+/**
+ * @deprecated Please use `@oceanbase/icons` instead.
+ */
 declare const IconFont: (props: IconFontProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
 export default IconFont;

package/lib/IconFont/index.js

@@ -32,50 +32,10 @@ __export(IconFont_exports, {
   default: () => IconFont_default
 });
 module.exports = __toCommonJS(IconFont_exports);
-var import_icons = require("@oceanbase/icons");
 var import_react = __toESM(require("react"));
 var import_iconfont = require("./font/iconfont.css");
-var CustomIcon = (0, import_icons.createFromIconfontCN)({
-  // 在 iconfont.cn 上生成
-  scriptUrl: "//at.alicdn.com/t/a/font_3786261_ifhixq9j5c.js"
-});
-var iconfontList = [
-  "backup",
-  "backup-colored",
-  "cluster",
-  "cluster-colored",
-  "data-source",
-  "data-source-colored",
-  "docs",
-  "diagnosis",
-  "diagnosis-colored",
-  "host",
-  "host-colored",
-  "log",
-  "log-colored",
-  "migration",
-  "migration-colored",
-  "monitor",
-  "monitor-colored",
-  "notification",
-  "obproxy",
-  "obproxy-colored",
-  "package",
-  "package-colored",
-  "overview",
-  "overview-colored",
-  "property",
-  "property-colored",
-  "tenant",
-  "tenant-colored",
-  "sync",
-  "sync-colored",
-  "system",
-  "system-colored",
-  "user"
-];
 var IconFont = (props) => {
   const { type, className, ...restProps } = props;
-  return iconfontList.includes(type) ? /* @__PURE__ */ import_react.default.createElement(CustomIcon, { type, className, ...restProps }) : /* @__PURE__ */ import_react.default.createElement("i", { className: `iconfont ${type} ${className}`, ...restProps });
+  return /* @__PURE__ */ import_react.default.createElement("i", { className: `iconfont ${type} ${className}`, ...restProps });
 };
 var IconFont_default = IconFont;

package/lib/TagSelect/style/index.js

@@ -66,7 +66,7 @@ var genTagSelectStyle = (token) => {
       position: "relative",
       display: "inline-block",
       fontSize: token.fontSize,
-      color: token.colorTextLabel,
+      color: token.colorText,
       background: token.colorWhite,
       border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
       borderRadius: token.borderRadius,
@@ -106,9 +106,14 @@ var genTagSelectStyle = (token) => {
     },
     [`${componentCls}-small${componentCls}-img`]: genImgCoverStyle("76px", "32px"),
     [`${componentCls}-large`]: genSizeStyle(token.paddingContentVerticalSM, token.fontSize),
-    [`${componentCls}-small`]: genSizeStyle(0, token.fontSize),
+    [`${componentCls}-small`]: {
+      ...genSizeStyle(0, token.fontSize),
+      paddingLeft: `${token.paddingSM}px`,
+      paddingRight: `${token.paddingSM}px`
+    },
     [`${componentCls}-wrapper:not(${componentCls}-disabled):hover`]: {
-      borderColor: token.colorPrimaryText
+      borderColor: token.colorPrimaryText,
+      color: token.colorPrimaryText
     },
     [`${componentCls}-checked`]: genColoredStyle(
       token.blue,
@@ -128,15 +133,15 @@ var genTagSelectStyle = (token) => {
       }
     },
     [`${componentCls}-disabled:not(${componentCls}-checked)`]: {
-      ...genColoredStyle(token.colorBorder, "#F6F8FE", "#CDD5E3"),
+      ...genColoredStyle(token.colorBorder, token.colorFillContent, token.colorTextDisabled),
       cursor: "not-allowed"
     },
     [`${componentCls}-disabled${componentCls}-checked`]: {
       cursor: "not-allowed",
-      ...genColoredStyle(token.colorBorder, "#E2E8F3", token.colorTextTertiary)
+      ...genColoredStyle(token.colorBorder, token.colorFill, token.colorTextDisabled)
     },
     [`${componentCls}-checked${componentCls}-disabled.multiple`]: {
-      [`${componentCls}-inner`]: genMultipleStyle("#CDD5E3", token)
+      [`${componentCls}-inner`]: genMultipleStyle(token.colorTextDisabled, token)
     },
     [`${componentCls}-checked:not(${componentCls}-disabled).multiple`]: {
       [`${componentCls}-inner`]: genMultipleStyle(token.colorPrimary, token)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/ui",
-  "version": "0.2.32",
+  "version": "0.2.34",
   "description": "The UI library based on OceanBase Design",
   "keywords": [
     "oceanbase",
@@ -35,9 +35,9 @@
   },
   "dependencies": {
     "@ant-design/cssinjs": "^1.17.2",
-    "@ant-design/pro-components": "^2.6.34",
-    "@ant-design/pro-layout": "^7.17.15",
-    "@oceanbase/design": "^0.2.31",
+    "@ant-design/pro-components": "^2.6.43",
+    "@ant-design/pro-layout": "^7.17.16",
+    "@oceanbase/design": "^0.2.33",
     "@oceanbase/icons": "^0.2.9",
     "@oceanbase/util": "^0.2.12",
     "ahooks": "^2.10.14",
@@ -65,5 +65,5 @@
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
-  "gitHead": "532d9294abcd03743224d6a9d59d4f1c9ab71375"
+  "gitHead": "c03648d49a5b31ea30f114fb47c44d6184931bde"
 }