@alifd/next/lib/tree/view/tree.js

A configurable component library for web built on React.

'use strict';

exports.__esModule = true;
exports.default = undefined;

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _class, _temp;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _util = require('../../util');

var _treeNode = require('./tree-node');

var _treeNode2 = _interopRequireDefault(_treeNode);

var _util2 = require('./util');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var bindCtx = _util.func.bindCtx,
    noop = _util.func.noop;
var getOffset = _util.dom.getOffset;
var pickOthers = _util.obj.pickOthers,
    isPlainObject = _util.obj.isPlainObject;

/**
 * Tree
 */

var Tree = (_temp = _class = function (_Component) {
    (0, _inherits3.default)(Tree, _Component);

    function Tree(props) {
        (0, _classCallCheck3.default)(this, Tree);

        var _this = (0, _possibleConstructorReturn3.default)(this, _Component.call(this, props));

        _this.updateCache(props);

        var _this$props = _this.props,
            focusable = _this$props.focusable,
            autoFocus = _this$props.autoFocus,
            focusedKey = _this$props.focusedKey;


        if (focusable) {
            _this.tabbableKey = _this.getFirstAvaliablelChildKey('0');
        }

        _this.indeterminateKeys = [];
        _this.state = {
            expandedKeys: _this.getExpandedKeys(props),
            selectedKeys: _this.getSelectedKeys(props),
            checkedKeys: _this.getCheckedKeys(props),
            focusedKey: 'focusedKey' in _this.props ? focusedKey : focusable && autoFocus ? _this.tabbableKey : null
        };

        bindCtx(_this, ['handleExpand', 'handleSelect', 'handleCheck', 'handleBlur']);
        return _this;
    }

    Tree.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
        this.updateCache(nextProps);

        var st = {};

        if ('expandedKeys' in nextProps) {
            st.expandedKeys = this.getExpandedKeys(nextProps, true);
        }
        if ('selectedKeys' in nextProps) {
            st.selectedKeys = this.getSelectedKeys(nextProps, true);
        }
        if ('checkedKeys' in nextProps) {
            st.checkedKeys = this.getCheckedKeys(nextProps, true);
        }

        if (Object.keys(st).length) {
            this.setState(st);
        }
    };

    Tree.prototype.updateCache = function updateCache(props) {
        var _this2 = this;

        this._k2n = {};
        this._p2n = {};

        if ('dataSource' in props) {
            var loop = function loop(data) {
                var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '0';
                return data.forEach(function (item, index) {
                    var pos = prefix + '-' + index;
                    var key = item.key;

                    key = key || pos;
                    var newItem = (0, _extends3.default)({}, item, { key: key, pos: pos });
                    var children = item.children;

                    if (children && children.length) {
                        loop(children, pos);
                    }
                    _this2._k2n[key] = _this2._p2n[pos] = newItem;
                });
            };
            loop(props.dataSource);
        } else if ('children' in props) {
            var _loop = function _loop(children) {
                var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '0';
                return _react.Children.map(children, function (node, index) {
                    if (!_react2.default.isValidElement(node)) {
                        return;
                    }

                    var pos = prefix + '-' + index;
                    var key = node.key;

                    key = key || pos;
                    var newItem = (0, _extends3.default)({}, node.props, { key: key, pos: pos });

                    var children = node.props.children;

                    if (children && _react.Children.count(children)) {
                        newItem.children = _loop(children, pos);
                    }
                    _this2._k2n[key] = _this2._p2n[pos] = newItem;
                    return newItem;
                });
            };
            _loop(props.children);
        }
    };

    Tree.prototype.setFocusKey = function setFocusKey() {
        var _state$selectedKeys = this.state.selectedKeys,
            selectedKeys = _state$selectedKeys === undefined ? [] : _state$selectedKeys;

        this.setState({
            focusedKey: selectedKeys.length > 0 ? selectedKeys[0] : this.getFirstAvaliablelChildKey('0')
        });
    };

    Tree.prototype.getExpandedKeys = function getExpandedKeys(props, willReceiveProps) {
        var _this3 = this;

        var expandedKeys = void 0;

        if (!willReceiveProps && props.defaultExpandAll) {
            expandedKeys = Object.keys(this._k2n).filter(function (key) {
                var children = _this3._k2n[key].children;
                return children && children.length;
            });
        } else {
            expandedKeys = 'expandedKeys' in props ? props.expandedKeys : willReceiveProps ? [] : props.defaultExpandedKeys;
            expandedKeys = (0, _util2.normalizeToArray)(expandedKeys);

            if (props.autoExpandParent) {
                var newExpandedKeys = [];

                var expandedPoss = expandedKeys.reduce(function (ret, key) {
                    var pos = _this3._k2n[key] && _this3._k2n[key].pos;
                    if (pos) {
                        ret.push(pos);
                        newExpandedKeys.push(key);
                    }
                    return ret;
                }, []);

                expandedPoss.forEach(function (pos) {
                    var nums = pos.split('-');
                    if (nums.length === 2) {
                        return;
                    }
                    for (var i = 1; i <= nums.length - 2; i++) {
                        var ancestorPos = nums.slice(0, i + 1).join('-');
                        var ancestorKey = _this3._p2n[ancestorPos].key;
                        if (newExpandedKeys.indexOf(ancestorKey) === -1) {
                            newExpandedKeys.push(ancestorKey);
                        }
                    }
                });

                return newExpandedKeys;
            }
        }

        return expandedKeys;
    };

    Tree.prototype.getAvailableKey = function getAvailableKey(pos, prev) {
        var _this4 = this;

        var ps = Object.keys(this._p2n).filter(function (p) {
            return _this4.isAvailablePos(pos, p);
        });
        if (ps.length > 1) {
            var index = ps.indexOf(pos);
            var targetIndex = void 0;
            if (prev) {
                targetIndex = index === 0 ? ps.length - 1 : index - 1;
            } else {
                targetIndex = index === ps.length - 1 ? 0 : index + 1;
            }

            return this._p2n[ps[targetIndex]].key;
        }

        return null;
    };

    Tree.prototype.getFirstAvaliablelChildKey = function getFirstAvaliablelChildKey(parentPos) {
        var _this5 = this;

        var pos = Object.keys(this._p2n).find(function (p) {
            return _this5.isAvailablePos(parentPos + '-0', p);
        });
        return pos ? this._p2n[pos].key : null;
    };

    Tree.prototype.isAvailablePos = function isAvailablePos(refPos, targetPos) {
        var disabled = this._p2n[targetPos].disabled;


        return this.isSibling(refPos, targetPos) && !disabled;
    };

    Tree.prototype.isSibling = function isSibling(currentPos, targetPos) {
        var currentNums = currentPos.split('-').slice(0, -1);
        var targetNums = targetPos.split('-').slice(0, -1);

        return currentNums.length === targetNums.length && currentNums.every(function (num, index) {
            return num === targetNums[index];
        });
    };

    Tree.prototype.getParentKey = function getParentKey(pos) {
        return this._p2n[pos.slice(0, pos.length - 2)].key;
    };

    Tree.prototype.getSelectedKeys = function getSelectedKeys(props, willReceiveProps) {
        var _this6 = this;

        var selectedKeys = 'selectedKeys' in props ? props.selectedKeys : willReceiveProps ? [] : props.defaultSelectedKeys;
        selectedKeys = (0, _util2.normalizeToArray)(selectedKeys);

        var newSelectKeys = selectedKeys.filter(function (key) {
            return _this6._k2n[key];
        });
        return newSelectKeys;
    };

    Tree.prototype.getCheckedKeys = function getCheckedKeys(props, willReceiveProps) {
        var checkedKeys = 'checkedKeys' in props ? props.checkedKeys : willReceiveProps ? [] : props.defaultCheckedKeys;

        var checkStrictly = this.props.checkStrictly;

        if (checkStrictly) {
            if (isPlainObject(checkedKeys)) {
                var _checkedKeys = checkedKeys,
                    checked = _checkedKeys.checked,
                    indeterminate = _checkedKeys.indeterminate;

                checkedKeys = (0, _util2.normalizeToArray)(checked);
                this.indeterminateKeys = (0, _util2.normalizeToArray)(indeterminate);
            } else {
                checkedKeys = (0, _util2.normalizeToArray)(checkedKeys);
            }
        } else {
            checkedKeys = (0, _util2.getAllCheckedKeys)(checkedKeys, this._k2n, this._p2n);
            this.indeterminateKeys = this.getIndeterminateKeys(checkedKeys);
        }

        return checkedKeys;
    };

    Tree.prototype.processKey = function processKey(keys, key, add) {
        var index = keys.indexOf(key);
        if (add && index === -1) {
            keys.push(key);
        } else if (!add && index > -1) {
            keys.splice(index, 1);
        }
        return keys;
    };
    /*eslint-disable max-statements*/


    Tree.prototype.handleItemKeyDown = function handleItemKeyDown(key, item, e) {
        if ([_util.KEYCODE.UP, _util.KEYCODE.DOWN, _util.KEYCODE.RIGHT, _util.KEYCODE.LEFT, _util.KEYCODE.ENTER, _util.KEYCODE.ESC, _util.KEYCODE.SPACE].indexOf(e.keyCode) > -1) {
            e.preventDefault();
            e.stopPropagation();
        }

        var focusedKey = this.state.focusedKey;

        var node = this._k2n[key];
        var pos = this._k2n[key].pos;
        var level = pos.split('-').length - 1;
        switch (e.keyCode) {
            case _util.KEYCODE.UP:
                {
                    var avaliableKey = this.getAvailableKey(pos, true);
                    if (avaliableKey) {
                        focusedKey = avaliableKey;
                    }
                    break;
                }
            case _util.KEYCODE.DOWN:
                {
                    var _avaliableKey = this.getAvailableKey(pos, false);
                    if (_avaliableKey) {
                        focusedKey = _avaliableKey;
                    }
                    break;
                }
            case _util.KEYCODE.RIGHT:
                {
                    this.handleExpand(true, key, node);
                    var _avaliableKey2 = this.getFirstAvaliablelChildKey(pos);
                    if (_avaliableKey2) {
                        focusedKey = _avaliableKey2;
                    }
                    break;
                }
            case _util.KEYCODE.LEFT:
            case _util.KEYCODE.ESC:
                {
                    if (level === 1) {
                        var _avaliableKey3 = this.getAvailableKey(pos, true);
                        if (_avaliableKey3) {
                            focusedKey = _avaliableKey3;
                        }
                    } else if (level > 1) {
                        var parentKey = this.getParentKey(pos);
                        this.handleExpand(false, parentKey, node);
                        focusedKey = parentKey;
                    }
                    break;
                }

            case _util.KEYCODE.ENTER:
            case _util.KEYCODE.SPACE:
                {
                    var checkable = item.props.checkable === true || this.props.checkable;
                    var selectable = item.props.selectable === true || this.props.selectable;

                    if (checkable) {
                        this.handleCheck(!item.props.checked, key, node);
                    } else if (selectable) {
                        this.handleSelect(!item.props.selected, key, node);
                    }
                    break;
                }
            case _util.KEYCODE.TAB:
                focusedKey = null;
                break;
            default:
                break;
        }

        if (focusedKey !== this.state.focusedKey) {
            if (!('focusedKey' in this.props)) {
                this.setState({
                    focusedKey: focusedKey
                });
            }
        }

        this.props.onItemKeyDown(focusedKey, item, e);
        this.props.onItemFocus(focusedKey, e);
    };

    Tree.prototype.handleBlur = function handleBlur(e) {
        this.setState({
            focusedKey: ''
        });

        this.props.onBlur && this.props.onBlur(e);
    };

    Tree.prototype.handleExpand = function handleExpand(expand, key, node) {
        var _this7 = this;

        var _props = this.props,
            onExpand = _props.onExpand,
            loadData = _props.loadData;

        var expandedKeys = this.state.expandedKeys; // 由于setState 是异步操作，所以去掉 [...this.state.expandedKeys]
        this.processKey(expandedKeys, key, expand);
        var setExpandedState = function setExpandedState() {
            if (!('expandedKeys' in _this7.props)) {
                _this7.setState({ expandedKeys: expandedKeys });
            }
            onExpand(expandedKeys, { expanded: expand, node: node });
        };

        if (expand && loadData) {
            return loadData(node).then(setExpandedState);
        } else {
            setExpandedState();
        }
    };

    Tree.prototype.handleSelect = function handleSelect(select, key, node) {
        var _props2 = this.props,
            multiple = _props2.multiple,
            onSelect = _props2.onSelect;

        var selectedKeys = [].concat(this.state.selectedKeys);
        if (multiple) {
            this.processKey(selectedKeys, key, select);
        } else if (select) {
            selectedKeys = [key];
        } else {
            selectedKeys = [];
        }

        if (!('selectedKeys' in this.props)) {
            this.setState({ selectedKeys: selectedKeys });
        }
        onSelect(selectedKeys, {
            selectedNodes: this.getNodes(selectedKeys),
            node: node,
            selected: select
        });
    };

    // eslint-disable-next-line max-statements


    Tree.prototype.handleCheck = function handleCheck(check, key, node) {
        var _this8 = this;

        var _props3 = this.props,
            checkStrictly = _props3.checkStrictly,
            checkedStrategy = _props3.checkedStrategy,
            onCheck = _props3.onCheck;

        var checkedKeys = [].concat(this.state.checkedKeys);

        if (checkStrictly) {
            this.processKey(checkedKeys, key, check);
            var _newCheckedKeys = isPlainObject(this.props.checkedKeys) ? {
                checked: checkedKeys,
                indeterminate: this.indeterminateKeys
            } : checkedKeys;

            onCheck(_newCheckedKeys, {
                checkedNodes: this.getNodes(checkedKeys),
                checkedNodesPositions: checkedKeys.map(function (key) {
                    if (!_this8._k2n[key]) return null;
                    var _k2n$key = _this8._k2n[key],
                        node = _k2n$key.node,
                        pos = _k2n$key.pos;

                    return { node: node, pos: pos };
                }).filter(function (v) {
                    return !!v;
                }),
                node: node,
                indeterminateKeys: this.indeterminateKeys,
                checked: check
            });

            return;
        }

        var pos = this._k2n[key].pos;

        var ps = Object.keys(this._p2n);
        ps.forEach(function (p) {
            if ((0, _util2.isDescendantOrSelf)(pos, p)) {
                _this8.processKey(checkedKeys, _this8._p2n[p].key, check);
            }
        });

        var currentPos = pos;
        var nums = pos.split('-');
        for (var i = nums.length; i > 2; i--) {
            var parentCheck = true;

            var parentPos = nums.slice(0, i - 1).join('-');
            var parentKey = this._p2n[parentPos].key;
            var parentChecked = checkedKeys.indexOf(parentKey) > -1;
            if (!check && !parentChecked) {
                break;
            }

            for (var j = 0; j < ps.length; j++) {
                var p = ps[j];
                if ((0, _util2.isSiblingOrSelf)(currentPos, p)) {
                    var k = this._p2n[p].key;
                    if (checkedKeys.indexOf(k) === -1) {
                        parentCheck = false;
                        break;
                    }
                }
            }

            this.processKey(checkedKeys, parentKey, parentCheck);

            currentPos = parentPos;
        }

        var indeterminateKeys = this.getIndeterminateKeys(checkedKeys);
        if (!('checkedKeys' in this.props)) {
            this.setState({
                checkedKeys: checkedKeys
            });
            this.indeterminateKeys = indeterminateKeys;
        }

        var newCheckedKeys = void 0;
        switch (checkedStrategy) {
            case 'parent':
                newCheckedKeys = (0, _util2.filterChildKey)(checkedKeys, this._k2n);
                break;
            case 'child':
                newCheckedKeys = (0, _util2.filterParentKey)(checkedKeys, this._k2n);
                break;
            default:
                newCheckedKeys = checkedKeys;
                break;
        }

        onCheck(newCheckedKeys, {
            checkedNodes: this.getNodes(newCheckedKeys),
            checkedNodesPositions: newCheckedKeys.map(function (key) {
                if (!_this8._k2n[key]) return null;
                var _k2n$key2 = _this8._k2n[key],
                    node = _k2n$key2.node,
                    pos = _k2n$key2.pos;

                return { node: node, pos: pos };
            }).filter(function (v) {
                return !!v;
            }),
            node: node,
            indeterminateKeys: indeterminateKeys,
            checked: check
        });
    };
    /*eslint-enable*/


    Tree.prototype.getNodeProps = function getNodeProps(key) {
        var prefix = this.props.prefix;
        var _state = this.state,
            expandedKeys = _state.expandedKeys,
            selectedKeys = _state.selectedKeys,
            checkedKeys = _state.checkedKeys,
            dragOverNodeKey = _state.dragOverNodeKey;

        var pos = this._k2n[key].pos;

        return {
            prefix: prefix,
            root: this,
            eventKey: key,
            pos: pos,
            expanded: expandedKeys.indexOf(key) > -1,
            selected: selectedKeys.indexOf(key) > -1,
            checked: checkedKeys.indexOf(key) > -1,
            indeterminate: this.indeterminateKeys.indexOf(key) > -1,
            dragOver: dragOverNodeKey === key && this.dropPosition === 0,
            dragOverGapTop: dragOverNodeKey === key && this.dropPosition === -1,
            dragOverGapBottom: dragOverNodeKey === key && this.dropPosition === 1
        };
    };

    Tree.prototype.getParentNode = function getParentNode(pos) {
        var parentPos = pos.split('-').slice(0, -1).join('-');
        if (parentPos.length === 1) {
            return null;
        }

        return this._p2n[parentPos].node;
    };

    Tree.prototype.getNodes = function getNodes(keys) {
        var _this9 = this;

        return keys.map(function (key) {
            return _this9._k2n[key] && _this9._k2n[key].node;
        }).filter(function (v) {
            return !!v;
        });
    };

    Tree.prototype.getIndeterminateKeys = function getIndeterminateKeys(checkedKeys) {
        var _this10 = this;

        var indeterminateKeys = [];

        var poss = (0, _util2.filterChildKey)(checkedKeys, this._k2n).map(function (key) {
            return _this10._k2n[key].pos;
        });
        poss.forEach(function (pos) {
            var nums = pos.split('-');
            for (var i = nums.length; i > 2; i--) {
                var parentPos = nums.slice(0, i - 1).join('-');
                var parentKey = _this10._p2n[parentPos].key;
                if (indeterminateKeys.indexOf(parentKey) === -1) {
                    indeterminateKeys.push(parentKey);
                }
            }
        });

        return indeterminateKeys;
    };

    Tree.prototype.handleDragStart = function handleDragStart(e, node) {
        var _this11 = this;

        var dragNodeKey = node.props.eventKey;
        this.dragNode = node;
        this.dragNodesKeys = Object.keys(this._k2n).filter(function (k) {
            return (0, _util2.isDescendantOrSelf)(_this11._k2n[dragNodeKey].pos, _this11._k2n[k].pos);
        });

        var expandedKeys = this.processKey([].concat(this.state.expandedKeys), dragNodeKey, false);
        this.setState({ expandedKeys: expandedKeys });

        this.props.onDragStart({
            event: e,
            node: node,
            expandedKeys: expandedKeys
        });
    };

    Tree.prototype.handleDragEnter = function handleDragEnter(e, node) {
        var dragOverNodeKey = node.props.eventKey;
        this.dropPosition = this.getDropPosition(e, node);
        if (this.dragNode && this.dragNode.props.eventKey === dragOverNodeKey && this.dropPosition === 0) {
            this.setState({
                dragOverNodeKey: null
            });
            return;
        }

        var expandedKeys = this.processKey([].concat(this.state.expandedKeys), dragOverNodeKey, true);
        this.setState({
            dragOverNodeKey: dragOverNodeKey,
            expandedKeys: expandedKeys
        });

        this.props.onDragEnter({
            event: e,
            node: node,
            expandedKeys: expandedKeys
        });
    };

    Tree.prototype.getDropPosition = function getDropPosition(e, node) {
        var labelWrapperNode = node.refs.labelWrapper;
        var offsetTop = getOffset(labelWrapperNode).top;
        var offsetHeight = labelWrapperNode.offsetHeight;
        var pageY = e.pageY;
        var gapHeight = 2;

        if (pageY > offsetTop + offsetHeight - gapHeight) {
            return 1;
        }
        if (pageY < offsetTop + gapHeight) {
            return -1;
        }
        return 0;
    };

    Tree.prototype.handleDragOver = function handleDragOver(e, node) {
        this.props.onDragOver({ event: e, node: node });
    };

    Tree.prototype.handleDragLeave = function handleDragLeave(e, node) {
        this.props.onDragLeave({ event: e, node: node });
    };

    Tree.prototype.handleDragEnd = function handleDragEnd(e, node) {
        this.setState({
            dragOverNodeKey: null
        });

        this.props.onDragEnd({ event: e, node: node });
    };

    Tree.prototype.handleDrop = function handleDrop(e, node) {
        if (this.dragNode && (0, _util2.isDescendantOrSelf)(this._k2n[this.dragNode.props.eventKey].pos, this._k2n[node.props.eventKey].pos)) {
            return;
        }

        this.setState({
            dragOverNodeKey: null
        });

        var params = this.generateDropParams(node);
        this.props.onDrop((0, _extends3.default)({
            event: e
        }, params));
    };

    Tree.prototype.canDrop = function canDrop(node) {
        var params = this.generateDropParams(node);
        return this.props.canDrop(params);
    };

    Tree.prototype.generateDropParams = function generateDropParams(node) {
        return {
            dragNode: this.dragNode,
            dragNodesKeys: [].concat(this.dragNodesKeys),
            node: node,
            dropPosition: this.dropPosition
        };
    };

    Tree.prototype.filterTreeNode = function filterTreeNode(node) {
        return this.props.filterTreeNode.call(this, node);
    };

    Tree.prototype.renderByDataSource = function renderByDataSource() {
        var _this12 = this;

        var rtl = this.props.rtl;

        var loop = function loop(data) {
            var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '0';

            return data.map(function (item, index) {
                var pos = prefix + '-' + index;
                var _item$key = item.key,
                    key = _item$key === undefined ? pos : _item$key,
                    children = item.children,
                    others = (0, _objectWithoutProperties3.default)(item, ['key', 'children']);

                var props = (0, _extends3.default)({}, others, _this12.getNodeProps('' + key), {
                    _key: key
                });
                if (children && children.length) {
                    props.children = loop(children, pos);
                }
                var node = _react2.default.createElement(_treeNode2.default, (0, _extends3.default)({
                    rtl: rtl,
                    key: key,
                    size: data.length
                }, props));
                _this12._k2n[key].node = node;
                return node;
            });
        };

        return loop(this.props.dataSource);
    };

    Tree.prototype.renderByChildren = function renderByChildren() {
        var _this13 = this;

        var rtl = this.props.rtl;

        var loop = function loop(children) {
            var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '0';

            return _react.Children.map(children, function (child, index) {
                if (!_react2.default.isValidElement(child)) {
                    return;
                }
                var pos = prefix + '-' + index;
                var key = child.key || pos;
                var props = _this13.getNodeProps('' + key);
                if (child.props.children) {
                    props.children = loop(child.props.children, pos);
                }

                props._key = key;
                props.rtl = rtl;
                props.size = _react.Children.count(children);

                var node = (0, _react.cloneElement)(child, props);
                _this13._k2n[key].node = node;
                return node;
            });
        };

        return loop(this.props.children);
    };

    Tree.prototype.render = function render() {
        var _cx;

        var _props4 = this.props,
            prefix = _props4.prefix,
            rtl = _props4.rtl,
            className = _props4.className,
            dataSource = _props4.dataSource,
            showLine = _props4.showLine,
            isNodeBlock = _props4.isNodeBlock,
            isLabelBlock = _props4.isLabelBlock,
            multiple = _props4.multiple;

        var others = pickOthers(Object.keys(Tree.propTypes), this.props);

        if (rtl) {
            others.dir = 'rtl';
        }

        var newClassName = (0, _classnames2.default)((_cx = {}, _cx[prefix + 'tree'] = true, _cx[prefix + 'label-block'] = isLabelBlock, _cx[prefix + 'node-block'] = isNodeBlock, _cx[prefix + 'node-indent'] = !isNodeBlock, _cx[prefix + 'show-line'] = !isNodeBlock && showLine, _cx[className] = !!className, _cx));

        return _react2.default.createElement(
            'ul',
            (0, _extends3.default)({
                role: 'tree',
                'aria-multiselectable': multiple,
                onBlur: this.handleBlur,
                className: newClassName
            }, others),
            dataSource ? this.renderByDataSource() : this.renderByChildren()
        );
    };

    return Tree;
}(_react.Component), _class.propTypes = {
    prefix: _propTypes2.default.string,
    rtl: _propTypes2.default.bool,
    pure: _propTypes2.default.bool,
    className: _propTypes2.default.string,
    /**
     * 树节点
     */
    children: _propTypes2.default.node,
    /**
     * 数据源，该属性优先级高于 children
     */
    dataSource: _propTypes2.default.array,
    /**
     * 是否显示树的线
     */
    showLine: _propTypes2.default.bool,
    /**
     * 是否支持选中节点
     */
    selectable: _propTypes2.default.bool,
    /**
     * （用于受控）当前选中节点 key 的数组
     */
    selectedKeys: _propTypes2.default.arrayOf(_propTypes2.default.string),
    /**
     * （用于非受控）默认选中节点 key 的数组
     */
    defaultSelectedKeys: _propTypes2.default.arrayOf(_propTypes2.default.string),
    /**
     * 选中或取消选中节点时触发的回调函数
     * @param {Array} selectedKeys 选中节点key的数组
     * @param {Object} extra 额外参数
     * @param {Array} extra.selectedNodes 选中节点的数组
     * @param {Object} extra.node 当前操作的节点
     * @param {Boolean} extra.selected 当前操作是否是选中
     */
    onSelect: _propTypes2.default.func,
    /**
     * 是否支持多选
     */
    multiple: _propTypes2.default.bool,
    /**
     * 是否支持勾选节点的复选框
     */
    checkable: _propTypes2.default.bool,
    /**
     * （用于受控）当前勾选复选框节点 key 的数组或 `{checked: Array, indeterminate: Array}` 的对象
     */
    checkedKeys: _propTypes2.default.oneOfType([_propTypes2.default.arrayOf(_propTypes2.default.string), _propTypes2.default.object]),
    /**
     * （用于非受控）默认勾选复选框节点 key 的数组
     */
    defaultCheckedKeys: _propTypes2.default.arrayOf(_propTypes2.default.string),
    /**
     * 勾选节点复选框是否完全受控（父子节点选中状态不再关联）
     */
    checkStrictly: _propTypes2.default.bool,
    /**
     * 定义选中时回填的方式
     * @enumdesc 返回所有选中的节点, 父子节点都选中时只返回父节点, 父子节点都选中时只返回子节点
     */
    checkedStrategy: _propTypes2.default.oneOf(['all', 'parent', 'child']),
    /**
     * 勾选或取消勾选复选框时触发的回调函数
     * @param {Array} checkedKeys 勾选复选框节点key的数组
     * @param {Object} extra 额外参数
     * @param {Array} extra.checkedNodes 勾选复选框节点的数组
     * @param {Array} extra.checkedNodesPositions 包含有勾选复选框节点和其位置的对象的数组
     * @param {Array} extra.indeterminateKeys 半选复选框节点 key 的数组
     * @param {Object} extra.node 当前操作的节点
     * @param {Boolean} extra.checked 当前操作是否是勾选
     */
    onCheck: _propTypes2.default.func,
    /**
     * （用于受控）当前展开的节点 key 的数组
     */
    expandedKeys: _propTypes2.default.arrayOf(_propTypes2.default.string),
    /**
     * （用于非受控）默认展开的节点 key 的数组
     */
    defaultExpandedKeys: _propTypes2.default.arrayOf(_propTypes2.default.string),
    /**
     * 是否默认展开所有节点
     */
    defaultExpandAll: _propTypes2.default.bool,
    /**
     * 是否自动展开父节点
     */
    autoExpandParent: _propTypes2.default.bool,
    /**
     * 展开或收起节点时触发的回调函数
     * @param {Array} expandedKeys 展开的节点key的数组
     * @param {Object} extra 额外参数
     * @param {Object} extra.node 当前操作的节点
     * @param {Boolean} extra.expanded 当前操作是否是展开
     */
    onExpand: _propTypes2.default.func,
    /**
     * 是否支持编辑节点内容
     */
    editable: _propTypes2.default.bool,
    /**
     * 编辑节点内容完成时触发的回调函数
     * @param {String} key 编辑节点的 key
     * @param {String} label 编辑节点完成时节点的文本
     * @param {Object} node 当前编辑的节点
     */
    onEditFinish: _propTypes2.default.func,
    /**
     * 是否支持拖拽节点
     */
    draggable: _propTypes2.default.bool,
    /**
     * 开始拖拽节点时触发的回调函数
     * @param {Object} info 拖拽信息
     * @param {Object} info.event 事件对象
     * @param {Object} info.node 拖拽的节点
     */
    onDragStart: _propTypes2.default.func,
    /**
     * 拖拽节点进入目标节点时触发的回调函数
     * @param {Object} info 拖拽信息
     * @param {Object} info.event 事件对象
     * @param {Object} info.node 目标节点
     * @param {Array} info.expandedKeys 当前展开的节点key的数组
     */
    onDragEnter: _propTypes2.default.func,
    /**
     * 拖拽节点在目标节点上移动的时候触发的回调函数
     * @param {Object} info 拖拽信息
     * @param {Object} info.event 事件对象
     * @param {Object} info.node 目标节点
     */
    onDragOver: _propTypes2.default.func,
    /**
     * 拖拽节点离开目标节点时触发的回调函数
     * @param {Object} info 拖拽信息
     * @param {Object} info.event 事件对象
     * @param {Object} info.node 目标节点
     */
    onDragLeave: _propTypes2.default.func,
    /**
     * 拖拽节点拖拽结束时触发的回调函数
     * @param {Object} info 拖拽信息
     * @param {Object} info.event 事件对象
     * @param {Object} info.node 目标节点
     */
    onDragEnd: _propTypes2.default.func,
    /**
     * 拖拽节点放入目标节点内或前后触发的回调函数
     * @param {Object} info 拖拽信息
     * @param {Object} info.event 事件对象
     * @param {Object} info.node 目标节点
     * @param {Object} info.dragNode 拖拽的节点
     * @param {Array} info.dragNodesKeys 拖拽的节点和其子节点 key 的数组
     * @param {Number} info.dropPosition 放置位置，-1代表当前节点前，0代表当前节点里，1代表当前节点后
     */
    onDrop: _propTypes2.default.func,
    /**
     * 节点是否可被作为拖拽的目标节点
     * @param {Object} info 拖拽信息
     * @param {Object} info.node 目标节点
     * @param {Object} info.dragNode 拖拽的节点
     * @param {Array} info.dragNodesKeys 拖拽的节点和其子节点 key 的数组
     * @param {Number} info.dropPosition 放置位置，-1代表当前节点前，0代表当前节点里，1代表当前节点后
     * @return {Boolean} 是否可以被当作目标节点
     */
    canDrop: _propTypes2.default.func,
    /**
     * 异步加载数据的函数
     * @param {Object} node 被点击展开的节点
     */
    loadData: _propTypes2.default.func,
    /**
     * 按需筛选高亮节点
     * @param {Object} node 待筛选的节点
     * @return {Boolean} 是否被筛选中
     */
    filterTreeNode: _propTypes2.default.func,
    /**
     * 右键点击节点时触发的回调函数
     * @param {Object} info 信息对象
     * @param {Object} info.event 事件对象
     * @param {Object} info.node 点击的节点
     */
    onRightClick: _propTypes2.default.func,
    /**
     * 设置节点是否占满剩余空间，一般用于统一在各节点右侧添加元素(借助 flex 实现，暂时只支持 ie10+)
     */
    isLabelBlock: _propTypes2.default.bool,
    /**
     * 设置节点是否占满一行
     */
    isNodeBlock: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.object]),
    /**
     * 是否开启展开收起动画
     */
    animation: _propTypes2.default.bool,
    /**
     * 当前获得焦点的子菜单或菜单项 key 值
     */
    focusedKey: _propTypes2.default.string,
    focusable: _propTypes2.default.bool,
    autoFocus: _propTypes2.default.bool,
    onItemFocus: _propTypes2.default.func,
    onBlur: _propTypes2.default.func,
    onItemKeyDown: _propTypes2.default.func
}, _class.defaultProps = {
    prefix: 'next-',
    rtl: false,
    pure: false,
    showLine: false,
    selectable: true,
    editable: false,
    multiple: false,
    checkable: false,
    checkStrictly: false,
    checkedStrategy: 'all',
    draggable: false,
    autoExpandParent: true,
    defaultExpandAll: false,
    defaultExpandedKeys: [],
    defaultCheckedKeys: [],
    defaultSelectedKeys: [],
    onExpand: noop,
    onCheck: noop,
    onSelect: noop,
    onDragStart: noop,
    onDragEnter: noop,
    onDragOver: noop,
    onDragLeave: noop,
    onDragEnd: noop,
    onDrop: noop,
    canDrop: function canDrop() {
        return true;
    },
    onEditFinish: noop,
    onRightClick: noop,
    isLabelBlock: false,
    isNodeBlock: false,
    animation: true,
    focusable: true,
    autoFocus: false,
    onItemFocus: noop,
    onItemKeyDown: noop
}, _temp);
Tree.displayName = 'Tree';
exports.default = Tree;
module.exports = exports['default'];