import React, { Fragment, useEffect, useState } from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types';
import SvgIcon from '@material-ui/core/SvgIcon';
import Icon from '@material-ui/core/Icon';
import { alpha, fade, makeStyles, withStyles } from '@material-ui/core/styles';
import TreeView from '@material-ui/lab/TreeView';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import TreeItem, { useTreeItem } from '@material-ui/lab/TreeItem';
import Collapse from '@material-ui/core/Collapse';
import { useSpring, animated } from 'react-spring'; // web.cjs is required for IE 11 support
//import '../css/style.css';
function TreeViewMUI(props) {
const [expanded, setExpanded] = React.useState([]);
const [selected, setSelected] = React.useState([]);
function MinusSquare(props) {
return (
{/* tslint:disable-next-line: max-line-length */}
);
}
function MinusSquare2(props) {
return (
);
}
function PlusSquare(props) {
return (
{/* tslint:disable-next-line: max-line-length */}
);
}
function PlusSquare2(props) {
return (
);
}
function CloseSquare(props) {
return (
{/* tslint:disable-next-line: max-line-length */}
);
}
function CloseSquare2(props) {
return (
);
}
function TransitionComponent(props) {
const style = useSpring({
from: { opacity: 0, transform: 'translate3d(20px,0,0)' },
to: { opacity: props.in ? 1 : 0, transform: `translate3d(${props.in ? 0 : 20}px,0,0)` },
});
return (
);
}
TransitionComponent.propTypes = {
/**
* Show the component; triggers the enter or exit states
*/
in: PropTypes.bool,
};
const useStyles = makeStyles({
root: {
height: '100%',
flexGrow: 1,
maxWidth: '100%',
color: 'white',
//fontSize: '14px',
//background:'cyan'
"@global": {
".MuiTreeItem-content": {
"&:hover": {
color: '#10A599',
},
marginTop: '21px',
marginLeft: '1.05em',
},
},
},
});
// const renderTree = (nodes) => (
//
// {Array.isArray(nodes.children) ? nodes.children.map((node) => renderTree(node)) : null}
//
// );
const renderTree = (nodes) => (
{Array.isArray(nodes.children) ? nodes.children.map((node) => renderTree(node)) : null}
);
const StyledTreeItem = withStyles((theme) => ({
iconContainer: {
'& .close': {
opacity: 0.3,
},
},
group: {
marginLeft: 21,
paddingLeft: 10.8,
borderLeft: `1px dashed ${theme.palette.common.white}`,
//borderLeftColor:'white',
//fontSize: '14px',
//color:'white'
},
root: {
position: "relative",
"&:before": {
pointerEvents: "none",
content: '""',
position: "absolute",
width: 27,
left: -9.6,
top: 10,
borderBottomColor: 'white',
// horizontal border
borderBottom: (props) =>
// only display if the TreeItem is not root node
props.nodeId !== "1" &&
// only display if the TreeItem has any child nodes
props.children &&
props.children.length > 0
? `1px dashed ${theme.palette.common.white}`
: `1px dashed ${theme.palette.common.white}`
},
},
label: {
fontSize: '16px',
textAlign: 'left',
},
}))((props) => );
const DataNodes = [
{
"id": "1",
"name": "Almacén Mozel S.A.",
"isOpen": "true",
"children": [
{
"id": "2",
"name": "Administrativa",
"isOpen": true,
"children": [
{
"id": "3",
"name": "Auditoría Interna",
"isOpen": true,
"children": [
{
"id": 4,
"name": "Auditoría Interna",
"isOpen": true,
"children": [
{
"id": 5,
"name": "Auditoría Interna",
"isOpen": true,
"valor": "A5D22S29O80"
}
],
"valor": "A5D22S29O0"
}
],
"valor": "A5D22S0O0"
},
{
"id": 6,
"name": "Contraloría",
"children": [
{
"id": 7,
"name": "Contraloría",
"children": [
{
"id": 8,
"name": "Contraloría",
"valor": "A5D21S28O79"
}
],
"valor": "A5D21S28O0"
}
],
"valor": "A5D21S0O0"
},
{
"id": 9,
"name": "Credito y cobro",
"children": [
{
"id": 10,
"name": "Autorizaciones",
"children": [
{
"id": 11,
"name": "Autorizaciones",
"valor": "A5D23S30O115"
}
],
"valor": "A5D23S30O0"
},
{
"id": 12,
"name": "Call Center",
"children": [
{
"id": 13,
"name": "Call Center",
"valor": "A5D23S32O152"
}
],
"valor": "A5D23S32O0"
},
{
"id": 14,
"name": "Cobro",
"children": [
{
"id": 15,
"name": "Cobro",
"children": [
],
"valor": "A5D23S31O116"
},
{
"id": 16,
"name": "Legal",
"valor": "A5D23S31O117"
}
],
"valor": "A5D23S31O0"
},
{
"id": 17,
"name": "Legal",
"children": [
{
"id": 18,
"name": "Legal",
"valor": "A5D23S33O153"
}
],
"valor": "A5D23S33O0"
},
{
"id": 19,
"name": "PDV",
"children": [
{
"id": 20,
"name": "Call Center",
"valor": "A5D23S34O143"
},
{
"id": 21,
"name": "Compras",
"valor": "A5D23S34O144"
},
{
"id": 22,
"name": "PDV Aguas Zarcas",
"valor": "A5D23S34O118"
},
{
"id": 23,
"name": "PDV Alajuela",
"valor": "A5D23S34O119"
},
{
"id": 24,
"name": "PDV Avenida Cuarta",
"valor": "A5D23S34O120"
},
{
"id": 25,
"name": "PDV Avenida Tercera",
"valor": "A5D23S34O121"
},
{
"id": 26,
"name": "PDV Buenos Aires",
"valor": "A5D23S34O122"
},
{
"id": 27,
"name": "PDV Cariari",
"valor": "A5D23S34O182"
},
{
"id": 28,
"name": "PDV Cartago",
"valor": "A5D23S34O123"
},
{
"id": 29,
"name": "PDV Cartago II",
"valor": "A5D23S34O162"
},
{
"id": 30,
"name": "PDV Ciudad Neily",
"valor": "A5D23S34O124"
},
{
"id": 31,
"name": "PDV Esparza",
"valor": "A5D23S34O125"
},
{
"id": 32,
"name": "PDV Grecia",
"valor": "A5D23S34O126"
},
{
"id": 33,
"name": "PDV Guácimo",
"valor": "A5D23S34O127"
},
{
"id": 34,
"name": "PDV Guadalupe",
"valor": "A5D23S34O128"
},
{
"id": 35,
"name": "PDV Guapiles I",
"valor": "A5D23S34O129"
},
{
"id": 36,
"name": "PDV Guapiles II",
"valor": "A5D23S34O130"
},
{
"id": 37,
"name": "PDV Heredia I",
"valor": "A5D23S34O132"
},
{
"id": 38,
"name": "PDV Heredia II",
"valor": "A5D23S34O165"
},
{
"id": 39,
"name": "PDV Jaco",
"valor": "A5D23S34O167"
},
{
"id": 40,
"name": "PDV Liberia",
"valor": "A5D23S34O186"
},
{
"id": 41,
"name": "PDV Limon",
"valor": "A5D23S34O178"
},
{
"id": 42,
"name": "PDV Morazan",
"valor": "A5D23S34O131"
},
{
"id": 43,
"name": "PDV Naranjo",
"valor": "A5D23S34O133"
},
{
"id": 44,
"name": "PDV Orotina",
"valor": "A5D23S34O184"
},
{
"id": 45,
"name": "PDV Palmar Norte",
"valor": "A5D23S34O134"
},
{
"id": 46,
"name": "PDV Palmares",
"valor": "A5D23S34O180"
},
{
"id": 47,
"name": "PDV Perez Zeledon",
"valor": "A5D23S34O135"
},
{
"id": 48,
"name": "PDV Perez Zeledon II",
"valor": "A5D23S34O187"
},
{
"id": 49,
"name": "PDV Pital",
"valor": "A5D23S34O136"
},
{
"id": 50,
"name": "PDV Poas",
"valor": "A5D23S34O137"
},
{
"id": 51,
"name": "PDV Pocosol",
"valor": "A5D23S34O163"
},
{
"id": 52,
"name": "PDV Puerto Viejo",
"valor": "A5D23S34O138"
},
{
"id": 53,
"name": "PDV San Ramon I",
"valor": "A5D23S34O139"
},
{
"id": 54,
"name": "PDV San Ramon II",
"valor": "A5D23S34O140"
},
{
"id": 55,
"name": "PDV San Vito",
"valor": "A5D23S34O141"
},
{
"id": 56,
"name": "PDV Santa Cruz",
"valor": "A5D23S34O166"
},
{
"id": 57,
"name": "PDV Turrialba",
"valor": "A5D23S34O142"
}
],
"valor": "A5D23S34O0"
}
],
"valor": "A5D23S0O0"
},
{
"id": 58,
"name": "Gerencia General",
"children": [
{
"id": 59,
"name": "Gerencia General",
"children": [
{
"id": 60,
"name": "Gerencia General",
"valor": "A5D17S24O75"
}
],
"valor": "A5D17S24O0"
}
],
"valor": "A5D17S0O0"
},
{
"id": 61,
"name": "Helpdesk",
"children": [
{
"id": 62,
"name": "Helpdesk",
"children": [
{
"id": 63,
"name": "Helpdesk",
"valor": "A5D33S51O173"
}
],
"valor": "A5D33S51O0"
}
],
"valor": "A5D33S0O0"
},
{
"id": 64,
"name": "ra edit",
"valor": "A5D45S0O0"
},
{
"id": 65,
"name": "Recursos Humanos",
"children": [
{
"id": 66,
"name": "Recursos Humanos",
"children": [
{
"id": 67,
"name": "Planillas",
"valor": "A5D19S26O179"
},
{
"id": 68,
"name": "Recursos Humanos",
"valor": "A5D19S26O77"
}
],
"valor": "A5D19S26O0"
}
],
"valor": "A5D19S0O0"
},
{
"id": 69,
"name": "Servicios Generales",
"children": [
{
"id": 70,
"name": "Servicios Generales",
"children": [
{
"id": 71,
"name": "Mensajero",
"children": [
],
"valor": "A5D18S25O147"
},
{
"id": 72,
"name": "Servicios Generales",
"valor": "A5D18S25O76"
}
],
"valor": "A5D18S25O0"
}
],
"valor": "A5D18S0O0"
},
{
"id": 73,
"name": "TI",
"children": [
{
"id": 74,
"name": "TI",
"children": [
{
"id": 75,
"name": "TI",
"valor": "A5D20S27O78"
}
],
"valor": "A5D20S27O0"
}
],
"valor": "A5D20S0O0"
},
{
"id": 76,
"name": "z tesdt 2",
"valor": "A5D48S0O0"
}
],
"valor": "A5D0S0O0"
},
{
"id": "77",
"name": "Comercial",
"isOpen": "true",
"children": [
{
"id": 78,
"name": "Mercadeo",
"children": [
{
"id": 79,
"name": "Mercadeo",
"children": [
{
"id": 80,
"name": "Mercadeo",
"valor": "A6D24S35O81"
}
],
"valor": "A6D24S35O0"
}
],
"valor": "A6D24S0O0"
},
{
"id": 81,
"name": "Ventas",
"children": [
{
"id": 82,
"name": "Canales Alternos",
"children": [
{
"id": 83,
"name": "Canales Alternos",
"valor": "A6D25S46O84"
}
],
"valor": "A6D25S46O0"
},
{
"id": 84,
"name": "General",
"children": [
{
"id": 85,
"name": "General",
"valor": "A6D25S36O82"
},
{
"id": 86,
"name": "Super Numerarios",
"valor": "A6D25S36O164"
}
],
"valor": "A6D25S36O0"
},
{
"id": 87,
"name": "PDV",
"children": [
{
"id": 88,
"name": "PDV Aguas Zarcas",
"valor": "A6D25S38O85"
},
{
"id": 89,
"name": "PDV Alajuela",
"valor": "A6D25S38O86"
},
{
"id": 90,
"name": "PDV Avenida Cuarta",
"valor": "A6D25S38O87"
},
{
"id": 91,
"name": "PDV Avenida Tercera",
"valor": "A6D25S38O88"
},
{
"id": 92,
"name": "PDV Boca Arenal",
"valor": "A6D25S38O188"
},
{
"id": 93,
"name": "PDV Bribri",
"valor": "A6D25S38O183"
},
{
"id": 94,
"name": "PDV Buenos Aires",
"valor": "A6D25S38O89"
},
{
"id": 95,
"name": "PDV Cariari",
"valor": "A6D25S38O160"
},
{
"id": 96,
"name": "PDV Cartago",
"valor": "A6D25S38O90"
},
{
"id": 97,
"name": "PDV Cartago II",
"valor": "A6D25S38O157"
},
{
"id": 98,
"name": "PDV Cartago III",
"valor": "A6D25S38O172"
},
{
"id": 99,
"name": "PDV Ciudad Neily",
"valor": "A6D25S38O91"
},
{
"id": 100,
"name": "PDV Ciudad Quesada",
"valor": "A6D25S38O171"
},
{
"id": 101,
"name": "PDV Esparza",
"valor": "A6D25S38O92"
},
{
"id": 102,
"name": "PDV Grecia",
"valor": "A6D25S38O93"
},
{
"id": 103,
"name": "PDV Guácimo",
"valor": "A6D25S38O94"
},
{
"id": 104,
"name": "PDV Guadalupe",
"valor": "A6D25S38O95"
},
{
"id": 105,
"name": "PDV Guapiles I",
"valor": "A6D25S38O96"
},
{
"id": 106,
"name": "PDV Guapiles II",
"valor": "A6D25S38O97"
},
{
"id": 107,
"name": "PDV Heredia I",
"valor": "A6D25S38O98"
},
{
"id": 108,
"name": "PDV Heredia II",
"valor": "A6D25S38O99"
},
{
"id": 109,
"name": "PDV Jaco",
"valor": "A6D25S38O158"
},
{
"id": 110,
"name": "PDV Liberia",
"valor": "A6D25S38O174"
},
{
"id": 111,
"name": "PDV Limon",
"valor": "A6D25S38O168"
},
{
"id": 112,
"name": "PDV Morazan",
"valor": "A6D25S38O100"
},
{
"id": 113,
"name": "PDV Naranjo",
"valor": "A6D25S38O101"
},
{
"id": 114,
"name": "PDV Ojo de Agua",
"valor": "A6D25S38O175"
},
{
"id": 115,
"name": "PDV Orotina",
"valor": "A6D25S38O169"
},
{
"id": 116,
"name": "PDV Palmar Norte",
"valor": "A6D25S38O102"
},
{
"id": 117,
"name": "PDV Palmares",
"valor": "A6D25S38O159"
},
{
"id": 118,
"name": "PDV Perez Zeledon",
"valor": "A6D25S38O103"
},
{
"id": 119,
"name": "PDV Perez Zeledon II",
"valor": "A6D25S38O176"
},
{
"id": 120,
"name": "PDV Pital",
"valor": "A6D25S38O104"
},
{
"id": 121,
"name": "PDV Poas",
"valor": "A6D25S38O105"
},
{
"id": 122,
"name": "PDV Pocosol",
"valor": "A6D25S38O156"
},
{
"id": 123,
"name": "PDV Puerto Viejo",
"valor": "A6D25S38O106"
},
{
"id": 124,
"name": "PDV Rio Claro",
"valor": "A6D25S38O170"
},
{
"id": 125,
"name": "PDV Rio Jimenez",
"valor": "A6D25S38O190"
},
{
"id": 126,
"name": "PDV San Ramon I",
"valor": "A6D25S38O107"
},
{
"id": 127,
"name": "PDV San Ramon II",
"valor": "A6D25S38O108"
},
{
"id": 128,
"name": "PDV San Vito",
"valor": "A6D25S38O109"
},
{
"id": 129,
"name": "PDV Santa Cruz",
"valor": "A6D25S38O161"
},
{
"id": 130,
"name": "PDV Sarchi",
"valor": "A6D25S38O181"
},
{
"id": 131,
"name": "PDV Turrialba",
"valor": "A6D25S38O110"
},
{
"id": 132,
"name": "PDV Turrucares",
"valor": "A6D25S38O177"
},
{
"id": 133,
"name": "PDV Upala",
"valor": "A6D25S38O189"
},
{
"id": 134,
"name": "PDV Zarcero",
"valor": "A6D25S38O185"
}
],
"valor": "A6D25S38O0"
},
{
"id": 135,
"name": "Supervición de PDV",
"children": [
{
"id": 136,
"name": "Supervición de PDV",
"valor": "A6D25S37O83"
}
],
"valor": "A6D25S37O0"
}
],
"valor": "A6D25S0O0"
}
],
"valor": "A6D0S0O0"
},
{
"id": 137,
"name": "Financiera",
"isOpen": "true",
"children": [
{
"id": 138,
"name": "Cobros",
"children": [
{
"id": 139,
"name": "cobros",
"children": [
{
"id": 140,
"name": "Cobros",
"valor": "A7D29S48O149"
}
],
"valor": "A7D29S48O0"
}
],
"valor": "A7D29S0O0"
},
{
"id": 141,
"name": "Contabilidad",
"children": [
{
"id": 142,
"name": "Contabilidad",
"children": [
{
"id": 143,
"name": "Contabilidad",
"valor": "A7D26S39O111"
},
{
"id": 144,
"name": "Fideicomiso",
"valor": "A7D26S39O114"
},
{
"id": 145,
"name": "Presupuesto",
"valor": "A7D26S39O113"
},
{
"id": 146,
"name": "Tesoreria",
"valor": "A7D26S39O112"
}
],
"valor": "A7D26S39O0"
}
],
"valor": "A7D26S0O0"
}
],
"valor": "A7D0S0O0"
},
{
"id": '147',
"name": "Logística ",
"isOpen": true,
"children": [
{
"id": 148,
"name": "CEDI",
"children": [
{
"id": 149,
"name": "CEDI",
"children": [
{
"id": 150,
"name": "CEDI",
"valor": "A8D31S44O145"
}
],
"valor": "A8D31S44O0"
},
{
"id": 151,
"name": "Servicio de Garantia",
"children": [
{
"id": 152,
"name": "Servicio de Garantia",
"valor": "A8D31S47O146"
}
],
"valor": "A8D31S47O0"
}
],
"valor": "A8D31S0O0"
},
{
"id": 153,
"name": "Compras",
"children": [
{
"id": 154,
"name": "Compras",
"children": [
{
"id": 155,
"name": "Compras",
"valor": "A8D30S43O148"
}
],
"valor": "A8D30S43O0"
}
],
"valor": "A8D30S0O0"
},
{
"id": 156,
"name": "Servicio de Garantia",
"children": [
{
"id": 157,
"name": "Servicio de Garantia",
"children": [
{
"id": 158,
"name": "Servicio de Garantia",
"valor": "A8D32S45O154"
}
],
"valor": "A8D32S45O0"
}
],
"valor": "A8D32S0O0"
}
],
"valor": "A8D0S0O0"
}
],
"valor": "E1A0D0S0O0"
}
]
let pasa = true;
const onIconClick = (nodeId) => {
pasa = false;
}
const onLabelClick = (nodeId) => {
pasa = true;
}
const [opnnodos, setOpennodos] = useState([]);
const [eventoSel, setEventoSel] = useState(true);
const classes = useStyles();
const onNodeSelect = (event, nodeId) => {
//debugger;
if (pasa == true) {
let list = {}
list = buscarNodo(DataNodes, nodeId);
props.handlerArbol(list);
//setSelected(nodeId);
}
}
const buscarNodo = (pLista, pId) => {
debugger
let lista = null;
for (let j = 0; j < pLista.length; j++) {
if (pLista[j].id == pId) {
lista = { id: pLista[j].id, name: pLista[j].name, valor: pLista[j].valor };
return lista;
}
if (pLista[j].children != undefined) {
lista = buscarNodo(pLista[j].children, pId);
if (lista != null) {
return lista;
}
}
if (lista != null) {
return lista;
}
}
return lista
}
let open = ['1', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '147', '77', '137', '2'];
return (
}
//defaultExpanded={['root']}
// defaultExpandIcon={}
defaultCollapseIcon={}
defaultExpandIcon={}
defaultEndIcon={}
//selected={selected}
multiSelect={false}
onNodeSelect={onNodeSelect}
defaultExpanded={props.defaultExpanded}
>
{renderTree(props.data[0])}
);
};
export default TreeViewMUI;