From 95f61f1d9fcdc52553684e41a925f1b78e348a58 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Fri, 27 Sep 2024 23:10:31 +0200 Subject: [PATCH] pl-fe: replace react-popper with @floating-ui/react MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- packages/pl-fe/package.json | 2 -- .../src/components/profile-hover-card.tsx | 34 ++++++++++++++----- .../src/components/status-hover-card.tsx | 34 ++++++++++++++----- packages/pl-fe/yarn.lock | 17 ++-------- 4 files changed, 54 insertions(+), 33 deletions(-) diff --git a/packages/pl-fe/package.json b/packages/pl-fe/package.json index 5217a5857..ddd8d98b8 100644 --- a/packages/pl-fe/package.json +++ b/packages/pl-fe/package.json @@ -56,7 +56,6 @@ "@lexical/utils": "^0.18.0", "@mkljczk/lexical-remark": "^0.4.0", "@mkljczk/react-hotkeys": "^1.2.2", - "@popperjs/core": "^2.11.5", "@reach/combobox": "^0.18.0", "@reach/menu-button": "^0.18.0", "@reach/popover": "^0.18.0", @@ -125,7 +124,6 @@ "react-inlinesvg": "^4.0.0", "react-intl": "^6.0.0", "react-motion": "^0.5.2", - "react-popper": "^2.3.0", "react-redux": "^9.0.4", "react-router-dom": "^5.3.4", "react-router-dom-v5-compat": "^6.24.1", diff --git a/packages/pl-fe/src/components/profile-hover-card.tsx b/packages/pl-fe/src/components/profile-hover-card.tsx index f5f1f8173..da61aa61d 100644 --- a/packages/pl-fe/src/components/profile-hover-card.tsx +++ b/packages/pl-fe/src/components/profile-hover-card.tsx @@ -1,7 +1,7 @@ +import { useFloating, useTransitionStyles } from '@floating-ui/react'; import clsx from 'clsx'; -import React, { useEffect, useState } from 'react'; +import React, { useEffect } from 'react'; import { useIntl, FormattedMessage } from 'react-intl'; -import { usePopper } from 'react-popper'; import { useHistory } from 'react-router-dom'; import { fetchRelationships } from 'pl-fe/actions/accounts'; @@ -52,8 +52,6 @@ const ProfileHoverCard: React.FC = ({ visible = true }) => { const history = useHistory(); const intl = useIntl(); - const [popperElement, setPopperElement] = useState(null); - const me = useAppSelector(state => state.me); const accountId: string | undefined = useAppSelector(state => state.profile_hover_card.accountId || undefined); const { account } = useAccount(accountId, { withRelationship: true, withScrobble: true }); @@ -75,7 +73,23 @@ const ProfileHoverCard: React.FC = ({ visible = true }) => { }; }, []); - const { styles, attributes } = usePopper(targetRef, popperElement); + const { x, y, strategy, refs, context } = useFloating({ + open: !!account, + elements: { + reference: targetRef, + }, + }); + + const { styles } = useTransitionStyles(context, { + initial: { + opacity: 0, + transform: 'scale(0.8)', + }, + duration: { + open: 100, + close: 100, + }, + }); if (!account) return null; const accountBio = { __html: account.note_emojified }; @@ -89,9 +103,13 @@ const ProfileHoverCard: React.FC = ({ visible = true }) => { 'opacity-100': visible, 'opacity-0 pointer-events-none': !visible, })} - ref={setPopperElement} - style={styles.popper} - {...attributes.popper} + ref={refs.setFloating} + style={{ + position: strategy, + top: y ?? 0, + left: x ?? 0, + ...styles, + }} onMouseEnter={handleMouseEnter(dispatch)} onMouseLeave={handleMouseLeave(dispatch)} > diff --git a/packages/pl-fe/src/components/status-hover-card.tsx b/packages/pl-fe/src/components/status-hover-card.tsx index 465e04add..75b8fe179 100644 --- a/packages/pl-fe/src/components/status-hover-card.tsx +++ b/packages/pl-fe/src/components/status-hover-card.tsx @@ -1,7 +1,7 @@ +import { useFloating, useTransitionStyles } from '@floating-ui/react'; import clsx from 'clsx'; -import React, { useEffect, useState, useCallback } from 'react'; +import React, { useEffect, useCallback } from 'react'; import { useIntl } from 'react-intl'; -import { usePopper } from 'react-popper'; import { useHistory } from 'react-router-dom'; import { closeStatusHoverCard, updateStatusHoverCard } from 'pl-fe/actions/status-hover-card'; @@ -22,8 +22,6 @@ const StatusHoverCard: React.FC = ({ visible = true }) => { const intl = useIntl(); const history = useHistory(); - const [popperElement, setPopperElement] = useState(null); - const statusId: string | undefined = useAppSelector(state => state.status_hover_card.statusId || undefined); const status = useAppSelector(state => state.statuses.get(statusId!)); const targetRef = useAppSelector(state => state.status_hover_card.ref?.current); @@ -45,10 +43,26 @@ const StatusHoverCard: React.FC = ({ visible = true }) => { }; }, []); - const { styles, attributes } = usePopper(targetRef, popperElement, { + const { x, y, strategy, refs, context } = useFloating({ + open: !!statusId, + elements: { + reference: targetRef, + }, placement: 'top', }); + const { styles } = useTransitionStyles(context, { + initial: { + opacity: 0, + transform: 'scale(0.8)', + transformOrigin: 'bottom', + }, + duration: { + open: 100, + close: 100, + }, + }); + const handleMouseEnter = useCallback((): React.MouseEventHandler => () => { dispatch(updateStatusHoverCard()); }, []); @@ -77,9 +91,13 @@ const StatusHoverCard: React.FC = ({ visible = true }) => { 'opacity-100': visible, 'opacity-0 pointer-events-none': !visible, })} - ref={setPopperElement} - style={styles.popper} - {...attributes.popper} + ref={refs.setFloating} + style={{ + position: strategy, + top: y ?? 0, + left: x ?? 0, + ...styles, + }} onMouseEnter={handleMouseEnter()} onMouseLeave={handleMouseLeave()} > diff --git a/packages/pl-fe/yarn.lock b/packages/pl-fe/yarn.lock index bb559e359..0112c0043 100644 --- a/packages/pl-fe/yarn.lock +++ b/packages/pl-fe/yarn.lock @@ -2103,11 +2103,6 @@ resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.1.1.tgz#1ec17e2edbec25c8306d424ecfbf13c7de1aaa31" integrity sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA== -"@popperjs/core@^2.11.5": - version "2.11.5" - resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.5.tgz#db5a11bf66bdab39569719555b0f76e138d7bd64" - integrity sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw== - "@prettier/eslint@npm:prettier-eslint@^15.0.1": version "15.0.1" resolved "https://registry.yarnpkg.com/prettier-eslint/-/prettier-eslint-15.0.1.tgz#2543a43e9acec2a9767ad6458165ce81f353db9c" @@ -9702,7 +9697,7 @@ react-event-listener@^0.6.0: prop-types "^15.6.0" warning "^4.0.1" -react-fast-compare@^3.0.1, react-fast-compare@^3.1.1: +react-fast-compare@^3.1.1: version "3.2.0" resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb" integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA== @@ -9776,14 +9771,6 @@ react-motion@^0.5.2: prop-types "^15.5.8" raf "^3.1.0" -react-popper@^2.3.0: - version "2.3.0" - resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.3.0.tgz#17891c620e1320dce318bad9fede46a5f71c70ba" - integrity sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q== - dependencies: - react-fast-compare "^3.0.1" - warning "^4.0.2" - react-property@2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/react-property/-/react-property-2.0.2.tgz#d5ac9e244cef564880a610bc8d868bd6f60fdda6" @@ -12067,7 +12054,7 @@ warning@^3.0.0: dependencies: loose-envify "^1.0.0" -warning@^4.0.1, warning@^4.0.2: +warning@^4.0.1: version "4.0.3" resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3" integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==