@oceanbase/design 0.1.0

package/lib/Tooltip/MouseTooltip.js

@@ -0,0 +1,108 @@
+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/Tooltip/MouseTooltip.tsx
+var MouseTooltip_exports = {};
+__export(MouseTooltip_exports, {
+  default: () => MouseTooltip_default
+});
+module.exports = __toCommonJS(MouseTooltip_exports);
+var import_react = __toESM(require("react"));
+var import_react_sticky_mouse_tooltip = __toESM(require("react-sticky-mouse-tooltip"));
+var import_ahooks = require("ahooks");
+var import_StaticFunction = require("../StaticFunction");
+var MouseTooltip = ({
+  children,
+  title,
+  visible: outerVisible = true,
+  open: outerOpen = true,
+  onOpenChange,
+  onVisibleChange,
+  overlayInnerStyle,
+  mouseEnterDelay = 0.1,
+  mouseLeaveDelay = 0.1,
+  ...restProps
+}) => {
+  const [visible, setVisible] = (0, import_react.useState)(false);
+  const { color, ...restOverlayInnerStyle } = overlayInnerStyle || {};
+  const handleVisibleChange = (value) => {
+    setVisible(value);
+    onOpenChange(value);
+    onVisibleChange(value);
+  };
+  const mouse = (0, import_ahooks.useMouse)();
+  const ref = (0, import_react.useRef)(null);
+  const size = (0, import_ahooks.useSize)(ref);
+  const tooltipWidth = ((size == null ? void 0 : size.width) || 0) + 16;
+  const tooltipHeight = ((size == null ? void 0 : size.height) || 0) + 12;
+  const pageWidth = document.body.clientWidth || 0;
+  const pageHeight = document.body.clientHeight || 0;
+  const isOverWidth = mouse.clientX + tooltipWidth + 8 > pageWidth;
+  const isOverHeight = mouse.clientY + tooltipHeight + 8 > pageHeight;
+  const offset = 8;
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    "span",
+    {
+      onMouseEnter: () => {
+        if (outerOpen || outerVisible) {
+          setTimeout(() => {
+            handleVisibleChange(true);
+          }, mouseEnterDelay * 1e3);
+        }
+      },
+      onMouseLeave: () => {
+        setTimeout(() => {
+          handleVisibleChange(false);
+        }, mouseLeaveDelay);
+      }
+    },
+    children
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_react_sticky_mouse_tooltip.default,
+    {
+      visible,
+      style: {
+        // 需要大于 Popover 的 1030 zIndex 值，否则会被遮挡
+        zIndex: 1100,
+        padding: "6px 8px",
+        boxShadow: import_StaticFunction.token.boxShadowSecondary,
+        borderRadius: import_StaticFunction.token.borderRadius,
+        color: color || import_StaticFunction.token.colorTextLightSolid,
+        backgroundColor: import_StaticFunction.token.colorBgSpotlight,
+        left: isOverWidth ? mouse.clientX - tooltipWidth - offset : mouse.clientX + offset,
+        top: isOverHeight ? mouse.clientY - tooltipHeight - offset : mouse.clientY + offset,
+        ...restOverlayInnerStyle
+      },
+      ...restProps
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { ref }, title)
+  ));
+};
+var MouseTooltip_default = MouseTooltip;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/Tooltip/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { TooltipPropsWithTitle as AntTooltipPropsWithTitle } from 'antd/es/tooltip';
+export declare type TooltipType = 'default' | 'light' | 'success' | 'info' | 'warning' | 'error';
+export interface TooltipProps extends AntTooltipPropsWithTitle {
+    type?: TooltipType;
+    mouseFollow?: boolean;
+}
+export declare const getTooltipTypeList: () => {
+    type: string;
+    color: string;
+    backgroundColor: string;
+}[];
+declare type CompoundedComponent = React.FC<TooltipProps> & {
+    /** @internal */
+    __ANT_TOOLTIP: boolean;
+};
+declare const Tooltip: CompoundedComponent;
+export default Tooltip;

package/lib/Tooltip/index.js

