moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove react-popper

This commit is contained in:
Alex Gleason 2024-09-26 12:27:52 -05:00
parent 9112bb486d
commit c0c636aecd
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
4 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -56,7 +56,6 @@
"@lexical/utils": "^0.14.2",
"@mkljczk/react-hotkeys": "^1.2.2",
"@nostrify/nostrify": "npm:@jsr/nostrify__nostrify",
"@popperjs/core": "^2.11.5",
"@reach/combobox": "^0.18.0",
"@reach/menu-button": "^0.18.0",
"@reach/popover": "^0.18.0",
@ -138,7 +137,6 @@
"react-intl": "^6.0.0",
"react-motion": "^0.5.2",
"react-overlays": "^0.9.0",
"react-popper": "^2.3.0",
"react-redux": "^9.0.4",
"react-router-dom": "^5.3.0",
"react-router-dom-v5-compat": "^6.6.2",

12
src/components/profile-hover-card.tsx
View File

@ -1,7 +1,7 @@
import { useFloating } from '@floating-ui/react';
import clsx from 'clsx';
import React, { useEffect, useState } from 'react';
import { useIntl, FormattedMessage } from 'react-intl';
import { usePopper } from 'react-popper';
import { useHistory } from 'react-router-dom';
import { fetchRelationships } from 'soapbox/actions/accounts';
@ -87,7 +87,12 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
};
}, []);
const { styles, attributes } = usePopper(targetRef, popperElement);
const { floatingStyles } = useFloating({
elements: {
floating: popperElement,
reference: targetRef,
},
});
if (!account) return null;
const accountBio = { __html: account.note_emojified };
@ -102,8 +107,7 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
'opacity-0 pointer-events-none': !visible,
})}
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
style={floatingStyles}
onMouseEnter={handleMouseEnter(dispatch)}
onMouseLeave={handleMouseLeave(dispatch)}
>

11
src/components/status-hover-card.tsx
View File

@ -1,6 +1,6 @@
import { useFloating } from '@floating-ui/react';
import clsx from 'clsx';
import React, { useEffect, useState, useCallback } from 'react';
import { usePopper } from 'react-popper';
import { useHistory } from 'react-router-dom';
import {
@ -46,8 +46,12 @@ export const StatusHoverCard: React.FC<IStatusHoverCard> = ({ visible = true })
};
}, []);
const { styles, attributes } = usePopper(targetRef, popperElement, {
const { floatingStyles } = useFloating({
placement: 'top',
elements: {
floating: popperElement,
reference: targetRef,
},
});
const handleMouseEnter = useCallback((): React.MouseEventHandler => {
@ -85,8 +89,7 @@ export const StatusHoverCard: React.FC<IStatusHoverCard> = ({ visible = true })
'opacity-0 pointer-events-none': !visible,
})}
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
style={floatingStyles}
onMouseEnter={handleMouseEnter()}
onMouseLeave={handleMouseLeave()}
>

4
yarn.lock
View File

@ -1812,7 +1812,7 @@
websocket-ts "^2.1.5"
zod "^3.23.4"
"@popperjs/core@^2.11.5", "@popperjs/core@^2.9.2":
"@popperjs/core@^2.9.2":
version "2.11.5"
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.5.tgz#db5a11bf66bdab39569719555b0f76e138d7bd64"
integrity sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==
@ -7213,7 +7213,7 @@ react-overlays@^0.9.0:
react-transition-group "^2.2.1"
warning "^3.0.0"
react-popper@^2.2.5, react-popper@^2.3.0:
react-popper@^2.2.5:
version "2.3.0"
resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.3.0.tgz#17891c620e1320dce318bad9fede46a5f71c70ba"
integrity sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==