@quadrats/react 1.1.7 → 1.1.8

package/table/hooks/useTableCellToolbarActions.js

@@ -1,540 +0,0 @@
-import React, { useMemo } from 'react';
-import { UnorderedList, OrderedList, Paragraph, AddRowAtBottom, AddRowAtTop, AddColumnAtLeft, AddColumnAtRight, Unpinned, Pinned, TableRemoveTitle, TableSetColumnTitle, TableSetRowTitle, AlignLeft, AlignCenter, AlignRight, TableMoveDown, TableMoveUp, TableMoveRight, TableMoveLeft, Trash } from '@quadrats/icons';
-import { Element, PARAGRAPH_TYPE } from '@quadrats/core';
-import { LIST_TYPES } from '@quadrats/common/list';
-import { useTableActionsContext } from './useTableActionsContext.js';
-import { useTableMetadata } from './useTableMetadata.js';
-import { useTableStateContext } from './useTableStateContext.js';
-import { ToolbarGroupIcon, ToolbarIcon } from '@quadrats/react/toolbar';
-import { useTableCellAlign, useTableCellAlignStatus } from './useTableCell.js';
-import { useSlateStatic } from 'slate-react';
-
-/**
- * 將所有與 toolbar icons 相關的邏輯集中管理
- */
-function useTableCellToolbarActions({ element, cellPosition, isHeader, transformCellContent, }) {
-    const editor = useSlateStatic();
-    const { tableSelectedOn, setTableSelectedOn } = useTableStateContext();
-    const { tableElement, columnCount, rowCount, isReachMaximumColumns, isReachMinimumNormalColumns, isReachMinimumBodyRows, isColumnPinned, isRowPinned, } = useTableMetadata();
-    const setAlign = useTableCellAlign(tableElement, editor);
-    const getAlign = useTableCellAlignStatus(tableElement, editor);
-    const { deleteRow, deleteColumn, addRow, addColumn, moveRowToBody, moveRowToHeader, unsetColumnAsTitle, setColumnAsTitle, pinColumn, unpinColumn, pinRow, unpinRow, moveOrSwapRow, moveOrSwapColumn, } = useTableActionsContext();
-    // 獲取當前 cell 內容的類型（用於顯示對應的 icon）
-    const getCurrentContentType = useMemo(() => {
-        // 檢查 cell 的第一個 child 的類型
-        if (element.children && element.children.length > 0) {
-            const firstChild = element.children[0];
-            if (Element.isElement(firstChild)) {
-                const childType = firstChild.type;
-                // 檢查是否為 list 類型
-                if (childType === LIST_TYPES.ul) {
-                    return LIST_TYPES.ul;
-                }
-                if (childType === LIST_TYPES.ol) {
-                    return LIST_TYPES.ol;
-                }
-                // 檢查是否為 paragraph（預設）
-                if (childType === PARAGRAPH_TYPE) {
-                    return PARAGRAPH_TYPE;
-                }
-            }
-        }
-        // 預設返回 paragraph
-        return PARAGRAPH_TYPE;
-    }, [element.children]);
-    // 根據當前內容類型選擇對應的 icon
-    const getCurrentIcon = useMemo(() => {
-        if (getCurrentContentType === LIST_TYPES.ul) {
-            return UnorderedList;
-        }
-        if (getCurrentContentType === LIST_TYPES.ol) {
-            return OrderedList;
-        }
-        return Paragraph;
-    }, [getCurrentContentType]);
-    // Focus toolbar - 當 cell 被 focus 時顯示的工具列
-    const focusToolbarIconGroups = useMemo(() => {
-        return [
-            {
-                icons: [
-                    React.createElement(ToolbarGroupIcon, { key: "typography-change", icon: getCurrentIcon },
-                        React.createElement(ToolbarIcon, { icon: Paragraph, onClick: () => {
-                                transformCellContent(PARAGRAPH_TYPE);
-                            } }),
-                        React.createElement(ToolbarIcon, { icon: UnorderedList, onClick: () => {
-                                transformCellContent(LIST_TYPES.ul);
-                            } }),
-                        React.createElement(ToolbarIcon, { icon: OrderedList, onClick: () => {
-                                transformCellContent(LIST_TYPES.ol);
-                            } })),
-                ],
-            },
-            {
-                icons: [
-                    {
-                        icon: AddRowAtBottom,
-                        onClick: () => {
-                            addRow({ position: 'bottom', rowIndex: cellPosition.rowIndex });
-                        },
-                    },
-                    {
-                        icon: AddRowAtTop,
-                        onClick: () => {
-                            addRow({ position: 'top', rowIndex: cellPosition.rowIndex });
-                        },
-                    },
-                    isReachMaximumColumns
-                        ? undefined
-                        : {
-                            icon: AddColumnAtLeft,
-                            onClick: () => {
-                                addColumn({
-                                    position: 'left',
-                                    columnIndex: cellPosition.columnIndex,
-                                });
-                            },
-                        },
-                    isReachMaximumColumns
-                        ? undefined
-                        : {
-                            icon: AddColumnAtRight,
-                            onClick: () => {
-                                addColumn({
-                                    position: 'right',
-                                    columnIndex: cellPosition.columnIndex,
-                                });
-                            },
-                        },
-                ].filter((i) => i !== undefined),
-            },
-        ];
-    }, [transformCellContent, addRow, addColumn, cellPosition, isReachMaximumColumns, getCurrentIcon]);
-    // Row actions
-    const rowActions = useMemo(() => {
-        if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) !== 'row' || typeof tableSelectedOn.index !== 'number') {
-            return null;
-        }
-        const removeTitleAction = {
-            icon: TableRemoveTitle,
-            onClick: () => {
-                if (typeof tableSelectedOn.index === 'number') {
-                    moveRowToBody(tableSelectedOn.index);
-                    setTableSelectedOn(undefined);
-                }
-            },
-        };
-        const setColumnTitleAction = isReachMinimumBodyRows
-            ? undefined
-            : {
-                icon: TableSetColumnTitle,
-                onClick: () => {
-                    if (typeof tableSelectedOn.index === 'number') {
-                        moveRowToHeader(tableSelectedOn.index);
-                        setTableSelectedOn(undefined);
-                    }
-                },
-            };
-        const unpinnedAction = {
-            icon: Unpinned,
-            onClick: () => {
-                if (typeof tableSelectedOn.index === 'number') {
-                    unpinRow();
-                    setTableSelectedOn(undefined);
-                }
-            },
-        };
-        const pinnedAction = isReachMinimumBodyRows && !isHeader
-            ? undefined
-            : {
-                icon: Pinned,
-                onClick: () => {
-                    if (typeof tableSelectedOn.index === 'number') {
-                        pinRow(tableSelectedOn.index);
-                        setTableSelectedOn(undefined);
-                    }
-                },
-            };
-        const actions = [];
-        const rowIsPinned = isRowPinned(tableSelectedOn.index);
-        if (rowIsPinned) {
-            actions.push(unpinnedAction);
-        }
-        else {
-            if (pinnedAction)
-                actions.push(pinnedAction);
-        }
-        if (isHeader) {
-            actions.push(removeTitleAction);
-        }
-        else {
-            if (setColumnTitleAction)
-                actions.push(setColumnTitleAction);
-        }
-        return actions;
-    }, [
-        tableSelectedOn,
-        moveRowToBody,
-        moveRowToHeader,
-        unpinRow,
-        pinRow,
-        setTableSelectedOn,
-        isReachMinimumBodyRows,
-        isHeader,
-        isRowPinned,
-    ]);
-    // Column actions
-    const columnActions = useMemo(() => {
-        if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) !== 'column' || typeof tableSelectedOn.index !== 'number') {
-            return null;
-        }
-        const removeTitleAction = {
-            icon: TableRemoveTitle,
-            onClick: () => {
-                if (typeof tableSelectedOn.index === 'number') {
-                    unsetColumnAsTitle(tableSelectedOn.index);
-                    setTableSelectedOn(undefined);
-                }
-            },
-        };
-        const setRowTitleAction = isReachMinimumNormalColumns
-            ? undefined
-            : {
-                icon: TableSetRowTitle,
-                onClick: () => {
-                    if (typeof tableSelectedOn.index === 'number') {
-                        setColumnAsTitle(tableSelectedOn.index);
-                        setTableSelectedOn(undefined);
-                    }
-                },
-            };
-        const unpinnedAction = {
-            icon: Unpinned,
-            onClick: () => {
-                if (typeof tableSelectedOn.index === 'number') {
-                    unpinColumn();
-                    setTableSelectedOn(undefined);
-                }
-            },
-        };
-        const pinnedAction = isReachMinimumNormalColumns && !element.treatAsTitle
-            ? undefined
-            : {
-                icon: Pinned,
-                onClick: () => {
-                    if (typeof tableSelectedOn.index === 'number') {
-                        pinColumn(tableSelectedOn.index);
-                        setTableSelectedOn(undefined);
-                    }
-                },
-            };
-        const actions = [];
-        const columnIsPinned = isColumnPinned(tableSelectedOn.index);
-        if (columnIsPinned) {
-            actions.push(unpinnedAction);
-        }
-        else {
-            if (pinnedAction)
-                actions.push(pinnedAction);
-        }
-        if (element.treatAsTitle) {
-            actions.push(removeTitleAction);
-        }
-        else {
-            if (setRowTitleAction)
-                actions.push(setRowTitleAction);
-        }
-        return actions;
-    }, [
-        tableSelectedOn,
-        unsetColumnAsTitle,
-        setColumnAsTitle,
-        unpinColumn,
-        pinColumn,
-        setTableSelectedOn,
-        isReachMinimumNormalColumns,
-        element.treatAsTitle,
-        isColumnPinned,
-    ]);
-    // Column align actions
-    const columnAlignActions = useMemo(() => {
-        if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) !== 'column' || typeof tableSelectedOn.index !== 'number') {
-            return null;
-        }
-        // 獲取當前 column 的 align 狀態
-        const currentAlign = getAlign('column', tableSelectedOn.index);
-        // 根據當前 align 狀態選擇對應的 icon
-        const getCurrentAlignIcon = () => {
-            switch (currentAlign) {
-                case 'left':
-                    return AlignLeft;
-                case 'center':
-                    return AlignCenter;
-                case 'right':
-                    return AlignRight;
-                default:
-                    return AlignLeft;
-            }
-        };
-        return [
-            React.createElement(ToolbarGroupIcon, { key: "align-change", icon: getCurrentAlignIcon() },
-                React.createElement(ToolbarIcon, { icon: AlignLeft, onClick: () => {
-                        if (typeof tableSelectedOn.index === 'number') {
-                            setAlign('left', 'column', tableSelectedOn.index);
-                            setTableSelectedOn(undefined);
-                        }
-                    } }),
-                React.createElement(ToolbarIcon, { icon: AlignCenter, onClick: () => {
-                        if (typeof tableSelectedOn.index === 'number') {
-                            setAlign('center', 'column', tableSelectedOn.index);
-                            setTableSelectedOn(undefined);
-                        }
-                    } }),
-                React.createElement(ToolbarIcon, { icon: AlignRight, onClick: () => {
-                        if (typeof tableSelectedOn.index === 'number') {
-                            setAlign('right', 'column', tableSelectedOn.index);
-                            setTableSelectedOn(undefined);
-                        }
-                    } })),
-        ];
-    }, [tableSelectedOn, setAlign, setTableSelectedOn, getAlign]);
-    // Row add actions
-    const rowAddActions = useMemo(() => {
-        if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) !== 'row' || typeof tableSelectedOn.index !== 'number') {
-            return null;
-        }
-        return [
-            {
-                icon: AddRowAtBottom,
-                onClick: () => {
-                    if (typeof tableSelectedOn.index === 'number') {
-                        addRow({ position: 'bottom', rowIndex: tableSelectedOn.index });
-                        setTableSelectedOn(undefined);
-                    }
-                },
-            },
-            {
-                icon: AddRowAtTop,
-                onClick: () => {
-                    if (typeof tableSelectedOn.index === 'number') {
-                        addRow({ position: 'top', rowIndex: tableSelectedOn.index });
-                        setTableSelectedOn(undefined);
-                    }
-                },
-            },
-        ];
-    }, [tableSelectedOn, addRow, setTableSelectedOn]);
-    // Column add actions
-    const columnAddActions = useMemo(() => {
-        if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) !== 'column' || typeof tableSelectedOn.index !== 'number') {
-            return null;
-        }
-        return [
-            isReachMaximumColumns
-                ? undefined
-                : {
-                    icon: AddColumnAtLeft,
-                    onClick: () => {
-                        if (typeof tableSelectedOn.index === 'number') {
-                            addColumn({
-                                position: 'left',
-                                columnIndex: tableSelectedOn.index,
-                            });
-                            setTableSelectedOn(undefined);
-                        }
-                    },
-                },
-            isReachMaximumColumns
-                ? undefined
-                : {
-                    icon: AddColumnAtRight,
-                    onClick: () => {
-                        if (typeof tableSelectedOn.index === 'number') {
-                            addColumn({
-                                position: 'right',
-                                columnIndex: tableSelectedOn.index,
-                            });
-                            setTableSelectedOn(undefined);
-                        }
-                    },
-                },
-        ].filter((i) => i !== undefined);
-    }, [tableSelectedOn, addColumn, setTableSelectedOn, isReachMaximumColumns]);
-    // Row move actions
-    const rowMoveActions = useMemo(() => {
-        if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) !== 'row' || typeof tableSelectedOn.index !== 'number') {
-            return null;
-        }
-        const rowIndex = tableSelectedOn.index;
-        // 從 tableElement 獲取 header 和 body 的資訊
-        const tableMainElement = tableElement.children.find((child) => Element.isElement(child) && child.type.includes('table_main'));
-        if (!tableMainElement || !Element.isElement(tableMainElement)) {
-            return null;
-        }
-        const tableHeaderElement = tableMainElement.children.find((child) => Element.isElement(child) && child.type.includes('table_header'));
-        const headerRowCount = tableHeaderElement && Element.isElement(tableHeaderElement) ? tableHeaderElement.children.length : 0;
-        // 判斷當前列是在 header 還是 body 中
-        const currentInHeader = rowIndex < headerRowCount;
-        // 判斷上方和下方是否可以互換
-        const canMoveUp = rowIndex > 0; // 不在第一列
-        const canMoveDown = rowIndex < rowCount - 1; // 不在最後一列
-        // 檢查目標位置是否在相同的容器中（header 或 body）
-        const targetUpInHeader = rowIndex - 1 < headerRowCount;
-        const targetDownInHeader = rowIndex + 1 < headerRowCount;
-        // 標題列只能與標題列互換，一般列只能與一般列互換
-        const canSwapUp = canMoveUp && currentInHeader === targetUpInHeader;
-        const canSwapDown = canMoveDown && currentInHeader === targetDownInHeader;
-        return [
-            canSwapDown
-                ? {
-                    icon: TableMoveDown,
-                    onClick: () => {
-                        if (typeof tableSelectedOn.index === 'number') {
-                            moveOrSwapRow(tableSelectedOn.index, tableSelectedOn.index + 1, 'swap');
-                            setTableSelectedOn(undefined);
-                        }
-                    },
-                }
-                : undefined,
-            canSwapUp
-                ? {
-                    icon: TableMoveUp,
-                    onClick: () => {
-                        if (typeof tableSelectedOn.index === 'number') {
-                            moveOrSwapRow(tableSelectedOn.index, tableSelectedOn.index - 1, 'swap');
-                            setTableSelectedOn(undefined);
-                        }
-                    },
-                }
-                : undefined,
-        ].filter((i) => i !== undefined);
-    }, [tableSelectedOn, setTableSelectedOn, rowCount, tableElement, moveOrSwapRow]);
-    // Column move actions
-    const columnMoveActions = useMemo(() => {
-        if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) !== 'column' || typeof tableSelectedOn.index !== 'number') {
-            return null;
-        }
-        const columnIndex = tableSelectedOn.index;
-        // 檢查當前行是否為標題行
-        const currentIsTitle = !!element.treatAsTitle;
-        // 判斷左右是否可以移動
-        const canMoveLeft = columnIndex > 0;
-        const canMoveRight = columnIndex < columnCount - 1;
-        // 檢查相鄰行是否為相同類型（都是標題行或都不是標題行）
-        const checkAdjacentColumnType = (adjacentIndex) => {
-            // 從 tableElement 中獲取相鄰行的 treatAsTitle 狀態
-            const tableMainElement = tableElement.children.find((child) => Element.isElement(child) && child.type.includes('table_main'));
-            if (!tableMainElement || !Element.isElement(tableMainElement)) {
-                return false;
-            }
-            const tableBodyElement = tableMainElement.children.find((child) => Element.isElement(child) && child.type.includes('table_body'));
-            if (!tableBodyElement || !Element.isElement(tableBodyElement)) {
-                return false;
-            }
-            // 從 body 的第一列獲取相鄰 cell 的 treatAsTitle 屬性
-            const firstRow = tableBodyElement.children[0];
-            if (!Element.isElement(firstRow)) {
-                return false;
-            }
-            const adjacentCell = firstRow.children[adjacentIndex];
-            if (!Element.isElement(adjacentCell)) {
-                return false;
-            }
-            return !!adjacentCell.treatAsTitle;
-        };
-        // 標題行只能與標題行互換，一般行只能與一般行互換
-        const canSwapLeft = canMoveLeft && currentIsTitle === checkAdjacentColumnType(columnIndex - 1);
-        const canSwapRight = canMoveRight && currentIsTitle === checkAdjacentColumnType(columnIndex + 1);
-        return [
-            canSwapRight
-                ? {
-                    icon: TableMoveRight,
-                    onClick: () => {
-                        if (typeof tableSelectedOn.index === 'number') {
-                            moveOrSwapColumn(tableSelectedOn.index, tableSelectedOn.index + 1, 'swap');
-                            setTableSelectedOn(undefined);
-                        }
-                    },
-                }
-                : undefined,
-            canSwapLeft
-                ? {
-                    icon: TableMoveLeft,
-                    onClick: () => {
-                        if (typeof tableSelectedOn.index === 'number') {
-                            moveOrSwapColumn(tableSelectedOn.index, tableSelectedOn.index - 1, 'swap');
-                            setTableSelectedOn(undefined);
-                        }
-                    },
-                }
-                : undefined,
-        ].filter((i) => i !== undefined);
-    }, [tableSelectedOn, setTableSelectedOn, columnCount, element.treatAsTitle, tableElement, moveOrSwapColumn]);
-    // Delete actions
-    const deleteActions = useMemo(() => {
-        // 當選中 row 時，檢查是否為最後一行
-        if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'row' && typeof tableSelectedOn.index === 'number') {
-            // 如果只剩一行，不顯示刪除按鈕
-            if (isReachMinimumBodyRows && !isHeader) {
-                return [];
-            }
-        }
-        // 當選中 column 時，檢查是否為最後一列
-        if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'column' && typeof tableSelectedOn.index === 'number') {
-            // 如果只剩一列（考慮 title columns），不顯示刪除按鈕
-            if (columnCount <= 1) {
-                return [];
-            }
-        }
-        return [
-            {
-                icon: Trash,
-                className: 'qdr-table__delete',
-                onClick: () => {
-                    if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'row' && typeof tableSelectedOn.index === 'number') {
-                        deleteRow(tableSelectedOn.index);
-                        setTableSelectedOn(undefined);
-                    }
-                    else if ((tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'column' && typeof tableSelectedOn.index === 'number') {
-                        deleteColumn(tableSelectedOn.index);
-                        setTableSelectedOn(undefined);
-                    }
-                },
-            },
-        ];
-    }, [tableSelectedOn, deleteRow, deleteColumn, setTableSelectedOn, isReachMinimumBodyRows, isHeader, columnCount]);
-    // Inline toolbar icon groups - 當選中行/列時顯示的完整工具列
-    const inlineToolbarIconGroups = useMemo(() => {
-        return [
-            {
-                icons: rowActions || columnActions || [],
-            },
-            {
-                icons: columnAlignActions || [],
-            },
-            {
-                icons: rowAddActions || columnAddActions || [],
-            },
-            {
-                icons: rowMoveActions || columnMoveActions || [],
-            },
-            {
-                icons: deleteActions,
-            },
-        ];
-    }, [
-        rowActions,
-        columnActions,
-        columnAlignActions,
-        rowAddActions,
-        columnAddActions,
-        rowMoveActions,
-        columnMoveActions,
-        deleteActions,
-    ]);
-    return {
-        focusToolbarIconGroups,
-        inlineToolbarIconGroups,
-    };
-}
-
-export { useTableCellToolbarActions };

