@quadrats/react 1.0.0 → 1.1.0

package/table/components/TableCell.js

@@ -0,0 +1,191 @@
+import React, { useContext, useMemo, useRef, useState, useEffect } from 'react';
+import clsx from 'clsx';
+import { Transforms } from '@quadrats/core';
+import { useSlateStatic } from 'slate-react';
+import { TableHeaderContext } from '../contexts/TableHeaderContext.js';
+import { Portal, Icon } from '@quadrats/react/components';
+import { Drag } from '@quadrats/icons';
+import { useTableMetadata } from '../hooks/useTableMetadata.js';
+import { useTableStateContext } from '../hooks/useTableStateContext.js';
+import { InlineToolbar } from '@quadrats/react/toolbar';
+import { useTableCellFocused, useTableCellPosition, useTableCellTransformContent } from '../hooks/useTableCell.js';
+import { useTableCellToolbarActions } from '../hooks/useTableCellToolbarActions.js';
+import { TableScrollContext } from '../contexts/TableScrollContext.js';
+import { useColumnResize } from '../hooks/useColumnResize.js';
+
+function TableCell(props) {
+    var _a;
+    const { attributes, children, element } = props;
+    const { tableSelectedOn, setTableSelectedOn, tableHoveredOn, setTableHoveredOn } = useTableStateContext();
+    const { columnCount, rowCount, portalContainerRef, isColumnPinned, tableElement } = useTableMetadata();
+    // 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);
+    const transformCellContent = useTableCellTransformContent(element, editor);
+    // Toolbar actions
+    const { focusToolbarIconGroups, inlineToolbarIconGroups } = useTableCellToolbarActions({
+        element,
+        cellPosition,
+        isHeader,
+        transformCellContent,
+    });
+    const isSelectedInSameRow = (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'row' && (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.index) === cellPosition.rowIndex;
+    const isSelectedInSameColumn = (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'column' && (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.index) === cellPosition.columnIndex;
+    const isSelectionTriggerByMe = (isSelectedInSameRow && cellPosition.columnIndex === 0) || (isSelectedInSameColumn && cellPosition.rowIndex === 0);
+    const showRowActionButton = useMemo(() => cellPosition.rowIndex === 0 &&
+        (isSelectedInSameColumn || ((tableHoveredOn === null || tableHoveredOn === void 0 ? void 0 : tableHoveredOn.columnIndex) === cellPosition.columnIndex && !tableSelectedOn)), [cellPosition, isSelectedInSameColumn, tableHoveredOn, tableSelectedOn]);
+    const showColumnActionButton = useMemo(() => cellPosition.columnIndex === 0 &&
+        (isSelectedInSameRow || ((tableHoveredOn === null || tableHoveredOn === void 0 ? void 0 : tableHoveredOn.rowIndex) === cellPosition.rowIndex && !tableSelectedOn)), [cellPosition, isSelectedInSameRow, tableHoveredOn, tableSelectedOn]);
+    // 用於定位 InlineToolbar 的 ref
+    const cellRef = useRef(null);
+    const [toolbarPosition, setToolbarPosition] = useState(null);
+    const [rowButtonPosition, setRowButtonPosition] = useState(null);
+    const [columnButtonPosition, setColumnButtonPosition] = useState(null);
+    const [cellStuckAtLeft, setCellStuckAtLeft] = useState(undefined);
+    // 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 (React.createElement(TagName, Object.assign({}, 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),
+            'qdr-table__cell--right-active': isSelectedInSameColumn || (isSelectedInSameRow && cellPosition.columnIndex === columnCount - 1),
+            'qdr-table__cell--bottom-active': isSelectedInSameRow || (isSelectedInSameColumn && cellPosition.rowIndex === rowCount - 1),
+            'qdr-table__cell--left-active': isSelectedInSameColumn || (isSelectedInSameRow && cellPosition.columnIndex === 0),
+            'qdr-table__cell--is-selection-trigger-by-me': isSelectionTriggerByMe,
+        }), style: myColumnIsPinned
+            ? {
+                left: cellStuckAtLeft,
+            }
+            : undefined }),
+        children,
+        React.createElement("div", { contentEditable: false, "data-slate-editor": false, className: clsx('qdr-table__cell__resize-handle', {
+                'qdr-table__cell__resize-handle--active': isResizing,
+            }), onMouseDown: handleResizeStart }),
+        focused && (React.createElement(Portal, { getContainer: () => portalContainerRef.current || document.body },
+            React.createElement(InlineToolbar, { className: 'qdr-table__cell__focus-toolbar', style: {
+                    top: toolbarPosition === null || toolbarPosition === void 0 ? void 0 : toolbarPosition.top,
+                    left: toolbarPosition === null || toolbarPosition === void 0 ? void 0 : toolbarPosition.left,
+                }, iconGroups: focusToolbarIconGroups }))),
+        showColumnActionButton && (React.createElement(Portal, { getContainer: () => portalContainerRef.current || document.body },
+            React.createElement("button", { type: "button", contentEditable: false, style: {
+                    top: rowButtonPosition === null || rowButtonPosition === void 0 ? void 0 : rowButtonPosition.top,
+                    left: rowButtonPosition === null || rowButtonPosition === void 0 ? void 0 : rowButtonPosition.left,
+                }, onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    // Clear focus by removing selection
+                    Transforms.deselect(editor);
+                    setTableSelectedOn((prev) => {
+                        if ((prev === null || prev === void 0 ? void 0 : prev.region) === 'row' && prev.index === cellPosition.rowIndex) {
+                            return undefined;
+                        }
+                        return { region: 'row', index: cellPosition.rowIndex };
+                    });
+                }, className: "qdr-table__cell-row-action" },
+                React.createElement(Icon, { icon: Drag, width: 20, height: 20 })))),
+        showRowActionButton && (React.createElement(Portal, { getContainer: () => portalContainerRef.current || document.body },
+            React.createElement("button", { type: "button", contentEditable: false, style: {
+                    // pinned 時因為 sticky 所以要扣掉 scrollTop
+                    top: ((_a = columnButtonPosition === null || columnButtonPosition === void 0 ? void 0 : columnButtonPosition.top) !== null && _a !== void 0 ? _a : 0) - (element.pinned ? scrollTop : 0),
+                    left: columnButtonPosition === null || columnButtonPosition === void 0 ? void 0 : columnButtonPosition.left,
+                }, onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    // Clear focus by removing selection
+                    Transforms.deselect(editor);
+                    setTableSelectedOn((prev) => {
+                        if ((prev === null || prev === void 0 ? void 0 : prev.region) === 'column' && prev.index === cellPosition.columnIndex) {
+                            return undefined;
+                        }
+                        return { region: 'column', index: cellPosition.columnIndex };
+                    });
+                }, className: "qdr-table__cell-column-action" },
+                React.createElement(Icon, { icon: Drag, width: 20, height: 20 })))),
+        isSelectionTriggerByMe && (cellPosition.columnIndex === 0 || cellPosition.rowIndex === 0) ? (React.createElement(Portal, { getContainer: () => portalContainerRef.current || document.body },
+            React.createElement(InlineToolbar, { className: "qdr-table__cell__inline-table-toolbar", style: {
+                    top: toolbarPosition === null || toolbarPosition === void 0 ? void 0 : toolbarPosition.top,
+                    left: toolbarPosition === null || toolbarPosition === void 0 ? void 0 : toolbarPosition.left,
+                }, iconGroups: inlineToolbarIconGroups, onClickAway: () => {
+                    setTableSelectedOn(undefined);
+                } }))) : null));
+}
+
+export { TableCell as default };

package/table/components/TableHeader.d.ts

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

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,225 @@
+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 { Copy, Trash, AlignLeft, AlignCenter, AlignRight, Plus } from '@quadrats/icons';
+import { useTableActionsContext } from '../hooks/useTableActionsContext.js';
+import { useTableMetadata } from '../hooks/useTableMetadata.js';
+import { useTableStateContext } from '../hooks/useTableStateContext.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';
+
+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();
+    // 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;
+            }
+            // 使用 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]);
+    // 只在 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 = () => {
+        switch (currentTableAlign) {
+            case 'left':
+                return AlignLeft;
+            case 'center':
+                return AlignCenter;
+            case 'right':
+                return AlignRight;
+            default:
+                return AlignLeft;
+        }
+    };
+    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("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'>;
+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/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;