Skip to content

Commit 98028bf

Browse files
OwsleyJrOwsleyJr
authored
fix: transition animation (#2974)
switched to using headlessui transition instead of react-css-transition due to new version breaking the animation
1 parent baf1ea9 commit 98028bf

File tree

22 files changed

+66
-174
lines changed

22 files changed

+66
-174
lines changed

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,6 @@
7777
"react-select": "5.4.0",
7878
"react-spring": "9.5.2",
7979
"react-toast-notifications": "2.5.1",
80-
"react-transition-group": "4.4.5",
8180
"react-truncate-markup": "5.1.2",
8281
"react-use-clipboard": "1.0.8",
8382
"reflect-metadata": "0.1.13",

‎src/components/Common/ButtonWithDropdown/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import Transition from '@app/components/Transition';
21
import useClickOutside from '@app/hooks/useClickOutside';
32
import { withProperties } from '@app/utils/typeHelpers';
3+
import { Transition } from '@headlessui/react';
44
import { ChevronDownIcon } from '@heroicons/react/solid';
55
import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
6-
import { useRef, useState } from 'react';
6+
import { Fragment, useRef, useState } from 'react';
77

88
interface DropdownItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
99
buttonType?: 'primary' | 'ghost';
@@ -99,6 +99,7 @@ const ButtonWithDropdown = ({
9999
{dropdownIcon ? dropdownIcon : <ChevronDownIcon />}
100100
</button>
101101
<Transition
102+
as={Fragment}
102103
show={isOpen}
103104
enter="transition ease-out duration-100 opacity-0"
104105
enterFrom="transform opacity-0 scale-95"

‎src/components/Common/Modal/index.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import type { ButtonType } from '@app/components/Common/Button';
22
import Button from '@app/components/Common/Button';
33
import CachedImage from '@app/components/Common/CachedImage';
44
import LoadingSpinner from '@app/components/Common/LoadingSpinner';
5-
import Transition from '@app/components/Transition';
65
import useClickOutside from '@app/hooks/useClickOutside';
76
import { useLockBodyScroll } from '@app/hooks/useLockBodyScroll';
87
import globalMessages from '@app/i18n/globalMessages';
8+
import { Transition } from '@headlessui/react';
99
import type { MouseEvent } from 'react';
10-
import { useRef } from 'react';
10+
import { Fragment, useRef } from 'react';
1111
import ReactDOM from 'react-dom';
1212
import { useIntl } from 'react-intl';
1313

@@ -49,7 +49,6 @@ const Modal = ({
4949
disableScrollLock,
5050
backgroundClickable = true,
5151
iconSvg,
52-
loading = false,
5352
secondaryButtonType = 'default',
5453
secondaryDisabled = false,
5554
onSecondary,
@@ -81,27 +80,27 @@ const Modal = ({
8180
}
8281
}}
8382
>
84-
<Transition
83+
<Transition.Child
84+
as={Fragment}
8585
enter="transition opacity-0 duration-300 transform scale-75"
8686
enterFrom="opacity-0 scale-75"
8787
enterTo="opacity-100 scale-100"
8888
leave="transition opacity-100 duration-300"
8989
leaveFrom="opacity-100"
9090
leaveTo="opacity-0"
91-
show={loading}
9291
>
9392
<div style={{ position: 'absolute' }}>
9493
<LoadingSpinner />
9594
</div>
96-
</Transition>
97-
<Transition
95+
</Transition.Child>
96+
<Transition.Child
97+
as={Fragment}
9898
enter="transition opacity-0 duration-300 transform scale-75"
9999
enterFrom="opacity-0 scale-75"
100100
enterTo="opacity-100 scale-100"
101101
leave="transition opacity-100 duration-300"
102102
leaveFrom="opacity-100"
103103
leaveTo="opacity-0"
104-
show={!loading}
105104
>
106105
<div
107106
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 = ({
207206
</div>
208207
)}
209208
</div>
210-
</Transition>
209+
</Transition.Child>
211210
</div>,
212211
document.body
213212
);

‎src/components/IssueDetails/IssueComment/index.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
import Button from '@app/components/Common/Button';
22
import Modal from '@app/components/Common/Modal';
3-
import Transition from '@app/components/Transition';
43
import { Permission, useUser } from '@app/hooks/useUser';
5-
import { Menu } from '@headlessui/react';
4+
import { Menu, Transition } from '@headlessui/react';
65
import { ExclamationIcon } from '@heroicons/react/outline';
76
import { DotsVerticalIcon } from '@heroicons/react/solid';
87
import type { default as IssueCommentType } from '@server/entity/IssueComment';
98
import axios from 'axios';
109
import { Field, Form, Formik } from 'formik';
1110
import Link from 'next/link';
12-
import { useState } from 'react';
11+
import { Fragment, useState } from 'react';
1312
import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
1413
import ReactMarkdown from 'react-markdown';
1514
import * as Yup from 'yup';
@@ -66,6 +65,7 @@ const IssueComment = ({
6665
} mt-4 space-x-4`}
6766
>
6867
<Transition
68+
as={Fragment}
6969
enter="transition opacity-0 duration-300"
7070
enterFrom="opacity-0"
7171
enterTo="opacity-100"
@@ -114,6 +114,7 @@ const IssueComment = ({
114114
</div>
115115

116116
<Transition
117+
as={Fragment}
117118
show={open}
118119
enter="transition ease-out duration-100"
119120
enterFrom="transform opacity-0 scale-95"

‎src/components/IssueDetails/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ import PageTitle from '@app/components/Common/PageTitle';
77
import IssueComment from '@app/components/IssueDetails/IssueComment';
88
import IssueDescription from '@app/components/IssueDetails/IssueDescription';
99
import { issueOptions } from '@app/components/IssueModal/constants';
10-
import Transition from '@app/components/Transition';
1110
import { Permission, useUser } from '@app/hooks/useUser';
1211
import globalMessages from '@app/i18n/globalMessages';
1312
import Error from '@app/pages/_error';
13+
import { Transition } from '@headlessui/react';
1414
import {
1515
ChatIcon,
1616
CheckCircleIcon,
@@ -28,7 +28,7 @@ import axios from 'axios';
2828
import { Field, Form, Formik } from 'formik';
2929
import Link from 'next/link';
3030
import { useRouter } from 'next/router';
31-
import { useState } from 'react';
31+
import { Fragment, useState } from 'react';
3232
import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
3333
import { useToasts } from 'react-toast-notifications';
3434
import useSWR from 'swr';
@@ -174,6 +174,7 @@ const IssueDetails = () => {
174174
>
175175
<PageTitle title={[intl.formatMessage(messages.issuepagetitle), title]} />
176176
<Transition
177+
as={Fragment}
177178
enter="transition opacity-0 duration-300"
178179
enterFrom="opacity-0"
179180
enterTo="opacity-100"

‎src/components/IssueModal/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import CreateIssueModal from '@app/components/IssueModal/CreateIssueModal';
2-
import Transition from '@app/components/Transition';
2+
import { Transition } from '@headlessui/react';
33

44
interface IssueModalProps {
55
show?: boolean;
@@ -11,6 +11,7 @@ interface IssueModalProps {
1111

1212
const IssueModal = ({ show, mediaType, onCancel, tmdbId }: IssueModalProps) => (
1313
<Transition
14+
as="div"
1415
enter="transition opacity-0 duration-300"
1516
enterFrom="opacity-0"
1617
enterTo="opacity-100"

‎src/components/Layout/LanguagePicker/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import Transition from '@app/components/Transition';
21
import type { AvailableLocale } from '@app/context/LanguageContext';
32
import { availableLanguages } from '@app/context/LanguageContext';
43
import useClickOutside from '@app/hooks/useClickOutside';
54
import useLocale from '@app/hooks/useLocale';
5+
import { Transition } from '@headlessui/react';
66
import { TranslateIcon } from '@heroicons/react/solid';
7-
import { useRef, useState } from 'react';
7+
import { Fragment, useRef, useState } from 'react';
88
import { defineMessages, useIntl } from 'react-intl';
99

1010
const messages = defineMessages({
@@ -32,6 +32,7 @@ const LanguagePicker = () => {
3232
</button>
3333
</div>
3434
<Transition
35+
as={Fragment}
3536
show={isDropdownOpen}
3637
enter="transition ease-out duration-100 opacity-0"
3738
enterFrom="transform opacity-0 scale-95"

‎src/components/Layout/Sidebar/index.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import VersionStatus from '@app/components/Layout/VersionStatus';
2-
import Transition from '@app/components/Transition';
32
import useClickOutside from '@app/hooks/useClickOutside';
43
import { Permission, useUser } from '@app/hooks/useUser';
4+
import { Transition } from '@headlessui/react';
55
import {
66
ClockIcon,
77
CogIcon,
@@ -12,7 +12,7 @@ import {
1212
} from '@heroicons/react/outline';
1313
import Link from 'next/link';
1414
import { useRouter } from 'next/router';
15-
import { useRef } from 'react';
15+
import { Fragment, useRef } from 'react';
1616
import { defineMessages, useIntl } from 'react-intl';
1717

1818
const messages = defineMessages({
@@ -94,9 +94,10 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
9494
return (
9595
<>
9696
<div className="lg:hidden">
97-
<Transition show={open}>
97+
<Transition as={Fragment} show={open}>
9898
<div className="fixed inset-0 z-40 flex">
99-
<Transition
99+
<Transition.Child
100+
as="div"
100101
enter="transition-opacity ease-linear duration-300"
101102
enterFrom="opacity-0"
102103
enterTo="opacity-100"
@@ -107,8 +108,9 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
107108
<div className="fixed inset-0">
108109
<div className="absolute inset-0 bg-gray-900 opacity-90"></div>
109110
</div>
110-
</Transition>
111-
<Transition
111+
</Transition.Child>
112+
<Transition.Child
113+
as="div"
112114
enter="transition ease-in-out duration-300 transform"
113115
enterFrom="-translate-x-full"
114116
enterTo="translate-x-0"
@@ -117,7 +119,7 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
117119
leaveTo="-translate-x-full"
118120
>
119121
<>
120-
<div className="sidebar relative flex w-full max-w-xs flex-1 flex-col bg-gray-800">
122+
<div className="sidebar relative flex h-full w-full max-w-xs flex-1 flex-col bg-gray-800">
121123
<div className="sidebar-close-button absolute top-0 right-0 -mr-14 p-1">
122124
<button
123125
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) => {
129131
</div>
130132
<div
131133
ref={navRef}
132-
className="flex h-0 flex-1 flex-col overflow-y-auto pt-8 pb-8 sm:pb-4"
134+
className="flex flex-1 flex-col overflow-y-auto pt-8 pb-8 sm:pb-4"
133135
>
134136
<div className="flex flex-shrink-0 items-center px-2">
135137
<span className="px-4 text-xl text-gray-50">
@@ -192,7 +194,7 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
192194
{/* <!-- Force sidebar to shrink to fit close icon --> */}
193195
</div>
194196
</>
195-
</Transition>
197+
</Transition.Child>
196198
</div>
197199
</Transition>
198200
</div>

‎src/components/Login/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ import PageTitle from '@app/components/Common/PageTitle';
44
import LanguagePicker from '@app/components/Layout/LanguagePicker';
55
import LocalLogin from '@app/components/Login/LocalLogin';
66
import PlexLoginButton from '@app/components/PlexLoginButton';
7-
import Transition from '@app/components/Transition';
87
import useSettings from '@app/hooks/useSettings';
98
import { useUser } from '@app/hooks/useUser';
9+
import { Transition } from '@headlessui/react';
1010
import { XCircleIcon } from '@heroicons/react/solid';
1111
import axios from 'axios';
1212
import { useRouter } from 'next/dist/client/router';
13-
import { useEffect, useState } from 'react';
13+
import { Fragment, useEffect, useState } from 'react';
1414
import { defineMessages, useIntl } from 'react-intl';
1515
import useSWR from 'swr';
1616

@@ -93,6 +93,7 @@ const Login = () => {
9393
>
9494
<>
9595
<Transition
96+
as={Fragment}
9697
show={!!error}
9798
enter="opacity-0 transition duration-300"
9899
enterFrom="opacity-0"

‎src/components/RequestModal/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import CollectionRequestModal from '@app/components/RequestModal/CollectionRequestModal';
22
import MovieRequestModal from '@app/components/RequestModal/MovieRequestModal';
33
import TvRequestModal from '@app/components/RequestModal/TvRequestModal';
4-
import Transition from '@app/components/Transition';
4+
import { Transition } from '@headlessui/react';
55
import type { MediaStatus } from '@server/constants/media';
66
import type { MediaRequest } from '@server/entity/MediaRequest';
77

@@ -28,6 +28,7 @@ const RequestModal = ({
2828
}: RequestModalProps) => {
2929
return (
3030
<Transition
31+
as="div"
3132
enter="transition opacity-0 duration-300"
3233
enterFrom="opacity-0"
3334
enterTo="opacity-100"

0 commit comments

Comments
 (0)