diff --git a/packages/web/src/modals/ChangeDownloadUrlModal.js b/packages/web/src/modals/ChangeDownloadUrlModal.js index b103bf36..716db3d6 100644 --- a/packages/web/src/modals/ChangeDownloadUrlModal.js +++ b/packages/web/src/modals/ChangeDownloadUrlModal.js @@ -12,10 +12,19 @@ export default function ChangeDownloadUrlModal({ modalState, url = '', onConfirm // React.useEffect(() => { // if (textFieldRef.current) textFieldRef.current.focus(); // }, [textFieldRef.current]); - const handleSubmit = async (values) => { - onConfirm(values.url); - modalState.close(); - }; + + // const handleSubmit = () => async (values) => { + // onConfirm(values.url); + // modalState.close(); + // }; + + const handleSubmit = React.useCallback( + async (values) => { + onConfirm(values.url); + modalState.close(); + }, + [modalState, onConfirm] + ); return ( Download imported file from web diff --git a/packages/web/src/modals/ConfirmModal.js b/packages/web/src/modals/ConfirmModal.js index a4cd33c1..c6e9db5c 100644 --- a/packages/web/src/modals/ConfirmModal.js +++ b/packages/web/src/modals/ConfirmModal.js @@ -3,22 +3,26 @@ import ModalBase from './ModalBase'; import FormStyledButton from '../widgets/FormStyledButton'; import ModalFooter from './ModalFooter'; import ModalContent from './ModalContent'; +import { FormSubmit } from '../utility/forms'; +import { FormProvider } from '../utility/FormProvider'; export default function ConfirmModal({ message, modalState, onConfirm }) { return ( - - {message} + + + {message} - - { - modalState.close(); - onConfirm(); - }} - /> - - - + + { + modalState.close(); + onConfirm(); + }} + /> + + + + ); } diff --git a/packages/web/src/modals/ModalBase.js b/packages/web/src/modals/ModalBase.js index 9caff979..d773153b 100644 --- a/packages/web/src/modals/ModalBase.js +++ b/packages/web/src/modals/ModalBase.js @@ -70,6 +70,7 @@ export default function ModalBase({ modalState, children, isFlex = false, fullSc overlayClassName="RactModalOverlay" fullScreen={fullScreen} isFlex={isFlex} + ariaHideApp={false} // style={{ // overlay: { // backgroundColor: '#000', diff --git a/packages/web/src/utility/FormProvider.js b/packages/web/src/utility/FormProvider.js index d52d1584..142f2adb 100644 --- a/packages/web/src/utility/FormProvider.js +++ b/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 {children}; } diff --git a/packages/web/src/utility/forms.js b/packages/web/src/utility/forms.js index 295f6df0..7fd70665 100644 --- a/packages/web/src/utility/forms.js +++ b/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 onClick(values)} {...other} />; } diff --git a/packages/web/src/widgets/DatabaseWidget.js b/packages/web/src/widgets/DatabaseWidget.js index e4cdef12..900b0cae 100644 --- a/packages/web/src/widgets/DatabaseWidget.js +++ b/packages/web/src/widgets/DatabaseWidget.js @@ -73,7 +73,9 @@ function ConnectionList() { + (displayName || server || '').toUpperCase() + )} AppObjectComponent={ConnectionAppObject} // makeAppObj={connectionAppObject({ boldCurrentDatabase: true })} SubItems={SubDatabaseList}