@craftercms/studio-ui/components/DeleteDialog/DeleteDialogUIBody.js

Services, components, models & utils to build CrafterCMS authoring extensions.

/*
 * 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';
export function DeleteDialogUIBody(props) {
  const {
    items,
    childItems,
    dependentItems,
    comment,
    selectedItems,
    isCommentRequired = false,
    isDisabled,
    isConfirmDeleteChecked,
    onCommentChange,
    onItemClicked,
    onSelectAllClicked,
    onSelectAllDependantClicked,
    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(SelectionList, {
          title: React.createElement(FormattedMessage, {
            id: 'deleteDialog.dependentItems',
            defaultMessage: 'Dependent Items'
          }),
          subtitle: React.createElement(FormattedMessage, {
            id: 'deleteDialog.brokenItems',
            defaultMessage: 'Will have broken references'
          }),
          emptyMessage: React.createElement(FormattedMessage, {
            id: 'deleteDialog.emptyDependentItems',
            defaultMessage: 'No dependent items'
          }),
          paths: dependentItems,
          displayItemTitle: false,
          onSelectAllClicked: onSelectAllDependantClicked,
          onItemClicked: onItemClicked,
          selectedItems: selectedItems,
          disabled: isDisabled,
          onEditClick: onEditDependantClick
        }),
        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;