submit action - run with enter

packages/web/src/utility/FormProvider.js

@@ -1,9 +1,26 @@
 import React from 'react';
+import keycodes from './keycodes';
 
 const FormContext = React.createContext(null);
 
-export function FormProvider({ children, initialValues }) {
+export function FormProvider({ children, initialValues = {} }) {
   const [values, setValues] = React.useState(initialValues);
+  const [submitAction, setSubmitAction] = React.useState(null);
+  const handleEnter = React.useCallback(
+    (e) => {
+      if (e.keyCode == keycodes.enter && submitAction && submitAction.action) {
+        e.preventDefault();
+        submitAction.action(values);
+      }
+    },
+    [submitAction, values]
+  );
+  React.useEffect(() => {
+    document.addEventListener('keyup', handleEnter);
+    return () => {
+      document.removeEventListener('keyup', handleEnter);
+    };
+  }, [handleEnter]);
   const setFieldValue = React.useCallback(
     (field, value) =>
       setValues((v) => ({
@@ -16,6 +33,7 @@ export function FormProvider({ children, initialValues }) {
     values,
     setValues,
     setFieldValue,
+    setSubmitAction,
   };
   return <FormContext.Provider value={provider}>{children}</FormContext.Provider>;
 }

packages/web/src/utility/forms.js

@@ -106,7 +106,10 @@ export function FormSelectField({ label, name, children = null, ...other }) {
 }
 
 export function FormSubmit({ onClick, value, ...other }) {
-  const { values } = useForm();
+  const { values, setSubmitAction } = useForm();
+  React.useEffect(() => {
+    setSubmitAction({ action: onClick });
+  }, [onClick]);
   return <FormStyledButton type="submit" value={value} onClick={() => onClick(values)} {...other} />;
 }