JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://fuelcdn.com/fuelux-imh/2.2/css/fuelux.css">
<script src="http://fuelcdn.com/fuelux-imh/2.2/loader.min.js"></script>
<body class="fuelux">
<div id="MyTree" class="tree">
<div class = "tree-folder" style="display:none;">
<div class="tree-folder-header">
<i class="icon-folder-close"></i>
<div class="tree-folder-name"></div>
</div>
<div class="tree-folder-content"></div>
<div class="tree-loader" style="display:none"></div>
</div>
<div class="tree-item" style="display:none;">
<i class="tree-dot"></i>
<div class="tree-item-name"></div>
</div>
</div>
</body>
JavaScript
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(['underscore'], factory);
} else {
root.TreeDataSource = factory();
}
}(this, function () {
var DataSourceTree = function (options) {
this._data = options.data;
this._delay = options.delay;
};
DataSourceTree.prototype = {
data: function (options, callback) {
var self = this;
setTimeout(function () {
var data = $.extend(true, [], self._data);
callback({ data: data });
}, this._delay)
}
};
return DataSourceTree;
}));
var children = {
data: []
};
var Tree = function (element, options) {
this.$element = $(element);
this.options = $.extend({}, $.fn.tree.defaults, options);
this.$element.on('click', '.tree-item', $.proxy(function (ev) { this.selectItem(ev.currentTarget); }, this));
this.$element.on('click', '.tree-folder-header', $.proxy(function (ev) { this.selectFolder(ev.currentTarget); }, this));
this.render();
};
Tree.prototype = {
constructor: Tree,
render: function () {
this.populate(this.$element);
},
populate: function ($el) {
var self = this;
var loader = $el.parent().find('.tree-loader:eq(0)');
loader.show();
this.options.dataSource.data($el.data(), function (items) {
if (children.data.length > 0) items = children;
loader.hide();
$.each(items.data, function(index, value) {
var $entity;
if (value.type === "folder") {
$entity = self.$element.find('.tree-folder:eq(0)').clone().show();
$entity.find('.tree-folder-name').html(value.name);
$entity.find('.tree-loader').html(self.options.loadingHTML);
$entity.find('.tree-folder-header').data(value);
...