@craftercms/studio-ui/components/PreviewSettingsPanel/PreviewSettingsPanel.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 { defineMessages, useIntl } from 'react-intl';
import {
  Divider,
  FormControl,
  FormControlLabel,
  FormHelperText,
  List,
  ListItem,
  ListItemText,
  ListSubheader,
  Radio,
  RadioGroup
} from '@mui/material';
import { setHighlightMode } from '../../state/actions/preview';
import { useDispatch } from 'react-redux';
import EditModeSwitch from '../EditModeSwitch';
import { usePreviewState } from '../../hooks/usePreviewState';
import PaddingModeSwitchListItem from '../PaddingModeSwitchListItem';
const translations = defineMessages({
  editMode: {
    id: 'settingsPanel.editMode',
    defaultMessage: 'Edit Mode (e | m)'
  },
  editModeHelperText: {
    id: 'settingsPanel.editModeHelperText',
    defaultMessage: 'Enable/disabled in-context editing'
  },
  highlightMode: {
    id: 'settingsPanel.highlightMode',
    defaultMessage: 'Highlight Mode'
  },
  highlightModeHelperText: {
    id: 'settingsPanel.highlightModeHelperText',
    defaultMessage:
      'When "highlight movable" is selected, only content items you can be moved or sorted highlight. Text inputs and other non-movable won\'t highlight. Press `e` and `m` at any point to toggle between modes.'
  },
  highlightAllZones: {
    id: 'settingsPanel.highlightAllTargets',
    defaultMessage: 'Highlight all targets (e)'
  },
  highlightMovable: {
    id: 'settingsPanel.highlightMovable',
    defaultMessage: 'Highlight movable (m)'
  }
});
const labelRootSx = {
  width: '100%',
  justifyContent: 'space-between',
  ml: 0
};
const formHelperTextSx = { pb: 1, pr: 2, pl: 2, pt: 0, mt: 0 };
export function PreviewSettingsPanel() {
  const { formatMessage } = useIntl();
  const { highlightMode } = usePreviewState();
  const dispatch = useDispatch();
  return React.createElement(
    List,
    null,
    React.createElement(
      ListItem,
      null,
      React.createElement(ListItemText, { primary: formatMessage(translations.editMode) }),
      React.createElement(EditModeSwitch, { edge: 'end' })
    ),
    React.createElement(FormHelperText, { sx: formHelperTextSx }, formatMessage(translations.editModeHelperText)),
    React.createElement(Divider, null),
    React.createElement(ListSubheader, {
      id: 'settingsPanelHighlightModeLabel',
      children: formatMessage(translations.highlightMode)
    }),
    React.createElement(
      FormControl,
      { sx: { pt: 0, pb: 0, pl: 2, pr: 2 }, component: 'li' },
      React.createElement(
        RadioGroup,
        {
          value: highlightMode,
          onChange: (e) => {
            dispatch(
              setHighlightMode({
                highlightMode: e.target.value
              })
            );
          }
        },
        React.createElement(FormControlLabel, {
          value: 'all',
          sx: labelRootSx,
          control: React.createElement(Radio, { color: 'primary', edge: 'end' }),
          label: formatMessage(translations.highlightAllZones),
          labelPlacement: 'start'
        }),
        React.createElement(FormControlLabel, {
          value: 'move',
          sx: labelRootSx,
          control: React.createElement(Radio, { color: 'primary', edge: 'end' }),
          label: formatMessage(translations.highlightMovable),
          labelPlacement: 'start'
        })
      ),
      React.createElement(FormHelperText, { sx: formHelperTextSx }, formatMessage(translations.highlightModeHelperText))
    ),
    React.createElement(Divider, null),
    React.createElement(PaddingModeSwitchListItem, { showIcon: false, showHelperText: true })
  );
}
export default PreviewSettingsPanel;