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

60 lines
1.9 KiB
TypeScript
Raw Normal View History

2019-12-22 00:38:40 +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-12-22 00:38:40 +00:00
import { object, string } from 'yup';
import Field from '@/components/elements/Field';
2019-12-22 01:43:50 +00:00
import { ServerContext } from '@/state/server';
import { join } from 'path';
2020-07-05 00:57:24 +00:00
import tw from 'twin.macro';
import Button from '@/components/elements/Button';
2019-12-22 00:38:40 +00:00
type Props = RequiredModalProps & {
onFileNamed: (name: string) => void;
};
interface Values {
fileName: string;
}
export default ({ onFileNamed, onDismissed, ...props }: Props) => {
const directory = ServerContext.useStoreState((state) => state.files.directory);
2019-12-22 01:43:50 +00:00
2020-03-19 04:32:07 +00:00
const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
2019-12-22 01:43:50 +00:00
onFileNamed(join(directory, values.fileName));
2019-12-22 00:38:40 +00:00
setSubmitting(false);
};
return (
<Formik
onSubmit={submit}
initialValues={{ fileName: '' }}
validationSchema={object().shape({
fileName: string().required().min(1),
})}
>
{({ resetForm }) => (
<Modal
onDismissed={() => {
resetForm();
onDismissed();
}}
{...props}
>
<Form>
<Field
id={'fileName'}
name={'fileName'}
label={'File Name'}
description={'Enter the name that this file should be saved as.'}
2020-07-05 00:57:24 +00:00
autoFocus
2019-12-22 00:38:40 +00:00
/>
2020-07-05 00:57:24 +00:00
<div css={tw`mt-6 text-right`}>
<Button>Create File</Button>
2019-12-22 00:38:40 +00:00
</div>
</Form>
</Modal>
)}
</Formik>
);
};