@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
173 lines (171 loc) • 6.72 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-2023 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 TextField from '@mui/material/TextField';
import { FormattedMessage } from 'react-intl';
import { isEditableAsset, openItemEditor } from '../../utils/content';
import Typography from '@mui/material/Typography';
import { DependenciesList } from '../DependenciesDialog';
import Alert from '@mui/material/Alert';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
import React from 'react';
import { fetchRenameAssetDependants } from '../../state/actions/dialogs';
import useEnv from '../../hooks/useEnv';
import useActiveSiteId from '../../hooks/useActiveSiteId';
import { useDispatch } from 'react-redux';
import { LoadingState } from '../LoadingState';
import { ApiResponseErrorState } from '../ApiResponseErrorState';
import IconButton from '@mui/material/IconButton';
import EditRoundedIcon from '@mui/icons-material/EditRounded';
export function RenameItemView(props) {
const {
name,
disabled,
dependantItems,
newNameExists,
isSubmitting,
confirmBrokenReferences,
fetchingDependantItems,
error,
helperText,
setConfirmBrokenReferences,
onRename,
onInputChanges
} = props;
const { authoringBase } = useEnv();
const siteId = useActiveSiteId();
const dispatch = useDispatch();
const handleEditorDisplay = (item) => {
openItemEditor(item, authoringBase, siteId, dispatch, fetchRenameAssetDependants());
};
return fetchingDependantItems
? React.createElement(LoadingState, {
title: React.createElement(FormattedMessage, { defaultMessage: 'Fetching dependent items' }),
styles: { title: { marginTop: 0 } }
})
: dependantItems
? React.createElement(
React.Fragment,
null,
React.createElement(
'form',
{
onSubmit: (e) => {
e.preventDefault();
if (!disabled) {
onRename();
}
}
},
React.createElement(TextField, {
fullWidth: true,
label: React.createElement(FormattedMessage, { id: 'renameAsset.rename', defaultMessage: 'New name' }),
value: name,
autoFocus: true,
required: true,
error: newNameExists,
helperText: helperText,
disabled: isSubmitting,
margin: 'normal',
InputLabelProps: {
shrink: true
},
onChange: onInputChanges,
autoComplete: 'off'
})
),
dependantItems.length > 0
? React.createElement(
React.Fragment,
null,
React.createElement(
Typography,
{ variant: 'subtitle2', sx: { mt: 1, mb: 1 } },
React.createElement(FormattedMessage, {
id: 'renameAsset.dependentItems',
defaultMessage: 'Dependent Items'
})
),
React.createElement(DependenciesList, {
dependencies: dependantItems,
compactView: false,
showTypes: 'all-deps',
renderAction: (dependency) =>
isEditableAsset(dependency.path)
? React.createElement(
IconButton,
{ onClick: () => handleEditorDisplay(dependency) },
React.createElement(EditRoundedIcon, null)
)
: null
}),
React.createElement(
Alert,
{ severity: 'warning', icon: false, sx: { mt: 2 } },
React.createElement(FormControlLabel, {
control: React.createElement(Checkbox, {
checked: confirmBrokenReferences,
onChange: () => setConfirmBrokenReferences(!confirmBrokenReferences),
inputProps: { 'aria-label': 'controlled' }
}),
label: React.createElement(FormattedMessage, {
id: 'renameAsset.confirmBrokenReferences',
defaultMessage: 'I understand that there will be broken references'
})
})
)
)
: React.createElement(
Typography,
{
variant: 'body1',
sx: {
verticalAlign: 'middle',
display: 'inline-flex',
mt: 2
}
},
React.createElement(InfoOutlinedIcon, {
sx: {
color: (theme) => theme.palette.text.secondary,
mr: 1
}
}),
React.createElement(FormattedMessage, {
id: 'renameAsset.noDependentItems',
defaultMessage: 'No dependent items'
})
)
)
: error && React.createElement(ApiResponseErrorState, { error: error.response });
}
export default RenameItemView;