@oceanbase/ui 0.2.0

package/lib/BasicLayout/index.less

@@ -0,0 +1,400 @@
+@import '../variable.less';
+
+@prefix: ob-layout;
+
+// 弹出菜单样式
+.@{prefixCls}-menu-submenu-popup {
+  .@{prefixCls}-menu {
+    padding-left: 6px !important;
+    background-color: @colorBgLayout !important;
+    .@{prefixCls}-menu-item,
+    .@{prefixCls}-menu-submenu {
+      width: 100%;
+      background-color: transparent;
+      border: none;
+      margin-inline: 0;
+      &:not(:last-child) {
+        margin-bottom: 8px !important;
+      }
+    }
+    .@{prefixCls}-menu-item-active,
+    .@{prefixCls}-menu-submenu-active > .@{prefixCls}-menu-submenu-title {
+      color: @colorText !important;
+      font-weight: 600;
+      animation: activeGradientAnimation 0.1s;
+      .border-gradient(linear-gradient(to right, #E9EDF6, @colorBgLayout), linear-gradient(90deg, #C6CDD9, @colorBgLayout), 0.5px, solid, 8px 0 0 8px);
+    }
+
+    .@{prefixCls}-menu-item-selected {
+      color: @colorPrimary !important;
+      font-weight: 600;
+      animation: selectedGradientAnimation 0.1s;
+      .border-gradient(linear-gradient(to right, #E5EEFF, #F4F8FF), linear-gradient(90deg, @colorPrimaryBorder, @colorBgLayout), 0.5px, solid, 8px 0 0 8px);
+    }
+    .@{prefixCls}-divider {
+      width: 60%;
+      min-width: 60%;
+      margin: 0 0 8px 16px !important;
+    }
+  }
+}
+
+.@{prefix}-banner-wrapper {
+  position: fixed;
+  top: 0;
+  z-index: 20;
+  width: 100%;
+}
+
+.@{prefix} {
+  height: 100%;
+  background-color: @colorBgLayout;
+  transition: all 0.1s;
+
+  .@{prefix}-content-layout {
+    max-width: @maxWidth;
+    // 居中对齐
+    margin: 0 auto;
+    .@{prefix}-sider {
+      position: fixed;
+      z-index: 10;
+      padding: 16px 0 16px 16px;
+      background-color: @colorBgLayout;
+      transition: all 0.3s;
+
+      .@{prefix}-sider-border {
+        position: relative;
+        top: -16px;
+        width: 1px;
+        height: 100%;
+        background-color: #e2e8f3;
+        cursor: pointer;
+        opacity: 0;
+        // 左右两侧扩大热区
+        &::after {
+          position: absolute;
+          top: 0;
+          right: -10px;
+          bottom: 0;
+          left: -10px;
+          content: '';
+        }
+        &:hover {
+          opacity: 1;
+          // 仅在 hover 时增加过渡动画，避免展开/收起时 border 和 collapse 没有及时消失、影响整体效果
+          transition: opacity 0.3s;
+          .@{prefix}-sider-collapse {
+            opacity: 1;
+            transition: opacity 0.3s;
+          }
+        }
+
+        .@{prefix}-sider-collapse {
+          position: relative;
+          top: 245px;
+          right: 10px;
+          // 需要设置 z-index 以便叠加在分隔线上，否则点击的是分隔线的热区，无法触发 collapse 的点击事件
+          z-index: 1;
+          width: 20px;
+          height: 42px;
+          line-height: 42px;
+          text-align: center;
+          background-color: #fff;
+          border: 1px solid @colorBorder;
+          border-radius: 10px;
+          cursor: pointer;
+          opacity: 0;
+          // 设置展开/收起按钮中的图标大小
+          .@{iconPrefixCls} {
+            font-size: 12px;
+          }
+        }
+      }
+
+      .@{prefix}-sider-wrapper {
+        display: flex;
+        height: calc(100vh - 48px);
+        // 菜单通用样式
+        .@{prefixCls}-menu {
+          background-color: transparent;
+          border-right: none;
+
+          .@{prefixCls}-menu-item,
+          .@{prefixCls}-menu-submenu {
+            width: 100%;
+            margin-top: 0;
+            margin-right: auto;
+            margin-left: auto;
+            color: @colorText;
+            background-color: transparent;
+            .@{iconPrefixCls} {
+              // 图标尺寸设为 18px，因为设计侧给到的图标内侧有间距，需要适当加大尺寸
+              width: 18px;
+              height: 18px;
+              font-size: 18px;
+            }
+          }
+          .@{prefixCls}-menu-submenu > .@{prefixCls}-menu-submenu-title {
+            width: 100%;
+            margin-bottom: 4px !important;
+            margin-inline: 0;
+            margin-block: 0;
+          }
+        }
+        // 内嵌菜单样式
+        .@{prefixCls}-menu-inline {
+          // 菜单项间距
+          .@{prefixCls}-menu-item,
+          .@{prefixCls}-menu-submenu {
+            &:not(:last-child) {
+              margin-bottom: 16px;
+              // 子菜单展开时 margin-bottom 会变小，为了避免效果突兀，增加过渡效果
+              transition: margin-bottom 0.2s;
+            }
+          }
+          .@{prefixCls}-menu-submenu-open {
+            &:not(:last-child) {
+              // 子菜单展开时，减小 margin-bottom
+              margin-bottom: 4px;
+            }
+          }
+          // 子菜单项间距
+          .@{prefixCls}-menu-submenu {
+            .@{prefixCls}-menu-item:not(:last-child) {
+              margin-bottom: 4px;
+            }
+          }
+          // 菜单项缩进
+          .@{prefixCls}-menu-item,
+          .@{prefixCls}-menu-submenu > .@{prefixCls}-menu-submenu-title {
+            padding-left: 16px !important;
+          }
+          // 子菜单项缩进
+          .@{prefixCls}-menu-sub {
+            .@{prefixCls}-menu-item {
+              margin-left: 16px;
+              padding-left: 28px !important;
+            }
+          }
+          // 菜单项激活样式
+          .@{prefixCls}-menu-item-active,
+          .@{prefixCls}-menu-submenu-active > .@{prefixCls}-menu-submenu-title {
+            color: @colorText !important;
+            font-weight: 600;
+            animation: activeGradientAnimation 0.1s;
+            .border-gradient(linear-gradient(to right, #E9EDF6, @colorBgLayout), linear-gradient(90deg, #C6CDD9, @colorBgLayout), 0.5px, solid, 8px 0 0 8px);
+          }
+          // 菜单项选中样式
+          .@{prefixCls}-menu-item-selected {
+            color: @colorPrimary !important;
+            font-weight: 600;
+            animation: selectedGradientAnimation 0.5s;
+            .border-gradient(linear-gradient(to right, #E5EEFF, #F4F8FF), linear-gradient(90deg, @colorPrimaryBorder, @colorBgLayout), 0.5px, solid, 8px 0 0 8px);
+            &::after {
+              // 去掉菜单项的选中标记
+              display: none;
+            }
+          }
+          .@{prefixCls}-menu-submenu-selected > .@{prefixCls}-menu-submenu-title {
+            color: @colorPrimary !important;
+          }
+          .@{prefixCls}-divider {
+            margin: 0 0 16px 0;
+          }
+        }
+
+        // 垂直菜单样式
+        .@{prefixCls}-menu-vertical {
+          overflow-x: hidden;
+          overflow-y: auto;
+          border-right: none;
+
+          .@{prefixCls}-menu-item,
+          .@{prefixCls}-menu-submenu {
+            &:not(:last-child) {
+              margin-bottom: 4px;
+            }
+          }
+
+          .@{prefixCls}-menu-item,
+          .@{prefixCls}-menu-submenu > .@{prefixCls}-menu-submenu-title {
+            width: 52px;
+            height: 52px;
+            padding: 0;
+            line-height: 52px;
+            text-align: center;
+
+            .@{prefixCls}-menu-title-content {
+              display: inline-block;
+              width: 40px;
+              height: 40px;
+              line-height: 40px;
+              border-radius: 8px;
+            }
+
+            .@{prefixCls}-menu-submenu-arrow {
+              display: none;
+            }
+          }
+          .@{prefixCls}-menu-item-active,
+          .@{prefixCls}-menu-submenu-active > .@{prefixCls}-menu-submenu-title {
+            .@{prefixCls}-menu-title-content {
+              background-color: #e9edf6;
+              border: 0.5px solid #c6cdd9;
+            }
+          }
+          .@{prefixCls}-menu-item-selected,
+          .@{prefixCls}-menu-submenu-selected > .@{prefixCls}-menu-submenu-title {
+            .@{prefixCls}-menu-title-content {
+              background-color: #e5eeff;
+              border: 0.5px solid @colorPrimaryBorder;
+            }
+          }
+        }
+
+        .@{prefix}-sub-sider {
+          border-right: 1px solid #e2e8f3;
+          .@{prefixCls}-divider {
+            margin: 0 0 4px 0;
+          }
+        }
+
+        .@{prefix}-sub-sider,
+        .@{prefix}-menu-collapsed {
+          width: 52px;
+          .@{prefixCls}-divider {
+            margin: 0 0 4px 0;
+          }
+        }
+
+        .@{prefix}-sider-content {
+          display: flex;
+          flex: 1;
+          // 纵向排列
+          flex-direction: column;
+          // 纵向两端对齐
+          justify-content: space-between;
+          height: 100%;
+
+          .@{prefix}-sider-header {
+            padding-top: 16px;
+          }
+
+          .@{prefix}-menu-wrapper {
+            display: flex;
+            flex-direction: column;
+            // 保证垂直方向超出高度出现滚动
+            flex-grow: 1;
+            justify-content: space-between;
+            overflow-x: hidden;
+            overflow-y: auto;
+
+            .@{prefix}-menu {
+              margin-bottom: 32px;
+            }
+          }
+        }
+      }
+    }
+
+    .@{prefix}-sider-collapsed {
+      padding-left: 0;
+    }
+
+    .@{prefix}-sider-has-sub-sider {
+      padding: 0;
+      // 包含子侧边栏的菜单不支持收起，直接隐藏侧边栏 border 和 collapse
+      .@{prefix}-sider-border {
+        display: none;
+        .@{prefix}-sider-collapse {
+          display: none;
+        }
+      }
+      .@{prefixCls}-menu-inline {
+        padding-top: 16px;
+        .@{prefixCls}-menu-item,
+        .@{prefixCls}-menu-submenu {
+          &:not(:last-child) {
+            margin-bottom: 16px !important;
+          }
+        }
+        .@{prefixCls}-divider {
+          width: 60%;
+          min-width: 60%;
+          margin: -8px 0 8px 16px !important;
+        }
+      }
+      .@{prefixCls}-menu-vertical {
+        padding-top: 10px;
+      }
+      .@{prefix}-sider-content {
+        padding-left: 6px;
+      }
+    }
+
+    .@{prefix}-content {
+      background-color: @colorBgLayout;
+      transition: all 0.3s;
+    }
+
+    // .@{prefix}-content-0 {
+    //   .@{prefixCls}-pro-page-container {
+    //     .@{prefixCls}-pro-footer-bar {
+    //       width: 100%;
+    //     }
+    //   }
+    // }
+
+    // .@{prefix}-content-52 {
+    //   .@{prefixCls}-pro-page-container {
+    //     .@{prefixCls}-pro-footer-bar {
+    //       width: calc(100% - 52px - 24px);
+    //     }
+    //   }
+    // }
+
+    // .@{prefix}-content-104 {
+    //   .@{prefixCls}-pro-page-container {
+    //     .@{prefixCls}-pro-footer-bar {
+    //       width: calc(100% - 104px - 24px);
+    //     }
+    //   }
+    // }
+
+    // .@{prefix}-content-192 {
+    //   .@{prefixCls}-pro-page-container {
+    //     .@{prefixCls}-pro-footer-bar {
+    //       width: calc(100% - 192px - 24px);
+    //     }
+    //   }
+    // }
+  }
+}
+
+.@{prefixCls}-pro-footer-bar {
+  width: calc(100% - 192px - 24px);
+}
+
+@media (min-width: @maxWidth) {
+  .@{prefixCls}-pro-footer-bar {
+    right: calc((100% - @maxWidth) / 2 + 24px);
+    width: calc(@maxWidth - 192px - 24px - 24px);
+    max-width: calc(@maxWidth - 192px - 24px - 24px);
+  }
+}
+
+// 对于 Alert 类型的 banner，自动增加上间距
+// 对于其他类型的 banner，需要业务侧自行设置上间距
+.@{prefix}-with-banner {
+  margin-top: 38px;
+}
+
+@media (min-width: @maxWidth) {
+  .@{prefix} {
+    .@{prefix}-content-layout {
+      .@{prefix}-sider {
+        padding-left: 0;
+      }
+    }
+  }
+}

package/lib/BasicLayout/locale/en-US.js

@@ -0,0 +1,35 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/BasicLayout/locale/en-US.ts
+var en_US_exports = {};
+__export(en_US_exports, {
+  default: () => en_US_default
+});
+module.exports = __toCommonJS(en_US_exports);
+var en_US_default = {
+  help: "Help",
+  welcome: "Welcome page",
+  viewDocs: "Check the user manual",
+  downloadDocs: "Download the user manual",
+  about: "About",
+  version: "Version",
+  releaseTime: "Release date",
+  company: "Ant Group",
+  right: "All Rights Reserved"
+};

package/lib/BasicLayout/locale/zh-CN.js

@@ -0,0 +1,35 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/BasicLayout/locale/zh-CN.ts
+var zh_CN_exports = {};
+__export(zh_CN_exports, {
+  default: () => zh_CN_default
+});
+module.exports = __toCommonJS(zh_CN_exports);
+var zh_CN_default = {
+  help: "帮助",
+  welcome: "欢迎页",
+  viewDocs: "查看用户手册",
+  downloadDocs: "下载用户手册",
+  about: "关于",
+  version: "版本号",
+  releaseTime: "发布日期",
+  company: "蚂蚁集团",
+  right: "版权所有"
+};

package/lib/BasicLayout/locale/zh-TW.js

@@ -0,0 +1,35 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/BasicLayout/locale/zh-TW.ts
+var zh_TW_exports = {};
+__export(zh_TW_exports, {
+  default: () => zh_TW_default
+});
+module.exports = __toCommonJS(zh_TW_exports);
+var zh_TW_default = {
+  help: "幫助",
+  welcome: "歡迎頁",
+  viewDocs: "查看用戶手冊",
+  downloadDocs: "下載用戶手冊",
+  about: "關於",
+  version: "版本號",
+  releaseTime: "發佈日期",
+  company: "螞蟻集團",
+  right: "版權所有"
+};

package/lib/BatchOperationBar/index.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
+import './index.less';
+export interface AlertRenderParams {
+    selectedRows: any[];
+    setSelectedRows: (selectedRows: any[]) => void;
+    cleanSelectedRows: (cleanSelectdRows?: any[]) => void;
+}
+export declare type RenderFun = ((props: AlertRenderParams) => ReactNode) | false;
+export declare type Vertical = 'top' | 'bottom';
+export declare type Horizontal = 'left' | 'right';
+export interface Props extends LocaleWrapperProps {
+    width?: number | string;
+    title?: ReactNode;
+    selectedRows?: any[];
+    open?: boolean;
+    alertRender?: ((selectedRows: any[]) => ReactNode | JSX.Element) | false;
+    alertOptionRender?: RenderFun;
+    content?: ReactNode | RenderFun;
+    cancelText?: ReactNode;
+    openText?: ReactNode;
+    openIcon?: ReactNode;
+    hiddenText?: ReactNode;
+    hiddenIcon?: ReactNode;
+    showCancelBtn?: boolean;
+    showOpenBtn?: boolean;
+    className?: string;
+    position?: [Vertical, Horizontal];
+    barStyle?: React.CSSProperties;
+}
+declare const _default: any;
+export default _default;

package/lib/BatchOperationBar/index.js

@@ -0,0 +1,165 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/BatchOperationBar/index.tsx
+var BatchOperationBar_exports = {};
+__export(BatchOperationBar_exports, {
+  default: () => BatchOperationBar_default
+});
+module.exports = __toCommonJS(BatchOperationBar_exports);
+var import_icons = require("@ant-design/icons");
+var import_design = require("@oceanbase/design");
+var import_classnames = __toESM(require("classnames"));
+var import_lodash = require("lodash");
+var import_react = __toESM(require("react"));
+var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
+var import_index = require("./index.less");
+var import_zh_CN = __toESM(require("./locale/zh-CN"));
+var prefix = "ob-batch-operation-bar";
+var BatchOperationBar = (props) => {
+  var _a, _b;
+  const locale = props == null ? void 0 : props.locale;
+  const {
+    title,
+    open = false,
+    width,
+    alertOptionRender,
+    selectedRows = [],
+    content,
+    alertRender,
+    className = "",
+    cancelText = locale == null ? void 0 : locale.cancelText,
+    openText = locale == null ? void 0 : locale.openText,
+    openIcon = /* @__PURE__ */ import_react.default.createElement(import_icons.DownOutlined, null),
+    hiddenText = locale == null ? void 0 : locale.hiddenText,
+    hiddenIcon = /* @__PURE__ */ import_react.default.createElement(import_icons.UpOutlined, null),
+    showCancelBtn = true,
+    showOpenBtn = true,
+    position = ["bottom", "right"],
+    barStyle = {}
+  } = props;
+  const [selectedData, setSelectedData] = (0, import_react.useState)(selectedRows);
+  const [isOpen, setIsOpen] = (0, import_react.useState)(!!open);
+  const style = (0, import_react.useMemo)(() => {
+    const obj = {};
+    if (width || width === 0)
+      obj.width = width;
+    if (!(0, import_lodash.isEmpty)(position)) {
+      if (!Array.isArray(position))
+        throw new Error("The type passed in by position should be [Vertical, Horizontal]");
+      obj[position == null ? void 0 : position[0]] = 0;
+      obj[position == null ? void 0 : position[1]] = 0;
+    }
+    return {
+      ...obj,
+      ...barStyle
+    };
+  }, [width, position]);
+  const cleanSelectedRows = (cleanSelectdRows) => {
+    if ((0, import_lodash.isEmpty)(cleanSelectdRows)) {
+      setSelectedData([]);
+      return;
+    }
+    const currentData = (0, import_lodash.cloneDeep)(selectedData);
+    (0, import_lodash.pullAllWith)(currentData, cleanSelectdRows, import_lodash.isEqual);
+    setSelectedData(currentData);
+  };
+  const setSelectedRows = (rows) => {
+    setSelectedData(rows);
+  };
+  const disPlayBtnRender = () => {
+    if (!showOpenBtn)
+      return null;
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: (0, import_classnames.default)({
+          [`${prefix}-open-btn`]: isOpen,
+          [`${prefix}-close-btn`]: !isOpen,
+          [`${prefix}-display-btn`]: true
+        }),
+        onClick: () => setIsOpen(!isOpen)
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        "span",
+        {
+          className: (0, import_classnames.default)({
+            [`${prefix}-display-text`]: true
+          })
+        },
+        isOpen ? hiddenText : openText
+      ),
+      isOpen ? hiddenIcon : openIcon
+    );
+  };
+  (0, import_react.useEffect)(() => {
+    if ((0, import_lodash.isEmpty)(selectedRows) || !selectedRows)
+      setSelectedData([]);
+    else
+      setSelectedData(selectedRows);
+  }, [selectedRows]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)({
+        [className]: !!className,
+        [prefix]: true
+      }),
+      style
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-header` }, /* @__PURE__ */ import_react.default.createElement(import_design.Space, null, !!alertRender ? alertRender == null ? void 0 : alertRender(selectedData) : /* @__PURE__ */ import_react.default.createElement(import_design.Space, null, title && /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-title` }, title), /* @__PURE__ */ import_react.default.createElement("span", null, (_b = (_a = locale == null ? void 0 : locale.alertText) == null ? void 0 : _a.replace) == null ? void 0 : _b.call(_a, /\$\{\}/, (selectedData == null ? void 0 : selectedData.length) || 0))), !!showCancelBtn && /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        className: (0, import_classnames.default)({
+          [`${prefix}-cancel`]: true
+        }),
+        onClick: () => cleanSelectedRows()
+      },
+      cancelText
+    ), disPlayBtnRender()), !!alertOptionRender && /* @__PURE__ */ import_react.default.createElement("div", null, alertOptionRender == null ? void 0 : alertOptionRender({
+      selectedRows: selectedData,
+      setSelectedRows,
+      cleanSelectedRows
+    }))),
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: (0, import_classnames.default)({
+          [`${prefix}-content`]: true,
+          [`${prefix}-content-active`]: !!isOpen,
+          [`${prefix}-content-hidden`]: !isOpen
+        })
+      },
+      typeof content === "function" ? content == null ? void 0 : content({ selectedRows: selectedData, setSelectedRows, cleanSelectedRows }) : content
+    )
+  );
+};
+var BatchOperationBar_default = (0, import_LocaleWrapper.default)({
+  componentName: "BatchOperationBar",
+  defaultLocale: import_zh_CN.default
+})(BatchOperationBar);