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

89 lines
3.7 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 renameFile from '@/api/server/files/renameFile';
import { ServerContext } from '@/state/server';
import { FileObject } from '@/api/server/files/loadDirectory';
import classNames from 'classnames';
2019-08-03 05:22:01 +00:00
interface FormikValues {
name: string;
}
type Props = RequiredModalProps & { file: FileObject; useMoveTerminology?: boolean };
export default ({ file, useMoveTerminology, ...props }: Props) => {
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const directory = ServerContext.useStoreState(state => state.files.directory);
const { pushFile, removeFile } = ServerContext.useStoreActions(actions => actions.files);
2019-08-03 05:22:01 +00:00
2020-03-19 04:32:07 +00:00
const submit = (values: FormikValues, { setSubmitting }: FormikHelpers<FormikValues>) => {
const renameFrom = join(directory, file.name);
const renameTo = join(directory, values.name);
2019-08-03 05:22:01 +00:00
renameFile(uuid, { renameFrom, renameTo })
.then(() => {
if (!useMoveTerminology && values.name.split('/').length === 1) {
pushFile({ ...file, name: values.name });
}
if ((useMoveTerminology || values.name.split('/').length > 1) && file.uuid.length > 0) {
removeFile(file.uuid);
}
props.onDismissed();
})
2019-08-03 05:22:01 +00:00
.catch(error => {
setSubmitting(false);
console.error(error);
});
};
return (
<Formik
onSubmit={submit}
initialValues={{ name: file.name }}
>
{({ isSubmitting, values }) => (
2019-08-03 05:22:01 +00:00
<Modal {...props} dismissable={!isSubmitting} showSpinnerOverlay={isSubmitting}>
<Form className={'m-0'}>
2019-08-06 04:55:33 +00:00
<div
className={classNames('flex', {
'items-center': useMoveTerminology,
'items-end': !useMoveTerminology,
})}
>
<div className={'flex-1 mr-6'}>
<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
}
autoFocus={true}
/>
</div>
<div>
<button className={'btn btn-sm btn-primary'}>
{useMoveTerminology ? 'Move' : 'Rename'}
</button>
</div>
2019-08-03 05:22:01 +00:00
</div>
2019-08-06 04:55:33 +00:00
{useMoveTerminology &&
<p className={'text-xs mt-2 text-neutral-400'}>
<strong className={'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>
);
};