hamid zarghami
117 lines
3.9 KiB
TypeScript
117 lines
3.9 KiB
TypeScript
import React, { useState, useRef, useEffect } from 'react';
|
|
import { createPortal } from 'react-dom';
|
|
import { More } from 'iconsax-react';
|
|
|
|
export interface RowActionItem {
|
|
label: string;
|
|
icon?: React.ReactNode;
|
|
onClick: () => void;
|
|
className?: string;
|
|
}
|
|
|
|
interface RowActionsDropdownProps {
|
|
actions: RowActionItem[];
|
|
className?: string;
|
|
}
|
|
|
|
const RowActionsDropdown: React.FC<RowActionsDropdownProps> = ({ actions, className = '' }) => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [position, setPosition] = useState({ top: 0, left: 0 });
|
|
const dropdownRef = useRef<HTMLDivElement>(null);
|
|
const buttonRef = useRef<HTMLButtonElement>(null);
|
|
|
|
useEffect(() => {
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
|
setIsOpen(false);
|
|
}
|
|
};
|
|
|
|
document.addEventListener('mousedown', handleClickOutside);
|
|
return () => {
|
|
document.removeEventListener('mousedown', handleClickOutside);
|
|
};
|
|
}, []);
|
|
|
|
const handleToggle = (e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
|
|
if (!isOpen && buttonRef.current) {
|
|
const rect = buttonRef.current.getBoundingClientRect();
|
|
const isMobile = window.innerWidth < 768;
|
|
const dropdownWidth = isMobile ? 140 : 150;
|
|
const dropdownHeight = actions.length * (isMobile ? 36 : 40); // تخمین ارتفاع منو
|
|
|
|
let left = rect.left + window.scrollX - dropdownWidth + rect.width;
|
|
let top = rect.bottom + window.scrollY;
|
|
|
|
// بررسی اینکه منو از سمت راست خارج نشود
|
|
if (left + dropdownWidth > window.innerWidth) {
|
|
left = rect.left + window.scrollX - dropdownWidth;
|
|
}
|
|
|
|
// بررسی اینکه منو از سمت چپ خارج نشود
|
|
if (left < 0) {
|
|
left = isMobile ? 20 : 40;
|
|
}
|
|
|
|
// بررسی اینکه منو از پایین خارج نشود
|
|
if (top + dropdownHeight > window.innerHeight + window.scrollY) {
|
|
top = rect.top + window.scrollY - dropdownHeight;
|
|
}
|
|
|
|
setPosition({ top, left });
|
|
}
|
|
|
|
setIsOpen(!isOpen);
|
|
};
|
|
|
|
const handleActionClick = (action: RowActionItem) => {
|
|
action.onClick();
|
|
setIsOpen(false);
|
|
};
|
|
|
|
const renderDropdown = () => {
|
|
if (!isOpen) return null;
|
|
|
|
return createPortal(
|
|
<div
|
|
ref={dropdownRef}
|
|
className="fixed py-1 md:py-2 bg-white rounded-xl md:rounded-2xl shadow-lg z-[9999] min-w-[140px] md:min-w-[150px]"
|
|
style={{
|
|
top: `${position.top}px`,
|
|
left: `${position.left}px`,
|
|
}}
|
|
>
|
|
{actions.map((action, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => handleActionClick(action)}
|
|
className={`w-full text-right px-2 md:px-3 py-1 md:py-1.5 text-xs md:text-[13px] flex items-center gap-2 hover:bg-gray-50 ${index === 0 ? 'rounded-t-lg' : ''
|
|
} ${action.className || ''}`}
|
|
>
|
|
{action.icon && <span className="ml-2">{action.icon}</span>}
|
|
{action.label}
|
|
</button>
|
|
))}
|
|
</div>,
|
|
document.body
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className={className}>
|
|
<button
|
|
ref={buttonRef}
|
|
onClick={handleToggle}
|
|
className="p-1 hover:bg-gray-100 rounded-full transition-colors"
|
|
>
|
|
<More size={14} color="black" className="rotate-90" />
|
|
</button>
|
|
|
|
{renderDropdown()}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RowActionsDropdown;
|