function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } function _createSuper(Derived) { return function () { var Super = _getPrototypeOf(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } } function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } import * as React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; // @ts-ignore import CSSMotion from "rc-animate/es/CSSMotion"; import toArray from "rc-util/es/Children/toArray"; import { polyfill } from 'react-lifecycles-compat'; import { TreeContext } from './contextTypes'; import { getNodeChildren, getDataAndAria, mapChildren, warnOnlyTreeNode } from './util'; var ICON_OPEN = 'open'; var ICON_CLOSE = 'close'; var defaultTitle = '---'; var TreeNode = /*#__PURE__*/function (_React$Component) { _inherits(TreeNode, _React$Component); var _super = _createSuper(TreeNode); function TreeNode() { var _this; _classCallCheck(this, TreeNode); _this = _super.apply(this, arguments); _this.state = { dragNodeHighlight: false }; _this.onSelectorClick = function (e) { // Click trigger before select/check operation var onNodeClick = _this.props.context.onNodeClick; onNodeClick(e, _assertThisInitialized(_this)); if (_this.isSelectable()) { _this.onSelect(e); } else { _this.onCheck(e); } }; _this.onSelectorDoubleClick = function (e) { var onNodeDoubleClick = _this.props.context.onNodeDoubleClick; onNodeDoubleClick(e, _assertThisInitialized(_this)); }; _this.onSelect = function (e) { if (_this.isDisabled()) return; var onNodeSelect = _this.props.context.onNodeSelect; e.preventDefault(); onNodeSelect(e, _assertThisInitialized(_this)); }; _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; e.preventDefault(); var targetChecked = !checked; onNodeCheck(e, _assertThisInitialized(_this), targetChecked); }; _this.onMouseEnter = function (e) { var onNodeMouseEnter = _this.props.context.onNodeMouseEnter; onNodeMouseEnter(e, _assertThisInitialized(_this)); }; _this.onMouseLeave = function (e) { var onNodeMouseLeave = _this.props.context.onNodeMouseLeave; onNodeMouseLeave(e, _assertThisInitialized(_this)); }; _this.onContextMenu = function (e) { var onNodeContextMenu = _this.props.context.onNodeContextMenu; onNodeContextMenu(e, _assertThisInitialized(_this)); }; _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 } }; _this.onDragEnter = function (e) { var onNodeDragEnter = _this.props.context.onNodeDragEnter; e.preventDefault(); e.stopPropagation(); onNodeDragEnter(e, _assertThisInitialized(_this)); }; _this.onDragOver = function (e) { var onNodeDragOver = _this.props.context.onNodeDragOver; e.preventDefault(); e.stopPropagation(); onNodeDragOver(e, _assertThisInitialized(_this)); }; _this.onDragLeave = function (e) { var onNodeDragLeave = _this.props.context.onNodeDragLeave; e.stopPropagation(); onNodeDragLeave(e, _assertThisInitialized(_this)); }; _this.onDragEnd = function (e) { var onNodeDragEnd = _this.props.context.onNodeDragEnd; e.stopPropagation(); _this.setState({ dragNodeHighlight: false }); onNodeDragEnd(e, _assertThisInitialized(_this)); }; _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 _this.onExpand = function (e) { var onNodeExpand = _this.props.context.onNodeExpand; onNodeExpand(e, _assertThisInitialized(_this)); }; // Drag usage _this.setSelectHandle = function (node) { _this.selectHandle = node; }; _this.getNodeChildren = function () { var children = _this.props.children; var originList = toArray(children).filter(function (node) { return node; }); var targetList = getNodeChildren(originList); if (originList.length !== targetList.length) { warnOnlyTreeNode(); } return targetList; }; _this.getNodeState = function () { var expanded = _this.props.expanded; if (_this.isLeaf()) { return null; } return expanded ? ICON_OPEN : ICON_CLOSE; }; _this.isLeaf = function () { var _this$props2 = _this.props, isLeaf = _this$props2.isLeaf, loaded = _this$props2.loaded; var loadData = _this.props.context.loadData; var hasChildren = _this.getNodeChildren().length !== 0; 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; // Follow the logic of Selectable if (disabled === false) { return false; } 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 var hasChildren = _this.getNodeChildren().length !== 0; if (!hasChildren && !loaded) { onNodeLoad(_assertThisInitialized(_this)); } } }; // Switcher _this.renderSwitcher = function () { var _this$props3 = _this.props, expanded = _this$props3.expanded, switcherIconFromProps = _this$props3.switcherIcon; var _this$props$context2 = _this.props.context, prefixCls = _this$props$context2.prefixCls, switcherIconFromCtx = _this$props$context2.switcherIcon; var switcherIcon = switcherIconFromProps || switcherIconFromCtx; if (_this.isLeaf()) { return React.createElement("span", { className: classNames("".concat(prefixCls, "-switcher"), "".concat(prefixCls, "-switcher-noop")) }, typeof switcherIcon === 'function' ? switcherIcon(_objectSpread({}, _this.props, { isLeaf: true })) : switcherIcon); } var switcherCls = classNames("".concat(prefixCls, "-switcher"), "".concat(prefixCls, "-switcher_").concat(expanded ? ICON_OPEN : ICON_CLOSE)); return React.createElement("span", { onClick: _this.onExpand, className: switcherCls }, typeof switcherIcon === 'function' ? switcherIcon(_objectSpread({}, _this.props, { isLeaf: false })) : switcherIcon); }; // Checkbox _this.renderCheckbox = function () { var _this$props4 = _this.props, checked = _this$props4.checked, halfChecked = _this$props4.halfChecked, disableCheckbox = _this$props4.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 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 }, $custom); }; _this.renderIcon = function () { var loading = _this.props.loading; var prefixCls = _this.props.context.prefixCls; return React.createElement("span", { className: classNames("".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$props5 = _this.props, title = _this$props5.title, selected = _this$props5.selected, icon = _this$props5.icon, loading = _this$props5.loading; var _this$props$context3 = _this.props.context, prefixCls = _this$props$context3.prefixCls, showIcon = _this$props$context3.showIcon, treeIcon = _this$props$context3.icon, draggable = _this$props$context3.draggable, loadData = _this$props$context3.loadData; 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 ? 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(); } // Title var $title = React.createElement("span", { className: "".concat(prefixCls, "-title") }, title); return 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"), !disabled && draggable && 'draggable'), draggable: !disabled && draggable || undefined, "aria-grabbed": !disabled && draggable || undefined, onMouseEnter: _this.onMouseEnter, onMouseLeave: _this.onMouseLeave, onContextMenu: _this.onContextMenu, onClick: _this.onSelectorClick, onDoubleClick: _this.onSelectorDoubleClick, onDragStart: draggable ? _this.onDragStart : undefined }, $icon, $title); }; // Children list wrapped with `Animation` _this.renderChildren = function () { var _this$props6 = _this.props, expanded = _this$props6.expanded, pos = _this$props6.pos; var _this$props$context4 = _this.props.context, prefixCls = _this$props$context4.prefixCls, motion = _this$props$context4.motion, renderTreeNode = _this$props$context4.renderTreeNode; // Children TreeNode var nodeList = _this.getNodeChildren(); if (nodeList.length === 0) { return null; } return React.createElement(CSSMotion, Object.assign({ visible: expanded }, motion), function (_ref) { var style = _ref.style, className = _ref.className; return React.createElement("ul", { className: classNames(className, "".concat(prefixCls, "-child-tree"), expanded && "".concat(prefixCls, "-child-tree-open")), style: style, "data-expanded": expanded, role: "group" }, mapChildren(nodeList, function (node, index) { return renderTreeNode(node, index, pos); })); }); }; return _this; } // Isomorphic needn't load data in server side _createClass(TreeNode, [{ key: "componentDidMount", value: function componentDidMount() { var _this$props7 = this.props, eventKey = _this$props7.eventKey, registerTreeNode = _this$props7.context.registerTreeNode; this.syncLoadData(this.props); registerTreeNode(eventKey, this); } }, { key: "componentDidUpdate", value: function componentDidUpdate() { this.syncLoadData(this.props); } }, { key: "componentWillUnmount", value: function componentWillUnmount() { var _this$props8 = this.props, eventKey = _this$props8.eventKey, registerTreeNode = _this$props8.context.registerTreeNode; registerTreeNode(eventKey, null); } }, { 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: function render() { var _classNames; var loading = this.props.loading; var _this$props9 = this.props, className = _this$props9.className, style = _this$props9.style, dragOver = _this$props9.dragOver, dragOverGapTop = _this$props9.dragOverGapTop, dragOverGapBottom = _this$props9.dragOverGapBottom, isLeaf = _this$props9.isLeaf, expanded = _this$props9.expanded, selected = _this$props9.selected, checked = _this$props9.checked, halfChecked = _this$props9.halfChecked, otherProps = _objectWithoutProperties(_this$props9, ["className", "style", "dragOver", "dragOverGapTop", "dragOverGapBottom", "isLeaf", "expanded", "selected", "checked", "halfChecked"]); var _this$props$context5 = this.props.context, prefixCls = _this$props$context5.prefixCls, filterTreeNode = _this$props$context5.filterTreeNode, draggable = _this$props$context5.draggable; var disabled = this.isDisabled(); var dataOrAriaAttributeProps = getDataAndAria(otherProps); return React.createElement("li", Object.assign({ className: classNames(className, (_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, '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(this)), _classNames)), style: style, role: "treeitem", onDragEnter: draggable ? this.onDragEnter : undefined, onDragOver: draggable ? this.onDragOver : undefined, onDragLeave: draggable ? this.onDragLeave : undefined, onDrop: draggable ? this.onDrop : undefined, onDragEnd: draggable ? this.onDragEnd : undefined }, dataOrAriaAttributeProps), this.renderSwitcher(), this.renderCheckbox(), this.renderSelector(), this.renderChildren()); } }]); return TreeNode; }(React.Component); TreeNode.propTypes = { eventKey: PropTypes.string, prefixCls: PropTypes.string, className: PropTypes.string, style: PropTypes.object, onSelect: PropTypes.func, // By parent expanded: PropTypes.bool, selected: PropTypes.bool, checked: PropTypes.bool, loaded: PropTypes.bool, loading: PropTypes.bool, halfChecked: PropTypes.bool, children: PropTypes.node, title: PropTypes.node, pos: PropTypes.string, dragOver: PropTypes.bool, dragOverGapTop: PropTypes.bool, dragOverGapBottom: PropTypes.bool, // By user isLeaf: PropTypes.bool, checkable: PropTypes.bool, selectable: PropTypes.bool, disabled: PropTypes.bool, disableCheckbox: PropTypes.bool, icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]), switcherIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]) }; polyfill(TreeNode); var ContextTreeNode = function ContextTreeNode(props) { return React.createElement(TreeContext.Consumer, null, function (context) { return React.createElement(TreeNode, Object.assign({}, props, { context: context })); }); }; ContextTreeNode.defaultProps = { title: defaultTitle }; ContextTreeNode.isTreeNode = 1; export { TreeNode as InternalTreeNode }; export default ContextTreeNode;