@git-temporal/git-temporal-react
Version:
<!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
83 lines (82 loc) • 3.72 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const styles_1 = require("app/styles");
const CaretDownIcon_1 = require("app/components/CaretDownIcon");
const CaretRightIcon_1 = require("app/components/CaretRightIcon");
const FileIcon_1 = require("app/components/FileIcon");
const CommaNumber_1 = require("app/components/CommaNumber");
const outerStyle = {
transition: 'all 1s ease',
flexGrow: 1,
};
const directoryNodeStyle = {
display: 'block',
marginLeft: 20,
};
const treeNodeStyle = {
_extends: 'normalText',
marginLeft: 10,
};
const fileNameStyle = {
_extends: 'normalText',
textDecoration: 'underline',
cursor: 'pointer',
};
const deltaStyle = {
_extends: 'smallerText',
float: 'right',
};
class DirectoryTree extends react_1.default.Component {
render() {
return (react_1.default.createElement("div", { style: styles_1.style(outerStyle, this.props.style), "data-testid": "directoryTree" }, this.renderTree(this.props.fileTree)));
}
renderTree(treeNode, key = 0) {
let renderedTreeNodes = [];
let index = 0;
for (const nodeName in treeNode) {
index += 1;
const childNode = treeNode[nodeName];
const isExpanded = this.props.expandedNodes.includes(childNode.fullPath) ||
Object.keys(childNode.nodes).length <= 1 ||
Object.keys(treeNode).length <= 1;
renderedTreeNodes.push(this.isFile(childNode)
? this.renderFileTreeNode(childNode, nodeName, key + index)
: this.renderDirectoryTreeNode(childNode, nodeName, isExpanded, key + index));
if (isExpanded) {
renderedTreeNodes = renderedTreeNodes.concat(this.renderTree(childNode.nodes, key + index));
}
}
return (react_1.default.createElement("div", { style: directoryNodeStyle, key: key + index + 1 }, renderedTreeNodes));
}
renderFileTreeNode(childNode, nodeName, key) {
return this.renderTreeNode(childNode, nodeName, FileIcon_1.FileIcon, key, () => {
this.props.onFileClick(childNode.fullPath);
});
}
renderDirectoryTreeNode(childNode, nodeName, isExpanded, key) {
return this.renderTreeNode(childNode, nodeName, isExpanded ? CaretDownIcon_1.CaretDownIcon : CaretRightIcon_1.CaretRightIcon, key, () => {
this.props.onExpandNode(childNode.fullPath);
});
}
renderTreeNode(childNode, nodeName, Icon, key, onClick) {
const nodeStyle = Object.assign({}, treeNodeStyle);
nodeStyle.color = `@colors.${childNode.status}`;
const nameStyle = this.isFile(childNode) ? fileNameStyle : {};
return (react_1.default.createElement("div", { key: key, style: styles_1.style(nodeStyle), onClick: onClick, "data-testid": "directoryTreeNode" },
react_1.default.createElement(Icon, { height: 14, width: 14 }),
' ',
react_1.default.createElement("span", { style: styles_1.style(nameStyle, { color: nodeStyle.color }), title: "click to filter" }, nodeName),
' ',
react_1.default.createElement("div", { style: styles_1.style(deltaStyle) },
react_1.default.createElement(CommaNumber_1.CommaNumber, { value: childNode.delta || 0 }),
"\uD835\uDEAB")));
}
isFile(childNode) {
return !childNode.nodes || Object.keys(childNode.nodes).length === 0;
}
}
exports.DirectoryTree = DirectoryTree;