'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; var _react = require('react'); var _react2 = _interopRequireDefault(_react); var _reactDom = require('react-dom'); var _reactDom2 = _interopRequireDefault(_reactDom); var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames); var _beeAnimate = require('bee-animate'); var _beeAnimate2 = _interopRequireDefault(_beeAnimate); var _util = require('./util'); var _propTypes = require('prop-types'); var _propTypes2 = _interopRequireDefault(_propTypes); var _tinperBeeCore = require('tinper-bee-core'); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } 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 _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); } var browserUa = typeof window !== 'undefined' ? (0, _util.browser)(window.navigator) : ''; var ieOrEdge = /.*(IE|Edge).+/.test(browserUa); // const uaArray = browserUa.split(' '); // const gtIE8 = uaArray.length !== 2 || uaArray[0].indexOf('IE') === -1 || Number(uaArray[1]) > 8; var defaultTitle = '---'; var TreeNode = function (_React$Component) { _inherits(TreeNode, _React$Component); function TreeNode(props) { _classCallCheck(this, TreeNode); var _this2 = _possibleConstructorReturn(this, _React$Component.call(this, props)); _this2.getNodeChildren = function () { var children = _this2.props.children; var originList = (0, _util.toArray)(children).filter(function (node) { return node; }); var targetList = (0, _util.getNodeChildren)(originList); if (originList.length !== targetList.length) { (0, _util.warnOnlyTreeNode)(); } return targetList; }; ['onExpand', 'onCheck', 'onContextMenu', 'onMouseEnter', 'onMouseLeave', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDragLeave', 'onDrop', 'onDragEnd', 'onDoubleClick', 'onKeyDown'].forEach(function (m) { _this2[m] = _this2[m].bind(_this2); }); _this2.state = { dataLoading: false, dragNodeHighlight: false }; return _this2; } TreeNode.prototype.componentDidMount = function componentDidMount() { if (!this.props.root._treeNodeInstances) { this.props.root._treeNodeInstances = []; } this.props.root._treeNodeInstances.push(this); }; // shouldComponentUpdate(nextProps) { // if (!nextProps.expanded) { // return false; // } // return true; // } TreeNode.prototype.onCheck = function onCheck() { this.props.root.onCheck(this); }; TreeNode.prototype.onSelect = function onSelect() { clearTimeout(this.doubleClickFlag); var _this = this; if (this.props.onDoubleClick) { //执行延时 this.doubleClickFlag = setTimeout(function () { //do function在此处写单击事件要执行的代码 _this.props.root.onSelect(_this); }, 300); } else { _this.props.root.onSelect(_this); } }; TreeNode.prototype.onDoubleClick = function onDoubleClick() { clearTimeout(this.doubleClickFlag); this.props.root.onDoubleClick(this); }; TreeNode.prototype.onMouseEnter = function onMouseEnter(e) { e.preventDefault(); this.props.root.onMouseEnter(e, this); }; TreeNode.prototype.onMouseLeave = function onMouseLeave(e) { e.preventDefault(); this.props.root.onMouseLeave(e, this); }; TreeNode.prototype.onContextMenu = function onContextMenu(e) { e.preventDefault(); this.props.root.onContextMenu(e, this); }; TreeNode.prototype.onDragStart = function onDragStart(e) { // console.log('dragstart', this.props.eventKey, e); // e.preventDefault(); e.stopPropagation(); this.setState({ dragNodeHighlight: true }); this.props.root.onDragStart(e, this); try { // ie throw error // firefox-need-it e.dataTransfer.setData('text/plain', ''); } finally { // empty } }; TreeNode.prototype.onDragEnter = function onDragEnter(e) { e.preventDefault(); e.stopPropagation(); this.props.root.onDragEnter(e, this); }; TreeNode.prototype.onDragOver = function onDragOver(e) { // todo disabled e.preventDefault(); e.stopPropagation(); this.props.root.onDragOver(e, this); return false; }; TreeNode.prototype.onDragLeave = function onDragLeave(e) { e.stopPropagation(); this.props.root.onDragLeave(e, this); }; TreeNode.prototype.onDrop = function onDrop(e) { e.preventDefault(); e.stopPropagation(); this.setState({ dragNodeHighlight: false }); this.props.root.onDrop(e, this); }; TreeNode.prototype.onDragEnd = function onDragEnd(e) { e.stopPropagation(); this.setState({ dragNodeHighlight: false }); this.props.root.onDragEnd(e, this); }; TreeNode.prototype.onExpand = function onExpand() { var _this3 = this; var callbackPromise = this.props.root.onExpand(this); if (callbackPromise && (typeof callbackPromise === 'undefined' ? 'undefined' : _typeof(callbackPromise)) === 'object') { var setLoading = function setLoading(dataLoading) { _this3.setState({ dataLoading: dataLoading }); }; setLoading(true); callbackPromise.then(function () { setLoading(false); }, function () { setLoading(false); }); } }; // keyboard event support TreeNode.prototype.onKeyDown = function onKeyDown(e) { this.props.root.onKeyDown(e, this); if (e.keyCode == _tinperBeeCore.KeyCode.SPACE || e.keyCode == _tinperBeeCore.KeyCode.DOWN || e.keyCode == _tinperBeeCore.KeyCode.LEFT || e.keyCode == _tinperBeeCore.KeyCode.RIGHT || e.keyCode == _tinperBeeCore.KeyCode.UP) { e.preventDefault(); } }; TreeNode.prototype.renderSwitcher = function renderSwitcher(props, expandedState) { var stateIcon = void 0; var prefixCls = props.prefixCls; var switcherCls = _defineProperty({}, prefixCls + '-switcher', true); if (!props.showLine) { switcherCls[prefixCls + '-noline_' + expandedState] = true; } else if (props.pos === '0-0') { switcherCls[prefixCls + '-roots_' + expandedState] = true; } else { switcherCls[prefixCls + '-center_' + expandedState] = !props.last; switcherCls[prefixCls + '-bottom_' + expandedState] = props.last; } if (expandedState === 'open' && props.openIcon) { stateIcon = props.openIcon; switcherCls['icon-none'] = true; } if (expandedState === 'close' && props.closeIcon) { stateIcon = props.closeIcon; switcherCls['icon-none'] = true; } //switcherCls[stateIcon] = stateIcon; props.switcherClass ? switcherCls['' + props.switcherClass] = true : ''; if (props.disabled && !props.mustExpandable) { switcherCls[prefixCls + '-switcher-disabled'] = true; return _react2["default"].createElement( 'span', { className: (0, _classnames2["default"])(switcherCls), style: props.switcherStyle }, stateIcon ); } return _react2["default"].createElement( 'span', { className: (0, _classnames2["default"])(switcherCls), style: props.switcherStyle, onClick: this.onExpand }, stateIcon ); }; TreeNode.prototype.renderCheckbox = function renderCheckbox(props) { var prefixCls = props.prefixCls; var checkboxCls = _defineProperty({}, prefixCls + '-checkbox', true); if (props.checked) { checkboxCls[prefixCls + '-checkbox-checked'] = true; } else if (props.halfChecked) { checkboxCls[prefixCls + '-checkbox-indeterminate'] = true; } var customEle = null; if (typeof props.checkable !== 'boolean') { customEle = props.checkable; } if (props.disabled || props.disableCheckbox) { checkboxCls[prefixCls + '-checkbox-disabled'] = true; return _react2["default"].createElement( 'span', { className: (0, _classnames2["default"])(checkboxCls) }, customEle ); } return _react2["default"].createElement( 'span', { className: (0, _classnames2["default"])(checkboxCls), onClick: this.onCheck }, customEle ); }; TreeNode.prototype.renderChildren = function renderChildren(props) { var renderFirst = this.renderFirst; this.renderFirst = 1; var transitionAppear = true; if (!renderFirst && props.expanded) { transitionAppear = false; } var children = props.children; var newChildren = children; // 确定所有子节点是否是TreeNode var allTreeNode = false; if (Array.isArray(children)) { for (var index = 0; index < children.length; index++) { var item = children[index]; allTreeNode = item.type.isTreeNode == 1; if (!allTreeNode) { //当检查到子节点中有不是 TreeNode 的,则直接结束检查。同时不会渲染所有子节点 break; } } } else if (children && children.type && children.type.isTreeNode == 1) { allTreeNode = true; } // 如果props.children的长度大于0才可以生成子对象 if (allTreeNode && _react2["default"].Children.count(children)) { var _cls; var cls = (_cls = {}, _defineProperty(_cls, props.prefixCls + '-child-tree', true), _defineProperty(_cls, props.prefixCls + '-child-tree-open', props.expanded), _cls); if (props.showLine) { cls[props.prefixCls + '-line'] = !props.last; } var animProps = {}; if (props.openTransitionName) { animProps.transitionName = props.openTransitionName; } else if (_typeof(props.openAnimation) === 'object') { animProps.animation = _extends({}, props.openAnimation); if (!transitionAppear) { delete animProps.animation.appear; } } newChildren = _react2["default"].createElement( _beeAnimate2["default"], _extends({}, animProps, { showProp: 'data-expanded', transitionAppear: transitionAppear, component: '' }), !props.expanded ? null : _react2["default"].createElement( 'ul', { className: (0, _classnames2["default"])(cls), 'data-expanded': props.expanded }, _react2["default"].Children.map(children, function (item, index) { return props.root.renderTreeNode(item, index, props.pos); }, props.root) ) ); } return newChildren; }; /** *判断是否为叶子节点,isLeaf的优先级>props.children。如果是异步加载是根据isLeaf的值进行判断的 * * @returns * @memberof TreeNode */ TreeNode.prototype.checkIsLeaf = function checkIsLeaf() { var _props = this.props, isLeaf = _props.isLeaf, loadData = _props.loadData; var rs = isLeaf; if (rs === false || rs === true) { return rs; } else { var hasChildren = this.getNodeChildren().length !== 0; return !loadData && !hasChildren; } }; TreeNode.prototype.render = function render() { var _iconEleCls, _this4 = this; var props = this.props; var prefixCls = props.prefixCls; var expandedState = props.expanded ? 'open' : 'close'; var iconState = expandedState; var canRenderSwitcher = true; var content = props.title; var newChildren = this.renderChildren(props); var openIconCls = false, closeIconCls = false; //以下变量控制是否鼠标单机双击方法中的变量 var timer = 0; var delay = 500; var prevent = false; // if (!newChildren || newChildren === props.children) { // // content = newChildren; // newChildren = null; // if (!props.loadData || props.isLeaf) { // canRenderSwitcher = false; // iconState = 'docu'; // } // } if (this.checkIsLeaf()) { canRenderSwitcher = false; iconState = 'docu'; } // For performance, does't render children into dom when `!props.expanded` (move to Animate) // if (!props.expanded) { // newChildren = null; // } var iconEleCls = (_iconEleCls = {}, _defineProperty(_iconEleCls, prefixCls + '-iconEle', true), _defineProperty(_iconEleCls, prefixCls + '-icon_loading', this.state.dataLoading), _defineProperty(_iconEleCls, prefixCls + '-icon__' + iconState, true), _iconEleCls); var selectHandle = function selectHandle() { var titleClass = props.titleClass ? prefixCls + '-title' + ' ' + props.className : prefixCls + '-title'; // const icon = (props.showIcon || props.loadData && this.state.dataLoading) ? // : null; var icon = void 0; if (props.showIcon && props.icon) { icon = _react2["default"].createElement( 'span', { className: (0, _classnames2["default"])(prefixCls + '-iconEle', prefixCls + '-icon__customize') }, typeof currentIcon === 'function' ? _react2["default"].createElement(props.icon, _extends({}, _this4.props)) : props.icon ); } else if (props.showIcon || props.loadData && _this4.state.dataLoading) { icon = _react2["default"].createElement('span', { className: (0, _classnames2["default"])(iconEleCls) }); } var title = _react2["default"].createElement( 'span', { className: titleClass, style: props.titleStyle }, content ); var wrap = prefixCls + '-node-content-wrapper'; var domProps = { className: wrap + ' ' + wrap + '-' + (iconState === expandedState ? iconState : 'normal') }; if (!props.disabled) { if (props.selected || !props._dropTrigger && _this4.state.dragNodeHighlight) { domProps.className += ' ' + prefixCls + '-node-selected'; } domProps.onClick = function (e) { var _this = _this4; e.preventDefault(); if (props.selectable) { _this.onSelect(); } // not fire check event // if (props.checkable) { // this.onCheck(); // } }; if (props.onDoubleClick) { domProps.onDoubleClick = _this4.onDoubleClick; } if (props.onRightClick) { domProps.onContextMenu = _this4.onContextMenu; } if (props.onMouseEnter) { domProps.onMouseEnter = _this4.onMouseEnter; } if (props.onMouseLeave) { domProps.onMouseLeave = _this4.onMouseLeave; } if (props.draggable) { domProps.className += ' draggable'; if (ieOrEdge) { // ie bug! domProps.href = '#'; } domProps.draggable = true; domProps['aria-grabbed'] = true; domProps.onDragStart = _this4.onDragStart; } } //设置tabIndex if (props.focusable) { domProps.onKeyDown = _this4.onKeyDown; domProps.tabIndex = -1; if (props.tabIndexKey) { if (props.eventKey == props.tabIndexKey) { domProps.tabIndex = props.tabIndexValue; } } else if (props.pos == '0-0') { domProps.tabIndex = props.tabIndexValue; } } return _react2["default"].createElement( 'a', _extends({ ref: function ref(el) { _this4.selectHandle = el; }, pos: props.pos, title: typeof content === 'string' ? content : '' }, domProps), icon, title ); }; var liProps = {}; if (props.liAttr) { liProps = _extends({}, props.liAttr); } if (props.draggable) { liProps.onDragEnter = this.onDragEnter; liProps.onDragOver = this.onDragOver; liProps.onDragLeave = this.onDragLeave; liProps.onDrop = this.onDrop; liProps.onDragEnd = this.onDragEnd; } var disabledCls = ''; var dragOverCls = ''; if (props.disabled) { disabledCls = prefixCls + '-treenode-disabled'; } else if (props.dragOver) { dragOverCls = 'drag-over'; } else if (props.dragOverGapTop) { dragOverCls = 'drag-over-gap-top'; } else if (props.dragOverGapBottom) { dragOverCls = 'drag-over-gap-bottom'; } var filterCls = props.filterTreeNode ? props.filterTreeNode(this) ? 'filter-node' : '' : ''; var noopSwitcher = function noopSwitcher() { var _cls2; var cls = (_cls2 = {}, _defineProperty(_cls2, prefixCls + '-switcher', true), _defineProperty(_cls2, prefixCls + '-switcher-noop', true), _cls2); if (props.showLine) { // console.log('line---------'); cls[prefixCls + '-center_docu'] = !props.last; cls[prefixCls + '-bottom_docu'] = props.last; } else { cls[prefixCls + '-noline_docu'] = true; } return _react2["default"].createElement('span', { className: (0, _classnames2["default"])(cls) }); }; var selectedCls = props.selected ? prefixCls + '-treenode-selected' : ''; var focusedCls = props.focused ? prefixCls + '-treenode-focused' : ''; var expandedCls = prefixCls + '-treenode-' + expandedState; return _react2["default"].createElement( 'li', _extends({}, liProps, { style: props.style, className: (0, _classnames2["default"])(props.className, disabledCls, dragOverCls, filterCls, selectedCls, focusedCls, expandedCls) }), canRenderSwitcher ? this.renderSwitcher(props, expandedState) : noopSwitcher(), props.checkable ? this.renderCheckbox(props) : null, selectHandle(), newChildren ); }; return TreeNode; }(_react2["default"].Component); TreeNode.isTreeNode = 1; TreeNode.propTypes = { prefixCls: _propTypes2["default"].string, disabled: _propTypes2["default"].bool, disableCheckbox: _propTypes2["default"].bool, expanded: _propTypes2["default"].bool, isLeaf: _propTypes2["default"].bool, root: _propTypes2["default"].object, onSelect: _propTypes2["default"].func, openIcon: _propTypes2["default"].element, closeIcon: _propTypes2["default"].element, style: _propTypes2["default"].object, className: _propTypes2["default"].string, titleClass: _propTypes2["default"].string, titleStyle: _propTypes2["default"].object, switcherClass: _propTypes2["default"].string, switcherStyle: _propTypes2["default"].object }; TreeNode.defaultProps = { title: defaultTitle, tabIndexValue: 0, mustExpandable: false }; exports["default"] = TreeNode; module.exports = exports['default'];