xl-infinite-tree/lib/renderer.js

A browser-ready tree library that can efficiently display a large amount of data using infinite scrolling.

'use strict';

exports.__esModule = true;
exports.defaultRowRenderer = undefined;

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _escapeHtml = require('escape-html');

var _escapeHtml2 = _interopRequireDefault(_escapeHtml);

var _html5Tag = require('html5-tag');

var _html5Tag2 = _interopRequireDefault(_html5Tag);

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

var defaultRowRenderer = function defaultRowRenderer(node, treeOptions) {
    var id = node.id,
        name = node.name,
        _node$loadOnDemand = node.loadOnDemand,
        loadOnDemand = _node$loadOnDemand === undefined ? false : _node$loadOnDemand,
        children = node.children,
        state = node.state;

    var droppable = treeOptions.droppable;
    var depth = state.depth,
        open = state.open,
        path = state.path,
        total = state.total,
        _state$selected = state.selected,
        selected = _state$selected === undefined ? false : _state$selected,
        filtered = state.filtered;

    var childrenLength = Object.keys(children).length;
    var more = node.hasChildren();

    if (filtered === false) {
        return '';
    }

    var togglerContent = '';
    if (!more && loadOnDemand) {
        togglerContent = '►';
    }
    if (more && open) {
        togglerContent = '▼';
    }
    if (more && !open) {
        togglerContent = '►';
    }
    var toggler = (0, _html5Tag2['default'])('a', {
        'class': function () {
            if (!more && loadOnDemand) {
                return (0, _classnames2['default'])(treeOptions.togglerClass, 'infinite-tree-closed');
            }
            if (more && open) {
                return (0, _classnames2['default'])(treeOptions.togglerClass);
            }
            if (more && !open) {
                return (0, _classnames2['default'])(treeOptions.togglerClass, 'infinite-tree-closed');
            }
            return '';
        }()
    }, togglerContent);
    var title = (0, _html5Tag2['default'])('span', {
        'class': (0, _classnames2['default'])('infinite-tree-title')
    }, (0, _escapeHtml2['default'])(name));
    var treeNode = (0, _html5Tag2['default'])('div', {
        'class': 'infinite-tree-node',
        'style': 'margin-left: ' + depth * 18 + 'px'
    }, toggler + title);

    return (0, _html5Tag2['default'])('div', {
        'data-id': id,
        'data-expanded': more && open,
        'data-depth': depth,
        'data-path': path,
        'data-selected': selected,
        'data-children': childrenLength,
        'data-total': total,
        'class': (0, _classnames2['default'])('infinite-tree-item', { 'infinite-tree-selected': selected }),
        'droppable': droppable
    }, treeNode);
}; /* eslint import/prefer-default-export: 0 */
exports.defaultRowRenderer = defaultRowRenderer;