@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
258 lines (256 loc) • 9.34 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 { FormattedMessage } from 'react-intl';
import React, { useState } from 'react';
import DialogBody from '../DialogBody/DialogBody';
import SingleItemSelector from '../SingleItemSelector';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import DependenciesList from './DependenciesList';
import Menu from '@mui/material/Menu';
import DialogFooter from '../DialogFooter/DialogFooter';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import { assetsTypes } from './utils';
import Radio from '@mui/material/Radio';
import { dependenciesDialogStyles } from './DependenciesDialog';
import { ApiResponseErrorState } from '../ApiResponseErrorState';
import { LoadingState } from '../LoadingState';
import { EmptyState } from '../EmptyState';
import { getRootPath } from '../../utils/path';
export function DependenciesDialogUI(props) {
const {
dependencies,
item,
rootPath,
setItem,
compactView,
setCompactView,
showTypes,
setShowTypes,
dependenciesShown,
setDependenciesShown,
isEditableItem,
handleEditorDisplay,
handleHistoryDisplay,
contextMenu,
handleContextMenuClick,
handleContextMenuClose,
error
} = props;
const { classes } = dependenciesDialogStyles();
const [openSelector, setOpenSelector] = useState(false);
return React.createElement(
React.Fragment,
null,
React.createElement(
DialogBody,
{ className: classes.dialogBody },
React.createElement(
'div',
{ className: classes.selectionContent },
React.createElement(SingleItemSelector, {
label: React.createElement(FormattedMessage, { id: 'words.item', defaultMessage: 'Item' }),
open: openSelector,
onClose: () => setOpenSelector(false),
onDropdownClick: () => setOpenSelector(!openSelector),
rootPath: rootPath,
selectedItem: item,
disabled: rootPath !== getRootPath(item.path),
onItemClicked: (item) => {
setOpenSelector(false);
setItem(item);
}
}),
React.createElement(
FormControl,
{ className: classes.formControl },
React.createElement(
Select,
{
value: dependenciesShown !== null && dependenciesShown !== void 0 ? dependenciesShown : 'depends-on',
onChange: (event) => {
setDependenciesShown(event.target.value);
},
inputProps: {
className: classes.select
}
},
React.createElement(
MenuItem,
{ value: 'depends-on' },
React.createElement(FormattedMessage, {
id: 'dependenciesDialog.dependsOn',
defaultMessage: 'Items that depend on selected item'
})
),
React.createElement(
MenuItem,
{ value: 'depends-on-me' },
React.createElement(FormattedMessage, {
id: 'dependenciesDialog.dependsOnMe',
defaultMessage: 'Dependencies of selected item'
})
)
)
)
),
error
? React.createElement(ApiResponseErrorState, { error: error })
: !dependencies
? React.createElement(LoadingState, { classes: { root: classes.suspense } })
: (dependencies === null || dependencies === void 0 ? void 0 : dependencies.length) === 0
? React.createElement(EmptyState, {
title:
dependenciesShown === 'depends-on'
? React.createElement(FormattedMessage, {
id: 'dependenciesDialog.emptyDependantsMessage',
defaultMessage: '{itemName} has no dependencies',
values: { itemName: item === null || item === void 0 ? void 0 : item.label }
})
: React.createElement(FormattedMessage, {
id: 'dependenciesDialog.emptyDependenciesMessage',
defaultMessage: 'Nothing depends on {itemName}',
values: { itemName: item === null || item === void 0 ? void 0 : item.label }
}),
classes: { root: classes.suspense }
})
: React.createElement(
React.Fragment,
null,
React.createElement(DependenciesList, {
dependencies: dependencies,
compactView: compactView,
showTypes: showTypes,
handleContextMenuClick: handleContextMenuClick
}),
React.createElement(
Menu,
{
anchorEl: contextMenu.el,
keepMounted: true,
open: Boolean(contextMenu.el),
onClose: handleContextMenuClose
},
contextMenu.dependency &&
isEditableItem(contextMenu.dependency.path) &&
React.createElement(
MenuItem,
{
onClick: () => {
handleEditorDisplay(contextMenu.dependency);
handleContextMenuClose();
}
},
React.createElement(FormattedMessage, { id: 'dependenciesDialog.edit', defaultMessage: 'Edit' })
),
contextMenu.dependency &&
React.createElement(
MenuItem,
{
onClick: () => {
setItem(contextMenu.dependency);
handleContextMenuClose();
}
},
React.createElement(FormattedMessage, {
id: 'dependenciesDialog.dependencies',
defaultMessage: 'Dependencies'
})
),
React.createElement(
MenuItem,
{
onClick: () => {
handleHistoryDisplay(contextMenu.dependency);
handleContextMenuClose();
}
},
' ',
React.createElement(FormattedMessage, { id: 'dependenciesDialog.history', defaultMessage: 'History' })
)
)
)
),
React.createElement(
DialogFooter,
{
classes: {
root: classes.dialogFooter
}
},
React.createElement(FormControlLabel, {
className: classes.compactViewAction,
control: React.createElement(Checkbox, {
checked: compactView,
onChange: (event) => {
setCompactView(event.target.checked);
},
color: 'primary'
}),
label: 'Compact'
}),
React.createElement(
FormControl,
{ className: classes.formControl },
React.createElement(
Select,
{
value: showTypes,
onChange: (event) => {
setShowTypes(event.target.value);
},
inputProps: {
className: `${classes.select} ${classes.showTypesSelect}`
},
MenuProps: {
className: classes.showTypesMenu,
transformOrigin: {
vertical: 'bottom',
horizontal: 'left'
}
}
},
Object.keys(assetsTypes).map((typeId) =>
React.createElement(
MenuItem,
{ value: typeId, key: typeId },
React.createElement(Radio, { checked: showTypes === typeId, color: 'primary' }),
assetsTypes[typeId].label
)
)
)
)
)
);
}
export default DependenciesDialogUI;