@quadrats/react 1.0.0 → 1.1.1

package/table/components/TableHeader.js

@@ -0,0 +1,13 @@
+import React, { useMemo } from 'react';
+import clsx from 'clsx';
+import { TableHeaderContext } from '../contexts/TableHeaderContext.js';
+
+function TableHeader(props) {
+    const { attributes, children, element } = props;
+    const tableHeaderContextValue = useMemo(() => ({ isHeader: true }), []);
+    const hasAnyRowPinned = element.children.some((child) => child.children.every((cell) => cell.pinned));
+    return (React.createElement(TableHeaderContext.Provider, { value: tableHeaderContextValue },
+        React.createElement("thead", Object.assign({}, attributes, { className: clsx('qdr-table__header', { 'qdr-table__header--pinned': hasAnyRowPinned }) }), children)));
+}
+
+export { TableHeader as default };

package/table/components/TableMain.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { RenderElementProps } from '@quadrats/react';
+import { TableElement } from '@quadrats/common/table';
+declare function TableMain(props: RenderElementProps<TableElement>): React.JSX.Element;
+export default TableMain;

package/table/components/TableMain.js

@@ -0,0 +1,233 @@
+import React, { useRef, useState, useMemo, useEffect, useCallback } from 'react';
+import clsx from 'clsx';
+import { useModal, useSlateStatic, ReactEditor } from '@quadrats/react';
+import { Icon } from '@quadrats/react/components';
+import { AlignLeft, AlignRight, AlignCenter, Copy, Trash, Plus } from '@quadrats/icons';
+import { useTableActionsContext } from '../hooks/useTableActionsContext.js';
+import { useTableMetadata } from '../hooks/useTableMetadata.js';
+import { useTableStateContext } from '../hooks/useTableStateContext.js';
+import { useTableDragContext } from '../contexts/TableDragContext.js';
+import { InlineToolbar, ToolbarGroupIcon, ToolbarIcon } from '@quadrats/react/toolbar';
+import { Transforms } from 'slate';
+import { calculateTableMinWidth, columnWidthToCSS } from '@quadrats/common/table';
+import { TableScrollContext } from '../contexts/TableScrollContext.js';
+import { useTableCellAlign, useTableCellAlignStatus } from '../hooks/useTableCell.js';
+import { getTableElements, getColumnWidths } from '../utils/helper.js';
+import { TableDragLayer } from './TableDragLayer.js';
+
+function TableMain(props) {
+    const { attributes, children } = props;
+    const { setConfirmModalConfig } = useModal();
+    const editor = useSlateStatic();
+    const { addColumn, addRow, addColumnAndRow } = useTableActionsContext();
+    const { isReachMaximumColumns, isReachMaximumRows, tableElement } = useTableMetadata();
+    const { tableSelectedOn, setTableSelectedOn } = useTableStateContext();
+    const { dragState } = useTableDragContext();
+    // Table align functions
+    const setAlign = useTableCellAlign(tableElement, editor);
+    const getAlign = useTableCellAlignStatus(tableElement, editor);
+    const tablePath = ReactEditor.findPath(editor, tableElement);
+    const scrollRef = useRef(null);
+    const tableRef = useRef(null);
+    const [scrollTop, setScrollTop] = useState(0);
+    const [scrollLeft, setScrollLeft] = useState(0);
+    const [tableWidth, setTableWidth] = useState(0);
+    const scrollUpdateTimerRef = useRef(null);
+    const isUpdatingScrollRef = useRef(false); // 標記是否正在更新滾動位置
+    const previousColumnWidthsRef = useRef(''); // 追蹤 columnWidths 的變化
+    // sizing
+    const { tableBodyElement } = getTableElements(tableElement);
+    const firstRowCells = tableBodyElement === null || tableBodyElement === void 0 ? void 0 : tableBodyElement.children[0].children;
+    // 獲取欄位寬度（傳入 tableWidth 以支援混合模式）
+    const columnWidths = useMemo(() => getColumnWidths(tableElement, tableWidth), [tableElement, tableWidth]);
+    // 計算 table 的最小寬度
+    const tableMinWidth = useMemo(() => calculateTableMinWidth(columnWidths), [columnWidths]);
+    // 監聽 table 寬度變化
+    useEffect(() => {
+        const { current: table } = tableRef;
+        if (!table)
+            return;
+        const resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                setTableWidth(entry.contentRect.width);
+            }
+        });
+        resizeObserver.observe(table);
+        // 初始化寬度
+        setTableWidth(table.getBoundingClientRect().width);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    useEffect(() => {
+        const { current: scrollContainer } = scrollRef;
+        if (!scrollContainer)
+            return;
+        const handleScroll = () => {
+            setScrollTop(scrollContainer.scrollTop);
+            setScrollLeft(scrollContainer.scrollLeft);
+            // 如果正在更新滾動位置，不要觸發 Slate 更新
+            if (isUpdatingScrollRef.current) {
+                return;
+            }
+            // 如果正在拖曳，不要觸發 Slate 更新（避免 transform 導致事件遺失）
+            if (dragState) {
+                return;
+            }
+            // 使用 debounce 來減少 Slate 更新頻率
+            if (scrollUpdateTimerRef.current) {
+                clearTimeout(scrollUpdateTimerRef.current);
+            }
+            scrollUpdateTimerRef.current = setTimeout(() => {
+                // 更新 tableElement 的 scrollPosition
+                const tablePath = ReactEditor.findPath(editor, tableElement);
+                Transforms.setNodes(editor, {
+                    scrollPosition: {
+                        scrollLeft: scrollContainer.scrollLeft,
+                        scrollTop: scrollContainer.scrollTop,
+                    },
+                }, { at: tablePath });
+            }, 300); // 300ms debounce
+        };
+        scrollContainer.addEventListener('scroll', handleScroll, false);
+        return () => {
+            scrollContainer.removeEventListener('scroll', handleScroll, false);
+            if (scrollUpdateTimerRef.current) {
+                clearTimeout(scrollUpdateTimerRef.current);
+            }
+        };
+    }, [editor, tableElement, dragState]);
+    // 只在 columnWidths 改變時恢復滾動位置
+    useEffect(() => {
+        const { current: scrollContainer } = scrollRef;
+        if (!scrollContainer || !tableElement.scrollPosition)
+            return;
+        // 檢查 columnWidths 是否真的改變了
+        const currentColumnWidthsStr = JSON.stringify(columnWidths);
+        if (previousColumnWidthsRef.current !== currentColumnWidthsStr) {
+            previousColumnWidthsRef.current = currentColumnWidthsStr;
+            // 標記正在更新，避免觸發 handleScroll
+            isUpdatingScrollRef.current = true;
+            // 使用 requestAnimationFrame 確保 DOM 已更新
+            requestAnimationFrame(() => {
+                var _a, _b, _c, _d;
+                scrollContainer.scrollLeft = (_b = (_a = tableElement.scrollPosition) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== null && _b !== void 0 ? _b : 0;
+                scrollContainer.scrollTop = (_d = (_c = tableElement.scrollPosition) === null || _c === void 0 ? void 0 : _c.scrollTop) !== null && _d !== void 0 ? _d : 0;
+                // 重置標記
+                setTimeout(() => {
+                    isUpdatingScrollRef.current = false;
+                }, 100);
+            });
+        }
+    }, [columnWidths, tableElement.scrollPosition]);
+    const scrollContextValue = useMemo(() => ({ scrollTop, scrollLeft, scrollRef }), [scrollTop, scrollLeft, scrollRef]);
+    // 複製 Table 功能
+    const copyTable = useCallback(() => {
+        try {
+            const clonedTable = JSON.parse(JSON.stringify(tableElement));
+            // 找到當前 table 的父節點路徑
+            const tableParentPath = tablePath.slice(0, -1);
+            const tableIndex = tablePath[tablePath.length - 1];
+            // 在當前 table 之後插入複製的 table
+            Transforms.insertNodes(editor, clonedTable, {
+                at: [...tableParentPath, tableIndex + 1],
+            });
+        }
+        catch (error) {
+            console.error('Failed to copy table:', error);
+        }
+    }, [editor, tableElement, tablePath]);
+    // 獲取當前 table 的 align 狀態
+    const currentTableAlign = getAlign('table');
+    // 根據當前 table align 狀態選擇對應的 icon
+    const getCurrentTableAlignIcon = useCallback(() => {
+        switch (currentTableAlign) {
+            case 'left':
+                return AlignLeft;
+            case 'center':
+                return AlignCenter;
+            case 'right':
+                return AlignRight;
+            default:
+                return AlignLeft;
+        }
+    }, [currentTableAlign]);
+    return (React.createElement("div", { className: clsx('qdr-table__mainWrapper', {
+            'qdr-table__mainWrapper--selected': (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'table',
+        }) },
+        React.createElement(InlineToolbar, { className: "qdr-table__table-toolbar", onClickAway: (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'table' ? () => setTableSelectedOn(undefined) : undefined, iconGroups: [
+                {
+                    icons: [
+                        {
+                            icon: Copy,
+                            onClick: () => {
+                                copyTable();
+                            },
+                        },
+                        React.createElement(ToolbarGroupIcon, { key: "table-align-change", icon: getCurrentTableAlignIcon() },
+                            React.createElement(ToolbarIcon, { icon: AlignLeft, onClick: () => {
+                                    setAlign('left', 'table');
+                                } }),
+                            React.createElement(ToolbarIcon, { icon: AlignCenter, onClick: () => {
+                                    setAlign('center', 'table');
+                                } }),
+                            React.createElement(ToolbarIcon, { icon: AlignRight, onClick: () => {
+                                    setAlign('right', 'table');
+                                } })),
+                    ],
+                },
+                {
+                    icons: [
+                        {
+                            icon: Trash,
+                            className: 'qdr-table__delete',
+                            onClick: () => {
+                                setConfirmModalConfig({
+                                    title: '刪除表格',
+                                    content: '是否確認刪除此表格？刪除後將立即移除，且此操作無法復原。',
+                                    confirmText: '刪除表格',
+                                    onConfirm: () => {
+                                        Transforms.removeNodes(editor, { at: tablePath });
+                                    },
+                                });
+                            },
+                        },
+                    ],
+                },
+            ] }),
+        React.createElement("div", { ref: scrollRef, className: "qdr-table__scrollContainer" },
+            React.createElement(TableScrollContext.Provider, { value: scrollContextValue },
+                React.createElement("table", Object.assign({}, attributes, { ref: (node) => {
+                        // 合併兩個 refs
+                        tableRef.current = node;
+                        if (typeof attributes.ref === 'function') {
+                            attributes.ref(node);
+                        }
+                        else if (attributes.ref) {
+                            attributes.ref.current = node;
+                        }
+                    }, className: "qdr-table__main", style: {
+                        minWidth: tableMinWidth,
+                    } }),
+                    React.createElement("colgroup", null, columnWidths.map((width, index) => (React.createElement("col", { key: index, style: {
+                            width: columnWidthToCSS(width),
+                            minWidth: columnWidthToCSS(width),
+                        } })))),
+                    children)),
+            React.createElement(TableDragLayer, { scrollRef: scrollRef })),
+        React.createElement("div", { className: "qdr-table__size-indicators" }, firstRowCells === null || firstRowCells === void 0 ? void 0 : firstRowCells.map((cell, colIndex) => (React.createElement("div", { key: colIndex, className: "qdr-table__size-indicator", style: {
+                width: columnWidthToCSS(columnWidths[colIndex]),
+                minWidth: columnWidthToCSS(columnWidths[colIndex]),
+                transform: cell.pinned ? 'none' : `translateX(-${scrollLeft}px)`,
+                zIndex: cell.pinned ? 2 : 1,
+            } },
+            React.createElement("div", { className: "qdr-table__size" }, columnWidthToCSS(columnWidths[colIndex])))))),
+        isReachMaximumColumns ? null : (React.createElement("button", { type: "button", onClick: () => addColumn(), title: "Add Column", className: "qdr-table__add-column" },
+            React.createElement(Icon, { icon: Plus, width: 20, height: 20, className: "qdr-table__btn-icon" }))),
+        isReachMaximumRows ? null : (React.createElement("button", { type: "button", onClick: () => addRow(), title: "Add Row", className: "qdr-table__add-row" },
+            React.createElement(Icon, { icon: Plus, width: 20, height: 20, className: "qdr-table__btn-icon" }))),
+        isReachMaximumColumns || isReachMaximumRows ? null : (React.createElement("button", { type: "button", onClick: addColumnAndRow, title: "Add Column and Row", className: "qdr-table__add-both" },
+            React.createElement(Icon, { icon: Plus, width: 20, height: 20, className: "qdr-table__btn-icon" })))));
+}
+
+export { TableMain as default };

package/table/components/TableRow.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { RenderElementProps } from '@quadrats/react';
+import { TableElement } from '@quadrats/common/table';
+declare function TableRow(props: RenderElementProps<TableElement>): React.JSX.Element;
+export default TableRow;

package/table/components/TableRow.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+function TableRow(props) {
+    const { attributes, children } = props;
+    return React.createElement("tr", Object.assign({}, attributes), children);
+}
+
+export { TableRow as default };

package/table/components/TableTitle.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { RenderElementProps } from '@quadrats/react';
+import { TableElement } from '@quadrats/common/table';
+declare function TableTitle(props: RenderElementProps<TableElement>): React.JSX.Element;
+export default TableTitle;

package/table/components/TableTitle.js

@@ -0,0 +1,18 @@
+import React, { useMemo } from 'react';
+import { Editor, Path } from '@quadrats/core';
+import { useComposition, useQuadrats, ReactEditor } from '@quadrats/react';
+
+function TableTitle(props) {
+    const { compositionPath } = useComposition();
+    const { attributes, children, element } = props;
+    const editor = useQuadrats();
+    const path = ReactEditor.findPath(editor, element);
+    const text = Editor.string(editor, path);
+    const isEmpty = !text;
+    const composing = useMemo(() => Path.equals(compositionPath, path), [compositionPath, path]);
+    return (React.createElement("h3", Object.assign({}, attributes, { className: "qdr-table__title" }),
+        children,
+        isEmpty && !composing && (React.createElement("span", { className: "qdr-table__title__placeholder", contentEditable: false }, "\u8ACB\u8F38\u5165\u8868\u683C\u6A19\u984C"))));
+}
+
+export { TableTitle as default };

package/table/contexts/TableActionsContext.d.ts

@@ -0,0 +1,3 @@
+import { TableContextType } from '../typings';
+export type TableActionsContextType = Pick<TableContextType, 'addColumn' | 'addRow' | 'addColumnAndRow' | 'deleteRow' | 'deleteColumn' | 'moveRowToBody' | 'moveRowToHeader' | 'unsetColumnAsTitle' | 'setColumnAsTitle' | 'pinColumn' | 'unpinColumn' | 'pinRow' | 'unpinRow' | 'moveOrSwapRow' | 'moveOrSwapColumn'>;
+export declare const TableActionsContext: import("react").Context<TableActionsContextType | undefined>;

package/table/contexts/TableActionsContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const TableActionsContext = createContext(undefined);
+
+export { TableActionsContext };

package/table/contexts/TableDragContext.d.ts

@@ -0,0 +1,26 @@
+import React, { Dispatch, SetStateAction } from 'react';
+interface RowDragState {
+    type: 'row';
+    rowIndex: number;
+    isInHeader: boolean;
+}
+interface ColumnDragState {
+    type: 'column';
+    columnIndex: number;
+    isTitle: boolean;
+}
+type DragState = RowDragState | ColumnDragState | null;
+type DragDirection = 'up' | 'down' | 'left' | 'right' | null;
+interface TableDragContextValue {
+    dragState: DragState;
+    setDragState: Dispatch<SetStateAction<DragState>>;
+    dropTargetIndex: number | null;
+    setDropTargetIndex: Dispatch<SetStateAction<number | null>>;
+    dragDirection: DragDirection;
+    setDragDirection: Dispatch<SetStateAction<DragDirection>>;
+}
+export declare const TableDragProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const useTableDragContext: () => TableDragContextValue;
+export {};

package/table/contexts/TableDragContext.js

@@ -0,0 +1,26 @@
+import React, { createContext, useContext, useState, useMemo } from 'react';
+
+const TableDragContext = createContext(null);
+const TableDragProvider = ({ children }) => {
+    const [dragState, setDragState] = useState(null);
+    const [dropTargetIndex, setDropTargetIndex] = useState(null);
+    const [dragDirection, setDragDirection] = useState(null);
+    const value = useMemo(() => ({
+        dragState,
+        setDragState,
+        dropTargetIndex,
+        setDropTargetIndex,
+        dragDirection,
+        setDragDirection,
+    }), [dragState, dropTargetIndex, dragDirection]);
+    return React.createElement(TableDragContext.Provider, { value: value }, children);
+};
+const useTableDragContext = () => {
+    const context = useContext(TableDragContext);
+    if (!context) {
+        throw new Error('useTableDragContext must be used within TableDragProvider');
+    }
+    return context;
+};
+
+export { TableDragProvider, useTableDragContext };

package/table/contexts/TableHeaderContext.d.ts

@@ -0,0 +1,2 @@
+import { TableHeaderContextType } from '../typings';
+export declare const TableHeaderContext: import("react").Context<TableHeaderContextType>;

package/table/contexts/TableHeaderContext.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+const TableHeaderContext = createContext({
+    isHeader: false,
+});
+
+export { TableHeaderContext };

package/table/contexts/TableMetadataContext.d.ts

@@ -0,0 +1,3 @@
+import { TableContextType } from '../typings';
+export type TableMetadataContextType = Pick<TableContextType, 'tableElement' | 'columnCount' | 'rowCount' | 'portalContainerRef' | 'isReachMaximumColumns' | 'isReachMaximumRows' | 'isReachMinimumNormalColumns' | 'isReachMinimumBodyRows' | 'pinnedColumns' | 'pinnedRows' | 'cellPositions' | 'isColumnPinned' | 'isRowPinned'>;
+export declare const TableMetadataContext: import("react").Context<TableMetadataContextType | undefined>;

package/table/contexts/TableMetadataContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const TableMetadataContext = createContext(undefined);
+
+export { TableMetadataContext };

package/table/contexts/TableScrollContext.d.ts

@@ -0,0 +1,2 @@
+import { TableScrollContextType } from '../typings';
+export declare const TableScrollContext: import("react").Context<TableScrollContextType>;

package/table/contexts/TableScrollContext.js

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+const TableScrollContext = createContext({
+    scrollRef: { current: null },
+    scrollTop: 0,
+    scrollLeft: 0,
+});
+
+export { TableScrollContext };

package/table/contexts/TableStateContext.d.ts

@@ -0,0 +1,3 @@
+import { TableContextType } from '../typings';
+export type TableStateContextType = Pick<TableContextType, 'tableSelectedOn' | 'setTableSelectedOn' | 'tableHoveredOn' | 'setTableHoveredOn'>;
+export declare const TableStateContext: import("react").Context<TableStateContextType | undefined>;

package/table/contexts/TableStateContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const TableStateContext = createContext(undefined);
+
+export { TableStateContext };

package/table/createReactTable.d.ts

@@ -0,0 +1,4 @@
+import { CreateTableOptions } from '@quadrats/common/table';
+import { ReactTable } from './typings';
+export type CreateReactTableOptions = CreateTableOptions;
+export declare function createReactTable(options?: CreateReactTableOptions): ReactTable;