59 lines
1.9 KiB
TypeScript
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>
|
|
);
|
|
};
|