@@ -0,0 +1,109 @@
+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/Tooltip/index.tsx
+var Tooltip_exports = {};
+__export(Tooltip_exports, {
+  default: () => Tooltip_default,
+  getTooltipTypeList: () => getTooltipTypeList
+});
+module.exports = __toCommonJS(Tooltip_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_StaticFunction = require("../StaticFunction");
+var import_MouseTooltip = __toESM(require("./MouseTooltip"));
+var getTooltipTypeList = () => [
+  {
+    type: "light",
+    color: import_StaticFunction.token.colorText,
+    backgroundColor: "#ffffff"
+  },
+  {
+    type: "success",
+    color: import_StaticFunction.token.colorSuccess,
+    backgroundColor: import_StaticFunction.token.colorSuccessBg
+  },
+  {
+    type: "info",
+    color: import_StaticFunction.token.colorInfo,
+    backgroundColor: import_StaticFunction.token.colorInfoBg
+  },
+  {
+    type: "warning",
+    color: import_StaticFunction.token.colorWarning,
+    backgroundColor: import_StaticFunction.token.colorWarningBg
+  },
+  {
+    type: "error",
+    color: import_StaticFunction.token.colorError,
+    backgroundColor: import_StaticFunction.token.colorErrorBg
+  }
+];
+var Tooltip = ({
+  children,
+  type = "default",
+  color,
+  overlayInnerStyle,
+  mouseFollow,
+  ...restProps
+}) => {
+  const typeList = getTooltipTypeList();
+  const typeItem = typeList.find((item) => item.type === type);
+  return mouseFollow ? /* @__PURE__ */ import_react.default.createElement(
+    import_MouseTooltip.default,
+    {
+      color: typeItem == null ? void 0 : typeItem.backgroundColor,
+      overlayInnerStyle: {
+        color: typeItem == null ? void 0 : typeItem.color,
+        ...overlayInnerStyle
+      },
+      ...restProps
+    },
+    children
+  ) : /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Tooltip,
+    {
+      color: typeItem == null ? void 0 : typeItem.backgroundColor,
+      overlayInnerStyle: {
+        color: typeItem == null ? void 0 : typeItem.color,
+        ...overlayInnerStyle
+      },
+      ...restProps
+    },
+    children
+  );
+};
+if (process.env.NODE_ENV !== "production") {
+  Tooltip.displayName = import_antd.Tooltip.displayName;
+}
+Tooltip.__ANT_TOOLTIP = true;
+var Tooltip_default = Tooltip;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getTooltipTypeList
+});

package/lib/TreeSearch/index.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import type { DataNode } from 'antd/es/tree';
+export interface Node {
+    originTitle?: string;
+    value?: string;
+    title?: string;
+    icon?: React.ReactNode;
+    children?: Node[];
+}
+export interface TreeNode extends Node {
+    originTitle: string;
+    key: string;
+    children?: TreeNode[];
+}
+export interface TreeSearchRef {
+    reset: () => void;
+    checkAll: () => void;
+    invertSelect: () => void;
+}
+interface IProps {
+    treeData: Node[];
+    titleRender?: (nodeData: DataNode) => React.ReactNode;
+    checkable?: boolean;
+    onChange?: (nodes: Node[]) => void;
+    width?: number | string;
+    height?: number;
+    /**
+     * 是否默认展开所有节点
+     */
+    defaultExpandAll?: boolean;
+    /** onChange 时只关注叶子节点的变化 */
+    followLeaf?: boolean;
+    /** 异步请求节点数据的回调函数 */
+    loadData?: (data: unknown) => Promise<void>;
+    searchStyle?: {};
+}
+declare const _default: React.ForwardRefExoticComponent<IProps & React.RefAttributes<TreeSearchRef>>;
+export default _default;

package/lib/TreeSearch/index.js

