@oceanbase/ui 0.2.36 → 0.2.37

package/es/FooterToolbar/index.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["portalDom", "prefixCls"];
+var _excluded = ["portalDom", "prefixCls", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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; }
@@ -9,22 +9,39 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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, { useContext } from 'react';
 import { FooterToolbar as AntFooterToolbar } from '@ant-design/pro-components';
-import { ConfigProvider } from '@oceanbase/design';
+import { ConfigProvider, theme } from '@oceanbase/design';
 import useStyle from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 var FooterToolbar = function FooterToolbar(_ref) {
   var _ref$portalDom = _ref.portalDom,
     portalDom = _ref$portalDom === void 0 ? false : _ref$portalDom,
     customizePrefixCls = _ref.prefixCls,
+    children = _ref.children,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var _useContext = useContext(ConfigProvider.ConfigContext),
     getPrefixCls = _useContext.getPrefixCls;
   var prefixCls = getPrefixCls('pro-footer-bar', customizePrefixCls);
   var _useStyle = useStyle(prefixCls),
     wrapSSR = _useStyle.wrapSSR;
-  return wrapSSR( /*#__PURE__*/_jsx(AntFooterToolbar, _objectSpread({
+  var _theme$useToken = theme.useToken(),
+    token = _theme$useToken.token;
+  return wrapSSR( /*#__PURE__*/_jsx(AntFooterToolbar, _objectSpread(_objectSpread({
     portalDom: portalDom,
     prefixCls: customizePrefixCls
-  }, restProps)));
+  }, restProps), {}, {
+    children: /*#__PURE__*/_jsx(ConfigProvider
+    // large size component
+    , {
+      componentSize: "large"
+      // middle font size
+      ,
+      theme: {
+        token: {
+          fontSizeLG: token.fontSize
+        }
+      },
+      children: children
+    })
+  })));
 };
 export default FooterToolbar;

package/es/FooterToolbar/style/index.js

@@ -8,26 +8,11 @@ import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
 export var genOperationStyle = function genOperationStyle(token) {
   var _ref;
   var antCls = token.antCls,
-    fontSize = token.fontSize,
     controlHeightLG = token.controlHeightLG;
-  var height = controlHeightLG;
-  var lineHeight = "".concat(controlHeightLG, "px");
   return _ref = {}, _defineProperty(_ref, "".concat(antCls, "-btn"), {
-    minWidth: controlHeightLG,
-    height: height,
-    fontSize: fontSize
-  }), _defineProperty(_ref, "".concat(antCls, "-radio-button-wrapper"), {
-    height: height,
-    lineHeight: lineHeight,
-    fontSize: fontSize
-  }), _defineProperty(_ref, "".concat(antCls, "-input-wrapper"), {
-    lineHeight: lineHeight
-  }), _defineProperty(_ref, "".concat(antCls, "-input"), {
-    height: height,
-    fontSize: fontSize
-  }), _defineProperty(_ref, "".concat(antCls, "-input-search-button"), {
-    height: height,
-    lineHeight: lineHeight
+    minWidth: controlHeightLG
+  }), _defineProperty(_ref, "".concat(antCls, "-picker-large"), {
+    height: controlHeightLG
   }), _ref;
 };
 export var genFooterToolbarStyle = function genFooterToolbarStyle(token) {

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" | "javascript" | "typescript" | "groovy" | "java" | "python" | "bash" | "json" | "cpp" | "http" | "markdown" | "nginx" | "sql" | "xml" | "dockerfile" | "go" | "yaml" | "solidity" | "tsx" | "jsx")[];
+declare const supportedLanguages: ("ruby" | "css" | "bash" | "json" | "java" | "javascript" | "typescript" | "groovy" | "python" | "cpp" | "http" | "markdown" | "nginx" | "sql" | "xml" | "dockerfile" | "go" | "yaml" | "solidity" | "tsx" | "jsx")[];
 export type LanguageType = (typeof supportedLanguages)[number] | 'html';
 export interface HighlightProps extends LocaleWrapperProps {
     /**

package/es/PageContainer/index.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["prefixCls", "className", "header", "content", "extraContent", "tabList", "tabBarExtraContent", "footerToolBarProps", "locale"];
+var _excluded = ["prefixCls", "className", "header", "content", "extraContent", "tabList", "tabBarExtraContent", "footer", "footerToolBarProps", "locale"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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; }
@@ -12,7 +12,7 @@ import { PageContainer as AntPageContainer } from '@ant-design/pro-components';
 import classNames from 'classnames';
 import { isObject } from 'lodash';
 import React, { useContext } from 'react';
-import { ConfigProvider, Space, Tooltip } from '@oceanbase/design';
+import { ConfigProvider, Space, Tooltip, theme } from '@oceanbase/design';
 import LocaleWrapper from "../locale/LocaleWrapper";
 import ItemRender from "./ItemRender";
 import zhCN from "./locale/zh-CN";
@@ -27,6 +27,7 @@ var PageContainer = function PageContainer(_ref) {
     extraContent = _ref.extraContent,
     tabList = _ref.tabList,
     tabBarExtraContent = _ref.tabBarExtraContent,
+    footer = _ref.footer,
     footerToolBarProps = _ref.footerToolBarProps,
     locale = _ref.locale,
     restProps = _objectWithoutProperties(_ref, _excluded);
@@ -36,10 +37,13 @@ var PageContainer = function PageContainer(_ref) {
   var prefixCls = getPrefixCls('pro-page-container', customizePrefixCls);
   var _useStyle = useStyle(prefixCls),
     wrapSSR = _useStyle.wrapSSR;
+  var _theme$useToken = theme.useToken(),
+    token = _theme$useToken.token;
   var _ref2 = header || {},
     reload = _ref2.reload,
     subTitle = _ref2.subTitle,
-    breadcrumb = _ref2.breadcrumb;
+    breadcrumb = _ref2.breadcrumb,
+    extra = _ref2.extra;
   var reloadProps = isObject(reload) && ! /*#__PURE__*/React.isValidElement(reload) ? reload : {};
   var reloadCls = classNames("".concat(rootPrefixCls, "-page-header-heading-reload"), reloadProps.className);
   var newSubTitle = (reload || subTitle) && /*#__PURE__*/_jsxs(Space, {
@@ -51,7 +55,23 @@ var PageContainer = function PageContainer(_ref) {
       }))
     }), subTitle]
   });
