@quadrats/react 1.1.7 → 1.1.8

package/table/src/components/TableCell.tsx

@@ -0,0 +1,415 @@
+import React, { useContext, useRef, useState, useEffect, useMemo, useCallback } from 'react';
+import clsx from 'clsx';
+import { RenderElementProps } from '@quadrats/react';
+import { Transforms, Element } from '@quadrats/core';
+import { useSlateStatic } from 'slate-react';
+import { useDrop } from 'react-dnd';
+import { TableHeaderContext } from '../contexts/TableHeaderContext';
+import { Portal } from '@quadrats/react/components';
+import { TableElement } from '@quadrats/common/table';
+import { useTableMetadata } from '../hooks/useTableMetadata';
+import { useTableStateContext } from '../hooks/useTableStateContext';
+import { InlineToolbar } from '@quadrats/react/toolbar';
+import { useTableCellFocused, useTableCellPosition, useTableCellTransformContent } from '../hooks/useTableCell';
+import { useTableCellToolbarActions } from '../hooks/useTableCellToolbarActions';
+import { TableScrollContext } from '../contexts/TableScrollContext';
+import { useColumnResize } from '../hooks/useColumnResize';
+import { useTableActionsContext } from '../hooks/useTableActionsContext';
+import { useTableDragContext } from '../contexts/TableDragContext';
+import { ROW_DRAG_TYPE, RowDragButton } from './RowDragButton';
+import { COLUMN_DRAG_TYPE, ColumnDragButton } from './ColumnDragButton';
+import { getTableElements } from '../utils/helper';
+
+function TableCell(props: RenderElementProps<TableElement>) {
+  const { attributes, children, element } = props;
+  const { tableSelectedOn, setTableSelectedOn, tableHoveredOn, setTableHoveredOn } = useTableStateContext();
+  const { columnCount, rowCount, portalContainerRef, isColumnPinned, tableElement } = useTableMetadata();
+  const { moveOrSwapRow, moveOrSwapColumn } = useTableActionsContext();
+  const { dragState, dropTargetIndex, setDropTargetIndex, dragDirection, setDragDirection } = useTableDragContext();
+
+  // Component context
+  const { isHeader } = useContext(TableHeaderContext);
+  const { scrollTop, scrollLeft, scrollRef } = useContext(TableScrollContext);
+  const editor = useSlateStatic();
+
+  // Cell-specific hooks
+  const focused = useTableCellFocused(element, editor);
+  const cellPosition = useTableCellPosition(element, editor);
+  const transformCellContent = useTableCellTransformContent(element, editor);
+
+  // Get header row count from table structure
+  const tableElements = getTableElements(tableElement);
+  const headerRowCount = tableElements.tableHeaderElement?.children.length || 0;
+
+  // Helper to check if column is title column
+  const checkIsTitleColumn = useCallback(
+    (colIndex: number) => {
+      const elements = getTableElements(tableElement);
+
+      if (!elements.tableBodyElement) return false;
+
+      const firstRow = elements.tableBodyElement.children[0];
+
+      if (!Element.isElement(firstRow)) return false;
+
+      const cell = firstRow.children[colIndex];
+
+      return Element.isElement(cell) && !!cell.treatAsTitle;
+    },
+    [tableElement],
+  );
+
+  // Toolbar actions
+  const { focusToolbarIconGroups, inlineToolbarIconGroups } = useTableCellToolbarActions({
+    element,
+    cellPosition,
+    isHeader,
+    transformCellContent,
+  });
+
+  const isSelectedInSameRow = tableSelectedOn?.region === 'row' && tableSelectedOn?.index === cellPosition.rowIndex;
+  const isSelectedInSameColumn =
+    tableSelectedOn?.region === 'column' && tableSelectedOn?.index === cellPosition.columnIndex;
+
+  // 判斷是否為正在被拖曳的 row/column
+  const isDraggingThisRow = dragState?.type === 'row' && dragState.rowIndex === cellPosition.rowIndex;
+  const isDraggingThisColumn = dragState?.type === 'column' && dragState.columnIndex === cellPosition.columnIndex;
+
+  const isSelectionTriggerByMe =
+    (isSelectedInSameRow && cellPosition.columnIndex === 0) || (isSelectedInSameColumn && cellPosition.rowIndex === 0);
+
+  const showColumnActionButton = useMemo(
+    () =>
+      cellPosition.rowIndex === 0 &&
+      (isSelectedInSameColumn || (tableHoveredOn?.columnIndex === cellPosition.columnIndex && !tableSelectedOn)),
+    [cellPosition, isSelectedInSameColumn, tableHoveredOn, tableSelectedOn],
+  );
+
+  const showRowActionButton = useMemo(
+    () =>
+      cellPosition.columnIndex === 0 &&
+      (isSelectedInSameRow || (tableHoveredOn?.rowIndex === cellPosition.rowIndex && !tableSelectedOn)),
+    [cellPosition, isSelectedInSameRow, tableHoveredOn, tableSelectedOn],
+  );
+
+  // 用於定位 InlineToolbar 的 ref
+  const cellRef = useRef<HTMLTableCellElement>(null);
+  const [toolbarPosition, setToolbarPosition] = useState<{ top: number; left: number } | null>(null);
+  const [rowButtonPosition, setRowButtonPosition] = useState<{ top: number; left: number } | null>(null);
+  const [columnButtonPosition, setColumnButtonPosition] = useState<{ top: number; left: number } | null>(null);
+  const [cellStuckAtLeft, setCellStuckAtLeft] = useState<number | undefined>(undefined);
+
+  const [, dropRow] = useDrop<{ rowIndex: number; isInHeader: boolean }, void, void>(
+    () => ({
+      accept: ROW_DRAG_TYPE,
+      canDrop: (item) => {
+        if (!dragState || dragState.type !== 'row') return false;
+        if (item.rowIndex === cellPosition.rowIndex) return false;
+
+        const sourceInHeader = item.isInHeader;
+        const targetInHeader = cellPosition.rowIndex < headerRowCount;
+
+        return sourceInHeader === targetInHeader;
+      },
+      hover: (item, monitor) => {
+        if (!monitor.canDrop()) {
+          setDropTargetIndex(null);
+          setDragDirection(null);
+
+          return;
+        }
+
+        const direction = item.rowIndex < cellPosition.rowIndex ? 'down' : 'up';
+
+        setDropTargetIndex(cellPosition.rowIndex);
+        setDragDirection(direction);
+      },
+      drop: (item) => {
+        moveOrSwapRow(item.rowIndex, cellPosition.rowIndex, 'move');
+        setDropTargetIndex(null);
+        setDragDirection(null);
+      },
+    }),
+    [dragState, cellPosition.rowIndex, headerRowCount, moveOrSwapRow, setDropTargetIndex, setDragDirection],
+  );
+
+  // Drop target logic for columns
+  const [, dropColumn] = useDrop<{ columnIndex: number; isTitle: boolean }, void, void>(
+    () => ({
+      accept: COLUMN_DRAG_TYPE,
+      canDrop: (item) => {
+        if (!dragState || dragState.type !== 'column') return false;
+        if (item.columnIndex === cellPosition.columnIndex) return false;
+
+        const sourceIsTitle = item.isTitle;
+        const targetIsTitle = checkIsTitleColumn(cellPosition.columnIndex);
+
+        return sourceIsTitle === targetIsTitle;
+      },
+      hover: (item, monitor) => {
+        if (!monitor.canDrop()) {
+          setDropTargetIndex(null);
+          setDragDirection(null);
+
+          return;
+        }
+
+        // 計算拖曳方向
+        const direction = item.columnIndex < cellPosition.columnIndex ? 'right' : 'left';
+
+        setDropTargetIndex(cellPosition.columnIndex);
+        setDragDirection(direction);
+      },
+      drop: (item) => {
+        moveOrSwapColumn(item.columnIndex, cellPosition.columnIndex, 'move');
+        setDropTargetIndex(null);
+        setDragDirection(null);
+      },
+    }),
+    [dragState, cellPosition.columnIndex, checkIsTitleColumn, moveOrSwapColumn, setDropTargetIndex, setDragDirection],
+  );
+
+  // Combine refs
+  dropRow(dropColumn(cellRef));
+
+  // Column resize
+  const { isResizing, handleResizeStart } = useColumnResize({
+    tableElement,
+    columnIndex: cellPosition.columnIndex,
+    cellRef,
+  });
+
+  useEffect(() => {
+    const { current: cell } = cellRef;
+    const { current: portalContainer } = portalContainerRef;
+
+    if (!cell || !portalContainer) {
+      setToolbarPosition(null);
+      setRowButtonPosition(null);
+      setColumnButtonPosition(null);
+
+      return;
+    }
+
+    const rafId = requestAnimationFrame(() => {
+      const cellRect = cell.getBoundingClientRect();
+      const portalContainerRect = portalContainer.getBoundingClientRect();
+
+      // 工具列位置 (針對 focused 狀態)
+      if (focused || isSelectionTriggerByMe) {
+        setToolbarPosition({
+          top: cellRect.top - portalContainerRect.top - 4, // -4px offset
+          left: cellRect.left - portalContainerRect.left,
+        });
+      } else {
+        setToolbarPosition(null);
+      }
+
+      // 行按鈕位置 (顯示在第一列)
+      if (cellPosition.columnIndex === 0) {
+        setRowButtonPosition({
+          top: Math.min(cellRect.top - portalContainerRect.top + cellRect.height / 2 - 10, 0), // 置中，按鈕高度約 20px
+          left: cellRect.left - portalContainerRect.left - 10, // 向左偏移 10px
+        });
+      } else {
+        setRowButtonPosition(null);
+      }
+
+      // 列按鈕位置 (顯示在第一行)
+      if (cellPosition.rowIndex === 0) {
+        setColumnButtonPosition({
+          top: cellRect.top - portalContainerRect.top - 10 + scrollTop, // 向上偏移 10px
+          left: cellRect.left - portalContainerRect.left + cellRect.width / 2 - 10, // 置中，按鈕寬度約 20px
+        });
+      } else {
+        setColumnButtonPosition(null);
+      }
+    });
+
+    return () => {
+      cancelAnimationFrame(rafId);
+    };
+  }, [
+    focused,
+    isSelectionTriggerByMe,
+    cellPosition.columnIndex,
+    cellPosition.rowIndex,
+    portalContainerRef,
+    scrollTop,
+    scrollLeft,
+  ]);
+
+  useEffect(() => {
+    const { current: cell } = cellRef;
+    const { current: scrollContainer } = scrollRef;
+
+    if (scrollContainer && cell) {
+      const cellRect = cell.getBoundingClientRect();
+      const containerRect = scrollContainer.getBoundingClientRect();
+
+      setCellStuckAtLeft(Math.max(Math.round(cellRect.left - containerRect.left), 0));
+    }
+  }, [scrollRef]);
+
+  const TagName = isHeader ? 'th' : 'td';
+  const myColumnIsPinned = isColumnPinned(cellPosition.columnIndex) && element.treatAsTitle;
+
+  return (
+    <TagName
+      {...attributes}
+      ref={cellRef}
+      onMouseEnter={() => {
+        setTableHoveredOn({ columnIndex: cellPosition.columnIndex, rowIndex: cellPosition.rowIndex });
+      }}
+      onMouseLeave={() => {
+        setTableHoveredOn(undefined);
+      }}
+      className={clsx('qdr-table__cell', {
+        'qdr-table__cell--header': isHeader || element.treatAsTitle,
+        'qdr-table__cell--pinned': myColumnIsPinned,
+        'qdr-table__cell--top-active':
+          isSelectedInSameRow ||
+          (isSelectedInSameColumn && cellPosition.rowIndex === 0) ||
+          isDraggingThisRow ||
+          (isDraggingThisColumn && cellPosition.rowIndex === 0),
+        'qdr-table__cell--right-active':
+          isSelectedInSameColumn ||
+          (isSelectedInSameRow && cellPosition.columnIndex === columnCount - 1) ||
+          isDraggingThisColumn ||
+          (isDraggingThisRow && cellPosition.columnIndex === columnCount - 1),
+        'qdr-table__cell--bottom-active':
+          isSelectedInSameRow ||
+          (isSelectedInSameColumn && cellPosition.rowIndex === rowCount - 1) ||
+          isDraggingThisRow ||
+          (isDraggingThisColumn && cellPosition.rowIndex === rowCount - 1),
+        'qdr-table__cell--left-active':
+          isSelectedInSameColumn ||
+          (isSelectedInSameRow && cellPosition.columnIndex === 0) ||
+          isDraggingThisColumn ||
+          (isDraggingThisRow && cellPosition.columnIndex === 0),
+        'qdr-table__cell--is-selection-trigger-by-me': isSelectionTriggerByMe,
+        'qdr-table__cell--drag-row-target-top':
+          dragState?.type === 'row' &&
+          dropTargetIndex === cellPosition.rowIndex &&
+          dropTargetIndex !== dragState.rowIndex &&
+          dragDirection === 'up',
+        'qdr-table__cell--drag-row-target-bottom':
+          dragState?.type === 'row' &&
+          dropTargetIndex === cellPosition.rowIndex &&
+          dropTargetIndex !== dragState.rowIndex &&
+          dragDirection === 'down',
+        'qdr-table__cell--drag-column-target-left':
+          dragState?.type === 'column' &&
+          dropTargetIndex === cellPosition.columnIndex &&
+          dropTargetIndex !== dragState.columnIndex &&
+          dragDirection === 'left',
+        'qdr-table__cell--drag-column-target-right':
+          dragState?.type === 'column' &&
+          dropTargetIndex === cellPosition.columnIndex &&
+          dropTargetIndex !== dragState.columnIndex &&
+          dragDirection === 'right',
+      })}
+      data-row-index={cellPosition.rowIndex}
+      data-column-index={cellPosition.columnIndex}
+      style={
+        myColumnIsPinned
+          ? {
+              left: cellStuckAtLeft,
+            }
+          : undefined
+      }
+    >
+      {children}
+      <div
+        contentEditable={false}
+        data-slate-editor={false}
+        className={clsx('qdr-table__cell__resize-handle', {
+          'qdr-table__cell__resize-handle--active': isResizing,
+        })}
+        onMouseDown={handleResizeStart}
+      />
+      {focused && (
+        <Portal getContainer={() => portalContainerRef.current || document.body}>
+          <InlineToolbar
+            className={'qdr-table__cell__focus-toolbar'}
+            style={{
+              top: toolbarPosition?.top,
+              left: toolbarPosition?.left,
+            }}
+            iconGroups={focusToolbarIconGroups}
+          />
+        </Portal>
+      )}
+      {showRowActionButton && (
+        <Portal getContainer={() => portalContainerRef.current || document.body}>
+          <RowDragButton
+            rowIndex={cellPosition.rowIndex}
+            headerRowCount={headerRowCount}
+            style={{
+              top: rowButtonPosition?.top,
+              left: rowButtonPosition?.left,
+            }}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+
+              Transforms.deselect(editor);
+
+              setTableSelectedOn((prev) => {
+                if (prev?.region === 'row' && prev.index === cellPosition.rowIndex) {
+                  return undefined;
+                }
+
+                return { region: 'row', index: cellPosition.rowIndex };
+              });
+            }}
+          />
+        </Portal>
+      )}
+      {showColumnActionButton && (
+        <Portal getContainer={() => portalContainerRef.current || document.body}>
+          <ColumnDragButton
+            columnIndex={cellPosition.columnIndex}
+            style={{
+              // pinned 時因為 sticky 所以要扣掉 scrollTop
+              top: (columnButtonPosition?.top ?? 0) - (element.pinned ? scrollTop : 0),
+              left: columnButtonPosition?.left,
+            }}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+
+              Transforms.deselect(editor);
+
+              setTableSelectedOn((prev) => {
+                if (prev?.region === 'column' && prev.index === cellPosition.columnIndex) {
+                  return undefined;
+                }
+
+                return { region: 'column', index: cellPosition.columnIndex };
+              });
+            }}
+            checkIsTitleColumn={checkIsTitleColumn}
+          />
+        </Portal>
+      )}
+      {isSelectionTriggerByMe && (cellPosition.columnIndex === 0 || cellPosition.rowIndex === 0) ? (
+        <Portal getContainer={() => portalContainerRef.current || document.body}>
+          <InlineToolbar
+            className="qdr-table__cell__inline-table-toolbar"
+            style={{
+              top: toolbarPosition?.top,
+              left: toolbarPosition?.left,
+            }}
+            iconGroups={inlineToolbarIconGroups}
+            onClickAway={() => {
+              setTableSelectedOn(undefined);
+            }}
+          />
+        </Portal>
+      ) : null}
+    </TagName>
+  );
+}
+
+export default TableCell;

