diff --git a/src/component/modal/ImportPublicationStringModal.tsx b/src/component/modal/ImportPublicationStringModal.tsx index 1b485b8cf..ebc9d08f5 100644 --- a/src/component/modal/ImportPublicationStringModal.tsx +++ b/src/component/modal/ImportPublicationStringModal.tsx @@ -1,21 +1,20 @@ -import { Dialog, DialogBody, DialogFooter } from '@blueprintjs/core'; +import { + Dialog, + DialogBody, + DialogFooter, + TextArea, + Button, +} from '@blueprintjs/core'; import { FifoLogger, LogEntry } from 'fifo-logger'; -import { Formik } from 'formik'; import debounce from 'lodash/debounce'; import { resurrect } from 'nmr-processing'; import { useEffect, useMemo, useRef, useState } from 'react'; -import * as yup from 'yup'; +import { Controller, useForm } from 'react-hook-form'; import { useDispatch } from '../context/DispatchContext'; import { useToaster } from '../context/ToasterContext'; -import Button from '../elements/Button'; import { GroupPane } from '../elements/GroupPane'; import ReactTable, { Column } from '../elements/ReactTable/ReactTable'; -import FormikTextarea from '../elements/formik/FormikTextarea'; - -const validationSchema = yup.object({ - publicationText: yup.string().required(), -}); interface InnerImportPublicationStringModalProps { onClose: () => void; @@ -43,6 +42,23 @@ const INITIAL_VALUES = { '1H NMR (CDCl3, 400MHz) δ 1 (s, 1H), 2 (d, 1H, J=7), 3 (t, 1H, J=7), 4 (q, 1H, J=7), 5 (quint, 1H, J=7), 6 (hex, 1H, J=7), 7 (hept, 1H, J=7), 8 (dd, 1H, J=7, J=4)', }; +const COLUMNS: Array> = [ + { + Header: '#', + accessor: (_, index) => index + 1, + style: { width: '40px' }, + }, + { + Header: 'Label', + accessor: 'levelLabel', + style: { width: '60px' }, + }, + { + Header: 'Message', + accessor: 'message', + }, +]; + export function ImportPublicationStringModal( props: ImportPublicationStringModalProps, ) { @@ -57,11 +73,15 @@ function InnerImportPublicationStringModal( ) { const { onClose } = props; - const formRef = useRef(); const dispatch = useDispatch(); const toaster = useToaster(); const [logs, setLogs] = useState([]); const loggerRef = useRef(new FifoLogger()); + const { + handleSubmit, + control, + formState: { isValid }, + } = useForm({ defaultValues: INITIAL_VALUES, mode: 'onChange' }); useEffect(() => { function handleLogs({ detail: { logs } }) { @@ -75,26 +95,6 @@ function InnerImportPublicationStringModal( }; }, []); - const COLUMNS: Array> = useMemo( - () => [ - { - Header: '#', - accessor: (_, index) => index + 1, - style: { width: '40px' }, - }, - { - Header: 'Label', - accessor: 'levelLabel', - style: { width: '60px' }, - }, - { - Header: 'Message', - accessor: 'message', - }, - ], - [], - ); - const debounceChanges = useMemo( () => debounce((value) => { @@ -127,12 +127,13 @@ function InnerImportPublicationStringModal( })(); } - function handleOnChange(event) { + function handleOnChange(value) { loggerRef.current.clear(); - const value = event.target.value; - if (value) { - debounceChanges(value); + + if (!value) { + return; } + debounceChanges(value); } const isNotValid = logs.some((log) => @@ -146,70 +147,62 @@ function InnerImportPublicationStringModal( onClose={onClose} style={{ width: 800, height: 500 }} > - - {({ isValid }) => ( - <> - -
-
-

- Paste a publication string in the text area below and click - on the button Generate spectrum -

- +
+
+

+ Paste a publication string in the text area below and click on the + button Generate spectrum +

+ { + const { onChange, ...otherFieldProps } = field; + return ( +