fix: transition animation (#2974)

switched to using headlessui transition instead of react-css-transition due to new version breaking the
animation
pull/2979/head
Brandon Cohen 2 years ago committed by GitHub
parent baf1ea95a3
commit 98028bf2f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -77,7 +77,6 @@
"react-select": "5.4.0", "react-select": "5.4.0",
"react-spring": "9.5.2", "react-spring": "9.5.2",
"react-toast-notifications": "2.5.1", "react-toast-notifications": "2.5.1",
"react-transition-group": "4.4.5",
"react-truncate-markup": "5.1.2", "react-truncate-markup": "5.1.2",
"react-use-clipboard": "1.0.8", "react-use-clipboard": "1.0.8",
"reflect-metadata": "0.1.13", "reflect-metadata": "0.1.13",

@ -1,9 +1,9 @@
import Transition from '@app/components/Transition';
import useClickOutside from '@app/hooks/useClickOutside'; import useClickOutside from '@app/hooks/useClickOutside';
import { withProperties } from '@app/utils/typeHelpers'; import { withProperties } from '@app/utils/typeHelpers';
import { Transition } from '@headlessui/react';
import { ChevronDownIcon } from '@heroicons/react/solid'; import { ChevronDownIcon } from '@heroicons/react/solid';
import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react'; import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
import { useRef, useState } from 'react'; import { Fragment, useRef, useState } from 'react';
interface DropdownItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> { interface DropdownItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
buttonType?: 'primary' | 'ghost'; buttonType?: 'primary' | 'ghost';
@ -99,6 +99,7 @@ const ButtonWithDropdown = ({
{dropdownIcon ? dropdownIcon : <ChevronDownIcon />} {dropdownIcon ? dropdownIcon : <ChevronDownIcon />}
</button> </button>
<Transition <Transition
as={Fragment}
show={isOpen} show={isOpen}
enter="transition ease-out duration-100 opacity-0" enter="transition ease-out duration-100 opacity-0"
enterFrom="transform opacity-0 scale-95" enterFrom="transform opacity-0 scale-95"

@ -2,12 +2,12 @@ import type { ButtonType } from '@app/components/Common/Button';
import Button from '@app/components/Common/Button'; import Button from '@app/components/Common/Button';
import CachedImage from '@app/components/Common/CachedImage'; import CachedImage from '@app/components/Common/CachedImage';
import LoadingSpinner from '@app/components/Common/LoadingSpinner'; import LoadingSpinner from '@app/components/Common/LoadingSpinner';
import Transition from '@app/components/Transition';
import useClickOutside from '@app/hooks/useClickOutside'; import useClickOutside from '@app/hooks/useClickOutside';
import { useLockBodyScroll } from '@app/hooks/useLockBodyScroll'; import { useLockBodyScroll } from '@app/hooks/useLockBodyScroll';
import globalMessages from '@app/i18n/globalMessages'; import globalMessages from '@app/i18n/globalMessages';
import { Transition } from '@headlessui/react';
import type { MouseEvent } from 'react'; import type { MouseEvent } from 'react';
import { useRef } from 'react'; import { Fragment, useRef } from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
@ -49,7 +49,6 @@ const Modal = ({
disableScrollLock, disableScrollLock,
backgroundClickable = true, backgroundClickable = true,
iconSvg, iconSvg,
loading = false,
secondaryButtonType = 'default', secondaryButtonType = 'default',
secondaryDisabled = false, secondaryDisabled = false,
onSecondary, onSecondary,
@ -81,27 +80,27 @@ const Modal = ({
} }
}} }}
> >
<Transition <Transition.Child
as={Fragment}
enter="transition opacity-0 duration-300 transform scale-75" enter="transition opacity-0 duration-300 transform scale-75"
enterFrom="opacity-0 scale-75" enterFrom="opacity-0 scale-75"
enterTo="opacity-100 scale-100" enterTo="opacity-100 scale-100"
leave="transition opacity-100 duration-300" leave="transition opacity-100 duration-300"
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
show={loading}
> >
<div style={{ position: 'absolute' }}> <div style={{ position: 'absolute' }}>
<LoadingSpinner /> <LoadingSpinner />
</div> </div>
</Transition> </Transition.Child>
<Transition <Transition.Child
as={Fragment}
enter="transition opacity-0 duration-300 transform scale-75" enter="transition opacity-0 duration-300 transform scale-75"
enterFrom="opacity-0 scale-75" enterFrom="opacity-0 scale-75"
enterTo="opacity-100 scale-100" enterTo="opacity-100 scale-100"
leave="transition opacity-100 duration-300" leave="transition opacity-100 duration-300"
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
show={!loading}
> >
<div <div
className="relative inline-block w-full transform overflow-auto bg-gray-700 px-4 pt-5 pb-4 text-left align-bottom shadow-xl ring-1 ring-gray-500 transition-all sm:my-8 sm:max-w-3xl sm:rounded-lg sm:align-middle" className="relative inline-block w-full transform overflow-auto bg-gray-700 px-4 pt-5 pb-4 text-left align-bottom shadow-xl ring-1 ring-gray-500 transition-all sm:my-8 sm:max-w-3xl sm:rounded-lg sm:align-middle"
@ -207,7 +206,7 @@ const Modal = ({
</div> </div>
)} )}
</div> </div>
</Transition> </Transition.Child>
</div>, </div>,
document.body document.body
); );

