Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

rc-tree

Package Overview
Dependencies
Maintainers
11
Versions
315
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rc-tree - npm Package Compare versions

Comparing version 5.12.1 to 5.12.2

12

es/contextTypes.d.ts

@@ -6,3 +6,3 @@ /**

import * as React from 'react';
import type { BasicDataNode, DataNode, Direction, EventDataNode, IconType, Key, KeyEntities, NodeInstance } from './interface';
import type { BasicDataNode, DataNode, Direction, EventDataNode, IconType, Key, KeyEntities, TreeNodeProps } from './interface';
import type { DraggableConfig } from './Tree';

@@ -18,3 +18,3 @@ export type NodeMouseEventParams<TreeDataType extends BasicDataNode = DataNode, T = HTMLSpanElement> = {

export type NodeMouseEventHandler<TreeDataType extends BasicDataNode = DataNode, T = HTMLSpanElement> = (e: React.MouseEvent<T>, node: EventDataNode<TreeDataType>) => void;
export type NodeDragEventHandler<TreeDataType extends BasicDataNode = DataNode, T = HTMLDivElement> = (e: React.DragEvent<T>, node: NodeInstance<TreeDataType>, outsideTree?: boolean) => void;
export type NodeDragEventHandler<TreeDataType extends BasicDataNode = DataNode, T = HTMLDivElement> = (e: React.DragEvent<T>, nodeProps: TreeNodeProps<TreeDataType>, outsideTree?: boolean) => void;
export interface TreeContextProps<TreeDataType extends BasicDataNode = DataNode> {

@@ -40,4 +40,4 @@ prefixCls: string;

dropLevelOffset: number;
indent: any;
prefixCls: any;
indent: number;
prefixCls: string;
direction: Direction;

@@ -66,6 +66,6 @@ }) => React.ReactNode;

}
export declare const TreeContext: React.Context<TreeContextProps<any> | null>;
export declare const TreeContext: React.Context<TreeContextProps<any>>;
/** Internal usage, safe to remove. Do not use in prod */
export declare const UnstableContext: React.Context<{
nodeDisabled?: (node: DataNode) => boolean;
nodeDisabled?: (n: DataNode) => boolean;
}>;

14

es/Tree.d.ts
import * as React from 'react';
import type { NodeDragEventHandler, NodeDragEventParams, NodeMouseEventHandler, NodeMouseEventParams } from './contextTypes';
import type { DropIndicatorProps } from './DropIndicator';
import type { BasicDataNode, DataNode, Direction, EventDataNode, FieldNames, FlattenNode, IconType, Key, KeyEntities, NodeInstance, SafeKey, ScrollTo } from './interface';
import type { BasicDataNode, DataNode, Direction, EventDataNode, FieldNames, FlattenNode, IconType, Key, KeyEntities, SafeKey, ScrollTo, TreeNodeProps } from './interface';
import { type NodeListRef } from './NodeList';

