@quadrats/react 1.0.0 → 1.1.1

package/table/table.scss

@@ -0,0 +1,428 @@
+$cell-action-z-index: 9;
+$toolbar-z-index: 10;
+
+@mixin add-btn {
+  position: absolute;
+  z-index: 0;
+  cursor: pointer;
+  padding: 0;
+  background-color: var(--qdr-block);
+  border-radius: var(--qdr-radius-1);
+  border: 1px solid var(--qdr-divider);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background-color: var(--qdr-bg);
+
+    .qdr-table__btn-icon {
+      color: var(--qdr-text-secondary);
+    }
+  }
+
+  &:active {
+    background-color: var(--qdr-divider);
+    border: 1px solid var(--qdr-border);
+
+    .qdr-table__btn-icon {
+      color: var(--qdr-text-secondary);
+    }
+  }
+}
+
+@mixin cell-action {
+  position: absolute;
+  z-index: $cell-action-z-index;
+  width: 20px;
+  height: 24px;
+  padding: 0;
+  border-radius: var(--qdr-radius-1);
+  border: 1px solid var(--qdr-primary-active-bg);
+  background-color: var(--qdr-primary-hover-bg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+  cursor: pointer;
+  opacity: 1;
+
+  &--dragging {
+    border: 1px solid var(--qdr-divider);
+    background-color: var(--qdr-bg);
+    cursor: grabbing;
+  }
+}
+
+@mixin cell-selected($border-position) {
+  border-#{$border-position}: 2px solid var(--qdr-primary-light) !important;
+}
+
+@mixin title-bg {
+  background-color: var(--qdr-bg);
+}
+
+.qdr-table__table-toolbar {
+  right: unset;
+  left: 50%;
+  top: -4px;
+  transform: translate(-50%, -100%);
+}
+
+.qdr-table {
+  display: flex;
+  flex-flow: column;
+  align-items: flex-start;
+  gap: var(--qdr-spacing-4);
+  margin: var(--qdr-spacing-11) 0;
+  position: relative;
+
+  &__selection {
+    padding: 0;
+    position: absolute;
+    left: -22px;
+    top: 0;
+    z-index: 0;
+    width: 20px;
+    height: 20px;
+    color: var(--qdr-action-inactive);
+    border: none;
+    border-radius: var(--qdr-radius-1);
+    background-color: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--qdr-secondary-active-bg);
+      color: var(--qdr-action-active);
+    }
+  }
+
+  &__portal-container {
+    position: relative;
+    pointer-events: none;
+  }
+
+  &__title {
+    width: 100%;
+    display: block;
+    position: relative;
+    margin: 0;
+    font-size: var(--qdr-typography-article-h6-font-size);
+    line-height: var(--qdr-typography-article-h6-line-height);
+    letter-spacing: var(--qdr-typography-article-h6-letter-spacing);
+    font-weight: var(--qdr-typography-article-h6-font-weight);
+    color: var(--qdr-text-primary);
+    background-color: var(--qdr-surface-secondary);
+
+    &__placeholder {
+      position: absolute;
+      left: 0;
+      top: 0;
+      color: var(--qdr-text-secondary);
+      pointer-events: none;
+    }
+  }
+
+  &__header {
+    @include title-bg();
+
+    &--pinned {
+      position: sticky;
+      z-index: 2;
+      top: 0;
+      box-shadow: 0 2px 4px -2px #00000026;
+    }
+  }
+
+  &__scrollContainer {
+    width: 100%;
+    max-width: 100%;
+    max-height: 420px;
+    overflow: auto;
+    scrollbar-width: thin;
+    position: relative;
+  }
+
+  &__main {
+    margin: 0;
+    border-collapse: separate;
+    border-spacing: 0;
+    table-layout: fixed;
+
+    th:not(:first-child),
+    td:not(:first-child) {
+      border-left: none;
+    }
+
+    thead tr:not(:last-child) th,
+    tbody tr:not(:last-child) td {
+      border-bottom: none;
+    }
+  }
+
+  &__inline-table-toolbar,
+  &__cell__inline-table-toolbar {
+    pointer-events: none;
+    top: -50px;
+    left: 0;
+    right: unset;
+  }
+
+  &__mainWrapper {
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    position: relative;
+
+    &--selected {
+      .qdr-table__main {
+        border: 2px solid var(--qdr-primary);
+      }
+
+      .qdr-table__table-toolbar {
+        opacity: 1;
+        pointer-events: auto;
+      }
+    }
+  }
+
+  &__body {
+    background-color: var(--qdr-surface-primary);
+  }
+
+  &__cell {
+    position: relative;
+    padding: var(--qdr-spacing-3) var(--qdr-spacing-4);
+    font-size: var(--qdr-typography-article-body1-font-size);
+    line-height: var(--qdr-typography-article-body1-line-height);
+    letter-spacing: var(--qdr-typography-article-body1-letter-spacing);
+    font-weight: var(--qdr-typography-article-body1-font-weight);
+    color: var(--qdr-text-primary);
+    text-align: left;
+    border-top: 1px solid var(--qdr-border);
+    border-right: 1px solid var(--qdr-border);
+    border-bottom: 1px solid var(--qdr-border);
+    border-left: 1px solid var(--qdr-border);
+    vertical-align: top;
+    word-break: break-all;
+
+    p,
+    ul,
+    ol {
+      margin: 0;
+    }
+
+    &--resizing {
+      &::after {
+        content: '';
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 2px;
+        height: 100%;
+        background-color: var(--qdr-primary-light);
+        pointer-events: none;
+        opacity: 1;
+      }
+    }
+
+    &__resize-handle {
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 6px;
+      height: 100%;
+      transform: translateX(0);
+      cursor: col-resize;
+      z-index: 1;
+    }
+
+    &--header {
+      font-weight: var(--qdr-typography-article-h6-font-weight);
+      color: var(--qdr-text-primary);
+      @include title-bg();
+    }
+
+    &--pinned {
+      position: sticky;
+      z-index: 1;
+      left: 0;
+      box-shadow: 2px 0 4px -2px #00000026;
+    }
+
+    &--top-active {
+      @include cell-selected('top');
+    }
+
+    &--right-active {
+      @include cell-selected('right');
+    }
+
+    &--bottom-active {
+      @include cell-selected('bottom');
+    }
+
+    &--left-active {
+      @include cell-selected('left');
+    }
+
+    &--drag-row-target-top {
+      border-top: 2px solid var(--qdr-error) !important;
+    }
+
+    &--drag-row-target-bottom {
+      border-bottom: 2px solid var(--qdr-error) !important;
+    }
+
+    &--drag-column-target-left {
+      border-left: 2px solid var(--qdr-error) !important;
+    }
+
+    &--drag-column-target-right {
+      border-right: 2px solid var(--qdr-error) !important;
+    }
+  }
+
+  &__drag-overlay {
+    position: fixed;
+    pointer-events: none;
+    z-index: 9999;
+    will-change: transform;
+
+    .qdr-table__drag-overlay-content {
+      width: 100%;
+      height: 100%;
+      background-color: var(--qdr-primary-hover-bg);
+    }
+  }
+
+  &__btn-icon {
+    color: var(--qdr-action-disabled);
+    pointer-events: none;
+  }
+
+  &__add-column {
+    @include add-btn();
+
+    right: -24px;
+    top: 0;
+    width: 20px;
+    height: 100%;
+  }
+
+  &__add-row {
+    @include add-btn();
+
+    bottom: -24px;
+    left: 0;
+    width: 100%;
+    height: 20px;
+  }
+
+  &__add-both {
+    @include add-btn();
+
+    right: -24px;
+    bottom: -24px;
+    width: 20px;
+    height: 20px;
+  }
+
+  &__delete {
+    color: var(--qdr-error);
+  }
+}
+
+// 為了解決 toolbar 顯示時，因為位置錯誤而導致的閃爍問題
+// 讓 toolbar 出現時稍晚一些
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.qdr-table__cell__focus-toolbar,
+.qdr-table__cell__inline-table-toolbar {
+  position: absolute;
+  right: unset;
+  transform: translate(-10%, -100%);
+  padding: 4px;
+  border-radius: 10px;
+  border: 1px solid var(--qdr-border);
+  background: var(--qdr-bg);
+  box-shadow:
+    0 4px 8px -2px #0000001a,
+    0 2px 4px -2px #0000000a;
+  animation-name: fade-in;
+  animation-duration: 0.1s;
+  animation-delay: 0.1s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+  animation-timing-function: linear;
+  pointer-events: auto;
+  z-index: $toolbar-z-index;
+}
+
+.qdr-table__cell-row-action {
+  @include cell-action();
+}
+
+.qdr-table__cell-column-action {
+  @include cell-action();
+
+  transform: rotate(90deg);
+  transform-origin: center;
+}
+
+.qdr-table__size-indicators {
+  display: none;
+  overflow: hidden;
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  max-width: 100%;
+  padding: 8px 0;
+  pointer-events: none;
+  transform: translateY(-100%);
+  flex-flow: row nowrap;
+  align-items: center;
+}
+
+.qdr-table__size-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.qdr-table__size {
+  background-color: var(--qdr-action-inactive);
+  color: var(--qdr-on-primary);
+  padding: 4px 8px;
+  font-size: 12px;
+  white-space: pre-wrap;
+  position: relative;
+
+  &::after {
+    position: absolute;
+    content: '';
+    z-index: -1;
+    top: calc(100% - 2px);
+    left: 50%;
+    width: 10px;
+    height: 10px;
+    background-color: var(--qdr-action-inactive);
+    border-right: 1px solid var(--qdr-action-inactive);
+    border-bottom: 1px solid var(--qdr-action-inactive);
+    transform: translateX(-50%) translateY(-50%) rotate(45deg);
+  }
+}

