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

package/es/tree/TreeNode.js

@@ -1,326 +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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _checkbox = _interopRequireDefault(require("../checkbox"));
-
-var _icon = _interopRequireDefault(require("../icon"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _context = _interopRequireDefault(require("./context"));
-
-var _Switcher = _interopRequireDefault(require("./Switcher"));
-
-var _lodash = _interopRequireDefault(require("lodash"));
-
-var TreeNode = function TreeNode(_ref) {
-  var node = _ref.node,
-      expanded = _ref.expanded,
-      idx = _ref.idx,
-      tabIndex = _ref.tabIndex;
-
-  var _useContext = (0, _react.useContext)(_context["default"]),
-      treeNodeRender = _useContext.treeNodeRender,
-      checkable = _useContext.checkable,
-      checkedNodes = _useContext.checkedNodes,
-      semiCheckedIds = _useContext.semiCheckedIds,
-      onSelectNode = _useContext.onSelectNode,
-      selectedId = _useContext.selectedId,
-      onCheckNode = _useContext.onCheckNode,
-      onExpandNode = _useContext.onExpandNode,
-      draggable = _useContext.draggable,
-      onLoadChildren = _useContext.onLoadChildren,
-      _useContext$apperance = _useContext.apperance,
-      apperance = _useContext$apperance === void 0 ? 'default' : _useContext$apperance,
-      _onDragStart = _useContext.onDragStart,
-      _onDragOver = _useContext.onDragOver,
-      _onDrop = _useContext.onDrop,
-      _onDragEnd = _useContext.onDragEnd,
-      moveFocus = _useContext.moveFocus;
-
-  var _useState = (0, _react.useState)(null),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      direction = _useState2[0],
-      setDirection = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(null),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      dragId = _useState4[0],
-      setDragId = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(false),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      loading = _useState6[0],
-      setLoading = _useState6[1];
-
-  var treeNodeRef = (0, _react.useRef)(null); // 处理 Switch 点击
-
-  var handleSwitcherClick = (0, _react.useCallback)(function (e) {
-    e.stopPropagation();
-
-    if (onLoadChildren && !node.children) {
-      setLoading(true);
-      onLoadChildren(node).then(function (res) {
-        setLoading(false);
-        onExpandNode(node, !expanded);
-      }, function () {
-        setLoading(false);
-      });
-    } else {
-      onExpandNode(node, !expanded);
-    }
-  }, [node, expanded, onLoadChildren, onExpandNode]); // 处理键盘事件
-
-  var handleKeyDown = (0, _react.useCallback)(function (e) {
-    if (!node.disabled) {
-      // Right
-      if (e.keyCode === 39) {
-        e.preventDefault();
-
-        if (expanded === false && node.children && node.children.length) {
-          handleSwitcherClick(e);
-        } else {
-          // move to children
-          var child;
-
-          if (node.children && node.children.length > 0) {
-            child = node.children.filter(function (c) {
-              return !c.disabled;
-            })[0];
-          }
-
-          if (child) {
-            moveFocus({
-              cid: child.id
-            }, 'CHILD');
-          }
-        }
-      } // Left
-
-
-      if (e.keyCode === 37) {
-        e.preventDefault();
-
-        if (expanded === true) {
-          handleSwitcherClick(e);
-        } else {
-          // move to parent
-          moveFocus({
-            pid: node.parentId
-          }, 'PARENT');
-        }
-      } // Up
-
-
-      if (e.keyCode === 38) {
-        e.preventDefault(); // move to previous
-
-        moveFocus({
-          index: idx
-        }, 'UP');
-      } // Down
-
-
-      if (e.keyCode === 40) {
-        e.preventDefault(); // move to next
-
-        moveFocus({
-          index: idx
-        }, 'DOWN');
-      } // Enter
-
-
-      if (e.keyCode === 13) {
-        e.preventDefault(); // select node
-
-        onSelectNode(node);
-      } // Space
-
-
-      if (e.keyCode === 32) {
-        e.preventDefault(); // select checkbox
-
-        onCheckNode(node, !checkedNodes.includes(node.id), checkedNodes);
-      }
-    }
-  }, [expanded, node, onSelectNode, idx, moveFocus, checkable, onCheckNode, checkedNodes]); // 渲染 apperance 占位
-
-  var renderApperancePlaceholder = (0, _react.useCallback)(function (apperance) {
-    if (apperance === 'folder') {
-      return /*#__PURE__*/_react["default"].createElement(_icon["default"], {
-        name: "file",
-        style: {
-          marginRight: 8
-        }
-      });
-    }
-  }, []); // 渲染空白占位
-
-  var renderIndent = (0, _react.useCallback)(function (times, isSiblingLast, ancestors) {
-    var isAncestorSiblingLast = [];
-
-    if (ancestors) {
-      ancestors.forEach(function (a, idx) {
-        if (idx < ancestors.length - 1) {
-          isAncestorSiblingLast.push(a.id === ancestors[idx + 1].children[ancestors[idx + 1].children.length - 1].id);
-        }
-      });
-    }
-
-    var _isAncestorSiblingLast = isAncestorSiblingLast.reverse();
-
-    return _lodash["default"].times(times, function (index) {
-      return /*#__PURE__*/_react["default"].createElement("span", {
-        key: index,
-        style: {
-          alignSelf: 'stretch'
-        },
-        id: index
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: (0, _classnames["default"])('tree-node__indent', {
-          'tree-node__indent--parent-tail': _isAncestorSiblingLast[index] && index !== times - 1,
-          'tree-node__indent--tail': isSiblingLast && times - 1 === index
-        })
-      }));
-    });
-  }, []); // 渲染复选框
-
-  var renderCheckbox = (0, _react.useCallback)(function (node, _ref2) {
-    var checked = _ref2.checked,
-        semiChecked = _ref2.semiChecked;
-    return /*#__PURE__*/_react["default"].createElement(_checkbox["default"], {
-      indeterminate: semiChecked.includes(node.id),
-      checked: checked.includes(node.id),
-      disabled: node.disabled,
-      focusable: false,
-      onChange: function onChange(e) {
-        onCheckNode(node, e.target.checked, checked);
-      }
-    });
-  }, []); // 渲染标题
-
-  var renderTitle = (0, _react.useCallback)(function (node, selectedId) {
-    var _Classnames;
-
-    var id = node.id,
-        title = node.title,
-        depth = node.depth;
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      ref: treeNodeRef,
-      draggable: !node.disabled && draggable,
-      className: (0, _classnames["default"])('tree-node__title', (_Classnames = {}, (0, _defineProperty2["default"])(_Classnames, "tree-node__title--".concat(direction), direction), (0, _defineProperty2["default"])(_Classnames, "tree-node__title--draggable", draggable), (0, _defineProperty2["default"])(_Classnames, "tree-node__title--disabled", node.disabled), _Classnames)),
-      onDragStart: function onDragStart(e) {
-        e.stopPropagation();
-        e.dataTransfer.setData('treeNode', JSON.stringify({
-          id: id,
-          depth: depth
-        }));
-        setDragId(id);
-
-        if (_onDragStart) {
-          _onDragStart(node);
-        }
-      },
-      onDragEnd: function onDragEnd(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        e.dataTransfer.clearData();
-        setDragId(null);
-
-        if (_onDragEnd) {
-          _onDragEnd(e);
-        }
-      },
-      onDragLeave: function onDragLeave(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        setDirection(null);
-      },
-      onDragOver: function onDragOver(e) {
-        e.preventDefault();
-        e.stopPropagation();
-
-        if (dragId !== id) {
-          var targetBoundingRect = treeNodeRef.current.getBoundingClientRect();
-          var hoverTargetSortY = (targetBoundingRect.bottom - targetBoundingRect.top) / 3;
-          var hoverTargetInsideY = hoverTargetSortY * 2; // 鼠标垂直移动距离
-
-          var hoverClientY = e.clientY - targetBoundingRect.top;
-
-          if (hoverClientY < hoverTargetSortY) {
-            setDirection('up');
-          } else if (hoverClientY >= hoverTargetSortY && hoverClientY < hoverTargetInsideY) {
-            setDirection('in');
-          } else {
-            setDirection('down');
-          }
-        }
-
-        if (_onDragOver) {
-          _onDragOver(e);
-        }
-      },
-      onDrop: function onDrop(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        setDirection(null);
-
-        if (_onDrop && dragId !== id) {
-          var passedData = JSON.parse(e.dataTransfer.getData('treeNode'));
-
-          _onDrop({
-            targetId: id,
-            sourceId: passedData.id,
-            depth: {
-              source: passedData.depth,
-              target: depth
-            },
-            direction: direction
-          });
-        }
-      }
-    }, treeNodeRender ? treeNodeRender(node, selectedId === id, treeNodeRef, onSelectNode) : /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames["default"])('title__text', {
-        'title__text--selected': selectedId === id
-      }),
-      onClick: function onClick() {
-        onSelectNode(node);
-      }
-    }, title));
-  }, [treeNodeRef, draggable, treeNodeRender, direction, dragId]);
-  return /*#__PURE__*/_react["default"].createElement("li", {
-    className: (0, _classnames["default"])('tree-node', {
-      'tree-node--line': apperance === 'line'
-    }),
-    tabIndex: tabIndex,
-    onKeyDown: handleKeyDown
-  }, renderIndent(node.children && node.children.length || onLoadChildren && !node.isLeaf && !node.children ? node.depth : apperance !== 'default' ? node.depth : node.depth && node.depth + 1 || 1, node.id === (node.sibling && node.sibling[node.sibling.length - 1].id), node.ancestors), (!node.children || onLoadChildren && node.isLeaf) && renderApperancePlaceholder(apperance), (node.children && node.children.length || onLoadChildren && !node.isLeaf && !node.children) && /*#__PURE__*/_react["default"].createElement(_Switcher["default"], {
-    expanded: expanded,
-    node: node,
-    apperance: apperance,
-    onExpandNode: onExpandNode,
-    onLoadChildren: onLoadChildren,
-    onClick: handleSwitcherClick,
-    loading: loading
-  }), checkable && renderCheckbox(node, {
-    checked: checkedNodes,
-    semiChecked: semiCheckedIds
-  }), renderTitle(node, selectedId));
-};
-
-var _default = TreeNode;
-exports["default"] = _default;

