Adds open/close animations to dialogs and modals
This commit is contained in:
parent
fc066e05df
commit
b6cfe0933d
10 changed files with 635 additions and 224 deletions
37
ts/hooks/useAnimated.tsx
Normal file
37
ts/hooks/useAnimated.tsx
Normal 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
|
||||
),
|
||||
};
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue