@oceanbase/design 0.1.0

package/es/TaskGraph/register.js

@@ -0,0 +1,200 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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); }
+import { findByValue } from '@oceanbase/util';
+import { toLower } from 'lodash';
+import G6 from '@antv/g6';
+import { token } from "../StaticFunction";
+
+/**
+ * 计算字符串的长度
+ * @param {string} str 指定的字符串
+ * @return {number} 字符串长度
+ */
+var calcStrLen = function calcStrLen(str) {
+  var len = 0;
+  // eslint-disable-next-line
+  for (var i = 0; i < str.length; i++) {
+    if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
+      // eslint-disable-next-line
+      len++;
+    } else {
+      len += 2;
+    }
+  }
+  return len;
+};
+
+/**
+ * 计算显示的字符串
+ * @param {string} str 要裁剪的字符串
+ * @param {number} maxWidth 最大宽度
+ * @param {number} fontSize 字体大小
+ * @return {string} 处理后的字符串
+ */
+var fittingString = function fittingString(str, maxWidth, fontSize) {
+  var fontWidth = fontSize * 1.3; // 字号+边距
+  maxWidth *= 2; // 需要根据自己项目调整
+  var width = calcStrLen(str) * fontWidth;
+  var ellipsis = '…';
+  if (width > maxWidth) {
+    var actualLen = Math.floor((maxWidth - 10) / fontWidth);
+    var result = str.substring(0, actualLen) + ellipsis;
+    return result;
+  }
+  return str;
+};
+export default function (statusList, assetsPath) {
+  G6.registerNode('subTaskNode', {
+    drawShape: function drawShape(cfg, group) {
+      var defaultNodeWidth = 200;
+      var nodeWidth = defaultNodeWidth;
+      var offsetX = 0;
+      // 任务名
+      if (cfg.name) {
+        // 使用 ellipsisName 字段用于超长文本截断
+        var ellipsisName = fittingString(cfg.name, 180, 12);
+        var nameShape = group.addShape('text', {
+          attrs: {
+            // 使用裁剪后的 name
+            text: ellipsisName,
+            x: -30,
+            y: -5,
+            fill: token.colorText,
+            fontSize: 14,
+            fontFamily: 'SFProText-Medium'
+          }
+        });
+        var nameBBox = nameShape.getBBox();
+        nodeWidth = nameBBox.width + 100;
+        if (nodeWidth > 280) {
+          // 节点宽度最大为 280
+          nodeWidth = 280;
+        } else if (nodeWidth < 200) {
+          // 节点宽度最小为 200
+          nodeWidth = 200;
+        }
+        offsetX = -(nodeWidth - defaultNodeWidth) / 2;
+        nameShape.translate(offsetX, 0);
+      }
+      var rect = group.addShape('rect', {
+        name: 'rect',
+        attrs: {
+          x: -nodeWidth / 2,
+          y: -34,
+          width: nodeWidth,
+          height: 62,
+          radius: 30,
+          fill: '#fff',
+          lineWidth: 3,
+          shadowColor: '#e1e3e6',
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowOffsetY: 10
+        }
+      });
+
+      // 状态图片
+      group.addShape('image', {
+        name: 'statusImage',
+        attrs: {
+          x: -89 + offsetX,
+          y: -23,
+          width: 42,
+          height: 42,
+          // 任务状态图标的命名需要与状态名保持一致
+          img: "".concat(assetsPath, "/task_").concat(toLower(cfg.status), ".svg")
+        }
+      });
+
+      // 任务状态
+      group.addShape('text', {
+        name: 'statusName',
+        attrs: {
+          text: findByValue(statusList, cfg.status).label,
+          x: -30 + offsetX,
+          y: 15,
+          fill: token.colorTextTertiary,
+          fontSize: 12,
+          fontFamily: 'PingFangSC-Regular'
+        }
+      });
+      var moreGroup = group.addGroup({
+        name: 'moreGroup'
+      });
+
+      // ellipsis 图片
+      moreGroup.addShape('image', {
+        attrs: {
+          // 右边距为 34
+          x: nodeWidth / 2 - 34 - 16,
+          y: 8,
+          width: 16,
+          height: 2.5,
+          cursor: 'pointer',
+          img: "".concat(assetsPath, "/icon_ellipsis.svg")
+        }
+      });
+      moreGroup.addShape('rect', {
+        attrs: {
+          x: nodeWidth / 2 - 34 - 16,
+          y: 0,
+          width: 16,
+          height: 16,
+          cursor: 'pointer',
+          fill: 'transparent'
+        }
+      });
+
+      // rect 在节点名称之后渲染，需要对 rect 进行置底操作
+      rect.toBack();
+      return rect;
+    },
+    update: function update(cfg, node) {
+      var group = node.get('group');
+      var statusImage = group.findAllByName('statusImage') && group.findAllByName('statusImage')[0];
+      var statusName = group.findAllByName('statusName') && group.findAllByName('statusName')[0];
+      // 更新状态图标
+      if (statusImage) {
+        statusImage.attr('img', "".concat(assetsPath, "/task_").concat(toLower(cfg.status), ".svg"));
+      }
+      // 更新状态文本
+      if (statusName) {
+        statusName.attr('text', findByValue(statusList, cfg.status).label);
+      }
+    }
+  }, 'single-node');
+  G6.registerEdge('subTaskEdge', {
+    curvePosition: [9 / 10, 1 / 10],
+    getShapeStyle: function getShapeStyle(cfg) {
+      var targetNodeModel = cfg.targetNode && cfg.targetNode.get('model') || {};
+      var status = targetNodeModel.status;
+      var startPoint = cfg.startPoint,
+        endPoint = cfg.endPoint;
+      var controlPoints = this.getControlPoints(cfg);
+      var points = [startPoint]; // 添加起始点
+      // 添加控制点
+      if (controlPoints) {
+        points = points.concat(controlPoints);
+      }
+      // 添加结束点
+      points.push(endPoint);
+      var path = this.getPath(points, cfg);
+      var statusColor = findByValue(statusList, status).color;
+      var style = _objectSpread(_objectSpread({}, G6.Global.defaultEdge.style), {}, {
+        path: path,
+        // 自定义结束箭头，箭头的边长为 10，夹角为 60 度
+        endArrow: {
+          path: "M".concat(10 * Math.cos(Math.PI / 6), ",").concat(10 * Math.sin(Math.PI / 6), " L0,0 L").concat(10 * Math.cos(Math.PI / 6), ",-").concat(10 * Math.sin(Math.PI / 6)),
+          fill: statusColor
+        },
+        lineWidth: 2,
+        stroke: statusColor
+      }, cfg.style);
+      return style;
+    }
+  }, 'cubic-vertical');
+}

