removed formik, used own FormProvider instead

packages/web/src/modals/ChangeDownloadUrlModal.js

@@ -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>
   );
 }

packages/web/src/modals/ConnectionModal.js

@@ -1,15 +1,14 @@
 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, FormTextField, FormSelectField, FormSubmit } from '../utility/forms';
 import ModalHeader from './ModalHeader';
 import ModalFooter from './ModalFooter';
 import ModalContent from './ModalContent';
 import useExtensions from '../utility/useExtensions';
 import LoadingInfo from '../widgets/LoadingInfo';
 import { FontIcon } from '../icons';
+import { FormProvider } from '../utility/FormProvider';
 // import FormikForm from '../utility/FormikForm';
 
 export default function ConnectionModal({ modalState, connection = undefined }) {
@@ -41,49 +40,47 @@ export default function ConnectionModal({ modalState, connection = undefined })
   return (
     <ModalBase modalState={modalState}>
       <ModalHeader modalState={modalState}>{connection ? 'Edit connection' : 'Add connection'}</ModalHeader>
-      <Formik onSubmit={handleSubmit} initialValues={connection || { server: 'localhost', engine: 'mssql' }}>
-        <Form>
-          <ModalContent>
-            <FormSelectField label="Database engine" name="engine">
-              <option value=""></option>
-              {extensions.drivers.map((driver) => (
-                <option value={driver.engine} key={driver.engine}>
-                  {driver.title}
-                </option>
-              ))}
-              {/* <option value="mssql">Microsoft SQL Server</option>
+      <FormProvider initialValues={connection || { server: 'localhost', engine: 'mssql' }}>
+        <ModalContent>
+          <FormSelectField label="Database engine" name="engine">
+            <option value=""></option>
+            {extensions.drivers.map((driver) => (
+              <option value={driver.engine} key={driver.engine}>
+                {driver.title}
+              </option>
+            ))}
+            {/* <option value="mssql">Microsoft SQL Server</option>
               <option value="mysql">MySQL</option>
               <option value="postgres">Postgre SQL</option> */}
-            </FormSelectField>
-            <FormTextField label="Server" name="server" />
-            <FormTextField label="Port" name="port" />
-            <FormTextField label="User" name="user" />
-            <FormTextField label="Password" name="password" type="password" />
-            <FormTextField label="Display name" name="displayName" />
-            {!isTesting && sqlConnectResult && sqlConnectResult.msgtype == 'connected' && (
-              <div>
-                Connected: <FontIcon icon="img ok" /> {sqlConnectResult.version}
-              </div>
-            )}
-            {!isTesting && sqlConnectResult && sqlConnectResult.msgtype == 'error' && (
-              <div>
-                Connect failed: <FontIcon icon="img error" /> {sqlConnectResult.error}
-              </div>
-            )}
-            {isTesting && <LoadingInfo message="Testing connection" />}
-          </ModalContent>
+          </FormSelectField>
+          <FormTextField label="Server" name="server" />
+          <FormTextField label="Port" name="port" />
+          <FormTextField label="User" name="user" />
+          <FormTextField label="Password" name="password" type="password" />
+          <FormTextField label="Display name" name="displayName" />
+          {!isTesting && sqlConnectResult && sqlConnectResult.msgtype == 'connected' && (
+            <div>
+              Connected: <FontIcon icon="img ok" /> {sqlConnectResult.version}
+            </div>
+          )}
+          {!isTesting && sqlConnectResult && sqlConnectResult.msgtype == 'error' && (
+            <div>
+              Connect failed: <FontIcon icon="img error" /> {sqlConnectResult.error}
+            </div>
+          )}
+          {isTesting && <LoadingInfo message="Testing connection" />}
+        </ModalContent>
 
-          <ModalFooter>
-            {isTesting ? (
-              <FormButton text="Cancel" onClick={handleCancel} />
-            ) : (
-              <FormButton text="Test" onClick={handleTest} />
-            )}
+        <ModalFooter>
+          {isTesting ? (
+            <FormButton value="Cancel" onClick={handleCancel} />
+          ) : (
+            <FormButton value="Test" onClick={handleTest} />
+          )}
 
-            <FormSubmit text="Save" />
-          </ModalFooter>
-        </Form>
-      </Formik>
+          <FormSubmit value="Save" onClick={handleSubmit} />
+        </ModalFooter>
+      </FormProvider>
     </ModalBase>
   );
 }

