@minimaltech/ra-infra
Version:
Minimal Technology ReactJS Infrastructure
47 lines • 2.89 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Collapse, Icon, List, ListItem, ListItemButton, ListItemIcon, ListItemText, } from '@mui/material';
import React from 'react';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
export const TreeItem = (props) => {
const { data, level, ...restProps } = props;
const { height = 24, enableActivated, onClick } = restProps;
//--------------------------------------------------
const [isOpen, setIsOpen] = React.useState(false);
//--------------------------------------------------
const hasChild = React.useMemo(() => {
return (data?.children && data.children.length > 0) ?? false;
}, [data.children]);
//--------------------------------------------------
const isActivated = React.useMemo(() => {
return enableActivated?.({ id: data.id });
}, [data.id, enableActivated]);
//--------------------------------------------------
const handleClick = React.useCallback(() => {
setIsOpen(prev => !prev);
}, []);
//--------------------------------------------------
const renderIcon = React.useCallback((opts) => {
if (!opts.hasChild) {
return _jsx(Icon, { children: "opts?.icon?.default" });
}
const ExpandedIcon = opts.icon?.expanded || KeyboardArrowDownIcon;
const CollapsedIcon = opts.icon?.collapsed || KeyboardArrowRightIcon;
if (opts.isOpen) {
return _jsx(ExpandedIcon, {});
}
return _jsx(CollapsedIcon, {});
}, []);
//--------------------------------------------------
return (_jsxs(List, { disablePadding: true, dense: true, sx: { overflowX: 'hidden', width: 1 }, children: [_jsx(ListItem, { dense: true, disableGutters: true, disablePadding: true, sx: { height, pl: level > 1 ? (level - 1) * 3 + 3 : 1 }, children: _jsxs(ListItemButton, { dense: true, disableGutters: true, color: "primary", sx: {
height: 1,
cursor: 'pointer',
bgcolor: isActivated ? 'primary.light' : 'transparent',
}, alignItems: "center", onClick: event => {
onClick?.({ event, id: data.id });
handleClick();
}, children: [_jsx(ListItemIcon, { sx: { minWidth: 'unset' }, children: renderIcon({ isOpen, hasChild, icon: data.icon }) }), _jsx(ListItemText, { disableTypography: true, sx: { m: 0, fontSize: 12 }, children: data.label })] }) }), hasChild && (_jsx(Collapse, { in: isOpen, unmountOnExit: true, children: data.children?.map(item => {
return (_jsx(TreeItem, { data: item, level: level + 1, ...restProps }, item.id));
}) }))] }));
};
//# sourceMappingURL=TreeItem.js.map