@@ -0,0 +1,137 @@
+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/TreeSearch/index.tsx
+var TreeSearch_exports = {};
+__export(TreeSearch_exports, {
+  default: () => TreeSearch_default
+});
+module.exports = __toCommonJS(TreeSearch_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_icons = require("@ant-design/icons");
+var import_util = require("./util");
+var TreeSearch_default = (0, import_react.forwardRef)(
+  ({
+    treeData = [],
+    width,
+    checkable = true,
+    titleRender,
+    onChange,
+    followLeaf = true,
+    height,
+    defaultExpandAll,
+    loadData,
+    searchStyle = {}
+  }, ref) => {
+    const memoTreeData = (0, import_react.useMemo)(() => (0, import_util.nodes2treeNodes)(treeData), [treeData]);
+    const [searchData, setSearchData] = (0, import_react.useState)(memoTreeData);
+    const treeWrapperDOM = (0, import_react.useRef)(null);
+    const [innerHeight, setInnerHeight] = (0, import_react.useState)(height);
+    const [checkedKeys, setCheckedKeys] = (0, import_react.useState)([]);
+    const [searchStr, setSearchStr] = (0, import_react.useState)("");
+    const [form] = import_antd.Form.useForm();
+    (0, import_react.useEffect)(() => {
+      var _a;
+      if (height === void 0 && (treeWrapperDOM == null ? void 0 : treeWrapperDOM.current)) {
+        const containerheight = (_a = treeWrapperDOM == null ? void 0 : treeWrapperDOM.current) == null ? void 0 : _a.clientHeight;
+        setInnerHeight(containerheight);
+      }
+    }, []);
+    (0, import_react.useEffect)(() => {
+      if (!searchData || searchData.length === 0) {
+        setSearchData(memoTreeData);
+      }
+      onSearch({ searchKey: searchStr });
+    }, [memoTreeData]);
+    const reset = () => {
+      form.resetFields();
+      setCheckedKeys([]);
+    };
+    const checkAll = () => {
+      const allOptions = (0, import_util.getAllOptions)(memoTreeData);
+      setCheckedKeys(allOptions.map((node) => node.key));
+      onChange(allOptions);
+    };
+    const invertSelect = () => {
+      const allOptions = (0, import_util.getAllOptions)(memoTreeData);
+      const notCheckedOptions = allOptions.filter((item) => !checkedKeys.includes(item.key));
+      setCheckedKeys(notCheckedOptions.map((item) => item.key));
+      onChange(allOptions.filter((node) => !checkedKeys.includes(node.key)));
+    };
+    (0, import_react.useImperativeHandle)(ref, () => ({
+      reset,
+      checkAll,
+      invertSelect
+    }));
+    const onSearch = ({ searchKey }) => {
+      setSearchStr(searchKey);
+      const next = (0, import_util.deepFilter)(memoTreeData, (node) => {
+        const titleIsStr = typeof node.title === "string";
+        return (titleIsStr ? node.title : node.value).includes(searchKey);
+      });
+      setSearchData(next);
+    };
+    const onCheck = (keys) => {
+      let treeNodes = keys.map((key) => (0, import_util.findFromTree)(key, memoTreeData));
+      if (followLeaf) {
+        treeNodes = treeNodes.filter((node) => !(node == null ? void 0 : node.children));
+      }
+      setCheckedKeys(treeNodes.map((node) => node.key));
+      onChange(treeNodes.map(import_util.treeNode2node));
+    };
+    const treeHeight = innerHeight ? innerHeight - (32 + 12 * 2 + 1) : 0;
+    const defaultSearchStyle = { padding: "0 12px" };
+    return /* @__PURE__ */ import_react.default.createElement("div", { ref: treeWrapperDOM, style: { width, height: height ?? "100%" } }, /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Form,
+      {
+        form,
+        onValuesChange: onSearch,
+        style: Object.assign(defaultSearchStyle, searchStyle)
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { noStyle: true, name: "searchKey" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Input, { "data-testid": "search", prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.SearchOutlined, null) }))
+    ), /* @__PURE__ */ import_react.default.createElement(import_antd.Divider, { style: { margin: "12px 0" } }), searchData.length !== 0 ? /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Tree,
+      {
+        height: treeHeight,
+        showIcon: true,
+        checkable,
+        blockNode: true,
+        selectable: false,
+        checkedKeys,
+        onCheck,
+        titleRender,
+        defaultExpandAll,
+        treeData: form.getFieldValue("searchKey") ? searchData : memoTreeData,
+        loadData
+      }
+    ) : /* @__PURE__ */ import_react.default.createElement(import_antd.Empty, { image: import_antd.Empty.PRESENTED_IMAGE_SIMPLE }));
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/TreeSearch/util.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import type { Node, TreeNode } from '.';
+/** 根据 key 判断节点是否为叶子节点 */
+export declare const isLeaf: (node: TreeNode) => boolean;
+/** 将传入格式的 node 处理为组件内需要的内容 */
+export declare const nodes2treeNodes: (nodes?: Node[], parentKey?: string) => TreeNode[];
+export declare const treeNode2node: (treeNode: TreeNode) => Node;
+export declare const deepFilter: (treeNodes: TreeNode[], cb: (treeNode: TreeNode) => boolean) => {
+    originTitle: string;
+    key: string;
+    children?: TreeNode[];
+    value?: string;
+    title?: string;
+    icon?: import("react").ReactNode;
+}[];
+/** 根据 node key 取得 node 节点 */
+export declare const findFromTree: (key: string, treeNodes: TreeNode[]) => TreeNode;
+/** 获取所有的选项
+ *  如果有子项，则获取子项，否则取本级
+ */
+export declare const getAllOptions: (treeNodes: TreeNode[]) => any;

