@oceanbase/ui 1.0.0-alpha.1 → 1.0.0-alpha.2

package/lib/DateRanger/Ranger.js

@@ -46,6 +46,8 @@ var import_PickerPanel = __toESM(require("./PickerPanel"));
 var import_zh_CN = __toESM(require("./locale/zh-CN"));
 var import_index = require("./index.less");
 var import_ahooks = require("ahooks");
+var import_util2 = require("@oceanbase/util");
+var DefaultMaxHistoryCapacity = 20;
 var prefix = (0, import_util.getPrefix)("date-ranger");
 var Ranger = import_react.default.forwardRef((props, ref) => {
   var _a;
@@ -73,6 +75,7 @@ var Ranger = import_react.default.forwardRef((props, ref) => {
     hideYear = false,
     hideSecond = false,
     autoCalcRange = false,
+    history: historyProp = false,
     onChange = import_lodash.noop,
     disabledDate,
     locale,
@@ -106,10 +109,47 @@ var Ranger = import_react.default.forwardRef((props, ref) => {
   const [open, setOpen] = (0, import_react.useState)(false);
   const [tooltipOpen, setTooltipOpen] = (0, import_react.useState)(false);
   const [backRadioFocused, setBackRadioFocused] = (0, import_react.useState)(false);
+  const [historyMenuVisible, setHistoryMenuVisible] = (0, import_react.useState)(false);
   const rangeRef = (0, import_react.useRef)(null);
   const popRef = (0, import_react.useRef)(null);
   const labelRef = (0, import_react.useRef)(null);
   const [isPlay, setIsPlay] = (0, import_react.useState)(rangeName !== import_constant.CUSTOMIZE);
+  const history = (0, import_react.useMemo)(() => {
+    if (historyProp) {
+      return {
+        capacity: typeof historyProp === "object" ? historyProp.capacity : DefaultMaxHistoryCapacity
+      };
+    }
+    return false;
+  }, [historyProp]);
+  const [rangeHistory, setRangeHistory] = (0, import_util2.useLocalStorageState)(
+    "ob-design-date-ranger-local-storage-range-history-state",
+    { defaultValue: [], listenStorageChange: true }
+  );
+  const updateRangeHistory = (range) => {
+    if (!range) {
+      return;
+    }
+    if (range.length < 2 || !history) {
+      return;
+    }
+    const formattedValue = [
+      range[0].format(import_constant.YEAR_DATE_TIME_SECOND_FORMAT_CN),
+      range[1].format(import_constant.YEAR_DATE_TIME_SECOND_FORMAT_CN)
+    ];
+    if (rangeHistory.find((item) => (0, import_lodash.isEqual)(item, formattedValue))) {
+      return;
+    }
+    const updatedValue = [formattedValue, ...rangeHistory];
+    if (updatedValue.length > history.capacity) {
+      updatedValue.splice(0, history.capacity);
+    }
+    setRangeHistory(updatedValue);
+  };
+  const delRangeHistory = (range) => {
+    const updatedValue = rangeHistory.filter((item) => !(0, import_lodash.isEqual)(item, range));
+    setRangeHistory(updatedValue);
+  };
   const compare = (m1, m2) => {
     if (Array.isArray(m1) && !Array.isArray(m2))
       return false;
@@ -151,6 +191,7 @@ var Ranger = import_react.default.forwardRef((props, ref) => {
   const rangeChange = (range) => {
     setInnerValue(range);
     onChange(range);
+    updateRangeHistory(range);
   };
   const datePickerChange = (range) => {
     rangeChange(range);
@@ -212,6 +253,9 @@ var Ranger = import_react.default.forwardRef((props, ref) => {
     }
     return isEN ? `Nearly ${differenceSeconds} seconds` : `近 ${differenceSeconds} 秒`;
   };
+  const getHistoryTitle = () => {
+    return isEN ? "History records" : "历史记录";
+  };
   const setNow = () => {
     const selected = selects.find((item) => item.name === rangeName);
     if (selected == null ? void 0 : selected.range) {
@@ -276,7 +320,96 @@ var Ranger = import_react.default.forwardRef((props, ref) => {
                 className: (0, import_classnames.default)(`${prefix}-dropdown-picker`, overlayClassName),
                 style: overlayStyle
               },
-              originNode,
+              /* @__PURE__ */ import_react.default.createElement(import_design.Flex, { vertical: true, justify: "space-between" }, !historyMenuVisible && /* @__PURE__ */ import_react.default.createElement("div", { className: "options" }, originNode), history && historyMenuVisible && /* @__PURE__ */ import_react.default.createElement("div", { className: "history" }, /* @__PURE__ */ import_react.default.createElement(
+                import_design.Button,
+                {
+                  type: "link",
+                  style: { paddingLeft: 8, color: token.colorTextBase },
+                  onClick: (e) => {
+                    setHistoryMenuVisible(false);
+                    e.stopPropagation();
+                  }
+                },
+                /* @__PURE__ */ import_react.default.createElement(import_icons.ArrowLeftOutlined, { color: token.colorTextLabel }),
+                getHistoryTitle()
+              ), /* @__PURE__ */ import_react.default.createElement(
+                import_design.Menu,
+                {
+                  onClick: ({ key: rangeString }) => {
+                    const vList = rangeString.split(",").map((v) => v.trim());
+                    rangeChange(
+                      vList.map((v) => {
+                        return isMoment ? (0, import_moment.default)(v) : (0, import_dayjs.default)(v);
+                      })
+                    );
+                    handleNameChange(import_constant.CUSTOMIZE);
+                  },
+                  style: { maxHeight: 480, overflowY: "auto" },
+                  items: rangeHistory.map((range) => {
+                    return {
+                      key: String(range),
+                      label: /* @__PURE__ */ import_react.default.createElement(
+                        import_design.Flex,
+                        {
+                          className: `${prefix}-history-menu-item`,
+                          key: String(range),
+                          vertical: true
+                        },
+                        /* @__PURE__ */ import_react.default.createElement("span", null, (isMoment ? (0, import_moment.default)(range[0]) : (0, import_dayjs.default)(range[0])).format(
+                          import_constant.YEAR_DATE_TIME_SECOND_FORMAT_CN
+                        ), "~"),
+                        /* @__PURE__ */ import_react.default.createElement("span", null, (isMoment ? (0, import_moment.default)(range[1]) : (0, import_dayjs.default)(range[1])).format(
+                          import_constant.YEAR_DATE_TIME_SECOND_FORMAT_CN
+                        )),
+                        /* @__PURE__ */ import_react.default.createElement(import_design.Space, { className: `${prefix}-menu-text-btn-wrapper` }, /* @__PURE__ */ import_react.default.createElement(
+                          import_design.Button,
+                          {
+                            className: `${prefix}-menu-text-btn`,
+                            type: "text",
+                            color: "default",
+                            variant: "filled",
+                            size: "small",
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              const vList = range.map((v) => v);
+                              const text = `${vList.join("~")}`;
+                              navigator.clipboard.writeText(text);
+                              import_design.message.success(text);
+                            }
+                          },
+                          /* @__PURE__ */ import_react.default.createElement(import_icons.CopyOutlined, null)
+                        ), /* @__PURE__ */ import_react.default.createElement(
+                          import_design.Button,
+                          {
+                            className: `${prefix}-menu-text-btn`,
+                            type: "text",
+                            color: "default",
+                            variant: "filled",
+                            size: "small",
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              delRangeHistory(range);
+                            }
+                          },
+                          /* @__PURE__ */ import_react.default.createElement(import_icons.DeleteOutlined, null)
+                        ))
+                      )
+                    };
+                  })
+                }
+              )), history && !historyMenuVisible && /* @__PURE__ */ import_react.default.createElement(
+                import_design.Button,
+                {
+                  type: "link",
+                  style: { width: "max-content" },
+                  onClick: (e) => {
+                    setHistoryMenuVisible(true);
+                    e.stopPropagation();
+                  }
+                },
+                getHistoryTitle(),
+                /* @__PURE__ */ import_react.default.createElement(import_icons.RightOutlined, null)
+              )),
               /* @__PURE__ */ import_react.default.createElement(import_design.Divider, { type: "vertical", style: { height: "auto", margin: "0px 4px 0px 0px" } }),
               /* @__PURE__ */ import_react.default.createElement(
                 import_PickerPanel.default,

package/lib/DateRanger/constant/index.js

@@ -258,7 +258,7 @@ var THIS_WEEK = {
 var LAST_WEEK = {
   label: "上周",
   enLabel: "Last week",
-  rangeLabel: "last week",
+  rangeLabel: "1w",
   name: "LAST_WEEK",
   range: (current = (0, import_moment.default)()) => [
     current.clone().startOf(WEEK_UNIT).add(-1, WEEK_UNIT),

package/lib/DateRanger/index.less

@@ -155,3 +155,26 @@
     }
   }
 }
+
+.@{prefix}-history-menu-item {
+  .@{prefix}-menu-text-btn-wrapper {
+    justify-content: space-between;
+    height: 0;
+    transition: height 0.2s;
+    overflow: hidden;
+  }
+  &:hover {
+    .@{prefix}-menu-text-btn-wrapper {
+      height: 22px;
+    }
+  }
+}
+
+.@{prefix}-menu-text-btn {
+  width: 72px;
+
+  background-color: @colorFillSecondary !important;
+  &:hover {
+    background-color: @colorFill !important;
+  }
+}

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

package/lib/PageContainer/index.js

@@ -62,7 +62,13 @@ 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,
+    backIcon = /* @__PURE__ */ import_react.default.createElement(import_design.Button, { style: { fontSize: token.fontSizeLG }, icon: /* @__PURE__ */ import_react.default.createElement(import_icons.ArrowLeftOutlined, null) })
+  } = 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`,
@@ -75,7 +81,8 @@ var PageContainer = ({
     breadcrumb: breadcrumb && {
       itemRender: (route, params, routes, paths) => /* @__PURE__ */ import_react.default.createElement(import_ItemRender.default, { route, params, routes, paths }),
       ...breadcrumb
-    }
+    },
+    backIcon
   };
   const noHasHeader = !title && ["title", "subTitle", "extra", "tags", "avatar", "backIcon", "breadcrumb"].every(
     (item) => !(newHeader == null ? void 0 : newHeader[item])

package/lib/PageContainer/style/index.js

@@ -31,13 +31,11 @@ var genPageContainerStyle = (token) => {
     proComponentsCls,
     componentCls,
     colorBgLayout,
-    fontSizeHeading3,
+    fontSizeHeading2,
     controlHeightLG,
     padding,
     paddingLG
   } = token;
-  const height = controlHeightLG;
-  const lineHeight = `${controlHeightLG}px`;
   return {
     [`${componentCls}`]: {
       minHeight: "100vh",
@@ -60,7 +58,7 @@ var genPageContainerStyle = (token) => {
           paddingBlockStart: 0
         },
         [`${antCls}-page-header-heading-title`]: {
-          fontSize: fontSizeHeading3,
+          fontSize: fontSizeHeading2,
           marginInlineEnd: token.marginXS
         },
         [`${antCls}-page-header-heading-reload`]: {
@@ -68,9 +66,10 @@ var genPageContainerStyle = (token) => {
           fontSize: token.fontSizeLG,
           marginTop: token.marginXXS
         },
+        [`${antCls}-page-header-heading-left`]: {
+          marginBlock: 0
+        },
         [`${antCls}-page-header-heading-extra`]: {
-          height,
-          lineHeight,
           marginBlock: 0
         },
         [`${antCls}-page-header-footer`]: {

package/lib/ProCard/index.js

@@ -40,6 +40,7 @@ var import_icons = require("@oceanbase/icons");
 var import_classnames = __toESM(require("classnames"));
 var import_style = __toESM(require("./style"));
 var ProCard = ({
+  loading,
   bordered,
   ghost,
   title,
@@ -74,6 +75,7 @@ var ProCard = ({
     /* @__PURE__ */ import_react.default.createElement(
       import_pro_components.ProCard,
       {
+        loading: loading === true ? /* @__PURE__ */ import_react.default.createElement(import_design.Skeleton, { active: true, title: false, paragraph: { rows: 4 } }) : loading,
         prefixCls: customizePrefixCls,
         bordered: bordered ?? ((contextCard == null ? void 0 : contextCard.variant) ? (contextCard == null ? void 0 : contextCard.variant) === "outlined" : void 0),
         ghost,

package/lib/ProCard/style/index.js

@@ -36,6 +36,9 @@ var genProCardStyle = (token) => {
     [`div${componentCls}`]: {
       borderRadius: token.borderRadiusLG
     },
+    [`${componentCls}${componentCls}-border`]: {
+      border: `${token.lineWidth}px solid ${token.colorBorderSecondary}`
+    },
     [`${componentCls}:not(${componentCls}-border):not(${componentCls}-ghost)`]: {
       boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.03),0 1px 6px -1px rgba(0, 0, 0, 0.02),0 2px 4px 0 rgba(0, 0, 0, 0.02)"
     },

package/lib/ProTable/index.d.ts

@@ -3,7 +3,7 @@ import type { ProTableProps as AntProTableProps } from '@ant-design/pro-componen
 export interface ProTableProps<T, U, ValueType> extends AntProTableProps<T, U, ValueType> {
     innerBordered?: boolean;
 }
-declare function ProTable<T, U, ValueType>({ form, headerTitle, options, optionsRender, toolbar, toolBarRender, size, bordered, innerBordered, expandable, rowSelection, pagination: customPagination, footer, locale, cardProps: outerCardProps, prefixCls: customizePrefixCls, tableClassName, className, ...restProps }: ProTableProps<T, U, ValueType>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare function ProTable<T, U, ValueType>({ form, headerTitle, options, optionsRender, toolbar, toolBarRender, size, bordered, innerBordered, cardBordered, expandable, rowSelection, pagination: customPagination, footer, locale, cardProps: outerCardProps, prefixCls: customizePrefixCls, tableClassName, className, ...restProps }: ProTableProps<T, U, ValueType>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 declare namespace ProTable {
     var Summary;
 }

package/lib/ProTable/index.js

@@ -49,6 +49,7 @@ function ProTable({
   size,
   bordered,
   innerBordered,
+  cardBordered,
   expandable,
   rowSelection,
   pagination: customPagination,
@@ -60,7 +61,7 @@ function ProTable({
   className,
   ...restProps
 }) {
-  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
+  const { getPrefixCls, card: contextCard } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
   const tablePrefixCls = getPrefixCls("table", customizePrefixCls);
   const { wrapSSR: tableWrapSSR } = import_design.Table.useStyle(tablePrefixCls);
   const pagination = import_design.Table.useDefaultPagination(customPagination);
@@ -79,7 +80,11 @@ function ProTable({
   const { wrapSSR } = (0, import_style2.default)(prefixCls);
   const proTableCls = (0, import_classnames.default)(className);
   const { emptyText = /* @__PURE__ */ import_react.default.createElement(import_design.Empty, { image: import_design.Empty.PRESENTED_IMAGE_SIMPLE }), ...restLocale } = locale || {};
-  const cardProps = typeof outerCardProps === "boolean" ? {} : outerCardProps;
+  const cardProps = (0, import_lodash.merge)(
+    {},
+    contextCard,
+    typeof outerCardProps === "boolean" ? {} : outerCardProps
+  );
   const proCardCls = getPrefixCls("pro-card", customizePrefixCls);
   return tableWrapSSR(
     lightFilterWrapSSR(
@@ -90,6 +95,7 @@ function ProTable({
             defaultSize: "large",
             size,
             bordered: bordered || innerBordered,
+            cardBordered: cardBordered ?? ((contextCard == null ? void 0 : contextCard.variant) ? (contextCard == null ? void 0 : contextCard.variant) === "outlined" : void 0),
             form: {
               // query form should remove required mark
               requiredMark: false,
@@ -105,12 +111,16 @@ function ProTable({
               className: (0, import_classnames.default)(
                 {
                   [`${proCardCls}-has-title`]: !!headerTitle || options || options === void 0 || optionsRender || toolbar || toolBarRender,
-                  [`${proCardCls}-no-divider`]: !(cardProps == null ? void 0 : cardProps.headerBordered),
+                  [`${proCardCls}-no-divider`]: !(cardProps == null ? void 0 : cardProps.headerBordered) && !(cardProps == null ? void 0 : cardProps.divided),
                   [`${proCardCls}-no-padding`]: true,
                   [`${proCardCls}-contain-tabs`]: !!(cardProps == null ? void 0 : cardProps.tabs)
                 },
                 cardProps == null ? void 0 : cardProps.className
-              )
+              ),
+              bodyStyle: {
+                paddingBlock: 0,
+                ...cardProps == null ? void 0 : cardProps.bodyStyle
+              }
             },
             expandable: expandable ? {
               columnWidth: !size || size === "large" ? 40 : 32,

package/lib/ProTable/style/index.js

@@ -36,6 +36,13 @@ var genProTableStyle = (token) => {
           flexDirection: "row-reverse"
         }
       },
+      [`${proCardComponentCls}:not(${proCardComponentCls}-no-divider)`]: {
+        [`${proCardComponentCls}-body`]: {
+          [`${componentCls}-list-toolbar-container`]: {
+            borderBottom: `${token.lineWidth}px solid ${token.colorBorderSecondary}`
+          }
+        }
+      },
       [`${proCardComponentCls}${proCardComponentCls}-no-padding`]: {
         [`${proCardComponentCls}-body`]: {
           paddingInline: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/ui",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.2",
   "description": "The UI library based on OceanBase Design",
   "keywords": [
     "oceanbase",
@@ -41,9 +41,9 @@
     "@ant-design/cssinjs": "^1.24.0",
     "@ant-design/pro-components": "^2.8.10",
     "@antv/g6": "3.4.10",
-    "@oceanbase/design": "^1.0.0-alpha.1",
+    "@oceanbase/design": "^1.0.0-alpha.2",
     "@oceanbase/icons": "^1.0.0-alpha.0",
-    "@oceanbase/util": "^1.0.0-alpha.0",
+    "@oceanbase/util": "^1.0.0-alpha.1",
     "ahooks": "^2.10.14",
     "classnames": "^2.5.1",
     "dayjs": "^1.11.18",
@@ -70,5 +70,5 @@
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
-  "gitHead": "47b1ebfa75581585b83252085dddd33fc2c072a5"
+  "gitHead": "72910b1a2b037811f3ed5561ee5e897d7b744135"
 }