package/es/tree/context.js

@@ -1,15 +0,0 @@
-"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 TreeContext = /*#__PURE__*/_react["default"].createContext();
-
-var _default = TreeContext;
-exports["default"] = _default;

package/es/tree/customTreeNode.js

@@ -1,140 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _input = _interopRequireDefault(require("../input"));
-
-var _popper = _interopRequireDefault(require("../popper"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var CustomTreeNode = function CustomTreeNode(_ref) {
-  var node = _ref.node,
-      selected = _ref.selected,
-      onSelectNode = _ref.onSelectNode,
-      searchValue = _ref.searchValue,
-      editingNodes = _ref.editingNodes,
-      menuVisible = _ref.menuVisible,
-      searchable = _ref.searchable,
-      onValueChange = _ref.onValueChange,
-      saveEdit = _ref.saveEdit,
-      cancelEdit = _ref.cancelEdit,
-      cancelAddNode = _ref.cancelAddNode,
-      setMenuVisible = _ref.setMenuVisible,
-      editable = _ref.editable,
-      menuRender = _ref.menuRender,
-      localeDatas = _ref.localeDatas;
-  var ref = (0, _react.useRef)(null);
-  var localMap = localeDatas.tree || {};
-
-  if (editingNodes.map(function (n) {
-    return n.id;
-  }).includes(node.id)) {
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "tree-node__title--editing"
-    }, /*#__PURE__*/_react["default"].createElement(_input["default"], {
-      style: {
-        width: 240,
-        marginRight: 20
-      },
-      onKeyDown: function onKeyDown(e) {
-        e.stopPropagation();
-      },
-      value: (editingNodes.find(function (n) {
-        return n.id === node.id;
-      }) || {}).title,
-      onChange: function onChange(e) {
-        onValueChange(e.target.value, node.id);
-      }
-    }), /*#__PURE__*/_react["default"].createElement("span", {
-      className: (0, _classnames["default"])('save-btn', {
-        'save-btn-disabled': (editingNodes.find(function (n) {
-          return n.id === node.id;
-        }) || {}).title === ''
-      }),
-      onClick: function onClick() {
-        if ((editingNodes.find(function (n) {
-          return n.id === node.id;
-        }) || {}).title === '') {
-          return;
-        }
-
-        saveEdit(node);
-      }
-    }, localMap.confirm), /*#__PURE__*/_react["default"].createElement("span", {
-      style: {
-        cursor: 'pointer',
-        color: '#999'
-      },
-      onClick: function onClick() {
-        cancelEdit(node.id);
-
-        if (node.TREE_NODE_TYPE === 'add') {
-          cancelAddNode(node);
-        }
-      }
-    }, localMap.cancel));
-  } else {
-    if (searchValue !== '' && searchable && typeof node.title === 'string' && node.title.includes(searchValue)) {
-      var index = node.title.indexOf(searchValue);
-      var beforeStr = node.title.substr(0, index);
-      var afterStr = node.title.substr(index + searchValue.length);
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        ref: ref,
-        className: (0, _classnames["default"])('title__text', {
-          'title__text--selected': selected
-        }),
-        onClick: function onClick() {
-          onSelectNode(node);
-        },
-        onContextMenu: function onContextMenu(e) {
-          if (editable) {
-            e.preventDefault();
-            setMenuVisible(node.id);
-          }
-        }
-      }, /*#__PURE__*/_react["default"].createElement("span", null, beforeStr, /*#__PURE__*/_react["default"].createElement("span", {
-        className: "title__text--matched"
-      }, searchValue), afterStr));
-    } else {
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        ref: ref,
-        className: (0, _classnames["default"])('title__text', {
-          'title__text--selected': selected
-        }),
-        onClick: function onClick() {
-          if (!node.disabled) {
-            onSelectNode(node);
-          }
-        },
-        onContextMenu: function onContextMenu(e) {
-          if (editable && !node.disabled) {
-            e.preventDefault();
-            setMenuVisible(node.id);
-          }
-        }
-      }, node.title, editable && /*#__PURE__*/_react["default"].createElement(_popper["default"], {
-        show: menuVisible === node.id,
-        attachEle: ref.current,
-        width: false,
-        zIndex: 1040,
-        placement: "right-start",
-        onClickOutside: function onClickOutside() {
-          setMenuVisible(null);
-        }
-      }, menuRender(node)));
-    }
-  }
-};
-
-var _default = CustomTreeNode;
-exports["default"] = _default;