@@ -156,3 +156,3 @@ export interface CheckInfo<TreeDataType extends BasicDataNode = DataNode> {

}
declare class Tree<TreeDataType extends DataNode | BasicDataNode = DataNode> extends React.Component<TreeProps<TreeDataType>, TreeState<TreeDataType>> {
declare class Tree<TreeDataType extends DataNode | BasicDataNode = DataNode | BasicDataNode> extends React.Component<TreeProps<TreeDataType>, TreeState<TreeDataType>> {
static defaultProps: {

@@ -178,3 +178,3 @@ prefixCls: string;

};
static TreeNode: React.FC<import("./interface").TreeNodeProps<DataNode>>;
static TreeNode: React.FC<Readonly<TreeNodeProps<DataNode>>>;
destroyed: boolean;

@@ -185,3 +185,3 @@ delayedDragEnterLogic: Record<SafeKey, number>;

dragStartMousePosition: any;
dragNode: NodeInstance<TreeDataType>;
dragNodeProps: TreeNodeProps<TreeDataType>;
currentMouseOverDroppableNodeKey: any;

@@ -202,8 +202,8 @@ listRef: React.RefObject<NodeListRef>;

*/
onNodeDragEnter: (event: React.DragEvent<HTMLDivElement>, node: NodeInstance<TreeDataType>) => void;
onNodeDragOver: (event: React.DragEvent<HTMLDivElement>, node: NodeInstance<TreeDataType>) => void;
onNodeDragEnter: (event: React.DragEvent<HTMLDivElement>, nodeProps: TreeNodeProps<TreeDataType>) => void;
onNodeDragOver: (event: React.DragEvent<HTMLDivElement>, nodeProps: TreeNodeProps<TreeDataType>) => void;
onNodeDragLeave: NodeDragEventHandler<TreeDataType>;
onWindowDragEnd: (event: any) => void;
onNodeDragEnd: NodeDragEventHandler<TreeDataType>;
onNodeDrop: (event: React.DragEvent<HTMLDivElement>, node: any, outsideTree?: boolean) => void;
onNodeDrop: (event: React.DragEvent<HTMLDivElement>, _: TreeNodeProps<TreeDataType>, outsideTree?: boolean) => void;
resetDragState(): void;

@@ -210,0 +210,0 @@ cleanDragState: () => void;

185

es/Tree.js

@@ -79,6 +79,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";

_defineProperty(_assertThisInitialized(_this), "dragStartMousePosition", null);
_defineProperty(_assertThisInitialized(_this), "dragNode", void 0);
_defineProperty(_assertThisInitialized(_this), "dragNodeProps", null);
_defineProperty(_assertThisInitialized(_this), "currentMouseOverDroppableNodeKey", null);
_defineProperty(_assertThisInitialized(_this), "listRef", /*#__PURE__*/React.createRef());
_defineProperty(_assertThisInitialized(_this), "onNodeDragStart", function (event, node) {
_defineProperty(_assertThisInitialized(_this), "onNodeDragStart", function (event, nodeProps) {
var _this$state = _this.state,

@@ -88,4 +88,4 @@ expandedKeys = _this$state.expandedKeys,

var onDragStart = _this.props.onDragStart;
var eventKey = node.props.eventKey;
_this.dragNode = node;
var eventKey = nodeProps.eventKey;
_this.dragNodeProps = nodeProps;
_this.dragStartMousePosition = {

@@ -105,3 +105,3 @@ x: event.clientX,

event: event,
node: convertNodePropsToEventData(node.props)
node: convertNodePropsToEventData(nodeProps)
});

@@ -116,3 +116,3 @@ });

*/
_defineProperty(_assertThisInitialized(_this), "onNodeDragEnter", function (event, node) {
_defineProperty(_assertThisInitialized(_this), "onNodeDragEnter", function (event, nodeProps) {
var _this$state2 = _this.state,

@@ -129,7 +129,4 @@ expandedKeys = _this$state2.expandedKeys,

direction = _this$props.direction;
var _node$props = node.props,
pos = _node$props.pos,
eventKey = _node$props.eventKey;
var _assertThisInitialize = _assertThisInitialized(_this),
dragNode = _assertThisInitialize.dragNode;
var pos = nodeProps.pos,
eventKey = nodeProps.eventKey;

@@ -140,7 +137,7 @@ // record the key of node which is latest entered, used in dragleave event.

}
if (!dragNode) {
if (!_this.dragNodeProps) {
_this.resetDragState();
return;
}
var _calcDropPosition = calcDropPosition(event, dragNode, node, indent, _this.dragStartMousePosition, allowDrop, flattenNodes, keyEntities, expandedKeys, direction),
var _calcDropPosition = calcDropPosition(event, _this.dragNodeProps, nodeProps, indent, _this.dragStartMousePosition, allowDrop, flattenNodes, keyEntities, expandedKeys, direction),
dropPosition = _calcDropPosition.dropPosition,

@@ -155,3 +152,3 @@ dropLevelOffset = _calcDropPosition.dropLevelOffset,

// don't allow drop inside its children
dragChildrenKeys.indexOf(dropTargetKey) !== -1 ||
dragChildrenKeys.includes(dropTargetKey) ||
// don't allow drop when drop is not allowed caculated by calcDropPosition

@@ -170,3 +167,3 @@ !dropAllowed) {

});
if (dragNode.props.eventKey !== node.props.eventKey) {
if (_this.dragNodeProps.eventKey !== nodeProps.eventKey) {
// hoist expand logic here

@@ -178,7 +175,9 @@ // since if logic is on the bottom

_this.delayedDragEnterLogic[pos] = window.setTimeout(function () {
if (_this.state.draggingNodeKey === null) return;
if (_this.state.draggingNodeKey === null) {
return;
}
var newExpandedKeys = _toConsumableArray(expandedKeys);
var entity = getEntity(keyEntities, node.props.eventKey);
var entity = getEntity(keyEntities, nodeProps.eventKey);
if (entity && (entity.children || []).length) {
newExpandedKeys = arrAdd(expandedKeys, node.props.eventKey);
newExpandedKeys = arrAdd(expandedKeys, nodeProps.eventKey);
}

@@ -189,3 +188,3 @@ if (!_this.props.hasOwnProperty('expandedKeys')) {

onExpand === null || onExpand === void 0 || onExpand(newExpandedKeys, {
node: convertNodePropsToEventData(node.props),
node: convertNodePropsToEventData(nodeProps),
expanded: true,

@@ -198,3 +197,3 @@ nativeEvent: event.nativeEvent

// Skip if drag node is self
if (dragNode.props.eventKey === dropTargetKey && dropLevelOffset === 0) {
if (_this.dragNodeProps.eventKey === dropTargetKey && dropLevelOffset === 0) {
_this.resetDragState();

@@ -216,7 +215,7 @@ return;

event: event,
node: convertNodePropsToEventData(node.props),
node: convertNodePropsToEventData(nodeProps),
expandedKeys: expandedKeys
});
});
_defineProperty(_assertThisInitialized(_this), "onNodeDragOver", function (event, node) {
_defineProperty(_assertThisInitialized(_this), "onNodeDragOver", function (event, nodeProps) {
var _this$state3 = _this.state,

@@ -232,8 +231,6 @@ dragChildrenKeys = _this$state3.dragChildrenKeys,

direction = _this$props2.direction;
var _assertThisInitialize2 = _assertThisInitialized(_this),
dragNode = _assertThisInitialize2.dragNode;
if (!dragNode) {
if (!_this.dragNodeProps) {
return;
}
var _calcDropPosition2 = calcDropPosition(event, dragNode, node, indent, _this.dragStartMousePosition, allowDrop, flattenNodes, keyEntities, expandedKeys, direction),
var _calcDropPosition2 = calcDropPosition(event, _this.dragNodeProps, nodeProps, indent, _this.dragStartMousePosition, allowDrop, flattenNodes, keyEntities, expandedKeys, direction),
dropPosition = _calcDropPosition2.dropPosition,

@@ -243,6 +240,6 @@ dropLevelOffset = _calcDropPosition2.dropLevelOffset,

dropContainerKey = _calcDropPosition2.dropContainerKey,
dropTargetPos = _calcDropPosition2.dropTargetPos,
dropAllowed = _calcDropPosition2.dropAllowed,
dropTargetPos = _calcDropPosition2.dropTargetPos,
dragOverNodeKey = _calcDropPosition2.dragOverNodeKey;
if (dragChildrenKeys.indexOf(dropTargetKey) !== -1 || !dropAllowed) {
if (dragChildrenKeys.includes(dropTargetKey) || !dropAllowed) {
// don't allow drop inside its children

@@ -255,3 +252,3 @@ // don't allow drop when drop is not allowed calculated by calcDropPosition

if (dragNode.props.eventKey === dropTargetKey && dropLevelOffset === 0) {
if (_this.dragNodeProps.eventKey === dropTargetKey && dropLevelOffset === 0) {
if (!(_this.state.dropPosition === null && _this.state.dropLevelOffset === null && _this.state.dropTargetKey === null && _this.state.dropContainerKey === null && _this.state.dropTargetPos === null && _this.state.dropAllowed === false && _this.state.dragOverNodeKey === null)) {

@@ -273,9 +270,9 @@ _this.resetDragState();

event: event,
node: convertNodePropsToEventData(node.props)
node: convertNodePropsToEventData(nodeProps)
});
});
_defineProperty(_assertThisInitialized(_this), "onNodeDragLeave", function (event, node) {
_defineProperty(_assertThisInitialized(_this), "onNodeDragLeave", function (event, nodeProps) {
// if it is outside the droppable area
// currentMouseOverDroppableNodeKey will be updated in dragenter event when into another droppable receiver.
if (_this.currentMouseOverDroppableNodeKey === node.props.eventKey && !event.currentTarget.contains(event.relatedTarget)) {
if (_this.currentMouseOverDroppableNodeKey === nodeProps.eventKey && !event.currentTarget.contains(event.relatedTarget)) {
_this.resetDragState();

@@ -287,3 +284,3 @@ _this.currentMouseOverDroppableNodeKey = null;

event: event,
node: convertNodePropsToEventData(node.props)
node: convertNodePropsToEventData(nodeProps)
});

@@ -298,3 +295,3 @@ });

// if onNodeDragEnd is called, onWindowDragEnd won't be called since stopPropagation() is called
_defineProperty(_assertThisInitialized(_this), "onNodeDragEnd", function (event, node) {
_defineProperty(_assertThisInitialized(_this), "onNodeDragEnd", function (event, nodeProps) {
var onDragEnd = _this.props.onDragEnd;

@@ -307,8 +304,8 @@ _this.setState({

event: event,
node: convertNodePropsToEventData(node.props)
node: convertNodePropsToEventData(nodeProps)
});
_this.dragNode = null;
_this.dragNodeProps = null;
window.removeEventListener('dragend', _this.onWindowDragEnd);
});
_defineProperty(_assertThisInitialized(_this), "onNodeDrop", function (event, node) {
_defineProperty(_assertThisInitialized(_this), "onNodeDrop", function (event, _) {
var _this$getActiveItem;

@@ -322,3 +319,5 @@ var outsideTree = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;

dropAllowed = _this$state4.dropAllowed;
if (!dropAllowed) return;
if (!dropAllowed) {
return;
}
var onDrop = _this.props.onDrop;

@@ -334,3 +333,3 @@ _this.setState({

});
var dropToChild = dragChildrenKeys.indexOf(dropTargetKey) !== -1;
var dropToChild = dragChildrenKeys.includes(dropTargetKey);
warning(!dropToChild, "Can not drop to dragNode's children node. This is a bug of rc-tree. Please report an issue.");

@@ -341,4 +340,4 @@ var posArr = posToArr(dropTargetPos);

node: convertNodePropsToEventData(abstractDropNodeProps),
dragNode: _this.dragNode ? convertNodePropsToEventData(_this.dragNode.props) : null,
dragNodesKeys: [_this.dragNode.props.eventKey].concat(dragChildrenKeys),
dragNode: _this.dragNodeProps ? convertNodePropsToEventData(_this.dragNodeProps) : null,
dragNodesKeys: [_this.dragNodeProps.eventKey].concat(dragChildrenKeys),
dropToGap: dropPosition !== 0,

@@ -350,3 +349,3 @@ dropPosition: dropPosition + Number(posArr[posArr.length - 1])

}
_this.dragNode = null;
_this.dragNodeProps = null;
});

@@ -430,7 +429,4 @@ _defineProperty(_assertThisInitialized(_this), "cleanDragState", function () {

var entity = getEntity(keyEntities, selectedKey);
if (!entity) return null;
return entity.node;
}).filter(function (node) {
return node;
});
return entity ? entity.node : null;
}).filter(Boolean);
_this.setUncontrolledState({

@@ -474,5 +470,3 @@ selectedKeys: selectedKeys

return getEntity(keyEntities, checkedKey);
}).filter(function (entity) {
return entity;
}).map(function (entity) {
}).filter(Boolean).map(function (entity) {
return entity.node;

@@ -545,3 +539,3 @@ });

onLoad = _this$props7.onLoad;
if (!loadData || loadedKeys.indexOf(key) !== -1 || loadingKeys.indexOf(key) !== -1) {
if (!loadData || loadedKeys.includes(key) || loadingKeys.includes(key)) {
return null;

@@ -697,10 +691,6 @@ }

// Update selected keys
var index = expandedKeys.indexOf(key);
var certain = expandedKeys.includes(key);
var targetExpanded = !expanded;
warning(expanded && index !== -1 || !expanded && index === -1, 'Expand state not sync with index check');
if (targetExpanded) {
expandedKeys = arrAdd(expandedKeys, key);
} else {
expandedKeys = arrDel(expandedKeys, key);
}
warning(expanded && certain || !expanded && !certain, 'Expand state not sync with index check');
expandedKeys = targetExpanded ? arrAdd(expandedKeys, key) : arrDel(expandedKeys, key);
_this.setExpandedKeys(expandedKeys);

@@ -1014,42 +1004,43 @@ onExpand === null || onExpand === void 0 || onExpand(expandedKeys, {

}
var contextValue = {
prefixCls: prefixCls,
selectable: selectable,
showIcon: showIcon,
icon: icon,
switcherIcon: switcherIcon,
draggable: draggableConfig,
draggingNodeKey: draggingNodeKey,
checkable: checkable,
checkStrictly: checkStrictly,
disabled: disabled,
keyEntities: keyEntities,
dropLevelOffset: dropLevelOffset,
dropContainerKey: dropContainerKey,
dropTargetKey: dropTargetKey,
dropPosition: dropPosition,
dragOverNodeKey: dragOverNodeKey,
indent: indent,
direction: direction,
dropIndicatorRender: dropIndicatorRender,
loadData: loadData,
filterTreeNode: filterTreeNode,
titleRender: titleRender,
onNodeClick: this.onNodeClick,
onNodeDoubleClick: this.onNodeDoubleClick,
onNodeExpand: this.onNodeExpand,
onNodeSelect: this.onNodeSelect,
onNodeCheck: this.onNodeCheck,
onNodeLoad: this.onNodeLoad,
onNodeMouseEnter: this.onNodeMouseEnter,
onNodeMouseLeave: this.onNodeMouseLeave,
onNodeContextMenu: this.onNodeContextMenu,
onNodeDragStart: this.onNodeDragStart,
onNodeDragEnter: this.onNodeDragEnter,
onNodeDragOver: this.onNodeDragOver,
onNodeDragLeave: this.onNodeDragLeave,
onNodeDragEnd: this.onNodeDragEnd,
onNodeDrop: this.onNodeDrop
};
return /*#__PURE__*/React.createElement(TreeContext.Provider, {
value: {
prefixCls: prefixCls,
selectable: selectable,
showIcon: showIcon,
icon: icon,
switcherIcon: switcherIcon,
draggable: draggableConfig,
draggingNodeKey: draggingNodeKey,
checkable: checkable,
checkStrictly: checkStrictly,
disabled: disabled,
keyEntities: keyEntities,
dropLevelOffset: dropLevelOffset,
dropContainerKey: dropContainerKey,
dropTargetKey: dropTargetKey,
dropPosition: dropPosition,
dragOverNodeKey: dragOverNodeKey,
indent: indent,
direction: direction,
dropIndicatorRender: dropIndicatorRender,
loadData: loadData,
filterTreeNode: filterTreeNode,
titleRender: titleRender,
onNodeClick: this.onNodeClick,
onNodeDoubleClick: this.onNodeDoubleClick,
onNodeExpand: this.onNodeExpand,
onNodeSelect: this.onNodeSelect,
onNodeCheck: this.onNodeCheck,
onNodeLoad: this.onNodeLoad,
onNodeMouseEnter: this.onNodeMouseEnter,
onNodeMouseLeave: this.onNodeMouseLeave,
onNodeContextMenu: this.onNodeContextMenu,
onNodeDragStart: this.onNodeDragStart,
onNodeDragEnter: this.onNodeDragEnter,
onNodeDragOver: this.onNodeDragOver,
onNodeDragLeave: this.onNodeDragLeave,
onNodeDragEnd: this.onNodeDragEnd,
onNodeDrop: this.onNodeDrop
}
value: contextValue
}, /*#__PURE__*/React.createElement("div", {

@@ -1056,0 +1047,0 @@ className: classNames(prefixCls, className, rootClassName, _defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-show-line"), showLine), "".concat(prefixCls, "-focused"), focused), "".concat(prefixCls, "-active-focused"), activeKey !== null)),

14

es/TreeNode.d.ts

@@ -1,13 +0,5 @@

import * as React from 'react';
import { UnstableContext, type TreeContextProps } from './contextTypes';
import React from 'react';
import type { TreeNodeProps } from './interface';
export type { TreeNodeProps } from './interface';
export interface InternalTreeNodeProps extends TreeNodeProps {
context?: TreeContextProps;
unstableContext?: React.ContextType<typeof UnstableContext>;
}
export interface TreeNodeState {
dragNodeHighlight: boolean;
}
declare const ContextTreeNode: React.FC<TreeNodeProps>;
export default ContextTreeNode;
declare const TreeNode: React.FC<Readonly<TreeNodeProps>>;
export default TreeNode;

783

es/TreeNode.js
import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
var _excluded = ["eventKey", "className", "style", "dragOver", "dragOverGapTop", "dragOverGapBottom", "isLeaf", "isStart", "isEnd", "expanded", "selected", "checked", "halfChecked", "loading", "domRef", "active", "data", "onMouseMove", "selectable"];
import classNames from 'classnames';
import pickAttrs from "rc-util/es/pickAttrs";
import * as React from 'react';
// @ts-ignore
import React from 'react';
import { TreeContext, UnstableContext } from "./contextTypes";

@@ -22,459 +17,347 @@ import Indent from "./Indent";

var defaultTitle = '---';
var InternalTreeNode = /*#__PURE__*/function (_React$Component) {
_inherits(InternalTreeNode, _React$Component);
var _super = _createSuper(InternalTreeNode);
function InternalTreeNode() {
var _this;
_classCallCheck(this, InternalTreeNode);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
var TreeNode = function TreeNode(props) {
var _context$filterTreeNo, _classNames4;
var eventKey = props.eventKey,
className = props.className,
style = props.style,
dragOver = props.dragOver,
dragOverGapTop = props.dragOverGapTop,
dragOverGapBottom = props.dragOverGapBottom,
isLeaf = props.isLeaf,
isStart = props.isStart,
isEnd = props.isEnd,
expanded = props.expanded,
selected = props.selected,
checked = props.checked,
halfChecked = props.halfChecked,
loading = props.loading,
domRef = props.domRef,
active = props.active,
data = props.data,
onMouseMove = props.onMouseMove,
selectable = props.selectable,
otherProps = _objectWithoutProperties(props, _excluded);
var context = React.useContext(TreeContext);
var unstableContext = React.useContext(UnstableContext);
var selectHandleRef = React.useRef(null);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
dragNodeHighlight = _React$useState2[0],
setDragNodeHighlight = _React$useState2[1];
// ======= State: Disabled State =======
var isDisabled = React.useMemo(function () {
var _unstableContext$node;
return !!(context.disabled || props.disabled || (_unstableContext$node = unstableContext.nodeDisabled) !== null && _unstableContext$node !== void 0 && _unstableContext$node.call(unstableContext, data));
}, [context.disabled, props.disabled, unstableContext.nodeDisabled, data]);
var isCheckable = React.useMemo(function () {
// Return false if tree or treeNode is not checkable
if (!context.checkable || props.checkable === false) {
return false;
}
_this = _super.call.apply(_super, [this].concat(args));
_defineProperty(_assertThisInitialized(_this), "state", {
dragNodeHighlight: false
});
_defineProperty(_assertThisInitialized(_this), "selectHandle", void 0);
_defineProperty(_assertThisInitialized(_this), "cacheIndent", void 0);
_defineProperty(_assertThisInitialized(_this), "onSelectorClick", function (e) {
// Click trigger before select/check operation
var onNodeClick = _this.props.context.onNodeClick;
onNodeClick(e, convertNodePropsToEventData(_this.props));
if (_this.isSelectable()) {
_this.onSelect(e);
} else {
_this.onCheck(e);
}
});
_defineProperty(_assertThisInitialized(_this), "onSelectorDoubleClick", function (e) {
var onNodeDoubleClick = _this.props.context.onNodeDoubleClick;
onNodeDoubleClick(e, convertNodePropsToEventData(_this.props));
});
_defineProperty(_assertThisInitialized(_this), "onSelect", function (e) {
if (_this.isDisabled()) return;
var onNodeSelect = _this.props.context.onNodeSelect;
onNodeSelect(e, convertNodePropsToEventData(_this.props));
});
_defineProperty(_assertThisInitialized(_this), "onCheck", function (e) {
if (_this.isDisabled()) return;
var _this$props = _this.props,
disableCheckbox = _this$props.disableCheckbox,
checked = _this$props.checked;
var onNodeCheck = _this.props.context.onNodeCheck;
if (!_this.isCheckable() || disableCheckbox) return;
var targetChecked = !checked;
onNodeCheck(e, convertNodePropsToEventData(_this.props), targetChecked);
});
_defineProperty(_assertThisInitialized(_this), "onMouseEnter", function (e) {
var onNodeMouseEnter = _this.props.context.onNodeMouseEnter;
onNodeMouseEnter(e, convertNodePropsToEventData(_this.props));
});
_defineProperty(_assertThisInitialized(_this), "onMouseLeave", function (e) {
var onNodeMouseLeave = _this.props.context.onNodeMouseLeave;
onNodeMouseLeave(e, convertNodePropsToEventData(_this.props));
});
_defineProperty(_assertThisInitialized(_this), "onContextMenu", function (e) {
var onNodeContextMenu = _this.props.context.onNodeContextMenu;
onNodeContextMenu(e, convertNodePropsToEventData(_this.props));
});
_defineProperty(_assertThisInitialized(_this), "onDragStart", function (e) {
var onNodeDragStart = _this.props.context.onNodeDragStart;
e.stopPropagation();
_this.setState({
dragNodeHighlight: true
});
onNodeDragStart(e, _assertThisInitialized(_this));
try {
// ie throw error
// firefox-need-it
e.dataTransfer.setData('text/plain', '');
} catch (error) {
// empty
}
});
_defineProperty(_assertThisInitialized(_this), "onDragEnter", function (e) {
var onNodeDragEnter = _this.props.context.onNodeDragEnter;
e.preventDefault();
e.stopPropagation();
onNodeDragEnter(e, _assertThisInitialized(_this));
});
_defineProperty(_assertThisInitialized(_this), "onDragOver", function (e) {
var onNodeDragOver = _this.props.context.onNodeDragOver;
e.preventDefault();
e.stopPropagation();
onNodeDragOver(e, _assertThisInitialized(_this));
});
_defineProperty(_assertThisInitialized(_this), "onDragLeave", function (e) {
var onNodeDragLeave = _this.props.context.onNodeDragLeave;
e.stopPropagation();
onNodeDragLeave(e, _assertThisInitialized(_this));
});
_defineProperty(_assertThisInitialized(_this), "onDragEnd", function (e) {
var onNodeDragEnd = _this.props.context.onNodeDragEnd;
e.stopPropagation();
_this.setState({
dragNodeHighlight: false
});
onNodeDragEnd(e, _assertThisInitialized(_this));
});
_defineProperty(_assertThisInitialized(_this), "onDrop", function (e) {
var onNodeDrop = _this.props.context.onNodeDrop;
e.preventDefault();
e.stopPropagation();
_this.setState({
dragNodeHighlight: false
});
onNodeDrop(e, _assertThisInitialized(_this));
});
// Disabled item still can be switch
_defineProperty(_assertThisInitialized(_this), "onExpand", function (e) {
var _this$props2 = _this.props,
loading = _this$props2.loading,
onNodeExpand = _this$props2.context.onNodeExpand;
if (loading) return;
onNodeExpand(e, convertNodePropsToEventData(_this.props));
});
// Drag usage
_defineProperty(_assertThisInitialized(_this), "setSelectHandle", function (node) {
_this.selectHandle = node;
});
_defineProperty(_assertThisInitialized(_this), "getNodeState", function () {
var expanded = _this.props.expanded;
if (_this.isLeaf()) {
return null;
}
return expanded ? ICON_OPEN : ICON_CLOSE;
});
_defineProperty(_assertThisInitialized(_this), "hasChildren", function () {
var eventKey = _this.props.eventKey;
var keyEntities = _this.props.context.keyEntities;
var _ref = getEntity(keyEntities, eventKey) || {},
children = _ref.children;
return !!(children || []).length;
});
_defineProperty(_assertThisInitialized(_this), "isLeaf", function () {
var _this$props3 = _this.props,
isLeaf = _this$props3.isLeaf,
loaded = _this$props3.loaded;
var loadData = _this.props.context.loadData;
var hasChildren = _this.hasChildren();
if (isLeaf === false) {
return false;
}
return isLeaf || !loadData && !hasChildren || loadData && loaded && !hasChildren;
});
_defineProperty(_assertThisInitialized(_this), "isDisabled", function () {
var _this$props4 = _this.props,
disabled = _this$props4.disabled,
data = _this$props4.data;
var _this$props5 = _this.props,
treeDisabled = _this$props5.context.disabled,
nodeDisabled = _this$props5.unstableContext.nodeDisabled;
return !!(treeDisabled || disabled || nodeDisabled && nodeDisabled(data));
});
_defineProperty(_assertThisInitialized(_this), "isCheckable", function () {
var checkable = _this.props.checkable;
var treeCheckable = _this.props.context.checkable;
return context.checkable;
}, [context.checkable, props.checkable]);
// Return false if tree or treeNode is not checkable
if (!treeCheckable || checkable === false) return false;
return treeCheckable;
});
// Load data to avoid default expanded tree without data
_defineProperty(_assertThisInitialized(_this), "syncLoadData", function (props) {
var expanded = props.expanded,
loading = props.loading,
loaded = props.loaded;
var _this$props$context = _this.props.context,
loadData = _this$props$context.loadData,
onNodeLoad = _this$props$context.onNodeLoad;
if (loading) {
return;
}
// ======= Event Handlers: Selection and Check =======
var onSelect = function onSelect(e) {
if (isDisabled) {
return;
}
context.onNodeSelect(e, convertNodePropsToEventData(props));
};
var onCheck = function onCheck(e) {
if (isDisabled) {
return;
}
if (!isCheckable || props.disableCheckbox) {
return;
}
context.onNodeCheck(e, convertNodePropsToEventData(props), !checked);
};
// read from state to avoid loadData at same time
if (loadData && expanded && !_this.isLeaf() && !loaded) {
// We needn't reload data when has children in sync logic
// It's only needed in node expanded
onNodeLoad(convertNodePropsToEventData(_this.props));
}
});
_defineProperty(_assertThisInitialized(_this), "isDraggable", function () {
var _this$props6 = _this.props,
data = _this$props6.data,
draggable = _this$props6.context.draggable;
return !!(draggable && (!draggable.nodeDraggable || draggable.nodeDraggable(data)));
});
// ==================== Render: Drag Handler ====================
_defineProperty(_assertThisInitialized(_this), "renderDragHandler", function () {
var _this$props$context2 = _this.props.context,
draggable = _this$props$context2.draggable,
prefixCls = _this$props$context2.prefixCls;
return draggable !== null && draggable !== void 0 && draggable.icon ? /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-draggable-icon")
}, draggable.icon) : null;
});
// ====================== Render: Switcher ======================
_defineProperty(_assertThisInitialized(_this), "renderSwitcherIconDom", function (isLeaf) {
var switcherIconFromProps = _this.props.switcherIcon;
var switcherIconFromCtx = _this.props.context.switcherIcon;
var switcherIcon = switcherIconFromProps || switcherIconFromCtx;
// ======= State: Selectable Check =======
var isSelectable = React.useMemo(function () {
// Ignore when selectable is undefined or null
if (typeof selectable === 'boolean') {
return selectable;
}
return context.selectable;
}, [selectable, context.selectable]);
var onSelectorClick = function onSelectorClick(e) {
// Click trigger before select/check operation
context.onNodeClick(e, convertNodePropsToEventData(props));
if (isSelectable) {
onSelect(e);
} else {
onCheck(e);
}
};
var onSelectorDoubleClick = function onSelectorDoubleClick(e) {
context.onNodeDoubleClick(e, convertNodePropsToEventData(props));
};
var onMouseEnter = function onMouseEnter(e) {
context.onNodeMouseEnter(e, convertNodePropsToEventData(props));
};
var onMouseLeave = function onMouseLeave(e) {
context.onNodeMouseLeave(e, convertNodePropsToEventData(props));
};
var onContextMenu = function onContextMenu(e) {
context.onNodeContextMenu(e, convertNodePropsToEventData(props));
};
// ======= Drag: Drag Enabled =======
var isDraggable = React.useMemo(function () {
return !!(context.draggable && (!context.draggable.nodeDraggable || context.draggable.nodeDraggable(data)));
}, [context.draggable, data]);
// ======= Drag: Drag Event Handlers =======
var onDragStart = function onDragStart(e) {
e.stopPropagation();
setDragNodeHighlight(true);
context.onNodeDragStart(e, props);
try {
// ie throw error
// firefox-need-it
e.dataTransfer.setData('text/plain', '');
} catch (_unused) {
// empty
}
};
var onDragEnter = function onDragEnter(e) {
e.preventDefault();
e.stopPropagation();
context.onNodeDragEnter(e, props);
};
var onDragOver = function onDragOver(e) {
e.preventDefault();
e.stopPropagation();
context.onNodeDragOver(e, props);
};
var onDragLeave = function onDragLeave(e) {
e.stopPropagation();
context.onNodeDragLeave(e, props);
};
var onDragEnd = function onDragEnd(e) {
e.stopPropagation();
setDragNodeHighlight(false);
context.onNodeDragEnd(e, props);
};
var onDrop = function onDrop(e) {
e.preventDefault();
e.stopPropagation();
setDragNodeHighlight(false);
context.onNodeDrop(e, props);
};
// ======= Expand: Node Expansion =======
var onExpand = function onExpand(e) {
if (loading) {
return;
}
context.onNodeExpand(e, convertNodePropsToEventData(props));
};
// ======= State: Has Children =======
var hasChildren = React.useMemo(function () {
var _ref = getEntity(context.keyEntities, eventKey) || {},
children = _ref.children;
return Boolean((children || []).length);
}, [context.keyEntities, eventKey]);
// ======= State: Leaf Check =======
var memoizedIsLeaf = React.useMemo(function () {
if (isLeaf === false) {
return false;
}
return isLeaf || !context.loadData && !hasChildren || context.loadData && props.loaded && !hasChildren;
}, [isLeaf, context.loadData, hasChildren, props.loaded]);
// Load data to avoid default expanded tree without data
// ============== Effect: Sync Load Data ==============
var syncLoadData = function syncLoadData() {
if (loading) {
return;
}
// read from state to avoid loadData at same time
if (context.loadData && expanded && !memoizedIsLeaf && !props.loaded) {
// We needn't reload data when has children in sync logic
// It's only needed in node expanded
context.onNodeLoad(convertNodePropsToEventData(props));
}
};
// ============== Effect ==============
React.useEffect(function () {
syncLoadData();
}, [loading, context.loadData, context.onNodeLoad, expanded, memoizedIsLeaf, props]);
// ==================== Render: Drag Handler ====================
var dragHandlerNode = React.useMemo(function () {
var _context$draggable;
if (!((_context$draggable = context.draggable) !== null && _context$draggable !== void 0 && _context$draggable.icon)) {
return null;
}
return /*#__PURE__*/React.createElement("span", {
className: "".concat(context.prefixCls, "-draggable-icon")
}, context.draggable.icon);
}, [context.draggable]);
// ====================== Render: Switcher ======================
var renderSwitcherIconDom = function renderSwitcherIconDom(isInternalLeaf) {
var switcherIcon = props.switcherIcon || context.switcherIcon;
// if switcherIconDom is null, no render switcher span
if (typeof switcherIcon === 'function') {
return switcherIcon(_objectSpread(_objectSpread({}, props), {}, {
isLeaf: isInternalLeaf
}));
}
return switcherIcon;
};
// Switcher
var switcherNode = React.useMemo(function () {
if (memoizedIsLeaf) {
// if switcherIconDom is null, no render switcher span
if (typeof switcherIcon === 'function') {
return switcherIcon(_objectSpread(_objectSpread({}, _this.props), {}, {
isLeaf: isLeaf
}));
}
return switcherIcon;
});
// Switcher
_defineProperty(_assertThisInitialized(_this), "renderSwitcher", function () {
var expanded = _this.props.expanded;
var prefixCls = _this.props.context.prefixCls;
if (_this.isLeaf()) {
// if switcherIconDom is null, no render switcher span
var _switcherIconDom = _this.renderSwitcherIconDom(true);
return _switcherIconDom !== false ? /*#__PURE__*/React.createElement("span", {
className: classNames("".concat(prefixCls, "-switcher"), "".concat(prefixCls, "-switcher-noop"))
}, _switcherIconDom) : null;
}
var switcherCls = classNames("".concat(prefixCls, "-switcher"), "".concat(prefixCls, "-switcher_").concat(expanded ? ICON_OPEN : ICON_CLOSE));
var switcherIconDom = _this.renderSwitcherIconDom(false);
return switcherIconDom !== false ? /*#__PURE__*/React.createElement("span", {
onClick: _this.onExpand,
className: switcherCls
}, switcherIconDom) : null;
});
// ====================== Render: Checkbox ======================
// Checkbox
_defineProperty(_assertThisInitialized(_this), "renderCheckbox", function () {
var _this$props7 = _this.props,
checked = _this$props7.checked,
halfChecked = _this$props7.halfChecked,
disableCheckbox = _this$props7.disableCheckbox,
title = _this$props7.title;
var prefixCls = _this.props.context.prefixCls;
var disabled = _this.isDisabled();
var checkable = _this.isCheckable();
if (!checkable) return null;
var _switcherIconDom = renderSwitcherIconDom(true);
return _switcherIconDom !== false ? /*#__PURE__*/React.createElement("span", {
className: classNames("".concat(context.prefixCls, "-switcher"), "".concat(context.prefixCls, "-switcher-noop"))
}, _switcherIconDom) : null;
}
var switcherIconDom = renderSwitcherIconDom(false);
return switcherIconDom !== false ? /*#__PURE__*/React.createElement("span", {
onClick: onExpand,
className: classNames("".concat(context.prefixCls, "-switcher"), "".concat(context.prefixCls, "-switcher_").concat(expanded ? ICON_OPEN : ICON_CLOSE))
}, switcherIconDom) : null;
}, [context.prefixCls, expanded, memoizedIsLeaf, props.switcherIcon, context.switcherIcon]);
// [Legacy] Custom element should be separate with `checkable` in future
var $custom = typeof checkable !== 'boolean' ? checkable : null;
return /*#__PURE__*/React.createElement("span", {
className: classNames("".concat(prefixCls, "-checkbox"), checked && "".concat(prefixCls, "-checkbox-checked"), !checked && halfChecked && "".concat(prefixCls, "-checkbox-indeterminate"), (disabled || disableCheckbox) && "".concat(prefixCls, "-checkbox-disabled")),
onClick: _this.onCheck,
role: "checkbox",
"aria-checked": halfChecked ? 'mixed' : checked,
"aria-disabled": disabled || disableCheckbox,
"aria-label": "Select ".concat(typeof title === 'string' ? title : 'tree node')
}, $custom);
});
// ==================== Render: Title + Icon ====================
_defineProperty(_assertThisInitialized(_this), "renderIcon", function () {
var loading = _this.props.loading;
var prefixCls = _this.props.context.prefixCls;
return /*#__PURE__*/React.createElement("span", {
className: classNames("".concat(prefixCls, "-iconEle"), "".concat(prefixCls, "-icon__").concat(_this.getNodeState() || 'docu'), loading && "".concat(prefixCls, "-icon_loading"))
});
});
// Icon + Title
_defineProperty(_assertThisInitialized(_this), "renderSelector", function () {
var dragNodeHighlight = _this.state.dragNodeHighlight;
var _this$props8 = _this.props,
_this$props8$title = _this$props8.title,
title = _this$props8$title === void 0 ? defaultTitle : _this$props8$title,
selected = _this$props8.selected,
icon = _this$props8.icon,
loading = _this$props8.loading,
data = _this$props8.data;
var _this$props$context3 = _this.props.context,
prefixCls = _this$props$context3.prefixCls,
showIcon = _this$props$context3.showIcon,
treeIcon = _this$props$context3.icon,
loadData = _this$props$context3.loadData,
titleRender = _this$props$context3.titleRender;
var disabled = _this.isDisabled();
var wrapClass = "".concat(prefixCls, "-node-content-wrapper");
// ====================== Checkbox ======================
var checkboxNode = React.useMemo(function () {
if (!isCheckable) {
return null;
}
// Icon - Still show loading icon when loading without showIcon
var $icon;
if (showIcon) {
var currentIcon = icon || treeIcon;
$icon = currentIcon ? /*#__PURE__*/React.createElement("span", {
className: classNames("".concat(prefixCls, "-iconEle"), "".concat(prefixCls, "-icon__customize"))
}, typeof currentIcon === 'function' ? currentIcon(_this.props) : currentIcon) : _this.renderIcon();
} else if (loadData && loading) {
$icon = _this.renderIcon();
}
// [Legacy] Custom element should be separate with `checkable` in future
var $custom = typeof isCheckable !== 'boolean' ? isCheckable : null;
return /*#__PURE__*/React.createElement("span", {
className: classNames("".concat(context.prefixCls, "-checkbox"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(context.prefixCls, "-checkbox-checked"), checked), "".concat(context.prefixCls, "-checkbox-indeterminate"), !checked && halfChecked), "".concat(context.prefixCls, "-checkbox-disabled"), isDisabled || props.disableCheckbox)),
onClick: onCheck,
role: "checkbox",
"aria-checked": halfChecked ? 'mixed' : checked,
"aria-disabled": isDisabled || props.disableCheckbox,
"aria-label": "Select ".concat(typeof props.title === 'string' ? props.title : 'tree node')
}, $custom);
}, [isCheckable, checked, halfChecked, isDisabled, props.disableCheckbox, props.title]);
// Title
var titleNode;
if (typeof title === 'function') {
titleNode = title(data);
} else if (titleRender) {
titleNode = titleRender(data);
} else {
titleNode = title;
}
var $title = /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-title")
}, titleNode);
return /*#__PURE__*/React.createElement("span", {
ref: _this.setSelectHandle,
title: typeof title === 'string' ? title : '',
className: classNames("".concat(wrapClass), "".concat(wrapClass, "-").concat(_this.getNodeState() || 'normal'), !disabled && (selected || dragNodeHighlight) && "".concat(prefixCls, "-node-selected")),
onMouseEnter: _this.onMouseEnter,
onMouseLeave: _this.onMouseLeave,
onContextMenu: _this.onContextMenu,
onClick: _this.onSelectorClick,
onDoubleClick: _this.onSelectorDoubleClick
}, $icon, $title, _this.renderDropIndicator());
// ============== State: Node State (Open/Close) ==============
var nodeState = React.useMemo(function () {
if (memoizedIsLeaf) {
return null;
}
return expanded ? ICON_OPEN : ICON_CLOSE;
}, [memoizedIsLeaf, expanded]);
// ==================== Render: Title + Icon ====================
var iconNode = React.useMemo(function () {
return /*#__PURE__*/React.createElement("span", {
className: classNames("".concat(context.prefixCls, "-iconEle"), "".concat(context.prefixCls, "-icon__").concat(nodeState || 'docu'), _defineProperty({}, "".concat(context.prefixCls, "-icon_loading"), loading))
});
// =================== Render: Drop Indicator ===================
_defineProperty(_assertThisInitialized(_this), "renderDropIndicator", function () {
var _this$props9 = _this.props,
disabled = _this$props9.disabled,
eventKey = _this$props9.eventKey;
var _this$props$context4 = _this.props.context,
draggable = _this$props$context4.draggable,
dropLevelOffset = _this$props$context4.dropLevelOffset,
dropPosition = _this$props$context4.dropPosition,
prefixCls = _this$props$context4.prefixCls,
indent = _this$props$context4.indent,
dropIndicatorRender = _this$props$context4.dropIndicatorRender,
dragOverNodeKey = _this$props$context4.dragOverNodeKey,
direction = _this$props$context4.direction;
var rootDraggable = !!draggable;
// allowDrop is calculated in Tree.tsx, there is no need for calc it here
var showIndicator = !disabled && rootDraggable && dragOverNodeKey === eventKey;
}, [context.prefixCls, nodeState, loading]);
// This is a hot fix which is already fixed in
// https://github.com/react-component/tree/pull/743/files
// But some case need break point so we hack on this
// ref https://github.com/ant-design/ant-design/issues/43493
var mergedIndent = indent !== null && indent !== void 0 ? indent : _this.cacheIndent;
_this.cacheIndent = indent;
return showIndicator ? dropIndicatorRender({
dropPosition: dropPosition,
dropLevelOffset: dropLevelOffset,
indent: mergedIndent,
prefixCls: prefixCls,
direction: direction
}) : null;
// =================== Drop Indicator ===================
var dropIndicatorNode = React.useMemo(function () {
var rootDraggable = Boolean(context.draggable);
// allowDrop is calculated in Tree.tsx, there is no need for calc it here
var showIndicator = !props.disabled && rootDraggable && context.dragOverNodeKey === eventKey;
if (!showIndicator) {
return null;
}
return context.dropIndicatorRender({
dropPosition: context.dropPosition,
dropLevelOffset: context.dropLevelOffset,
indent: context.indent,
prefixCls: context.prefixCls,
direction: context.direction
});
return _this;
}
_createClass(InternalTreeNode, [{
key: "componentDidMount",
value:
// Isomorphic needn't load data in server side
function componentDidMount() {
this.syncLoadData(this.props);
}, [context.dropPosition, context.dropLevelOffset, context.indent, context.prefixCls, context.direction, context.draggable, context.dragOverNodeKey, context.dropIndicatorRender]);
// Icon + Title
var selectorNode = React.useMemo(function () {
var _props$title = props.title,
title = _props$title === void 0 ? defaultTitle : _props$title;
var wrapClass = "".concat(context.prefixCls, "-node-content-wrapper");
// Icon - Still show loading icon when loading without showIcon
var $icon;
if (context.showIcon) {
var currentIcon = props.icon || context.icon;
$icon = currentIcon ? /*#__PURE__*/React.createElement("span", {
className: classNames("".concat(context.prefixCls, "-iconEle"), "".concat(context.prefixCls, "-icon__customize"))
}, typeof currentIcon === 'function' ? currentIcon(props) : currentIcon) : iconNode;
} else if (context.loadData && loading) {
$icon = iconNode;
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
this.syncLoadData(this.props);
}
}, {
key: "isSelectable",
value: function isSelectable() {
var selectable = this.props.selectable;
var treeSelectable = this.props.context.selectable;
// Ignore when selectable is undefined or null
if (typeof selectable === 'boolean') {
return selectable;
}
return treeSelectable;
// Title
var titleNode;
if (typeof title === 'function') {
titleNode = title(data);
} else if (context.titleRender) {
titleNode = context.titleRender(data);
} else {
titleNode = title;
}
}, {
key: "render",
value:
// =========================== Render ===========================
function render() {
var _classNames;
var _this$props10 = this.props,
eventKey = _this$props10.eventKey,
className = _this$props10.className,
style = _this$props10.style,
dragOver = _this$props10.dragOver,
dragOverGapTop = _this$props10.dragOverGapTop,
dragOverGapBottom = _this$props10.dragOverGapBottom,
isLeaf = _this$props10.isLeaf,
isStart = _this$props10.isStart,
isEnd = _this$props10.isEnd,
expanded = _this$props10.expanded,
selected = _this$props10.selected,
checked = _this$props10.checked,
halfChecked = _this$props10.halfChecked,
loading = _this$props10.loading,
domRef = _this$props10.domRef,
active = _this$props10.active,
data = _this$props10.data,
onMouseMove = _this$props10.onMouseMove,
selectable = _this$props10.selectable,
otherProps = _objectWithoutProperties(_this$props10, _excluded);
var _this$props$context5 = this.props.context,
prefixCls = _this$props$context5.prefixCls,
filterTreeNode = _this$props$context5.filterTreeNode,
keyEntities = _this$props$context5.keyEntities,
dropContainerKey = _this$props$context5.dropContainerKey,
dropTargetKey = _this$props$context5.dropTargetKey,
draggingNodeKey = _this$props$context5.draggingNodeKey;
var disabled = this.isDisabled();
var dataOrAriaAttributeProps = pickAttrs(otherProps, {
aria: true,
data: true
});
var _ref2 = getEntity(keyEntities, eventKey) || {},
level = _ref2.level;
var isEndNode = isEnd[isEnd.length - 1];
var mergedDraggable = this.isDraggable();
var draggableWithoutDisabled = !disabled && mergedDraggable;
var dragging = draggingNodeKey === eventKey;
var ariaSelected = selectable !== undefined ? {
'aria-selected': !!selectable
} : undefined;
return /*#__PURE__*/React.createElement("div", _extends({
ref: domRef,
role: "treeitem",
"aria-expanded": isLeaf ? undefined : expanded,
className: classNames(className, "".concat(prefixCls, "-treenode"), (_classNames = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_classNames, "".concat(prefixCls, "-treenode-disabled"), disabled), "".concat(prefixCls, "-treenode-switcher-").concat(expanded ? 'open' : 'close'), !isLeaf), "".concat(prefixCls, "-treenode-checkbox-checked"), checked), "".concat(prefixCls, "-treenode-checkbox-indeterminate"), halfChecked), "".concat(prefixCls, "-treenode-selected"), selected), "".concat(prefixCls, "-treenode-loading"), loading), "".concat(prefixCls, "-treenode-active"), active), "".concat(prefixCls, "-treenode-leaf-last"), isEndNode), "".concat(prefixCls, "-treenode-draggable"), mergedDraggable), "dragging", dragging), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_classNames, 'drop-target', dropTargetKey === eventKey), 'drop-container', dropContainerKey === eventKey), 'drag-over', !disabled && dragOver), 'drag-over-gap-top', !disabled && dragOverGapTop), 'drag-over-gap-bottom', !disabled && dragOverGapBottom), 'filter-node', filterTreeNode && filterTreeNode(convertNodePropsToEventData(this.props))))),
style: style
// Draggable config
,
draggable: draggableWithoutDisabled,
onDragStart: draggableWithoutDisabled ? this.onDragStart : undefined
// Drop config
,
onDragEnter: mergedDraggable ? this.onDragEnter : undefined,
onDragOver: mergedDraggable ? this.onDragOver : undefined,
onDragLeave: mergedDraggable ? this.onDragLeave : undefined,
onDrop: mergedDraggable ? this.onDrop : undefined,
onDragEnd: mergedDraggable ? this.onDragEnd : undefined,
onMouseMove: onMouseMove
}, ariaSelected, dataOrAriaAttributeProps), /*#__PURE__*/React.createElement(Indent, {
prefixCls: prefixCls,
level: level,
isStart: isStart,
isEnd: isEnd
}), this.renderDragHandler(), this.renderSwitcher(), this.renderCheckbox(), this.renderSelector());
}
}]);
return InternalTreeNode;
}(React.Component);
var ContextTreeNode = function ContextTreeNode(props) {
return /*#__PURE__*/React.createElement(TreeContext.Consumer, null, function (context) {
return /*#__PURE__*/React.createElement(UnstableContext.Consumer, null, function (unstableContext) {
return /*#__PURE__*/React.createElement(InternalTreeNode, _extends({}, props, {
context: context,
unstableContext: unstableContext
}));
});
return /*#__PURE__*/React.createElement("span", {
ref: selectHandleRef,
title: typeof title === 'string' ? title : '',
className: classNames(wrapClass, "".concat(wrapClass, "-").concat(nodeState || 'normal'), _defineProperty({}, "".concat(context.prefixCls, "-node-selected"), !isDisabled && (selected || dragNodeHighlight))),
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
onContextMenu: onContextMenu,
onClick: onSelectorClick,
onDoubleClick: onSelectorDoubleClick
}, $icon, /*#__PURE__*/React.createElement("span", {
className: "".concat(context.prefixCls, "-title")
}, titleNode), dropIndicatorNode);
}, [context.prefixCls, context.showIcon, props, context.icon, iconNode, context.titleRender, data, nodeState, onMouseEnter, onMouseLeave, onContextMenu, onSelectorClick, onSelectorDoubleClick]);
var dataOrAriaAttributeProps = pickAttrs(otherProps, {
aria: true,
data: true
});
var _ref2 = getEntity(context.keyEntities, eventKey) || {},
level = _ref2.level;
var isEndNode = isEnd[isEnd.length - 1];
var draggableWithoutDisabled = !isDisabled && isDraggable;
var dragging = context.draggingNodeKey === eventKey;
var ariaSelected = selectable !== undefined ? {
'aria-selected': !!selectable
} : undefined;
return /*#__PURE__*/React.createElement("div", _extends({
ref: domRef,
role: "treeitem",
"aria-expanded": isLeaf ? undefined : expanded,
className: classNames(className, "".concat(context.prefixCls, "-treenode"), (_classNames4 = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_classNames4, "".concat(context.prefixCls, "-treenode-disabled"), isDisabled), "".concat(context.prefixCls, "-treenode-switcher-").concat(expanded ? 'open' : 'close'), !isLeaf), "".concat(context.prefixCls, "-treenode-checkbox-checked"), checked), "".concat(context.prefixCls, "-treenode-checkbox-indeterminate"), halfChecked), "".concat(context.prefixCls, "-treenode-selected"), selected), "".concat(context.prefixCls, "-treenode-loading"), loading), "".concat(context.prefixCls, "-treenode-active"), active), "".concat(context.prefixCls, "-treenode-leaf-last"), isEndNode), "".concat(context.prefixCls, "-treenode-draggable"), isDraggable), "dragging", dragging), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_classNames4, 'drop-target', context.dropTargetKey === eventKey), 'drop-container', context.dropContainerKey === eventKey), 'drag-over', !isDisabled && dragOver), 'drag-over-gap-top', !isDisabled && dragOverGapTop), 'drag-over-gap-bottom', !isDisabled && dragOverGapBottom), 'filter-node', (_context$filterTreeNo = context.filterTreeNode) === null || _context$filterTreeNo === void 0 ? void 0 : _context$filterTreeNo.call(context, convertNodePropsToEventData(props))))),
style: style
// Draggable config
,
draggable: draggableWithoutDisabled,
onDragStart: draggableWithoutDisabled ? onDragStart : undefined
// Drop config
,
onDragEnter: isDraggable ? onDragEnter : undefined,
onDragOver: isDraggable ? onDragOver : undefined,
onDragLeave: isDraggable ? onDragLeave : undefined,
onDrop: isDraggable ? onDrop : undefined,
onDragEnd: isDraggable ? onDragEnd : undefined,
onMouseMove: onMouseMove
}, ariaSelected, dataOrAriaAttributeProps), /*#__PURE__*/React.createElement(Indent, {
prefixCls: context.prefixCls,
level: level,
isStart: isStart,
isEnd: isEnd
}), dragHandlerNode, switcherNode, checkboxNode, selectorNode);
};
TreeNode.isTreeNode = 1;
if (process.env.NODE_ENV !== 'production') {
ContextTreeNode.displayName = 'TreeNode';
TreeNode.displayName = 'TreeNode';
}
ContextTreeNode.isTreeNode = 1;
export default ContextTreeNode;
export default TreeNode;

9

es/util.d.ts

@@ -5,3 +5,3 @@ /**

import React from 'react';
import type { BasicDataNode, DataEntity, DataNode, Direction, FlattenNode, Key, KeyEntities, NodeElement, NodeInstance } from './interface';
import type { BasicDataNode, DataEntity, DataNode, Direction, FlattenNode, Key, KeyEntities, NodeElement, TreeNodeProps } from './interface';
import type { AllowDrop, TreeProps } from './Tree';

@@ -15,3 +15,3 @@ export { getPosition, isTreeNode } from './utils/treeUtil';

export declare function isFirstChild<TreeDataType extends BasicDataNode = DataNode>(treeNodeEntity: DataEntity<TreeDataType>): boolean;
export declare function calcDropPosition<TreeDataType extends BasicDataNode = DataNode>(event: React.MouseEvent, dragNode: NodeInstance<TreeDataType>, targetNode: NodeInstance<TreeDataType>, indent: number, startMousePosition: {
export declare function calcDropPosition<TreeDataType extends BasicDataNode = DataNode>(event: React.MouseEvent, dragNodeProps: TreeNodeProps<TreeDataType>, targetNodeProps: TreeNodeProps<TreeDataType>, indent: number, startMousePosition: {
x: number;

@@ -44,3 +44,6 @@ y: number;

halfChecked: Key[];
}): any;
}): {
checkedKeys?: Key[];
halfCheckedKeys?: Key[];
};
/**

@@ -47,0 +50,0 @@ * If user use `autoExpandParent` we should get the list of parent node

8

es/util.js

@@ -65,3 +65,3 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";

// Only used when drag, not affect SSR.
export function calcDropPosition(event, dragNode, targetNode, indent, startMousePosition, allowDrop, flattenedNodes, keyEntities, expandKeys, direction) {
export function calcDropPosition(event, dragNodeProps, targetNodeProps, indent, startMousePosition, allowDrop, flattenedNodes, keyEntities, expandKeys, direction) {
var _abstractDropNodeEnti;

@@ -84,3 +84,3 @@ var clientX = event.clientX,

// find abstract drop node by horizontal offset
var abstractDropNodeEntity = getEntity(keyEntities, targetNode.props.eventKey);
var abstractDropNodeEntity = getEntity(keyEntities, targetNodeProps.eventKey);
if (clientY < top + height / 2) {

@@ -112,3 +112,3 @@ // first half, set abstract drop node to previous node

}
var abstractDragDataNode = dragNode.props.data;
var abstractDragDataNode = dragNodeProps.data;
var abstractDropDataNode = abstractDropNodeEntity.node;

@@ -120,3 +120,3 @@ var dropAllowed = true;

dropPosition: -1
}) && abstractDropNodeEntity.key === targetNode.props.eventKey) {
}) && abstractDropNodeEntity.key === targetNodeProps.eventKey) {
// first half of first node in first level

@@ -123,0 +123,0 @@ dropPosition = -1;

12

lib/contextTypes.d.ts

@@ -6,3 +6,3 @@ /**

import * as React from 'react';
import type { BasicDataNode, DataNode, Direction, EventDataNode, IconType, Key, KeyEntities, NodeInstance } from './interface';
import type { BasicDataNode, DataNode, Direction, EventDataNode, IconType, Key, KeyEntities, TreeNodeProps } from './interface';
import type { DraggableConfig } from './Tree';

@@ -18,3 +18,3 @@ export type NodeMouseEventParams<TreeDataType extends BasicDataNode = DataNode, T = HTMLSpanElement> = {

export type NodeMouseEventHandler<TreeDataType extends BasicDataNode = DataNode, T = HTMLSpanElement> = (e: React.MouseEvent<T>, node: EventDataNode<TreeDataType>) => void;
export type NodeDragEventHandler<TreeDataType extends BasicDataNode = DataNode, T = HTMLDivElement> = (e: React.DragEvent<T>, node: NodeInstance<TreeDataType>, outsideTree?: boolean) => void;
export type NodeDragEventHandler<TreeDataType extends BasicDataNode = DataNode, T = HTMLDivElement> = (e: React.DragEvent<T>, nodeProps: TreeNodeProps<TreeDataType>, outsideTree?: boolean) => void;
export interface TreeContextProps<TreeDataType extends BasicDataNode = DataNode> {

@@ -40,4 +40,4 @@ prefixCls: string;

dropLevelOffset: number;
indent: any;
prefixCls: any;
indent: number;
prefixCls: string;
direction: Direction;

@@ -66,6 +66,6 @@ }) => React.ReactNode;

}
export declare const TreeContext: React.Context<TreeContextProps<any> | null>;
export declare const TreeContext: React.Context<TreeContextProps<any>>;
/** Internal usage, safe to remove. Do not use in prod */
export declare const UnstableContext: React.Context<{
nodeDisabled?: (node: DataNode) => boolean;
nodeDisabled?: (n: DataNode) => boolean;
}>;

