2569718930@qq.com
105 lines
3.4 KiB
TypeScript
105 lines
3.4 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useRef, useState } from "react";
|
||
import { LayoutGrid } from "lucide-react";
|
||
import clsx from "clsx";
|
||
|
||
interface GridLayoutSelectorProps {
|
||
isEn: boolean;
|
||
cols: number;
|
||
rows: number;
|
||
onSelectGrid: (cols: number, rows: number) => void;
|
||
}
|
||
|
||
export function GridLayoutSelector({
|
||
isEn,
|
||
cols,
|
||
rows,
|
||
onSelectGrid,
|
||
}: GridLayoutSelectorProps) {
|
||
const [isOpen, setIsOpen] = useState(false);
|
||
const [hoveredCols, setHoveredCols] = useState(0);
|
||
const [hoveredRows, setHoveredRows] = useState(0);
|
||
const containerRef = useRef<HTMLDivElement>(null);
|
||
|
||
// Handle click outside to close dropdown
|
||
useEffect(() => {
|
||
const handleClickOutside = (event: MouseEvent) => {
|
||
if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
|
||
setIsOpen(false);
|
||
}
|
||
};
|
||
document.addEventListener("mousedown", handleClickOutside);
|
||
return () => {
|
||
document.removeEventListener("mousedown", handleClickOutside);
|
||
};
|
||
}, []);
|
||
|
||
const handleCellClick = (c: number, r: number) => {
|
||
onSelectGrid(c, r);
|
||
setIsOpen(false);
|
||
};
|
||
|
||
const previewCols = hoveredCols > 0 ? hoveredCols : cols;
|
||
const previewRows = hoveredRows > 0 ? hoveredRows : rows;
|
||
|
||
return (
|
||
<div ref={containerRef} className="relative z-30">
|
||
<button
|
||
type="button"
|
||
onClick={() => setIsOpen((prev) => !prev)}
|
||
className="flex items-center gap-1.5 h-7 rounded border border-slate-300 bg-white px-2.5 text-[11px] font-bold text-slate-600 hover:bg-slate-50 hover:text-slate-900 transition-colors shadow-sm outline-none"
|
||
title={isEn ? "Grid Layout" : "图表网格布局"}
|
||
>
|
||
<LayoutGrid size={13} className="text-slate-500" />
|
||
<span>
|
||
{isEn ? `Layout: ${cols}x${rows}` : `布局: ${cols}x${rows}`}
|
||
</span>
|
||
</button>
|
||
|
||
{isOpen && (
|
||
<div className="absolute right-0 top-8 w-[150px] bg-white border border-slate-200 rounded shadow-2xl p-3 animate-in fade-in-50 zoom-in-95 duration-100">
|
||
<div
|
||
className="grid grid-cols-3 gap-1 mb-2.5 mx-auto w-[90px]"
|
||
onMouseLeave={() => {
|
||
setHoveredCols(0);
|
||
setHoveredRows(0);
|
||
}}
|
||
>
|
||
{[1, 2].map((r) =>
|
||
[1, 2, 3].map((c) => {
|
||
const isHighlighted = c <= previewCols && r <= previewRows;
|
||
return (
|
||
<div
|
||
key={`${r}-${c}`}
|
||
onMouseEnter={() => {
|
||
setHoveredCols(c);
|
||
setHoveredRows(r);
|
||
}}
|
||
onClick={() => handleCellClick(c, r)}
|
||
className={clsx(
|
||
"h-6 w-6 rounded-sm border cursor-pointer transition-colors",
|
||
isHighlighted
|
||
? "bg-blue-500 border-blue-600"
|
||
: "bg-slate-100 border-slate-200 hover:bg-slate-200"
|
||
)}
|
||
/>
|
||
);
|
||
})
|
||
)}
|
||
</div>
|
||
|
||
<div className="text-[10px] font-bold text-center text-slate-500 font-sans tracking-wide uppercase border-t border-slate-100 pt-1.5">
|
||
{previewCols} × {previewRows}{" "}
|
||
{isEn
|
||
? previewCols * previewRows === 1
|
||
? "Chart"
|
||
: "Charts"
|
||
: "图表"}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|