"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); var _typeof = require("@babel/runtime/helpers/typeof"); Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); 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 _classnames = _interopRequireDefault(require("classnames")); var _pickAttrs = _interopRequireDefault(require("rc-util/lib/pickAttrs")); var React = _interopRequireWildcard(require("react")); var _contextTypes = require("./contextTypes"); var _Indent = _interopRequireDefault(require("./Indent")); var _keyUtil = _interopRequireDefault(require("./utils/keyUtil")); 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(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } 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]; } _this = _super.call.apply(_super, [this].concat(args)); _this.state = { dragNodeHighlight: false }; _this.selectHandle = void 0; _this.cacheIndent = void 0; _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); } }; _this.onSelectorDoubleClick = function (e) { var onNodeDoubleClick = _this.props.context.onNodeDoubleClick; onNodeDoubleClick(e, (0, _treeUtil.convertNodePropsToEventData)(_this.props)); }; _this.onSelect = function (e) { if (_this.isDisabled()) return; var onNodeSelect = _this.props.context.onNodeSelect; onNodeSelect(e, (0, _treeUtil.convertNodePropsToEventData)(_this.props)); }; _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); }; _this.onMouseEnter = function (e) { var onNodeMouseEnter = _this.props.context.onNodeMouseEnter; onNodeMouseEnter(e, (0, _treeUtil.convertNodePropsToEventData)(_this.props)); }; _this.onMouseLeave = function (e) { var onNodeMouseLeave = _this.props.context.onNodeMouseLeave; onNodeMouseLeave(e, (0, _treeUtil.convertNodePropsToEventData)(_this.props)); }; _this.onContextMenu = function (e) { var onNodeContextMenu = _this.props.context.onNodeContextMenu; onNodeContextMenu(e, (0, _treeUtil.convertNodePropsToEventData)(_this.props)); }; _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 } }; _this.onDragEnter = function (e) { var onNodeDragEnter = _this.props.context.onNodeDragEnter; e.preventDefault(); e.stopPropagation(); onNodeDragEnter(e, (0, _assertThisInitialized2.default)(_this)); }; _this.onDragOver = function (e) { var onNodeDragOver = _this.props.context.onNodeDragOver; e.preventDefault(); e.stopPropagation(); onNodeDragOver(e, (0, _assertThisInitialized2.default)(_this)); }; _this.onDragLeave = function (e) { var onNodeDragLeave = _this.props.context.onNodeDragLeave; e.stopPropagation(); onNodeDragLeave(e, (0, _assertThisInitialized2.default)(_this)); }; _this.onDragEnd = function (e) { var onNodeDragEnd = _this.props.context.onNodeDragEnd; e.stopPropagation(); _this.setState({ dragNodeHighlight: false }); onNodeDragEnd(e, (0, _assertThisInitialized2.default)(_this)); }; _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 _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 _this.setSelectHandle = function (node) { _this.selectHandle = node; }; _this.getNodeState = function () { var expanded = _this.props.expanded; if (_this.isLeaf()) { return null; } return expanded ? ICON_OPEN : ICON_CLOSE; }; _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; }; _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; }; _this.isDisabled = function () { var disabled = _this.props.disabled; var treeDisabled = _this.props.context.disabled; return !!(treeDisabled || disabled); }; _this.isCheckable = function () { var checkable = _this.props.checkable; var treeCheckable = _this.props.context.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 _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; } // read from state to avoid loadData at same time if (loadData && expanded && !_this.isLeaf()) { // We needn't reload data when has children in sync logic // It's only needed in node expanded if (!_this.hasChildren() && !loaded) { onNodeLoad((0, _treeUtil.convertNodePropsToEventData)(_this.props)); } } }; _this.isDraggable = function () { var _this$props4 = _this.props, data = _this$props4.data, draggable = _this$props4.context.draggable; return !!(draggable && (!draggable.nodeDraggable || draggable.nodeDraggable(data))); }; // ==================== Render: Drag Handler ==================== _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 ? void 0 : draggable.icon) ? /*#__PURE__*/React.createElement("span", { className: "".concat(prefixCls, "-draggable-icon") }, draggable.icon) : null; }; // ====================== Render: Switcher ====================== _this.renderSwitcherIconDom = function (isLeaf) { var switcherIconFromProps = _this.props.switcherIcon; var switcherIconFromCtx = _this.props.context.switcherIcon; var switcherIcon = switcherIconFromProps || switcherIconFromCtx; // 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 _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 _this.renderCheckbox = function () { var _this$props5 = _this.props, checked = _this$props5.checked, halfChecked = _this$props5.halfChecked, disableCheckbox = _this$props5.disableCheckbox; var prefixCls = _this.props.context.prefixCls; var disabled = _this.isDisabled(); var checkable = _this.isCheckable(); if (!checkable) return null; // [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 }, $custom); }; // ==================== Render: Title + Icon ==================== _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 _this.renderSelector = function () { var dragNodeHighlight = _this.state.dragNodeHighlight; var _this$props6 = _this.props, _this$props6$title = _this$props6.title, title = _this$props6$title === void 0 ? defaultTitle : _this$props6$title, selected = _this$props6.selected, icon = _this$props6.icon, loading = _this$props6.loading, data = _this$props6.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"); // 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(); } // 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()); }; // =================== Render: Drop Indicator =================== _this.renderDropIndicator = function () { var _this$props7 = _this.props, disabled = _this$props7.disabled, eventKey = _this$props7.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; // 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; }; return _this; } (0, _createClass2.default)(InternalTreeNode, [{ key: "componentDidMount", value: // Isomorphic needn't load data in server side function componentDidMount() { this.syncLoadData(this.props); } }, { 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; } }, { key: "render", value: // =========================== Render =========================== function render() { var _classNames; var _this$props8 = this.props, eventKey = _this$props8.eventKey, className = _this$props8.className, style = _this$props8.style, dragOver = _this$props8.dragOver, dragOverGapTop = _this$props8.dragOverGapTop, dragOverGapBottom = _this$props8.dragOverGapBottom, isLeaf = _this$props8.isLeaf, isStart = _this$props8.isStart, isEnd = _this$props8.isEnd, expanded = _this$props8.expanded, selected = _this$props8.selected, checked = _this$props8.checked, halfChecked = _this$props8.halfChecked, loading = _this$props8.loading, domRef = _this$props8.domRef, active = _this$props8.active, data = _this$props8.data, onMouseMove = _this$props8.onMouseMove, selectable = _this$props8.selectable, otherProps = (0, _objectWithoutProperties2.default)(_this$props8, _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, className: (0, _classnames.default)(className, "".concat(prefixCls, "-treenode"), (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-treenode-disabled"), disabled), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-treenode-switcher-").concat(expanded ? 'open' : 'close'), !isLeaf), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-treenode-checkbox-checked"), checked), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-treenode-checkbox-indeterminate"), halfChecked), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-treenode-selected"), selected), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-treenode-loading"), loading), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-treenode-active"), active), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-treenode-leaf-last"), isEndNode), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-treenode-draggable"), mergedDraggable), (0, _defineProperty2.default)(_classNames, "dragging", dragging), (0, _defineProperty2.default)(_classNames, 'drop-target', dropTargetKey === eventKey), (0, _defineProperty2.default)(_classNames, 'drop-container', dropContainerKey === eventKey), (0, _defineProperty2.default)(_classNames, 'drag-over', !disabled && dragOver), (0, _defineProperty2.default)(_classNames, 'drag-over-gap-top', !disabled && dragOverGapTop), (0, _defineProperty2.default)(_classNames, 'drag-over-gap-bottom', !disabled && dragOverGapBottom), (0, _defineProperty2.default)(_classNames, 'filter-node', filterTreeNode && filterTreeNode((0, _treeUtil.convertNodePropsToEventData)(this.props))), _classNames)), style: style // Draggable config , draggable: draggableWithoutDisabled, "aria-grabbed": dragging, 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(InternalTreeNode, (0, _extends2.default)({}, props, { context: context })); }); }; ContextTreeNode.displayName = 'TreeNode'; ContextTreeNode.isTreeNode = 1; var _default = ContextTreeNode; exports.default = _default;