mirror of
https://github.com/sct/overseerr.git
synced 2025-09-17 17:24:35 +02:00
fix(frontend): switch to using Transition component for modals
This fixes the animation issue when opening Request modals fixes #220
This commit is contained in:
@@ -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,27 +77,35 @@ 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"
|
||||||
|
appear
|
||||||
|
show={loading}
|
||||||
>
|
>
|
||||||
|
<div style={{ position: 'absolute' }}>
|
||||||
<LoadingSpinner />
|
<LoadingSpinner />
|
||||||
</animated.div>
|
</div>
|
||||||
)
|
</Transition>
|
||||||
)}
|
<Transition
|
||||||
{containerTransitions.map(
|
enter="transition opacity-0 duration-300 transform scale-75"
|
||||||
({ props, item, key }) =>
|
enterFrom="opacity-0 scale-75"
|
||||||
item && (
|
enterTo="opacity-100 scale-100"
|
||||||
<animated.div
|
leave="transition opacity-100 duration-300"
|
||||||
style={props}
|
leaveFrom="opacity-100"
|
||||||
|
leaveTo="opacity-0"
|
||||||
|
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"
|
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"
|
role="dialog"
|
||||||
aria-modal="true"
|
aria-modal="true"
|
||||||
aria-labelledby="modal-headline"
|
aria-labelledby="modal-headline"
|
||||||
key={key}
|
|
||||||
ref={modalRef}
|
ref={modalRef}
|
||||||
>
|
>
|
||||||
<div className="sm:flex sm:items-center">
|
<div className="sm:flex sm:items-center">
|
||||||
@@ -184,10 +179,9 @@ const Modal: React.FC<ModalProps> = ({
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</animated.div>
|
</div>
|
||||||
)
|
</Transition>
|
||||||
)}
|
</div>,
|
||||||
</animated.div>,
|
|
||||||
document.body
|
document.body
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
|
@@ -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"
|
||||||
|
leave="opacity-100"
|
||||||
|
leaveFrom="opacity-100"
|
||||||
|
leaveTo="opacity-0"
|
||||||
|
appear
|
||||||
|
show={show}
|
||||||
|
>
|
||||||
<TvRequestModal
|
<TvRequestModal
|
||||||
onComplete={onComplete}
|
onComplete={onComplete}
|
||||||
onCancel={onCancel}
|
onCancel={onCancel}
|
||||||
tmdbId={tmdbId}
|
tmdbId={tmdbId}
|
||||||
onUpdating={onUpdating}
|
onUpdating={onUpdating}
|
||||||
style={props}
|
|
||||||
key={key}
|
|
||||||
/>
|
/>
|
||||||
)
|
</Transition>
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<Transition
|
||||||
{transitions.map(
|
enter="opacity-0"
|
||||||
({ props, item, key }) =>
|
enterFrom="opacity-0"
|
||||||
item && (
|
enterTo="opacity-100"
|
||||||
|
leave="opacity-100"
|
||||||
|
leaveFrom="opacity-100"
|
||||||
|
leaveTo="opacity-0"
|
||||||
|
appear
|
||||||
|
show={show}
|
||||||
|
>
|
||||||
<MovieRequestModal
|
<MovieRequestModal
|
||||||
onComplete={onComplete}
|
onComplete={onComplete}
|
||||||
onCancel={onCancel}
|
onCancel={onCancel}
|
||||||
tmdbId={tmdbId}
|
tmdbId={tmdbId}
|
||||||
onUpdating={onUpdating}
|
onUpdating={onUpdating}
|
||||||
style={props}
|
|
||||||
key={key}
|
|
||||||
/>
|
/>
|
||||||
)
|
</Transition>
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user