package/table/toolbar/TableToolbarIcon.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ToolbarIconProps } from '@quadrats/react/toolbar';
+import { ReactTable } from '@quadrats/react/table';
+export interface TableToolbarIconProps extends Omit<ToolbarIconProps, 'active' | 'onClick'> {
+    controller: ReactTable;
+}
+declare function TableToolbarIcon(props: TableToolbarIconProps): React.JSX.Element;
+export default TableToolbarIcon;

package/table/toolbar/TableToolbarIcon.js

@@ -0,0 +1,12 @@
+import { __rest } from 'tslib';
+import React from 'react';
+import { ToolbarIcon } from '@quadrats/react/toolbar';
+import { useTableTool } from './useTableTool.js';
+
+function TableToolbarIcon(props) {
+    const { controller } = props, rest = __rest(props, ["controller"]);
+    const { insert } = useTableTool(controller);
+    return React.createElement(ToolbarIcon, Object.assign({}, rest, { onClick: insert }));
+}
+
+export { TableToolbarIcon as default };

package/table/toolbar/index.cjs.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var React = require('react');
+var react = require('@quadrats/react');
+var tslib = require('tslib');
+var toolbar = require('@quadrats/react/toolbar');
+
+function useTableTool(table) {
+    const editor = react.useQuadrats();
+    const insert = React.useCallback(() => {
+        // Insert a 3x3 table
+        table.insertTable(editor, 3, 3);
+    }, [editor, table]);
+    return { insert };
+}
+
+function TableToolbarIcon(props) {
+    const { controller } = props, rest = tslib.__rest(props, ["controller"]);
+    const { insert } = useTableTool(controller);
+    return React.createElement(toolbar.ToolbarIcon, Object.assign({}, rest, { onClick: insert }));
+}
+
+exports.TableToolbarIcon = TableToolbarIcon;
+exports.useTableTool = useTableTool;