14

lib/Tree.d.ts
import * as React from 'react';
import type { NodeDragEventHandler, NodeDragEventParams, NodeMouseEventHandler, NodeMouseEventParams } from './contextTypes';
import type { DropIndicatorProps } from './DropIndicator';
import type { BasicDataNode, DataNode, Direction, EventDataNode, FieldNames, FlattenNode, IconType, Key, KeyEntities, NodeInstance, SafeKey, ScrollTo } from './interface';
import type { BasicDataNode, DataNode, Direction, EventDataNode, FieldNames, FlattenNode, IconType, Key, KeyEntities, SafeKey, ScrollTo, TreeNodeProps } from './interface';
import { type NodeListRef } from './NodeList';

@@ -156,3 +156,3 @@ export interface CheckInfo<TreeDataType extends BasicDataNode = DataNode> {

}
declare class Tree<TreeDataType extends DataNode | BasicDataNode = DataNode> extends React.Component<TreeProps<TreeDataType>, TreeState<TreeDataType>> {
declare class Tree<TreeDataType extends DataNode | BasicDataNode = DataNode | BasicDataNode> extends React.Component<TreeProps<TreeDataType>, TreeState<TreeDataType>> {
static defaultProps: {

@@ -178,3 +178,3 @@ prefixCls: string;

};
static TreeNode: React.FC<import("./interface").TreeNodeProps<DataNode>>;
static TreeNode: React.FC<Readonly<TreeNodeProps<DataNode>>>;
destroyed: boolean;

@@ -185,3 +185,3 @@ delayedDragEnterLogic: Record<SafeKey, number>;

dragStartMousePosition: any;
dragNode: NodeInstance<TreeDataType>;
dragNodeProps: TreeNodeProps<TreeDataType>;
currentMouseOverDroppableNodeKey: any;

@@ -202,8 +202,8 @@ listRef: React.RefObject<NodeListRef>;

*/
onNodeDragEnter: (event: React.DragEvent<HTMLDivElement>, node: NodeInstance<TreeDataType>) => void;
onNodeDragOver: (event: React.DragEvent<HTMLDivElement>, node: NodeInstance<TreeDataType>) => void;
onNodeDragEnter: (event: React.DragEvent<HTMLDivElement>, nodeProps: TreeNodeProps<TreeDataType>) => void;
onNodeDragOver: (event: React.DragEvent<HTMLDivElement>, nodeProps: TreeNodeProps<TreeDataType>) => void;
onNodeDragLeave: NodeDragEventHandler<TreeDataType>;
onWindowDragEnd: (event: any) => void;
onNodeDragEnd: NodeDragEventHandler<TreeDataType>;
onNodeDrop: (event: React.DragEvent<HTMLDivElement>, node: any, outsideTree?: boolean) => void;
onNodeDrop: (event: React.DragEvent<HTMLDivElement>, _: TreeNodeProps<TreeDataType>, outsideTree?: boolean) => void;
resetDragState(): void;

@@ -210,0 +210,0 @@ cleanDragState: () => void;

185

lib/Tree.js

@@ -89,6 +89,6 @@ "use strict";

(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "dragStartMousePosition", null);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "dragNode", void 0);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "dragNodeProps", null);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "currentMouseOverDroppableNodeKey", null);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "listRef", /*#__PURE__*/React.createRef());
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onNodeDragStart", function (event, node) {
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onNodeDragStart", function (event, nodeProps) {
var _this$state = _this.state,

