@hi-ui/hiui 3.9.0-rc.8 → 4.0.0-beta.1

package/es/tree/Tree.js

@@ -1,610 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _BaseTree = _interopRequireDefault(require("./BaseTree"));
-
-var _input = _interopRequireDefault(require("../input"));
-
-var _button = _interopRequireDefault(require("../button"));
-
-var _modal = _interopRequireDefault(require("../modal"));
-
-var _util = require("./util");
-
-var _lodash = _interopRequireDefault(require("lodash"));
-
-var _uuid = require("uuid");
-
-var _customTreeNode = _interopRequireDefault(require("./customTreeNode"));
-
-var _axios = _interopRequireDefault(require("axios"));
-
-var _context = _interopRequireDefault(require("../context"));
-
-require("./style/index");
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-var PREFIX = 'hi-tree';
-
-var getMatchedNodes = function getMatchedNodes(data, searchValue) {
-  var matchedNodes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-  data.forEach(function (item) {
-    if (searchValue !== '' && item.title.includes(searchValue)) {
-      matchedNodes.push(item);
-    }
-
-    if (item.children) {
-      getMatchedNodes(item.children, searchValue, matchedNodes);
-    }
-  });
-  return matchedNodes;
-};
-
-var getShowData = function getShowData(data, matchedIds, filtedIds) {
-  for (var i = 0; i < data.length; i++) {
-    if (matchedIds.includes(data[i].id)) {} else if (filtedIds.includes(data[i].id)) {
-      getShowData(data[i].children, matchedIds, filtedIds);
-    } else {
-      data.splice(i, 1);
-      i = i - 1;
-    }
-  }
-
-  return data;
-};
-
-var getDefaultIds = function getDefaultIds(data) {
-  var collections = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  data.forEach(function (d) {
-    if (d.children) {
-      collections.push(d.id);
-      getDefaultIds(d.children, collections);
-    }
-  });
-  return collections;
-};
-
-var Tree = function Tree(props) {
-  var searchable = props.searchable,
-      _props$searchConfig = props.searchConfig,
-      searchConfig = _props$searchConfig === void 0 ? {} : _props$searchConfig,
-      data = props.data,
-      expandedIds = props.expandedIds,
-      defaultExpandedIds = props.defaultExpandedIds,
-      _props$defaultExpandA = props.defaultExpandAll,
-      defaultExpandAll = _props$defaultExpandA === void 0 ? false : _props$defaultExpandA,
-      _props$filter = props.filter,
-      filter = _props$filter === void 0 ? false : _props$filter,
-      contextMenu = props.contextMenu,
-      editable = props.editable,
-      onBeforeSave = props.onBeforeSave,
-      onSave = props.onSave,
-      onBeforeDelete = props.onBeforeDelete,
-      onDelete = props.onDelete,
-      onLoadChildren = props.onLoadChildren,
-      onExpand = props.onExpand,
-      onDragStart = props.onDragStart,
-      onDrop = props.onDrop,
-      onDropEnd = props.onDropEnd,
-      theme = props.theme,
-      localeDatas = props.localeDatas;
-  var localMap = localeDatas.tree || {};
-  var _searchConfig$placeho = searchConfig.placeholder,
-      placeholder = _searchConfig$placeho === void 0 ? localMap.searchPlaceholder : _searchConfig$placeho,
-      _searchConfig$emptyCo = searchConfig.emptyContent,
-      emptyContent = _searchConfig$emptyCo === void 0 ? localMap.searchEmptyResult : _searchConfig$emptyCo;
-
-  var _useState = (0, _react.useState)(data),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      cacheData = _useState2[0],
-      updateCacheData = _useState2[1];
-
-  (0, _react.useEffect)(function () {
-    updateCacheData(data);
-  }, [data]);
-  var contextMenuFun = (0, _react.useRef)();
-
-  var _useState3 = (0, _react.useState)(null),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      menuVisible = _useState4[0],
-      setMenuVisible = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(null),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      modalVisible = _useState6[0],
-      setModalVisible = _useState6[1];
-
-  var _useState7 = (0, _react.useState)([]),
-      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      editingNodes = _useState8[0],
-      setEditingNodes = _useState8[1];
-
-  var _useState9 = (0, _react.useState)(''),
-      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-      searchValue = _useState10[0],
-      setSearchValue = _useState10[1];
-
-  var _useState11 = (0, _react.useState)([]),
-      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-      matchedNodes = _useState12[0],
-      setMatchedNodes = _useState12[1];
-
-  var _useState13 = (0, _react.useState)([]),
-      _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
-      filteredIds = _useState14[0],
-      setFilteredIds = _useState14[1];
-
-  var _useState15 = (0, _react.useState)(expandedIds || defaultExpandedIds || defaultExpandAll && getDefaultIds(data) || []),
-      _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
-      expanded = _useState16[0],
-      setExpanded = _useState16[1];
-
-  (0, _react.useEffect)(function () {
-    if (expandedIds) {
-      setExpanded(expandedIds);
-    }
-  }, [expandedIds]);
-  var showData = getShowData(_lodash["default"].cloneDeep(cacheData), matchedNodes.map(function (n) {
-    return n.id;
-  }), filteredIds); // 加载节点
-
-  var loadChildren = (0, _react.useCallback)(function (node) {
-    if (onLoadChildren) {
-      return (0, _axios["default"])(onLoadChildren(node)).then(function (res) {
-        var dataCache = _lodash["default"].cloneDeep(cacheData);
-
-        var loadNode = (0, _util.findNode)(node.id, dataCache);
-        loadNode.children = res.data;
-        updateCacheData(dataCache);
-        return res;
-      }, function (error) {
-        return error;
-      });
-    }
-  }, [onLoadChildren, cacheData]); // 移动节点
-
-  var switchNode = (0, _react.useCallback)(function (targetItemId, sourceItemId, data, allData, dropDividerPosition) {
-    var sourceNode = (0, _util.findNode)(sourceItemId, allData);
-
-    var _data = (0, _toConsumableArray2["default"])(data);
-
-    _data.forEach(function (item, idx) {
-      if (item.id === targetItemId) {
-        var position = dropDividerPosition === 'down' ? idx + 1 : idx;
-        data.splice(position, 0, sourceNode);
-      } else {
-        if (item.children) {
-          if (item.children.some(function (e) {
-            return e.id === targetItemId;
-          })) {
-            var index = item.children.findIndex(function (i) {
-              return i.id === targetItemId;
-            });
-
-            var _position = dropDividerPosition === 'down' ? index + 1 : index;
-
-            item.children.splice(_position, 0, sourceNode);
-          } else {
-            switchNode(targetItemId, sourceItemId, item.children, allData, dropDividerPosition);
-          }
-        }
-      }
-    });
-  }, []);
-  var addDropNode = (0, _react.useCallback)(function (targetItemId, sourceItemId, data, allData) {
-    data.forEach(function (d, index) {
-      if (d.id === targetItemId) {
-        var sourceNode = (0, _util.findNode)(sourceItemId, allData);
-
-        if (!d.children) {
-          d.children = [];
-        }
-
-        d.children.push(sourceNode);
-      } else {
-        if (d.children) {
-          addDropNode(targetItemId, sourceItemId, d.children, allData);
-        }
-      }
-    });
-  }, []); // 删除拖动的节点
-
-  var _delDragNode = (0, _react.useCallback)(function (itemId, data) {
-    data.forEach(function (d, index) {
-      if (d.id === itemId) {
-        data.splice(index, 1);
-      } else {
-        if (d.children) {
-          _delDragNode(itemId, d.children);
-        }
-      }
-    });
-  }, []);
-
-  var moveNode = (0, _react.useCallback)(function (_ref) {
-    var targetId = _ref.targetId,
-        sourceId = _ref.sourceId,
-        direction = _ref.direction,
-        depth = _ref.depth;
-
-    var _dataCache = _lodash["default"].cloneDeep(cacheData);
-
-    _delDragNode(sourceId, _dataCache);
-
-    if (direction === 'in') {
-      addDropNode(targetId, sourceId, _dataCache, cacheData);
-    } else {
-      switchNode(targetId, sourceId, _dataCache, cacheData, direction);
-    }
-
-    if (onDrop) {
-      var sourceNode = (0, _util.findNode)(sourceId, cacheData);
-      var dragNode = (0, _util.findNode)(targetId, cacheData);
-      var result = onDrop(sourceNode, dragNode, {
-        before: cacheData,
-        after: _dataCache
-      }, {
-        before: depth.source,
-        after: direction === 'in' ? depth.target + 1 : depth.target
-      });
-
-      if (result === true) {
-        updateCacheData(_dataCache);
-
-        if (onDropEnd) {
-          onDropEnd(sourceNode, dragNode);
-        }
-      } else if (result && typeof result.then === 'function') {
-        result.then(function (res) {
-          updateCacheData(_dataCache);
-
-          if (onDropEnd) {
-            onDropEnd(sourceNode, dragNode);
-          }
-        });
-      }
-    } else {
-      updateCacheData(_dataCache);
-    }
-  }, [cacheData, _delDragNode, addDropNode, switchNode, onDrop, onDropEnd]); // 编辑节点
-
-  var editNode = function editNode(node) {
-    setEditingNodes(editingNodes.concat(node));
-  }; // 同步编辑值
-
-
-  var onValueChange = (0, _react.useCallback)(function (value, nodeId) {
-    setEditingNodes(editingNodes.filter(function (n) {
-      return n.id !== nodeId;
-    }).concat(Object.assign({}, editingNodes.find(function (n) {
-      return n.id === nodeId;
-    }), {
-      title: value
-    })));
-  }, [editingNodes]); // 取消编辑
-
-  var cancelEdit = (0, _react.useCallback)(function (nodeId) {
-    setEditingNodes(editingNodes.filter(function (n) {
-      return n.id !== nodeId;
-    }));
-  }, [editingNodes]); // 添加兄弟节点
-
-  var _addSibNode = (0, _react.useCallback)(function (node, data, addNode) {
-    data.forEach(function (d, index) {
-      if (d.id === node.id) {
-        data.splice(index + 1, 0, addNode);
-      } else {
-        if (d.children) {
-          _addSibNode(node, d.children, addNode);
-        }
-      }
-    });
-  }, []);
-
-  var addSiblingNode = (0, _react.useCallback)(function (node) {
-    var dataCache = _lodash["default"].cloneDeep(cacheData);
-
-    var addNode = {
-      id: (0, _uuid.v4)(),
-      title: '',
-      TREE_NODE_TYPE: 'add',
-      parent: node.parent,
-      parentId: node.parentId
-    };
-
-    _addSibNode(node, dataCache, addNode);
-
-    setEditingNodes(editingNodes.concat(addNode));
-    updateCacheData(dataCache);
-  }, [cacheData, editingNodes, _addSibNode]); // 添加子节点
-
-  var _addChildNode = (0, _react.useCallback)(function (node, data, addNode) {
-    data.forEach(function (d, index) {
-      if (d.id === node.id) {
-        if (!d.children) {
-          d.children = [];
-        }
-
-        d.children.push(addNode);
-      } else {
-        if (d.children) {
-          _addChildNode(node, d.children, addNode);
-        }
-      }
-    });
-  }, []);
-
-  var addChildNode = (0, _react.useCallback)(function (node) {
-    var dataCache = _lodash["default"].cloneDeep(cacheData);
-
-    var addNode = {
-      id: (0, _uuid.v4)(),
-      title: '',
-      TREE_NODE_TYPE: 'add',
-      parent: node,
-      parentId: node.id
-    };
-
-    _addChildNode(node, dataCache, addNode);
-
-    setEditingNodes(editingNodes.concat(addNode));
-    updateCacheData(dataCache);
-    setExpanded(expanded.concat(node.id));
-  }, [editingNodes, cacheData, _addChildNode, expanded]); // 取消添加节点
-
-  var _cancelAddNode = function _cancelAddNode(node, data) {
-    data.forEach(function (d, index) {
-      if (d.id === node.id) {
-        data.splice(index, 1);
-      } else {
-        if (d.children) {
-          _cancelAddNode(node, d.children);
-        }
-      }
-    });
-  };
-
-  var cancelAddNode = (0, _react.useCallback)(function (node) {
-    var dataCache = _lodash["default"].cloneDeep(cacheData);
-
-    _cancelAddNode(node, dataCache);
-
-    updateCacheData(dataCache);
-  }, [cacheData, _cancelAddNode]); // 保存
-
-  var _saveEdit = function _saveEdit(itemId, data, nodeEdited) {
-    data.forEach(function (d, index) {
-      if (d.id === itemId) {
-        d.title = nodeEdited.title;
-        delete d.TREE_NODE_TYPE;
-      } else {
-        if (d.children) {
-          _saveEdit(itemId, d.children, nodeEdited);
-        }
-      }
-    });
-  };
-
-  var saveEdit = (0, _react.useCallback)(function (enode) {
-    var nodeEdited = _objectSpread({}, editingNodes.find(function (node) {
-      return node.id === enode.id;
-    }));
-
-    var dataCache = _lodash["default"].cloneDeep(cacheData);
-
-    _saveEdit(enode.id, dataCache, nodeEdited);
-
-    if (onBeforeSave) {
-      var result = onBeforeSave(nodeEdited, {
-        before: cacheData,
-        after: dataCache
-      }, enode.depth);
-
-      if (result === true) {
-        updateCacheData(dataCache);
-        onSave(nodeEdited, dataCache);
-      } else {
-        cancelAddNode(enode);
-      }
-    } else {
-      updateCacheData(dataCache);
-      onSave(enode, dataCache);
-    }
-
-    setEditingNodes(editingNodes.filter(function (n) {
-      return n.id !== enode.id;
-    }));
-  }, [editingNodes, cacheData, _saveEdit]); // 删除节点
-
-  var _deleteNode = function _deleteNode(itemId, data) {
-    data.forEach(function (d, index) {
-      if (d.id === itemId) {
-        data.splice(index, 1);
-      } else {
-        if (d.children) {
-          _deleteNode(itemId, d.children);
-        }
-      }
-    });
-  };
-
-  var deleteNode = (0, _react.useCallback)(function (node) {
-    var dataCache = _lodash["default"].cloneDeep(cacheData);
-
-    _deleteNode(node.id, dataCache);
-
-    if (onBeforeDelete) {
-      var result = onBeforeDelete(node, {
-        before: cacheData,
-        after: dataCache
-      }, node.depth);
-
-      if (result === true) {
-        updateCacheData(dataCache);
-        onDelete(node, dataCache);
-      }
-    } else {
-      updateCacheData(dataCache);
-      onDelete(node, dataCache);
-    }
-  }, [cacheData, _deleteNode]);
-  (0, _react.useEffect)(function () {
-    contextMenuFun.current = {
-      editNode: editNode,
-      addChildNode: addChildNode,
-      addSiblingNode: addSiblingNode,
-      deleteNode: deleteNode
-    };
-  }, [editNode, addChildNode, addSiblingNode, deleteNode]);
-  var menuRender = (0, _react.useCallback)(function (node) {
-    var menu = [{
-      title: localMap.edit,
-      type: 'editNode'
-    }, {
-      title: localMap.addChildNode,
-      type: 'addChildNode'
-    }, {
-      title: localMap.addNode,
-      type: 'addSiblingNode'
-    }, {
-      title: localMap.del,
-      type: 'deleteNode'
-    }];
-
-    if (contextMenu) {
-      menu = contextMenu(node);
-    }
-
-    return /*#__PURE__*/_react["default"].createElement("ul", {
-      className: "".concat(PREFIX, "__menu theme__").concat(theme)
-    }, menu.map(function (m, index) {
-      return /*#__PURE__*/_react["default"].createElement("li", {
-        className: "menu-item",
-        key: index,
-        onClick: function onClick(e) {
-          e.stopPropagation();
-
-          if (m.onClick) {
-            m.onClick(node, contextMenuFun.current);
-          } else {
-            if (m.type === 'editNode') {
-              editNode(node);
-            }
-
-            if (m.type === 'addSiblingNode') {
-              addSiblingNode(node);
-            }
-
-            if (m.type === 'addChildNode') {
-              addChildNode(node);
-            }
-
-            if (m.type === 'deleteNode') {
-              setModalVisible(node);
-            }
-          }
-
-          setMenuVisible(null);
-        }
-      }, m.title);
-    }));
-  }, [editNode, addChildNode, addSiblingNode]);
-  var treeNodeRender = (0, _react.useCallback)(function (node, selected, treeNodeRef, onSelectNode) {
-    return /*#__PURE__*/_react["default"].createElement(_customTreeNode["default"], {
-      node: node,
-      selected: selected,
-      onSelectNode: onSelectNode,
-      searchValue: searchValue,
-      editingNodes: editingNodes,
-      menuVisible: menuVisible,
-      searchable: searchable,
-      onValueChange: onValueChange,
-      saveEdit: saveEdit,
-      cancelEdit: cancelEdit,
-      cancelAddNode: cancelAddNode,
-      setMenuVisible: setMenuVisible,
-      editable: editable,
-      menuRender: menuRender,
-      localeDatas: localeDatas
-    });
-  }, [searchValue, editingNodes, menuVisible, searchable, editable]);
-  var handleExpand = (0, _react.useCallback)(function (expandedNode, isExpanded, ids) {
-    setExpanded(ids);
-
-    if (onExpand) {
-      onExpand(expandedNode, isExpanded, ids);
-    }
-  }, [onExpand]);
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, searchable && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(PREFIX, "__searcher theme__").concat(theme)
-  }, /*#__PURE__*/_react["default"].createElement(_input["default"], {
-    value: searchValue,
-    type: "text",
-    placeholder: placeholder,
-    onChange: function onChange(e) {
-      var matchedNodes = getMatchedNodes(cacheData, e.target.value);
-      var filteredNodes = [];
-      matchedNodes.forEach(function (node) {
-        var ancestors = (0, _util.getAncestorIds)(node.id, cacheData, []);
-        filteredNodes = filteredNodes.concat(ancestors);
-      });
-      setSearchValue(e.target.value);
-      setMatchedNodes(matchedNodes);
-      setFilteredIds(_lodash["default"].uniq(filteredNodes));
-      setExpanded(_lodash["default"].uniq(filteredNodes));
-    },
-    append: /*#__PURE__*/_react["default"].createElement(_button["default"], {
-      icon: "search"
-    }),
-    style: {
-      width: '250px',
-      marginBottom: '24px'
-    }
-  }), matchedNodes.length === 0 && searchValue !== '' && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "searcher__result--empty"
-  }, emptyContent)), /*#__PURE__*/_react["default"].createElement(_BaseTree["default"], (0, _extends2["default"])({}, props, {
-    className: "theme__".concat(theme),
-    onLoadChildren: onLoadChildren ? loadChildren : null,
-    treeNodeRender: treeNodeRender,
-    expandedIds: expanded,
-    onExpand: handleExpand,
-    onDrop: moveNode,
-    onDragStart: onDragStart,
-    data: filter && searchable && searchValue !== '' ? showData : cacheData
-  })), editable && /*#__PURE__*/_react["default"].createElement(_modal["default"], {
-    title: localMap.modalTitle,
-    visible: modalVisible !== null,
-    onConfirm: function onConfirm() {
-      deleteNode(modalVisible);
-      setModalVisible(null);
-    },
-    onCancel: function onCancel() {
-      setModalVisible(null);
-    }
-  }, localMap.delTips));
-};
-
-var _default = (0, _context["default"])(Tree);
-
-exports["default"] = _default;