1163 lines
38 KiB
TypeScript
1163 lines
38 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
AlignCenterIcon,
|
|
AlignLeftIcon,
|
|
AlignRightIcon,
|
|
BoldIcon,
|
|
ClipboardIcon,
|
|
CopyIcon,
|
|
EraserIcon,
|
|
GripHorizontalIcon,
|
|
GripVerticalIcon,
|
|
ItalicIcon,
|
|
PlusIcon,
|
|
PaletteIcon,
|
|
Redo2Icon,
|
|
ScissorsIcon,
|
|
StrikethroughIcon,
|
|
Trash2Icon,
|
|
Undo2Icon,
|
|
UnderlineIcon,
|
|
} from "lucide-react";
|
|
import Spreadsheet, {
|
|
type ColumnIndicatorProps,
|
|
type DataEditorProps,
|
|
EntireColumnsSelection,
|
|
EntireRowsSelection,
|
|
type Point,
|
|
type RowIndicatorProps,
|
|
type Selection,
|
|
type SpreadsheetRef,
|
|
type TableProps,
|
|
} from "react-spreadsheet";
|
|
import {
|
|
useCallback,
|
|
useEffect,
|
|
useMemo,
|
|
useRef,
|
|
useState,
|
|
type ClipboardEvent,
|
|
type KeyboardEvent,
|
|
} from "react";
|
|
import {
|
|
closestCenter,
|
|
DndContext,
|
|
KeyboardSensor,
|
|
PointerSensor,
|
|
useSensor,
|
|
useSensors,
|
|
type CollisionDetection,
|
|
type DragEndEvent,
|
|
} from "@dnd-kit/core";
|
|
import {
|
|
horizontalListSortingStrategy,
|
|
rectSortingStrategy,
|
|
sortableKeyboardCoordinates,
|
|
SortableContext,
|
|
useSortable,
|
|
verticalListSortingStrategy,
|
|
} from "@dnd-kit/sortable";
|
|
import { CSS } from "@dnd-kit/utilities";
|
|
|
|
import { DeleteConfirmationDialog } from "@/components/admin/delete-confirmation-dialog";
|
|
import { RichTextContent } from "@/components/rich-text-content";
|
|
import { SimpleTooltip } from "@/components/tooltip";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
ContextMenu,
|
|
ContextMenuContent,
|
|
ContextMenuGroup,
|
|
ContextMenuItem,
|
|
ContextMenuSeparator,
|
|
ContextMenuShortcut,
|
|
ContextMenuTrigger,
|
|
} from "@/components/ui/context-menu";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
|
|
import { ClearableInput as Input } from "@/components/admin/ui/clearable-input";
|
|
import {
|
|
InputGroup,
|
|
InputGroupAddon,
|
|
InputGroupTextarea,
|
|
} from "@/components/ui/input-group";
|
|
import { Kbd } from "@/components/ui/kbd";
|
|
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
|
import {
|
|
addExtraSheetColumn,
|
|
addExtraSheetRow,
|
|
clearExtraSheetCellFormatting,
|
|
DEFAULT_EXTRA_SHEET_COLUMN_WIDTH,
|
|
MAX_EXTRA_SHEET_COLUMN_WIDTH,
|
|
MIN_EXTRA_SHEET_COLUMN_WIDTH,
|
|
deleteExtraSheetColumn,
|
|
deleteExtraSheetRow,
|
|
extraSheetRangeToTsv,
|
|
extraSheetToMatrix,
|
|
insertExtraSheetColumn,
|
|
insertExtraSheetRow,
|
|
matrixToExtraSheet,
|
|
moveExtraSheetColumn,
|
|
moveExtraSheetRow,
|
|
nextExtraSheetColumnLabel,
|
|
parseExtraSheetTsv,
|
|
pasteExtraSheetText,
|
|
resizeExtraSheetColumn,
|
|
styleExtraSheetCells,
|
|
updateExtraSheetCells,
|
|
type ExtraSheetAlignment,
|
|
type ExtraSheet,
|
|
type ExtraSheetMatrix,
|
|
} from "@/lib/guides/extra-sheet";
|
|
import {
|
|
extraRichTextToPlainText,
|
|
normalizeExtraRichText,
|
|
type RichTextStylePatch,
|
|
} from "@/lib/rich-text";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface SheetHistory {
|
|
items: ExtraSheet[];
|
|
index: number;
|
|
value: ExtraSheet;
|
|
}
|
|
|
|
const DEFAULT_CELL_BACKGROUND = "#16A34A";
|
|
const SHEET_HISTORY_LIMIT = 80;
|
|
const columnDragId = (id: string) => `column:${id}`;
|
|
const rowDragId = (id: string) => `row:${id}`;
|
|
|
|
const sameAxisCollision: CollisionDetection = (args) => {
|
|
const axis = String(args.active.id).split(":", 1)[0];
|
|
return closestCenter({
|
|
...args,
|
|
droppableContainers: args.droppableContainers.filter((container) =>
|
|
String(container.id).startsWith(`${axis}:`),
|
|
),
|
|
});
|
|
};
|
|
|
|
function movedIndex(current: number, from: number, to: number): number {
|
|
if (current === from) return to;
|
|
if (from < to && current > from && current <= to) return current - 1;
|
|
if (to < from && current >= to && current < from) return current + 1;
|
|
return current;
|
|
}
|
|
|
|
function spreadsheetColumnName(index: number): string {
|
|
let value = index + 1;
|
|
let label = "";
|
|
while (value > 0) {
|
|
value -= 1;
|
|
label = String.fromCharCode(65 + (value % 26)) + label;
|
|
value = Math.floor(value / 26);
|
|
}
|
|
return label;
|
|
}
|
|
|
|
function LiteralDataViewer({
|
|
cell,
|
|
}: {
|
|
cell?: {
|
|
value?: unknown;
|
|
backgroundColor?: string;
|
|
alignment?: ExtraSheetAlignment;
|
|
};
|
|
}) {
|
|
return (
|
|
<div
|
|
className="Spreadsheet__data-viewer Spreadsheet__data-viewer--preserve-breaks size-full"
|
|
style={
|
|
cell?.backgroundColor
|
|
? {
|
|
backgroundColor: cell.backgroundColor,
|
|
textAlign: cell.alignment ?? "left",
|
|
}
|
|
: { textAlign: cell?.alignment ?? "left" }
|
|
}
|
|
>
|
|
<RichTextContent
|
|
html={normalizeExtraRichText(String(cell?.value ?? ""))}
|
|
className="extra-sheet-text"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function InlineDataEditor({
|
|
cell,
|
|
onChange,
|
|
exitEditMode,
|
|
initialText,
|
|
onReady,
|
|
}: DataEditorProps<{ value: string }> & {
|
|
initialText?: string;
|
|
onReady?: () => void;
|
|
}) {
|
|
const inputRef = useRef<HTMLTextAreaElement>(null);
|
|
const originalText = useRef(
|
|
extraRichTextToPlainText(String(cell?.value ?? "")),
|
|
);
|
|
const [text, setText] = useState(
|
|
() => initialText ?? extraRichTextToPlainText(String(cell?.value ?? "")),
|
|
);
|
|
const committed = useRef(false);
|
|
const commit = useCallback(() => {
|
|
if (committed.current) return;
|
|
committed.current = true;
|
|
const nextValue = normalizeExtraRichText(text);
|
|
if (text !== originalText.current) {
|
|
onChange({ ...cell, value: nextValue });
|
|
}
|
|
}, [cell, onChange, text]);
|
|
useEffect(() => {
|
|
onReady?.();
|
|
const input = inputRef.current;
|
|
input?.focus();
|
|
input?.setSelectionRange(input.value.length, input.value.length);
|
|
}, [onReady]);
|
|
return (
|
|
<div className="Spreadsheet__data-editor">
|
|
<textarea
|
|
ref={inputRef}
|
|
aria-label="แก้ไขข้อความเซลล์"
|
|
value={text}
|
|
onChange={(event) => setText(event.target.value)}
|
|
onBlur={commit}
|
|
onKeyDown={(event) => {
|
|
if (event.key === "Escape") {
|
|
committed.current = true;
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
exitEditMode();
|
|
return;
|
|
}
|
|
if (event.key === "Enter" && (event.shiftKey || event.altKey)) {
|
|
event.stopPropagation();
|
|
return;
|
|
}
|
|
if (event.key === "Enter" || event.key === "Tab") commit();
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function EditableColumnIndicator({
|
|
id,
|
|
column,
|
|
label,
|
|
selected,
|
|
onSelect,
|
|
onRename,
|
|
onResize,
|
|
width,
|
|
}: ColumnIndicatorProps & {
|
|
id: string;
|
|
onRename: (column: number) => void;
|
|
onResize: (column: number, width: number, commit: boolean) => void;
|
|
width: number;
|
|
}) {
|
|
const {
|
|
attributes,
|
|
listeners,
|
|
setNodeRef,
|
|
transform,
|
|
transition,
|
|
isDragging,
|
|
} = useSortable({
|
|
id,
|
|
strategy: horizontalListSortingStrategy,
|
|
});
|
|
return (
|
|
<th
|
|
ref={setNodeRef}
|
|
data-sheet-column={column}
|
|
className={cn(
|
|
"Spreadsheet__header",
|
|
selected && "Spreadsheet__header--selected",
|
|
isDragging && "opacity-60",
|
|
)}
|
|
style={{ transform: CSS.Transform.toString(transform), transition }}
|
|
>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
className="touch-none"
|
|
aria-label={`ลากเพื่อย้าย ${String(label ?? `คอลัมน์ ${column + 1}`)}`}
|
|
{...attributes}
|
|
{...listeners}
|
|
>
|
|
<GripHorizontalIcon />
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
className="min-w-0 flex-1"
|
|
onClick={(event) => onSelect(column, event.shiftKey)}
|
|
onDoubleClick={() => onRename(column)}
|
|
>
|
|
{label}
|
|
</Button>
|
|
<span
|
|
role="separator"
|
|
aria-label={`ปรับความกว้าง ${String(label ?? `คอลัมน์ ${column + 1}`)}`}
|
|
aria-orientation="vertical"
|
|
tabIndex={0}
|
|
className="extra-sheet-column-resizer"
|
|
onKeyDown={(event) => {
|
|
if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
|
|
event.preventDefault();
|
|
onResize(column, width + (event.key === "ArrowRight" ? 8 : -8), true);
|
|
}}
|
|
onPointerDown={(event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
const startX = event.clientX;
|
|
const startWidth = event.currentTarget.parentElement?.getBoundingClientRect().width
|
|
?? DEFAULT_EXTRA_SHEET_COLUMN_WIDTH;
|
|
const move = (moveEvent: PointerEvent) =>
|
|
onResize(column, startWidth + moveEvent.clientX - startX, false);
|
|
const up = (upEvent: PointerEvent) => {
|
|
onResize(column, startWidth + upEvent.clientX - startX, true);
|
|
window.removeEventListener("pointermove", move);
|
|
window.removeEventListener("pointerup", up);
|
|
};
|
|
window.addEventListener("pointermove", move);
|
|
window.addEventListener("pointerup", up, { once: true });
|
|
}}
|
|
/>
|
|
</th>
|
|
);
|
|
}
|
|
|
|
function SortableRowIndicator({
|
|
id,
|
|
row,
|
|
label,
|
|
selected,
|
|
onSelect,
|
|
}: RowIndicatorProps & { id: string }) {
|
|
const {
|
|
attributes,
|
|
listeners,
|
|
setNodeRef,
|
|
transform,
|
|
transition,
|
|
isDragging,
|
|
} = useSortable({
|
|
id,
|
|
strategy: verticalListSortingStrategy,
|
|
});
|
|
return (
|
|
<th
|
|
ref={setNodeRef}
|
|
data-sheet-row={row}
|
|
className={cn(
|
|
"Spreadsheet__header",
|
|
selected && "Spreadsheet__header--selected",
|
|
isDragging && "opacity-60",
|
|
)}
|
|
style={{ transform: CSS.Transform.toString(transform), transition }}
|
|
>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
className="touch-none"
|
|
aria-label={`ลากเพื่อย้ายแถว ${row + 1}`}
|
|
{...attributes}
|
|
{...listeners}
|
|
>
|
|
<GripVerticalIcon />
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
className="min-w-0 flex-1"
|
|
onClick={(event) => onSelect(row, event.shiftKey)}
|
|
>
|
|
{label ?? row + 1}
|
|
</Button>
|
|
</th>
|
|
);
|
|
}
|
|
|
|
export function ExtraSheetEditor({
|
|
value,
|
|
createId,
|
|
onChange,
|
|
onRemove,
|
|
}: {
|
|
value: ExtraSheet;
|
|
createId: (prefix: string) => string;
|
|
onChange: (value: ExtraSheet) => void;
|
|
onRemove: () => void;
|
|
}) {
|
|
const sensors = useSensors(
|
|
useSensor(PointerSensor),
|
|
useSensor(KeyboardSensor, {
|
|
coordinateGetter: sortableKeyboardCoordinates,
|
|
}),
|
|
);
|
|
const sheetRootRef = useRef<HTMLDivElement>(null);
|
|
const spreadsheetRef = useRef<SpreadsheetRef>(null);
|
|
const initialEditTextRef = useRef<string | null>(null);
|
|
const [active, setActive] = useState<Point>({ row: 0, column: 0 });
|
|
const [labelDialogOpen, setLabelDialogOpen] = useState(false);
|
|
const [renaming, setRenaming] = useState(false);
|
|
const [columnLabel, setColumnLabel] = useState("");
|
|
const [removeOpen, setRemoveOpen] = useState(false);
|
|
const [selectedCount, setSelectedCount] = useState(1);
|
|
const [selectionKind, setSelectionKind] = useState<"cells" | "rows" | "columns">("cells");
|
|
const [history, setHistory] = useState<SheetHistory>({
|
|
items: [value],
|
|
index: 0,
|
|
value,
|
|
});
|
|
const selectedPointsRef = useRef<Point[]>([active]);
|
|
const selectedRangeRef = useRef({ start: active, end: active });
|
|
const matrix = useMemo(() => extraSheetToMatrix(value), [value]);
|
|
const activeColumn = value.columns[active.column];
|
|
const activeRow = value.rows[active.row];
|
|
const activeValue = activeColumn && activeRow
|
|
? activeRow.cells[activeColumn.id] ?? ""
|
|
: "";
|
|
const activeAlignment = activeColumn && activeRow
|
|
? activeRow.alignments?.[activeColumn.id] ?? "left"
|
|
: "left";
|
|
const canUndo = history.index > 0;
|
|
const canRedo = history.index < history.items.length - 1;
|
|
const sortableIds = useMemo(
|
|
() => [
|
|
...value.columns.map((column) => columnDragId(column.id)),
|
|
...value.rows.map((row) => rowDragId(row.id)),
|
|
],
|
|
[value.columns, value.rows],
|
|
);
|
|
|
|
if (history.value !== value) {
|
|
setHistory(
|
|
history.items[history.index] === value
|
|
? { ...history, value }
|
|
: { items: [value], index: 0, value },
|
|
);
|
|
}
|
|
|
|
const commitSheet = useCallback(
|
|
(next: ExtraSheet) => {
|
|
if (JSON.stringify(next) === JSON.stringify(value)) return;
|
|
setHistory((current) => {
|
|
const items = [
|
|
...current.items.slice(0, current.index + 1),
|
|
next,
|
|
].slice(-SHEET_HISTORY_LIMIT);
|
|
return { items, index: items.length - 1, value: next };
|
|
});
|
|
onChange(next);
|
|
},
|
|
[onChange, value],
|
|
);
|
|
|
|
const travel = useCallback(
|
|
(direction: -1 | 1) => {
|
|
const index = history.index + direction;
|
|
const next = history.items[index];
|
|
if (!next) return;
|
|
setHistory((current) => ({ ...current, index, value: next }));
|
|
onChange(next);
|
|
const point = {
|
|
row: Math.min(active.row, next.rows.length - 1),
|
|
column: Math.min(active.column, next.columns.length - 1),
|
|
};
|
|
setActive(point);
|
|
selectedPointsRef.current = [point];
|
|
setSelectedCount(1);
|
|
window.requestAnimationFrame(() =>
|
|
spreadsheetRef.current?.activate(point),
|
|
);
|
|
},
|
|
[active, history, onChange],
|
|
);
|
|
|
|
const activateOnly = useCallback((point: Point) => {
|
|
setActive(point);
|
|
selectedPointsRef.current = [point];
|
|
selectedRangeRef.current = { start: point, end: point };
|
|
setSelectedCount(1);
|
|
setSelectionKind("cells");
|
|
window.requestAnimationFrame(() => spreadsheetRef.current?.activate(point));
|
|
}, []);
|
|
|
|
const moveRow = useCallback(
|
|
(from: number, to: number) => {
|
|
const next = moveExtraSheetRow(value, from, to);
|
|
if (next === value) return;
|
|
const point = { ...active, row: movedIndex(active.row, from, to) };
|
|
commitSheet(next);
|
|
activateOnly(point);
|
|
},
|
|
[active, activateOnly, commitSheet, value],
|
|
);
|
|
|
|
const moveColumn = useCallback(
|
|
(from: number, to: number) => {
|
|
const next = moveExtraSheetColumn(value, from, to);
|
|
if (next === value) return;
|
|
const point = { ...active, column: movedIndex(active.column, from, to) };
|
|
commitSheet(next);
|
|
activateOnly(point);
|
|
},
|
|
[active, activateOnly, commitSheet, value],
|
|
);
|
|
|
|
const handleDragEnd = useCallback(
|
|
({ active: dragged, over }: DragEndEvent) => {
|
|
if (!over || dragged.id === over.id) return;
|
|
const draggedId = String(dragged.id);
|
|
const overId = String(over.id);
|
|
if (draggedId.startsWith("row:") && overId.startsWith("row:")) {
|
|
const from = value.rows.findIndex(
|
|
(row) => rowDragId(row.id) === draggedId,
|
|
);
|
|
const to = value.rows.findIndex((row) => rowDragId(row.id) === overId);
|
|
if (from !== -1 && to !== -1) moveRow(from, to);
|
|
}
|
|
if (draggedId.startsWith("column:") && overId.startsWith("column:")) {
|
|
const from = value.columns.findIndex(
|
|
(column) => columnDragId(column.id) === draggedId,
|
|
);
|
|
const to = value.columns.findIndex(
|
|
(column) => columnDragId(column.id) === overId,
|
|
);
|
|
if (from !== -1 && to !== -1) moveColumn(from, to);
|
|
}
|
|
},
|
|
[moveColumn, moveRow, value.columns, value.rows],
|
|
);
|
|
|
|
const handleSheetKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
|
|
const target = event.target as HTMLElement;
|
|
if (target.closest("input, textarea, [contenteditable='true']")) return;
|
|
const key = event.key.toLowerCase();
|
|
const commandKey = event.metaKey || event.ctrlKey;
|
|
const undo =
|
|
commandKey && !event.shiftKey && key === "z";
|
|
const redo =
|
|
(commandKey && event.shiftKey && key === "z") ||
|
|
(event.ctrlKey && !event.shiftKey && key === "y");
|
|
const format = commandKey && !event.altKey && !event.shiftKey
|
|
? ({ b: "bold", i: "italic", u: "underline" } as const)[key as "b" | "i" | "u"]
|
|
: event.altKey && event.shiftKey && key === "5"
|
|
? "strike"
|
|
: undefined;
|
|
if (undo && canUndo) {
|
|
event.preventDefault();
|
|
travel(-1);
|
|
} else if (redo && canRedo) {
|
|
event.preventDefault();
|
|
travel(1);
|
|
} else if (format) {
|
|
event.preventDefault();
|
|
const activePattern = {
|
|
bold: /<strong\b/i,
|
|
italic: /<em\b/i,
|
|
underline: /<u\b/i,
|
|
strike: /<s\b/i,
|
|
}[format];
|
|
commitSheet(styleExtraSheetCells(value, selectedPointsRef.current, {
|
|
[format]: !activePattern.test(activeValue),
|
|
}));
|
|
} else if (event.key === "Delete" || event.key === "Backspace") {
|
|
event.preventDefault();
|
|
commitSheet(updateExtraSheetCells(value, selectedPointsRef.current, { value: "" }));
|
|
}
|
|
};
|
|
|
|
const applyStyle = (patch: RichTextStylePatch) =>
|
|
commitSheet(styleExtraSheetCells(value, selectedPointsRef.current, patch));
|
|
const clearContents = () =>
|
|
commitSheet(updateExtraSheetCells(value, selectedPointsRef.current, { value: "" }));
|
|
const clearFormatting = () =>
|
|
commitSheet(clearExtraSheetCellFormatting(value, selectedPointsRef.current));
|
|
const selectedTsv = () => extraSheetRangeToTsv(
|
|
value,
|
|
selectedRangeRef.current.start,
|
|
selectedRangeRef.current.end,
|
|
);
|
|
const copySelection = async () => {
|
|
await navigator.clipboard.writeText(selectedTsv());
|
|
};
|
|
const cutSelection = async () => {
|
|
await copySelection();
|
|
clearContents();
|
|
};
|
|
const pasteText = (text: string) => {
|
|
if (!text) return;
|
|
const pasted = parseExtraSheetTsv(text);
|
|
if (selectedCount > 1 && pasted.length === 1 && pasted[0].length === 1) {
|
|
commitSheet(updateExtraSheetCells(value, selectedPointsRef.current, {
|
|
value: normalizeExtraRichText(pasted[0][0]),
|
|
}));
|
|
return;
|
|
}
|
|
commitSheet(pasteExtraSheetText(value, active, text, createId));
|
|
};
|
|
const pasteFromClipboard = async () => {
|
|
pasteText(await navigator.clipboard.readText());
|
|
};
|
|
const handleCopy = (event: ClipboardEvent<HTMLDivElement>) => {
|
|
if ((event.target as HTMLElement).closest("input, textarea, [contenteditable='true']")) return;
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
event.clipboardData.setData("text/plain", selectedTsv());
|
|
};
|
|
const handleCut = (event: ClipboardEvent<HTMLDivElement>) => {
|
|
if ((event.target as HTMLElement).closest("input, textarea, [contenteditable='true']")) return;
|
|
handleCopy(event);
|
|
clearContents();
|
|
};
|
|
const handlePaste = (event: ClipboardEvent<HTMLDivElement>) => {
|
|
if ((event.target as HTMLElement).closest("input, textarea, [contenteditable='true']")) return;
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
pasteText(event.clipboardData.getData("text/plain"));
|
|
};
|
|
const normalizedLabel = columnLabel.trim().toLocaleLowerCase();
|
|
const labelInvalid =
|
|
!normalizedLabel ||
|
|
value.columns.some(
|
|
(column, index) =>
|
|
index !== (renaming ? active.column : -1) &&
|
|
column.label.toLocaleLowerCase() === normalizedLabel,
|
|
);
|
|
const openAddColumn = () => {
|
|
setRenaming(false);
|
|
setColumnLabel(nextExtraSheetColumnLabel(value.columns));
|
|
setLabelDialogOpen(true);
|
|
};
|
|
const openRenameColumn = useCallback(
|
|
(columnIndex = active.column) => {
|
|
const column = value.columns[columnIndex];
|
|
if (!column) return;
|
|
setActive((current) => ({ ...current, column: columnIndex }));
|
|
setRenaming(true);
|
|
setColumnLabel(column.label);
|
|
setLabelDialogOpen(true);
|
|
},
|
|
[active.column, value.columns],
|
|
);
|
|
const saveColumnLabel = () => {
|
|
if (labelInvalid) return;
|
|
if (renaming) {
|
|
commitSheet({
|
|
...value,
|
|
columns: value.columns.map((column, index) =>
|
|
index === active.column
|
|
? { ...column, label: columnLabel.trim() }
|
|
: column,
|
|
),
|
|
});
|
|
} else {
|
|
const column = value.columns.length;
|
|
commitSheet(
|
|
addExtraSheetColumn(
|
|
value,
|
|
columnLabel.trim(),
|
|
createId("extra-sheet-column"),
|
|
),
|
|
);
|
|
activateOnly({ ...active, column });
|
|
}
|
|
setLabelDialogOpen(false);
|
|
};
|
|
const insertRowAt = (index: number) => {
|
|
commitSheet(insertExtraSheetRow(value, index, createId("extra-sheet-row")));
|
|
activateOnly({ ...active, row: index });
|
|
};
|
|
const insertColumnAt = (index: number) => {
|
|
commitSheet(insertExtraSheetColumn(
|
|
value,
|
|
index,
|
|
nextExtraSheetColumnLabel(value.columns),
|
|
createId("extra-sheet-column"),
|
|
));
|
|
activateOnly({ ...active, column: index });
|
|
};
|
|
const removeActiveRow = () => {
|
|
if (value.rows.length === 1) return;
|
|
const next = deleteExtraSheetRow(value, active.row);
|
|
commitSheet(next);
|
|
activateOnly({ ...active, row: Math.min(active.row, next.rows.length - 1) });
|
|
};
|
|
const removeActiveColumn = () => {
|
|
if (value.columns.length === 1) return;
|
|
const next = deleteExtraSheetColumn(value, active.column);
|
|
commitSheet(next);
|
|
activateOnly({ ...active, column: Math.min(active.column, next.columns.length - 1) });
|
|
};
|
|
const resizeColumn = useCallback(
|
|
(column: number, width: number, commit: boolean) => {
|
|
const boundedWidth = Math.round(Math.max(
|
|
MIN_EXTRA_SHEET_COLUMN_WIDTH,
|
|
Math.min(MAX_EXTRA_SHEET_COLUMN_WIDTH, width),
|
|
));
|
|
if (!commit) {
|
|
const columnElement = sheetRootRef.current?.querySelector<HTMLTableColElement>(
|
|
`col[data-sheet-column-index="${column}"]`,
|
|
);
|
|
if (columnElement) columnElement.style.width = `${boundedWidth}px`;
|
|
return;
|
|
}
|
|
commitSheet(resizeExtraSheetColumn(value, column, boundedWidth));
|
|
},
|
|
[commitSheet, value],
|
|
);
|
|
const columnIndicator = useCallback(
|
|
(props: ColumnIndicatorProps) => (
|
|
<EditableColumnIndicator
|
|
{...props}
|
|
id={columnDragId(value.columns[props.column].id)}
|
|
onRename={openRenameColumn}
|
|
onResize={resizeColumn}
|
|
width={value.columns[props.column].width
|
|
?? DEFAULT_EXTRA_SHEET_COLUMN_WIDTH}
|
|
/>
|
|
),
|
|
[openRenameColumn, resizeColumn, value.columns],
|
|
);
|
|
const rowIndicator = useCallback(
|
|
(props: RowIndicatorProps) => (
|
|
<SortableRowIndicator
|
|
{...props}
|
|
id={rowDragId(value.rows[props.row].id)}
|
|
/>
|
|
),
|
|
[value.rows],
|
|
);
|
|
const clearInitialEditText = useCallback(() => {
|
|
initialEditTextRef.current = null;
|
|
}, []);
|
|
const dataEditor = useCallback(
|
|
(props: DataEditorProps<{ value: string }>) => (
|
|
<InlineDataEditor
|
|
{...props}
|
|
initialText={initialEditTextRef.current ?? undefined}
|
|
onReady={clearInitialEditText}
|
|
/>
|
|
),
|
|
[clearInitialEditText],
|
|
);
|
|
const sheetTable = useCallback(
|
|
({ children, columns, hideColumnIndicators }: TableProps) => (
|
|
<table className="Spreadsheet__table">
|
|
<colgroup>
|
|
{!hideColumnIndicators ? <col className="extra-sheet-row-number-column" /> : null}
|
|
{Array.from({ length: columns }, (_, index) => (
|
|
<col
|
|
key={value.columns[index]?.id ?? index}
|
|
data-sheet-column-index={index}
|
|
style={{
|
|
width: value.columns[index]?.width
|
|
?? DEFAULT_EXTRA_SHEET_COLUMN_WIDTH,
|
|
}}
|
|
/>
|
|
))}
|
|
</colgroup>
|
|
<tbody>{children}</tbody>
|
|
</table>
|
|
),
|
|
[value.columns],
|
|
);
|
|
const activeFormats = [
|
|
/<strong\b/i.test(activeValue) ? "bold" : null,
|
|
/<em\b/i.test(activeValue) ? "italic" : null,
|
|
/<u\b/i.test(activeValue) ? "underline" : null,
|
|
/<s\b/i.test(activeValue) ? "strike" : null,
|
|
].filter((format): format is string => Boolean(format));
|
|
const activeTextColor = activeValue.match(/color:\s*(#[0-9A-Fa-f]{6})/i)?.[1]
|
|
?? "#111111";
|
|
|
|
return (
|
|
<div
|
|
ref={sheetRootRef}
|
|
className="flex min-w-0 flex-col gap-3"
|
|
aria-label="ตารางข้อมูลเสริม"
|
|
onKeyDown={handleSheetKeyDown}
|
|
onCopyCapture={handleCopy}
|
|
onCutCapture={handleCut}
|
|
onPasteCapture={handlePaste}
|
|
>
|
|
<div className="flex items-center gap-2 overflow-x-auto pb-1">
|
|
<SimpleTooltip
|
|
text={
|
|
<>
|
|
ย้อนกลับ <Kbd>Ctrl/⌘ Z</Kbd>
|
|
</>
|
|
}
|
|
>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
disabled={!canUndo}
|
|
aria-label="ย้อนกลับการแก้ไขตาราง"
|
|
onClick={() => travel(-1)}
|
|
>
|
|
<Undo2Icon />
|
|
</Button>
|
|
</SimpleTooltip>
|
|
<ToggleGroup
|
|
multiple
|
|
value={activeFormats}
|
|
variant="outline"
|
|
size="sm"
|
|
spacing={0}
|
|
aria-label="รูปแบบตัวอักษร"
|
|
onValueChange={(formats) => {
|
|
const patch: RichTextStylePatch = {};
|
|
(["bold", "italic", "underline", "strike"] as const).forEach((format) => {
|
|
const wasActive = activeFormats.includes(format);
|
|
const isActive = formats.includes(format);
|
|
if (wasActive !== isActive) patch[format] = isActive;
|
|
});
|
|
if (Object.keys(patch).length) applyStyle(patch);
|
|
}}
|
|
>
|
|
<ToggleGroupItem value="bold" aria-label="ตัวหนา" title="ตัวหนา (Ctrl/⌘ B)">
|
|
<BoldIcon />
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="italic" aria-label="ตัวเอียง" title="ตัวเอียง (Ctrl/⌘ I)">
|
|
<ItalicIcon />
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="underline" aria-label="ขีดเส้นใต้" title="ขีดเส้นใต้ (Ctrl/⌘ U)">
|
|
<UnderlineIcon />
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="strike" aria-label="ขีดฆ่า" title="ขีดฆ่า (Alt/⌥ Shift 5)">
|
|
<StrikethroughIcon />
|
|
</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
<label className="relative shrink-0">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="icon-sm"
|
|
render={<span />}
|
|
nativeButton={false}
|
|
aria-label="สีตัวอักษร"
|
|
>
|
|
<span className="font-semibold underline decoration-2" style={{ textDecorationColor: activeTextColor }}>A</span>
|
|
</Button>
|
|
<input
|
|
type="color"
|
|
aria-label="เลือกสีตัวอักษร"
|
|
className="absolute inset-0 cursor-pointer opacity-0"
|
|
value={activeTextColor}
|
|
onChange={(event) => applyStyle({ color: event.target.value })}
|
|
/>
|
|
</label>
|
|
<SimpleTooltip
|
|
text={
|
|
<>
|
|
ทำซ้ำ <Kbd>Ctrl/⌘ Shift Z</Kbd>
|
|
</>
|
|
}
|
|
>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
disabled={!canRedo}
|
|
aria-label="ทำซ้ำการแก้ไขตาราง"
|
|
onClick={() => travel(1)}
|
|
>
|
|
<Redo2Icon />
|
|
</Button>
|
|
</SimpleTooltip>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => {
|
|
const row = value.rows.length;
|
|
commitSheet(addExtraSheetRow(value, createId("extra-sheet-row")));
|
|
activateOnly({ ...active, row });
|
|
}}
|
|
>
|
|
<PlusIcon data-icon="inline-start" />
|
|
เพิ่มแถว
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={openAddColumn}
|
|
>
|
|
<PlusIcon data-icon="inline-start" />
|
|
เพิ่มคอลัมน์
|
|
</Button>
|
|
<label className="relative">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
render={<span />}
|
|
nativeButton={false}
|
|
>
|
|
<PaletteIcon data-icon="inline-start" />
|
|
สีพื้นหลัง
|
|
</Button>
|
|
<input
|
|
type="color"
|
|
aria-label="เลือกสีพื้นหลังเซลล์"
|
|
className="absolute inset-0 cursor-pointer opacity-0"
|
|
value={
|
|
activeRow?.backgrounds?.[activeColumn?.id ?? ""] ??
|
|
DEFAULT_CELL_BACKGROUND
|
|
}
|
|
onChange={(event) => {
|
|
commitSheet(
|
|
updateExtraSheetCells(value, selectedPointsRef.current, {
|
|
backgroundColor: event.target.value,
|
|
}),
|
|
);
|
|
}}
|
|
/>
|
|
</label>
|
|
<ToggleGroup
|
|
value={[activeAlignment]}
|
|
variant="outline"
|
|
size="sm"
|
|
spacing={0}
|
|
aria-label="จัดแนวข้อความ"
|
|
onValueChange={(alignments) => {
|
|
const alignment = alignments[0] as ExtraSheetAlignment | undefined;
|
|
if (alignment) {
|
|
commitSheet(updateExtraSheetCells(value, selectedPointsRef.current, { alignment }));
|
|
}
|
|
}}
|
|
>
|
|
<ToggleGroupItem value="left" aria-label="ชิดซ้าย"><AlignLeftIcon /></ToggleGroupItem>
|
|
<ToggleGroupItem value="center" aria-label="กึ่งกลาง"><AlignCenterIcon /></ToggleGroupItem>
|
|
<ToggleGroupItem value="right" aria-label="ชิดขวา"><AlignRightIcon /></ToggleGroupItem>
|
|
</ToggleGroup>
|
|
<SimpleTooltip text="ล้างรูปแบบ">
|
|
<Button type="button" variant="ghost" size="icon-sm" aria-label="ล้างรูปแบบ" onClick={clearFormatting}>
|
|
<EraserIcon />
|
|
</Button>
|
|
</SimpleTooltip>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setRemoveOpen(true)}
|
|
>
|
|
<Trash2Icon data-icon="inline-start" />
|
|
ลบตาราง
|
|
</Button>
|
|
</div>
|
|
|
|
<InputGroup>
|
|
<InputGroupAddon className="min-w-16 font-mono">
|
|
{selectedCount > 1
|
|
? `${selectedCount} cells`
|
|
: `${spreadsheetColumnName(active.column)}${active.row + 1}`}
|
|
</InputGroupAddon>
|
|
<InputGroupTextarea
|
|
key={`${active.row}:${active.column}:${activeValue}`}
|
|
aria-label="ค่าของเซลล์ที่เลือก"
|
|
rows={1}
|
|
defaultValue={extraRichTextToPlainText(activeValue)}
|
|
onBlur={(event) => {
|
|
if (event.currentTarget.value !== extraRichTextToPlainText(activeValue)) {
|
|
commitSheet(updateExtraSheetCells(value, [active], {
|
|
value: normalizeExtraRichText(event.currentTarget.value),
|
|
}));
|
|
}
|
|
}}
|
|
onKeyDown={(event) => {
|
|
if (event.key === "Enter" && !event.shiftKey) {
|
|
event.preventDefault();
|
|
event.currentTarget.blur();
|
|
}
|
|
}}
|
|
/>
|
|
</InputGroup>
|
|
|
|
<ContextMenu>
|
|
<ContextMenuTrigger className="extra-sheet-scroll max-h-[32rem] overflow-auto rounded-lg border">
|
|
<DndContext
|
|
sensors={sensors}
|
|
collisionDetection={sameAxisCollision}
|
|
onDragEnd={handleDragEnd}
|
|
>
|
|
<SortableContext items={sortableIds} strategy={rectSortingStrategy}>
|
|
<Spreadsheet
|
|
ref={spreadsheetRef}
|
|
className="extra-sheet-grid"
|
|
data={matrix}
|
|
columnLabels={value.columns.map((column) => column.label)}
|
|
ColumnIndicator={columnIndicator}
|
|
RowIndicator={rowIndicator}
|
|
Table={sheetTable}
|
|
DataViewer={LiteralDataViewer}
|
|
DataEditor={dataEditor}
|
|
onKeyDown={(event) => {
|
|
if (
|
|
(event.target as HTMLElement).closest(
|
|
".Spreadsheet__data-editor",
|
|
)
|
|
) {
|
|
return;
|
|
}
|
|
const startsTyping =
|
|
event.key.length === 1 &&
|
|
!event.ctrlKey &&
|
|
!event.metaKey &&
|
|
!event.altKey;
|
|
if (event.key !== "F2" && !startsTyping) return;
|
|
event.preventDefault();
|
|
initialEditTextRef.current = startsTyping
|
|
? event.key
|
|
: null;
|
|
const root = event.currentTarget as HTMLElement;
|
|
root
|
|
.querySelector<HTMLElement>(".Spreadsheet__active-cell--view")
|
|
?.click();
|
|
}}
|
|
onActivate={(point) => {
|
|
setActive(point);
|
|
setSelectedCount(1);
|
|
selectedPointsRef.current = [point];
|
|
selectedRangeRef.current = { start: point, end: point };
|
|
setSelectionKind("cells");
|
|
}}
|
|
onSelect={(nextSelection: Selection) => {
|
|
const range = nextSelection.toRange(matrix);
|
|
if (range) {
|
|
setActive(range.start);
|
|
selectedPointsRef.current = Array.from(range);
|
|
selectedRangeRef.current = { start: range.start, end: range.end };
|
|
setSelectedCount(range.size());
|
|
setSelectionKind(
|
|
nextSelection instanceof EntireRowsSelection
|
|
? "rows"
|
|
: nextSelection instanceof EntireColumnsSelection
|
|
? "columns"
|
|
: "cells",
|
|
);
|
|
}
|
|
}}
|
|
onChange={(next) =>
|
|
commitSheet(
|
|
matrixToExtraSheet(value, next as ExtraSheetMatrix, createId),
|
|
)
|
|
}
|
|
/>
|
|
</SortableContext>
|
|
</DndContext>
|
|
</ContextMenuTrigger>
|
|
<ContextMenuContent>
|
|
<ContextMenuGroup>
|
|
<ContextMenuItem onClick={() => void cutSelection()}>
|
|
<ScissorsIcon /> ตัด <ContextMenuShortcut>Ctrl/⌘ X</ContextMenuShortcut>
|
|
</ContextMenuItem>
|
|
<ContextMenuItem onClick={() => void copySelection()}>
|
|
<CopyIcon /> คัดลอก <ContextMenuShortcut>Ctrl/⌘ C</ContextMenuShortcut>
|
|
</ContextMenuItem>
|
|
<ContextMenuItem onClick={() => void pasteFromClipboard()}>
|
|
<ClipboardIcon /> วาง <ContextMenuShortcut>Ctrl/⌘ V</ContextMenuShortcut>
|
|
</ContextMenuItem>
|
|
</ContextMenuGroup>
|
|
<ContextMenuSeparator />
|
|
{selectionKind === "rows" ? (
|
|
<ContextMenuGroup>
|
|
<ContextMenuItem onClick={() => insertRowAt(active.row)}>เพิ่มแถวด้านบน</ContextMenuItem>
|
|
<ContextMenuItem onClick={() => insertRowAt(active.row + 1)}>เพิ่มแถวด้านล่าง</ContextMenuItem>
|
|
<ContextMenuItem variant="destructive" disabled={value.rows.length === 1} onClick={removeActiveRow}>
|
|
<Trash2Icon /> ลบแถว
|
|
</ContextMenuItem>
|
|
</ContextMenuGroup>
|
|
) : selectionKind === "columns" ? (
|
|
<ContextMenuGroup>
|
|
<ContextMenuItem onClick={() => insertColumnAt(active.column)}>เพิ่มคอลัมน์ด้านซ้าย</ContextMenuItem>
|
|
<ContextMenuItem onClick={() => insertColumnAt(active.column + 1)}>เพิ่มคอลัมน์ด้านขวา</ContextMenuItem>
|
|
<ContextMenuItem onClick={() => openRenameColumn()}>เปลี่ยนชื่อคอลัมน์</ContextMenuItem>
|
|
<ContextMenuItem variant="destructive" disabled={value.columns.length === 1} onClick={removeActiveColumn}>
|
|
<Trash2Icon /> ลบคอลัมน์
|
|
</ContextMenuItem>
|
|
</ContextMenuGroup>
|
|
) : (
|
|
<ContextMenuGroup>
|
|
<ContextMenuItem onClick={clearContents}>ล้างเนื้อหา</ContextMenuItem>
|
|
<ContextMenuItem onClick={clearFormatting}><EraserIcon /> ล้างรูปแบบ</ContextMenuItem>
|
|
</ContextMenuGroup>
|
|
)}
|
|
</ContextMenuContent>
|
|
</ContextMenu>
|
|
|
|
<Dialog open={labelDialogOpen} onOpenChange={setLabelDialogOpen}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
{renaming ? "แก้ไขชื่อคอลัมน์" : "เพิ่มคอลัมน์"}
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
ตั้งชื่อที่ใช้อธิบายข้อมูลในคอลัมน์นี้
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<FieldGroup>
|
|
<Field data-invalid={labelInvalid || undefined}>
|
|
<FieldLabel htmlFor="extra-sheet-column-label">
|
|
ชื่อคอลัมน์
|
|
</FieldLabel>
|
|
<Input
|
|
id="extra-sheet-column-label"
|
|
value={columnLabel}
|
|
aria-invalid={labelInvalid || undefined}
|
|
autoFocus
|
|
onChange={(event) => setColumnLabel(event.target.value)}
|
|
onKeyDown={(event) => {
|
|
if (event.key === "Enter") saveColumnLabel();
|
|
}}
|
|
/>
|
|
</Field>
|
|
</FieldGroup>
|
|
<DialogFooter showCloseButton>
|
|
<Button
|
|
type="button"
|
|
disabled={labelInvalid}
|
|
onClick={saveColumnLabel}
|
|
>
|
|
{renaming ? "บันทึกชื่อ" : "เพิ่มคอลัมน์"}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<DeleteConfirmationDialog
|
|
open={removeOpen}
|
|
onOpenChange={setRemoveOpen}
|
|
title="ลบตารางนี้?"
|
|
description="คอลัมน์ แถว และข้อมูลในเซลล์ทั้งหมดจะถูกลบออกจากการ์ด"
|
|
confirmLabel="ยืนยันลบตาราง"
|
|
showSuccessToast={false}
|
|
onConfirm={() => {
|
|
onRemove();
|
|
setRemoveOpen(false);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|