mirror of
https://github.com/antebudimir/feishin.git
synced 2026-01-01 02:13:33 +00:00
Merge pull request #1122 from jeffvli/properly-handle-context-menu-close
fix(context menu): Properly handle click outside, and show initial rating
This commit is contained in:
commit
479aa2e22d
1 changed files with 21 additions and 15 deletions
|
|
@ -103,19 +103,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
|
|||
const { t } = useTranslation();
|
||||
const [opened, setOpened] = useState(false);
|
||||
|
||||
const [contextMenuRef, setContextMenuRef] = useState<HTMLDivElement | null>(null);
|
||||
const [ratingsRef, setRatingsRef] = useState<HTMLDivElement | null>(null);
|
||||
const [rating, setRating] = useState<number>(0);
|
||||
|
||||
useEffect(() => {
|
||||
setRating(0);
|
||||
}, [opened]);
|
||||
|
||||
const clickOutsideRef = useClickOutside(
|
||||
() => setOpened(false),
|
||||
['mousedown', 'touchstart'],
|
||||
[contextMenuRef, ratingsRef],
|
||||
);
|
||||
const clickOutsideRef = useClickOutside(() => setOpened(false), ['mousedown', 'touchstart']);
|
||||
|
||||
const viewport = useViewportSize();
|
||||
const server = useCurrentServer();
|
||||
|
|
@ -132,6 +120,24 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
|
|||
yPos: 0,
|
||||
});
|
||||
|
||||
const [rating, setRating] = useState<number>(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (opened && ctx.data.length > 0) {
|
||||
if (ctx.data.length === 1) {
|
||||
setRating(ctx.data[0].userRating ?? 0);
|
||||
} else {
|
||||
const firstRating = ctx.data[0].userRating ?? 0;
|
||||
const allSameRating = ctx.data.every(
|
||||
(item) => (item.userRating ?? 0) === firstRating,
|
||||
);
|
||||
setRating(allSameRating ? firstRating : 0);
|
||||
}
|
||||
} else {
|
||||
setRating(0);
|
||||
}
|
||||
}, [ctx.data, opened]);
|
||||
|
||||
const handlePlayQueueAdd = usePlayQueueAdd();
|
||||
const navigate = useNavigate();
|
||||
|
||||
|
|
@ -882,7 +888,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
|
|||
leftIcon: <Icon icon="star" />,
|
||||
onClick: () => {},
|
||||
rightIcon: (
|
||||
<Group ref={setRatingsRef as any}>
|
||||
<Group>
|
||||
<Rating
|
||||
onChange={(e) => {
|
||||
handleUpdateRating(e);
|
||||
|
|
@ -950,7 +956,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
|
|||
<AnimatePresence>
|
||||
{opened && (
|
||||
<ContextMenu minWidth={125} ref={mergedRef} xPos={ctx.xPos} yPos={ctx.yPos}>
|
||||
<Stack gap={0} ref={setContextMenuRef}>
|
||||
<Stack gap={0}>
|
||||
<Stack gap={0} onClick={closeContextMenu}>
|
||||
{ctx.menuItems?.map((item) => {
|
||||
return (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue