Adds open/close animations to dialogs and modals

This commit is contained in:
Josh Perez 2021-09-29 16:59:37 -04:00 committed by GitHub
parent fc066e05df
commit b6cfe0933d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 635 additions and 224 deletions

37
ts/hooks/useAnimated.tsx Normal file
View file

@ -0,0 +1,37 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React, { useState, ReactElement } from 'react';
import { animated, useTransition, UseTransitionProps } from '@react-spring/web';
import cubicBezier from 'bezier-easing';
export function useAnimated<Props extends Record<string, unknown>>(
props: UseTransitionProps,
onClose: () => unknown
): {
close: () => unknown;
renderAnimation: (children: ReactElement) => JSX.Element;
} {
const [isOpen, setIsOpen] = useState(true);
const transitions = useTransition<boolean, Props>(isOpen, {
...props,
leave: {
...props.leave,
onRest: () => onClose(),
},
config: {
duration: 200,
easing: cubicBezier(0.17, 0.17, 0, 1),
...props.config,
},
});
return {
close: () => setIsOpen(false),
renderAnimation: children =>
transitions((style, item) =>
item ? <animated.div style={style}>{children}</animated.div> : null
),
};
}