+  var newExtra = React.Children.map(extra, function (item) {
+    return /*#__PURE__*/_jsx(ConfigProvider
+    // large size component
+    , {
+      componentSize: "large"
+      // middle font size
+      ,
+      theme: {
+        token: {
+          fontSizeLG: token.fontSize
+        }
+      },
+      children: item
+    });
+  });
   var newHeader = header && _objectSpread(_objectSpread({}, header), {}, {
+    extra: newExtra,
     subTitle: newSubTitle,
     breadcrumb: breadcrumb && _objectSpread({
       itemRender: function itemRender(route, params, routes, paths) {
@@ -76,6 +96,21 @@ var PageContainer = function PageContainer(_ref) {
     extraContent: extraContent,
     tabList: tabList,
     tabBarExtraContent: tabBarExtraContent,
+    footer: React.Children.map(footer, function (item) {
+      return /*#__PURE__*/_jsx(ConfigProvider
+      // large size component
+      , {
+        componentSize: "large"
+        // middle font size
+        ,
+        theme: {
+          token: {
+            fontSizeLG: token.fontSize
+          }
+        },
+        children: item
+      });
+    }),
     footerToolBarProps: _objectSpread({
       // render footer under parent instead of body by default
       portalDom: false

package/es/PageContainer/style/index.js

@@ -7,7 +7,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
 import { genOperationStyle, genFooterToolbarStyle } from "../../FooterToolbar/style";
 export var genPageContainerStyle = function genPageContainerStyle(token) {
-  var _$concat$concat, _$concat, _objectSpread2;
+  var _$concat$concat, _$concat2, _objectSpread2;
   var antCls = token.antCls,
     proComponentsCls = token.proComponentsCls,
     componentCls = token.componentCls,
@@ -18,12 +18,12 @@ export var genPageContainerStyle = function genPageContainerStyle(token) {
     paddingLG = token.paddingLG;
   var height = controlHeightLG;
   var lineHeight = "".concat(controlHeightLG, "px");
-  return _objectSpread((_objectSpread2 = {}, _defineProperty(_objectSpread2, "".concat(componentCls), (_$concat = {
+  return _objectSpread((_objectSpread2 = {}, _defineProperty(_objectSpread2, "".concat(componentCls), (_$concat2 = {
     minHeight: '100vh',
     backgroundColor: colorBgLayout
-  }, _defineProperty(_$concat, "".concat(proComponentsCls, "-grid-content"), {
+  }, _defineProperty(_$concat2, "".concat(proComponentsCls, "-grid-content"), {
     minHeight: 'auto'
-  }), _defineProperty(_$concat, "".concat(componentCls, "-warp-page-header,").concat(componentCls, "-wrap-page-header"), (_$concat$concat = {
+  }), _defineProperty(_$concat2, "".concat(componentCls, "-warp-page-header,").concat(componentCls, "-wrap-page-header"), (_$concat$concat = {
     // 减小内容区左右两侧间距
     paddingInlineStart: "".concat(paddingLG, "px !important"),
     paddingInlineEnd: "".concat(paddingLG, "px !important"),
@@ -42,13 +42,16 @@ export var genPageContainerStyle = function genPageContainerStyle(token) {
     marginBlock: 0
   }, genOperationStyle(token))), _defineProperty(_$concat$concat, "".concat(antCls, "-page-header-footer"), {
     marginBlockStart: 0
-  }), _$concat$concat)), _defineProperty(_$concat, "".concat(componentCls, "-children-container"), {
+  }), _$concat$concat)), _defineProperty(_$concat2, "".concat(componentCls, "-children-container"), _defineProperty({
     paddingInline: paddingLG,
     paddingBlockStart: 0,
     paddingBlockEnd: paddingLG
-  }), _defineProperty(_$concat, "".concat(antCls, "-page-header:not(").concat(antCls, "-page-header-has-breadcrumb)"), _defineProperty({}, "".concat(antCls, "-page-header-heading"), {
+  }, "& > ".concat(antCls, "-tabs-top:not(").concat(antCls, "-tabs-card):first-child"), {
+    // equal to page header paddingBlockEnd
+    marginTop: -padding
+  })), _defineProperty(_$concat2, "".concat(antCls, "-page-header:not(").concat(antCls, "-page-header-has-breadcrumb)"), _defineProperty({}, "".concat(antCls, "-page-header-heading"), {
     paddingBlockStart: 0
-  })), _$concat)), _defineProperty(_objectSpread2, "".concat(componentCls, "-no-page-header"), _defineProperty({}, "".concat(componentCls, "-children-container"), {
+  })), _$concat2)), _defineProperty(_objectSpread2, "".concat(componentCls, "-no-page-header"), _defineProperty({}, "".concat(componentCls, "-children-container"), {
     paddingBlockStart: paddingLG
   })), _defineProperty(_objectSpread2, "".concat(componentCls, "-with-footer "), {
     paddingBottom: 64

package/lib/FooterToolbar/index.js

@@ -40,13 +40,26 @@ var FooterToolbar = ({
   // render footer under parent instead of body by default
   portalDom = false,
   prefixCls: customizePrefixCls,
+  children,
   ...restProps
 }) => {
   const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
   const prefixCls = getPrefixCls("pro-footer-bar", customizePrefixCls);
   const { wrapSSR } = (0, import_style.default)(prefixCls);
+  const { token } = import_design.theme.useToken();
   return wrapSSR(
-    /* @__PURE__ */ import_react.default.createElement(import_pro_components.FooterToolbar, { portalDom, prefixCls: customizePrefixCls, ...restProps })
+    /* @__PURE__ */ import_react.default.createElement(import_pro_components.FooterToolbar, { portalDom, prefixCls: customizePrefixCls, ...restProps }, /* @__PURE__ */ import_react.default.createElement(
+      import_design.ConfigProvider,
+      {
+        componentSize: "large",
+        theme: {
+          token: {
+            fontSizeLG: token.fontSize
+          }
+        }
+      },
+      children
+    ))
   );
 };
 var FooterToolbar_default = FooterToolbar;

package/lib/FooterToolbar/style/index.js

@@ -26,33 +26,15 @@ __export(style_exports, {
 module.exports = __toCommonJS(style_exports);
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genOperationStyle = (token) => {
-  const { antCls, fontSize, controlHeightLG } = token;
-  const height = controlHeightLG;
-  const lineHeight = `${controlHeightLG}px`;
+  const { antCls, controlHeightLG } = token;
   return {
-    // Button
+    // limit min width for icon button
     [`${antCls}-btn`]: {
-      minWidth: controlHeightLG,
-      height,
-      fontSize
+      minWidth: controlHeightLG
     },
-    // Radio.Button
-    [`${antCls}-radio-button-wrapper`]: {
-      height,
-      lineHeight,
-      fontSize
-    },
-    // Input
-    [`${antCls}-input-wrapper`]: {
-      lineHeight
-    },
-    [`${antCls}-input`]: {
-      height,
-      fontSize
-    },
-    [`${antCls}-input-search-button`]: {
-      height,
-      lineHeight
+    // set large DatePicker, TimePicker and RangePicker height when font-size is 14px
+    [`${antCls}-picker-large`]: {
+      height: controlHeightLG
     }
   };
 };

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" | "javascript" | "typescript" | "groovy" | "java" | "python" | "bash" | "json" | "cpp" | "http" | "markdown" | "nginx" | "sql" | "xml" | "dockerfile" | "go" | "yaml" | "solidity" | "tsx" | "jsx")[];
+declare const supportedLanguages: ("ruby" | "css" | "bash" | "json" | "java" | "javascript" | "typescript" | "groovy" | "python" | "cpp" | "http" | "markdown" | "nginx" | "sql" | "xml" | "dockerfile" | "go" | "yaml" | "solidity" | "tsx" | "jsx")[];
 export type LanguageType = (typeof supportedLanguages)[number] | 'html';
 export interface HighlightProps extends LocaleWrapperProps {
     /**

package/lib/PageContainer/index.js

@@ -50,6 +50,7 @@ var PageContainer = ({
   extraContent,
   tabList,
   tabBarExtraContent,
+  footer,
   footerToolBarProps,
   locale,
   ...restProps
@@ -58,15 +59,29 @@ var PageContainer = ({
   const rootPrefixCls = getPrefixCls();
   const prefixCls = getPrefixCls("pro-page-container", customizePrefixCls);
   const { wrapSSR } = (0, import_style.default)(prefixCls);
-  const { reload, subTitle, breadcrumb } = header || {};
+  const { token } = import_design.theme.useToken();
+  const { reload, subTitle, breadcrumb, extra } = header || {};
   const reloadProps = (0, import_lodash.isObject)(reload) && !import_react.default.isValidElement(reload) ? reload : {};
   const reloadCls = (0, import_classnames.default)(
     `${rootPrefixCls}-page-header-heading-reload`,
     reloadProps.className
   );
   const newSubTitle = (reload || subTitle) && /* @__PURE__ */ import_react.default.createElement(import_design.Space, { size: 12 }, reload && /* @__PURE__ */ import_react.default.createElement(import_design.Tooltip, { title: locale.reload }, (0, import_lodash.isObject)(reload) && import_react.default.isValidElement(reload) ? reload : /* @__PURE__ */ import_react.default.createElement(import_icons.SyncOutlined, { ...reloadProps, className: reloadCls })), subTitle);
+  const newExtra = import_react.default.Children.map(extra, (item) => /* @__PURE__ */ import_react.default.createElement(
+    import_design.ConfigProvider,
+    {
+      componentSize: "large",
+      theme: {
+        token: {
+          fontSizeLG: token.fontSize
+        }
+      }
+    },
+    item
+  ));
   const newHeader = header && {
     ...header,
+    extra: newExtra,
     subTitle: newSubTitle,
     breadcrumb: breadcrumb && {
       itemRender: (route, params, routes, paths) => /* @__PURE__ */ import_react.default.createElement(import_ItemRender.default, { route, params, routes, paths }),
@@ -93,6 +108,18 @@ var PageContainer = ({
         extraContent,
         tabList,
         tabBarExtraContent,
+        footer: import_react.default.Children.map(footer, (item) => /* @__PURE__ */ import_react.default.createElement(
+          import_design.ConfigProvider,
+          {
+            componentSize: "large",
+            theme: {
+              token: {
+                fontSizeLG: token.fontSize
+              }
+            }
+          },
+          item
+        )),
         footerToolBarProps: {
           // render footer under parent instead of body by default
           portalDom: false,

package/lib/PageContainer/style/index.js

@@ -75,7 +75,12 @@ var genPageContainerStyle = (token) => {
       [`${componentCls}-children-container`]: {
         paddingInline: paddingLG,
         paddingBlockStart: 0,
-        paddingBlockEnd: paddingLG
+        paddingBlockEnd: paddingLG,
+        // set top tabs style when it is PageContainer's first child
+        [`& > ${antCls}-tabs-top:not(${antCls}-tabs-card):first-child`]: {
+          // equal to page header paddingBlockEnd
+          marginTop: -padding
+        }
       },
       // remove paddingBlockStart for page header without breadcrumb
       [`${antCls}-page-header:not(${antCls}-page-header-has-breadcrumb)`]: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/ui",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "description": "The UI library based on OceanBase Design",
   "keywords": [
     "oceanbase",
@@ -37,7 +37,7 @@
     "@ant-design/cssinjs": "^1.17.2",
     "@ant-design/pro-components": "^2.6.43",
     "@ant-design/pro-layout": "^7.17.16",
-    "@oceanbase/design": "^0.2.35",
+    "@oceanbase/design": "^0.2.36",
     "@oceanbase/icons": "^0.2.10",
     "@oceanbase/util": "^0.2.13",
     "ahooks": "^2.10.14",
@@ -65,5 +65,5 @@
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
-  "gitHead": "fba4db2117ba5b298781da29aaeb987480681217"
+  "gitHead": "2ed9cad13223ef74655f023d1478032a1441da8d"
 }