misc_pterodactyl-panel/resources/scripts/components/server/files/RenameFileModal.tsx

100 lines
4.3 KiB
TypeScript
Raw Normal View History

2019-08-03 05:22:01 +00:00
import React from 'react';
import Modal, { RequiredModalProps } from '@/components/elements/Modal';
2020-03-19 04:32:07 +00:00
import { Form, Formik, FormikHelpers } from 'formik';
2019-08-03 05:22:01 +00:00
import Field from '@/components/elements/Field';
import { join } from 'path';
import renameFiles from '@/api/server/files/renameFiles';
2019-08-03 05:22:01 +00:00
import { ServerContext } from '@/state/server';
2020-07-05 00:57:24 +00:00
import tw from 'twin.macro';
import Button from '@/components/elements/Button';
2020-07-11 05:53:52 +00:00
import useFileManagerSwr from '@/plugins/useFileManagerSwr';
2020-08-02 03:06:17 +00:00
import useFlash from '@/plugins/useFlash';
2019-08-03 05:22:01 +00:00
interface FormikValues {
name: string;
}
2020-08-02 03:06:17 +00:00
type OwnProps = RequiredModalProps & { files: string[]; useMoveTerminology?: boolean };
2020-08-02 03:06:17 +00:00
const RenameFileModal = ({ files, useMoveTerminology, ...props }: OwnProps) => {
2020-08-26 04:39:00 +00:00
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
2020-07-11 05:53:52 +00:00
const { mutate } = useFileManagerSwr();
2020-08-02 03:06:17 +00:00
const { clearFlashes, clearAndAddHttpError } = useFlash();
const directory = ServerContext.useStoreState(state => state.files.directory);
const setSelectedFiles = ServerContext.useStoreActions(actions => actions.files.setSelectedFiles);
2019-08-03 05:22:01 +00:00
2020-07-11 05:53:52 +00:00
const submit = ({ name }: FormikValues, { setSubmitting }: FormikHelpers<FormikValues>) => {
2020-08-02 03:06:17 +00:00
clearFlashes('files');
2020-07-11 05:53:52 +00:00
const len = name.split('/').length;
2020-07-11 23:20:42 +00:00
if (files.length === 1) {
if (!useMoveTerminology && len === 1) {
// Rename the file within this directory.
mutate(data => data!.map(f => f.name === files[0] ? { ...f, name } : f), false);
2020-07-11 23:20:42 +00:00
} else if ((useMoveTerminology || len > 1)) {
// Remove the file from this directory since they moved it elsewhere.
mutate(data => data!.filter(f => f.name !== files[0]), false);
2020-07-11 23:20:42 +00:00
}
2020-07-11 05:53:52 +00:00
}
2019-08-03 05:22:01 +00:00
2020-07-11 23:20:42 +00:00
let data;
if (useMoveTerminology && files.length > 1) {
data = files.map(f => ({ from: f, to: join(name, f) }));
} else {
data = files.map(f => ({ from: f, to: name }));
}
2020-07-11 23:20:42 +00:00
renameFiles(uuid, directory, data)
.then((): Promise<any> => files.length > 0 ? mutate() : Promise.resolve())
.then(() => setSelectedFiles([]))
2019-08-03 05:22:01 +00:00
.catch(error => {
2020-07-11 05:53:52 +00:00
mutate();
2019-08-03 05:22:01 +00:00
setSubmitting(false);
2020-08-02 03:06:17 +00:00
clearAndAddHttpError({ key: 'files', error });
})
.then(() => props.onDismissed());
2019-08-03 05:22:01 +00:00
};
return (
2020-07-11 23:20:42 +00:00
<Formik onSubmit={submit} initialValues={{ name: files.length > 1 ? '' : (files[0] || '') }}>
{({ isSubmitting, values }) => (
2019-08-03 05:22:01 +00:00
<Modal {...props} dismissable={!isSubmitting} showSpinnerOverlay={isSubmitting}>
2020-07-05 00:57:24 +00:00
<Form css={tw`m-0`}>
2019-08-06 04:55:33 +00:00
<div
2020-07-05 00:57:24 +00:00
css={[
tw`flex flex-wrap`,
2020-07-05 00:57:24 +00:00
useMoveTerminology ? tw`items-center` : tw`items-end`,
]}
2019-08-06 04:55:33 +00:00
>
<div css={tw`w-full sm:flex-1 sm:mr-4`}>
<Field
type={'string'}
id={'file_name'}
name={'name'}
label={'File Name'}
description={useMoveTerminology
? 'Enter the new name and directory of this file or folder, relative to the current directory.'
: undefined
}
2020-07-05 00:57:24 +00:00
autoFocus
/>
</div>
<div css={tw`w-full sm:w-auto mt-4 sm:mt-0`}>
<Button css={tw`w-full`}>{useMoveTerminology ? 'Move' : 'Rename'}</Button>
</div>
2019-08-03 05:22:01 +00:00
</div>
2019-08-06 04:55:33 +00:00
{useMoveTerminology &&
2020-07-05 00:57:24 +00:00
<p css={tw`text-xs mt-2 text-neutral-400`}>
<strong css={tw`text-neutral-200`}>New location:</strong>
&nbsp;/home/container/{join(directory, values.name).replace(/^(\.\.\/|\/)+/, '')}
</p>
2019-08-06 04:55:33 +00:00
}
2019-08-03 05:22:01 +00:00
</Form>
</Modal>
)}
</Formik>
);
};
2020-08-02 02:44:50 +00:00
2020-08-02 03:06:17 +00:00
export default RenameFileModal;