codekingpro/portable-devtools

1import React from 'react';2import { makeStyles } from '@mui/styles';3import CheckboxTree from 'react-checkbox-tree';4import CheckBoxIcon from '@mui/icons-material/CheckBox';5import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';6import IndeterminateCheckBoxIcon from '@mui/icons-material/IndeterminateCheckBox';7import ExpandMoreIcon from '@mui/icons-material/ExpandMore';8import ChevronRightIcon from '@mui/icons-material/ChevronRight';9import PropTypes from 'prop-types';10 11const useStyles = makeStyles((theme) =>12  ({13    treeRoot: {14      '& .rct-collapse, .rct-checkbox': {15        padding: 016      },17      '& .rct-node-leaf':{18        padding: '0 0 0 10px'19      },20      '& .react-checkbox-tree': {21        height: '97%',22        fontSize: '0.815rem',23        overflow: 'auto',24        ...theme.mixins.panelBorder25      },26      height: '100%'27    },28    unchecked: {29      fill: theme.otherVars.borderColor30    },31    checked: {32      fill: theme.palette.primary.main33    }34  })35);36export default function CheckBoxTree({treeData, ...props}) {37  const [checked, setChecked] = React.useState([]);38  const [expanded, setExpanded] = React.useState([]);39 40  const classes = useStyles();41 42  React.useEffect(() => {43    if (props.getSelectedServers) {44      props.getSelectedServers(checked);45    }46  }, [checked]);47 48  return (49    <div className={classes.treeRoot}>50      <CheckboxTree51        nodes={treeData}52        checked={checked}53        expanded={expanded}54        onCheck={checkedVal => setChecked(checkedVal)}55        onExpand={expandedVal => setExpanded(expandedVal)}56        showNodeIcon={false}57        icons={{58          check: <CheckBoxIcon className={classes.checked}/>,59          uncheck: <CheckBoxOutlineBlankIcon className={classes.unchecked}/>,60          halfCheck: <IndeterminateCheckBoxIcon className={classes.checked}/>,61          expandClose: <ChevronRightIcon />,62          expandOpen: <ExpandMoreIcon />,63          leaf: <ChevronRightIcon />64        }}65      />66    </div>67  );68}69 70CheckBoxTree.propTypes = {71  treeData: PropTypes.array,72  getSelectedServers: PropTypes.func73};74