packages/web/src/modals/CreateDatabaseModal.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import axios from '../utility/axios';
 import ModalBase from './ModalBase';
-import { FormTextField, FormSubmit } from '../utility/forms';
-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 { FormProvider } from '../utility/FormProvider';
 
 export default function CreateDatabaseModal({ modalState, conid }) {
   const handleSubmit = async (values) => {
@@ -17,16 +17,14 @@ export default function CreateDatabaseModal({ modalState, conid }) {
   return (
     <ModalBase modalState={modalState}>
       <ModalHeader modalState={modalState}>Create database</ModalHeader>
-      <Formik onSubmit={handleSubmit} initialValues={{ name: 'newdb' }}>
-        <Form>
-          <ModalContent>
-            <FormTextField label="Database name" name="name" />
-          </ModalContent>
-          <ModalFooter>
-            <FormSubmit text="Create" />
-          </ModalFooter>
-        </Form>
-      </Formik>
+      <FormProvider initialValues={{ name: 'newdb' }}>
+        <ModalContent>
+          <FormTextField label="Database name" name="name" />
+        </ModalContent>
+        <ModalFooter>
+          <FormSubmit value="Create" onClick={handleSubmit} />
+        </ModalFooter>
+      </FormProvider>
     </ModalBase>
   );
 }

packages/web/src/modals/ImportExportModal.js

@@ -2,7 +2,6 @@ import React from 'react';
 import moment from 'moment';
 import ModalBase from './ModalBase';
 import FormStyledButton from '../widgets/FormStyledButton';
-import { Formik, Form, useFormikContext } from 'formik';
 import styled from 'styled-components';
 import ModalHeader from './ModalHeader';
 import ModalFooter from './ModalFooter';
@@ -21,9 +20,10 @@ import PreviewDataGrid from '../impexp/PreviewDataGrid';
 import useSocket from '../utility/SocketProvider';
 import LoadingInfo from '../widgets/LoadingInfo';
 import { FontIcon } from '../icons';
-import LargeButton from '../widgets/LargeButton';
+import LargeButton, { LargeFormButton } from '../widgets/LargeButton';
 import { getDefaultFileFormat } from '../utility/fileformats';
 import useExtensions from '../utility/useExtensions';
+import { FormProvider, useForm } from '../utility/FormProvider';
 
 const headerHeight = '60px';
 const footerHeight = '100px';
@@ -54,7 +54,7 @@ const WidgetColumnWrapper = styled.div`
   border-left: 1px solid ${(props) => props.theme.border};
 `;
 
-const StyledForm = styled(Form)`
+const FormWrapper = styled.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -92,7 +92,7 @@ const FooterButtons = styled.div`
 
 function GenerateSctriptButton({ modalState }) {
   const setOpenedTabs = useSetOpenedTabs();
-  const { values } = useFormikContext();
+  const { values } = useForm();
   const extensions = useExtensions();
 
   const handleGenerateScript = async () => {
@@ -116,18 +116,6 @@ function GenerateSctriptButton({ modalState }) {
   );
 }
 
-function RunButton() {
-  const { submitForm } = useFormikContext();
-  const handleSubmit = () => {
-    submitForm();
-  };
-  return (
-    <LargeButton onClick={handleSubmit} icon="icon run">
-      Run
-    </LargeButton>
-  );
-}
-
 export default function ImportExportModal({
   modalState,
   initialValues,
@@ -194,8 +182,7 @@ export default function ImportExportModal({
 
   return (
     <ModalBase modalState={modalState} fullScreen isFlex>
-      <Formik
-        onSubmit={handleExecute}
+      <FormProvider
         initialValues={{
           sourceStorageType: 'database',
           targetStorageType: importToArchive ? 'archive' : getDefaultFileFormat(extensions).storageType,
@@ -204,7 +191,7 @@ export default function ImportExportModal({
           ...initialValues,
         }}
       >
-        <StyledForm>
+        <FormWrapper>
           <ModalHeader modalState={modalState}>Import/Export {busy && <FontIcon icon="icon loading" />}</ModalHeader>
           <Wrapper>
             <ContentWrapper theme={theme}>
@@ -236,7 +223,9 @@ export default function ImportExportModal({
                   Cancel
                 </LargeButton>
               ) : (
-                <RunButton />
+                <LargeFormButton onClick={handleExecute} icon="icon run">
+                  Run
+                </LargeFormButton>
               )}
               <GenerateSctriptButton modalState={modalState} />
               <LargeButton onClick={modalState.close} icon="icon close">
@@ -244,8 +233,8 @@ export default function ImportExportModal({
               </LargeButton>
             </FooterButtons>
           </Footer>
-        </StyledForm>
-      </Formik>
+        </FormWrapper>
+      </FormProvider>
     </ModalBase>
   );
 }

packages/web/src/modals/SaveArchiveModal.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import ModalBase from './ModalBase';
 import { FormTextField, FormSubmit, FormArchiveFolderSelect, FormRow, FormLabel } from '../utility/forms';
-import { Formik, Form } from 'formik';
 import styled from 'styled-components';
 import ModalHeader from './ModalHeader';
 import ModalContent from './ModalContent';
 import ModalFooter from './ModalFooter';
+import { FormProvider } from '../utility/FormProvider';
 
 const SelectWrapper = styled.div`
   width: 150px;
@@ -22,23 +22,21 @@ export default function SaveArchiveModal({ file = 'new-table', folder = 'default
   return (
     <ModalBase modalState={modalState}>
       <ModalHeader modalState={modalState}>Save to archive</ModalHeader>
-      <Formik onSubmit={handleSubmit} initialValues={{ file, folder }}>
-        <Form>
-          <ModalContent>
-            {/* <Label>Archive folder</Label> */}
-            <FormRow>
-              <FormLabel>Folder</FormLabel>
-              <SelectWrapper>
-                <FormArchiveFolderSelect name="folder" />
-              </SelectWrapper>
-            </FormRow>
-            <FormTextField label="File name" name="file" />
-          </ModalContent>
-          <ModalFooter>
-            <FormSubmit text="Save" />
-          </ModalFooter>
-        </Form>
-      </Formik>
+      <FormProvider initialValues={{ file, folder }}>
+        <ModalContent>
+          {/* <Label>Archive folder</Label> */}
+          <FormRow>
+            <FormLabel>Folder</FormLabel>
+            <SelectWrapper>
+              <FormArchiveFolderSelect name="folder" />
+            </SelectWrapper>
+          </FormRow>
+          <FormTextField label="File name" name="file" />
+        </ModalContent>
+        <ModalFooter>
+          <FormSubmit value="Save" onClick={handleSubmit} />
+        </ModalFooter>
+      </FormProvider>
     </ModalBase>
   );
 }

packages/web/src/modals/SaveFileModal.js

@@ -3,10 +3,10 @@ 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 ModalHeader from './ModalHeader';
 import ModalContent from './ModalContent';
 import ModalFooter from './ModalFooter';
+import { FormProvider } from '../utility/FormProvider';
 // import FormikForm from '../utility/FormikForm';
 
 export default function SaveFileModal({ data, folder, format, modalState, name, onSave = undefined }) {
@@ -19,16 +19,14 @@ export default function SaveFileModal({ data, folder, format, modalState, name,
   return (
     <ModalBase modalState={modalState}>
       <ModalHeader modalState={modalState}>Save file</ModalHeader>
-      <Formik onSubmit={handleSubmit} initialValues={{ name }}>
-        <Form>
-          <ModalContent>
-            <FormTextField label="File name" name="name" />
-          </ModalContent>
-          <ModalFooter>
-            <FormSubmit text="Save" />
-          </ModalFooter>
-        </Form>
-      </Formik>
+      <FormProvider initialValues={{ name }}>
+        <ModalContent>
+          <FormTextField label="File name" name="name" />
+        </ModalContent>
+        <ModalFooter>
+          <FormSubmit value="Save" onClick={handleSubmit} />
+        </ModalFooter>
+      </FormProvider>
     </ModalBase>
   );
 }

packages/web/src/modals/SetFilterModal.js

@@ -2,12 +2,19 @@ import React from 'react';
 import ModalBase from './ModalBase';
 import FormStyledButton from '../widgets/FormStyledButton';
 import styled from 'styled-components';
-import { FormButtonRow, FormSubmit, FormSelectFieldRaw, FormRow, FormRadioGroupItem, FormTextFieldRaw } from '../utility/forms';
+import {
+  FormButtonRow,
+  FormSubmit,
+  FormSelectFieldRaw,
+  FormRow,
+  FormRadioGroupItem,
+  FormTextFieldRaw,
+} from '../utility/forms';
 import ModalHeader from './ModalHeader';
 import ModalFooter from './ModalFooter';
 import ModalContent from './ModalContent';
-import { Formik, Form } from 'formik';
 import { TextField } from '../utility/inputs';
+import { FormProvider } from '../utility/FormProvider';
 
 const Wrapper = styled.div`
   display: flex;
@@ -104,30 +111,28 @@ export default function SetFilterModal({ modalState, onFilter, filterType, condi
 
   return (
     <ModalBase modalState={modalState}>
-      <Formik onSubmit={handleOk} initialValues={{ condition1, condition2: '=', joinOperator: ' ' }}>
-        <Form>
-          <ModalHeader modalState={modalState}>Set filter</ModalHeader>
-          <ModalContent>
-            <FormRow>Show rows where</FormRow>
-            <FormRow>
-              <Select filterType={filterType} name="condition1" />
-              <FormTextFieldRaw name="value1" editorRef={editorRef} />
-            </FormRow>
-            <FormRow>
-              <FormRadioGroupItem name="joinOperator" value=" " text="And" />
-              <FormRadioGroupItem name="joinOperator" value="," text="Or" />
-            </FormRow>
-            <FormRow>
-              <Select filterType={filterType} name="condition2" />
-              <FormTextFieldRaw name="value2" />
-            </FormRow>
-          </ModalContent>
-          <ModalFooter>
-            <FormSubmit text="OK" />
-            <FormStyledButton type="button" value="Close" onClick={modalState.close} />
-          </ModalFooter>
-        </Form>
-      </Formik>
+      <FormProvider initialValues={{ condition1, condition2: '=', joinOperator: ' ' }}>
+        <ModalHeader modalState={modalState}>Set filter</ModalHeader>
+        <ModalContent>
+          <FormRow>Show rows where</FormRow>
+          <FormRow>
+            <Select filterType={filterType} name="condition1" />
+            <FormTextFieldRaw name="value1" editorRef={editorRef} />
+          </FormRow>
+          <FormRow>
+            <FormRadioGroupItem name="joinOperator" value=" " text="And" />
+            <FormRadioGroupItem name="joinOperator" value="," text="Or" />
+          </FormRow>
+          <FormRow>
+            <Select filterType={filterType} name="condition2" />
+            <FormTextFieldRaw name="value2" />
+          </FormRow>
+        </ModalContent>
+        <ModalFooter>
+          <FormSubmit value="OK" onClick={handleOk} />
+          <FormStyledButton type="button" value="Close" onClick={modalState.close} />
+        </ModalFooter>
+      </FormProvider>
     </ModalBase>
   );
 }