1 | import _extends from "@babel/runtime/helpers/esm/extends";
|
2 | import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
3 | import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
4 | import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
5 | import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
6 | import _createClass from "@babel/runtime/helpers/esm/createClass";
|
7 | import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
|
8 | import _inherits from "@babel/runtime/helpers/esm/inherits";
|
9 | import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
10 | var _excluded = ["eventKey", "className", "style", "dragOver", "dragOverGapTop", "dragOverGapBottom", "isLeaf", "isStart", "isEnd", "expanded", "selected", "checked", "halfChecked", "loading", "domRef", "active", "data", "onMouseMove", "selectable"];
|
11 | import * as React from 'react';
|
12 | import classNames from 'classnames';
|
13 | import pickAttrs from "rc-util/es/pickAttrs";
|
14 |
|
15 | import { TreeContext } from './contextTypes';
|
16 | import Indent from './Indent';
|
17 | import { convertNodePropsToEventData } from './utils/treeUtil';
|
18 | var ICON_OPEN = 'open';
|
19 | var ICON_CLOSE = 'close';
|
20 | var defaultTitle = '---';
|
21 | var InternalTreeNode = function (_React$Component) {
|
22 | _inherits(InternalTreeNode, _React$Component);
|
23 | var _super = _createSuper(InternalTreeNode);
|
24 | function InternalTreeNode() {
|
25 | var _this;
|
26 | _classCallCheck(this, InternalTreeNode);
|
27 | for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
28 | args[_key] = arguments[_key];
|
29 | }
|
30 | _this = _super.call.apply(_super, [this].concat(args));
|
31 | _this.state = {
|
32 | dragNodeHighlight: false
|
33 | };
|
34 | _this.selectHandle = void 0;
|
35 | _this.onSelectorClick = function (e) {
|
36 |
|
37 | var onNodeClick = _this.props.context.onNodeClick;
|
38 | onNodeClick(e, convertNodePropsToEventData(_this.props));
|
39 | if (_this.isSelectable()) {
|
40 | _this.onSelect(e);
|
41 | } else {
|
42 | _this.onCheck(e);
|
43 | }
|
44 | };
|
45 | _this.onSelectorDoubleClick = function (e) {
|
46 | var onNodeDoubleClick = _this.props.context.onNodeDoubleClick;
|
47 | onNodeDoubleClick(e, convertNodePropsToEventData(_this.props));
|
48 | };
|
49 | _this.onSelect = function (e) {
|
50 | if (_this.isDisabled()) return;
|
51 | var onNodeSelect = _this.props.context.onNodeSelect;
|
52 | e.preventDefault();
|
53 | onNodeSelect(e, convertNodePropsToEventData(_this.props));
|
54 | };
|
55 | _this.onCheck = function (e) {
|
56 | if (_this.isDisabled()) return;
|
57 | var _this$props = _this.props,
|
58 | disableCheckbox = _this$props.disableCheckbox,
|
59 | checked = _this$props.checked;
|
60 | var onNodeCheck = _this.props.context.onNodeCheck;
|
61 | if (!_this.isCheckable() || disableCheckbox) return;
|
62 | e.preventDefault();
|
63 | var targetChecked = !checked;
|
64 | onNodeCheck(e, convertNodePropsToEventData(_this.props), targetChecked);
|
65 | };
|
66 | _this.onMouseEnter = function (e) {
|
67 | var onNodeMouseEnter = _this.props.context.onNodeMouseEnter;
|
68 | onNodeMouseEnter(e, convertNodePropsToEventData(_this.props));
|
69 | };
|
70 | _this.onMouseLeave = function (e) {
|
71 | var onNodeMouseLeave = _this.props.context.onNodeMouseLeave;
|
72 | onNodeMouseLeave(e, convertNodePropsToEventData(_this.props));
|
73 | };
|
74 | _this.onContextMenu = function (e) {
|
75 | var onNodeContextMenu = _this.props.context.onNodeContextMenu;
|
76 | onNodeContextMenu(e, convertNodePropsToEventData(_this.props));
|
77 | };
|
78 | _this.onDragStart = function (e) {
|
79 | var onNodeDragStart = _this.props.context.onNodeDragStart;
|
80 | e.stopPropagation();
|
81 | _this.setState({
|
82 | dragNodeHighlight: true
|
83 | });
|
84 | onNodeDragStart(e, _assertThisInitialized(_this));
|
85 | try {
|
86 |
|
87 |
|
88 | e.dataTransfer.setData('text/plain', '');
|
89 | } catch (error) {
|
90 |
|
91 | }
|
92 | };
|
93 | _this.onDragEnter = function (e) {
|
94 | var onNodeDragEnter = _this.props.context.onNodeDragEnter;
|
95 | e.preventDefault();
|
96 | e.stopPropagation();
|
97 | onNodeDragEnter(e, _assertThisInitialized(_this));
|
98 | };
|
99 | _this.onDragOver = function (e) {
|
100 | var onNodeDragOver = _this.props.context.onNodeDragOver;
|
101 | e.preventDefault();
|
102 | e.stopPropagation();
|
103 | onNodeDragOver(e, _assertThisInitialized(_this));
|
104 | };
|
105 | _this.onDragLeave = function (e) {
|
106 | var onNodeDragLeave = _this.props.context.onNodeDragLeave;
|
107 | e.stopPropagation();
|
108 | onNodeDragLeave(e, _assertThisInitialized(_this));
|
109 | };
|
110 | _this.onDragEnd = function (e) {
|
111 | var onNodeDragEnd = _this.props.context.onNodeDragEnd;
|
112 | e.stopPropagation();
|
113 | _this.setState({
|
114 | dragNodeHighlight: false
|
115 | });
|
116 | onNodeDragEnd(e, _assertThisInitialized(_this));
|
117 | };
|
118 | _this.onDrop = function (e) {
|
119 | var onNodeDrop = _this.props.context.onNodeDrop;
|
120 | e.preventDefault();
|
121 | e.stopPropagation();
|
122 | _this.setState({
|
123 | dragNodeHighlight: false
|
124 | });
|
125 | onNodeDrop(e, _assertThisInitialized(_this));
|
126 | };
|
127 |
|
128 | _this.onExpand = function (e) {
|
129 | var _this$props2 = _this.props,
|
130 | loading = _this$props2.loading,
|
131 | onNodeExpand = _this$props2.context.onNodeExpand;
|
132 | if (loading) return;
|
133 | onNodeExpand(e, convertNodePropsToEventData(_this.props));
|
134 | };
|
135 |
|
136 | _this.setSelectHandle = function (node) {
|
137 | _this.selectHandle = node;
|
138 | };
|
139 | _this.getNodeState = function () {
|
140 | var expanded = _this.props.expanded;
|
141 | if (_this.isLeaf()) {
|
142 | return null;
|
143 | }
|
144 | return expanded ? ICON_OPEN : ICON_CLOSE;
|
145 | };
|
146 | _this.hasChildren = function () {
|
147 | var eventKey = _this.props.eventKey;
|
148 | var keyEntities = _this.props.context.keyEntities;
|
149 | var _ref = keyEntities[eventKey] || {},
|
150 | children = _ref.children;
|
151 | return !!(children || []).length;
|
152 | };
|
153 | _this.isLeaf = function () {
|
154 | var _this$props3 = _this.props,
|
155 | isLeaf = _this$props3.isLeaf,
|
156 | loaded = _this$props3.loaded;
|
157 | var loadData = _this.props.context.loadData;
|
158 | var hasChildren = _this.hasChildren();
|
159 | if (isLeaf === false) {
|
160 | return false;
|
161 | }
|
162 | return isLeaf || !loadData && !hasChildren || loadData && loaded && !hasChildren;
|
163 | };
|
164 | _this.isDisabled = function () {
|
165 | var disabled = _this.props.disabled;
|
166 | var treeDisabled = _this.props.context.disabled;
|
167 | return !!(treeDisabled || disabled);
|
168 | };
|
169 | _this.isCheckable = function () {
|
170 | var checkable = _this.props.checkable;
|
171 | var treeCheckable = _this.props.context.checkable;
|
172 |
|
173 | if (!treeCheckable || checkable === false) return false;
|
174 | return treeCheckable;
|
175 | };
|
176 |
|
177 | _this.syncLoadData = function (props) {
|
178 | var expanded = props.expanded,
|
179 | loading = props.loading,
|
180 | loaded = props.loaded;
|
181 | var _this$props$context = _this.props.context,
|
182 | loadData = _this$props$context.loadData,
|
183 | onNodeLoad = _this$props$context.onNodeLoad;
|
184 | if (loading) {
|
185 | return;
|
186 | }
|
187 |
|
188 | if (loadData && expanded && !_this.isLeaf()) {
|
189 |
|
190 |
|
191 | if (!_this.hasChildren() && !loaded) {
|
192 | onNodeLoad(convertNodePropsToEventData(_this.props));
|
193 | }
|
194 | }
|
195 | };
|
196 | _this.isDraggable = function () {
|
197 | var _this$props4 = _this.props,
|
198 | data = _this$props4.data,
|
199 | draggable = _this$props4.context.draggable;
|
200 | return !!(draggable && (!draggable.nodeDraggable || draggable.nodeDraggable(data)));
|
201 | };
|
202 |
|
203 | _this.renderDragHandler = function () {
|
204 | var _this$props$context2 = _this.props.context,
|
205 | draggable = _this$props$context2.draggable,
|
206 | prefixCls = _this$props$context2.prefixCls;
|
207 | return (draggable === null || draggable === void 0 ? void 0 : draggable.icon) ? React.createElement("span", {
|
208 | className: "".concat(prefixCls, "-draggable-icon")
|
209 | }, draggable.icon) : null;
|
210 | };
|
211 |
|
212 | _this.renderSwitcherIconDom = function (isLeaf) {
|
213 | var switcherIconFromProps = _this.props.switcherIcon;
|
214 | var switcherIconFromCtx = _this.props.context.switcherIcon;
|
215 | var switcherIcon = switcherIconFromProps || switcherIconFromCtx;
|
216 |
|
217 | if (typeof switcherIcon === 'function') {
|
218 | return switcherIcon(_objectSpread(_objectSpread({}, _this.props), {}, {
|
219 | isLeaf: isLeaf
|
220 | }));
|
221 | }
|
222 | return switcherIcon;
|
223 | };
|
224 |
|
225 | _this.renderSwitcher = function () {
|
226 | var expanded = _this.props.expanded;
|
227 | var prefixCls = _this.props.context.prefixCls;
|
228 | if (_this.isLeaf()) {
|
229 |
|
230 | var _switcherIconDom = _this.renderSwitcherIconDom(true);
|
231 | return _switcherIconDom !== false ? React.createElement("span", {
|
232 | className: classNames("".concat(prefixCls, "-switcher"), "".concat(prefixCls, "-switcher-noop"))
|
233 | }, _switcherIconDom) : null;
|
234 | }
|
235 | var switcherCls = classNames("".concat(prefixCls, "-switcher"), "".concat(prefixCls, "-switcher_").concat(expanded ? ICON_OPEN : ICON_CLOSE));
|
236 | var switcherIconDom = _this.renderSwitcherIconDom(false);
|
237 | return switcherIconDom !== false ? React.createElement("span", {
|
238 | onClick: _this.onExpand,
|
239 | className: switcherCls
|
240 | }, switcherIconDom) : null;
|
241 | };
|
242 |
|
243 |
|
244 | _this.renderCheckbox = function () {
|
245 | var _this$props5 = _this.props,
|
246 | checked = _this$props5.checked,
|
247 | halfChecked = _this$props5.halfChecked,
|
248 | disableCheckbox = _this$props5.disableCheckbox;
|
249 | var prefixCls = _this.props.context.prefixCls;
|
250 | var disabled = _this.isDisabled();
|
251 | var checkable = _this.isCheckable();
|
252 | if (!checkable) return null;
|
253 |
|
254 | var $custom = typeof checkable !== 'boolean' ? checkable : null;
|
255 | return React.createElement("span", {
|
256 | className: classNames("".concat(prefixCls, "-checkbox"), checked && "".concat(prefixCls, "-checkbox-checked"), !checked && halfChecked && "".concat(prefixCls, "-checkbox-indeterminate"), (disabled || disableCheckbox) && "".concat(prefixCls, "-checkbox-disabled")),
|
257 | onClick: _this.onCheck
|
258 | }, $custom);
|
259 | };
|
260 |
|
261 | _this.renderIcon = function () {
|
262 | var loading = _this.props.loading;
|
263 | var prefixCls = _this.props.context.prefixCls;
|
264 | return React.createElement("span", {
|
265 | className: classNames("".concat(prefixCls, "-iconEle"), "".concat(prefixCls, "-icon__").concat(_this.getNodeState() || 'docu'), loading && "".concat(prefixCls, "-icon_loading"))
|
266 | });
|
267 | };
|
268 |
|
269 | _this.renderSelector = function () {
|
270 | var dragNodeHighlight = _this.state.dragNodeHighlight;
|
271 | var _this$props6 = _this.props,
|
272 | _this$props6$title = _this$props6.title,
|
273 | title = _this$props6$title === void 0 ? defaultTitle : _this$props6$title,
|
274 | selected = _this$props6.selected,
|
275 | icon = _this$props6.icon,
|
276 | loading = _this$props6.loading,
|
277 | data = _this$props6.data;
|
278 | var _this$props$context3 = _this.props.context,
|
279 | prefixCls = _this$props$context3.prefixCls,
|
280 | showIcon = _this$props$context3.showIcon,
|
281 | treeIcon = _this$props$context3.icon,
|
282 | loadData = _this$props$context3.loadData,
|
283 | titleRender = _this$props$context3.titleRender;
|
284 | var disabled = _this.isDisabled();
|
285 | var wrapClass = "".concat(prefixCls, "-node-content-wrapper");
|
286 |
|
287 | var $icon;
|
288 | if (showIcon) {
|
289 | var currentIcon = icon || treeIcon;
|
290 | $icon = currentIcon ? React.createElement("span", {
|
291 | className: classNames("".concat(prefixCls, "-iconEle"), "".concat(prefixCls, "-icon__customize"))
|
292 | }, typeof currentIcon === 'function' ? currentIcon(_this.props) : currentIcon) : _this.renderIcon();
|
293 | } else if (loadData && loading) {
|
294 | $icon = _this.renderIcon();
|
295 | }
|
296 |
|
297 | var titleNode;
|
298 | if (typeof title === 'function') {
|
299 | titleNode = title(data);
|
300 | } else if (titleRender) {
|
301 | titleNode = titleRender(data);
|
302 | } else {
|
303 | titleNode = title;
|
304 | }
|
305 | var $title = React.createElement("span", {
|
306 | className: "".concat(prefixCls, "-title")
|
307 | }, titleNode);
|
308 | return React.createElement("span", {
|
309 | ref: _this.setSelectHandle,
|
310 | title: typeof title === 'string' ? title : '',
|
311 | className: classNames("".concat(wrapClass), "".concat(wrapClass, "-").concat(_this.getNodeState() || 'normal'), !disabled && (selected || dragNodeHighlight) && "".concat(prefixCls, "-node-selected")),
|
312 | onMouseEnter: _this.onMouseEnter,
|
313 | onMouseLeave: _this.onMouseLeave,
|
314 | onContextMenu: _this.onContextMenu,
|
315 | onClick: _this.onSelectorClick,
|
316 | onDoubleClick: _this.onSelectorDoubleClick
|
317 | }, $icon, $title, _this.renderDropIndicator());
|
318 | };
|
319 |
|
320 | _this.renderDropIndicator = function () {
|
321 | var _this$props7 = _this.props,
|
322 | disabled = _this$props7.disabled,
|
323 | eventKey = _this$props7.eventKey;
|
324 | var _this$props$context4 = _this.props.context,
|
325 | draggable = _this$props$context4.draggable,
|
326 | dropLevelOffset = _this$props$context4.dropLevelOffset,
|
327 | dropPosition = _this$props$context4.dropPosition,
|
328 | prefixCls = _this$props$context4.prefixCls,
|
329 | indent = _this$props$context4.indent,
|
330 | dropIndicatorRender = _this$props$context4.dropIndicatorRender,
|
331 | dragOverNodeKey = _this$props$context4.dragOverNodeKey,
|
332 | direction = _this$props$context4.direction;
|
333 | var rootDraggable = !!draggable;
|
334 |
|
335 | var showIndicator = !disabled && rootDraggable && dragOverNodeKey === eventKey;
|
336 | return showIndicator ? dropIndicatorRender({
|
337 | dropPosition: dropPosition,
|
338 | dropLevelOffset: dropLevelOffset,
|
339 | indent: indent,
|
340 | prefixCls: prefixCls,
|
341 | direction: direction
|
342 | }) : null;
|
343 | };
|
344 | return _this;
|
345 | }
|
346 | _createClass(InternalTreeNode, [{
|
347 | key: "componentDidMount",
|
348 | value:
|
349 |
|
350 | function componentDidMount() {
|
351 | this.syncLoadData(this.props);
|
352 | }
|
353 | }, {
|
354 | key: "componentDidUpdate",
|
355 | value: function componentDidUpdate() {
|
356 | this.syncLoadData(this.props);
|
357 | }
|
358 | }, {
|
359 | key: "isSelectable",
|
360 | value: function isSelectable() {
|
361 | var selectable = this.props.selectable;
|
362 | var treeSelectable = this.props.context.selectable;
|
363 |
|
364 | if (typeof selectable === 'boolean') {
|
365 | return selectable;
|
366 | }
|
367 | return treeSelectable;
|
368 | }
|
369 | }, {
|
370 | key: "render",
|
371 | value:
|
372 |
|
373 | function render() {
|
374 | var _classNames;
|
375 | var _this$props8 = this.props,
|
376 | eventKey = _this$props8.eventKey,
|
377 | className = _this$props8.className,
|
378 | style = _this$props8.style,
|
379 | dragOver = _this$props8.dragOver,
|
380 | dragOverGapTop = _this$props8.dragOverGapTop,
|
381 | dragOverGapBottom = _this$props8.dragOverGapBottom,
|
382 | isLeaf = _this$props8.isLeaf,
|
383 | isStart = _this$props8.isStart,
|
384 | isEnd = _this$props8.isEnd,
|
385 | expanded = _this$props8.expanded,
|
386 | selected = _this$props8.selected,
|
387 | checked = _this$props8.checked,
|
388 | halfChecked = _this$props8.halfChecked,
|
389 | loading = _this$props8.loading,
|
390 | domRef = _this$props8.domRef,
|
391 | active = _this$props8.active,
|
392 | data = _this$props8.data,
|
393 | onMouseMove = _this$props8.onMouseMove,
|
394 | selectable = _this$props8.selectable,
|
395 | otherProps = _objectWithoutProperties(_this$props8, _excluded);
|
396 | var _this$props$context5 = this.props.context,
|
397 | prefixCls = _this$props$context5.prefixCls,
|
398 | filterTreeNode = _this$props$context5.filterTreeNode,
|
399 | keyEntities = _this$props$context5.keyEntities,
|
400 | dropContainerKey = _this$props$context5.dropContainerKey,
|
401 | dropTargetKey = _this$props$context5.dropTargetKey,
|
402 | draggingNodeKey = _this$props$context5.draggingNodeKey;
|
403 | var disabled = this.isDisabled();
|
404 | var dataOrAriaAttributeProps = pickAttrs(otherProps, {
|
405 | aria: true,
|
406 | data: true
|
407 | });
|
408 | var _ref2 = keyEntities[eventKey] || {},
|
409 | level = _ref2.level;
|
410 | var isEndNode = isEnd[isEnd.length - 1];
|
411 | var mergedDraggable = this.isDraggable();
|
412 | var draggableWithoutDisabled = !disabled && mergedDraggable;
|
413 | var dragging = draggingNodeKey === eventKey;
|
414 | var ariaSelected = selectable !== undefined ? {
|
415 | 'aria-selected': !!selectable
|
416 | } : undefined;
|
417 | return React.createElement("div", _extends({
|
418 | ref: domRef,
|
419 | className: classNames(className, "".concat(prefixCls, "-treenode"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-treenode-disabled"), disabled), _defineProperty(_classNames, "".concat(prefixCls, "-treenode-switcher-").concat(expanded ? 'open' : 'close'), !isLeaf), _defineProperty(_classNames, "".concat(prefixCls, "-treenode-checkbox-checked"), checked), _defineProperty(_classNames, "".concat(prefixCls, "-treenode-checkbox-indeterminate"), halfChecked), _defineProperty(_classNames, "".concat(prefixCls, "-treenode-selected"), selected), _defineProperty(_classNames, "".concat(prefixCls, "-treenode-loading"), loading), _defineProperty(_classNames, "".concat(prefixCls, "-treenode-active"), active), _defineProperty(_classNames, "".concat(prefixCls, "-treenode-leaf-last"), isEndNode), _defineProperty(_classNames, "".concat(prefixCls, "-treenode-draggable"), mergedDraggable), _defineProperty(_classNames, "dragging", dragging), _defineProperty(_classNames, 'drop-target', dropTargetKey === eventKey), _defineProperty(_classNames, 'drop-container', dropContainerKey === eventKey), _defineProperty(_classNames, 'drag-over', !disabled && dragOver), _defineProperty(_classNames, 'drag-over-gap-top', !disabled && dragOverGapTop), _defineProperty(_classNames, 'drag-over-gap-bottom', !disabled && dragOverGapBottom), _defineProperty(_classNames, 'filter-node', filterTreeNode && filterTreeNode(convertNodePropsToEventData(this.props))), _classNames)),
|
420 | style: style
|
421 |
|
422 | ,
|
423 | draggable: draggableWithoutDisabled,
|
424 | "aria-grabbed": dragging,
|
425 | onDragStart: draggableWithoutDisabled ? this.onDragStart : undefined
|
426 |
|
427 | ,
|
428 | onDragEnter: mergedDraggable ? this.onDragEnter : undefined,
|
429 | onDragOver: mergedDraggable ? this.onDragOver : undefined,
|
430 | onDragLeave: mergedDraggable ? this.onDragLeave : undefined,
|
431 | onDrop: mergedDraggable ? this.onDrop : undefined,
|
432 | onDragEnd: mergedDraggable ? this.onDragEnd : undefined,
|
433 | onMouseMove: onMouseMove
|
434 | }, ariaSelected, dataOrAriaAttributeProps), React.createElement(Indent, {
|
435 | prefixCls: prefixCls,
|
436 | level: level,
|
437 | isStart: isStart,
|
438 | isEnd: isEnd
|
439 | }), this.renderDragHandler(), this.renderSwitcher(), this.renderCheckbox(), this.renderSelector());
|
440 | }
|
441 | }]);
|
442 | return InternalTreeNode;
|
443 | }(React.Component);
|
444 | var ContextTreeNode = function ContextTreeNode(props) {
|
445 | return React.createElement(TreeContext.Consumer, null, function (context) {
|
446 | return React.createElement(InternalTreeNode, _extends({}, props, {
|
447 | context: context
|
448 | }));
|
449 | });
|
450 | };
|
451 | ContextTreeNode.displayName = 'TreeNode';
|
452 | ContextTreeNode.isTreeNode = 1;
|
453 | export { InternalTreeNode };
|
454 | export default ContextTreeNode; |
\ | No newline at end of file |