diff --git a/src/mobile-ui-react/ModalEntryFormDialog.scss b/src/mobile-ui-react/ModalEntryFormDialog.scss index 934e07a..9b47b63 100644 --- a/src/mobile-ui-react/ModalEntryFormDialog.scss +++ b/src/mobile-ui-react/ModalEntryFormDialog.scss @@ -56,7 +56,7 @@ box-sizing: border-box; margin-top: 2px; margin-bottom: 10px; - font-family: OpenSans; + font-family: "Open Sans", sans-serif; font-size: 14px; background-color: var(--muic-background); color: var(--muic-foreground-2); @@ -128,3 +128,9 @@ color: var(--muic-active-contrast); border-width: 0px; } + +.mui-modal-button-disabled { + color: var(--muic-gray-6); + background-color: var(--muic-gray-3); + border-width: 0px; +} diff --git a/src/mobile-ui-react/ModalEntryFormDialog.tsx b/src/mobile-ui-react/ModalEntryFormDialog.tsx index 9f74936..d517052 100644 --- a/src/mobile-ui-react/ModalEntryFormDialog.tsx +++ b/src/mobile-ui-react/ModalEntryFormDialog.tsx @@ -160,6 +160,7 @@ ModalEntryFormField.idForName = (name: string) => { export function ModalDialog(props: ModalDialogProps) { const { title, className, onCancel, onOK, cancelTitle, okTitle, children } = props; const [fadedOut, setFadedOut] = React.useState(true); + const [waitingForOK, setWaitingForOK] = React.useState(false); React.useEffect(() => { // Create the dialog with fadedOut set, then switch it off after it has been created, which will trigger the half @@ -169,19 +170,27 @@ export function ModalDialog(props: ModalDialogProps) { }, 0); }, []); - const handleOK = async () => { + const handleOK = React.useCallback(async () => { + if (waitingForOK) + return false; + setWaitingForOK(true); if (await onOK()) { setFadedOut(true); return true; } + setWaitingForOK(false); return false; - }; + }, [onOK, waitingForOK]); - const handleCancel = () => { + const handleCancel = React.useCallback(() => { + if (waitingForOK) + return; setFadedOut(true); onCancel(); - }; + }, [onCancel, waitingForOK]); + const cancelClassName = classnames("mui-modal-button", waitingForOK && "mui-modal-button-disabled"); + const okClassName = classnames("mui-modal-button", "mui-default", waitingForOK && "mui-modal-button-disabled"); return (
@@ -196,7 +205,7 @@ export function ModalDialog(props: ModalDialogProps) { {children}
{cancelTitle !== "" &&
{ e.stopPropagation(); handleCancel(); @@ -205,7 +214,7 @@ export function ModalDialog(props: ModalDialogProps) { {cancelTitle ?? MobileCore.translate("general.cancel")}
} {okTitle !== "" &&
{ e.stopPropagation(); await handleOK();