eyzy-tree/dist/eyzy-tree.esm.js

/*!
 * EyzyTree v0.0.4
 * (c) 2018 amsik
 * Released under the MIT License.
 */

import React from 'react';

/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0

THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.

See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */

var extendStatics = function(d, b) {
    extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return extendStatics(d, b);
};

function __extends(d, b) {
    extendStatics(d, b);
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}

var __assign = function() {
    __assign = Object.assign || function __assign(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};

var hasOwn = {}.hasOwnProperty;
function cn(args) {
    var result = [];
    for (var key in args) {
        if (hasOwn.call(args, key) && args[key]) {
            result.push(key);
        }
    }
    return result.join(' ');
}

function shallowEqual(objA, objB, keys) {
    if (objA === objB) {
        return true;
    }
    for (var i = 0; i < keys.length; i++) {
        var key = keys[i];
        var valueA = objA[key];
        var valueB = objB[key];
        if (valueA !== valueB) {
            return false;
        }
    }
    return true;
}

var hasChild = function (node) {
    return node.isBatch || Array.isArray(node.child) && node.child.length > 0;
};
var comparingKeys = [
    'id', 'checked', 'selected', 'child'
];
var TreeNode = /** @class */ (function (_super) {
    __extends(TreeNode, _super);
    function TreeNode() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.handleSelect = function (event) {
            if (_this.props.disabled) {
                return;
            }
            if (_this.props.onSelect) {
                _this.props.onSelect(_this.getNode(), event);
            }
        };
        _this.handleCheck = function () {
            if (_this.props.disabled || _this.props.disabledCheckbox) {
                return;
            }
            if (_this.props.onCheck) {
                _this.props.onCheck(_this.getNode());
            }
        };
        _this.handleExpand = function () {
            if (_this.props.onExpand) {
                _this.props.onExpand(_this.getNode());
            }
        };
        _this.handleDoubleClick = function (e) {
            if (_this.props.onDoubleClick) {
                _this.props.onDoubleClick(_this.getNode());
            }
        };
        _this.renderCheckbox = function () {
            if (!_this.props.checkable || _this.props.hidenCheckbox) {
                return null;
            }
            var Checkbox = _this.props.checkboxRenderer;
            if (!Checkbox) {
                return React.createElement("span", { className: "node-checkbox", onMouseUp: _this.handleCheck });
            }
            return (React.createElement("span", { className: "node-checkbox-overrided", onMouseUp: _this.handleCheck },
                React.createElement(Checkbox, { node: _this.getNode() })));
        };
        _this.renderArrow = function () {
            var ArrowRenderer = _this.props.arrowRenderer;
            if (!hasChild(_this.props)) {
                return React.createElement("span", { className: "node-noop" });
            }
            if (!ArrowRenderer) {
                return React.createElement("span", { className: "node-arrow", onMouseUp: _this.handleExpand });
            }
            return (React.createElement("span", { className: "node-arrow-extended", onMouseUp: _this.handleExpand },
                React.createElement(ArrowRenderer, { node: _this.getNode() })));
        };
        return _this;
    }
    TreeNode.prototype.shouldComponentUpdate = function (nextProps) {
        return !shallowEqual(this.props, nextProps, comparingKeys);
    };
    TreeNode.prototype.getNode = function () {
        var _a = this.props, id = _a.id, checked = _a.checked, selected = _a.selected, text = _a.text, child = _a.child, expanded = _a.expanded, disabled = _a.disabled, parent = _a.parent, isBatch = _a.isBatch;
        var node = {
            id: id,
            checked: checked,
            selected: selected,
            text: text,
            child: child,
            parent: parent
        };
        if (void 0 !== expanded) {
            node.expanded = expanded;
        }
        if (void 0 !== disabled) {
            node.disabled = disabled;
        }
        if (void 0 !== isBatch) {
            node.isBatch = isBatch;
        }
        return node;
    };
    TreeNode.prototype.render = function () {
        var _a = this.props, loading = _a.loading, checked = _a.checked, selected = _a.selected, children = _a.children, expanded = _a.expanded, disabled = _a.disabled, disabledCheckbox = _a.disabledCheckbox, indeterminate = _a.indeterminate, TextRenderer = _a.textRenderer;
        var text = this.props.text;
        var nodeContentClass = cn({
            'node-content': true,
            'has-child': hasChild(this.props),
            'selected': selected,
            'checked': checked,
            'expanded': expanded,
            'disabled': disabled,
            'loading': loading,
            'disabled-checkbox': disabledCheckbox,
            'indeterminate': !checked && indeterminate
        });
        // console.log('RENDERING:', text)
        return (React.createElement("li", { className: "tree-node" },
            React.createElement("div", { className: nodeContentClass },
                this.renderArrow(),
                this.renderCheckbox(),
                React.createElement("span", { className: "node-text", onMouseUp: this.handleSelect, onDoubleClick: this.handleDoubleClick }, TextRenderer ? React.createElement(TextRenderer, { node: this.getNode() }) : text)),
            hasChild(this.props) && expanded &&
                React.createElement("ul", { className: "node-child" }, children)));
    };
    return TreeNode;
}(React.Component));