package/es/tree/hooks/useCheckable.js

@@ -1,153 +0,0 @@
-"use strict";
-
-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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = require("react");
-
-var _util = require("../util");
-
-var _lodash = _interopRequireDefault(require("lodash"));
-
-var useCheckable = function useCheckable(_ref) {
-  var defaultCheckedIds = _ref.defaultCheckedIds,
-      checkedIds = _ref.checkedIds,
-      onCheck = _ref.onCheck,
-      data = _ref.data,
-      flatData = _ref.flatData;
-  var currentCheckedIds = checkedIds || defaultCheckedIds || [];
-
-  var _useState = (0, _react.useState)(currentCheckedIds),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      _checkedIds = _useState2[0],
-      setCheckedIds = _useState2[1];
-
-  (0, _react.useEffect)(function () {
-    if (checkedIds) {
-      setCheckedIds(checkedIds);
-    }
-  }, [checkedIds]);
-
-  var getSemiChecked = function getSemiChecked(checkedId, flatData, data) {
-    var semiChecked = [];
-    flatData.forEach(function (node) {
-      if (node.parentId && !checkedId.includes(node.parentId) && checkedId.includes(node.id)) {
-        semiChecked.push(node.parentId);
-      }
-    });
-    return _lodash["default"].uniq(semiChecked.map(function (s) {
-      return (0, _util.getAncestorIds)(s, data);
-    }).concat(semiChecked).flat());
-  };
-
-  var onCheckNode = (0, _react.useCallback)(function (checkedNode, checked, _checkedIds) {
-    var semiCheckedIds = getSemiChecked(_checkedIds, flatData, data);
-    var checkedNodes = (0, _toConsumableArray2["default"])(_checkedIds);
-    var children = (0, _util.getChildrenIds)(checkedNode);
-    var ancestors = (0, _util.getAncestorIds)(checkedNode.id, data);
-
-    if (checked) {
-      // 选中对后代的影响
-      children.forEach(function (child) {
-        if (!checkedNodes.includes(child)) {
-          checkedNodes.push(child);
-        }
-
-        if (semiCheckedIds.includes(child)) {
-          semiCheckedIds = semiCheckedIds.filter(function (id) {
-            return id !== child;
-          });
-        }
-      });
-      checkedNodes.push(checkedNode.id);
-      semiCheckedIds = semiCheckedIds.filter(function (id) {
-        return id !== checkedNode.id;
-      }); // 选中对所有父辈的影响
-
-      ancestors.forEach(function (ancestor) {
-        if ((0, _util.findNode)(ancestor, data).children.map(function (child) {
-          return child.id;
-        }).every(function (childId) {
-          return checkedNodes.includes(childId);
-        })) {
-          semiCheckedIds = semiCheckedIds.filter(function (id) {
-            return id !== ancestor;
-          });
-          checkedNodes.push(ancestor);
-        } else {
-          semiCheckedIds.push(ancestor);
-        }
-      });
-    } else {
-      // 不选中对祖先的影响
-      ancestors.forEach(function (ancestor) {
-        if (checkedNodes.includes(ancestor)) {
-          semiCheckedIds.push(ancestor);
-        }
-
-        checkedNodes = checkedNodes.filter(function (id) {
-          return id !== ancestor;
-        }); // 还要考虑这个不选中，父辈 semi 也没有了的情况
-
-        var checkChildrenNum = 0;
-        var ancestorChildren = (0, _util.findNode)(ancestor, data).children.map(function (child) {
-          return child.id;
-        });
-        ancestorChildren.forEach(function (childId) {
-          if (checkedNodes.includes(childId)) {
-            checkChildrenNum = checkChildrenNum + 1;
-          }
-        });
-
-        if (checkChildrenNum === 1) {
-          semiCheckedIds = semiCheckedIds.filter(function (id) {
-            return id !== ancestor;
-          });
-        }
-      }); // 不选中对后代的影响
-
-      children.forEach(function (child) {
-        if (checkedNodes.includes(child)) {
-          checkedNodes = checkedNodes.filter(function (id) {
-            return id !== child;
-          });
-        }
-
-        if (semiCheckedIds.includes(child)) {
-          semiCheckedIds = semiCheckedIds.filter(function (id) {
-            return id !== child;
-          });
-        }
-      });
-      checkedNodes = checkedNodes.filter(function (id) {
-        return id !== checkedNode.id;
-      });
-    }
-
-    if (!checkedIds) {
-      setCheckedIds(checkedNodes);
-    }
-
-    if (onCheck) {
-      onCheck(checked, {
-        checkedIds: checkedNodes,
-        semiCheckedIds: semiCheckedIds
-      }, checkedNode);
-    }
-  }, [checkedIds, flatData, data]);
-  return [{
-    checkedNodes: _checkedIds,
-    semiCheckedIds: getSemiChecked(_checkedIds, flatData, data)
-  }, onCheckNode];
-};
-
-var _default = useCheckable;
-exports["default"] = _default;

package/es/tree/hooks/useClickOutside.js

@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = require("react");
-
-var useClickOutside = function useClickOutside(ref, callback) {
-  var handleClick = function handleClick(e) {
-    if (ref.current && !ref.current.contains(e.target)) {
-      callback();
-    }
-  };
-
-  (0, _react.useEffect)(function () {
-    document.addEventListener('click', handleClick);
-    return function () {
-      document.removeEventListener('click', handleClick);
-    };
-  }, []);
-};
-
-var _default = useClickOutside;
-exports["default"] = _default;