@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
139 lines (137 loc) • 4.76 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 * as React from 'react';
import IconButton from '@mui/material/IconButton';
import EditRoundedIcon from '@mui/icons-material/EditRounded';
import DragIndicatorRoundedIcon from '@mui/icons-material/DragIndicatorRounded';
import PowerSettingsNewRoundedIcon from '@mui/icons-material/PowerSettingsNewRounded';
import Box from '@mui/material/Box';
import Tooltip from '@mui/material/Tooltip';
import { UNDEFINED } from '../../utils/constants';
import { FormattedMessage } from 'react-intl';
export function EditModesSwitcherUI(props) {
const { isEditMode, highlightMode, onEditModeChange, size = 'small', activeSxShadow = 1, disabled = false } = props;
const isAllHighlightMode = isEditMode && highlightMode === 'all';
const isMoveHighlightMode = isEditMode && !isAllHighlightMode;
const getStyle = () => ({
boxShadow: activeSxShadow,
bgcolor: 'background.default',
':hover': {
cursor: 'default'
}
});
return React.createElement(
Box,
{
sx: {
minWidth: 104,
borderRadius: 20,
display: 'inline-block',
border: (theme) => `1px solid ${disabled ? theme.palette.grey[200] : theme.palette.grey[300]}`,
transition: (theme) => theme.transitions.create(['background-color', 'border'])
}
},
React.createElement(
Tooltip,
{
title: disabled
? ''
: React.createElement(FormattedMessage, {
id: 'editModesSwitcher.offButtonTooltip',
defaultMessage: 'Switch off editing ({shortcutKey})',
values: {
shortcutKey: isEditMode ? (isAllHighlightMode ? 'e' : 'm') : 'e | m'
}
})
},
React.createElement(
IconButton,
{
size: size,
disabled: disabled,
onClick: () => onEditModeChange(false),
sx: isEditMode
? null
: {
boxShadow: activeSxShadow,
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: size,
onClick: () => onEditModeChange(true, 'all'),
sx: isAllHighlightMode ? getStyle() : UNDEFINED
},
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: size,
onClick: () => onEditModeChange(true, 'move'),
sx: isMoveHighlightMode ? getStyle() : UNDEFINED
},
React.createElement(DragIndicatorRoundedIcon, null)
)
)
);
}
export default EditModesSwitcherUI;