package/table/toolbar/index.d.ts

@@ -0,0 +1,2 @@
+export { useTableTool } from './useTableTool';
+export { default as TableToolbarIcon } from './TableToolbarIcon';

package/table/toolbar/index.js

@@ -0,0 +1,2 @@
+export { useTableTool } from './useTableTool.js';
+export { default as TableToolbarIcon } from './TableToolbarIcon.js';

package/table/toolbar/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@quadrats/react/table/toolbar",
+  "sideEffects": false,
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
+}

package/table/toolbar/useTableTool.d.ts

@@ -0,0 +1,4 @@
+import { ReactTable } from '@quadrats/react/table';
+export declare function useTableTool(table: ReactTable): {
+    insert: () => void;
+};

package/table/toolbar/useTableTool.js

@@ -0,0 +1,13 @@
+import { useCallback } from 'react';
+import { useQuadrats } from '@quadrats/react';
+
+function useTableTool(table) {
+    const editor = useQuadrats();
+    const insert = useCallback(() => {
+        // Insert a 3x3 table
+        table.insertTable(editor, 3, 3);
+    }, [editor, table]);
+    return { insert };
+}
+
+export { useTableTool };

package/table/typings.d.ts

@@ -0,0 +1,68 @@
+import { Editor } from '@quadrats/core';
+import { Table, TableElement, TableTypeKey, TableTitleTypeKey, TableMainTypeKey, TableHeaderTypeKey, TableRowTypeKey, TableCellTypeKey, TableBodyTypeKey } from '@quadrats/common/table';
+import { WithCreateHandlers, WithCreateRenderElement, RenderElementProps, ReactWithable } from '@quadrats/react';
+import { Dispatch, SetStateAction, RefObject } from 'react';
+export type TableHeaderContextType = {
+    isHeader: boolean;
+};
+export type TableContextType = {
+    tableElement: TableElement;
+    columnCount: number;
+    rowCount: number;
+    portalContainerRef: RefObject<HTMLDivElement | null>;
+    pinnedColumns: Set<number>;
+    pinnedRows: Set<number>;
+    cellPositions: Map<TableElement, {
+        columnIndex: number;
+        rowIndex: number;
+    }>;
+    addColumn: (options?: {
+        position?: 'left' | 'right';
+        columnIndex?: number;
+    }) => void;
+    addRow: (options?: {
+        position?: 'top' | 'bottom';
+        rowIndex?: number;
+    }) => void;
+    addColumnAndRow: VoidFunction;
+    deleteRow: (rowIndex: number) => void;
+    deleteColumn: (columnIndex: number) => void;
+    moveRowToBody: (rowIndex: number) => void;
+    moveRowToHeader: (rowIndex: number, customProps?: Pick<TableElement, 'pinned'>) => void;
+    unsetColumnAsTitle: (columnIndex: number) => void;
+    setColumnAsTitle: (columnIndex: number, customProps?: Pick<TableElement, 'pinned'>) => void;
+    pinColumn: (columnIndex: number) => void;
+    unpinColumn: () => void;
+    pinRow: (rowIndex: number) => void;
+    unpinRow: () => void;
+    moveOrSwapRow: (sourceRowIndex: number, targetRowIndex: number, mode?: 'swap' | 'move') => void;
+    moveOrSwapColumn: (sourceColumnIndex: number, targetColumnIndex: number, mode?: 'swap' | 'move') => void;
+    isColumnPinned: (columnIndex: number) => boolean;
+    isRowPinned: (rowIndex: number) => boolean;
+    isReachMaximumColumns: boolean;
+    isReachMaximumRows: boolean;
+    isReachMinimumNormalColumns: boolean;
+    isReachMinimumBodyRows: boolean;
+    tableSelectedOn: {
+        region: 'table' | 'header' | 'row' | 'column';
+        index?: number;
+    } | undefined;
+    setTableSelectedOn: Dispatch<SetStateAction<TableContextType['tableSelectedOn']>>;
+    tableHoveredOn: {
+        columnIndex: number;
+        rowIndex: number;
+    } | undefined;
+    setTableHoveredOn: Dispatch<SetStateAction<TableContextType['tableHoveredOn']>>;
+};
+export type TableScrollContextType = {
+    scrollRef: RefObject<HTMLDivElement | null>;
+    scrollTop: number;
+    scrollLeft: number;
+};
+export type RenderTableElementProps = RenderElementProps<TableElement>;
+export type TableRenderElements = Record<TableTypeKey, (props: RenderElementProps<TableElement>) => JSX.Element | null | undefined> & Record<TableTitleTypeKey, (props: RenderElementProps<TableElement>) => JSX.Element | null | undefined> & Record<TableMainTypeKey, (props: RenderElementProps<TableElement>) => JSX.Element | null | undefined> & Record<TableHeaderTypeKey, (props: RenderElementProps<TableElement>) => JSX.Element | null | undefined> & Record<TableBodyTypeKey, (props: RenderElementProps<TableElement>) => JSX.Element | null | undefined> & Record<TableRowTypeKey, (props: RenderElementProps<TableElement>) => JSX.Element | null | undefined> & Record<TableCellTypeKey, (props: RenderElementProps<TableElement>) => JSX.Element | null | undefined>;
+export type ReactTableCreateRenderElementOptions = {
+    [K in TableTypeKey | TableTitleTypeKey | TableMainTypeKey | TableHeaderTypeKey | TableBodyTypeKey | TableRowTypeKey | TableCellTypeKey]?: TableRenderElements[K];
+};
+export interface ReactTable extends Omit<Table<Editor>, 'with'>, WithCreateHandlers, WithCreateRenderElement<[ReactTableCreateRenderElementOptions?]>, ReactWithable {
+}