Improve-Id function
unknown
javascript
22 days ago
1.3 kB
2
Indexable
const ItemIdCell = ({ row }: { row: any }) => { const itemId = row.getValue("itemId") as string; const [showFullId, setShowFullId] = useState(false); const cellRef = useRef<HTMLDivElement>(null); useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if (cellRef.current && !cellRef.current.contains(event.target as Node)) { setShowFullId(false); } }; document.addEventListener("mousedown", handleClickOutside); return () => document.removeEventListener("mousedown", handleClickOutside); }, []); // Empty dependency array is acceptable here since we're only setting up document listeners return ( <div ref={cellRef} onClick={() => setShowFullId(!showFullId)} style={{ cursor: 'pointer', textAlign: 'center', transition: 'transform 0.2s, background 0.2s', }} className={`whitespace-nowrap flex items-center ${showFullId ? "scale-105 bg-white rounded-lg p-2 shadow-sm" : "" }`} > <div style={{ width: showFullId ? 'auto' : '100px' }}> {showFullId ? itemId : itemId.slice(0, 7) + (itemId.length > 7 ? "..." : "")} </div> </div> ); };
Editor is loading...
Leave a Comment