function recurseDown(obj, fn, excludeSelf) {
    var res;
    if (Array.isArray(obj)) {
        return obj.map(function (node) { return recurseDown(node, fn); });
    }
    if (obj[0]) {
        return Object.keys(obj).map(function (key) { return recurseDown(obj[key], fn); });
    }
    if (!excludeSelf) {
        res = fn(obj);
    }
    if (res !== false && obj.child && obj.child.length) {
        res = recurseDown(obj.child, fn);
    }
    return res;
}
function rootElement(obj) {
    var node = obj.parent;
    while (node) {
        if (!node.parent) {
            return node;
        }
        node = node.parent;
    }
    return null;
}
function traverseUp(obj, fn) {
    var node = obj.parent;
    while (node) {
        if (false === fn(node) || !node.parent) {
            return;
        }
        node = node.parent;
    }
}

var hasOwnProp = {}.hasOwnProperty;
function isArray(obj) {
    return Array.isArray(obj);
}
function isFunction(value) {
    return 'function' === typeof value;
}
function copyArray(arr) {
    return arr.concat([]);
}
function copyObject(obj) {
    var newObj = {};
    for (var i in obj) {
        if (hasOwnProp.call(obj, i)) {
            newObj[i] = isArray(obj[i]) ? copyArray(obj[i]) : obj[i];
        }
    }
    return newObj;
}
function isRoot(node) {
    return node && !node.parent;
}
function isLeaf(node) {
    return node.child && 0 === node.child.length;
}
function isNodeIndeterminate(node, treeCheckedNodes, indeterminateNodes) {
    if (!node.child.length) {
        return false;
    }
    var hasIndeterminate = node.child.some(function (child) {
        return !child.disabled && !child.disabledCheckbox && -1 !== indeterminateNodes.indexOf(child.id);
    });
    if (hasIndeterminate) {
        return true;
    }
    var uncheckedNodes = node.child.reduce(function (count, item) {
        if (true !== item.disabled && true !== item.disabledCheckbox && -1 === treeCheckedNodes.indexOf(item.id)) {
            count++;
        }
        return count;
    }, 0);
    return uncheckedNodes > 0 && uncheckedNodes < node.child.length;
}

