@hi-ui/hiui 2.15.11 → 2.15.12

package/es/tree/tree-legacy/Tree.js

@@ -0,0 +1,330 @@
+"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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _TreeNode = _interopRequireDefault(require("./TreeNode"));
+
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+
+var _util = require("./util");
+
+var _withDragDropContext = _interopRequireDefault(require("../../lib/withDragDropContext"));
+
+require("./style/index");
+
+var Tree =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(Tree, _Component);
+
+  function Tree(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Tree);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(Tree).call(this, props));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onCheckChange", function (checked, item) {
+      var _this$props = _this.props,
+          onChange = _this$props.onChange,
+          checkedKeys = _this$props.checkedKeys,
+          onCheckChange = _this$props.onCheckChange,
+          onCheck = _this$props.onCheck;
+      var checkedArr = checkedKeys;
+      var all = _this.state.all;
+      var semiChecked = all.filter(function (item) {
+        return item.semi;
+      }).map(function (item) {
+        return item.id;
+      });
+      var disabledKeys = all.filter(function (item) {
+        return item.disabled;
+      }).map(function (item) {
+        return item.id;
+      });
+      var myself = all.find(function (a) {
+        return a.id === item.id;
+      });
+      var children = myself.child;
+      var parent = myself.parent;
+
+      if (semiChecked.includes(item.id)) {
+        children.forEach(function (child) {
+          checkedArr = checkedArr.filter(function (c) {
+            return c !== child;
+          });
+        });
+        checkedArr = checkedArr.filter(function (c) {
+          return c !== item.id;
+        });
+      } else {
+        if (checked) {
+          checkedArr = checkedArr.filter(function (c) {
+            return c !== item.id;
+          });
+          children.forEach(function (child) {
+            checkedArr = checkedArr.filter(function (c) {
+              return c !== child;
+            });
+          });
+          parent.forEach(function (p) {
+            checkedArr = checkedArr.filter(function (c) {
+              return c !== p;
+            });
+          });
+        } else {
+          checkedArr = checkedArr.concat(children);
+          checkedArr.push(item.id);
+          parent.forEach(function (p) {
+            var par = all.find(function (a) {
+              return a.id === p;
+            }).child;
+            var bool = true;
+            par.forEach(function (p) {
+              if (!checkedArr.includes(p)) {
+                bool = false;
+              }
+            });
+            bool && checkedArr.push(p);
+          });
+        }
+      }
+
+      disabledKeys.forEach(function (d) {
+        if (d.checked) {
+          if (!checkedArr.includes(d.id)) {
+            checkedArr.push(d.id);
+          }
+        } else {
+          checkedArr = checkedArr.filter(function (c) {
+            return c !== d.id;
+          });
+        }
+      });
+      parent.forEach(function (p) {
+        var child = all.find(function (item) {
+          return item.id === p;
+        }).child;
+        var semi = false;
+        var num = 0;
+        checkedArr.forEach(function (c) {
+          if (child.includes(c)) {
+            num = num + 1;
+          }
+        });
+        semi = num !== 0 && num !== child.length;
+
+        if (semi) {
+          if (!semiChecked.includes(p)) {
+            semiChecked.push(p);
+          }
+        } else {
+          semiChecked = semiChecked.filter(function (s) {
+            return s !== p;
+          });
+        }
+      });
+      onChange && onChange(checkedArr, item.title, !checked, semiChecked);
+      onCheckChange && onCheckChange(checkedArr, item.title, !checked, semiChecked);
+      onCheck && onCheck(checkedArr, item, !checked, semiChecked);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onExpanded", function (expanded, item) {
+      var expandedArr = (0, _toConsumableArray2["default"])(_this.state.hasExpanded);
+
+      if (expandedArr.includes(item.id)) {
+        expandedArr.splice(expandedArr.indexOf(item.id), 1);
+      } else {
+        expandedArr.push(item.id);
+      }
+
+      _this.setState({
+        hasExpanded: expandedArr
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "expandTreeNode", function (id) {
+      var _hasExpanded = (0, _toConsumableArray2["default"])(_this.state.hasExpanded);
+
+      if (!_hasExpanded.includes(id)) {
+        _hasExpanded.push(id);
+
+        _this.setState({
+          hasExpanded: _hasExpanded
+        });
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setExpandTreeNodes", function (ids) {
+      _this.setState({
+        hasExpanded: ids
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "closeExpandedTreeNode", function (id) {
+      _this.setState({
+        hasExpanded: _this.state.hasExpanded.filter(function (expandId) {
+          return expandId !== id;
+        })
+      });
+    });
+    _this.state = {
+      hasExpanded: [],
+      dataMap: {},
+      data: [],
+      semiChecked: [],
+      disabledKeys: [],
+      all: [],
+      checkedIds: [],
+      semiCheckedIds: []
+    };
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Tree, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          prefixCls = _this$props2.prefixCls,
+          checkable = _this$props2.checkable,
+          closeIcon = _this$props2.closeIcon,
+          openIcon = _this$props2.openIcon,
+          highlightable = _this$props2.highlightable,
+          editable = _this$props2.editable,
+          searchable = _this$props2.searchable,
+          draggable = _this$props2.draggable,
+          style = _this$props2.style,
+          origin = _this$props2.origin,
+          onDragStart = _this$props2.onDragStart,
+          onDrop = _this$props2.onDrop,
+          onDelete = _this$props2.onDelete,
+          onSave = _this$props2.onSave;
+      var data = this.state.data;
+      return _react["default"].createElement("div", {
+        className: (0, _classnames["default"])("".concat(prefixCls)),
+        style: style
+      }, _react["default"].createElement(_TreeNode["default"], {
+        origin: origin,
+        checked: this.props.checkedKeys || [],
+        onNodeClick: this.props.onNodeClick,
+        onClick: this.props.onClick,
+        semiChecked: this.state.all.filter(function (item) {
+          return item.semi;
+        }).map(function (item) {
+          return item.id;
+        }),
+        expanded: this.state.hasExpanded,
+        closeExpandedTreeNode: this.closeExpandedTreeNode,
+        expandTreeNode: this.expandTreeNode,
+        setExpandTreeNodes: this.setExpandTreeNodes,
+        onCheckChange: this.onCheckChange,
+        hightLightNodes: this.props.hightLightNodes,
+        onHightLightChange: this.props.onHightLightChange,
+        onExpanded: this.onExpanded,
+        data: data,
+        prefixCls: prefixCls,
+        checkable: checkable,
+        highlightable: highlightable,
+        editable: editable,
+        searchable: searchable,
+        openIcon: openIcon,
+        closeIcon: closeIcon,
+        draggable: draggable,
+        onDragStart: onDragStart,
+        onDrop: onDrop,
+        onDelete: onDelete,
+        onSave: onSave
+      }));
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      var data = {};
+
+      if (!(0, _isEqual["default"])(props.data, state.data)) {
+        var dataMap = {};
+        (0, _util.dealData)(props.data, dataMap);
+        data.dataMap = dataMap;
+        data.data = props.data;
+
+        if (state.data.length === 0) {
+          var defaultExpandedArr = [];
+
+          for (var key in dataMap) {
+            var item = dataMap[key];
+            var itemHasChildren = item.children && item.children.length > 0;
+            var itemShouldExpand = props.defaultExpandAll && item.expanded !== false || item.expanded === true;
+
+            if (itemHasChildren && itemShouldExpand) {
+              defaultExpandedArr.push(item.id);
+            }
+          }
+
+          data.hasExpanded = defaultExpandedArr;
+        }
+      }
+
+      if (props.data && props.checkedKeys) {
+        data.all = (0, _util.getAll)(props.data, props.checkedKeys);
+      }
+
+      return data;
+    }
+  }]);
+  return Tree;
+}(_react.Component);
+
+(0, _defineProperty2["default"])(Tree, "defaultProps", {
+  prefixCls: 'hi-tree--legacy',
+  defaultCheckedKeys: [],
+  data: []
+});
+
+var HOCTree = function HOCTree(TreeComponent) {
+  return (
+    /*#__PURE__*/
+    function (_Component2) {
+      (0, _inherits2["default"])(WrapperTree, _Component2);
+
+      function WrapperTree() {
+        (0, _classCallCheck2["default"])(this, WrapperTree);
+        return (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(WrapperTree).apply(this, arguments));
+      }
+
+      (0, _createClass2["default"])(WrapperTree, [{
+        key: "render",
+        value: function render() {
+          var draggable = this.props.draggable;
+          var DraggableTree = (0, _withDragDropContext["default"])(Tree);
+          return draggable ? _react["default"].createElement(DraggableTree, this.props) : _react["default"].createElement(TreeComponent, this.props);
+        }
+      }]);
+      return WrapperTree;
+    }(_react.Component)
+  );
+};
+
+var _default = HOCTree(Tree);
+
+exports["default"] = _default;

package/es/tree/tree-legacy/TreeDivider.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var TreeDivider = function TreeDivider(props) {
+  return _react["default"].createElement("div", {
+    className: (0, _classnames["default"])('hi-tree__divider', "hi-tree__divider--".concat(props.top ? 'top' : 'bottom'))
+  }, _react["default"].createElement("div", {
+    className: "divider-circle"
+  }), _react["default"].createElement("div", {
+    className: "divider-line"
+  }));
+};
+
+var _default = TreeDivider;
+exports["default"] = _default;

package/es/tree/tree-legacy/TreeItem.js

@@ -0,0 +1,326 @@
+"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 _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _index = _interopRequireDefault(require("../../table/checkbox/index"));
+
+var _reactDnd = require("react-dnd");
+
+var _input = _interopRequireDefault(require("../../input"));
+
+var _reactDom = require("react-dom");
+
+var _TreeDivider = _interopRequireDefault(require("./TreeDivider"));
+
+var Types = {
+  TreeNode: 'treeNode'
+};
+
+var TreeItem =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(TreeItem, _Component);
+
+  function TreeItem() {
+    (0, _classCallCheck2["default"])(this, TreeItem);
+    return (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(TreeItem).apply(this, arguments));
+  }
+
+  (0, _createClass2["default"])(TreeItem, [{
+    key: "render",
+    value: function render() {
+      var _this = this;
+
+      var _this$props = this.props,
+          editable = _this$props.editable,
+          draggable = _this$props.draggable,
+          dropDividerPosition = _this$props.dropDividerPosition,
+          checked = _this$props.checked,
+          expanded = _this$props.expanded,
+          highlight = _this$props.highlight,
+          editNodes = _this$props.editNodes,
+          editingNodes = _this$props.editingNodes,
+          prefixCls = _this$props.prefixCls,
+          semiChecked = _this$props.semiChecked,
+          onNodeClick = _this$props.onNodeClick,
+          _onClick = _this$props.onClick,
+          highlightable = _this$props.highlightable,
+          item = _this$props.item,
+          draggingNode = _this$props.draggingNode,
+          checkable = _this$props.checkable,
+          itemStyle = _this$props.itemStyle,
+          onExpanded = _this$props.onExpanded,
+          onValueChange = _this$props.onValueChange,
+          cancelEditNode = _this$props.cancelEditNode,
+          cancelAddSiblingNode = _this$props.cancelAddSiblingNode,
+          renderTree = _this$props.renderTree,
+          renderRightClickMenu = _this$props.renderRightClickMenu,
+          onCheckChange = _this$props.onCheckChange,
+          onSetHighlight = _this$props.onSetHighlight,
+          showRightClickMenu = _this$props.showRightClickMenu,
+          closeRightClickMenu = _this$props.closeRightClickMenu,
+          renderSwitcher = _this$props.renderSwitcher,
+          connectDragSource = _this$props.connectDragSource,
+          connectDropTarget = _this$props.connectDropTarget,
+          isOver = _this$props.isOver,
+          targetNode = _this$props.targetNode,
+          saveEditNode = _this$props.saveEditNode,
+          origin = _this$props.origin,
+          loadChildren = _this$props.loadChildren;
+
+      var treeItem = _react["default"].createElement("li", {
+        key: item.id
+      }, _react["default"].createElement("div", {
+        className: "item--wrapper"
+      }, targetNode === item.id && dropDividerPosition === 'down' && isOver && _react["default"].createElement(_TreeDivider["default"], {
+        top: true
+      }), _react["default"].createElement("span", {
+        onClick: function onClick() {
+          onExpanded(expanded, item);
+
+          if (origin) {
+            loadChildren(item.id);
+          }
+        },
+        className: "".concat(prefixCls, "_item-icon")
+      }, (item.children && item.children.length > 0 || origin && !expanded) && renderSwitcher(expanded)), checkable ? _react["default"].createElement(_index["default"], {
+        semi: semiChecked.includes(item.id),
+        checked: checked,
+        onChange: function onChange() {
+          return onCheckChange(checked, item);
+        },
+        onTitleClick: function onTitleClick(e) {
+          onNodeClick && onNodeClick(item);
+          _onClick && _onClick(item);
+          highlightable && onSetHighlight(item);
+          e.stopPropagation();
+        },
+        highlight: highlight === item.id,
+        text: item.title,
+        disabled: item.disabled
+      }) : item.status === 'editable' || editNodes.map(function (node) {
+        return node.id;
+      }).includes(item.id) ? _react["default"].createElement("div", {
+        className: "editing"
+      }, _react["default"].createElement(_input["default"], {
+        placeholder: "\u8BF7\u8F93\u5165\u83DC\u5355\u540D\u79F0",
+        value: (editingNodes.find(function (node) {
+          return node.id === item.id;
+        }) || {}).title,
+        onChange: function onChange(e) {
+          onValueChange(e.target.value, item.id);
+        }
+      }), _react["default"].createElement("span", {
+        style: {
+          cursor: 'pointer',
+          marginRight: 12,
+          color: '#4284F5'
+        },
+        onClick: function onClick() {
+          saveEditNode(item.id);
+        }
+      }, "\u786E\u5B9A"), _react["default"].createElement("span", {
+        style: {
+          cursor: 'pointer'
+        },
+        onClick: function onClick() {
+          if (editNodes.map(function (node) {
+            return node.id;
+          }).includes(item.id)) {
+            cancelEditNode(item.id);
+          } else {
+            cancelAddSiblingNode(item.id);
+          }
+        }
+      }, "\u53D6\u6D88")) : draggable ? connectDragSource(_react["default"].createElement("span", {
+        style: item.style,
+        className: "".concat(prefixCls, "_item-text ").concat(itemStyle, " ").concat(highlight === item.id ? 'highlight' : '', " ").concat(draggingNode === item.id ? 'dragging' : ''),
+        onContextMenu: function onContextMenu(e) {
+          if (editable) {
+            e.preventDefault();
+            showRightClickMenu(item);
+          }
+        },
+        onClick: function onClick(e) {
+          closeRightClickMenu();
+          onNodeClick && onNodeClick(item);
+          _onClick && _onClick(item);
+          highlightable && onSetHighlight(item);
+          e.stopPropagation();
+        }
+      }, item.title, renderRightClickMenu(item), targetNode === item.id && dropDividerPosition === 'sub' && isOver && _react["default"].createElement(_TreeDivider["default"], null))) : _react["default"].createElement("span", {
+        style: item.style,
+        className: "".concat(prefixCls, "_item-text ").concat(itemStyle, " ").concat(highlight === item.id ? 'highlight' : '', " ").concat(draggingNode === item.id ? 'dragging' : ''),
+        onContextMenu: function onContextMenu(e) {
+          if (_this.props.editable) {
+            e.preventDefault();
+            showRightClickMenu(item);
+          }
+        },
+        onClick: function onClick(e) {
+          closeRightClickMenu();
+          onNodeClick && onNodeClick(item);
+          _onClick && _onClick(item);
+          highlightable && onSetHighlight(item);
+          e.stopPropagation();
+        }
+      }, item.title, renderRightClickMenu(item))), item.children && item.children.length > 0 && expanded ? renderTree(item.children) : null);
+
+      return draggable ? connectDropTarget(treeItem) : treeItem;
+    }
+  }]);
+  return TreeItem;
+}(_react.Component);
+
+var source = {
+  beginDrag: function beginDrag(props) {
+    // 开始拖拽前，如果已经展开，则需要收起
+    if (props.expanded) {
+      props.closeExpandedTreeNode(props.item.id);
+    }
+
+    props.onDragStart(props.item);
+    return {
+      sourceItem: props.item,
+      originalExpandStatus: props.expanded
+    };
+  },
+  endDrag: function endDrag(props, monitor) {
+    var dropResult = monitor.getDropResult();
+
+    if (!dropResult) {
+      var removeTargetNode = props.removeTargetNode,
+          removeDraggingNode = props.removeDraggingNode;
+      removeDraggingNode();
+      removeTargetNode();
+    }
+  }
+};
+var target = {
+  drop: function drop(props, monitor) {
+    var _monitor$getItem = monitor.getItem(),
+        sourceItem = _monitor$getItem.sourceItem,
+        originalExpandStatus = _monitor$getItem.originalExpandStatus;
+
+    var targetItem = props.item,
+        dropNode = props.dropNode,
+        removeDraggingNode = props.removeDraggingNode,
+        expandTreeNode = props.expandTreeNode,
+        removeTargetNode = props.removeTargetNode,
+        dropDividerPosition = props.dropDividerPosition; // 先看下是不是在最近得组件
+
+    if (monitor.isOver({
+      shallow: true
+    })) {
+      if (sourceItem.id === targetItem.id || targetItem.children && targetItem.children.map(function (t) {
+        return t.id;
+      }).includes(sourceItem.id)) {
+        // 如果源节点就是目的节点或者源节点是目的节点的子节点（直系）再或者源节点是目的节点的父节点，那么什么都不做
+        // 如果什么都不做，原来展开则现在还展开
+        if (originalExpandStatus) {
+          expandTreeNode(sourceItem.id);
+        }
+
+        removeDraggingNode();
+        removeTargetNode();
+      } else {
+        // 移动节点到相应位置
+        dropNode(sourceItem, targetItem, dropDividerPosition);
+        removeDraggingNode();
+        removeTargetNode();
+      }
+    }
+  },
+  hover: function hover(props, monitor, component) {
+    var _monitor$getItem2 = monitor.getItem(),
+        sourceItem = _monitor$getItem2.sourceItem;
+
+    var targetItem = props.item,
+        setDraggingNode = props.setDraggingNode,
+        setTargetNode = props.setTargetNode,
+        positionX = props.positionX,
+        positionY = props.positionY,
+        setPosition = props.setPosition; // 先看下是不是在最近得组件
+
+    if (monitor.isOver({
+      shallow: true
+    })) {
+      var sourcePosition = monitor.getClientOffset();
+      var targetComponent = (0, _reactDom.findDOMNode)(component).getBoundingClientRect();
+
+      if (!(sourcePosition.x === positionX && sourcePosition.y === positionY)) {
+        setPosition(sourcePosition.x, sourcePosition.y); // 如果在节点的上半部分，则为移动其内部，如果为下半部分，则为节点下方
+
+        if (sourcePosition.y <= targetComponent.y + targetComponent.height / 2) {
+          setTargetNode(targetItem.id, 'sub');
+        } else {
+          setTargetNode(targetItem.id, 'down');
+        }
+
+        setDraggingNode(sourceItem.id);
+      }
+    }
+  }
+};
+
+function sourceCollect(connect, monitor) {
+  return {
+    connectDragSource: connect.dragSource(),
+    isDragging: monitor.isDragging()
+  };
+}
+
+function targetCollect(connect, monitor) {
+  return {
+    connectDropTarget: connect.dropTarget(),
+    isOver: monitor.isOver()
+  };
+}
+
+var DraggableTreeItem = (0, _reactDnd.DropTarget)(Types['TreeNode'], target, targetCollect)((0, _reactDnd.DragSource)(Types['TreeNode'], source, sourceCollect)(TreeItem));
+
+var HOCTreeItem = function HOCTreeItem(TreeItemComponent) {
+  return (
+    /*#__PURE__*/
+    function (_Component2) {
+      (0, _inherits2["default"])(WrapperTreeItem, _Component2);
+
+      function WrapperTreeItem() {
+        (0, _classCallCheck2["default"])(this, WrapperTreeItem);
+        return (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(WrapperTreeItem).apply(this, arguments));
+      }
+
+      (0, _createClass2["default"])(WrapperTreeItem, [{
+        key: "render",
+        value: function render() {
+          var draggable = this.props.draggable;
+          return draggable ? _react["default"].createElement(DraggableTreeItem, this.props) : _react["default"].createElement(TreeItemComponent, this.props);
+        }
+      }]);
+      return WrapperTreeItem;
+    }(_react.Component)
+  );
+};
+
+var _default = HOCTreeItem(TreeItem);
+
+exports["default"] = _default;