removed formik, used own FormProvider instead

This commit is contained in:
Jan Prochazka
2020-12-05 16:16:04 +01:00
parent 1644587072
commit a3837083da
17 changed files with 248 additions and 266 deletions

View File

@@ -1,38 +1,33 @@
import React from 'react';
import axios from '../utility/axios';
import ModalBase from './ModalBase';
import { FormButtonRow, FormButton, FormTextField, FormSelectField, FormSubmit } from '../utility/forms';
import { TextField } from '../utility/inputs';
import { Formik, Form } from 'formik';
import { FormButton, FormSubmit, FormTextField } from '../utility/forms';
import ModalHeader from './ModalHeader';
import ModalContent from './ModalContent';
import ModalFooter from './ModalFooter';
import FormStyledButton from '../widgets/FormStyledButton';
// import FormikForm from '../utility/FormikForm';
import { FormProvider } from '../utility/FormProvider';
export default function ChangeDownloadUrlModal({ modalState, url = '', onConfirm = undefined }) {
const textFieldRef = React.useRef(null);
React.useEffect(() => {
if (textFieldRef.current) textFieldRef.current.focus();
}, [textFieldRef.current]);
// const textFieldRef = React.useRef(null);
// React.useEffect(() => {
// if (textFieldRef.current) textFieldRef.current.focus();
// }, [textFieldRef.current]);
const handleSubmit = async (values) => {
onConfirm(values.url);
modalState.close();
};
return (
<ModalBase modalState={modalState}>
<ModalHeader modalState={modalState}>Dwonload imported file from web</ModalHeader>
<Formik onSubmit={handleSubmit} initialValues={{ url }}>
<Form>
<ModalContent>
<FormTextField label="URL" name="url" editorRef={textFieldRef} style={{ width: '30vw' }} />
</ModalContent>
<ModalFooter>
<FormSubmit text="OK" />
<FormStyledButton value="Cancel" onClick={() => modalState.close()} />
</ModalFooter>
</Form>
</Formik>
<ModalHeader modalState={modalState}>Download imported file from web</ModalHeader>
<FormProvider initialValues={{ url }}>
<ModalContent>
<FormTextField label="URL" name="url" style={{ width: '30vw' }} focused />
</ModalContent>
<ModalFooter>
<FormSubmit value="OK" onClick={handleSubmit} />
<FormStyledButton value="Cancel" onClick={() => modalState.close()} />
</ModalFooter>
</FormProvider>
</ModalBase>
);
}