@quadrats/react 1.1.6 → 1.1.8

package/table/components/TableMain.js

@@ -1,233 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

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

package/table/contexts/TableDragContext.d.ts

@@ -1,26 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

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

package/table/contexts/TableHeaderContext.js

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

package/table/contexts/TableMetadataContext.d.ts

@@ -1,3 +0,0 @@
-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

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

package/table/contexts/TableScrollContext.d.ts

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

package/table/contexts/TableScrollContext.js

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

package/table/contexts/TableStateContext.d.ts

@@ -1,3 +0,0 @@
-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

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

package/table/createReactTable.d.ts

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