mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Update modal animation states to ensure proper dismissal

Browse source
This commit is contained in:
trevor-signal 2023-06-20 19:38:16 -04:00 committed by GitHub
parent 0db5a3b888
commit 5e9bbb42f1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
ts/hooks/useAnimated.tsx
View file

@ -12,6 +12,7 @@ export type ModalConfigType = {
}; };
enum ModalState { enum ModalState {
Opening = 'Opening',
Open = 'Open', Open = 'Open',
Closing = 'Closing', Closing = 'Closing',
Closed = 'Closed', Closed = 'Closed',
@ -32,19 +33,22 @@ export function useAnimated(
modalStyles: SpringValues<ModalConfigType>; modalStyles: SpringValues<ModalConfigType>;
overlayStyles: SpringValues<ModalConfigType>; overlayStyles: SpringValues<ModalConfigType>;
} { } {
const [state, setState] = useState(ModalState.Open); const [state, setState] = useState(ModalState.Opening);
const isOpen = state === ModalState.Open; const shouldShowModal =
state === ModalState.Open || state === ModalState.Opening;
const isClosed = state === ModalState.Closed; const isClosed = state === ModalState.Closed;
const modalRef = useSpringRef(); const modalRef = useSpringRef();
const modalStyles = useSpring({ const modalStyles = useSpring({
from: getFrom(isOpen), from: getFrom(shouldShowModal),
to: getTo(isOpen), to: getTo(shouldShowModal),
onRest: () => { onRest: () => {
if (state === ModalState.Closing) { if (state === ModalState.Closing) {
setState(ModalState.Closed); setState(ModalState.Closed);
onClose(); onClose();
} else if (state === ModalState.Opening) {
setState(ModalState.Open);
} }
}, },
config: { config: {
@ -60,7 +64,7 @@ export function useAnimated(
const overlayStyles = useSpring({ const overlayStyles = useSpring({
from: { opacity: 0 }, from: { opacity: 0 },
to: { opacity: isOpen ? 1 : 0 }, to: { opacity: shouldShowModal ? 1 : 0 },
config: { config: {
clamp: true, clamp: true,
friction: 22, friction: 22,
@ -69,7 +73,7 @@ export function useAnimated(
ref: overlayRef, ref: overlayRef,
}); });
useChain(isOpen ? [overlayRef, modalRef] : [modalRef, overlayRef]); useChain(shouldShowModal ? [overlayRef, modalRef] : [modalRef, overlayRef]);
const close = useCallback(() => { const close = useCallback(() => {
setState(currentState => { setState(currentState => {
if (currentState === ModalState.Open) { if (currentState === ModalState.Open) {