@quadrats/react 1.1.6 → 1.1.8

package/table/jsx-serializer/src/components/Table.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
+
+export const TableJsxSerializeElement = ({ children }: JsxSerializeElementProps) => {
+  return <div className="qdr-table">{children}</div>;
+};

package/table/jsx-serializer/src/components/TableBody.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
+
+export const TableBodyJsxSerializeElement = ({ children }: JsxSerializeElementProps) => {
+  return <tbody className="qdr-table__body">{children}</tbody>;
+};

package/table/jsx-serializer/src/components/TableCell.tsx

@@ -0,0 +1,51 @@
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { TableHeaderContext } from '../contexts/TableHeaderContext';
+import { JsxSerializeTableElementProps } from '../typings';
+import { TableScrollContext } from '../contexts/TableScrollContext';
+
+export const TableCellJsxSerializeElement = ({
+  children,
+  element,
+  isColumnPinned,
+}: JsxSerializeTableElementProps & { isColumnPinned?: boolean }) => {
+  const isHeader = useContext(TableHeaderContext);
+  // calculate the left position of the cell when it is stuck
+  const cellRef = useRef<HTMLTableCellElement>(null);
+  const { scrollRef } = useContext(TableScrollContext);
+  const [cellStuckAtLeft, setCellStuckAtLeft] = useState<number>(0);
+
+  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 CellTag = isHeader ? 'th' : 'td';
+  const shouldPinned = element.pinned && isColumnPinned && element.treatAsTitle;
+
+  return (
+    <CellTag
+      ref={cellRef}
+      className={clsx('qdr-table__cell', {
+        'qdr-table__cell--header': isHeader || element.treatAsTitle,
+        'qdr-table__cell--pinned': shouldPinned,
+      })}
+      style={
+        shouldPinned
+          ? {
+              left: cellStuckAtLeft,
+            }
+          : undefined
+      }
+    >
+      {children}
+    </CellTag>
+  );
+};

package/table/jsx-serializer/src/components/TableHeader.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
+import { TableHeaderContext } from '../contexts/TableHeaderContext';
+import { QuadratsElement } from '@quadrats/core';
+
+export const TableHeaderJsxSerializeElement = ({ children, element }: JsxSerializeElementProps) => {
+  const hasAnyRowPinned = element.children.some((child) =>
+    (child as QuadratsElement).children.every((cell) => (cell as QuadratsElement & { pinned: boolean }).pinned),
+  );
+
+  return (
+    <TableHeaderContext.Provider value={true}>
+      <thead className={`qdr-table__header ${hasAnyRowPinned ? 'qdr-table__header--pinned' : ''}`}>{children}</thead>
+    </TableHeaderContext.Provider>
+  );
+};

package/table/jsx-serializer/src/components/TableMain.tsx

@@ -0,0 +1,36 @@
+import React, { useMemo, useRef } from 'react';
+import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
+import { TableScrollContext } from '../contexts/TableScrollContext';
+import { calculateTableMinWidth, ColumnWidth, columnWidthToCSS } from '@quadrats/common/table';
+
+export const TableMainJsxSerializeElement = ({
+  children,
+  columnWidths,
+}: JsxSerializeElementProps & { columnWidths?: ColumnWidth[] }) => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const scrollContextValue = useMemo(() => ({ scrollRef }), [scrollRef]);
+
+  const tableMinWidth = useMemo(() => (columnWidths ? calculateTableMinWidth(columnWidths) : '100%'), [columnWidths]);
+
+  return (
+    <div ref={scrollRef} className="qdr-table__scrollContainer">
+      <TableScrollContext.Provider value={scrollContextValue}>
+        <table
+          className="qdr-table__main"
+          style={{
+            minWidth: tableMinWidth,
+          }}
+        >
+          {columnWidths?.length ? (
+            <colgroup>
+              {columnWidths.map((width, index) => (
+                <col key={index} style={{ width: columnWidthToCSS(width), minWidth: columnWidthToCSS(width) }} />
+              ))}
+            </colgroup>
+          ) : null}
+          {children}
+        </table>
+      </TableScrollContext.Provider>
+    </div>
+  );
+};

package/table/jsx-serializer/src/components/TableRow.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
+
+export const TableRowJsxSerializeElement = ({ children }: JsxSerializeElementProps) => {
+  return <tr className="qdr-table__row">{children}</tr>;
+};

package/table/jsx-serializer/src/components/TableTitle.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
+
+export const TableTitleJsxSerializeElement = ({ children }: JsxSerializeElementProps) => {
+  return <span className="qdr-table__title">{children}</span>;
+};

package/table/jsx-serializer/src/contexts/TableHeaderContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const TableHeaderContext = createContext<boolean>(false);

package/table/jsx-serializer/src/contexts/TableScrollContext.ts

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+import { TableScrollContextType } from '../typings';
+
+export const TableScrollContext = createContext<TableScrollContextType>({
+  scrollRef: { current: null },
+});

package/table/jsx-serializer/src/createJsxSerializeTable.tsx

@@ -0,0 +1,163 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { getFirstAncestor, WithElementParent } from '@quadrats/core/serializers';
+import {
+  TableElement,
+  TableTypeKey,
+  TableTitleTypeKey,
+  TableMainTypeKey,
+  TableHeaderTypeKey,
+  TableBodyTypeKey,
+  TableRowTypeKey,
+  TableCellTypeKey,
+  TABLE_TYPES,
+  ColumnWidth,
+} from '@quadrats/common/table';
+import {
+  CreateJsxSerializeElementOptions,
+  createJsxSerializeElements,
+  JsxSerializeElementProps,
+} from '@quadrats/react/jsx-serializer';
+import { defaultRenderTableElements } from './defaultRenderTableElements';
+import { JsxSerializeTableElementProps } from './typings';
+import { Element, QuadratsElement } from '@quadrats/core';
+
+export type CreateJsxSerializeTableOptions = Partial<
+  Record<TableTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeTableElementProps>>> &
+    Record<TableTitleTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeElementProps>>> &
+    Record<TableMainTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeElementProps>>> &
+    Record<TableHeaderTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeElementProps>>> &
+    Record<TableBodyTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeElementProps>>> &
+    Record<TableRowTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeElementProps>>> &
+    Record<TableCellTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeElementProps>>>
+>;
+
+export function createJsxSerializeTable(options: CreateJsxSerializeTableOptions = {}) {
+  const {
+    table = {},
+    table_title = {},
+    table_main = {},
+    table_header = {},
+    table_body = {},
+    table_row = {},
+    table_cell = {},
+  } = options;
+
+  const tableType = table.type || TABLE_TYPES.table;
+  const tableTitleType = table_title.type || TABLE_TYPES.table_title;
+  const tableMainType = table_main.type || TABLE_TYPES.table_main;
+  const tableHeaderType = table_header.type || TABLE_TYPES.table_header;
+  const tableBodyType = table_body.type || TABLE_TYPES.table_body;
+  const tableRowType = table_row.type || TABLE_TYPES.table_row;
+  const tableCellType = table_cell.type || TABLE_TYPES.table_cell;
+
+  const renderTable = table.render || defaultRenderTableElements.table;
+  const renderTableTitle = table_title.render || defaultRenderTableElements.table_title;
+  const renderTableMain = table_main.render || defaultRenderTableElements.table_main;
+  const renderTableHeader = table_header.render || defaultRenderTableElements.table_header;
+  const renderTableBody = table_body.render || defaultRenderTableElements.table_body;
+  const renderTableRow = table_row.render || defaultRenderTableElements.table_row;
+  const renderTableCell = table_cell.render || defaultRenderTableElements.table_cell;
+
+  return createJsxSerializeElements([
+    {
+      type: tableType,
+      render: (props) => {
+        const { children } = props;
+        const element = props.element as TableElement & WithElementParent;
+
+        return renderTable({
+          children,
+          element,
+        });
+      },
+    },
+    {
+      type: tableTitleType,
+      render: (props) => {
+        const { children } = props;
+        const element = props.element as TableElement & WithElementParent;
+
+        return renderTableTitle({
+          children,
+          element,
+        });
+      },
+    },
+    {
+      type: tableMainType,
+      render: (props) => {
+        const { children } = props;
+        const element = props.element as TableElement & WithElementParent;
+        const firstAncestor = getFirstAncestor<TableElement>(
+          element,
+          (node) => (node as QuadratsElement).type === tableType,
+        );
+
+        const columnWidths = firstAncestor?.columnWidths || ([] as ColumnWidth[]);
+
+        return renderTableMain({
+          children,
+          element,
+          columnWidths,
+        });
+      },
+    },
+    {
+      type: tableHeaderType,
+      render: (props) => {
+        const { children } = props;
+        const element = props.element as TableElement & WithElementParent;
+
+        return renderTableHeader({
+          children,
+          element,
+        });
+      },
+    },
+    {
+      type: tableBodyType,
+      render: (props) => {
+        const { children } = props;
+        const element = props.element as TableElement & WithElementParent;
+
+        return renderTableBody({
+          children,
+          element,
+        });
+      },
+    },
+    {
+      type: tableRowType,
+      render: (props) => {
+        const { children } = props;
+        const element = props.element as TableElement & WithElementParent;
+
+        return renderTableRow({
+          children,
+          element,
+        });
+      },
+    },
+    {
+      type: tableCellType,
+      render: (props) => {
+        const { children } = props;
+        const element = props.element as TableElement & WithElementParent;
+        const firstAncestor = getFirstAncestor<TableElement>(
+          element,
+          (node) => (node as QuadratsElement).type === tableMainType,
+        );
+
+        const body = firstAncestor?.children.find((child) => child.type === tableBodyType);
+        const firstRow = body?.children[0];
+        const firstCell = Element.isElement(firstRow) ? firstRow.children[0] : null;
+
+        return renderTableCell({
+          children,
+          element,
+          isColumnPinned: Element.isElement(firstCell) ? firstCell.pinned : false,
+        });
+      },
+    },
+  ]);
+}