package/lib/TreeSearch/util.js

@@ -0,0 +1,110 @@
+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/TreeSearch/util.ts
+var util_exports = {};
+__export(util_exports, {
+  deepFilter: () => deepFilter,
+  findFromTree: () => findFromTree,
+  getAllOptions: () => getAllOptions,
+  isLeaf: () => isLeaf,
+  nodes2treeNodes: () => nodes2treeNodes,
+  treeNode2node: () => treeNode2node
+});
+module.exports = __toCommonJS(util_exports);
+var import_lodash = require("lodash");
+var generateKey = (values) => {
+  return `${values.join("$$")}`;
+};
+var splitKey = (value) => {
+  const [...values] = value.split("$$");
+  return { values };
+};
+var isLeaf = (node) => {
+  return !(node == null ? void 0 : node.children);
+};
+var nodes2treeNodes = (nodes, parentKey) => {
+  if (!nodes)
+    return void 0;
+  return nodes.map((node) => {
+    let values = [];
+    if (parentKey) {
+      values = [...splitKey(parentKey).values];
+    }
+    const key = generateKey([...values, node.value ?? node.originTitle ?? node.title]);
+    const next = {
+      ...node,
+      key,
+      // 补齐 originTitle
+      originTitle: node.originTitle ?? node.title,
+      children: nodes2treeNodes(node.children, key)
+    };
+    return next;
+  });
+};
+var treeNode2node = (treeNode) => (0, import_lodash.omit)(treeNode, "key");
+var deepFilter = (treeNodes, cb) => {
+  const filtered = treeNodes.map((treeNode) => {
+    var _a;
+    const next = { ...treeNode };
+    if (cb(treeNode)) {
+      return next;
+    }
+    if ((_a = treeNode.children) == null ? void 0 : _a.length) {
+      next.children = deepFilter(treeNode.children, cb);
+    }
+    return next;
+  });
+  return filtered.filter((treeNode) => {
+    var _a;
+    return ((_a = treeNode == null ? void 0 : treeNode.children) == null ? void 0 : _a.length) || cb(treeNode);
+  });
+};
+var findFromTree = (key, treeNodes) => {
+  var _a;
+  const { values } = splitKey(key);
+  let node;
+  let i = 0;
+  for (; i < values.length; i += 1) {
+    const value = values[i];
+    if (!node) {
+      node = treeNodes.find((e) => e.value === value);
+    } else {
+      node = (_a = node.children) == null ? void 0 : _a.find((e) => e.value === value);
+    }
+  }
+  return node;
+};
+var getAllOptions = (treeNodes) => {
+  const allOptions = treeNodes.map(
+    (node) => {
+      var _a;
+      return ((_a = node == null ? void 0 : node.children) == null ? void 0 : _a.length) > 0 ? getAllOptions(node == null ? void 0 : node.children) : node;
+    }
+  );
+  return allOptions.flat();
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  deepFilter,
+  findFromTree,
+  getAllOptions,
+  isLeaf,
+  nodes2treeNodes,
+  treeNode2node
+});

package/lib/Welcome/index.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import type { ButtonProps } from 'antd/es/button';
+import './index.less';
+export interface IntroduceItem {
+    image: string;
+    title: string;
+    description: string;
+}
+export interface StepItem {
+    title: string;
+    description: string;
+}
+export interface HelpItem {
+    title: string;
+    link: string;
+    isMore?: boolean;
+}
+export interface WelcomeLocale {
+    helpTitle: string;
+    defaultOperation: string;
+}
+export declare type StepType = 'default' | 'card';
+export interface WelcomeProps {
+    title: string;
+    description: string;
+    bgImage: string;
+    introduces: IntroduceItem[];
+    steps: StepItem[];
+    stepType?: StepType;
+    buttonText: string;
+    buttonProps?: ButtonProps;
+    helps: HelpItem[];
+    locale?: WelcomeLocale;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const _default: any;
+export default _default;