oneframe-react
Version:
Oneframe React ## Components, Hooks, Helper Functions & State Management
68 lines (67 loc) • 5.65 kB
JavaScript
"use strict";
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 prop_types_1 = __importDefault(require("prop-types"));
const lab_1 = require("@material-ui/lab");
const react_router_dom_1 = require("react-router-dom");
const lodash_1 = require("lodash");
const styled_1 = require("./styled");
const uuidv4_1 = __importDefault(require("uuidv4"));
const TreeviewComponent = (props) => {
const { options: { data, displayFieldId = 'id', displayFieldLabel = 'name', displayFieldChildren = 'children', displayFieldLink = 'link', displayFieldIcon = 'icon', displayFieldOnClick = 'onClick', }, parentsIcon = undefined, expandIcon = undefined, collapseIcon = undefined, deepItemIcon = undefined, icon = undefined, expandedDataIds = undefined, defaultExpandedDataIds = undefined, onToggle, className = '', iconPosition = 'left', id = '', ref, } = props;
/*eslint-disable*/
const getTreeItemsFromData = (treeItems) => {
return treeItems.map((treeItemData) => {
let children = undefined;
if (treeItemData[displayFieldChildren] && treeItemData[displayFieldChildren].length > 0) {
children = getTreeItemsFromData(treeItemData[displayFieldChildren]);
}
return children === undefined ? (react_1.default.createElement("li", { onClick: () => treeItemData[displayFieldOnClick] && treeItemData[displayFieldOnClick](), key: uuidv4_1.default(), className: `oneframe-tree-item` }, treeItemData[displayFieldLink] ? (react_1.default.createElement(react_router_dom_1.Link, { to: treeItemData[displayFieldLink], className: `oneframe-tree-item-link` },
iconPosition === 'left' ? (react_1.default.createElement("span", { className: `oneframe-tree-item-icon deep-icon` }, icon || deepItemIcon)) : null,
displayFieldIcon && treeItemData[displayFieldIcon] ? (react_1.default.createElement("span", { className: `oneframe-tree-item-icon` },
react_1.default.createElement("i", { className: treeItemData[displayFieldIcon] }))) : null,
treeItemData[displayFieldLabel],
iconPosition === 'right' ? (react_1.default.createElement("span", { className: `oneframe-tree-item-icon deep-icon` }, icon || deepItemIcon)) : null)) : (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: "oneframe-tree-item-deep" },
iconPosition === 'left' ? (react_1.default.createElement("span", { className: `oneframe-tree-item-icon deep-icon` }, icon || deepItemIcon)) : null,
displayFieldIcon && treeItemData[displayFieldIcon] ? (react_1.default.createElement("span", { className: `oneframe-tree-item-icon` },
react_1.default.createElement("i", { className: treeItemData[displayFieldIcon] }))) : null,
treeItemData[displayFieldLabel],
iconPosition === 'right' ? (react_1.default.createElement("span", { className: `oneframe-tree-item-icon deep-icon` }, icon || deepItemIcon)) : null))))) : (react_1.default.createElement(lab_1.TreeItem, { className: `oneframe-tree-item`, key: uuidv4_1.default(), nodeId: treeItemData[displayFieldId], label: react_1.default.createElement(react_1.default.Fragment, null,
displayFieldIcon && treeItemData[displayFieldIcon] ? (react_1.default.createElement("span", { className: `oneframe-tree-item-icon` },
react_1.default.createElement("i", { className: treeItemData[displayFieldIcon] }))) : null,
treeItemData[displayFieldLabel]), children: children, endIcon: deepItemIcon, collapseIcon: collapseIcon, expandIcon: expandIcon, icon: icon }));
});
};
/*eslint-disable*/
return (react_1.default.createElement(styled_1.TreeviewWrapper, { iconPosition: iconPosition, deepIcon: icon || deepItemIcon },
react_1.default.createElement(lab_1.TreeView, { id: id, ref: ref, defaultParentIcon: parentsIcon, expanded: expandedDataIds, defaultExpanded: defaultExpandedDataIds, onNodeToggle: () => onToggle && onToggle(), className: `oneframe-tree-view ${className}` }, getTreeItemsFromData(data))));
};
TreeviewComponent.propTypes = {
options: prop_types_1.default.shape({
data: prop_types_1.default.arrayOf(prop_types_1.default.object).isRequired,
displayFieldLabel: prop_types_1.default.string,
displayFieldId: prop_types_1.default.string,
displayFieldChildren: prop_types_1.default.string,
displayFieldLink: prop_types_1.default.string,
displayFieldIcon: prop_types_1.default.string,
onClick: prop_types_1.default.func,
}),
parentsIcon: prop_types_1.default.node,
collapseIcon: prop_types_1.default.node,
expandIcon: prop_types_1.default.node,
deepItemIcon: prop_types_1.default.node,
icon: prop_types_1.default.node,
className: prop_types_1.default.string,
iconPosition: prop_types_1.default.oneOf(['left', 'right', undefined]),
expandedDataIds: prop_types_1.default.arrayOf(prop_types_1.default.string),
defaultExpandedDataIds: prop_types_1.default.arrayOf(prop_types_1.default.string),
onToggle: prop_types_1.default.func,
id: prop_types_1.default.string,
ref: prop_types_1.default.any,
};
exports.TreeviewTmp = TreeviewComponent;
exports.default = react_1.default.memo(TreeviewComponent, (p, n) => lodash_1.isEqual(p, n));