function replaceChild(node) {
    if (!node || !node.child) {
        return node;
    }
    node.child = copyArray(node.child);
    node.child.forEach(function (child) {
        var replaced = replaceChild(child);
        replaced.parent = node;
        return replaced;
    });
    return node;
}
function getItemById(id, targetState) {
    return Object.keys(targetState)
        .find(function (k) { return targetState[k].id === id; }) || null;
}
function getNodeIndex(nodeId, parent, nodesLength) {
    if (parent.child) {
        var childIndex_1 = null;
        parent.child.some(function (node, i) {
            if (nodeId === node.id) {
                childIndex_1 = i;
                return true;
            }
            return false;
        });
        return childIndex_1;
    }
    for (var i = 0; i < nodesLength; i++) {
        if (parent[i].id === nodeId) {
            return i;
        }
    }
    return null;
}
function updateChildNodes(parentNode) {
    parentNode.child.forEach(function (child) {
        child.parent = parentNode;
    });
    return parentNode;
}
var State = /** @class */ (function () {
    function State(state, stateLength) {
        this.state = state;
        this.stateLength = stateLength;
    }
    State.prototype.updateRootNode = function (node, key, value) {
        var i = getItemById(node.id, this.state);
        var newObj = copyObject(node);
        if (key) {
            node[key] = value;
            newObj[key] = value;
        }
        if (null !== i) {
            this.state[i] = updateChildNodes(newObj);
        }
    };
    State.prototype.updateLeafNode = function (node, key, value) {
        var root = rootElement(node);
        var parentNode = node.parent;
        if (!parentNode || !root || !parentNode.child) {
            return;
        }
        var index = getNodeIndex(node.id, parentNode, this.stateLength);
        if (null === index) {
            return;
        }
        node[key] = value;
        parentNode.child[index][key] = value;
        this.updateRootNode(replaceChild(root));
    };
    State.prototype.set = function (id, key, value) {
        var node = this.getNodeById(id);
        if (!node) {
            return this.state;
        }
        if (isRoot(node)) {
            this.updateRootNode(node, key, value);
        }
        else {
            this.updateLeafNode(node, key, value);
        }
        return this.state;
    };
    State.prototype.getNodeById = function (id) {
        var node = null;
        recurseDown(this.state, function (obj) {
            if (obj.id === id) {
                node = obj;
                return false;
            }
        });
        return node;
    };
    State.prototype.get = function () {
        return this.state;
    };
    return State;
}());

function s4() {
    return Math.floor((1 + Math.random()) * 0x10000)
        .toString(16)
        .substring(1);
}
function uuid() {
    return s4() + '-' + s4();
}

function parseNode(data, parentNode) {
    if (!data || !Array.isArray(data)) {
        return [];
    }
    var parent = parentNode || null;
    if ('string' === typeof data) {
        return [
            { text: data, id: uuid(), parent: parent, child: [] }
        ];
    }
    return data.map(function (node) {
        if ('string' === typeof node) {
            return {
                id: uuid(),
                text: node,
                parent: parent,
                child: []
            };
        }
        node.id = node.id || uuid();
        node.child = Array.isArray(node.child)
            ? parseNode(node.child, node)
            : [];
        node.parent = parent;
        return node;
    });
}