package/es/Tooltip/MouseTooltip.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { TooltipPropsWithTitle as AntTooltipPropsWithTitle } from 'antd/es/tooltip';
+interface MouseTooltipProps extends AntTooltipPropsWithTitle {
+    visible?: boolean;
+    offsetX?: number;
+    offsetY?: number;
+}
+declare const MouseTooltip: React.FC<MouseTooltipProps>;
+export default MouseTooltip;

package/es/Tooltip/MouseTooltip.js

@@ -0,0 +1,98 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["children", "title", "visible", "open", "onOpenChange", "onVisibleChange", "overlayInnerStyle", "mouseEnterDelay", "mouseLeaveDelay"],
+  _excluded2 = ["color"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 _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); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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 React, { useState, useRef } from 'react';
+import ReactStickyMouseTooltip from 'react-sticky-mouse-tooltip';
+import { useMouse, useSize } from 'ahooks';
+import { token } from "../StaticFunction";
+var MouseTooltip = function MouseTooltip(_ref) {
+  var children = _ref.children,
+    title = _ref.title,
+    _ref$visible = _ref.visible,
+    outerVisible = _ref$visible === void 0 ? true : _ref$visible,
+    _ref$open = _ref.open,
+    outerOpen = _ref$open === void 0 ? true : _ref$open,
+    onOpenChange = _ref.onOpenChange,
+    onVisibleChange = _ref.onVisibleChange,
+    overlayInnerStyle = _ref.overlayInnerStyle,
+    _ref$mouseEnterDelay = _ref.mouseEnterDelay,
+    mouseEnterDelay = _ref$mouseEnterDelay === void 0 ? 0.1 : _ref$mouseEnterDelay,
+    _ref$mouseLeaveDelay = _ref.mouseLeaveDelay,
+    mouseLeaveDelay = _ref$mouseLeaveDelay === void 0 ? 0.1 : _ref$mouseLeaveDelay,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var _ref2 = overlayInnerStyle || {},
+    color = _ref2.color,
+    restOverlayInnerStyle = _objectWithoutProperties(_ref2, _excluded2);
+  var handleVisibleChange = function handleVisibleChange(value) {
+    setVisible(value);
+    onOpenChange(value);
+    onVisibleChange(value);
+  };
+
+  // 获取鼠标位置
+  var mouse = useMouse();
+  var ref = useRef(null);
+  var size = useSize(ref);
+  // tooltip 宽高，由于 ref 是设置在内容区上的，因此还需要加上外部的 padding
+  var tooltipWidth = ((size === null || size === void 0 ? void 0 : size.width) || 0) + 16;
+  var tooltipHeight = ((size === null || size === void 0 ? void 0 : size.height) || 0) + 12;
+  // 页面宽高
+  var pageWidth = document.body.clientWidth || 0;
+  var pageHeight = document.body.clientHeight || 0;
+
+  // 是否横向超出浏览器，需要留出 8px 缓冲区，避免到达页面边界时位置调整不生效
+  var isOverWidth = mouse.clientX + tooltipWidth + 8 > pageWidth;
+  // 是否纵向超出浏览器，需要留出 8px 缓冲区，避免到达页面边界时位置调整不生效
+  var isOverHeight = mouse.clientY + tooltipHeight + 8 > pageHeight;
+
+  // tooltip 和鼠标之间的偏移
+  var offset = 8;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    onMouseEnter: function onMouseEnter() {
+      if (outerOpen || outerVisible) {
+        setTimeout(function () {
+          handleVisibleChange(true);
+        }, mouseEnterDelay * 1000);
+      }
+    },
+    onMouseLeave: function onMouseLeave() {
+      setTimeout(function () {
+        handleVisibleChange(false);
+      }, mouseLeaveDelay);
+    }
+  }, children), /*#__PURE__*/React.createElement(ReactStickyMouseTooltip, _extends({
+    visible: visible,
+    style: _objectSpread({
+      // 需要大于 Popover 的 1030 zIndex 值，否则会被遮挡
+      zIndex: 1100,
+      padding: '6px 8px',
+      boxShadow: token.boxShadowSecondary,
+      borderRadius: token.borderRadius,
+      color: color || token.colorTextLightSolid,
+      backgroundColor: token.colorBgSpotlight,
+      left: isOverWidth ? mouse.clientX - tooltipWidth - offset : mouse.clientX + offset,
+      top: isOverHeight ? mouse.clientY - tooltipHeight - offset : mouse.clientY + offset
+    }, restOverlayInnerStyle)
+  }, restProps), /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }, title)));
+};
+export default MouseTooltip;