@@ -98,4 +98,4 @@ expandedKeys = _this$state.expandedKeys,

var onDragStart = _this.props.onDragStart;
var eventKey = node.props.eventKey;
_this.dragNode = node;
var eventKey = nodeProps.eventKey;
_this.dragNodeProps = nodeProps;
_this.dragStartMousePosition = {

@@ -115,3 +115,3 @@ x: event.clientX,

event: event,
node: (0, _treeUtil.convertNodePropsToEventData)(node.props)
node: (0, _treeUtil.convertNodePropsToEventData)(nodeProps)
});

@@ -126,3 +126,3 @@ });

*/
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onNodeDragEnter", function (event, node) {
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onNodeDragEnter", function (event, nodeProps) {
var _this$state2 = _this.state,

@@ -139,7 +139,4 @@ expandedKeys = _this$state2.expandedKeys,

direction = _this$props.direction;
var _node$props = node.props,
pos = _node$props.pos,
eventKey = _node$props.eventKey;
var _assertThisInitialize = (0, _assertThisInitialized2.default)(_this),
dragNode = _assertThisInitialize.dragNode;
var pos = nodeProps.pos,
eventKey = nodeProps.eventKey;

@@ -150,7 +147,7 @@ // record the key of node which is latest entered, used in dragleave event.

}
if (!dragNode) {
if (!_this.dragNodeProps) {
_this.resetDragState();
return;
}
var _calcDropPosition = (0, _util.calcDropPosition)(event, dragNode, node, indent, _this.dragStartMousePosition, allowDrop, flattenNodes, keyEntities, expandedKeys, direction),
var _calcDropPosition = (0, _util.calcDropPosition)(event, _this.dragNodeProps, nodeProps, indent, _this.dragStartMousePosition, allowDrop, flattenNodes, keyEntities, expandedKeys, direction),
dropPosition = _calcDropPosition.dropPosition,

@@ -165,3 +162,3 @@ dropLevelOffset = _calcDropPosition.dropLevelOffset,

// don't allow drop inside its children
dragChildrenKeys.indexOf(dropTargetKey) !== -1 ||
dragChildrenKeys.includes(dropTargetKey) ||
// don't allow drop when drop is not allowed caculated by calcDropPosition

@@ -180,3 +177,3 @@ !dropAllowed) {

});
if (dragNode.props.eventKey !== node.props.eventKey) {
if (_this.dragNodeProps.eventKey !== nodeProps.eventKey) {
// hoist expand logic here

@@ -188,7 +185,9 @@ // since if logic is on the bottom

_this.delayedDragEnterLogic[pos] = window.setTimeout(function () {
if (_this.state.draggingNodeKey === null) return;
if (_this.state.draggingNodeKey === null) {
return;
}
var newExpandedKeys = (0, _toConsumableArray2.default)(expandedKeys);
var entity = (0, _keyUtil.default)(keyEntities, node.props.eventKey);
var entity = (0, _keyUtil.default)(keyEntities, nodeProps.eventKey);
if (entity && (entity.children || []).length) {
newExpandedKeys = (0, _util.arrAdd)(expandedKeys, node.props.eventKey);
newExpandedKeys = (0, _util.arrAdd)(expandedKeys, nodeProps.eventKey);
}

@@ -199,3 +198,3 @@ if (!_this.props.hasOwnProperty('expandedKeys')) {

onExpand === null || onExpand === void 0 || onExpand(newExpandedKeys, {
node: (0, _treeUtil.convertNodePropsToEventData)(node.props),
node: (0, _treeUtil.convertNodePropsToEventData)(nodeProps),
expanded: true,

@@ -208,3 +207,3 @@ nativeEvent: event.nativeEvent

// Skip if drag node is self
if (dragNode.props.eventKey === dropTargetKey && dropLevelOffset === 0) {
if (_this.dragNodeProps.eventKey === dropTargetKey && dropLevelOffset === 0) {
_this.resetDragState();

@@ -226,7 +225,7 @@ return;

event: event,
node: (0, _treeUtil.convertNodePropsToEventData)(node.props),
node: (0, _treeUtil.convertNodePropsToEventData)(nodeProps),
expandedKeys: expandedKeys
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onNodeDragOver", function (event, node) {
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onNodeDragOver", function (event, nodeProps) {
var _this$state3 = _this.state,

@@ -242,8 +241,6 @@ dragChildrenKeys = _this$state3.dragChildrenKeys,

direction = _this$props2.direction;
var _assertThisInitialize2 = (0, _assertThisInitialized2.default)(_this),
dragNode = _assertThisInitialize2.dragNode;
if (!dragNode) {
if (!_this.dragNodeProps) {
return;
}
var _calcDropPosition2 = (0, _util.calcDropPosition)(event, dragNode, node, indent, _this.dragStartMousePosition, allowDrop, flattenNodes, keyEntities, expandedKeys, direction),
var _calcDropPosition2 = (0, _util.calcDropPosition)(event, _this.dragNodeProps, nodeProps, indent, _this.dragStartMousePosition, allowDrop, flattenNodes, keyEntities, expandedKeys, direction),
dropPosition = _calcDropPosition2.dropPosition,

@@ -253,6 +250,6 @@ dropLevelOffset = _calcDropPosition2.dropLevelOffset,

dropContainerKey = _calcDropPosition2.dropContainerKey,
dropTargetPos = _calcDropPosition2.dropTargetPos,
dropAllowed = _calcDropPosition2.dropAllowed,
dropTargetPos = _calcDropPosition2.dropTargetPos,
dragOverNodeKey = _calcDropPosition2.dragOverNodeKey;
if (dragChildrenKeys.indexOf(dropTargetKey) !== -1 || !dropAllowed) {
if (dragChildrenKeys.includes(dropTargetKey) || !dropAllowed) {
// don't allow drop inside its children

@@ -265,3 +262,3 @@ // don't allow drop when drop is not allowed calculated by calcDropPosition

if (dragNode.props.eventKey === dropTargetKey && dropLevelOffset === 0) {
if (_this.dragNodeProps.eventKey === dropTargetKey && dropLevelOffset === 0) {
if (!(_this.state.dropPosition === null && _this.state.dropLevelOffset === null && _this.state.dropTargetKey === null && _this.state.dropContainerKey === null && _this.state.dropTargetPos === null && _this.state.dropAllowed === false && _this.state.dragOverNodeKey === null)) {

@@ -283,9 +280,9 @@ _this.resetDragState();

event: event,
node: (0, _treeUtil.convertNodePropsToEventData)(node.props)
node: (0, _treeUtil.convertNodePropsToEventData)(nodeProps)
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onNodeDragLeave", function (event, node) {
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onNodeDragLeave", function (event, nodeProps) {
// if it is outside the droppable area
// currentMouseOverDroppableNodeKey will be updated in dragenter event when into another droppable receiver.
if (_this.currentMouseOverDroppableNodeKey === node.props.eventKey && !event.currentTarget.contains(event.relatedTarget)) {
if (_this.currentMouseOverDroppableNodeKey === nodeProps.eventKey && !event.currentTarget.contains(event.relatedTarget)) {
_this.resetDragState();

@@ -297,3 +294,3 @@ _this.currentMouseOverDroppableNodeKey = null;

event: event,
node: (0, _treeUtil.convertNodePropsToEventData)(node.props)
node: (0, _treeUtil.convertNodePropsToEventData)(nodeProps)
});

@@ -308,3 +305,3 @@ });

// if onNodeDragEnd is called, onWindowDragEnd won't be called since stopPropagation() is called
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onNodeDragEnd", function (event, node) {
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onNodeDragEnd", function (event, nodeProps) {
var onDragEnd = _this.props.onDragEnd;

@@ -317,8 +314,8 @@ _this.setState({

event: event,
node: (0, _treeUtil.convertNodePropsToEventData)(node.props)
node: (0, _treeUtil.convertNodePropsToEventData)(nodeProps)
});
_this.dragNode = null;
_this.dragNodeProps = null;
window.removeEventListener('dragend', _this.onWindowDragEnd);
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onNodeDrop", function (event, node) {
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onNodeDrop", function (event, _) {
var _this$getActiveItem;

@@ -332,3 +329,5 @@ var outsideTree = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;

dropAllowed = _this$state4.dropAllowed;
if (!dropAllowed) return;
if (!dropAllowed) {
return;
}
var onDrop = _this.props.onDrop;

@@ -344,3 +343,3 @@ _this.setState({

});
var dropToChild = dragChildrenKeys.indexOf(dropTargetKey) !== -1;
var dropToChild = dragChildrenKeys.includes(dropTargetKey);
(0, _warning.default)(!dropToChild, "Can not drop to dragNode's children node. This is a bug of rc-tree. Please report an issue.");

@@ -351,4 +350,4 @@ var posArr = (0, _util.posToArr)(dropTargetPos);

node: (0, _treeUtil.convertNodePropsToEventData)(abstractDropNodeProps),
dragNode: _this.dragNode ? (0, _treeUtil.convertNodePropsToEventData)(_this.dragNode.props) : null,
dragNodesKeys: [_this.dragNode.props.eventKey].concat(dragChildrenKeys),
dragNode: _this.dragNodeProps ? (0, _treeUtil.convertNodePropsToEventData)(_this.dragNodeProps) : null,
dragNodesKeys: [_this.dragNodeProps.eventKey].concat(dragChildrenKeys),
dropToGap: dropPosition !== 0,

@@ -360,3 +359,3 @@ dropPosition: dropPosition + Number(posArr[posArr.length - 1])

}
_this.dragNode = null;
_this.dragNodeProps = null;
});

@@ -440,7 +439,4 @@ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "cleanDragState", function () {

var entity = (0, _keyUtil.default)(keyEntities, selectedKey);
if (!entity) return null;
return entity.node;
}).filter(function (node) {
return node;
});
return entity ? entity.node : null;
}).filter(Boolean);
_this.setUncontrolledState({

@@ -484,5 +480,3 @@ selectedKeys: selectedKeys

return (0, _keyUtil.default)(keyEntities, checkedKey);
}).filter(function (entity) {
return entity;
}).map(function (entity) {
}).filter(Boolean).map(function (entity) {
return entity.node;

@@ -555,3 +549,3 @@ });

onLoad = _this$props7.onLoad;
if (!loadData || loadedKeys.indexOf(key) !== -1 || loadingKeys.indexOf(key) !== -1) {
if (!loadData || loadedKeys.includes(key) || loadingKeys.includes(key)) {
return null;

@@ -707,10 +701,6 @@ }

// Update selected keys
var index = expandedKeys.indexOf(key);
var certain = expandedKeys.includes(key);
var targetExpanded = !expanded;
(0, _warning.default)(expanded && index !== -1 || !expanded && index === -1, 'Expand state not sync with index check');
if (targetExpanded) {
expandedKeys = (0, _util.arrAdd)(expandedKeys, key);
} else {
expandedKeys = (0, _util.arrDel)(expandedKeys, key);
}
(0, _warning.default)(expanded && certain || !expanded && !certain, 'Expand state not sync with index check');
expandedKeys = targetExpanded ? (0, _util.arrAdd)(expandedKeys, key) : (0, _util.arrDel)(expandedKeys, key);
_this.setExpandedKeys(expandedKeys);

@@ -1024,42 +1014,43 @@ onExpand === null || onExpand === void 0 || onExpand(expandedKeys, {

}
var contextValue = {
prefixCls: prefixCls,
selectable: selectable,
showIcon: showIcon,
icon: icon,
switcherIcon: switcherIcon,
draggable: draggableConfig,
draggingNodeKey: draggingNodeKey,
checkable: checkable,
checkStrictly: checkStrictly,
disabled: disabled,
keyEntities: keyEntities,
dropLevelOffset: dropLevelOffset,
dropContainerKey: dropContainerKey,
dropTargetKey: dropTargetKey,
dropPosition: dropPosition,
dragOverNodeKey: dragOverNodeKey,
indent: indent,
direction: direction,
dropIndicatorRender: dropIndicatorRender,
loadData: loadData,
filterTreeNode: filterTreeNode,
titleRender: titleRender,
onNodeClick: this.onNodeClick,
onNodeDoubleClick: this.onNodeDoubleClick,
onNodeExpand: this.onNodeExpand,
onNodeSelect: this.onNodeSelect,
onNodeCheck: this.onNodeCheck,
onNodeLoad: this.onNodeLoad,
onNodeMouseEnter: this.onNodeMouseEnter,
onNodeMouseLeave: this.onNodeMouseLeave,
onNodeContextMenu: this.onNodeContextMenu,
onNodeDragStart: this.onNodeDragStart,
onNodeDragEnter: this.onNodeDragEnter,
onNodeDragOver: this.onNodeDragOver,
onNodeDragLeave: this.onNodeDragLeave,
onNodeDragEnd: this.onNodeDragEnd,
onNodeDrop: this.onNodeDrop
};
return /*#__PURE__*/React.createElement(_contextTypes.TreeContext.Provider, {
value: {
prefixCls: prefixCls,
selectable: selectable,
showIcon: showIcon,
icon: icon,
switcherIcon: switcherIcon,
draggable: draggableConfig,
draggingNodeKey: draggingNodeKey,
checkable: checkable,
checkStrictly: checkStrictly,
disabled: disabled,
keyEntities: keyEntities,
dropLevelOffset: dropLevelOffset,
dropContainerKey: dropContainerKey,
dropTargetKey: dropTargetKey,
dropPosition: dropPosition,
dragOverNodeKey: dragOverNodeKey,
indent: indent,
direction: direction,
dropIndicatorRender: dropIndicatorRender,
loadData: loadData,
filterTreeNode: filterTreeNode,
titleRender: titleRender,
onNodeClick: this.onNodeClick,
onNodeDoubleClick: this.onNodeDoubleClick,
onNodeExpand: this.onNodeExpand,
onNodeSelect: this.onNodeSelect,
onNodeCheck: this.onNodeCheck,
onNodeLoad: this.onNodeLoad,
onNodeMouseEnter: this.onNodeMouseEnter,
onNodeMouseLeave: this.onNodeMouseLeave,
onNodeContextMenu: this.onNodeContextMenu,
onNodeDragStart: this.onNodeDragStart,
onNodeDragEnter: this.onNodeDragEnter,
onNodeDragOver: this.onNodeDragOver,
onNodeDragLeave: this.onNodeDragLeave,
onNodeDragEnd: this.onNodeDragEnd,
onNodeDrop: this.onNodeDrop
}
value: contextValue
}, /*#__PURE__*/React.createElement("div", {

@@ -1066,0 +1057,0 @@ className: (0, _classnames.default)(prefixCls, className, rootClassName, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-show-line"), showLine), "".concat(prefixCls, "-focused"), focused), "".concat(prefixCls, "-active-focused"), activeKey !== null)),

14

lib/TreeNode.d.ts

@@ -1,13 +0,5 @@

import * as React from 'react';
import { UnstableContext, type TreeContextProps } from './contextTypes';
import React from 'react';
import type { TreeNodeProps } from './interface';
export type { TreeNodeProps } from './interface';
export interface InternalTreeNodeProps extends TreeNodeProps {
context?: TreeContextProps;
unstableContext?: React.ContextType<typeof UnstableContext>;
}
export interface TreeNodeState {
dragNodeHighlight: boolean;
}
declare const ContextTreeNode: React.FC<TreeNodeProps>;
export default ContextTreeNode;
declare const TreeNode: React.FC<Readonly<TreeNodeProps>>;
export default TreeNode;

787

lib/TreeNode.js
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {

@@ -10,13 +9,9 @@ value: true

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _classnames = _interopRequireDefault(require("classnames"));
var _pickAttrs = _interopRequireDefault(require("rc-util/lib/pickAttrs"));
var React = _interopRequireWildcard(require("react"));
var _react = _interopRequireDefault(require("react"));
var _contextTypes = require("./contextTypes");

@@ -26,465 +21,351 @@ var _Indent = _interopRequireDefault(require("./Indent"));

var _treeUtil = require("./utils/treeUtil");
var _excluded = ["eventKey", "className", "style", "dragOver", "dragOverGapTop", "dragOverGapBottom", "isLeaf", "isStart", "isEnd", "expanded", "selected", "checked", "halfChecked", "loading", "domRef", "active", "data", "onMouseMove", "selectable"]; // @ts-ignore
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
var _excluded = ["eventKey", "className", "style", "dragOver", "dragOverGapTop", "dragOverGapBottom", "isLeaf", "isStart", "isEnd", "expanded", "selected", "checked", "halfChecked", "loading", "domRef", "active", "data", "onMouseMove", "selectable"];
var ICON_OPEN = 'open';
var ICON_CLOSE = 'close';
var defaultTitle = '---';
var InternalTreeNode = /*#__PURE__*/function (_React$Component) {
(0, _inherits2.default)(InternalTreeNode, _React$Component);
var _super = (0, _createSuper2.default)(InternalTreeNode);
function InternalTreeNode() {
var _this;
(0, _classCallCheck2.default)(this, InternalTreeNode);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
var TreeNode = function TreeNode(props) {
var _context$filterTreeNo, _classNames4;
var eventKey = props.eventKey,
className = props.className,
style = props.style,
dragOver = props.dragOver,
dragOverGapTop = props.dragOverGapTop,
dragOverGapBottom = props.dragOverGapBottom,
isLeaf = props.isLeaf,
isStart = props.isStart,
isEnd = props.isEnd,
expanded = props.expanded,
selected = props.selected,
checked = props.checked,
halfChecked = props.halfChecked,
loading = props.loading,
domRef = props.domRef,
active = props.active,
data = props.data,
onMouseMove = props.onMouseMove,
selectable = props.selectable,
otherProps = (0, _objectWithoutProperties2.default)(props, _excluded);
var context = _react.default.useContext(_contextTypes.TreeContext);
var unstableContext = _react.default.useContext(_contextTypes.UnstableContext);
var selectHandleRef = _react.default.useRef(null);
var _React$useState = _react.default.useState(false),
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
dragNodeHighlight = _React$useState2[0],
setDragNodeHighlight = _React$useState2[1];
// ======= State: Disabled State =======
var isDisabled = _react.default.useMemo(function () {
var _unstableContext$node;
return !!(context.disabled || props.disabled || (_unstableContext$node = unstableContext.nodeDisabled) !== null && _unstableContext$node !== void 0 && _unstableContext$node.call(unstableContext, data));
}, [context.disabled, props.disabled, unstableContext.nodeDisabled, data]);
var isCheckable = _react.default.useMemo(function () {
// Return false if tree or treeNode is not checkable
if (!context.checkable || props.checkable === false) {
return false;
}
_this = _super.call.apply(_super, [this].concat(args));
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
dragNodeHighlight: false
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "selectHandle", void 0);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "cacheIndent", void 0);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSelectorClick", function (e) {
// Click trigger before select/check operation
var onNodeClick = _this.props.context.onNodeClick;
onNodeClick(e, (0, _treeUtil.convertNodePropsToEventData)(_this.props));
if (_this.isSelectable()) {
_this.onSelect(e);
} else {
_this.onCheck(e);
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSelectorDoubleClick", function (e) {
var onNodeDoubleClick = _this.props.context.onNodeDoubleClick;
onNodeDoubleClick(e, (0, _treeUtil.convertNodePropsToEventData)(_this.props));
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSelect", function (e) {
if (_this.isDisabled()) return;
var onNodeSelect = _this.props.context.onNodeSelect;
onNodeSelect(e, (0, _treeUtil.convertNodePropsToEventData)(_this.props));
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCheck", function (e) {
if (_this.isDisabled()) return;
var _this$props = _this.props,
disableCheckbox = _this$props.disableCheckbox,
checked = _this$props.checked;
var onNodeCheck = _this.props.context.onNodeCheck;
if (!_this.isCheckable() || disableCheckbox) return;
var targetChecked = !checked;
onNodeCheck(e, (0, _treeUtil.convertNodePropsToEventData)(_this.props), targetChecked);
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseEnter", function (e) {
var onNodeMouseEnter = _this.props.context.onNodeMouseEnter;
onNodeMouseEnter(e, (0, _treeUtil.convertNodePropsToEventData)(_this.props));
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseLeave", function (e) {
var onNodeMouseLeave = _this.props.context.onNodeMouseLeave;
onNodeMouseLeave(e, (0, _treeUtil.convertNodePropsToEventData)(_this.props));
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onContextMenu", function (e) {
var onNodeContextMenu = _this.props.context.onNodeContextMenu;
onNodeContextMenu(e, (0, _treeUtil.convertNodePropsToEventData)(_this.props));
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onDragStart", function (e) {
var onNodeDragStart = _this.props.context.onNodeDragStart;
e.stopPropagation();
_this.setState({
dragNodeHighlight: true
});
onNodeDragStart(e, (0, _assertThisInitialized2.default)(_this));
try {
// ie throw error
// firefox-need-it
e.dataTransfer.setData('text/plain', '');
} catch (error) {
// empty
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onDragEnter", function (e) {
var onNodeDragEnter = _this.props.context.onNodeDragEnter;
e.preventDefault();
e.stopPropagation();
onNodeDragEnter(e, (0, _assertThisInitialized2.default)(_this));
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onDragOver", function (e) {
var onNodeDragOver = _this.props.context.onNodeDragOver;
e.preventDefault();
e.stopPropagation();
onNodeDragOver(e, (0, _assertThisInitialized2.default)(_this));
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onDragLeave", function (e) {
var onNodeDragLeave = _this.props.context.onNodeDragLeave;
e.stopPropagation();
onNodeDragLeave(e, (0, _assertThisInitialized2.default)(_this));
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onDragEnd", function (e) {
var onNodeDragEnd = _this.props.context.onNodeDragEnd;
e.stopPropagation();
_this.setState({
dragNodeHighlight: false
});
onNodeDragEnd(e, (0, _assertThisInitialized2.default)(_this));
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onDrop", function (e) {
var onNodeDrop = _this.props.context.onNodeDrop;
e.preventDefault();
e.stopPropagation();
_this.setState({
dragNodeHighlight: false
});
onNodeDrop(e, (0, _assertThisInitialized2.default)(_this));
});
// Disabled item still can be switch
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onExpand", function (e) {
var _this$props2 = _this.props,
loading = _this$props2.loading,
onNodeExpand = _this$props2.context.onNodeExpand;
if (loading) return;
onNodeExpand(e, (0, _treeUtil.convertNodePropsToEventData)(_this.props));
});
// Drag usage
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setSelectHandle", function (node) {
_this.selectHandle = node;
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getNodeState", function () {
var expanded = _this.props.expanded;
if (_this.isLeaf()) {
return null;
}
return expanded ? ICON_OPEN : ICON_CLOSE;
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hasChildren", function () {
var eventKey = _this.props.eventKey;
var keyEntities = _this.props.context.keyEntities;
var _ref = (0, _keyUtil.default)(keyEntities, eventKey) || {},
children = _ref.children;
return !!(children || []).length;
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isLeaf", function () {
var _this$props3 = _this.props,
isLeaf = _this$props3.isLeaf,
loaded = _this$props3.loaded;
var loadData = _this.props.context.loadData;
var hasChildren = _this.hasChildren();
if (isLeaf === false) {
return false;
}
return isLeaf || !loadData && !hasChildren || loadData && loaded && !hasChildren;
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isDisabled", function () {
var _this$props4 = _this.props,
disabled = _this$props4.disabled,
data = _this$props4.data;
var _this$props5 = _this.props,
treeDisabled = _this$props5.context.disabled,
nodeDisabled = _this$props5.unstableContext.nodeDisabled;
return !!(treeDisabled || disabled || nodeDisabled && nodeDisabled(data));
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isCheckable", function () {
var checkable = _this.props.checkable;
var treeCheckable = _this.props.context.checkable;
return context.checkable;
}, [context.checkable, props.checkable]);
// Return false if tree or treeNode is not checkable
if (!treeCheckable || checkable === false) return false;
return treeCheckable;
});
// Load data to avoid default expanded tree without data
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "syncLoadData", function (props) {
var expanded = props.expanded,
loading = props.loading,
loaded = props.loaded;
var _this$props$context = _this.props.context,
loadData = _this$props$context.loadData,
onNodeLoad = _this$props$context.onNodeLoad;
if (loading) {
return;
}
// ======= Event Handlers: Selection and Check =======
var onSelect = function onSelect(e) {
if (isDisabled) {
return;
}
context.onNodeSelect(e, (0, _treeUtil.convertNodePropsToEventData)(props));
};
var onCheck = function onCheck(e) {
if (isDisabled) {
return;
}
if (!isCheckable || props.disableCheckbox) {
return;
}
context.onNodeCheck(e, (0, _treeUtil.convertNodePropsToEventData)(props), !checked);
};
// read from state to avoid loadData at same time
if (loadData && expanded && !_this.isLeaf() && !loaded) {
// We needn't reload data when has children in sync logic
// It's only needed in node expanded
onNodeLoad((0, _treeUtil.convertNodePropsToEventData)(_this.props));
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isDraggable", function () {
var _this$props6 = _this.props,
data = _this$props6.data,
draggable = _this$props6.context.draggable;
return !!(draggable && (!draggable.nodeDraggable || draggable.nodeDraggable(data)));
});
// ==================== Render: Drag Handler ====================
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderDragHandler", function () {
var _this$props$context2 = _this.props.context,
draggable = _this$props$context2.draggable,
prefixCls = _this$props$context2.prefixCls;
return draggable !== null && draggable !== void 0 && draggable.icon ? /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-draggable-icon")
}, draggable.icon) : null;
});
// ====================== Render: Switcher ======================
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSwitcherIconDom", function (isLeaf) {
var switcherIconFromProps = _this.props.switcherIcon;
var switcherIconFromCtx = _this.props.context.switcherIcon;
var switcherIcon = switcherIconFromProps || switcherIconFromCtx;
// ======= State: Selectable Check =======
var isSelectable = _react.default.useMemo(function () {
// Ignore when selectable is undefined or null
if (typeof selectable === 'boolean') {
return selectable;
}
return context.selectable;
}, [selectable, context.selectable]);
var onSelectorClick = function onSelectorClick(e) {
// Click trigger before select/check operation
context.onNodeClick(e, (0, _treeUtil.convertNodePropsToEventData)(props));
if (isSelectable) {
onSelect(e);
} else {
onCheck(e);
}
};
var onSelectorDoubleClick = function onSelectorDoubleClick(e) {
context.onNodeDoubleClick(e, (0, _treeUtil.convertNodePropsToEventData)(props));
};
var onMouseEnter = function onMouseEnter(e) {
context.onNodeMouseEnter(e, (0, _treeUtil.convertNodePropsToEventData)(props));
};
var onMouseLeave = function onMouseLeave(e) {
context.onNodeMouseLeave(e, (0, _treeUtil.convertNodePropsToEventData)(props));
};
var onContextMenu = function onContextMenu(e) {
context.onNodeContextMenu(e, (0, _treeUtil.convertNodePropsToEventData)(props));
};
// ======= Drag: Drag Enabled =======
var isDraggable = _react.default.useMemo(function () {
return !!(context.draggable && (!context.draggable.nodeDraggable || context.draggable.nodeDraggable(data)));
}, [context.draggable, data]);
// ======= Drag: Drag Event Handlers =======
var onDragStart = function onDragStart(e) {
e.stopPropagation();
setDragNodeHighlight(true);
context.onNodeDragStart(e, props);
try {
// ie throw error
// firefox-need-it
e.dataTransfer.setData('text/plain', '');
} catch (_unused) {
// empty
}
};
var onDragEnter = function onDragEnter(e) {
e.preventDefault();
e.stopPropagation();
context.onNodeDragEnter(e, props);
};
var onDragOver = function onDragOver(e) {
e.preventDefault();
e.stopPropagation();
context.onNodeDragOver(e, props);
};
var onDragLeave = function onDragLeave(e) {
e.stopPropagation();
context.onNodeDragLeave(e, props);
};
var onDragEnd = function onDragEnd(e) {
e.stopPropagation();
setDragNodeHighlight(false);
context.onNodeDragEnd(e, props);
};
var onDrop = function onDrop(e) {
e.preventDefault();
e.stopPropagation();
setDragNodeHighlight(false);
context.onNodeDrop(e, props);
};
// ======= Expand: Node Expansion =======
var onExpand = function onExpand(e) {
if (loading) {
return;
}
context.onNodeExpand(e, (0, _treeUtil.convertNodePropsToEventData)(props));
};
// ======= State: Has Children =======
var hasChildren = _react.default.useMemo(function () {
var _ref = (0, _keyUtil.default)(context.keyEntities, eventKey) || {},
children = _ref.children;
return Boolean((children || []).length);
}, [context.keyEntities, eventKey]);
// ======= State: Leaf Check =======
var memoizedIsLeaf = _react.default.useMemo(function () {
if (isLeaf === false) {
return false;
}
return isLeaf || !context.loadData && !hasChildren || context.loadData && props.loaded && !hasChildren;
}, [isLeaf, context.loadData, hasChildren, props.loaded]);
// Load data to avoid default expanded tree without data
// ============== Effect: Sync Load Data ==============
var syncLoadData = function syncLoadData() {
if (loading) {
return;
}
// read from state to avoid loadData at same time
if (context.loadData && expanded && !memoizedIsLeaf && !props.loaded) {
// We needn't reload data when has children in sync logic
// It's only needed in node expanded
context.onNodeLoad((0, _treeUtil.convertNodePropsToEventData)(props));
}
};
// ============== Effect ==============
_react.default.useEffect(function () {
syncLoadData();
}, [loading, context.loadData, context.onNodeLoad, expanded, memoizedIsLeaf, props]);
// ==================== Render: Drag Handler ====================
var dragHandlerNode = _react.default.useMemo(function () {
var _context$draggable;
if (!((_context$draggable = context.draggable) !== null && _context$draggable !== void 0 && _context$draggable.icon)) {
return null;
}
return /*#__PURE__*/_react.default.createElement("span", {
className: "".concat(context.prefixCls, "-draggable-icon")
}, context.draggable.icon);
}, [context.draggable]);
// ====================== Render: Switcher ======================
var renderSwitcherIconDom = function renderSwitcherIconDom(isInternalLeaf) {
var switcherIcon = props.switcherIcon || context.switcherIcon;
// if switcherIconDom is null, no render switcher span
if (typeof switcherIcon === 'function') {
return switcherIcon((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
isLeaf: isInternalLeaf
}));
}
return switcherIcon;
};
// Switcher
var switcherNode = _react.default.useMemo(function () {
if (memoizedIsLeaf) {
// if switcherIconDom is null, no render switcher span
if (typeof switcherIcon === 'function') {
return switcherIcon((0, _objectSpread2.default)((0, _objectSpread2.default)({}, _this.props), {}, {
isLeaf: isLeaf
}));
}
return switcherIcon;
});
// Switcher
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSwitcher", function () {
var expanded = _this.props.expanded;
var prefixCls = _this.props.context.prefixCls;
if (_this.isLeaf()) {
// if switcherIconDom is null, no render switcher span
var _switcherIconDom = _this.renderSwitcherIconDom(true);
return _switcherIconDom !== false ? /*#__PURE__*/React.createElement("span", {
className: (0, _classnames.default)("".concat(prefixCls, "-switcher"), "".concat(prefixCls, "-switcher-noop"))
}, _switcherIconDom) : null;
}
var switcherCls = (0, _classnames.default)("".concat(prefixCls, "-switcher"), "".concat(prefixCls, "-switcher_").concat(expanded ? ICON_OPEN : ICON_CLOSE));
var switcherIconDom = _this.renderSwitcherIconDom(false);
return switcherIconDom !== false ? /*#__PURE__*/React.createElement("span", {
onClick: _this.onExpand,
className: switcherCls
}, switcherIconDom) : null;
});
// ====================== Render: Checkbox ======================
// Checkbox
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderCheckbox", function () {
var _this$props7 = _this.props,
checked = _this$props7.checked,
halfChecked = _this$props7.halfChecked,
disableCheckbox = _this$props7.disableCheckbox,
title = _this$props7.title;
var prefixCls = _this.props.context.prefixCls;
var disabled = _this.isDisabled();
var checkable = _this.isCheckable();
if (!checkable) return null;
var _switcherIconDom = renderSwitcherIconDom(true);
return _switcherIconDom !== false ? /*#__PURE__*/_react.default.createElement("span", {
className: (0, _classnames.default)("".concat(context.prefixCls, "-switcher"), "".concat(context.prefixCls, "-switcher-noop"))
}, _switcherIconDom) : null;
}
var switcherIconDom = renderSwitcherIconDom(false);
return switcherIconDom !== false ? /*#__PURE__*/_react.default.createElement("span", {
onClick: onExpand,
className: (0, _classnames.default)("".concat(context.prefixCls, "-switcher"), "".concat(context.prefixCls, "-switcher_").concat(expanded ? ICON_OPEN : ICON_CLOSE))
}, switcherIconDom) : null;
}, [context.prefixCls, expanded, memoizedIsLeaf, props.switcherIcon, context.switcherIcon]);
// [Legacy] Custom element should be separate with `checkable` in future
var $custom = typeof checkable !== 'boolean' ? checkable : null;
return /*#__PURE__*/React.createElement("span", {
className: (0, _classnames.default)("".concat(prefixCls, "-checkbox"), checked && "".concat(prefixCls, "-checkbox-checked"), !checked && halfChecked && "".concat(prefixCls, "-checkbox-indeterminate"), (disabled || disableCheckbox) && "".concat(prefixCls, "-checkbox-disabled")),
onClick: _this.onCheck,
role: "checkbox",
"aria-checked": halfChecked ? 'mixed' : checked,
"aria-disabled": disabled || disableCheckbox,
"aria-label": "Select ".concat(typeof title === 'string' ? title : 'tree node')
}, $custom);
});
// ==================== Render: Title + Icon ====================
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderIcon", function () {
var loading = _this.props.loading;
var prefixCls = _this.props.context.prefixCls;
return /*#__PURE__*/React.createElement("span", {
className: (0, _classnames.default)("".concat(prefixCls, "-iconEle"), "".concat(prefixCls, "-icon__").concat(_this.getNodeState() || 'docu'), loading && "".concat(prefixCls, "-icon_loading"))
});
});
// Icon + Title
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSelector", function () {
var dragNodeHighlight = _this.state.dragNodeHighlight;
var _this$props8 = _this.props,
_this$props8$title = _this$props8.title,
title = _this$props8$title === void 0 ? defaultTitle : _this$props8$title,
selected = _this$props8.selected,
icon = _this$props8.icon,
loading = _this$props8.loading,
data = _this$props8.data;
var _this$props$context3 = _this.props.context,
prefixCls = _this$props$context3.prefixCls,
showIcon = _this$props$context3.showIcon,
treeIcon = _this$props$context3.icon,
loadData = _this$props$context3.loadData,
titleRender = _this$props$context3.titleRender;
var disabled = _this.isDisabled();
var wrapClass = "".concat(prefixCls, "-node-content-wrapper");
// ====================== Checkbox ======================
var checkboxNode = _react.default.useMemo(function () {
if (!isCheckable) {
return null;
}
// Icon - Still show loading icon when loading without showIcon
var $icon;
if (showIcon) {
var currentIcon = icon || treeIcon;
$icon = currentIcon ? /*#__PURE__*/React.createElement("span", {
className: (0, _classnames.default)("".concat(prefixCls, "-iconEle"), "".concat(prefixCls, "-icon__customize"))
}, typeof currentIcon === 'function' ? currentIcon(_this.props) : currentIcon) : _this.renderIcon();
} else if (loadData && loading) {
$icon = _this.renderIcon();
}
// [Legacy] Custom element should be separate with `checkable` in future
var $custom = typeof isCheckable !== 'boolean' ? isCheckable : null;
return /*#__PURE__*/_react.default.createElement("span", {
className: (0, _classnames.default)("".concat(context.prefixCls, "-checkbox"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(context.prefixCls, "-checkbox-checked"), checked), "".concat(context.prefixCls, "-checkbox-indeterminate"), !checked && halfChecked), "".concat(context.prefixCls, "-checkbox-disabled"), isDisabled || props.disableCheckbox)),
onClick: onCheck,
role: "checkbox",
"aria-checked": halfChecked ? 'mixed' : checked,
"aria-disabled": isDisabled || props.disableCheckbox,
"aria-label": "Select ".concat(typeof props.title === 'string' ? props.title : 'tree node')
}, $custom);
}, [isCheckable, checked, halfChecked, isDisabled, props.disableCheckbox, props.title]);
// Title
var titleNode;
if (typeof title === 'function') {
titleNode = title(data);
} else if (titleRender) {
titleNode = titleRender(data);
} else {
titleNode = title;
}
var $title = /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-title")
}, titleNode);
return /*#__PURE__*/React.createElement("span", {
ref: _this.setSelectHandle,
title: typeof title === 'string' ? title : '',
className: (0, _classnames.default)("".concat(wrapClass), "".concat(wrapClass, "-").concat(_this.getNodeState() || 'normal'), !disabled && (selected || dragNodeHighlight) && "".concat(prefixCls, "-node-selected")),
onMouseEnter: _this.onMouseEnter,
onMouseLeave: _this.onMouseLeave,
onContextMenu: _this.onContextMenu,
onClick: _this.onSelectorClick,
onDoubleClick: _this.onSelectorDoubleClick
}, $icon, $title, _this.renderDropIndicator());
// ============== State: Node State (Open/Close) ==============
var nodeState = _react.default.useMemo(function () {
if (memoizedIsLeaf) {
return null;
}
return expanded ? ICON_OPEN : ICON_CLOSE;
}, [memoizedIsLeaf, expanded]);
// ==================== Render: Title + Icon ====================
var iconNode = _react.default.useMemo(function () {
return /*#__PURE__*/_react.default.createElement("span", {
className: (0, _classnames.default)("".concat(context.prefixCls, "-iconEle"), "".concat(context.prefixCls, "-icon__").concat(nodeState || 'docu'), (0, _defineProperty2.default)({}, "".concat(context.prefixCls, "-icon_loading"), loading))
});
// =================== Render: Drop Indicator ===================
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderDropIndicator", function () {
var _this$props9 = _this.props,
disabled = _this$props9.disabled,
eventKey = _this$props9.eventKey;
var _this$props$context4 = _this.props.context,
draggable = _this$props$context4.draggable,
dropLevelOffset = _this$props$context4.dropLevelOffset,
dropPosition = _this$props$context4.dropPosition,
prefixCls = _this$props$context4.prefixCls,
indent = _this$props$context4.indent,
dropIndicatorRender = _this$props$context4.dropIndicatorRender,
dragOverNodeKey = _this$props$context4.dragOverNodeKey,
direction = _this$props$context4.direction;
var rootDraggable = !!draggable;
// allowDrop is calculated in Tree.tsx, there is no need for calc it here
var showIndicator = !disabled && rootDraggable && dragOverNodeKey === eventKey;
}, [context.prefixCls, nodeState, loading]);
// This is a hot fix which is already fixed in
// https://github.com/react-component/tree/pull/743/files
// But some case need break point so we hack on this
// ref https://github.com/ant-design/ant-design/issues/43493
var mergedIndent = indent !== null && indent !== void 0 ? indent : _this.cacheIndent;
_this.cacheIndent = indent;
return showIndicator ? dropIndicatorRender({
dropPosition: dropPosition,
dropLevelOffset: dropLevelOffset,
indent: mergedIndent,
prefixCls: prefixCls,
direction: direction
}) : null;
// =================== Drop Indicator ===================
var dropIndicatorNode = _react.default.useMemo(function () {
var rootDraggable = Boolean(context.draggable);
// allowDrop is calculated in Tree.tsx, there is no need for calc it here
var showIndicator = !props.disabled && rootDraggable && context.dragOverNodeKey === eventKey;
if (!showIndicator) {
return null;
}
return context.dropIndicatorRender({
dropPosition: context.dropPosition,
dropLevelOffset: context.dropLevelOffset,
indent: context.indent,
prefixCls: context.prefixCls,
direction: context.direction
});
return _this;
}
(0, _createClass2.default)(InternalTreeNode, [{
key: "componentDidMount",
value:
// Isomorphic needn't load data in server side
function componentDidMount() {
this.syncLoadData(this.props);
}, [context.dropPosition, context.dropLevelOffset, context.indent, context.prefixCls, context.direction, context.draggable, context.dragOverNodeKey, context.dropIndicatorRender]);
// Icon + Title
var selectorNode = _react.default.useMemo(function () {
var _props$title = props.title,
title = _props$title === void 0 ? defaultTitle : _props$title;
var wrapClass = "".concat(context.prefixCls, "-node-content-wrapper");
// Icon - Still show loading icon when loading without showIcon
var $icon;
if (context.showIcon) {
var currentIcon = props.icon || context.icon;
$icon = currentIcon ? /*#__PURE__*/_react.default.createElement("span", {
className: (0, _classnames.default)("".concat(context.prefixCls, "-iconEle"), "".concat(context.prefixCls, "-icon__customize"))
}, typeof currentIcon === 'function' ? currentIcon(props) : currentIcon) : iconNode;
} else if (context.loadData && loading) {
$icon = iconNode;
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
this.syncLoadData(this.props);
}
}, {
key: "isSelectable",
value: function isSelectable() {
var selectable = this.props.selectable;
var treeSelectable = this.props.context.selectable;
// Ignore when selectable is undefined or null
if (typeof selectable === 'boolean') {
return selectable;
}
return treeSelectable;
// Title
var titleNode;
if (typeof title === 'function') {
titleNode = title(data);
} else if (context.titleRender) {
titleNode = context.titleRender(data);
} else {
titleNode = title;
}
}, {
key: "render",
value:
// =========================== Render ===========================
function render() {
var _classNames;
var _this$props10 = this.props,
eventKey = _this$props10.eventKey,
className = _this$props10.className,
style = _this$props10.style,
dragOver = _this$props10.dragOver,
dragOverGapTop = _this$props10.dragOverGapTop,
dragOverGapBottom = _this$props10.dragOverGapBottom,
isLeaf = _this$props10.isLeaf,
isStart = _this$props10.isStart,
isEnd = _this$props10.isEnd,
expanded = _this$props10.expanded,
selected = _this$props10.selected,
checked = _this$props10.checked,
halfChecked = _this$props10.halfChecked,
loading = _this$props10.loading,
domRef = _this$props10.domRef,
active = _this$props10.active,
data = _this$props10.data,
onMouseMove = _this$props10.onMouseMove,
selectable = _this$props10.selectable,
otherProps = (0, _objectWithoutProperties2.default)(_this$props10, _excluded);
var _this$props$context5 = this.props.context,
prefixCls = _this$props$context5.prefixCls,
filterTreeNode = _this$props$context5.filterTreeNode,
keyEntities = _this$props$context5.keyEntities,
dropContainerKey = _this$props$context5.dropContainerKey,
dropTargetKey = _this$props$context5.dropTargetKey,
draggingNodeKey = _this$props$context5.draggingNodeKey;
var disabled = this.isDisabled();
var dataOrAriaAttributeProps = (0, _pickAttrs.default)(otherProps, {
aria: true,
data: true
});
var _ref2 = (0, _keyUtil.default)(keyEntities, eventKey) || {},
level = _ref2.level;
var isEndNode = isEnd[isEnd.length - 1];
var mergedDraggable = this.isDraggable();
var draggableWithoutDisabled = !disabled && mergedDraggable;
var dragging = draggingNodeKey === eventKey;
var ariaSelected = selectable !== undefined ? {
'aria-selected': !!selectable
} : undefined;
return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
ref: domRef,
role: "treeitem",
"aria-expanded": isLeaf ? undefined : expanded,
className: (0, _classnames.default)(className, "".concat(prefixCls, "-treenode"), (_classNames = {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-treenode-disabled"), disabled), "".concat(prefixCls, "-treenode-switcher-").concat(expanded ? 'open' : 'close'), !isLeaf), "".concat(prefixCls, "-treenode-checkbox-checked"), checked), "".concat(prefixCls, "-treenode-checkbox-indeterminate"), halfChecked), "".concat(prefixCls, "-treenode-selected"), selected), "".concat(prefixCls, "-treenode-loading"), loading), "".concat(prefixCls, "-treenode-active"), active), "".concat(prefixCls, "-treenode-leaf-last"), isEndNode), "".concat(prefixCls, "-treenode-draggable"), mergedDraggable), "dragging", dragging), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_classNames, 'drop-target', dropTargetKey === eventKey), 'drop-container', dropContainerKey === eventKey), 'drag-over', !disabled && dragOver), 'drag-over-gap-top', !disabled && dragOverGapTop), 'drag-over-gap-bottom', !disabled && dragOverGapBottom), 'filter-node', filterTreeNode && filterTreeNode((0, _treeUtil.convertNodePropsToEventData)(this.props))))),
style: style
// Draggable config
,
draggable: draggableWithoutDisabled,
onDragStart: draggableWithoutDisabled ? this.onDragStart : undefined
// Drop config
,
onDragEnter: mergedDraggable ? this.onDragEnter : undefined,
onDragOver: mergedDraggable ? this.onDragOver : undefined,
onDragLeave: mergedDraggable ? this.onDragLeave : undefined,
onDrop: mergedDraggable ? this.onDrop : undefined,
onDragEnd: mergedDraggable ? this.onDragEnd : undefined,
onMouseMove: onMouseMove
}, ariaSelected, dataOrAriaAttributeProps), /*#__PURE__*/React.createElement(_Indent.default, {
prefixCls: prefixCls,
level: level,
isStart: isStart,
isEnd: isEnd
}), this.renderDragHandler(), this.renderSwitcher(), this.renderCheckbox(), this.renderSelector());
}
}]);
return InternalTreeNode;
}(React.Component);
var ContextTreeNode = function ContextTreeNode(props) {
return /*#__PURE__*/React.createElement(_contextTypes.TreeContext.Consumer, null, function (context) {
return /*#__PURE__*/React.createElement(_contextTypes.UnstableContext.Consumer, null, function (unstableContext) {
return /*#__PURE__*/React.createElement(InternalTreeNode, (0, _extends2.default)({}, props, {
context: context,
unstableContext: unstableContext
}));
});
return /*#__PURE__*/_react.default.createElement("span", {
ref: selectHandleRef,
title: typeof title === 'string' ? title : '',
className: (0, _classnames.default)(wrapClass, "".concat(wrapClass, "-").concat(nodeState || 'normal'), (0, _defineProperty2.default)({}, "".concat(context.prefixCls, "-node-selected"), !isDisabled && (selected || dragNodeHighlight))),
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
onContextMenu: onContextMenu,
onClick: onSelectorClick,
onDoubleClick: onSelectorDoubleClick
}, $icon, /*#__PURE__*/_react.default.createElement("span", {
className: "".concat(context.prefixCls, "-title")
}, titleNode), dropIndicatorNode);
}, [context.prefixCls, context.showIcon, props, context.icon, iconNode, context.titleRender, data, nodeState, onMouseEnter, onMouseLeave, onContextMenu, onSelectorClick, onSelectorDoubleClick]);
var dataOrAriaAttributeProps = (0, _pickAttrs.default)(otherProps, {
aria: true,
data: true
});
var _ref2 = (0, _keyUtil.default)(context.keyEntities, eventKey) || {},
level = _ref2.level;
var isEndNode = isEnd[isEnd.length - 1];
var draggableWithoutDisabled = !isDisabled && isDraggable;
var dragging = context.draggingNodeKey === eventKey;
var ariaSelected = selectable !== undefined ? {
'aria-selected': !!selectable
} : undefined;
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
ref: domRef,
role: "treeitem",
"aria-expanded": isLeaf ? undefined : expanded,
className: (0, _classnames.default)(className, "".concat(context.prefixCls, "-treenode"), (_classNames4 = {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_classNames4, "".concat(context.prefixCls, "-treenode-disabled"), isDisabled), "".concat(context.prefixCls, "-treenode-switcher-").concat(expanded ? 'open' : 'close'), !isLeaf), "".concat(context.prefixCls, "-treenode-checkbox-checked"), checked), "".concat(context.prefixCls, "-treenode-checkbox-indeterminate"), halfChecked), "".concat(context.prefixCls, "-treenode-selected"), selected), "".concat(context.prefixCls, "-treenode-loading"), loading), "".concat(context.prefixCls, "-treenode-active"), active), "".concat(context.prefixCls, "-treenode-leaf-last"), isEndNode), "".concat(context.prefixCls, "-treenode-draggable"), isDraggable), "dragging", dragging), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_classNames4, 'drop-target', context.dropTargetKey === eventKey), 'drop-container', context.dropContainerKey === eventKey), 'drag-over', !isDisabled && dragOver), 'drag-over-gap-top', !isDisabled && dragOverGapTop), 'drag-over-gap-bottom', !isDisabled && dragOverGapBottom), 'filter-node', (_context$filterTreeNo = context.filterTreeNode) === null || _context$filterTreeNo === void 0 ? void 0 : _context$filterTreeNo.call(context, (0, _treeUtil.convertNodePropsToEventData)(props))))),
style: style
// Draggable config
,
draggable: draggableWithoutDisabled,
onDragStart: draggableWithoutDisabled ? onDragStart : undefined
// Drop config
,
onDragEnter: isDraggable ? onDragEnter : undefined,
onDragOver: isDraggable ? onDragOver : undefined,
onDragLeave: isDraggable ? onDragLeave : undefined,
onDrop: isDraggable ? onDrop : undefined,
onDragEnd: isDraggable ? onDragEnd : undefined,
onMouseMove: onMouseMove
}, ariaSelected, dataOrAriaAttributeProps), /*#__PURE__*/_react.default.createElement(_Indent.default, {
prefixCls: context.prefixCls,
level: level,
isStart: isStart,
isEnd: isEnd
}), dragHandlerNode, switcherNode, checkboxNode, selectorNode);
};
TreeNode.isTreeNode = 1;
if (process.env.NODE_ENV !== 'production') {
ContextTreeNode.displayName = 'TreeNode';
TreeNode.displayName = 'TreeNode';
}
ContextTreeNode.isTreeNode = 1;
var _default = exports.default = ContextTreeNode;
var _default = exports.default = TreeNode;