@ -1,15 +1,14 @@
import Button from '@app/components/Common/Button'; import Button from '@app/components/Common/Button';
import Modal from '@app/components/Common/Modal'; import Modal from '@app/components/Common/Modal';
import Transition from '@app/components/Transition';
import { Permission, useUser } from '@app/hooks/useUser'; import { Permission, useUser } from '@app/hooks/useUser';
import { Menu } from '@headlessui/react'; import { Menu, Transition } from '@headlessui/react';
import { ExclamationIcon } from '@heroicons/react/outline'; import { ExclamationIcon } from '@heroicons/react/outline';
import { DotsVerticalIcon } from '@heroicons/react/solid'; import { DotsVerticalIcon } from '@heroicons/react/solid';
import type { default as IssueCommentType } from '@server/entity/IssueComment'; import type { default as IssueCommentType } from '@server/entity/IssueComment';
import axios from 'axios'; import axios from 'axios';
import { Field, Form, Formik } from 'formik'; import { Field, Form, Formik } from 'formik';
import Link from 'next/link'; import Link from 'next/link';
import { useState } from 'react'; import { Fragment, useState } from 'react';
import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl'; import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
import ReactMarkdown from 'react-markdown'; import ReactMarkdown from 'react-markdown';
import * as Yup from 'yup'; import * as Yup from 'yup';
@ -66,6 +65,7 @@ const IssueComment = ({
} mt-4 space-x-4`} } mt-4 space-x-4`}
> >
<Transition <Transition
as={Fragment}
enter="transition opacity-0 duration-300" enter="transition opacity-0 duration-300"
enterFrom="opacity-0" enterFrom="opacity-0"
enterTo="opacity-100" enterTo="opacity-100"
@ -114,6 +114,7 @@ const IssueComment = ({
</div> </div>
<Transition <Transition
as={Fragment}
show={open} show={open}
enter="transition ease-out duration-100" enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95" enterFrom="transform opacity-0 scale-95"

@ -7,10 +7,10 @@ import PageTitle from '@app/components/Common/PageTitle';
import IssueComment from '@app/components/IssueDetails/IssueComment'; import IssueComment from '@app/components/IssueDetails/IssueComment';
import IssueDescription from '@app/components/IssueDetails/IssueDescription'; import IssueDescription from '@app/components/IssueDetails/IssueDescription';
import { issueOptions } from '@app/components/IssueModal/constants'; import { issueOptions } from '@app/components/IssueModal/constants';
import Transition from '@app/components/Transition';
import { Permission, useUser } from '@app/hooks/useUser'; import { Permission, useUser } from '@app/hooks/useUser';
import globalMessages from '@app/i18n/globalMessages'; import globalMessages from '@app/i18n/globalMessages';
import Error from '@app/pages/_error'; import Error from '@app/pages/_error';
import { Transition } from '@headlessui/react';
import { import {
ChatIcon, ChatIcon,
CheckCircleIcon, CheckCircleIcon,
@ -28,7 +28,7 @@ import axios from 'axios';
import { Field, Form, Formik } from 'formik'; import { Field, Form, Formik } from 'formik';
import Link from 'next/link'; import Link from 'next/link';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { useState } from 'react'; import { Fragment, useState } from 'react';
import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl'; import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
import { useToasts } from 'react-toast-notifications'; import { useToasts } from 'react-toast-notifications';
import useSWR from 'swr'; import useSWR from 'swr';
@ -174,6 +174,7 @@ const IssueDetails = () => {
> >
<PageTitle title={[intl.formatMessage(messages.issuepagetitle), title]} /> <PageTitle title={[intl.formatMessage(messages.issuepagetitle), title]} />
<Transition <Transition
as={Fragment}
enter="transition opacity-0 duration-300" enter="transition opacity-0 duration-300"
enterFrom="opacity-0" enterFrom="opacity-0"
enterTo="opacity-100" enterTo="opacity-100"

@ -1,5 +1,5 @@
import CreateIssueModal from '@app/components/IssueModal/CreateIssueModal'; import CreateIssueModal from '@app/components/IssueModal/CreateIssueModal';
import Transition from '@app/components/Transition'; import { Transition } from '@headlessui/react';
interface IssueModalProps { interface IssueModalProps {
show?: boolean; show?: boolean;
@ -11,6 +11,7 @@ interface IssueModalProps {
const IssueModal = ({ show, mediaType, onCancel, tmdbId }: IssueModalProps) => ( const IssueModal = ({ show, mediaType, onCancel, tmdbId }: IssueModalProps) => (
<Transition <Transition
as="div"
enter="transition opacity-0 duration-300" enter="transition opacity-0 duration-300"
enterFrom="opacity-0" enterFrom="opacity-0"
enterTo="opacity-100" enterTo="opacity-100"

@ -1,10 +1,10 @@
import Transition from '@app/components/Transition';
import type { AvailableLocale } from '@app/context/LanguageContext'; import type { AvailableLocale } from '@app/context/LanguageContext';
import { availableLanguages } from '@app/context/LanguageContext'; import { availableLanguages } from '@app/context/LanguageContext';
import useClickOutside from '@app/hooks/useClickOutside'; import useClickOutside from '@app/hooks/useClickOutside';
import useLocale from '@app/hooks/useLocale'; import useLocale from '@app/hooks/useLocale';
import { Transition } from '@headlessui/react';
import { TranslateIcon } from '@heroicons/react/solid'; import { TranslateIcon } from '@heroicons/react/solid';
import { useRef, useState } from 'react'; import { Fragment, useRef, useState } from 'react';
import { defineMessages, useIntl } from 'react-intl'; import { defineMessages, useIntl } from 'react-intl';
const messages = defineMessages({ const messages = defineMessages({
@ -32,6 +32,7 @@ const LanguagePicker = () => {
</button> </button>
</div> </div>
<Transition <Transition
as={Fragment}
show={isDropdownOpen} show={isDropdownOpen}
enter="transition ease-out duration-100 opacity-0" enter="transition ease-out duration-100 opacity-0"
enterFrom="transform opacity-0 scale-95" enterFrom="transform opacity-0 scale-95"

@ -1,7 +1,7 @@
import VersionStatus from '@app/components/Layout/VersionStatus'; import VersionStatus from '@app/components/Layout/VersionStatus';
import Transition from '@app/components/Transition';
import useClickOutside from '@app/hooks/useClickOutside'; import useClickOutside from '@app/hooks/useClickOutside';
import { Permission, useUser } from '@app/hooks/useUser'; import { Permission, useUser } from '@app/hooks/useUser';
import { Transition } from '@headlessui/react';
import { import {
ClockIcon, ClockIcon,
CogIcon, CogIcon,
@ -12,7 +12,7 @@ import {
} from '@heroicons/react/outline'; } from '@heroicons/react/outline';
import Link from 'next/link'; import Link from 'next/link';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { useRef } from 'react'; import { Fragment, useRef } from 'react';
import { defineMessages, useIntl } from 'react-intl'; import { defineMessages, useIntl } from 'react-intl';
const messages = defineMessages({ const messages = defineMessages({
@ -94,9 +94,10 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
return ( return (
<> <>
<div className="lg:hidden"> <div className="lg:hidden">
<Transition show={open}> <Transition as={Fragment} show={open}>
<div className="fixed inset-0 z-40 flex"> <div className="fixed inset-0 z-40 flex">
<Transition <Transition.Child
as="div"
enter="transition-opacity ease-linear duration-300" enter="transition-opacity ease-linear duration-300"
enterFrom="opacity-0" enterFrom="opacity-0"
enterTo="opacity-100" enterTo="opacity-100"
@ -107,8 +108,9 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
<div className="fixed inset-0"> <div className="fixed inset-0">
<div className="absolute inset-0 bg-gray-900 opacity-90"></div> <div className="absolute inset-0 bg-gray-900 opacity-90"></div>
</div> </div>
</Transition> </Transition.Child>
<Transition <Transition.Child
as="div"
enter="transition ease-in-out duration-300 transform" enter="transition ease-in-out duration-300 transform"
enterFrom="-translate-x-full" enterFrom="-translate-x-full"
enterTo="translate-x-0" enterTo="translate-x-0"
@ -117,7 +119,7 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
leaveTo="-translate-x-full" leaveTo="-translate-x-full"
> >
<> <>
<div className="sidebar relative flex w-full max-w-xs flex-1 flex-col bg-gray-800"> <div className="sidebar relative flex h-full w-full max-w-xs flex-1 flex-col bg-gray-800">
<div className="sidebar-close-button absolute top-0 right-0 -mr-14 p-1"> <div className="sidebar-close-button absolute top-0 right-0 -mr-14 p-1">
<button <button
className="flex h-12 w-12 items-center justify-center rounded-full focus:bg-gray-600 focus:outline-none" className="flex h-12 w-12 items-center justify-center rounded-full focus:bg-gray-600 focus:outline-none"
@ -129,7 +131,7 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
</div> </div>
<div <div
ref={navRef} ref={navRef}
className="flex h-0 flex-1 flex-col overflow-y-auto pt-8 pb-8 sm:pb-4" className="flex flex-1 flex-col overflow-y-auto pt-8 pb-8 sm:pb-4"
> >
<div className="flex flex-shrink-0 items-center px-2"> <div className="flex flex-shrink-0 items-center px-2">
<span className="px-4 text-xl text-gray-50"> <span className="px-4 text-xl text-gray-50">
@ -192,7 +194,7 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
{/* <!-- Force sidebar to shrink to fit close icon --> */} {/* <!-- Force sidebar to shrink to fit close icon --> */}
</div> </div>
</> </>
</Transition> </Transition.Child>
</div> </div>
</Transition> </Transition>
</div> </div>

@ -4,13 +4,13 @@ import PageTitle from '@app/components/Common/PageTitle';
import LanguagePicker from '@app/components/Layout/LanguagePicker'; import LanguagePicker from '@app/components/Layout/LanguagePicker';
import LocalLogin from '@app/components/Login/LocalLogin'; import LocalLogin from '@app/components/Login/LocalLogin';
import PlexLoginButton from '@app/components/PlexLoginButton'; import PlexLoginButton from '@app/components/PlexLoginButton';
import Transition from '@app/components/Transition';
import useSettings from '@app/hooks/useSettings'; import useSettings from '@app/hooks/useSettings';
import { useUser } from '@app/hooks/useUser'; import { useUser } from '@app/hooks/useUser';
import { Transition } from '@headlessui/react';
import { XCircleIcon } from '@heroicons/react/solid'; import { XCircleIcon } from '@heroicons/react/solid';
import axios from 'axios'; import axios from 'axios';
import { useRouter } from 'next/dist/client/router'; import { useRouter } from 'next/dist/client/router';
import { useEffect, useState } from 'react'; import { Fragment, useEffect, useState } from 'react';
import { defineMessages, useIntl } from 'react-intl'; import { defineMessages, useIntl } from 'react-intl';
import useSWR from 'swr'; import useSWR from 'swr';
@ -93,6 +93,7 @@ const Login = () => {
> >
<> <>
<Transition <Transition
as={Fragment}
show={!!error} show={!!error}
enter="opacity-0 transition duration-300" enter="opacity-0 transition duration-300"
enterFrom="opacity-0" enterFrom="opacity-0"

@ -1,7 +1,7 @@
import CollectionRequestModal from '@app/components/RequestModal/CollectionRequestModal'; import CollectionRequestModal from '@app/components/RequestModal/CollectionRequestModal';
import MovieRequestModal from '@app/components/RequestModal/MovieRequestModal'; import MovieRequestModal from '@app/components/RequestModal/MovieRequestModal';
import TvRequestModal from '@app/components/RequestModal/TvRequestModal'; import TvRequestModal from '@app/components/RequestModal/TvRequestModal';
import Transition from '@app/components/Transition'; import { Transition } from '@headlessui/react';
import type { MediaStatus } from '@server/constants/media'; import type { MediaStatus } from '@server/constants/media';
import type { MediaRequest } from '@server/entity/MediaRequest'; import type { MediaRequest } from '@server/entity/MediaRequest';
@ -28,6 +28,7 @@ const RequestModal = ({
}: RequestModalProps) => { }: RequestModalProps) => {
return ( return (
<Transition <Transition
as="div"
enter="transition opacity-0 duration-300" enter="transition opacity-0 duration-300"
enterFrom="opacity-0" enterFrom="opacity-0"
enterTo="opacity-100" enterTo="opacity-100"

@ -1,7 +1,7 @@
import Modal from '@app/components/Common/Modal'; import Modal from '@app/components/Common/Modal';
import SensitiveInput from '@app/components/Common/SensitiveInput'; import SensitiveInput from '@app/components/Common/SensitiveInput';
import Transition from '@app/components/Transition';
import globalMessages from '@app/i18n/globalMessages'; import globalMessages from '@app/i18n/globalMessages';
import { Transition } from '@headlessui/react';
import { PencilIcon, PlusIcon } from '@heroicons/react/solid'; import { PencilIcon, PlusIcon } from '@heroicons/react/solid';
import type { RadarrSettings } from '@server/lib/settings'; import type { RadarrSettings } from '@server/lib/settings';
import axios from 'axios'; import axios from 'axios';
@ -212,6 +212,7 @@ const RadarrModal = ({ onClose, radarr, onSave }: RadarrModalProps) => {
return ( return (
<Transition <Transition
as="div"
appear appear
show show
enter="transition ease-in-out duration-300 transform opacity-0" enter="transition ease-in-out duration-300 transform opacity-0"

@ -2,8 +2,8 @@ import Badge from '@app/components/Common/Badge';
import Button from '@app/components/Common/Button'; import Button from '@app/components/Common/Button';
import LoadingSpinner from '@app/components/Common/LoadingSpinner'; import LoadingSpinner from '@app/components/Common/LoadingSpinner';
import Modal from '@app/components/Common/Modal'; import Modal from '@app/components/Common/Modal';
import Transition from '@app/components/Transition';
import globalMessages from '@app/i18n/globalMessages'; import globalMessages from '@app/i18n/globalMessages';
import { Transition } from '@headlessui/react';
import { DocumentTextIcon } from '@heroicons/react/outline'; import { DocumentTextIcon } from '@heroicons/react/outline';
import { useState } from 'react'; import { useState } from 'react';
import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl'; import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
@ -55,6 +55,7 @@ const Release = ({ currentVersion, release, isLatest }: ReleaseProps) => {
return ( return (
<div className="flex w-full flex-col space-y-3 rounded-md bg-gray-800 px-4 py-2 shadow-md ring-1 ring-gray-700 sm:flex-row sm:space-y-0 sm:space-x-3"> <div className="flex w-full flex-col space-y-3 rounded-md bg-gray-800 px-4 py-2 shadow-md ring-1 ring-gray-700 sm:flex-row sm:space-y-0 sm:space-x-3">
<Transition <Transition
as="div"
enter="opacity-0 transition duration-300" enter="opacity-0 transition duration-300"
enterFrom="opacity-0" enterFrom="opacity-0"
enterTo="opacity-100" enterTo="opacity-100"

@ -5,9 +5,9 @@ import LoadingSpinner from '@app/components/Common/LoadingSpinner';
import Modal from '@app/components/Common/Modal'; import Modal from '@app/components/Common/Modal';
import PageTitle from '@app/components/Common/PageTitle'; import PageTitle from '@app/components/Common/PageTitle';
import Table from '@app/components/Common/Table'; import Table from '@app/components/Common/Table';
import Transition from '@app/components/Transition';
import globalMessages from '@app/i18n/globalMessages'; import globalMessages from '@app/i18n/globalMessages';
import { formatBytes } from '@app/utils/numberHelpers'; import { formatBytes } from '@app/utils/numberHelpers';
import { Transition } from '@headlessui/react';
import { PlayIcon, StopIcon, TrashIcon } from '@heroicons/react/outline'; import { PlayIcon, StopIcon, TrashIcon } from '@heroicons/react/outline';
import { PencilIcon } from '@heroicons/react/solid'; import { PencilIcon } from '@heroicons/react/solid';
import type { CacheItem } from '@server/interfaces/api/settingsInterfaces'; import type { CacheItem } from '@server/interfaces/api/settingsInterfaces';
@ -187,6 +187,7 @@ const SettingsJobs = () => {
]} ]}
/> />
<Transition <Transition
as="div"
enter="opacity-0 transition duration-300" enter="opacity-0 transition duration-300"
enterFrom="opacity-0" enterFrom="opacity-0"
enterTo="opacity-100" enterTo="opacity-100"

@ -5,10 +5,10 @@ import Modal from '@app/components/Common/Modal';
import PageTitle from '@app/components/Common/PageTitle'; import PageTitle from '@app/components/Common/PageTitle';
import Table from '@app/components/Common/Table'; import Table from '@app/components/Common/Table';
import Tooltip from '@app/components/Common/Tooltip'; import Tooltip from '@app/components/Common/Tooltip';
import Transition from '@app/components/Transition';
import { useUpdateQueryParams } from '@app/hooks/useUpdateQueryParams'; import { useUpdateQueryParams } from '@app/hooks/useUpdateQueryParams';
import globalMessages from '@app/i18n/globalMessages'; import globalMessages from '@app/i18n/globalMessages';
import Error from '@app/pages/_error'; import Error from '@app/pages/_error';
import { Transition } from '@headlessui/react';
import { import {
ChevronLeftIcon, ChevronLeftIcon,
ChevronRightIcon, ChevronRightIcon,
@ -135,6 +135,7 @@ const SettingsLogs = () => {
]} ]}
/> />
<Transition <Transition
as="div"
enter="opacity-0 transition duration-300" enter="opacity-0 transition duration-300"
enterFrom="opacity-0" enterFrom="opacity-0"
enterTo="opacity-100" enterTo="opacity-100"

@ -8,12 +8,12 @@ import Modal from '@app/components/Common/Modal';
import PageTitle from '@app/components/Common/PageTitle'; import PageTitle from '@app/components/Common/PageTitle';
import RadarrModal from '@app/components/Settings/RadarrModal'; import RadarrModal from '@app/components/Settings/RadarrModal';
import SonarrModal from '@app/components/Settings/SonarrModal'; import SonarrModal from '@app/components/Settings/SonarrModal';
import Transition from '@app/components/Transition';
import globalMessages from '@app/i18n/globalMessages'; import globalMessages from '@app/i18n/globalMessages';
import { Transition } from '@headlessui/react';
import { PencilIcon, PlusIcon, TrashIcon } from '@heroicons/react/solid'; import { PencilIcon, PlusIcon, TrashIcon } from '@heroicons/react/solid';
import type { RadarrSettings, SonarrSettings } from '@server/lib/settings'; import type { RadarrSettings, SonarrSettings } from '@server/lib/settings';
import axios from 'axios'; import axios from 'axios';
import { useState } from 'react'; import { Fragment, useState } from 'react';
import { defineMessages, useIntl } from 'react-intl'; import { defineMessages, useIntl } from 'react-intl';
import useSWR, { mutate } from 'swr'; import useSWR, { mutate } from 'swr';
@ -245,6 +245,7 @@ const SettingsServices = () => {
/> />
)} )}
<Transition <Transition
as={Fragment}
show={deleteServerModal.open} show={deleteServerModal.open}
enter="transition ease-in-out duration-300 transform opacity-0" enter="transition ease-in-out duration-300 transform opacity-0"
enterFrom="opacity-0" enterFrom="opacity-0"

@ -1,7 +1,7 @@
import Modal from '@app/components/Common/Modal'; import Modal from '@app/components/Common/Modal';
import SensitiveInput from '@app/components/Common/SensitiveInput'; import SensitiveInput from '@app/components/Common/SensitiveInput';
import Transition from '@app/components/Transition';
import globalMessages from '@app/i18n/globalMessages'; import globalMessages from '@app/i18n/globalMessages';
import { Transition } from '@headlessui/react';
import { PencilIcon, PlusIcon } from '@heroicons/react/solid'; import { PencilIcon, PlusIcon } from '@heroicons/react/solid';
import type { SonarrSettings } from '@server/lib/settings'; import type { SonarrSettings } from '@server/lib/settings';
import axios from 'axios'; import axios from 'axios';
@ -221,6 +221,7 @@ const SonarrModal = ({ onClose, sonarr, onSave }: SonarrModalProps) => {
return ( return (
<Transition <Transition
as="div"
appear appear
show show
enter="transition ease-in-out duration-300 transform opacity-0" enter="transition ease-in-out duration-300 transform opacity-0"

@ -1,8 +1,8 @@
import Modal from '@app/components/Common/Modal'; import Modal from '@app/components/Common/Modal';
import Transition from '@app/components/Transition';
import useSettings from '@app/hooks/useSettings'; import useSettings from '@app/hooks/useSettings';
import { Permission, useUser } from '@app/hooks/useUser'; import { Permission, useUser } from '@app/hooks/useUser';
import globalMessages from '@app/i18n/globalMessages'; import globalMessages from '@app/i18n/globalMessages';
import { Transition } from '@headlessui/react';
import { RefreshIcon, SparklesIcon } from '@heroicons/react/outline'; import { RefreshIcon, SparklesIcon } from '@heroicons/react/outline';
import type { StatusResponse } from '@server/interfaces/api/settingsInterfaces'; import type { StatusResponse } from '@server/interfaces/api/settingsInterfaces';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
@ -44,6 +44,7 @@ const StatusChecker = () => {
return ( return (
<Transition <Transition
as="div"
enter="opacity-0 transition duration-300" enter="opacity-0 transition duration-300"
enterFrom="opacity-0" enterFrom="opacity-0"
enterTo="opacity-100" enterTo="opacity-100"

@ -4,17 +4,17 @@ import CachedImage from '@app/components/Common/CachedImage';
import RequestModal from '@app/components/RequestModal'; import RequestModal from '@app/components/RequestModal';
import ErrorCard from '@app/components/TitleCard/ErrorCard'; import ErrorCard from '@app/components/TitleCard/ErrorCard';
import Placeholder from '@app/components/TitleCard/Placeholder'; import Placeholder from '@app/components/TitleCard/Placeholder';
import Transition from '@app/components/Transition';
import { useIsTouch } from '@app/hooks/useIsTouch'; import { useIsTouch } from '@app/hooks/useIsTouch';
import { Permission, useUser } from '@app/hooks/useUser'; import { Permission, useUser } from '@app/hooks/useUser';
import globalMessages from '@app/i18n/globalMessages'; import globalMessages from '@app/i18n/globalMessages';
import { withProperties } from '@app/utils/typeHelpers'; import { withProperties } from '@app/utils/typeHelpers';
import { Transition } from '@headlessui/react';
import { DownloadIcon } from '@heroicons/react/outline'; import { DownloadIcon } from '@heroicons/react/outline';
import { BellIcon, CheckIcon, ClockIcon } from '@heroicons/react/solid'; import { BellIcon, CheckIcon, ClockIcon } from '@heroicons/react/solid';
import { MediaStatus } from '@server/constants/media'; import { MediaStatus } from '@server/constants/media';
import type { MediaType } from '@server/models/Search'; import type { MediaType } from '@server/models/Search';
import Link from 'next/link'; import Link from 'next/link';
import { useCallback, useEffect, useState } from 'react'; import { Fragment, useCallback, useEffect, useState } from 'react';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
interface TitleCardProps { interface TitleCardProps {
@ -163,6 +163,7 @@ const TitleCard = ({
</div> </div>
</div> </div>
<Transition <Transition
as={Fragment}
show={isUpdating} show={isUpdating}
enter="transition ease-in-out duration-300 transform opacity-0" enter="transition ease-in-out duration-300 transform opacity-0"
enterFrom="opacity-0" enterFrom="opacity-0"
@ -177,6 +178,7 @@ const TitleCard = ({
</Transition> </Transition>
<Transition <Transition
as={Fragment}
show={!image || showDetail || showRequestModal} show={!image || showDetail || showRequestModal}
enter="transition transform opacity-0" enter="transition transform opacity-0"
enterFrom="opacity-0" enterFrom="opacity-0"

@ -1,4 +1,4 @@
import Transition from '@app/components/Transition'; import { Transition } from '@headlessui/react';
import { import {
CheckCircleIcon, CheckCircleIcon,
ExclamationCircleIcon, ExclamationCircleIcon,
@ -6,6 +6,7 @@ import {
InformationCircleIcon, InformationCircleIcon,
} from '@heroicons/react/outline'; } from '@heroicons/react/outline';
import { XIcon } from '@heroicons/react/solid'; import { XIcon } from '@heroicons/react/solid';
import { Fragment } from 'react';
import type { ToastProps } from 'react-toast-notifications'; import type { ToastProps } from 'react-toast-notifications';
const Toast = ({ const Toast = ({
@ -17,6 +18,7 @@ const Toast = ({
return ( return (
<div className="toast pointer-events-none flex max-w-full items-end justify-center px-2 py-2 sm:items-start sm:justify-end"> <div className="toast pointer-events-none flex max-w-full items-end justify-center px-2 py-2 sm:items-start sm:justify-end">
<Transition <Transition
as={Fragment}
show={transitionState === 'entered'} show={transitionState === 'entered'}
enter="transition duration-300 transform-gpu" enter="transition duration-300 transform-gpu"
enterFrom="opacity-0 scale-95" enterFrom="opacity-0 scale-95"

@ -1,120 +0,0 @@
import React, { useContext, useEffect, useRef } from 'react';
import { CSSTransition as ReactCSSTransition } from 'react-transition-group';
interface CSSTransitionProps {
show?: boolean;
enter?: string;
enterFrom?: string;
enterTo?: string;
leave?: string;
leaveFrom?: string;
leaveTo?: string;
appear?: boolean;
children?: React.ReactNode;
}
const TransitionContext = React.createContext<{
parent: { show?: boolean; isInitialRender?: boolean; appear?: boolean };
}>({
parent: {},
});
function useIsInitialRender() {
const isInitialRender = useRef(true);
useEffect(() => {
isInitialRender.current = false;
}, []);
return isInitialRender.current;
}
const CSSTransition = ({
show,
enter = '',
enterFrom = '',
enterTo = '',
leave = '',
leaveFrom = '',
leaveTo = '',
appear,
children,
}: CSSTransitionProps) => {
const enterClasses = enter.split(' ').filter((s) => s.length);
const enterFromClasses = enterFrom.split(' ').filter((s) => s.length);
const enterToClasses = enterTo.split(' ').filter((s) => s.length);
const leaveClasses = leave.split(' ').filter((s) => s.length);
const leaveFromClasses = leaveFrom.split(' ').filter((s) => s.length);
const leaveToClasses = leaveTo.split(' ').filter((s) => s.length);
const addClasses = (node: HTMLElement, classes: string[]) => {
classes.length && node.classList.add(...classes);
};
const removeClasses = (node: HTMLElement, classes: string[]) => {
classes.length && node.classList.remove(...classes);
};
return (
<ReactCSSTransition
appear={appear}
unmountOnExit
in={show}
addEndListener={(node, done) => {
node.addEventListener('transitionend', done, false);
}}
onEnter={(node: HTMLElement) => {
addClasses(node, [...enterClasses, ...enterFromClasses]);
}}
onEntering={(node: HTMLElement) => {
removeClasses(node, enterFromClasses);
addClasses(node, enterToClasses);
}}
onEntered={(node: HTMLElement) => {
removeClasses(node, [...enterToClasses, ...enterClasses]);
}}
onExit={(node) => {
addClasses(node, [...leaveClasses, ...leaveFromClasses]);
}}
onExiting={(node) => {
removeClasses(node, leaveFromClasses);
addClasses(node, leaveToClasses);
}}
onExited={(node) => {
removeClasses(node, [...leaveToClasses, ...leaveClasses]);
}}
>
{children}
</ReactCSSTransition>
);
};
const Transition = ({ show, appear, ...rest }: CSSTransitionProps) => {
const { parent } = useContext(TransitionContext);
const isInitialRender = useIsInitialRender();
const isChild = show === undefined;
if (isChild) {
return (
<CSSTransition
appear={parent.appear || !parent.isInitialRender}
show={parent.show}
{...rest}
/>
);
}
return (
<TransitionContext.Provider
value={{
parent: {
show,
isInitialRender,
appear,
},
}}
>
<CSSTransition appear={appear} show={show} {...rest} />
</TransitionContext.Provider>
);
};
export default Transition;

@ -7,7 +7,6 @@ import Modal from '@app/components/Common/Modal';
import PageTitle from '@app/components/Common/PageTitle'; import PageTitle from '@app/components/Common/PageTitle';
import SensitiveInput from '@app/components/Common/SensitiveInput'; import SensitiveInput from '@app/components/Common/SensitiveInput';
import Table from '@app/components/Common/Table'; import Table from '@app/components/Common/Table';
import Transition from '@app/components/Transition';
import BulkEditModal from '@app/components/UserList/BulkEditModal'; import BulkEditModal from '@app/components/UserList/BulkEditModal';
import PlexImportModal from '@app/components/UserList/PlexImportModal'; import PlexImportModal from '@app/components/UserList/PlexImportModal';
import useSettings from '@app/hooks/useSettings'; import useSettings from '@app/hooks/useSettings';
@ -15,6 +14,7 @@ import { useUpdateQueryParams } from '@app/hooks/useUpdateQueryParams';
import type { User } from '@app/hooks/useUser'; import type { User } from '@app/hooks/useUser';
import { Permission, UserType, useUser } from '@app/hooks/useUser'; import { Permission, UserType, useUser } from '@app/hooks/useUser';
import globalMessages from '@app/i18n/globalMessages'; import globalMessages from '@app/i18n/globalMessages';
import { Transition } from '@headlessui/react';
import { TrashIcon } from '@heroicons/react/outline'; import { TrashIcon } from '@heroicons/react/outline';
import { import {
ChevronLeftIcon, ChevronLeftIcon,
@ -228,6 +228,7 @@ const UserList = () => {
<> <>
<PageTitle title={intl.formatMessage(messages.users)} /> <PageTitle title={intl.formatMessage(messages.users)} />
<Transition <Transition
as="div"
enter="opacity-0 transition duration-300" enter="opacity-0 transition duration-300"
enterFrom="opacity-0" enterFrom="opacity-0"
enterTo="opacity-100" enterTo="opacity-100"
@ -256,6 +257,7 @@ const UserList = () => {
</Transition> </Transition>
<Transition <Transition
as="div"
enter="opacity-0 transition duration-300" enter="opacity-0 transition duration-300"
enterFrom="opacity-0" enterFrom="opacity-0"
enterTo="opacity-100" enterTo="opacity-100"
@ -439,6 +441,7 @@ const UserList = () => {
</Transition> </Transition>
<Transition <Transition
as="div"
enter="opacity-0 transition duration-300" enter="opacity-0 transition duration-300"
enterFrom="opacity-0" enterFrom="opacity-0"
enterTo="opacity-100" enterTo="opacity-100"
@ -459,6 +462,7 @@ const UserList = () => {
</Transition> </Transition>
<Transition <Transition
as="div"
enter="opacity-0 transition duration-300" enter="opacity-0 transition duration-300"
enterFrom="opacity-0" enterFrom="opacity-0"
enterTo="opacity-100" enterTo="opacity-100"

@ -10389,16 +10389,6 @@ react-toast-notifications@2.5.1:
"@emotion/core" "^10.0.14" "@emotion/core" "^10.0.14"
react-transition-group "^4.4.1" react-transition-group "^4.4.1"
react-transition-group@4.4.5:
version "4.4.5"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
dependencies:
"@babel/runtime" "^7.5.5"
dom-helpers "^5.0.1"
loose-envify "^1.4.0"
prop-types "^15.6.2"
react-transition-group@^4.3.0, react-transition-group@^4.4.1: react-transition-group@^4.3.0, react-transition-group@^4.4.1:
version "4.4.2" version "4.4.2"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"

Loading…
Cancel
Save