@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
225 lines (223 loc) • 8.18 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 from 'react';
import { useDeleteDialogUIStyles } from './styles';
import Grid from '@mui/material/Grid';
import TextFieldWithMax from '../TextFieldWithMax/TextFieldWithMax';
import { FormattedMessage } from 'react-intl';
import { SelectionList } from '../DependencySelection/SelectionList';
import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';
import Alert from '@mui/material/Alert';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import Typography from '@mui/material/Typography';
import List from '@mui/material/List';
import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';
import InfoIcon from '@mui/icons-material/InfoOutlined';
export function DeleteDialogUIBody(props) {
const {
items,
childItems,
dependentItems,
comment,
selectedItems,
isCommentRequired = false,
isDisabled,
isConfirmDeleteChecked,
onCommentChange,
onItemClicked,
onSelectAllClicked,
onConfirmDeleteChange,
onEditDependantClick
} = props;
const { classes } = useDeleteDialogUIStyles();
return React.createElement(
Grid,
{ container: true, spacing: 3 },
React.createElement(
Grid,
{ item: true, xs: 12, sm: 7, md: 7, lg: 7, xl: 7 },
React.createElement(
'div',
{ className: classes.depsContainer },
React.createElement(SelectionList, {
title: React.createElement(FormattedMessage, {
id: 'deleteDialog.deleteItems',
defaultMessage: 'Delete Items'
}),
items: items,
onItemClicked: onItemClicked,
onSelectAllClicked: onSelectAllClicked,
displayItemTitle: true,
selectedItems: selectedItems,
disabled: isDisabled
}),
React.createElement(
ListItem,
{ divider: true, dense: true, disableGutters: !Boolean(dependentItems) },
React.createElement(ListItemText, {
primary: React.createElement(
Typography,
{ variant: 'subtitle1', component: 'span' },
React.createElement(FormattedMessage, {
id: 'deleteDialog.dependentItems',
defaultMessage: 'Dependent Items'
}),
` • `,
React.createElement(FormattedMessage, {
id: 'deleteDialog.brokenItems',
defaultMessage: 'Will have broken references'
})
)
})
),
dependentItems.length
? React.createElement(
List,
null,
dependentItems.map((path) => {
return React.createElement(
ListItem,
{ dense: true, key: path },
React.createElement(ListItemText, {
primary: path,
primaryTypographyProps: {
title: path,
sx: {
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis'
}
}
}),
React.createElement(
ListItemSecondaryAction,
null,
React.createElement(
Button,
{
color: 'primary',
onClick: (e) => onEditDependantClick(e, path),
size: 'small',
sx: {
marginLeft: 'auto',
fontWeight: 'bold',
verticalAlign: 'baseline'
}
},
React.createElement(FormattedMessage, { id: 'words.edit', defaultMessage: 'Edit' })
)
)
);
})
)
: React.createElement(
Box,
{
sx: {
display: 'flex',
alignItems: 'center',
padding: '8px',
'& svg': {
marginRight: '8px'
}
}
},
React.createElement(InfoIcon, { color: 'action', fontSize: 'small' }),
React.createElement(
Typography,
{ variant: 'caption' },
React.createElement(FormattedMessage, {
id: 'deleteDialog.emptyDependentItems',
defaultMessage: 'No dependent items'
})
)
),
React.createElement(SelectionList, {
title: React.createElement(FormattedMessage, {
id: 'deleteDialog.childItemsText',
defaultMessage: 'Child Items'
}),
subtitle: React.createElement(FormattedMessage, {
id: 'deleteDialog.willGetDeleted',
defaultMessage: 'Will get deleted'
}),
emptyMessage: React.createElement(FormattedMessage, {
id: 'deleteDialog.emptyChildItems',
defaultMessage: 'No child items'
}),
paths: childItems,
displayItemTitle: false
})
)
),
React.createElement(
Grid,
{ item: true, xs: 12, sm: 5, md: 5, lg: 5, xl: 5 },
React.createElement(
'form',
{ className: classes.submissionCommentField, noValidate: true, autoComplete: 'off' },
React.createElement(TextFieldWithMax, {
label: React.createElement(FormattedMessage, {
id: 'deleteDialog.submissionCommentLabel',
defaultMessage: 'Submission Comment'
}),
multiline: true,
value: comment,
onChange: onCommentChange,
required: isCommentRequired,
disabled: isDisabled
}),
React.createElement(
Alert,
{ severity: 'warning', icon: false },
React.createElement(FormControlLabel, {
className: classes.confirmCheck,
control: React.createElement(Checkbox, {
color: 'primary',
checked: isConfirmDeleteChecked,
onChange: onConfirmDeleteChange,
disabled: isDisabled
}),
label: React.createElement(FormattedMessage, {
id: 'deleteDialog.confirmDeletion',
defaultMessage: 'I understand that deleted items will be published immediately.'
})
})
)
)
)
);
}
export default DeleteDialogUIBody;