var EyzyTree = /** @class */ (function (_super) {
    __extends(EyzyTree, _super);
    function EyzyTree(props) {
        var _this = _super.call(this, props) || this;
        _this.stateCache = null;
        _this.selectedNodes = [];
        _this.checkedNodes = [];
        _this.indeterminateNodes = [];
        _this.refreshIndeterminateState = function (id, willBeChecked, shouldRender) {
            var checkedNodes = copyArray(_this.checkedNodes);
            var indeterminateNodes = copyArray(_this.indeterminateNodes);
            var state = _this.getState();
            var childIds = [];
            var node = state.getNodeById(id);
            if (!node) {
                return;
            }
            recurseDown(node, function (child) {
                if (!child.disabled && !child.disabledCheckbox && id !== child.id) {
                    childIds.push(child.id);
                }
            });
            if (willBeChecked) {
                checkedNodes.push.apply(checkedNodes, childIds);
            }
            else {
                checkedNodes = checkedNodes.filter(function (nodeId) { return !~childIds.indexOf(nodeId); });
            }
            traverseUp(node, function (parentNode) {
                if (parentNode.disabledCheckbox || parentNode.disabled) {
                    return false;
                }
                var isIndeterminate = isNodeIndeterminate(parentNode, checkedNodes, indeterminateNodes);
                var id = parentNode.id;
                if (isIndeterminate) {
                    !~indeterminateNodes.indexOf(id) && indeterminateNodes.push(id);
                    checkedNodes = checkedNodes.filter(function (nodeId) { return nodeId !== id; });
                }
                else {
                    indeterminateNodes = indeterminateNodes.filter(function (nodeId) { return nodeId !== id; });
                    if (willBeChecked) {
                        checkedNodes.push(id);
                    }
                    else {
                        checkedNodes = checkedNodes.filter(function (nodeId) { return nodeId !== id; });
                    }
                }
            });
            indeterminateNodes = indeterminateNodes.filter(function (nodeId) { return !~checkedNodes.indexOf(nodeId); });
            _this.checkedNodes.forEach(function (id) {
                if (-1 !== _this.checkedNodes.indexOf(id)) {
                    state.set(id, 'checked', false);
                }
            });
            _this.indeterminateNodes.forEach(function (id) {
                if (-1 !== _this.indeterminateNodes.indexOf(id)) {
                    state.set(id, 'indeterminate', false);
                }
            });
            checkedNodes.forEach(function (id) { return state.set(id, 'checked', true); });
            indeterminateNodes.forEach(function (id) { return state.set(id, 'indeterminate', true); });
            _this.checkedNodes = checkedNodes;
            _this.indeterminateNodes = indeterminateNodes;
            if (false !== shouldRender) {
                _this.updateState(state, true);
            }
        };
        _this.getState = function () {
            return _this.stateCache || new State(_this.state, _this.stateLength);
        };
        _this.updateState = function (state, clearCache) {
            if (clearCache) {
                _this.setState(state);
                _this.stateCache = null;
                return;
            }
            if (_this.stateCache) {
                return;
            }
            _this.setState(state);
        };
        _this.useState = function (state, cb) {
            _this.stateCache = state;
            cb();
        };
        _this.select = function (node, ignoreEvent) {
            var state = _this.getState();
            _this.selectedNodes = _this.selectedNodes.filter(function (nodeId) {
                var node = state.getNodeById(nodeId);
                if (node) {
                    state.set(node.id, 'selected', false);
                    if (true !== ignoreEvent && _this.props.onUnSelect) {
                        _this.props.onUnSelect(node);
                    }
                }
                return false;
            });
            state.set(node.id, 'selected', true);
            _this.selectedNodes.push(node.id);
            _this.updateState(state.get());
            if (true !== ignoreEvent && _this.props.onSelect) {
                _this.props.onSelect(node);
            }
        };
        _this.check = function (node) {
            var state = _this.getState();
            var willBeChecked = !node.checked;
            var id = node.id;
            state.set(id, 'checked', willBeChecked);
            if (willBeChecked) {
                _this.checkedNodes = _this.checkedNodes.concat([id]);
            }
            else {
                _this.checkedNodes = _this.checkedNodes.filter(function (checkedId) { return id !== checkedId; });
            }
            if (_this.props.selectOnCheck) {
                _this.useState(state, function () {
                    _this.select(node);
                });
            }
            if (_this.props.autoCheckChildren !== false) {
                _this.useState(state, function () {
                    _this.refreshIndeterminateState(node.id, willBeChecked);
                });
            }
            else {
                _this.updateState(state.get(), true);
            }
            if (_this.props.onCheck) {
                _this.props.onCheck(node);
            }
        };
        _this.expand = function (node) {
            if (node.isBatch) {
                return _this.loadChild(node);
            }
            if (!node.child.length) {
                return;
            }
            var state = _this.getState();
            state.set(node.id, 'expanded', !node.expanded);
            if (_this.props.selectOnExpand && !node.selected) {
                _this.useState(state, function () {
                    _this.select(node);
                });
            }
            _this.updateState(state.get(), true);
            if (_this.props.onExpand) {
                _this.props.onExpand(node, !!node.expanded);
            }
        };
        _this.handleDoubleClick = function (node) {
            if (node.disabled || !node.child.length || _this.props.expandOnSelect) {
                return;
            }
            _this.expand(node);
            if (_this.props.onDoubleClick) {
                _this.props.onDoubleClick(node);
            }
        };
        _this.handleSelect = function (node, event) {
            _this.select(node);
            var _a = _this.props, checkOnSelect = _a.checkOnSelect, expandOnSelect = _a.expandOnSelect, checkable = _a.checkable;
            if (checkable && checkOnSelect && !node.disabledCheckbox) {
                _this.check(node);
            }
            else if (expandOnSelect) {
                _this.expand(node);
            }
        };
        _this.loadChild = function (node) {
            var fetchData = _this.props.fetchData;
            if (!fetchData || !isFunction(fetchData)) {
                return;
            }
            var result = fetchData(node);
            if (!result || !result.then) {
                throw new Error('`fetchData` property must return a Promise');
            }
            var state = _this.getState();
            var autoCheckChildren = _this.props.autoCheckChildren;
            var id = node.id;
            state.set(id, 'loading', true);
            result.then(function (nodes) {
                var child = parseNode(nodes).map(function (obj) {
                    obj.parent = node;
                    return obj;
                });
                state.set(id, 'loading', false);
                state.set(id, 'expanded', true);
                state.set(id, 'isBatch', false);
                state.set(id, 'child', child);
                recurseDown(state.getNodeById(id), function (obj) {
                    if (id == obj.id || !obj.checked) {
                        return;
                    }
                    _this.checkedNodes.push(obj.id);
                    if (!isLeaf(obj) || autoCheckChildren === false) {
                        return;
                    }
                    _this.useState(state, function () {
                        _this.refreshIndeterminateState(obj.id, !!obj.checked, false);
                    });
                });
                _this.updateState(state.get(), true);
            });
            _this.updateState(state.get());
        };
        _this.renderNode = function (node) {
            var treePropsKeys = [
                'checkable', 'arrowRenderer', 'textRenderer', 'checkboxRenderer'
            ];
            var treeProps = treePropsKeys.reduce(function (props, key) {
                if (_this.props[key]) {
                    props[key] = _this.props[key];
                }
                return props;
            }, {});
            return (React.createElement(TreeNode, __assign({ key: node.id, node: node, onSelect: _this.handleSelect, onDoubleClick: _this.handleDoubleClick, onCheck: _this.check, onExpand: _this.expand }, treeProps, node), node.expanded ? node.child.map(_this.renderNode) : null));
        };
        var data = parseNode(props.data);
        var stateObject = {};
        data.forEach(function (item, i) {
            stateObject[i] = item;
        });
        recurseDown(stateObject, function (obj) {
            if (obj.selected) {
                _this.selectedNodes.push(obj.id);
            }
            if (obj.checked) {
                _this.checkedNodes.push(obj.id);
            }
        });
        var state = new State(stateObject, data.length);
        _this.checkedNodes.forEach(function (id) {
            var node = state.getNodeById(id);
            if (node && isLeaf(node) && _this.props.autoCheckChildren !== false) {
                _this.useState(state, function () {
                    _this.refreshIndeterminateState(id, true, false);
                });
            }
        });
        _this.stateLength = data.length;
        _this.state = state.get();
        _this.stateCache = null;
        return _this;
    }
    EyzyTree.prototype.render = function () {
        var nodes = [];
        var props = this.props;
        var treeClass = 'theme' in props
            ? 'eyzy-tree ' + props.theme
            : 'eyzy-tree eyzy-theme';
        for (var i = 0; i < this.stateLength; i++) {
            nodes.push(this.renderNode(this.state[i]));
        }
        return (React.createElement("ul", { className: treeClass }, nodes));
    };
    EyzyTree.TreeNode = TreeNode;
    return EyzyTree;
}(React.Component));

export default EyzyTree;
//# sourceMappingURL=eyzy-tree.esm.js.map