sd-treeview
Version:
simple folders and files view in tree-view formate
82 lines • 4.71 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const GlobalStore_1 = require("./store/GlobalStore");
const Folder = (props) => {
const { treeStructure, folderClick, expandIcon, collapseIcon, closeIcon, openIcon, clickBackground, } = props;
const [vheight, setvheight] = (0, react_1.useState)(treeStructure);
const changeSpan = (index) => {
let treeValue = [...vheight];
treeValue[index].isPress = !treeValue[index].isPress;
setvheight(treeValue);
};
const textClick = (item, index) => {
GlobalStore_1.GlobalStore.setclickStoreAddress(item.name);
let treeValue = [...vheight];
treeValue[index].istextPress = true;
setvheight((_) => treeValue);
if (folderClick !== undefined) {
folderClick(item.address, item.name);
}
};
return (react_1.default.createElement(react_1.default.Fragment, null, treeStructure.map((item, index) => {
let icon = "";
let folderIcon = "";
if (item.istextPress &&
item.name !== GlobalStore_1.GlobalStore.getclickStoreAddress()) {
item.istextPress = false;
}
if (item.isPress) {
icon = expandIcon === undefined ? "⮛" : expandIcon;
folderIcon = openIcon === undefined ? "🗁" : openIcon;
}
else {
icon = collapseIcon === undefined ? "⮚" : collapseIcon;
folderIcon = closeIcon === undefined ? "🗀" : closeIcon;
for (let i = 0; i < item.children.length; i++) {
let child = item.children[i];
if (child.folder) {
child.isPress = false;
}
}
}
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", null,
react_1.default.createElement("li", null,
react_1.default.createElement("div", { style: item.istextPress
? {
marginLeft: "-18px",
backgroundColor: clickBackground,
}
: { marginLeft: "-19px" } },
react_1.default.createElement("span", { className: "folder", onClick: () => textClick(item, index) },
react_1.default.createElement("span", { className: "arrow", onClick: () => changeSpan(index) }, icon),
react_1.default.createElement("span", { className: "folderIcon-css" }, folderIcon),
item.name)),
item.isPress ? (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("ul", { className: "nested" }, item.children.map((fileItem) => {
var _a, _b, _c, _d;
return (react_1.default.createElement(react_1.default.Fragment, null, !fileItem.folder ? (react_1.default.createElement("li", { className: "file-html", style: fileItem.textCss !==
undefined
? {
color: (_a = fileItem.textCss) === null || _a === void 0 ? void 0 : _a.color,
fontSize: (_b = fileItem
.textCss) === null || _b === void 0 ? void 0 : _b.size,
}
: {} },
react_1.default.createElement("span", { style: fileItem.iconCss !==
undefined
? {
color: (_c = fileItem
.iconCss) === null || _c === void 0 ? void 0 : _c.color,
fontSize: (_d = fileItem
.iconCss) === null || _d === void 0 ? void 0 : _d.size,
}
: {} }, fileItem.icon),
fileItem.name)) : (react_1.default.createElement(Folder, { treeStructure: [fileItem], folderClick: folderClick, expandIcon: expandIcon, collapseIcon: collapseIcon, closeIcon: closeIcon, openIcon: openIcon, clickBackground: clickBackground }))));
})))) : null))));
})));
};
exports.default = Folder;
//# sourceMappingURL=folder.js.map