hamedandClaude Opus 4.8
7ea2cb4ab2
The «عملیات» dropdown was absolutely positioned inside the table container, which has overflow:hidden for its rounded corners, so the menu was clipped below the table. Render it through a Portal with fixed positioning computed from the trigger's rect (RTL-aligned to the trigger's right edge), tracking scroll/resize while open. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
100 lines
3.6 KiB
TypeScript
100 lines
3.6 KiB
TypeScript
import React, { useLayoutEffect, useRef, useState } from 'react';
|
|
import { EllipsisHorizontalCircleIcon, PencilSquareIcon, TrashIcon } from '@heroicons/react/24/outline';
|
|
import Portal from '../ui/Portal';
|
|
import type { InventoryItem } from '../../hooks/useInventory';
|
|
|
|
interface Props {
|
|
item: InventoryItem;
|
|
onEdit: (item: InventoryItem) => void;
|
|
onDelete: (item: InventoryItem) => void;
|
|
}
|
|
|
|
const MENU_W = 160;
|
|
|
|
/**
|
|
* «عملیات» trigger + dropdown — mirrors the tauri InventoryActionsPopover.
|
|
* Rendered through a Portal with fixed positioning so it is never clipped by the
|
|
* table container's `overflow: hidden`.
|
|
*/
|
|
export default function InventoryActionsMenu({ item, onEdit, onDelete }: Props) {
|
|
const [open, setOpen] = useState(false);
|
|
const [pos, setPos] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
|
|
const triggerRef = useRef<HTMLButtonElement>(null);
|
|
|
|
useLayoutEffect(() => {
|
|
if (!open || !triggerRef.current) return;
|
|
const place = () => {
|
|
const r = triggerRef.current!.getBoundingClientRect();
|
|
// align the menu's right edge to the trigger's right edge (RTL-friendly)
|
|
const left = Math.max(8, Math.min(r.right - MENU_W, window.innerWidth - MENU_W - 8));
|
|
setPos({ top: r.bottom + 4, left });
|
|
};
|
|
place();
|
|
window.addEventListener('scroll', place, true);
|
|
window.addEventListener('resize', place);
|
|
return () => {
|
|
window.removeEventListener('scroll', place, true);
|
|
window.removeEventListener('resize', place);
|
|
};
|
|
}, [open]);
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
ref={triggerRef}
|
|
type="button"
|
|
onClick={() => setOpen((v) => !v)}
|
|
style={{
|
|
display: 'flex', alignItems: 'center', gap: 4, cursor: 'pointer',
|
|
borderRadius: 6, padding: '4px 8px', background: 'none',
|
|
color: '#5559ce', fontSize: 12, fontWeight: 500,
|
|
}}
|
|
>
|
|
<EllipsisHorizontalCircleIcon style={{ width: 18, height: 18 }} />
|
|
عملیات
|
|
</button>
|
|
|
|
{open && (
|
|
<Portal>
|
|
<div onClick={() => setOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 60 }} />
|
|
<div
|
|
role="menu"
|
|
style={{
|
|
position: 'fixed', top: pos.top, left: pos.left, zIndex: 61,
|
|
width: MENU_W, background: 'var(--surface)', border: '1px solid var(--border)',
|
|
borderRadius: 12, boxShadow: 'var(--shadow-lg)', overflow: 'hidden',
|
|
}}
|
|
>
|
|
<button
|
|
type="button"
|
|
role="menuitem"
|
|
onClick={() => { setOpen(false); onEdit(item); }}
|
|
style={{
|
|
display: 'flex', alignItems: 'center', gap: 8, width: '100%',
|
|
padding: '12px 16px', background: 'var(--primary-soft)', border: 'none',
|
|
cursor: 'pointer', fontSize: 14, fontWeight: 600, color: 'var(--text)',
|
|
}}
|
|
>
|
|
<PencilSquareIcon style={{ width: 20, height: 20 }} />
|
|
ویرایش
|
|
</button>
|
|
<button
|
|
type="button"
|
|
role="menuitem"
|
|
onClick={() => { setOpen(false); onDelete(item); }}
|
|
style={{
|
|
display: 'flex', alignItems: 'center', gap: 8, width: '100%',
|
|
padding: '12px 16px', background: 'transparent', border: 'none',
|
|
cursor: 'pointer', fontSize: 14, color: 'var(--danger)',
|
|
}}
|
|
>
|
|
<TrashIcon style={{ width: 20, height: 20 }} />
|
|
حذف
|
|
</button>
|
|
</div>
|
|
</Portal>
|
|
)}
|
|
</>
|
|
);
|
|
}
|