@oceanbase/ui 1.0.0-alpha.9 → 1.0.0

package/lib/TreeSearch/index.js

@@ -1,130 +1,136 @@
-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);
+"use strict";
 
-// src/TreeSearch/index.tsx
-var TreeSearch_exports = {};
-__export(TreeSearch_exports, {
-  default: () => TreeSearch_default
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(TreeSearch_exports);
-var import_icons = require("@oceanbase/icons");
-var import_design = require("@oceanbase/design");
-var import_react = require("react");
-var import_util = require("./util");
-var import_jsx_runtime = require("react/jsx-runtime");
-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_design.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));
+exports.default = void 0;
+var _icons = require("@oceanbase/icons");
+var _design = require("@oceanbase/design");
+var _react = _interopRequireWildcard(require("react"));
+var _util = require("./util");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+"use client"; // 用户传入的树节点数据结构
+var _default = exports.default = /*#__PURE__*/(0, _react.forwardRef)(({
+  treeData = [],
+  width,
+  checkable = true,
+  titleRender,
+  onChange,
+  followLeaf = true,
+  height,
+  defaultExpandAll,
+  loadData,
+  searchStyle = {}
+}, ref) => {
+  const memoTreeData = (0, _react.useMemo)(() => (0, _util.nodes2treeNodes)(treeData), [treeData]);
+  const [searchData, setSearchData] = (0, _react.useState)(memoTreeData);
+  // 内部计算虚拟滚动的高度
+  const treeWrapperDOM = (0, _react.useRef)(null);
+  const [innerHeight, setInnerHeight] = (0, _react.useState)(height);
+  const [checkedKeys, setCheckedKeys] = (0, _react.useState)([]);
+  const [searchStr, setSearchStr] = (0, _react.useState)('');
+  const [form] = _design.Form.useForm();
+  (0, _react.useEffect)(() => {
+    if (height === undefined && treeWrapperDOM?.current) {
+      const containerheight = treeWrapperDOM?.current?.clientHeight;
+      setInnerHeight(containerheight);
+    }
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (!searchData || searchData.length === 0) {
+      setSearchData(memoTreeData);
+    }
+    onSearch({
+      searchKey: searchStr
+    });
+  }, [memoTreeData]);
+  const reset = () => {
+    form.resetFields();
+    setCheckedKeys([]);
+  };
+  const checkAll = () => {
+    const allOptions = (0, _util.getAllOptions)(memoTreeData);
+    setCheckedKeys(allOptions.map(node => node.key));
+    onChange(allOptions);
+  };
+
+  // 反选
+  const invertSelect = () => {
+    const allOptions = (0, _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, _react.useImperativeHandle)(ref, () => ({
+    reset,
+    checkAll,
+    invertSelect
+  }));
+  const onSearch = ({
+    searchKey
+  }) => {
+    setSearchStr(searchKey);
+    // 过滤掉所有叶子节点不匹配的
+    const next = (0, _util.deepFilter)(memoTreeData, node => {
+      const titleIsStr = typeof node.title === 'string';
+      return (titleIsStr ? node.title : node.value).includes(searchKey);
+      // (!isLeaf(node) && node.children.length > 0)
+    });
+    setSearchData(next);
+  };
+  const onCheck = keys => {
+    let treeNodes = keys.map(key => (0, _util.findFromTree)(key, memoTreeData));
+    if (followLeaf) {
+      treeNodes = treeNodes.filter(node => !node?.children);
+    }
+    setCheckedKeys(treeNodes.map(node => node.key));
+    onChange(treeNodes.map(_util.treeNode2node));
+  };
+
+  // 整体宽度 - input - divider
+  const treeHeight = innerHeight ? innerHeight - (32 + 12 * 2 + 1) : 0;
+  const defaultSearchStyle = {
+    padding: '0 12px'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ref: treeWrapperDOM,
+    style: {
+      width,
+      height: height ?? '100%'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Form, {
+      form: form,
+      onValuesChange: onSearch,
+      style: Object.assign(defaultSearchStyle, searchStyle),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Form.Item, {
+        noStyle: true,
+        name: "searchKey",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Input, {
+          "data-testid": "search",
+          prefix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SearchOutlined, {})
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Divider, {
+      style: {
+        margin: '12px 0'
       }
-      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__ */ (0, import_jsx_runtime.jsxs)("div", { ref: treeWrapperDOM, style: { width, height: height ?? "100%" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_design.Form,
-        {
-          form,
-          onValuesChange: onSearch,
-          style: Object.assign(defaultSearchStyle, searchStyle),
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Form.Item, { noStyle: true, name: "searchKey", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Input, { "data-testid": "search", prefix: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.SearchOutlined, {}) }) })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Divider, { style: { margin: "12px 0" } }),
-      searchData.length !== 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_design.Tree,
-        {
-          height: treeHeight,
-          showIcon: true,
-          checkable,
-          blockNode: true,
-          selectable: false,
-          checkedKeys,
-          onCheck,
-          titleRender,
-          defaultExpandAll,
-          treeData: form.getFieldValue("searchKey") ? searchData : memoTreeData,
-          loadData
-        }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Empty, { image: import_design.Empty.PRESENTED_IMAGE_SIMPLE })
-    ] });
-  }
-);
+    }), searchData.length !== 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.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__*/(0, _jsxRuntime.jsx)(_design.Empty, {
+      image: _design.Empty.PRESENTED_IMAGE_SIMPLE
+    })]
+  });
+});

package/lib/TreeSearch/util.js

@@ -1,47 +1,31 @@
-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);
+"use strict";
 
-// src/TreeSearch/util.ts
-var util_exports = {};
-__export(util_exports, {
-  deepFilter: () => deepFilter,
-  findFromTree: () => findFromTree,
-  getAllOptions: () => getAllOptions,
-  isLeaf: () => isLeaf,
-  nodes2treeNodes: () => nodes2treeNodes,
-  treeNode2node: () => treeNode2node
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(util_exports);
-var import_lodash = require("lodash");
-var generateKey = (values) => {
-  return `${values.join("$$")}`;
+exports.treeNode2node = exports.nodes2treeNodes = exports.isLeaf = exports.getAllOptions = exports.findFromTree = exports.deepFilter = void 0;
+var _lodash = require("lodash");
+const generateKey = values => {
+  return `${values.join('$$')}`;
 };
-var splitKey = (value) => {
-  const [...values] = value.split("$$");
-  return { values };
+const splitKey = value => {
+  // todo 考虑格式错误的情况
+  const [...values] = value.split('$$');
+  return {
+    values
+  };
 };
-var isLeaf = (node) => {
-  return !(node == null ? void 0 : node.children);
+
+/** 根据 key 判断节点是否为叶子节点 */
+const isLeaf = node => {
+  return !node?.children;
 };
-var nodes2treeNodes = (nodes, parentKey) => {
-  if (!nodes)
-    return void 0;
-  return nodes.map((node) => {
+
+/** 将传入格式的 node 处理为组件内需要的内容 */
+exports.isLeaf = isLeaf;
+const nodes2treeNodes = (nodes, parentKey) => {
+  if (!nodes) return undefined;
+  return nodes.map(node => {
     let values = [];
     if (parentKey) {
       values = [...splitKey(parentKey).values];
@@ -57,54 +41,52 @@ var nodes2treeNodes = (nodes, parentKey) => {
     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 };
+exports.nodes2treeNodes = nodes2treeNodes;
+const treeNode2node = treeNode => (0, _lodash.omit)(treeNode, 'key');
+exports.treeNode2node = treeNode2node;
+const deepFilter = (treeNodes, cb) => {
+  const filtered = treeNodes.map(treeNode => {
+    const next = {
+      ...treeNode
+    };
+    // 若过滤通过，无需再关注子节点，直接全部显示
     if (cb(treeNode)) {
       return next;
     }
-    if ((_a = treeNode.children) == null ? void 0 : _a.length) {
+    // 若过滤不通过，并且有子节点，递归对子节点做过滤操作
+    if (treeNode.children?.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);
-  });
+  return filtered.filter(treeNode => treeNode?.children?.length || cb(treeNode));
 };
-var findFromTree = (key, treeNodes) => {
-  var _a;
-  const { values } = splitKey(key);
+
+/** 根据 node key 取得 node 节点 */
+exports.deepFilter = deepFilter;
+const findFromTree = (key, treeNodes) => {
+  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);
+      node = treeNodes.find(e => e.value === value);
     } else {
-      node = (_a = node.children) == null ? void 0 : _a.find((e) => e.value === value);
+      node = node.children?.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;
-    }
-  );
+
+/** 获取所有的选项
+ *  如果有子项，则获取子项，否则取本级
+ */
+exports.findFromTree = findFromTree;
+const getAllOptions = treeNodes => {
+  const allOptions = treeNodes.map(node => node?.children?.length > 0 ? getAllOptions(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
-});
+exports.getAllOptions = getAllOptions;