@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
105 lines (103 loc) • 3.74 kB
JavaScript
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import React, { useState } from 'react';
import ListItem from '@mui/material/ListItem';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import Avatar from '@mui/material/Avatar';
import DragIndicatorRounded from '@mui/icons-material/DragIndicatorRounded';
import { getInitials } from '../../utils/string';
import ListItemText from '@mui/material/ListItemText';
import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
import IconButton from '@mui/material/IconButton';
import MoreVertRounded from '@mui/icons-material/MoreVertRounded';
import { makeStyles } from 'tss-react/mui';
const useStyles = makeStyles()(() => ({
root: {},
noWrapping: {
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
display: 'block'
},
component: {
cursor: 'move'
},
avatarRootOver: {
color: 'black',
background: 'white'
}
}));
export function DraggablePanelListItem(props) {
const { classes } = useStyles();
const { onMenu, primaryText, avatarSrc, secondaryText, onDragStart, onDragEnd } = props;
const [over, setOver] = useState(false);
return React.createElement(
React.Fragment,
null,
React.createElement(
ListItem,
{
key: secondaryText,
className: classes.component,
draggable: true,
onDragStart: onDragStart,
onDragEnd: onDragEnd,
onMouseEnter: () => setOver(true),
onMouseLeave: () => setOver(false)
},
React.createElement(
ListItemAvatar,
null,
React.createElement(
Avatar,
{ classes: { root: over ? classes.avatarRootOver : '' }, src: over ? null : avatarSrc },
over ? React.createElement(DragIndicatorRounded, null) : getInitials(primaryText)
)
),
React.createElement(ListItemText, {
primary: primaryText,
secondary: secondaryText,
classes: { primary: classes.noWrapping, secondary: classes.noWrapping }
}),
onMenu &&
React.createElement(
ListItemSecondaryAction,
null,
React.createElement(
IconButton,
{ edge: 'end', 'aria-label': 'delete', onClick: (e) => onMenu(e.currentTarget), size: 'large' },
React.createElement(MoreVertRounded, null)
)
)
)
);
}
export default DraggablePanelListItem;