package/table/hooks/useTableMetadata.d.ts

@@ -1 +0,0 @@
-export declare function useTableMetadata(): import("../contexts/TableMetadataContext").TableMetadataContextType;

package/table/hooks/useTableMetadata.js

@@ -1,12 +0,0 @@
-import { useContext } from 'react';
-import { TableMetadataContext } from '../contexts/TableMetadataContext.js';
-
-function useTableMetadata() {
-    const context = useContext(TableMetadataContext);
-    if (!context) {
-        throw new Error('useTableMetadata must be used within a TableMetadataContext.Provider');
-    }
-    return context;
-}
-
-export { useTableMetadata };

package/table/hooks/useTableStateContext.d.ts

@@ -1 +0,0 @@
-export declare function useTableStateContext(): import("../contexts/TableStateContext").TableStateContextType;

package/table/hooks/useTableStateContext.js

@@ -1,12 +0,0 @@
-import { useContext } from 'react';
-import { TableStateContext } from '../contexts/TableStateContext.js';
-
-function useTableStateContext() {
-    const context = useContext(TableStateContext);
-    if (!context) {
-        throw new Error('useTableState must be used within a TableStateContext.Provider');
-    }
-    return context;
-}
-
-export { useTableStateContext };

package/table/hooks/useTableStates.d.ts

@@ -1,18 +0,0 @@
-export declare function useTableStates(): {
-    tableSelectedOn: {
-        region: "table" | "header" | "row" | "column";
-        index?: number;
-    } | undefined;
-    setTableSelectedOn: import("react").Dispatch<import("react").SetStateAction<{
-        region: "table" | "header" | "row" | "column";
-        index?: number;
-    } | undefined>>;
-    tableHoveredOn: {
-        columnIndex: number;
-        rowIndex: number;
-    } | undefined;
-    setTableHoveredOn: import("react").Dispatch<import("react").SetStateAction<{
-        columnIndex: number;
-        rowIndex: number;
-    } | undefined>>;
-};

package/table/hooks/useTableStates.js

@@ -1,14 +0,0 @@
-import { useState } from 'react';
-
-function useTableStates() {
-    const [tableSelectedOn, setTableSelectedOn] = useState();
-    const [tableHoveredOn, setTableHoveredOn] = useState();
-    return {
-        tableSelectedOn,
-        setTableSelectedOn,
-        tableHoveredOn,
-        setTableHoveredOn,
-    };
-}
-
-export { useTableStates };