9

lib/util.d.ts

@@ -5,3 +5,3 @@ /**

import React from 'react';
import type { BasicDataNode, DataEntity, DataNode, Direction, FlattenNode, Key, KeyEntities, NodeElement, NodeInstance } from './interface';
import type { BasicDataNode, DataEntity, DataNode, Direction, FlattenNode, Key, KeyEntities, NodeElement, TreeNodeProps } from './interface';
import type { AllowDrop, TreeProps } from './Tree';

@@ -15,3 +15,3 @@ export { getPosition, isTreeNode } from './utils/treeUtil';

export declare function isFirstChild<TreeDataType extends BasicDataNode = DataNode>(treeNodeEntity: DataEntity<TreeDataType>): boolean;
export declare function calcDropPosition<TreeDataType extends BasicDataNode = DataNode>(event: React.MouseEvent, dragNode: NodeInstance<TreeDataType>, targetNode: NodeInstance<TreeDataType>, indent: number, startMousePosition: {
export declare function calcDropPosition<TreeDataType extends BasicDataNode = DataNode>(event: React.MouseEvent, dragNodeProps: TreeNodeProps<TreeDataType>, targetNodeProps: TreeNodeProps<TreeDataType>, indent: number, startMousePosition: {
x: number;

@@ -44,3 +44,6 @@ y: number;

halfChecked: Key[];
}): any;
}): {
checkedKeys?: Key[];
halfCheckedKeys?: Key[];
};
/**

@@ -47,0 +50,0 @@ * If user use `autoExpandParent` we should get the list of parent node

8

lib/util.js

@@ -93,3 +93,3 @@ "use strict";

// Only used when drag, not affect SSR.
function calcDropPosition(event, dragNode, targetNode, indent, startMousePosition, allowDrop, flattenedNodes, keyEntities, expandKeys, direction) {
function calcDropPosition(event, dragNodeProps, targetNodeProps, indent, startMousePosition, allowDrop, flattenedNodes, keyEntities, expandKeys, direction) {
var _abstractDropNodeEnti;

@@ -112,3 +112,3 @@ var clientX = event.clientX,

// find abstract drop node by horizontal offset
var abstractDropNodeEntity = (0, _keyUtil.default)(keyEntities, targetNode.props.eventKey);
var abstractDropNodeEntity = (0, _keyUtil.default)(keyEntities, targetNodeProps.eventKey);
if (clientY < top + height / 2) {

@@ -140,3 +140,3 @@ // first half, set abstract drop node to previous node

}
var abstractDragDataNode = dragNode.props.data;
var abstractDragDataNode = dragNodeProps.data;
var abstractDropDataNode = abstractDropNodeEntity.node;

@@ -148,3 +148,3 @@ var dropAllowed = true;

dropPosition: -1
}) && abstractDropNodeEntity.key === targetNode.props.eventKey) {
}) && abstractDropNodeEntity.key === targetNodeProps.eventKey) {
// first half of first node in first level

@@ -151,0 +151,0 @@ dropPosition = -1;

6

package.json
{
"name": "rc-tree",
"version": "5.12.1",
"version": "5.12.2",
"description": "tree ui component for react",

@@ -74,5 +74,5 @@ "engines": {

"prettier": "^3.3.3",
"rc-dialog": "^8.1.0",
"rc-dialog": "^9.0.0",
"rc-test": "^7.0.15",
"rc-tooltip": "5.x",
"rc-tooltip": "^6.3.2",
"rc-trigger": "^5.0.7",

@@ -79,0 +79,0 @@ "react": "^18.2.0",

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc