diff --git a/src/components/Common/Modal/index.tsx b/src/components/Common/Modal/index.tsx index 835fbbce2..a7ead4733 100644 --- a/src/components/Common/Modal/index.tsx +++ b/src/components/Common/Modal/index.tsx @@ -1,12 +1,12 @@ import React, { MouseEvent, ReactNode, useRef } from 'react'; import ReactDOM from 'react-dom'; import Button, { ButtonType } from '../Button'; -import { useTransition, animated } from 'react-spring'; import { useLockBodyScroll } from '../../../hooks/useLockBodyScroll'; import LoadingSpinner from '../LoadingSpinner'; import useClickOutside from '../../../hooks/useClickOutside'; import { useIntl } from 'react-intl'; import globalMessages from '../../../i18n/globalMessages'; +import Transition from '../../Transition'; interface ModalProps extends React.HTMLAttributes { title?: string; @@ -53,7 +53,6 @@ const Modal: React.FC = ({ tertiaryDisabled = false, tertiaryText, onTertiary, - ...props }) => { const intl = useIntl(); const modalRef = useRef(null); @@ -63,25 +62,13 @@ const Modal: React.FC = ({ : undefined; }); 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 ( <> {ReactDOM.createPortal( - { if (e.key === 'Escape') { typeof onCancel === 'function' && backgroundClickable @@ -90,104 +77,111 @@ const Modal: React.FC = ({ } }} > - {loadingTransitions.map( - ({ props, item, key }) => - item && ( - - - - ) - )} - {containerTransitions.map( - ({ props, item, key }) => - item && ( - -
- {iconSvg && ( -
- {iconSvg} -
- )} -
- {title && ( - - )} -
+ +
+ +
+
+ +
+
+ {iconSvg && ( +
+ {iconSvg}
- {children && ( -
- {children} -
+ )} +
+ {title && ( + )} - {(onCancel || onOk || onSecondary || onTertiary) && ( -
- {typeof onOk === 'function' && ( - - )} - {typeof onSecondary === 'function' && secondaryText && ( - - )} - {typeof onTertiary === 'function' && tertiaryText && ( - - )} - {typeof onCancel === 'function' && ( - - )} -
+
+
+ {children && ( +
+ {children} +
+ )} + {(onCancel || onOk || onSecondary || onTertiary) && ( +
+ {typeof onOk === 'function' && ( + )} - - ) - )} - , + {typeof onSecondary === 'function' && secondaryText && ( + + )} + {typeof onTertiary === 'function' && tertiaryText && ( + + )} + {typeof onCancel === 'function' && ( + + )} +
+ )} +
+
+
, document.body )} diff --git a/src/components/RequestModal/index.tsx b/src/components/RequestModal/index.tsx index e87adb607..b1164d5a0 100644 --- a/src/components/RequestModal/index.tsx +++ b/src/components/RequestModal/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import MovieRequestModal from './MovieRequestModal'; import type { MediaStatus } from '../../../server/constants/media'; import TvRequestModal from './TvRequestModal'; -import { useTransition } from 'react-spring'; +import Transition from '../Transition'; interface RequestModalProps { show: boolean; @@ -22,49 +22,46 @@ const RequestModal: React.FC = ({ onUpdating, 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') { return ( - <> - {transitions.map( - ({ props, item, key }) => - item && ( - - ) - )} - + + + ); } return ( - <> - {transitions.map( - ({ props, item, key }) => - item && ( - - ) - )} - + + + ); };