package/table/jsx-serializer/src/defaultRenderTableElements.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { TableJsxSerializeElements } from './typings';
+import { TableJsxSerializeElement } from './components/Table';
+import { TableTitleJsxSerializeElement } from './components/TableTitle';
+import { TableMainJsxSerializeElement } from './components/TableMain';
+import { TableHeaderJsxSerializeElement } from './components/TableHeader';
+import { TableBodyJsxSerializeElement } from './components/TableBody';
+import { TableRowJsxSerializeElement } from './components/TableRow';
+import { TableCellJsxSerializeElement } from './components/TableCell';
+
+export const defaultRenderTableElements: TableJsxSerializeElements = {
+  table: (props) => <TableJsxSerializeElement key={Math.random()} {...props} />,
+  table_title: (props) => <TableTitleJsxSerializeElement {...props} />,
+  table_main: (props) => <TableMainJsxSerializeElement {...props} />,
+  table_header: (props) => <TableHeaderJsxSerializeElement {...props} />,
+  table_body: (props) => <TableBodyJsxSerializeElement {...props} />,
+  table_row: (props) => <TableRowJsxSerializeElement {...props} />,
+  table_cell: (props) => <TableCellJsxSerializeElement {...props} />,
+};

package/table/jsx-serializer/src/typings.ts

@@ -0,0 +1,36 @@
+import {
+  TableElement,
+  TableTypeKey,
+  TableTitleTypeKey,
+  TableMainTypeKey,
+  TableHeaderTypeKey,
+  TableBodyTypeKey,
+  TableRowTypeKey,
+  TableCellTypeKey,
+  ColumnWidth,
+} from '@quadrats/common/table';
+import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
+import { RefObject } from 'react';
+
+export type JsxSerializeTableElementProps = JsxSerializeElementProps<TableElement>;
+
+export type TableJsxSerializeElements = Record<
+  TableTypeKey,
+  (props: JsxSerializeTableElementProps) => JSX.Element | null | undefined
+> &
+  Record<TableTitleTypeKey, (props: JsxSerializeTableElementProps) => JSX.Element | null | undefined> &
+  Record<
+    TableMainTypeKey,
+    (props: JsxSerializeTableElementProps & { columnWidths?: ColumnWidth[] }) => JSX.Element | null | undefined
+  > &
+  Record<TableHeaderTypeKey, (props: JsxSerializeTableElementProps) => JSX.Element | null | undefined> &
+  Record<TableBodyTypeKey, (props: JsxSerializeTableElementProps) => JSX.Element | null | undefined> &
+  Record<TableRowTypeKey, (props: JsxSerializeTableElementProps) => JSX.Element | null | undefined> &
+  Record<
+    TableCellTypeKey,
+    (props: JsxSerializeTableElementProps & { isColumnPinned?: boolean }) => JSX.Element | null | undefined
+  >;
+
+export type TableScrollContextType = {
+  scrollRef: RefObject<HTMLDivElement | null>;
+};

package/table/jsx-serializer/tsconfig.build.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../../../tsconfig.base.json",
+  "exclude": ["**/*.spec.*"],
+  "include": ["./src"]
+}

package/table/package.json

@@ -4,7 +4,16 @@
     "**/*.css",
     "**/*.scss"
   ],
-  "main": "./index.cjs.js",
-  "module": "./index.js",
-  "typings": "./index.d.ts"
+  "quadratsConfig": {
+    "deps": [
+      "__ROOT__",
+      "paragraph",
+      "heading",
+      "align",
+      "toolbar"
+    ],
+    "styles": {
+      "table": "table"
+    }
+  }
 }

package/table/src/components/ColumnDragButton.tsx

