@craftercms/studio-ui/components/FolderMoveAlert/FolderMoveAlert.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-2025 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 Checkbox from '@mui/material/Checkbox';
import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import Alert, { alertClasses } from '@mui/material/Alert';
import IconButton from '@mui/material/IconButton';
import ExpandMoreRounded from '@mui/icons-material/ExpandMoreRounded';
import FormControlLabel from '@mui/material/FormControlLabel';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Grow from '@mui/material/Grow';
export function FolderMoveAlert({
  checked = false,
  initialExpanded = false,
  itemType = 'folder',
  action = 'rename',
  autoFocus = false,
  onChange,
  variant = 'standard',
  sx
}) {
  const [open, setOpen] = useState(checked || initialExpanded);
  const i18nValues = {
    itemType:
      itemType === 'folder'
        ? React.createElement(FormattedMessage, { defaultMessage: 'folder' })
        : React.createElement(FormattedMessage, { defaultMessage: 'page' }),
    action:
      action === 'move'
        ? React.createElement(FormattedMessage, { defaultMessage: 'moved' })
        : React.createElement(FormattedMessage, { defaultMessage: 'renamed' }),
    b: (msg) => React.createElement('strong', null, msg)
  };
  return React.createElement(
    Alert,
    {
      variant: variant,
      icon: false,
      severity: 'warning',
      // TODO: use consolidateSx utility function once merged into `develop`
      sx: [{ [`.${alertClasses.message}`]: { overflow: 'visible' } }, sx].flatMap((i) => i),
      action: checked
        ? null
        : React.createElement(
            IconButton,
            {
              color: 'primary',
              size: 'small',
              onClick: () => {
                !checked && setOpen(!open);
              }
            },
            React.createElement(ExpandMoreRounded, {
              sx: (theme) => ({
                // Add transform to rotate 180deg when collapsed
                transform: open ? 'rotate(180deg)' : 'none',
                // Animate the rotation
                transition: theme.transitions.create('transform', { duration: theme.transitions.duration.standard })
              })
            })
          )
    },
    React.createElement(FormControlLabel, {
      disableTypography: true,
      control: React.createElement(Checkbox, {
        autoFocus: autoFocus,
        color: 'primary',
        checked: checked,
        onChange: onChange
      }),
      label: React.createElement(
        Box,
        null,
        React.createElement(
          Typography,
          null,
          React.createElement(FormattedMessage, {
            defaultMessage: 'This action may break references to items in the {itemType} being {action}.',
            values: i18nValues
          })
        ),
        React.createElement(
          Grow,
          { mountOnEnter: true, unmountOnExit: true, in: open || checked },
          React.createElement(
            Typography,
            { variant: 'body2', component: 'div', sx: { mt: 1, p: 0 } },
            React.createElement(FormattedMessage, { defaultMessage: 'Make sure:' }),
            React.createElement(
              Box,
              { sx: { my: 0, pl: 2 }, component: 'ol' },
              React.createElement(
                'li',
                null,
                React.createElement(FormattedMessage, {
                  defaultMessage:
                    'Items in the {itemType} being {action} <b>must</b> be published individually or in bulk to complete the move in the published staged or live project.',
                  values: i18nValues
                })
              ),
              React.createElement(
                'li',
                null,
                React.createElement(FormattedMessage, {
                  defaultMessage: 'Change references to point to the new paths.'
                })
              )
            )
          )
        )
      )
    })
  );
}
export default FolderMoveAlert;