package/table/src/components/TableDragLayer.tsx

@@ -0,0 +1,127 @@
+import React, { useEffect, useState } from 'react';
+import { useDragLayer } from 'react-dnd';
+import { useTableDragContext } from '../contexts/TableDragContext';
+
+interface DragLayerProps {
+  scrollRef: React.RefObject<HTMLDivElement | null>;
+}
+
+export const TableDragLayer: React.FC<DragLayerProps> = ({ scrollRef }) => {
+  const { dragState } = useTableDragContext();
+  const [columnWidths, setColumnWidths] = useState<number[]>([]);
+  const [rowHeights, setRowHeights] = useState<number[]>([]);
+
+  const { isDragging, currentOffset } = useDragLayer((monitor) => ({
+    isDragging: monitor.isDragging(),
+    currentOffset: monitor.getClientOffset(),
+  }));
+
+  // 計算所有 column 的寬度和 row 的高度
+  useEffect(() => {
+    if (!scrollRef.current || !isDragging) return;
+
+    const tableContainer = scrollRef.current;
+    const cells = tableContainer.querySelectorAll('.qdr-table__cell');
+
+    if (dragState?.type === 'column') {
+      // 計算每個 column 的寬度
+      const widths: number[] = [];
+      const columnCells = Array.from(cells).filter((cell) => {
+        const cellElement = cell as HTMLElement;
+
+        return cellElement.dataset.columnIndex !== undefined;
+      });
+
+      const columnCount =
+        Math.max(
+          ...columnCells.map((cell) => {
+            const cellElement = cell as HTMLElement;
+
+            return parseInt(cellElement.dataset.columnIndex || '0', 10);
+          }),
+        ) + 1;
+
+      for (let i = 0; i < columnCount; i++) {
+        const cellsInColumn = columnCells.filter((cell) => {
+          const cellElement = cell as HTMLElement;
+
+          return parseInt(cellElement.dataset.columnIndex || '0', 10) === i;
+        });
+
+        if (cellsInColumn.length > 0) {
+          const firstCell = cellsInColumn[0] as HTMLElement;
+
+          widths[i] = firstCell.getBoundingClientRect().width;
+        }
+      }
+
+      setColumnWidths(widths);
+    } else if (dragState?.type === 'row') {
+      // 計算每個 row 的高度
+      const heights: number[] = [];
+      const rowCells = Array.from(cells).filter((cell) => {
+        const cellElement = cell as HTMLElement;
+
+        return cellElement.dataset.rowIndex !== undefined;
+      });
+
+      const rowCount =
+        Math.max(
+          ...rowCells.map((cell) => {
+            const cellElement = cell as HTMLElement;
+
+            return parseInt(cellElement.dataset.rowIndex || '0', 10);
+          }),
+        ) + 1;
+
+      for (let i = 0; i < rowCount; i++) {
+        const cellsInRow = rowCells.filter((cell) => {
+          const cellElement = cell as HTMLElement;
+
+          return parseInt(cellElement.dataset.rowIndex || '0', 10) === i;
+        });
+
+        if (cellsInRow.length > 0) {
+          const firstCell = cellsInRow[0] as HTMLElement;
+
+          heights[i] = firstCell.getBoundingClientRect().height;
+        }
+      }
+
+      setRowHeights(heights);
+    }
+  }, [isDragging, dragState, scrollRef]);
+
+  if (!isDragging || !dragState || !currentOffset || !scrollRef.current) {
+    return null;
+  }
+
+  const tableContainer = scrollRef.current;
+  const tableRect = tableContainer.getBoundingClientRect();
+
+  if (dragState.type) {
+    const sourceIndex = dragState.type === 'column' ? dragState.columnIndex : dragState.rowIndex;
+    const rowHeight = dragState.type === 'column' ? tableRect.height : rowHeights[sourceIndex];
+    const columnWidth = dragState.type === 'column' ? columnWidths[sourceIndex] : tableRect.width;
+
+    return (
+      <div
+        className="qdr-table__drag-overlay"
+        style={{
+          left: tableRect.left,
+          top: tableRect.top,
+          width: columnWidth,
+          height: rowHeight,
+          transform:
+            dragState.type === 'column'
+              ? `translateX(${currentOffset.x - tableRect.left - columnWidth / 2}px)`
+              : `translateY(${currentOffset.y - tableRect.top - rowHeight / 2}px)`,
+        }}
+      >
+        <div className="qdr-table__drag-overlay-content" />
+      </div>
+    );
+  }
+
+  return null;
+};

package/table/src/components/TableHeader.tsx

@@ -0,0 +1,26 @@
+import React, { useMemo } from 'react';
+import clsx from 'clsx';
+import { RenderElementProps } from '@quadrats/react';
+import { TableHeaderContext } from '../contexts/TableHeaderContext';
+import { TableHeaderContextType } from '../typings';
+import { TableElement } from '@quadrats/common/table';
+import { QuadratsElement } from '@quadrats/core';
+
+function TableHeader(props: RenderElementProps<TableElement>) {
+  const { attributes, children, element } = props;
+
+  const tableHeaderContextValue: TableHeaderContextType = useMemo(() => ({ isHeader: true }), []);
+  const hasAnyRowPinned = element.children.some((child) =>
+    (child as QuadratsElement).children.every((cell) => (cell as QuadratsElement & { pinned: boolean }).pinned),
+  );
+
+  return (
+    <TableHeaderContext.Provider value={tableHeaderContextValue}>
+      <thead {...attributes} className={clsx('qdr-table__header', { 'qdr-table__header--pinned': hasAnyRowPinned })}>
+        {children}
+      </thead>
+    </TableHeaderContext.Provider>
+  );
+}
+
+export default TableHeader;