misc_pterodactyl-panel/resources/scripts/components/server/files/FileNameModal.tsx
2020-03-18 21:32:07 -07:00

59 lines
1.9 KiB
TypeScript

import React from 'react';
import Modal, { RequiredModalProps } from '@/components/elements/Modal';
import { Form, Formik, FormikHelpers } from 'formik';
import { object, string } from 'yup';
import Field from '@/components/elements/Field';
import { ServerContext } from '@/state/server';
import { join } from 'path';
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);
const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
onFileNamed(join(directory, values.fileName));
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.'}
autoFocus={true}
/>
<div className={'mt-6 text-right'}>
<button className={'btn btn-primary btn-sm'}>
Create File
</button>
</div>
</Form>
</Modal>
)}
</Formik>
);
};