41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
import { useSortable } from '@dnd-kit/sortable';
|
|
import { CSS } from '@dnd-kit/utilities';
|
|
import { ListItem, ListItemText, ListItemButton, ListItemIcon} from '@mui/material';
|
|
import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
|
|
|
|
interface SortableItemProps {
|
|
item: string;
|
|
id: string;// чтобы тайпскрипт компилятор не жаловался, добавил в инетрфейс, хотя и так компилируется нормально
|
|
isDisabled:boolean;
|
|
}
|
|
|
|
export function SortableItem({ item ,isDisabled}: SortableItemProps) {
|
|
const id = item; /* идентификатор для useSortable */
|
|
const {
|
|
attributes,
|
|
listeners,
|
|
setNodeRef,
|
|
transform,
|
|
transition,
|
|
} = useSortable({ id });
|
|
|
|
const style = {
|
|
transform: CSS.Transform.toString(transform),
|
|
transition,
|
|
};
|
|
|
|
return (
|
|
<ListItem ref={ isDisabled ? undefined : setNodeRef } style={ style } { ...attributes } { ...listeners }>
|
|
<ListItemButton
|
|
sx={{
|
|
border: '1px solid gray',
|
|
borderRadius: '5px',
|
|
}}>
|
|
<ListItemIcon>
|
|
<DragIndicatorIcon />
|
|
</ListItemIcon>
|
|
<ListItemText primary={ item } />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
);
|
|
} |