@@ -0,0 +1,72 @@
+import React, { useRef, useEffect } from 'react';
+import { useDrag } from 'react-dnd';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+import clsx from 'clsx';
+import { Icon } from '@quadrats/react/components';
+import { Drag } from '@quadrats/icons';
+import { useTableDragContext } from '../contexts/TableDragContext';
+
+interface ColumnDragButtonProps {
+  columnIndex: number;
+  style?: React.CSSProperties;
+  onClick: (e: React.MouseEvent) => void;
+  checkIsTitleColumn: (columnIndex: number) => boolean;
+}
+
+export const COLUMN_DRAG_TYPE = 'TABLE_COLUMN';
+
+export const ColumnDragButton: React.FC<ColumnDragButtonProps> = ({
+  columnIndex,
+  style,
+  onClick,
+  checkIsTitleColumn,
+}) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const { setDragState, setDropTargetIndex, setDragDirection } = useTableDragContext();
+  const isTitle = checkIsTitleColumn(columnIndex);
+
+  const [{ isDragging }, drag, preview] = useDrag(
+    () => ({
+      type: COLUMN_DRAG_TYPE,
+      item: () => {
+        const dragItem = { columnIndex, isTitle };
+
+        setDragState({ type: 'column', columnIndex, isTitle });
+
+        return dragItem;
+      },
+      collect: (monitor) => ({
+        isDragging: monitor.isDragging(),
+      }),
+      end: () => {
+        setDragState(null);
+        setDropTargetIndex(null);
+        setDragDirection(null);
+      },
+    }),
+    [columnIndex, isTitle, setDragState, setDropTargetIndex, setDragDirection],
+  );
+
+  // 使用空白圖片作為 drag preview，避免顯示預設的拖曳圖像
+  useEffect(() => {
+    preview(getEmptyImage(), { captureDraggingState: true });
+  }, [preview]);
+
+  drag(buttonRef);
+
+  return (
+    <button
+      ref={buttonRef}
+      type="button"
+      contentEditable={false}
+      style={style}
+      onClick={onClick}
+      title="點擊開啟選單，拖曳以移動"
+      className={clsx('qdr-table__cell-column-action', {
+        'qdr-table__cell-column-action--dragging': isDragging,
+      })}
+    >
+      <Icon icon={Drag} width={20} height={20} />
+    </button>
+  );
+};

package/table/src/components/RowDragButton.tsx

@@ -0,0 +1,69 @@
+import React, { useRef, useEffect } from 'react';
+import { useDrag } from 'react-dnd';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+import clsx from 'clsx';
+import { Icon } from '@quadrats/react/components';
+import { Drag } from '@quadrats/icons';
+import { useTableDragContext } from '../contexts/TableDragContext';
+
+interface RowDragButtonProps {
+  rowIndex: number;
+  headerRowCount: number;
+  style?: React.CSSProperties;
+  onClick: (e: React.MouseEvent) => void;
+}
+
+export const ROW_DRAG_TYPE = 'TABLE_ROW';
+
+export const RowDragButton: React.FC<RowDragButtonProps> = ({ rowIndex, headerRowCount, style, onClick }) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const { setDragState, setDropTargetIndex, setDragDirection } = useTableDragContext();
+
+  // 判斷當前 row 是否在 header 中
+  const isInHeader = rowIndex < headerRowCount;
+
+  const [{ isDragging }, drag, preview] = useDrag(
+    () => ({
+      type: ROW_DRAG_TYPE,
+      item: () => {
+        const dragItem = { rowIndex, isInHeader };
+
+        setDragState({ type: 'row', rowIndex, isInHeader });
+
+        return dragItem;
+      },
+      collect: (monitor) => ({
+        isDragging: monitor.isDragging(),
+      }),
+      end: () => {
+        setDragState(null);
+        setDropTargetIndex(null);
+        setDragDirection(null);
+      },
+    }),
+    [rowIndex, isInHeader, setDragState, setDropTargetIndex, setDragDirection],
+  );
+
+  // 使用空白圖片作為 drag preview，避免顯示預設的拖曳圖像
+  useEffect(() => {
+    preview(getEmptyImage(), { captureDraggingState: true });
+  }, [preview]);
+
+  drag(buttonRef);
+
+  return (
+    <button
+      ref={buttonRef}
+      type="button"
+      contentEditable={false}
+      style={style}
+      onClick={onClick}
+      title="點擊開啟選單，拖曳以移動"
+      className={clsx('qdr-table__cell-row-action', {
+        'qdr-table__cell-row-action--dragging': isDragging,
+      })}
+    >
+      <Icon icon={Drag} width={20} height={20} />
+    </button>
+  );
+};