package/es/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/es/Tooltip/index.js

@@ -0,0 +1,66 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["children", "type", "color", "overlayInnerStyle", "mouseFollow"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 _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 React from 'react';
+import { Tooltip as AntTooltip } from 'antd';
+import { token } from "../StaticFunction";
+import MouseTooltip from "./MouseTooltip";
+export var getTooltipTypeList = function getTooltipTypeList() {
+  return [{
+    type: 'light',
+    color: token.colorText,
+    backgroundColor: '#ffffff'
+  }, {
+    type: 'success',
+    color: token.colorSuccess,
+    backgroundColor: token.colorSuccessBg
+  }, {
+    type: 'info',
+    color: token.colorInfo,
+    backgroundColor: token.colorInfoBg
+  }, {
+    type: 'warning',
+    color: token.colorWarning,
+    backgroundColor: token.colorWarningBg
+  }, {
+    type: 'error',
+    color: token.colorError,
+    backgroundColor: token.colorErrorBg
+  }];
+};
+var Tooltip = function Tooltip(_ref) {
+  var children = _ref.children,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    color = _ref.color,
+    overlayInnerStyle = _ref.overlayInnerStyle,
+    mouseFollow = _ref.mouseFollow,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  var typeList = getTooltipTypeList();
+  var typeItem = typeList.find(function (item) {
+    return item.type === type;
+  });
+  return mouseFollow ? /*#__PURE__*/React.createElement(MouseTooltip, _extends({
+    color: typeItem === null || typeItem === void 0 ? void 0 : typeItem.backgroundColor,
+    overlayInnerStyle: _objectSpread({
+      color: typeItem === null || typeItem === void 0 ? void 0 : typeItem.color
+    }, overlayInnerStyle)
+  }, restProps), children) : /*#__PURE__*/React.createElement(AntTooltip, _extends({
+    color: typeItem === null || typeItem === void 0 ? void 0 : typeItem.backgroundColor,
+    overlayInnerStyle: _objectSpread({
+      color: typeItem === null || typeItem === void 0 ? void 0 : typeItem.color
+    }, overlayInnerStyle)
+  }, restProps), children);
+};
+if (process.env.NODE_ENV !== 'production') {
+  Tooltip.displayName = AntTooltip.displayName;
+}
+Tooltip.__ANT_TOOLTIP = true;
+export default Tooltip;

package/es/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/es/TreeSearch/index.js

@@ -0,0 +1,168 @@
+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); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { forwardRef, useImperativeHandle, useMemo, useRef, useEffect, useState } from 'react';
+import { Input, Tree, Form, Divider, Empty } from 'antd';
+import { SearchOutlined } from '@ant-design/icons';
+import { nodes2treeNodes, deepFilter, findFromTree, treeNode2node, getAllOptions } from "./util";
+
+// 用户传入的树节点数据结构
+
+export default /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$treeData = _ref.treeData,
+    treeData = _ref$treeData === void 0 ? [] : _ref$treeData,
+    width = _ref.width,
+    _ref$checkable = _ref.checkable,
+    checkable = _ref$checkable === void 0 ? true : _ref$checkable,
+    titleRender = _ref.titleRender,
+    onChange = _ref.onChange,
+    _ref$followLeaf = _ref.followLeaf,
+    followLeaf = _ref$followLeaf === void 0 ? true : _ref$followLeaf,
+    height = _ref.height,
+    defaultExpandAll = _ref.defaultExpandAll,
+    loadData = _ref.loadData,
+    _ref$searchStyle = _ref.searchStyle,
+    searchStyle = _ref$searchStyle === void 0 ? {} : _ref$searchStyle;
+  var memoTreeData = useMemo(function () {
+    return nodes2treeNodes(treeData);
+  }, [treeData]);
+  var _useState = useState(memoTreeData),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchData = _useState2[0],
+    setSearchData = _useState2[1];
+  // 内部计算虚拟滚动的高度
+  var treeWrapperDOM = useRef(null);
+  var _useState3 = useState(height),
+    _useState4 = _slicedToArray(_useState3, 2),
+    innerHeight = _useState4[0],
+    setInnerHeight = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    checkedKeys = _useState6[0],
+    setCheckedKeys = _useState6[1];
+  var _useState7 = useState(''),
+    _useState8 = _slicedToArray(_useState7, 2),
+    searchStr = _useState8[0],
+    setSearchStr = _useState8[1];
+  var _Form$useForm = Form.useForm(),
+    _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+    form = _Form$useForm2[0];
+  useEffect(function () {
+    if (height === undefined && treeWrapperDOM !== null && treeWrapperDOM !== void 0 && treeWrapperDOM.current) {
+      var _treeWrapperDOM$curre;
+      var containerheight = treeWrapperDOM === null || treeWrapperDOM === void 0 ? void 0 : (_treeWrapperDOM$curre = treeWrapperDOM.current) === null || _treeWrapperDOM$curre === void 0 ? void 0 : _treeWrapperDOM$curre.clientHeight;
+      setInnerHeight(containerheight);
+    }
+  }, []);
+  useEffect(function () {
+    if (!searchData || searchData.length === 0) {
+      setSearchData(memoTreeData);
+    }
+    onSearch({
+      searchKey: searchStr
+    });
+  }, [memoTreeData]);
+  var reset = function reset() {
+    form.resetFields();
+    setCheckedKeys([]);
+  };
+  var checkAll = function checkAll() {
+    var allOptions = getAllOptions(memoTreeData);
+    setCheckedKeys(allOptions.map(function (node) {
+      return node.key;
+    }));
+    onChange(allOptions);
+  };
+
+  // 反选
+  var invertSelect = function invertSelect() {
+    var allOptions = getAllOptions(memoTreeData);
+    // 收集未选择的项，用于设置反选
+    var notCheckedOptions = allOptions.filter(function (item) {
+      return !checkedKeys.includes(item.key);
+    });
+    setCheckedKeys(notCheckedOptions.map(function (item) {
+      return item.key;
+    }));
+    onChange(allOptions.filter(function (node) {
+      return !checkedKeys.includes(node.key);
+    }));
+  };
+  useImperativeHandle(ref, function () {
+    return {
+      reset: reset,
+      checkAll: checkAll,
+      invertSelect: invertSelect
+    };
+  });
+  var onSearch = function onSearch(_ref2) {
+    var searchKey = _ref2.searchKey;
+    setSearchStr(searchKey);
+    // 过滤掉所有叶子节点不匹配的
+    var next = deepFilter(memoTreeData, function (node) {
+      var titleIsStr = typeof node.title === 'string';
+      return (titleIsStr ? node.title : node.value).includes(searchKey);
+      // (!isLeaf(node) && node.children.length > 0)
+    });
+
+    setSearchData(next);
+  };
+  var onCheck = function onCheck(keys) {
+    var treeNodes = keys.map(function (key) {
+      return findFromTree(key, memoTreeData);
+    });
+    if (followLeaf) {
+      treeNodes = treeNodes.filter(function (node) {
+        return !(node !== null && node !== void 0 && node.children);
+      });
+    }
+    setCheckedKeys(treeNodes.map(function (node) {
+      return node.key;
+    }));
+    onChange(treeNodes.map(treeNode2node));
+  };
+
+  // 整体宽度 - input - divider
+  var treeHeight = innerHeight ? innerHeight - (32 + 12 * 2 + 1) : 0;
+  var defaultSearchStyle = {
+    padding: '0 12px'
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    ref: treeWrapperDOM,
+    style: {
+      width: width,
+      height: height !== null && height !== void 0 ? height : '100%'
+    }
+  }, /*#__PURE__*/React.createElement(Form, {
+    form: form,
+    onValuesChange: onSearch,
+    style: Object.assign(defaultSearchStyle, searchStyle)
+  }, /*#__PURE__*/React.createElement(Form.Item, {
+    noStyle: true,
+    name: "searchKey"
+  }, /*#__PURE__*/React.createElement(Input, {
+    "data-testid": "search",
+    prefix: /*#__PURE__*/React.createElement(SearchOutlined, null)
+  }))), /*#__PURE__*/React.createElement(Divider, {
+    style: {
+      margin: '12px 0'
+    }
+  }), searchData.length !== 0 ? /*#__PURE__*/React.createElement(Tree, {
+    height: treeHeight,
+    showIcon: true,
+    checkable: checkable,
+    blockNode: true,
+    selectable: false,
+    checkedKeys: checkedKeys,
+    onCheck: onCheck,
+    titleRender: titleRender,
+    defaultExpandAll: defaultExpandAll,
+    treeData: form.getFieldValue('searchKey') ? searchData : memoTreeData,
+    loadData: loadData
+  }) : /*#__PURE__*/React.createElement(Empty, {
+    image: Empty.PRESENTED_IMAGE_SIMPLE
+  }));
+});

package/es/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;