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