@craftercms/studio-ui/components/EditModesSwitcher/EditModesSwitcher.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 * as React from 'react';
import { useDispatch } from 'react-redux';
import { setPreviewEditMode } from '../../state/actions/preview';
import { usePreviewState } from '../../hooks/usePreviewState';
import Box from '@mui/material/Box';
import Tooltip from '@mui/material/Tooltip';
import { FormattedMessage } from 'react-intl';
import IconButton from '@mui/material/IconButton';
import { UNDEFINED } from '../../utils/constants';
import PowerSettingsNewRoundedIcon from '@mui/icons-material/PowerSettingsNewRounded';
import EditRoundedIcon from '@mui/icons-material/EditRounded';
import DragIndicatorRoundedIcon from '@mui/icons-material/DragIndicatorRounded';
export function EditModesSwitcher(props) {
  const { disabled } = props;
  const { editMode, highlightMode } = usePreviewState();
  const dispatch = useDispatch();
  const onEditModeChange = (editMode, highlightMode) => dispatch(setPreviewEditMode({ editMode, highlightMode }));
  const isAllHighlightMode = editMode && highlightMode === 'all';
  const isMoveHighlightMode = editMode && !isAllHighlightMode;
  const commonModeButtonStyle = {
    bgcolor: 'background.default',
    ':hover': {
      cursor: 'default'
    }
  };
  return React.createElement(
    Box,
    {
      sx: {
        minWidth: 104,
        borderRadius: 20,
        display: 'inline-block',
        border: (theme) =>
          `1px solid ${theme.palette.mode === 'light' ? theme.palette.divider : theme.palette.grey[700]}`,
        transition: (theme) => theme.transitions.create(['background-color', 'border'])
      }
    },
    React.createElement(
      Tooltip,
      {
        title: React.createElement(FormattedMessage, {
          id: 'editModesSwitcher.offButtonTooltip',
          defaultMessage: 'Switch off editing ({shortcutKey})',
          values: {
            shortcutKey: editMode ? (isAllHighlightMode ? 'e' : 'm') : 'e | m'
          }
        })
      },
      React.createElement(
        IconButton,
        {
          size: 'small',
          color: !editMode ? 'error' : UNDEFINED,
          disabled: disabled,
          onClick: () => onEditModeChange(false),
          sx: {
            borderTopRightRadius: 0,
            borderBottomRightRadius: 0,
            ...(!editMode && { cursor: 'default' })
          }
        },
        React.createElement(PowerSettingsNewRoundedIcon, null)
      )
    ),
    React.createElement(
      Tooltip,
      {
        title: disabled
          ? ''
          : React.createElement(FormattedMessage, {
              id: 'editModesSwitcher.editModeTooltip',
              defaultMessage: 'Edit mode (e)'
            })
      },
      React.createElement(
        IconButton,
        {
          color: isAllHighlightMode ? 'success' : UNDEFINED,
          disabled: disabled,
          size: 'small',
          onClick: () => onEditModeChange(true, 'all'),
          sx: {
            borderRadius: 0,
            ...(isAllHighlightMode && commonModeButtonStyle)
          }
        },
        React.createElement(EditRoundedIcon, null)
      )
    ),
    React.createElement(
      Tooltip,
      {
        title: disabled
          ? ''
          : React.createElement(FormattedMessage, {
              id: 'editModesSwitcher.moveModeTooltip',
              defaultMessage: 'Move mode (m)'
            })
      },
      React.createElement(
        IconButton,
        {
          color: isMoveHighlightMode ? 'primary' : UNDEFINED,
          disabled: disabled,
          size: 'small',
          onClick: () => onEditModeChange(true, 'move'),
          sx: {
            borderTopLeftRadius: 0,
            borderBottomLeftRadius: 0,
            ...(isMoveHighlightMode && commonModeButtonStyle)
          }
        },
        React.createElement(DragIndicatorRoundedIcon, null)
      )
    )
  );
}
export default EditModesSwitcher;