From 98028bf2f4d29175fa0922e744fee168849d653f Mon Sep 17 00:00:00 2001 From: Brandon Cohen Date: Wed, 24 Aug 2022 13:18:09 -0400 Subject: [PATCH] fix: transition animation (#2974) switched to using headlessui transition instead of react-css-transition due to new version breaking the animation --- package.json | 1 - .../Common/ButtonWithDropdown/index.tsx | 5 +- src/components/Common/Modal/index.tsx | 17 ++- .../IssueDetails/IssueComment/index.tsx | 7 +- src/components/IssueDetails/index.tsx | 5 +- src/components/IssueModal/index.tsx | 3 +- .../Layout/LanguagePicker/index.tsx | 5 +- src/components/Layout/Sidebar/index.tsx | 20 +-- src/components/Login/index.tsx | 5 +- src/components/RequestModal/index.tsx | 3 +- src/components/Settings/RadarrModal/index.tsx | 3 +- .../Settings/SettingsAbout/Releases/index.tsx | 3 +- .../Settings/SettingsJobsCache/index.tsx | 3 +- .../Settings/SettingsLogs/index.tsx | 3 +- src/components/Settings/SettingsServices.tsx | 5 +- src/components/Settings/SonarrModal/index.tsx | 3 +- src/components/StatusChecker/index.tsx | 3 +- src/components/TitleCard/index.tsx | 6 +- src/components/Toast/index.tsx | 4 +- src/components/Transition/index.tsx | 120 ------------------ src/components/UserList/index.tsx | 6 +- yarn.lock | 10 -- 22 files changed, 66 insertions(+), 174 deletions(-) delete mode 100644 src/components/Transition/index.tsx diff --git a/package.json b/package.json index 81ff9955..7d7c3d81 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,6 @@ "react-select": "5.4.0", "react-spring": "9.5.2", "react-toast-notifications": "2.5.1", - "react-transition-group": "4.4.5", "react-truncate-markup": "5.1.2", "react-use-clipboard": "1.0.8", "reflect-metadata": "0.1.13", diff --git a/src/components/Common/ButtonWithDropdown/index.tsx b/src/components/Common/ButtonWithDropdown/index.tsx index 25162ac0..5a3fb9c7 100644 --- a/src/components/Common/ButtonWithDropdown/index.tsx +++ b/src/components/Common/ButtonWithDropdown/index.tsx @@ -1,9 +1,9 @@ -import Transition from '@app/components/Transition'; import useClickOutside from '@app/hooks/useClickOutside'; import { withProperties } from '@app/utils/typeHelpers'; +import { Transition } from '@headlessui/react'; import { ChevronDownIcon } from '@heroicons/react/solid'; import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react'; -import { useRef, useState } from 'react'; +import { Fragment, useRef, useState } from 'react'; interface DropdownItemProps extends AnchorHTMLAttributes { buttonType?: 'primary' | 'ghost'; @@ -99,6 +99,7 @@ const ButtonWithDropdown = ({ {dropdownIcon ? dropdownIcon : } -
- - +
)}
- + , document.body ); diff --git a/src/components/IssueDetails/IssueComment/index.tsx b/src/components/IssueDetails/IssueComment/index.tsx index 2feba8ec..f84e5e3b 100644 --- a/src/components/IssueDetails/IssueComment/index.tsx +++ b/src/components/IssueDetails/IssueComment/index.tsx @@ -1,15 +1,14 @@ import Button from '@app/components/Common/Button'; import Modal from '@app/components/Common/Modal'; -import Transition from '@app/components/Transition'; 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 { DotsVerticalIcon } from '@heroicons/react/solid'; import type { default as IssueCommentType } from '@server/entity/IssueComment'; import axios from 'axios'; import { Field, Form, Formik } from 'formik'; import Link from 'next/link'; -import { useState } from 'react'; +import { Fragment, useState } from 'react'; import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl'; import ReactMarkdown from 'react-markdown'; import * as Yup from 'yup'; @@ -66,6 +65,7 @@ const IssueComment = ({ } mt-4 space-x-4`} > { > ( { { return ( <>
- +
- {
- - + { leaveTo="-translate-x-full" > <> -
+
@@ -192,7 +194,7 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => { {/* */}
- +
diff --git a/src/components/Login/index.tsx b/src/components/Login/index.tsx index 7b589103..28d2be8a 100644 --- a/src/components/Login/index.tsx +++ b/src/components/Login/index.tsx @@ -4,13 +4,13 @@ import PageTitle from '@app/components/Common/PageTitle'; import LanguagePicker from '@app/components/Layout/LanguagePicker'; import LocalLogin from '@app/components/Login/LocalLogin'; import PlexLoginButton from '@app/components/PlexLoginButton'; -import Transition from '@app/components/Transition'; import useSettings from '@app/hooks/useSettings'; import { useUser } from '@app/hooks/useUser'; +import { Transition } from '@headlessui/react'; import { XCircleIcon } from '@heroicons/react/solid'; import axios from 'axios'; 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 useSWR from 'swr'; @@ -93,6 +93,7 @@ const Login = () => { > <> { return ( { return ( { return (
{ ]} /> { ]} /> { /> )} { return ( { return (
({ - 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 ( - { - 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} - - ); -}; - -const Transition = ({ show, appear, ...rest }: CSSTransitionProps) => { - const { parent } = useContext(TransitionContext); - const isInitialRender = useIsInitialRender(); - const isChild = show === undefined; - - if (isChild) { - return ( - - ); - } - - return ( - - - - ); -}; - -export default Transition; diff --git a/src/components/UserList/index.tsx b/src/components/UserList/index.tsx index dd548ec3..66580b00 100644 --- a/src/components/UserList/index.tsx +++ b/src/components/UserList/index.tsx @@ -7,7 +7,6 @@ import Modal from '@app/components/Common/Modal'; import PageTitle from '@app/components/Common/PageTitle'; import SensitiveInput from '@app/components/Common/SensitiveInput'; import Table from '@app/components/Common/Table'; -import Transition from '@app/components/Transition'; import BulkEditModal from '@app/components/UserList/BulkEditModal'; import PlexImportModal from '@app/components/UserList/PlexImportModal'; import useSettings from '@app/hooks/useSettings'; @@ -15,6 +14,7 @@ import { useUpdateQueryParams } from '@app/hooks/useUpdateQueryParams'; import type { User } from '@app/hooks/useUser'; import { Permission, UserType, useUser } from '@app/hooks/useUser'; import globalMessages from '@app/i18n/globalMessages'; +import { Transition } from '@headlessui/react'; import { TrashIcon } from '@heroicons/react/outline'; import { ChevronLeftIcon, @@ -228,6 +228,7 @@ const UserList = () => { <> { { {