chowa/es/tree/tree-node-list.js

UI component library based on React

/**
 * @license chowa v1.1.3
 *
 * Copyright (c) Chowa Techonlogies Co.,Ltd.(http://www.chowa.cn).
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const classNames = require("classnames");
const icon_1 = require("../icon");
const checkbox_1 = require("../checkbox");
const transition_1 = require("../transition");
const spin_1 = require("../spin");
const utils_1 = require("../utils");
const tree_node_default_wrapper_1 = require("./tree-node-default-wrapper");
const tree_node_drag_wrapper_1 = require("./tree-node-drag-wrapper");
class TreeNodeList extends React.PureComponent {
    hightlightTitle(title) {
        const { searchValue } = this.props;
        const replaceChar = '#';
        const strs = title.replace(new RegExp(searchValue, 'gm'), replaceChar).split('');
        const nodes = [];
        strs.reduce((pre, cur, index) => {
            if (cur === replaceChar) {
                pre.push(React.createElement("span", { key: index, className: utils_1.preClass('tree-hightlight') }, searchValue));
            }
            else {
                pre.push(cur);
            }
            return pre;
        }, nodes);
        return nodes;
    }
    renderNode(node, key) {
        const { title, index, disabled, icon, children, checkable, disabledCheck, hasChildren } = node;
        const { parentIndexs, globalDisabled, globalCheckable, fetchingIndexs, expandIndexs, selectable, selectedIndexs, checkedIndexs, formatter, onSelectHandler, onCheckHandler, onLoadDataHandler, onExpandHandler, indeterminateIndexs, checkStrictly, onContextMenu, searchable, searchValue, draggable, dragSorter } = this.props;
        const selfIndexs = [].concat(parentIndexs, key);
        const fetching = fetchingIndexs.includes(index);
        const childVisible = expandIndexs.includes(index);
        const isCheckable = globalCheckable && checkable;
        const isDisabled = globalDisabled || disabled;
        const leafNodeAmount = children.length;
        const switcherEventHandler = hasChildren && leafNodeAmount === 0
            ? onLoadDataHandler.bind(this, node, selfIndexs)
            : fetching ? null : onExpandHandler.bind(this, node);
        const wrapperAttr = Object.assign({ className: utils_1.preClass('tree-node-wrapper'), onContextMenu: onContextMenu ? onContextMenu.bind(this, node) : null }, (draggable ? {
            selfIndexs,
            node,
            onExpandHandler,
            expandIndexs,
            dragSorter
        } : {}));
        const Wrapper = draggable ? tree_node_drag_wrapper_1.default : tree_node_default_wrapper_1.default;
        const switcherClass = classNames({
            [utils_1.preClass('tree-fetching')]: fetching,
            [utils_1.preClass('tree-arrow')]: !fetching,
            [utils_1.preClass('tree-arrow-active')]: !fetching && childVisible
        });
        const titleClass = classNames({
            [utils_1.preClass('tree-title')]: true,
            [utils_1.preClass('tree-disabled')]: isDisabled,
            [utils_1.preClass('tree-selectable')]: selectable,
            [utils_1.preClass('tree-selected')]: selectedIndexs.includes(index)
        });
        return (React.createElement("li", { key: index, className: utils_1.preClass('tree-child-node') },
            React.createElement(Wrapper, Object.assign({}, wrapperAttr),
                (leafNodeAmount > 0 || hasChildren) &&
                    React.createElement("span", { className: switcherClass, onClick: switcherEventHandler },
                        fetching && React.createElement(spin_1.default, null),
                        !fetching && React.createElement(icon_1.default, { type: 'arrow-right-insert' })),
                isCheckable &&
                    React.createElement(checkbox_1.default, { disabled: isDisabled || disabledCheck, checked: checkedIndexs.includes(index), indeterminate: !checkStrictly && indeterminateIndexs.includes(index), onChange: onCheckHandler.bind(this, node), className: utils_1.preClass('tree-checkbox') }),
                React.createElement("span", { className: titleClass, onClick: isDisabled || !selectable ? null : onSelectHandler.bind(this, node) },
                    utils_1.isExist(icon) &&
                        React.createElement("span", { className: utils_1.preClass('tree-custom-icon') }, icon),
                    formatter
                        ? formatter(node)
                        : searchable && searchValue
                            ? this.hightlightTitle(title)
                            : title)),
            leafNodeAmount > 0 &&
                React.createElement(transition_1.default, { appear: utils_1.preClass('slide-down-appear'), leave: utils_1.preClass('slide-down-leave'), enter: utils_1.preClass('slide-down-enter'), visible: childVisible },
                    React.createElement("div", { className: utils_1.preClass('tree-expand-wrapper') },
                        React.createElement(TreeNodeList, Object.assign({}, this.props, { nodes: children, parentIndexs: selfIndexs }))))));
    }
    render() {
        const { nodes } = this.props;
        return (React.createElement("ul", { className: utils_1.preClass('tree-node-list') }, nodes.map((item, key) => this.renderNode(item, key))));
    }
}
exports.default = TreeNodeList;