open-source-mirrors
/
overseerr
mirror of https://github.com/sct/overseerr
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): switch to using Transition component for modals

Browse Source 
This fixes the animation issue when opening Request modals

fixes #220
pull/228/head
sct 4 years ago
parent ccb98553f1
commit b16fbafa1f
2 changed files with 139 additions and 148 deletions
Show Stats Download Patch File Download Diff File

214
src/components/Common/Modal/index.tsx
Unescape View File

@ -1,12 +1,12 @@
import React, { MouseEvent, ReactNode, useRef } from 'react'; import React, { MouseEvent, ReactNode, useRef } from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import Button, { ButtonType } from '../Button'; import Button, { ButtonType } from '../Button';
import { useTransition, animated } from 'react-spring';
import { useLockBodyScroll } from '../../../hooks/useLockBodyScroll'; import { useLockBodyScroll } from '../../../hooks/useLockBodyScroll';
import LoadingSpinner from '../LoadingSpinner'; import LoadingSpinner from '../LoadingSpinner';
import useClickOutside from '../../../hooks/useClickOutside'; import useClickOutside from '../../../hooks/useClickOutside';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
import globalMessages from '../../../i18n/globalMessages'; import globalMessages from '../../../i18n/globalMessages';
import Transition from '../../Transition';
interface ModalProps extends React.HTMLAttributes<HTMLDivElement> { interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
title?: string; title?: string;
@ -53,7 +53,6 @@ const Modal: React.FC<ModalProps> = ({
tertiaryDisabled = false, tertiaryDisabled = false,
tertiaryText, tertiaryText,
onTertiary, onTertiary,
...props
}) => { }) => {
const intl = useIntl(); const intl = useIntl();
const modalRef = useRef<HTMLDivElement>(null); const modalRef = useRef<HTMLDivElement>(null);
@ -63,25 +62,13 @@ const Modal: React.FC<ModalProps> = ({
: undefined; : undefined;
}); });
useLockBodyScroll(true, disableScrollLock); useLockBodyScroll(true, disableScrollLock);
const containerTransitions = useTransition(!loading, null, {
from: { opacity: 0, transform: 'scale(0.5)' },
enter: { opacity: 1, transform: 'scale(1)' },
leave: { opacity: 0, transform: 'scale(0.5)' },
config: { tension: 500, velocity: 40, friction: 60 },
});
const loadingTransitions = useTransition(loading, null, {
from: { opacity: 0, transform: 'scale(0.5)' },
enter: { opacity: 1, transform: 'scale(1)' },
leave: { opacity: 0, transform: 'scale(0.5)' },
config: { tension: 500, velocity: 40, friction: 60 },
});
return ( return (
<> <>
{ReactDOM.createPortal( {ReactDOM.createPortal(
<animated.div // eslint-disable-next-line jsx-a11y/no-static-element-interactions
<div
className="fixed top-0 left-0 right-0 bottom-0 bg-gray-800 bg-opacity-50 w-full h-full z-50 flex justify-center items-center" className="fixed top-0 left-0 right-0 bottom-0 bg-gray-800 bg-opacity-50 w-full h-full z-50 flex justify-center items-center"
style={props.style}
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === 'Escape') { if (e.key === 'Escape') {
typeof onCancel === 'function' && backgroundClickable typeof onCancel === 'function' && backgroundClickable
@ -90,104 +77,111 @@ const Modal: React.FC<ModalProps> = ({
} }
}} }}
> >
{loadingTransitions.map( <Transition
({ props, item, key }) => enter="transition opacity-0 duration-300 transform scale-75"
item && ( enterFrom="opacity-0 scale-75"
<animated.div enterTo="opacity-100 scale-100"
style={{ ...props, position: 'absolute' }} leave="transition opacity-100 duration-300"
key={key} leaveFrom="opacity-100"
> leaveTo="opacity-0"
<LoadingSpinner /> appear
</animated.div> show={loading}
) >
)} <div style={{ position: 'absolute' }}>
{containerTransitions.map( <LoadingSpinner />
({ props, item, key }) => </div>
item && ( </Transition>
<animated.div <Transition
style={props} enter="transition opacity-0 duration-300 transform scale-75"
className="inline-block align-bottom bg-gray-700 sm:rounded-lg px-4 pt-5 pb-4 text-left overflow-auto shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl w-full sm:p-6 max-h-full" enterFrom="opacity-0 scale-75"
role="dialog" enterTo="opacity-100 scale-100"
aria-modal="true" leave="transition opacity-100 duration-300"
aria-labelledby="modal-headline" leaveFrom="opacity-100"
key={key} leaveTo="opacity-0"
ref={modalRef} appear
show={!loading}
>
<div
className="inline-block align-bottom bg-gray-700 sm:rounded-lg px-4 pt-5 pb-4 text-left overflow-auto shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl w-full sm:p-6 max-h-full"
role="dialog"
aria-modal="true"
aria-labelledby="modal-headline"
ref={modalRef}
>
<div className="sm:flex sm:items-center">
{iconSvg && (
<div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-gray-600 text-white sm:mx-0 sm:h-10 sm:w-10">
{iconSvg}
</div>
)}
<div
className={`mt-3 text-center sm:mt-0 sm:text-left ${
iconSvg ? 'sm:ml-4' : 'mb-6'
}`}
> >
<div className="sm:flex sm:items-center"> {title && (
{iconSvg && ( <h3
<div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-gray-600 text-white sm:mx-0 sm:h-10 sm:w-10"> className="text-lg leading-6 font-medium text-white"
{iconSvg} id="modal-headline"
</div>
)}
<div
className={`mt-3 text-center sm:mt-0 sm:text-left ${
iconSvg ? 'sm:ml-4' : 'mb-6'
}`}
> >
{title && ( {title}
<h3 </h3>
className="text-lg leading-6 font-medium text-white" )}
id="modal-headline" </div>
> </div>
{title} {children && (
</h3> <div className="mt-4 text-sm leading-5 text-gray-300">
)} {children}
</div> </div>
</div> )}
{children && ( {(onCancel || onOk || onSecondary || onTertiary) && (
<div className="mt-4 text-sm leading-5 text-gray-300"> <div className="mt-5 sm:mt-4 flex justify-center sm:justify-start flex-row-reverse">
{children} {typeof onOk === 'function' && (
</div> <Button
buttonType={okButtonType}
onClick={onOk}
className="ml-3"
disabled={okDisabled}
>
{okText ? okText : 'Ok'}
</Button>
)}
{typeof onSecondary === 'function' && secondaryText && (
<Button
buttonType={secondaryButtonType}
onClick={onSecondary}
className="ml-3"
disabled={secondaryDisabled}
>
{secondaryText}
</Button>
)} )}
{(onCancel || onOk || onSecondary || onTertiary) && ( {typeof onTertiary === 'function' && tertiaryText && (
<div className="mt-5 sm:mt-4 flex justify-center sm:justify-start flex-row-reverse"> <Button
{typeof onOk === 'function' && ( buttonType={tertiaryButtonType}
<Button onClick={onTertiary}
buttonType={okButtonType} className="ml-3"
onClick={onOk} disabled={tertiaryDisabled}
className="ml-3" >
disabled={okDisabled} {tertiaryText}
> </Button>
{okText ? okText : 'Ok'} )}
</Button> {typeof onCancel === 'function' && (
)} <Button
{typeof onSecondary === 'function' && secondaryText && ( buttonType={cancelButtonType}
<Button onClick={onCancel}
buttonType={secondaryButtonType} className="ml-3 sm:ml-0 sm:px-4"
onClick={onSecondary} >
className="ml-3" {cancelText
disabled={secondaryDisabled} ? cancelText
> : intl.formatMessage(globalMessages.cancel)}
{secondaryText} </Button>
</Button>
)}
{typeof onTertiary === 'function' && tertiaryText && (
<Button
buttonType={tertiaryButtonType}
onClick={onTertiary}
className="ml-3"
disabled={tertiaryDisabled}
>
{tertiaryText}
</Button>
)}
{typeof onCancel === 'function' && (
<Button
buttonType={cancelButtonType}
onClick={onCancel}
className="ml-3 sm:ml-0 sm:px-4"
>
{cancelText
? cancelText
: intl.formatMessage(globalMessages.cancel)}
</Button>
)}
</div>
)} )}
</animated.div> </div>
) )}
)} </div>
</animated.div>, </Transition>
</div>,
document.body document.body
)} )}
</> </>

73
src/components/RequestModal/index.tsx
Unescape View File

@ -2,7 +2,7 @@ import React from 'react';
import MovieRequestModal from './MovieRequestModal'; import MovieRequestModal from './MovieRequestModal';
import type { MediaStatus } from '../../../server/constants/media'; import type { MediaStatus } from '../../../server/constants/media';
import TvRequestModal from './TvRequestModal'; import TvRequestModal from './TvRequestModal';
import { useTransition } from 'react-spring'; import Transition from '../Transition';
interface RequestModalProps { interface RequestModalProps {
show: boolean; show: boolean;
@ -22,49 +22,46 @@ const RequestModal: React.FC<RequestModalProps> = ({
onUpdating, onUpdating,
onCancel, onCancel,
}) => { }) => {
const transitions = useTransition(show, null, {
from: { opacity: 0, backdropFilter: 'blur(0px)' },
enter: { opacity: 1, backdropFilter: 'blur(3px)' },
leave: { opacity: 0, backdropFilter: 'blur(0px)' },
config: { tension: 500, velocity: 40, friction: 60 },
});
if (type === 'tv') { if (type === 'tv') {
return ( return (
<> <Transition
{transitions.map( enter="opacity-0"
({ props, item, key }) => enterFrom="opacity-0"
item && ( enterTo="opacity-100"
<TvRequestModal leave="opacity-100"
onComplete={onComplete} leaveFrom="opacity-100"
onCancel={onCancel} leaveTo="opacity-0"
tmdbId={tmdbId} appear
onUpdating={onUpdating} show={show}
style={props} >
key={key} <TvRequestModal
/> onComplete={onComplete}
) onCancel={onCancel}
)} tmdbId={tmdbId}
</> onUpdating={onUpdating}
/>
</Transition>
); );
} }
return ( return (
<> <Transition
{transitions.map( enter="opacity-0"
({ props, item, key }) => enterFrom="opacity-0"
item && ( enterTo="opacity-100"
<MovieRequestModal leave="opacity-100"
onComplete={onComplete} leaveFrom="opacity-100"
onCancel={onCancel} leaveTo="opacity-0"
tmdbId={tmdbId} appear
onUpdating={onUpdating} show={show}
style={props} >
key={key} <MovieRequestModal
/> onComplete={onComplete}
) onCancel={onCancel}
)} tmdbId={tmdbId}
</> onUpdating={onUpdating}
/>
</Transition>
); );
}; };

Write Preview
Loading…
Cancel
Save