acud/lib/tree/tree.js

acg react 组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"));
var _OutlinedDrag = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedDrag"));
var _OutlinedEdit = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedEdit"));
var _OutlinedDelete = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedDelete"));
var _OutlinedPlus = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedPlus"));
var _rcTree = _interopRequireWildcard(require("rc-tree"));
var _input = _interopRequireDefault(require("../input"));
var _popover = _interopRequireDefault(require("../popover"));
var _nodeHelper = require("./utils/nodeHelper");
var _iconHelper = require("./utils/iconHelper");
var _dragHelper = require("./utils/dragHelper");
var _configProvider = require("../config-provider");
var _PopoverComponent = _interopRequireDefault(require("./PopoverComponent"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var DataChangeType;
(function (DataChangeType) {
  DataChangeType["SAVE"] = "save";
  DataChangeType["EDITINPUTCHANGE"] = "editInputChange";
  DataChangeType["DELETE"] = "delete";
  DataChangeType["ADD"] = "add";
  DataChangeType["DROP"] = "drop";
})(DataChangeType || (DataChangeType = {}));
var UtilType;
(function (UtilType) {
  UtilType["Add"] = "Add";
  UtilType["Edit"] = "Edit";
  UtilType["Delete"] = "Delete";
})(UtilType || (UtilType = {}));
;
var generateList = function generateList(data) {
  var dataList = [];
  var _helper = function helper(data) {
    for (var i = 0; i < data.length; i++) {
      var node = data[i];
      var key = node.key;
      dataList.push({
        key: key,
        title: key
      });
      if (node.children) {
        _helper(node.children);
      }
    }
  };
  _helper(data);
  return dataList;
};
var handleClickAndDbClick = function handleClickAndDbClick(clickFunc, dbClickFunc, time) {
  var count = 0;
  return function () {
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    count++;
    setTimeout(function () {
      if (count === 1) {
        clickFunc.apply(void 0, args);
      } else if (count === 2) {
        dbClickFunc.apply(void 0, args);
      }
      ;
      count = 0;
    }, time);
  };
};
var isSearchTitle = function isSearchTitle(title) {
  return typeof title === 'string' || typeof title === 'number';
};
var isUtilType = function isUtilType(val) {
  return typeof val === 'string' && val in UtilType;
};
var DEFAULT_POPOVER_UTIL = [{
  text: '新建节点',
  onClick: UtilType.Add
}, {
  text: '编辑节点',
  onClick: UtilType.Edit
}, {
  text: '删除节点',
  onClick: UtilType.Delete
}];
var Tree = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
  var _props$selectable = props.selectable,
    selectable = _props$selectable === void 0 ? true : _props$selectable,
    searchable = props.searchable,
    searchPlaceholder = props.searchPlaceholder,
    _props$checkable = props.checkable,
    checkable = _props$checkable === void 0 ? false : _props$checkable,
    editable = props.editable,
    editInputProps = props.editInputProps,
    draggable = props.draggable,
    showIconUtil = props.showIconUtil,
    showPopoverUtil = props.showPopoverUtil,
    _props$customPopoverU = props.customPopoverUtil,
    customPopoverUtil = _props$customPopoverU === void 0 ? DEFAULT_POPOVER_UTIL : _props$customPopoverU,
    customizePrefixCls = props.prefixCls,
    className = props.className,
    showLine = props.showLine,
    _switcherIcon = props.switcherIcon,
    onDataChange = props.onDataChange,
    treeDataOrigin = props.treeData,
    defaultExpandedKeys = props.defaultExpandedKeys,
    expandedKeysInProps = props.expandedKeys,
    titleEllipsis = props.titleEllipsis,
    popoverZIndex = props.popoverZIndex;
  var _useState = (0, _react.useState)(expandedKeysInProps || defaultExpandedKeys || []),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    expandedKeys = _useState2[0],
    setExpandedKeys = _useState2[1];
  var _useState3 = (0, _react.useState)(true),
    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
    autoExpandParent = _useState4[0],
    setAutoExpandParent = _useState4[1];
  var _useState5 = (0, _react.useState)([]),
    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
    treeData = _useState6[0],
    setTreeData = _useState6[1];
  var _useState7 = (0, _react.useState)(),
    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
    searchText = _useState8[0],
    setSearchText = _useState8[1];
  var _useState9 = (0, _react.useState)(false),
    _useState0 = (0, _slicedToArray2["default"])(_useState9, 2),
    searchFound = _useState0[0],
    setSearchFound = _useState0[1];
  var treeRef = /*#__PURE__*/_react["default"].createRef();
  _react["default"].useImperativeHandle(ref, function () {
    return treeRef.current;
  });
  var dataList = (0, _react.useMemo)(function () {
    return generateList(treeData);
  }, [treeData]);
  var draggableConfig = (0, _react.useMemo)(function () {
    if (!draggable) {
      return false;
    }
    return {
      icon: /*#__PURE__*/_react["default"].createElement(_OutlinedDrag["default"], null)
    };
  }, [draggable]);
  var onExpand = function onExpand(expandedKeysValue, info) {
    var _a;
    setExpandedKeys(expandedKeysValue);
    setAutoExpandParent(false);
    return (_a = props.onExpand) === null || _a === void 0 ? void 0 : _a.call(props, expandedKeysValue, info);
  };
  var onClick = function onClick(event, node) {
    var _a;
    if (node.children && !selectable) {
      treeRef.current.onNodeExpand(event, node);
    }
    (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event, node);
  };
  var onSearchInputChange = function onSearchInputChange(event) {
    var value = event.target.value;
    var found = false;
    var expandedKeys = dataList.map(function (item) {
      if (isSearchTitle(item.title) && item.title.indexOf(value) > -1) {
        found = true;
        return (0, _nodeHelper.getParentKey)(item.key, treeData);
      }
      return null;
    }).filter(function (item, i, self) {
      return item && self.indexOf(item) === i;
    });
    setExpandedKeys(expandedKeys);
    setSearchText(value);
    setAutoExpandParent(true);
    setSearchFound(found);
  };
  var onEditInputChange = (0, _react.useCallback)(function (e, node) {
    setTreeData(function (treeData) {
      var newTreeData = (0, _nodeHelper.changeNode)(node, {
        title: e.target.value
      }, treeData);
      onDataChange === null || onDataChange === void 0 ? void 0 : onDataChange(newTreeData, node, DataChangeType.EDITINPUTCHANGE);
      return newTreeData;
    });
  }, [onDataChange]);
  var onQuickEdit = function onQuickEdit(_, node) {
    if (editable) {
      setTreeData((0, _nodeHelper.editNode)(node, treeData));
    }
  };
  var onSave = (0, _react.useCallback)(function (node) {
    setTreeData(function (treeData) {
      var newTreeData = (0, _nodeHelper.saveNode)(node, treeData);
      onDataChange === null || onDataChange === void 0 ? void 0 : onDataChange(newTreeData, node, DataChangeType.SAVE);
      return newTreeData;
    });
  }, [onDataChange]);
  var onDelete = (0, _react.useCallback)(function (node) {
    setTreeData(function (treeData) {
      var newTreeData = (0, _nodeHelper.deleteNode)(node, treeData).filter(function (item) {
        return item !== null;
      });
      onDataChange === null || onDataChange === void 0 ? void 0 : onDataChange(newTreeData, node, DataChangeType.DELETE);
      return newTreeData;
    });
  }, [onDataChange]);
  var onAdd = (0, _react.useCallback)(function (node) {
    setTreeData(function (treeData) {
      var newTreeData = (0, _nodeHelper.addNode)(node, treeData);
      onDataChange === null || onDataChange === void 0 ? void 0 : onDataChange(newTreeData, node, DataChangeType.ADD);
      return newTreeData;
    });
    setExpandedKeys(function (expandedKeys) {
      return (0, _toConsumableArray2["default"])(new Set([].concat((0, _toConsumableArray2["default"])(expandedKeys), [node.key])));
    });
  }, [onDataChange]);
  var onDrop = function onDrop(info) {
    var _a, _b;
    var dropKey = info.node.key;
    var dragKey = info.dragNode.key;
    var dropPos = info.node.pos.split('-');
    var dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
    var _loop = function loop(data, key, callback) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].key === key) {
          return callback(data[i], i, data);
        }
        var children = data[i].children;
        if (children) {
          _loop(children, key, callback);
        }
      }
    };
    var data = (0, _toConsumableArray2["default"])(treeData);
    // Find dragObject
    var dragObj = data[0];
    _loop(data, dragKey, function (item, index, arr) {
      arr.splice(index, 1);
      dragObj = item;
    });
    if (dropPosition === 0) {
      // Drop on the content
      _loop(data, dropKey, function (item) {
        item.children = item.children || [];
        item.children.unshift(dragObj);
      });
    } else {
      var ar = data;
      var i = 0;
      _loop(data, dropKey, function (_, index, arr) {
        ar = arr;
        i = index;
      });
      if (dropPosition === -1) {
        ar.splice(i, 0, dragObj);
      } else {
        ar.splice(i + 1, 0, dragObj);
      }
    }
    setTreeData(data);
    (_a = props.onDataChange) === null || _a === void 0 ? void 0 : _a.call(props, data, info.node, DataChangeType.DROP);
    (_b = props.onDrop) === null || _b === void 0 ? void 0 : _b.call(props, info);
  };
  var handleClick = handleClickAndDbClick(onClick, onQuickEdit, 200);
  var _React$useContext = _react["default"].useContext(_configProvider.ConfigContext),
    getPrefixCls = _React$useContext.getPrefixCls;
  var prefixCls = getPrefixCls('tree', customizePrefixCls);
  var formatTreeData = (0, _react.useCallback)(function (data) {
    if (Array.isArray(data)) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        res[i] = formatTreeData(data[i]);
      }
      return res;
    }
    var newItem;
    var renderTitle;
    if (data.isEditable && isSearchTitle(data.title)) {
      renderTitle = /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-edit-input")
      }, /*#__PURE__*/_react["default"].createElement(_input["default"], (0, _extends2["default"])({}, editInputProps, {
        value: data.title,
        onChange: function onChange(e) {
          return onEditInputChange(e, data);
        },
        onBlur: function onBlur() {
          return onSave(data);
        },
        size: 'small',
        autoFocus: true
      })));
    } else {
      var title = data.title;
      if (isSearchTitle(title) && searchText) {
        var index = title.indexOf(searchText);
        var beforeStr = title.substr(0, index);
        var afterStr = title.substr(index + searchText.length);
        title = index > -1 ? /*#__PURE__*/_react["default"].createElement("span", null, beforeStr, /*#__PURE__*/_react["default"].createElement("span", {
          className: "".concat(prefixCls, "-node-highlighttext")
        }, searchText), afterStr) : /*#__PURE__*/_react["default"].createElement("span", null, title);
      }
      var handleAdd = function handleAdd() {
        return onAdd(data);
      };
      var handleEdit = function handleEdit() {
        setTreeData(function (treeData) {
          return (0, _nodeHelper.editNode)(data, treeData);
        });
      };
      var handleDelete = function handleDelete() {
        return onDelete(data);
      };
      var onClickMap = {
        Add: handleAdd,
        Edit: handleEdit,
        Delete: handleDelete
      };
      var customPopoverUtilArray = Array.isArray(customPopoverUtil) ? customPopoverUtil : customPopoverUtil(data);
      var popoverContent = customPopoverUtilArray.map(function (item) {
        var liProps = (0, _extends2["default"])((0, _extends2["default"])({
          key: item.key || item.text
        }, !item.disabled && {
          onClick: isUtilType(item.onClick) ? onClickMap[item.onClick] : function () {
            return item.onClick(data, treeData);
          }
        }), item.disabled && {
          className: "".concat(prefixCls, "-popover-util-li-disabled")
        });
        return /*#__PURE__*/_react["default"].createElement("li", liProps, item.text);
      });
      var titleContent = /*#__PURE__*/_react["default"].createElement("span", {
        className: "".concat(prefixCls, "-title-titleContent")
      }, title);
      renderTitle = /*#__PURE__*/_react["default"].createElement("span", {
        className: "".concat(prefixCls, "-title-titleWithOps")
      }, titleEllipsis ? /*#__PURE__*/_react["default"].createElement(_popover["default"], {
        zIndex: popoverZIndex === undefined ? 1051 : popoverZIndex,
        content: title
      }, titleContent) : titleContent, showIconUtil && editable && /*#__PURE__*/_react["default"].createElement("span", {
        className: "".concat(prefixCls, "-icon-util")
      }, /*#__PURE__*/_react["default"].createElement(_OutlinedPlus["default"], {
        onClick: handleAdd
      }), /*#__PURE__*/_react["default"].createElement(_OutlinedEdit["default"], {
        onClick: handleEdit
      }), /*#__PURE__*/_react["default"].createElement(_OutlinedDelete["default"], {
        onClick: handleDelete
      })), (showPopoverUtil && editable || customPopoverUtil !== DEFAULT_POPOVER_UTIL) && /*#__PURE__*/_react["default"].createElement("span", {
        className: "".concat(prefixCls, "-icon-util")
      }, /*#__PURE__*/_react["default"].createElement(_PopoverComponent["default"], {
        prefixCls: prefixCls,
        popoverZIndex: popoverZIndex,
        popoverContent: popoverContent
      })));
    }
    newItem = (0, _immutabilityHelper["default"])(data, {
      $merge: {
        title: renderTitle
      }
    });
    if (data.children) {
      newItem = (0, _immutabilityHelper["default"])(newItem, {
        $merge: {
          children: formatTreeData(data.children)
        }
      });
    }
    return newItem;
  }, [editable, onDelete, onSave, onAdd, onEditInputChange, showIconUtil, showPopoverUtil, searchText, prefixCls, customPopoverUtil, titleEllipsis, popoverZIndex]);
  var formatedTreeData = (0, _react.useMemo)(function () {
    return formatTreeData(treeData);
  }, [treeData, formatTreeData]);
  var classes = (0, _classnames["default"])(prefixCls, className, titleEllipsis ? "".concat(prefixCls, "-with-title-ellipsis") : '');
  // 兼容不传treeData数据直接传treeNode子组件的场景
  var newProps = (0, _extends2["default"])({}, props);
  if (treeDataOrigin) {
    newProps.treeData = formatedTreeData;
  }
  // expandedKeys和defaultExpandAll冲突需动态赋值
  if (props && props.defaultExpandAll) {
    if (expandedKeys.length) {
      newProps.expandedKeys = expandedKeys;
    }
  } else {
    newProps.expandedKeys = expandedKeys;
  }
  (0, _react.useEffect)(function () {
    if (Array.isArray(treeDataOrigin)) {
      setTreeData(treeDataOrigin);
    }
  }, [treeDataOrigin]);
  (0, _react.useEffect)(function () {
    Array.isArray(expandedKeysInProps) && setExpandedKeys(expandedKeysInProps);
  }, [expandedKeysInProps]);
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, searchable && /*#__PURE__*/_react["default"].createElement(_input["default"], {
    placeholder: searchPlaceholder,
    className: "".concat(prefixCls, "-search-input"),
    onChange: onSearchInputChange
  }), searchText && !searchFound ? "\u672A\u627E\u5230\u4E0E".concat(searchText, "\u76F8\u5173\u7684\u7ED3\u679C") : (!treeDataOrigin || !!formatedTreeData.length) && /*#__PURE__*/_react["default"].createElement(_rcTree["default"], (0, _extends2["default"])({
    ref: treeRef
  }, newProps, {
    className: classes,
    prefixCls: prefixCls,
    onClick: handleClick,
    onExpand: onExpand,
    onDrop: onDrop,
    checkable: checkable ? /*#__PURE__*/_react["default"].createElement("span", {
      className: "".concat(prefixCls, "-checkbox-inner")
    }) : checkable,
    autoExpandParent: autoExpandParent,
    switcherIcon: function switcherIcon(nodeProps) {
      return (0, _iconHelper.renderSwitcherIcon)(prefixCls, _switcherIcon, showLine, nodeProps);
    },
    dropIndicatorRender: _dragHelper.dropIndicatorRender,
    draggable: draggableConfig
  })));
});
Tree.TreeNode = _rcTree.TreeNode;
var _default = exports["default"] = Tree;