diff options
| -rw-r--r-- | gui/src/renderer/components/Modal.tsx | 27 | ||||
| -rw-r--r-- | gui/src/renderer/components/RedeemVoucher.tsx | 2 |
2 files changed, 16 insertions, 13 deletions
diff --git a/gui/src/renderer/components/Modal.tsx b/gui/src/renderer/components/Modal.tsx index 97631caec4..8e0d099b5b 100644 --- a/gui/src/renderer/components/Modal.tsx +++ b/gui/src/renderer/components/Modal.tsx @@ -162,31 +162,34 @@ interface IModalAlertProps { close?: () => void; } +interface OpenState { + isClosing: boolean; + wasOpen: boolean; +} + export function ModalAlert(props: IModalAlertProps & { isOpen: boolean }) { const { isOpen, ...otherProps } = props; const activeModalContext = useContext(ActiveModalContext); - const [closing, setClosing] = useState(false); - const prevIsOpen = useRef(isOpen); + const [openState, setOpenState] = useState<OpenState>({ isClosing: false, wasOpen: isOpen }); const willExit = useWillExit(); // Modal shouldn't prepare for being opened again while view is disappearing. const onTransitionEnd = useCallback(() => { if (!willExit) { - setClosing(false); + setOpenState({ isClosing: false, wasOpen: isOpen }); } - }, [willExit]); + }, [willExit, isOpen]); useEffect(() => { - setClosing((closing) => closing || (prevIsOpen.current && !isOpen)); - - // Unmounting the Modal during view transitions result in a visual glitch. - if (!willExit) { - prevIsOpen.current = isOpen; - } + setOpenState(({ isClosing, wasOpen }) => ({ + isClosing: isClosing || (wasOpen && !isOpen), + // Unmounting the Modal during view transitions result in a visual glitch. + wasOpen: willExit ? wasOpen : isOpen, + })); }, [isOpen]); - if (!prevIsOpen.current && !isOpen && !closing) { + if (!openState.wasOpen && !isOpen && !openState.isClosing) { return null; } @@ -194,7 +197,7 @@ export function ModalAlert(props: IModalAlertProps & { isOpen: boolean }) { <ModalAlertImpl {...activeModalContext} {...otherProps} - closing={closing} + closing={openState.isClosing} onTransitionEnd={onTransitionEnd} /> ); diff --git a/gui/src/renderer/components/RedeemVoucher.tsx b/gui/src/renderer/components/RedeemVoucher.tsx index 98cba482aa..34cc89c4b0 100644 --- a/gui/src/renderer/components/RedeemVoucher.tsx +++ b/gui/src/renderer/components/RedeemVoucher.tsx @@ -201,7 +201,7 @@ export function RedeemVoucherSubmitButton() { const disabled = submitting || response?.type === 'success'; return ( - <AppButton.GreenButton key="cancel" disabled={!valueValid || disabled} onClick={onSubmit}> + <AppButton.GreenButton disabled={!valueValid || disabled} onClick={onSubmit}> {messages.pgettext('redeem-voucher-view', 'Redeem')} </AppButton.GreenButton> ); |
