@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
141 lines (139 loc) • 5.03 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 { useIntl } from 'react-intl';
import React, { useEffect, useState } from 'react';
import DialogBody from '../DialogBody';
import { ItemSelectorTree } from './CopyDialogItemSelectorTree';
import DialogFooter from '../DialogFooter';
import SecondaryButton from '../SecondaryButton';
import PrimaryButton from '../PrimaryButton';
import { messages } from './utils';
import { fetchLegacyItemsTree } from '../../services/content';
import Typography from '@mui/material/Typography';
import { useDispatch } from 'react-redux';
import { updateCopyDialog } from '../../state/actions/dialogs';
export function CopyDialogBody(props) {
const { onOk, item, site, onClose, disabled } = props;
const { formatMessage } = useIntl();
const dispatch = useDispatch();
const [data, setData] = useState(null);
const [selected, setSelected] = useState([]);
const onItemSelected = (checked, node) => {
if (checked) {
const nextSelected = [...selected, node.uri];
if (data.parents[node.uri] && !selected.includes(data.parents[node.uri])) {
nextSelected.push(data.parents[node.uri]);
}
setSelected(nextSelected);
} else {
setSelected(
selected.filter((path) => {
var _a;
return (
path !== node.uri &&
!((_a = data.children[node.uri]) === null || _a === void 0 ? void 0 : _a.includes(path))
);
})
);
}
};
const onToggleSelectAll = () => {
if (data.paths.length === selected.length) {
setSelected([]);
} else {
setSelected(data.paths);
}
};
const onCopy = () => {
onOk === null || onOk === void 0 ? void 0 : onOk({ paths: selected });
};
useEffect(() => {
// Disable dismissing the dialog until the data has finished fetching. The call is expensive; don't want people
// dismissing by mistake.
dispatch(updateCopyDialog({ isSubmitting: true }));
fetchLegacyItemsTree(site, item.path, { depth: 1000, order: 'default' }).subscribe({
next(item) {
let paths = [];
let children = {};
let parents = {};
function process(parent) {
paths.push(parent.uri);
if (parent.children.length) {
children[parent.uri] = [];
parent.children.forEach((item) => {
parents[item.uri] = parent.uri;
children[parent.uri].push(item.uri);
if (item.children) {
process(item);
}
});
}
}
process(item);
setSelected(paths);
setData({ item, parents, children, paths });
dispatch(updateCopyDialog({ isSubmitting: false }));
}
});
}, [dispatch, item.path, site]);
return React.createElement(
React.Fragment,
null,
React.createElement(
DialogBody,
{ minHeight: true },
data
? React.createElement(ItemSelectorTree, {
item: data.item,
paths: data.paths,
selected: selected,
handleSelect: onItemSelected,
toggleSelectAll: onToggleSelectAll
})
: React.createElement(Typography, { children: formatMessage(messages.fetching) + '...' })
),
React.createElement(
DialogFooter,
null,
React.createElement(
SecondaryButton,
{ disabled: disabled, onClick: (e) => onClose(e, null) },
formatMessage(messages.cancel)
),
React.createElement(
PrimaryButton,
{ disabled: disabled || selected.length === 0, autoFocus: true, onClick: onCopy },
formatMessage(messages.copy)
)
)
);
}
export default CopyDialogBody;