@nu-art/thunder
Version:
Thunder - React & Typescript based frontend framework
128 lines • 6.17 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
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);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var ts_common_1 = require("@nu-art/ts-common");
exports.DefaultTreeRenderer = function (props) {
function renderCollapse() {
var toDisplay = "";
if (typeof props.item !== "object")
toDisplay = "";
else if (Object.keys(props.item).length === 0)
toDisplay = "";
else if (props.expanded)
toDisplay = "-";
else
toDisplay = "+";
return React.createElement("div", { className: "clickable", id: props.path, onClick: props.expandToggler, style: { width: "15px" } }, toDisplay);
}
var label;
if (typeof props.item !== "object")
label = " : " + props.item;
else if (Object.keys(props.item).length === 0)
label = " : {}";
else
label = "";
return (React.createElement("div", { className: "ll_h_c" },
renderCollapse(),
React.createElement("div", { tabIndex: 1, className: " " + (props.onClick || props.onDoubleClick ? 'clickable' : ''), id: props.path, onClick: props.onClick, onDoubleClick: props.onDoubleClick },
props.name || "root",
" ",
label,
" ")));
};
var noAdjuster = function (obj) { return ({ data: obj, deltaPath: "" }); };
var Tree = /** @class */ (function (_super) {
__extends(Tree, _super);
function Tree(props) {
var _this = _super.call(this, props) || this;
_this.recursivelyExpand = function (obj, condition) {
var state = { '/': condition ? condition('/', obj, 0) : false };
return _this.recursivelyExpandImpl(obj, state, condition);
};
_this.recursivelyExpandImpl = function (obj, state, condition, path, level) {
if (path === void 0) { path = "/"; }
if (level === void 0) { level = 1; }
return ts_common_1._keys(obj).reduce(function (_state, key) {
var value = obj[key];
_state["" + path + key + "/"] = condition ? condition(key, value, level) : false;
if (_state["" + path + key + "/"] && typeof value === "object")
_this.recursivelyExpandImpl(value, _state, condition, "" + path + key + "/", level + 1);
return _state;
}, state);
};
_this.toggleExpanded = function (e) {
var path = e.currentTarget.id;
_this.setState(function (prevState) {
var expanded = prevState.expanded[path];
prevState.expanded[path] = !expanded;
prevState.expanded[path + "data/"] = !expanded;
return prevState;
});
};
_this.onNodeClicked = function (e) {
if (!_this.props.onNodeClicked)
return;
var path = e.currentTarget.id;
_this.props.onNodeClicked(path, _this.props.id);
};
_this.onNodeDoubleClicked = function (e) {
if (!_this.props.onNodeDoubleClicked)
return;
var path = e.currentTarget.id;
_this.props.onNodeDoubleClicked(path, _this.props.id);
};
_this.renderNode = function (_data, key, _path, parentArray) {
var data = _data;
var path = "" + _path + key + "/";
var Renderer = _this.props.renderer || exports.DefaultTreeRenderer;
var nodeAdjuster = _this.props.nodeAdjuster || noAdjuster;
var adjustedNode = nodeAdjuster(data);
data = adjustedNode.data;
path = path + (adjustedNode.deltaPath ? adjustedNode.deltaPath + "/" : "");
return React.createElement("div", { key: path },
!(_this.props.hideRootElement && _path.length === 0) &&
React.createElement(Renderer, { name: key, item: data, path: path, expandToggler: _this.toggleExpanded, onClick: _this.onNodeClicked, onDoubleClick: _this.onNodeDoubleClicked, expanded: _this.state.expanded[path], parentArray: parentArray }),
_this.renderChildren(data, path, Array.isArray(data)));
};
_this.renderChildren = function (_data, _path, parentArray) {
var data = _data;
var path = _path;
if (!_this.state.expanded[path])
return null;
if (typeof data !== "object")
return null;
var nodeAdjuster = _this.props.nodeAdjuster || noAdjuster;
var filter = _this.props.propertyFilter || (function () { return true; });
var adjustedNode = nodeAdjuster(data);
data = adjustedNode.data;
path = path + (adjustedNode.deltaPath ? adjustedNode.deltaPath + "/" : "");
var filteredKeys = ts_common_1._keys(data).filter(function (key) { return filter(data, key); });
return React.createElement("div", { style: { marginLeft: _this.props.indentPx } }, filteredKeys.map(function (key) { return _this.renderNode(data[key], key, path, parentArray); }));
};
_this.state = { expanded: _this.recursivelyExpand(_this.props.root, _this.props.callBackState || (function () { return true; })) };
return _this;
}
Tree.prototype.render = function () {
return this.renderNode(this.props.root, "", "");
};
// private static DefaultNodeState: TreeNodeState = {"/":true};
Tree.defaultProps = {
indentPx: 20,
};
return Tree;
}(React.Component));
exports.Tree = Tree;
//# sourceMappingURL=Tree.js.map