@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
202 lines (200 loc) • 7.68 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 React, { useState } from 'react';
import Dialog from '@mui/material/Dialog';
import { makeStyles } from 'tss-react/mui';
import { withoutIndex } from '../../utils/path';
import { useUnmount } from '../../hooks/useUnmount';
import { usePossibleTranslation } from '../../hooks/usePossibleTranslation';
import { useSelection } from '../../hooks/useSelection';
import { useWithPendingChangesCloseRequest } from '../../hooks/useWithPendingChangesCloseRequest';
import { FormattedMessage } from 'react-intl';
import DialogBody from '../DialogBody/DialogBody';
import DialogFooter from '../DialogFooter/DialogFooter';
import SecondaryButton from '../SecondaryButton';
import PrimaryButton from '../PrimaryButton';
import CreateFolderDialog from '../CreateFolderDialog';
import DialogHeader from '../DialogHeader';
import FolderBrowserTreeView from '../FolderBrowserTreeView';
import PathSelectionInput from '../PathSelectionInput';
import KeyboardArrowLeftRoundedIcon from '@mui/icons-material/KeyboardArrowLeftRounded';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import BasePathSelector from '../BasePathSelector';
import { UNDEFINED } from '../../utils/constants';
export function PathSelectionDialog(props) {
return React.createElement(
Dialog,
{ open: props.open, onClose: props.onClose, fullWidth: true, maxWidth: 'sm' },
React.createElement(PathSelectionDialogContainer, Object.assign({}, props))
);
}
const useStyles = makeStyles()(() => ({
dialogBody: {
minHeight: '60vh'
},
createFolderBtn: {
marginRight: 'auto'
},
treeViewRoot: {
marginTop: '15px'
}
}));
export function PathSelectionDialogContainer(props) {
const {
onClosed,
onClose,
onOk,
rootPath = '',
initialPath,
showCreateFolderOption = true,
stripXmlIndex = true,
allowSwitchingRootPath = true
} = props;
const [root, setRoot] = useState(rootPath);
const [currentPath, setCurrentPath] = useState(initialPath !== null && initialPath !== void 0 ? initialPath : root);
const [openCreateFolderDialog, setOpenCreateFolderDialog] = useState(false);
const { classes } = useStyles();
const title = usePossibleTranslation(props.title);
const createFolderState = useSelection((state) => state.dialogs.createFolder);
useUnmount(onClosed);
const onCloseCreateFolder = () => setOpenCreateFolderDialog(false);
const onWithPendingChangesCloseRequest = useWithPendingChangesCloseRequest(onCloseCreateFolder);
const onCreateFolder = () => setOpenCreateFolderDialog(true);
const onFolderCreated = ({ path, name }) => {
setOpenCreateFolderDialog(false);
let id = `${path}/${name}`;
setCurrentPath(id);
};
const onPathChanged = (path) => {
setCurrentPath(path);
};
return React.createElement(
React.Fragment,
null,
React.createElement(DialogHeader, {
title:
title !== null && title !== void 0
? title
: React.createElement(FormattedMessage, { id: 'pathSelectionDialog.title', defaultMessage: 'Select Path' }),
onCloseButtonClick: onClose
}),
React.createElement(
DialogBody,
{ className: classes.dialogBody },
root && root !== '/'
? React.createElement(
React.Fragment,
null,
React.createElement(PathSelectionInput, {
rootPath: root,
onChange: onPathChanged,
currentPath: currentPath,
startAdornment: allowSwitchingRootPath
? React.createElement(
Tooltip,
{
title: React.createElement(FormattedMessage, {
id: 'pathSelectionDialog.changeRootButtonLabel',
defaultMessage: 'Change root'
})
},
React.createElement(
IconButton,
{
sx: { mr: 0.5 },
onClick: () => {
setRoot('');
setCurrentPath('');
}
},
React.createElement(KeyboardArrowLeftRoundedIcon, null)
)
)
: UNDEFINED
}),
React.createElement(FolderBrowserTreeView, {
rootPath: root,
onPathSelected: onPathChanged,
selectedPath: currentPath
})
)
: React.createElement(BasePathSelector, {
value: '',
onChange: (e) => {
const path = e.target.value;
setRoot(path);
setCurrentPath(path);
}
})
),
React.createElement(
DialogFooter,
null,
showCreateFolderOption &&
React.createElement(
SecondaryButton,
{ onClick: onCreateFolder, className: classes.createFolderBtn },
React.createElement(FormattedMessage, {
id: 'pathSelectionDialog.createFolderButtonLabel',
defaultMessage: 'Create Folder'
})
),
React.createElement(
SecondaryButton,
{ onClick: onClose },
React.createElement(FormattedMessage, { id: 'words.cancel', defaultMessage: 'Cancel' })
),
React.createElement(
PrimaryButton,
{
onClick: () =>
onOk === null || onOk === void 0
? void 0
: onOk({ path: stripXmlIndex ? withoutIndex(currentPath) : currentPath })
},
React.createElement(FormattedMessage, { id: 'words.accept', defaultMessage: 'Accept' })
)
),
React.createElement(CreateFolderDialog, {
title: React.createElement(FormattedMessage, { id: 'newFolder.title', defaultMessage: 'Create a New Folder' }),
path: currentPath,
isSubmitting: createFolderState.isSubmitting,
hasPendingChanges: createFolderState.hasPendingChanges,
isMinimized: createFolderState.isMinimized,
onWithPendingChangesCloseRequest: onWithPendingChangesCloseRequest,
open: openCreateFolderDialog,
onClose: onCloseCreateFolder,
onCreated: onFolderCreated
})
);
}
export default PathSelectionDialog;