bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

pl-fe: improve floating-ui behavior

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2024-09-27 23:31:19 +02:00
parent 4d47b42e5d
commit e6bed8c471
2 changed files with 16 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
packages/pl-fe/src/components/profile-hover-card.tsx
View file

@ -1,4 +1,4 @@
import { useFloating, useTransitionStyles } from '@floating-ui/react'; import { shift, useFloating, useTransitionStyles } from '@floating-ui/react';
import clsx from 'clsx'; import clsx from 'clsx';
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { useIntl, FormattedMessage } from 'react-intl'; import { useIntl, FormattedMessage } from 'react-intl';
@ -73,17 +73,23 @@ const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }) => {
}; };
}, []); }, []);
const { x, y, strategy, refs, context } = useFloating({ const { x, y, strategy, refs, context, placement } = useFloating({
open: !!account, open: !!account,
elements: { elements: {
reference: targetRef, reference: targetRef,
}, },
middleware: [
shift({
padding: 8,
}),
],
}); });
const { styles } = useTransitionStyles(context, { const { styles } = useTransitionStyles(context, {
initial: { initial: {
opacity: 0, opacity: 0,
transform: 'scale(0.8)', transform: 'scale(0.8)',
transformOrigin: placement === 'bottom' ? 'top' : 'bottom',
}, },
duration: { duration: {
open: 100, open: 100,

12
packages/pl-fe/src/components/status-hover-card.tsx
View file

@ -1,4 +1,4 @@
import { useFloating, useTransitionStyles } from '@floating-ui/react'; import { shift, useFloating, useTransitionStyles } from '@floating-ui/react';
import clsx from 'clsx'; import clsx from 'clsx';
import React, { useEffect, useCallback } from 'react'; import React, { useEffect, useCallback } from 'react';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
@ -43,19 +43,23 @@ const StatusHoverCard: React.FC<IStatusHoverCard> = ({ visible = true }) => {
}; };
}, []); }, []);
const { x, y, strategy, refs, context } = useFloating({ const { x, y, strategy, refs, context, placement } = useFloating({
open: !!statusId, open: !!statusId,
elements: { elements: {
reference: targetRef, reference: targetRef,
}, },
placement: 'top', middleware: [
shift({
padding: 8,
}),
],
}); });
const { styles } = useTransitionStyles(context, { const { styles } = useTransitionStyles(context, {
initial: { initial: {
opacity: 0, opacity: 0,
transform: 'scale(0.8)', transform: 'scale(0.8)',
transformOrigin: 'bottom', transformOrigin: placement === 'bottom' ? 'top' : 'bottom',
}, },
duration: { duration: {
open: 100, open: 100,