@rainbow-oh/yee-c 0.9.2 → 0.11.0

package/src/Table/table-resize.test.tsx

@@ -0,0 +1,234 @@
+// @vitest-environment jsdom
+import { act, cleanup, render } from '@testing-library/react';
+import React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import Table from './table';
+
+import type { ColumnProps } from './interface';
+
+const columns: ColumnProps[] = [
+  { title: 'Name', dataIndex: 'name', key: 'name', width: 100, minWidth: 60 },
+  { title: 'Age', dataIndex: 'age', key: 'age', width: 80, sorter: true },
+  { title: 'Act', key: 'act', width: 120, resizable: false },
+];
+
+const dataSource = [{ key: '1', name: 'a', age: 1 }];
+
+/** jsdom has no layout, so feed the hook the widths it would have measured. */
+const stubSyncRaf = () =>
+  vi.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => {
+    cb(0);
+    return 1;
+  });
+
+const stubColWidths = (widths: number[]) => {
+  let index = 0;
+  const spy = vi
+    .spyOn(HTMLTableColElement.prototype, 'getBoundingClientRect')
+    .mockImplementation(function () {
+      const width = widths[index % widths.length];
+      index += 1;
+      return { width } as DOMRect;
+    });
+  return spy;
+};
+
+const pointer = (type: string, clientX: number) => {
+  const event = new MouseEvent(type, { bubbles: true, clientX, button: 0 });
+  Object.defineProperty(event, 'clientX', { value: clientX });
+  return event;
+};
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+describe('Table column resize', () => {
+  it('renders a handle only on columns that opted in', () => {
+    const { container } = render(
+      <Table resizable columns={columns} dataSource={dataSource} />,
+    );
+    const handles = container.querySelectorAll('.yee-table-resize-handle');
+    expect(handles.length).toBe(2);
+  });
+
+  it('renders no handle when resizing is off', () => {
+    const { container } = render(
+      <Table columns={columns} dataSource={dataSource} />,
+    );
+    expect(container.querySelectorAll('.yee-table-resize-handle').length).toBe(
+      0,
+    );
+  });
+
+  it('never puts a handle on a group header cell', () => {
+    const { container } = render(
+      <Table
+        resizable
+        columns={[
+          {
+            title: 'Group',
+            key: 'group',
+            children: [
+              { title: 'A', dataIndex: 'name', key: 'name', width: 100 },
+              { title: 'B', dataIndex: 'age', key: 'age', width: 100 },
+            ],
+          },
+        ]}
+        dataSource={dataSource}
+      />,
+    );
+    const rows = container.querySelectorAll('thead tr');
+    expect(rows.length).toBe(2);
+    expect(rows[0].querySelectorAll('.yee-table-resize-handle').length).toBe(0);
+    expect(rows[1].querySelectorAll('.yee-table-resize-handle').length).toBe(2);
+  });
+
+  it('widens the dragged column and freezes the rest at their measured width', () => {
+    stubSyncRaf();
+    stubColWidths([100, 80, 120]);
+    const onColumnResizeEnd = vi.fn();
+    const { container } = render(
+      <Table
+        resizable
+        columns={columns}
+        dataSource={dataSource}
+        onColumnResizeEnd={onColumnResizeEnd}
+      />,
+    );
+
+    const handle = container.querySelector(
+      '.yee-table-resize-handle',
+    ) as HTMLElement;
+
+    act(() => {
+      handle.dispatchEvent(pointer('pointerdown', 200));
+    });
+    act(() => {
+      window.dispatchEvent(pointer('pointermove', 260));
+    });
+
+    const cols = container.querySelectorAll('colgroup col');
+    expect((cols[0] as HTMLElement).style.width).toBe('160px');
+    expect((cols[1] as HTMLElement).style.width).toBe('80px');
+    expect((cols[2] as HTMLElement).style.width).toBe('120px');
+
+    const table = container.querySelector('table') as HTMLElement;
+    expect(table.style.tableLayout).toBe('fixed');
+    expect(table.style.width).toBe('360px');
+
+    act(() => {
+      window.dispatchEvent(pointer('pointerup', 260));
+    });
+    expect(onColumnResizeEnd).toHaveBeenCalledWith(
+      160,
+      expect.objectContaining({ key: 'name' }),
+    );
+    expect(document.body.style.cursor).toBe('');
+  });
+
+  it('shifts the sticky offset of following fixed columns', () => {
+    stubSyncRaf();
+    stubColWidths([100, 80, 120]);
+    const { container } = render(
+      <Table
+        resizable
+        columns={[
+          {
+            title: 'Name',
+            dataIndex: 'name',
+            key: 'name',
+            width: 100,
+            fixed: 'left',
+          },
+          {
+            title: 'Age',
+            dataIndex: 'age',
+            key: 'age',
+            width: 80,
+            fixed: 'left',
+          },
+          { title: 'Act', key: 'act', width: 120 },
+        ]}
+        dataSource={dataSource}
+      />,
+    );
+
+    const secondFixedTh = container.querySelectorAll(
+      'thead th',
+    )[1] as HTMLElement;
+    expect(secondFixedTh.style.left).toBe('100px');
+
+    const handle = container.querySelector(
+      '.yee-table-resize-handle',
+    ) as HTMLElement;
+    act(() => {
+      handle.dispatchEvent(pointer('pointerdown', 200));
+    });
+    act(() => {
+      window.dispatchEvent(pointer('pointermove', 250));
+    });
+
+    expect(
+      (container.querySelectorAll('thead th')[1] as HTMLElement).style.left,
+    ).toBe('150px');
+  });
+
+  it('drops the snapshot when the column set changes', () => {
+    stubSyncRaf();
+    stubColWidths([100, 80, 120]);
+    const { container, rerender } = render(
+      <Table resizable columns={columns} dataSource={dataSource} />,
+    );
+    const handle = container.querySelector(
+      '.yee-table-resize-handle',
+    ) as HTMLElement;
+    act(() => {
+      handle.dispatchEvent(pointer('pointerdown', 200));
+    });
+    act(() => {
+      window.dispatchEvent(pointer('pointermove', 260));
+    });
+    act(() => {
+      window.dispatchEvent(pointer('pointerup', 260));
+    });
+    expect((container.querySelector('table') as HTMLElement).style.width).toBe(
+      '360px',
+    );
+
+    // A brand new column has no snapshotted width, so the px controlled layout
+    // would have a hole in it; the table must fall back to natural sizing.
+    rerender(
+      <Table
+        resizable
+        columns={[...columns, { title: 'New', dataIndex: 'x', key: 'x' }]}
+        dataSource={dataSource}
+      />,
+    );
+    const table = container.querySelector('table') as HTMLElement;
+    expect(table.style.width).toBe('');
+    expect(table.style.tableLayout).toBe('');
+  });
+
+  it('clamps to minWidth', () => {
+    stubSyncRaf();
+    stubColWidths([100, 80, 120]);
+    const { container } = render(
+      <Table resizable columns={columns} dataSource={dataSource} />,
+    );
+    const handle = container.querySelector(
+      '.yee-table-resize-handle',
+    ) as HTMLElement;
+
+    act(() => {
+      handle.dispatchEvent(pointer('pointerdown', 200));
+    });
+    act(() => {
+      window.dispatchEvent(pointer('pointermove', 0));
+    });
+
+    const cols = container.querySelectorAll('colgroup col');
+    expect((cols[0] as HTMLElement).style.width).toBe('60px');
+  });
+});

package/src/Table/table.tsx

@@ -4,6 +4,7 @@ import Spin from '../Spin';
 import ColGroup from './col-group';
 import Footer from './footer';
 import Header from './header';
+import useColumnResize from './hooks/useColumnResize';
 import useColumns from './hooks/useColumns';
 import useExpand from './hooks/useExpand';
 import useSelection from './hooks/useSelection';
@@ -12,7 +13,6 @@ import TFooter from './tfooter';
 import THeader from './theader';
 
 import { GlobalContext } from '../Config-Provider';
-import useLatest from '../hooks/useLatest';
 import mergeContextToProps from '../utils/mergeContextToProps';
 import omit from '../utils/omit';
 import { pickDataAttrs } from '../utils/types';
@@ -20,7 +20,11 @@ import { pickDataAttrs } from '../utils/types';
 import useFilter from './hooks/useFilter';
 import usePagination from './hooks/usePagination';
 import useSorter from './hooks/useSorter';
-import type { PaginationType, TableProps } from './interface';
+import type {
+  PaginationType,
+  TableProps,
+  WrapedColumnProps,
+} from './interface';
 import './style/index.less';
 
 export const TableCtx = React.createContext({} as any);
@@ -38,6 +42,9 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
     rowKey = 'key',
     bordered,
     tableLayout,
+    resizable,
+    onColumnResize,
+    onColumnResizeEnd,
     loading = false,
     showHeader = true,
     pagination: propPagination = true,
@@ -64,6 +71,32 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
   const dataAttrs = pickDataAttrs(rest as Record<string, unknown>);
   const [measuredColumnWidths, setMeasuredColumnWidths] =
     React.useState<number[]>();
+  const contentRef = useRef<HTMLDivElement>(null);
+  const tableRef = useRef<HTMLTableElement>(null);
+
+  // Filled in right after `useColumns` below. The resize hook needs the latest
+  // leaf columns, but `wrapedColumns` is itself derived from the resized widths,
+  // so depending on it directly would rebuild the drag handlers mid-drag.
+  const wrapedColumnsRef = useRef<WrapedColumnProps[]>([]);
+
+  const {
+    resizedWidths,
+    resizingKey,
+    onResizeStart,
+    onResizeStep,
+    resetResizedWidths,
+  } = useColumnResize({
+    tableRef,
+    columnsRef: wrapedColumnsRef,
+    onColumnResize,
+    onColumnResizeEnd,
+  });
+
+  // Once a snapshot exists, every column carries an explicit px width and the
+  // table switches to `table-layout: fixed`, which makes those declared widths
+  // authoritative. The measured widths lag one frame behind a drag, so they must
+  // stop feeding the fixed-column offsets while a snapshot is in play.
+  const hasResizeSnapshot = Object.keys(resizedWidths).length > 0;
 
   const getRowKey = React.useCallback(
     (record: Record<string, any>, key = rowKey) => {
@@ -83,9 +116,42 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
     columns: propColumns,
     expandable,
     rowSelection,
-    measuredColumnWidths,
+    measuredColumnWidths: hasResizeSnapshot ? undefined : measuredColumnWidths,
+    resizable,
+    resizedWidths,
   });
 
+  wrapedColumnsRef.current = wrapedColumns;
+
+  // Total width of the px controlled layout. Deliberately `undefined` unless the
+  // snapshot covers every single column: a partial snapshot would leave a hole in
+  // the layout, so it is safer to fall back to the browser's own distribution.
+  const resizeTotalWidth = useMemo(() => {
+    if (!wrapedColumns.length) return undefined;
+    let total = 0;
+    for (const column of wrapedColumns) {
+      const width = column.resizeKey
+        ? resizedWidths[column.resizeKey]
+        : undefined;
+      if (!width || !Number.isFinite(width)) return undefined;
+      total += width;
+    }
+    return total;
+  }, [wrapedColumns, resizedWidths]);
+
+  const resizeActive = resizeTotalWidth !== undefined;
+
+  // Identity of the column set, ignoring widths. When it changes the snapshot is
+  // stale (a new column would have no width of its own), so it gets dropped.
+  const resizeKeysSignature = useMemo(
+    () => wrapedColumns.map((column) => column.resizeKey).join('|'),
+    [wrapedColumns],
+  );
+
+  useEffect(() => {
+    resetResizedWidths();
+  }, [resizeKeysSignature, resetResizedWidths]);
+
   // Filter
   const {
     data: filteredData,
@@ -157,8 +223,6 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
 
   // Track filter changes to emit onChange after filtered data is recalculated
   const prevFilterRecordsRef = useRef(filterRecords);
-  const contentRef = useRef<HTMLDivElement>(null);
-  const tableRef = useRef<HTMLTableElement>(null);
   const [horizontalScroll, setHorizontalScroll] = React.useState({
     left: false,
     right: false,
@@ -197,12 +261,10 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
     [wrapedColumns],
   );
 
-  // Keep the latest columns in a ref so that the measure callback stays stable:
-  // `wrapedColumns` is derived from `measuredColumnWidths`, so depending on it
-  // directly would recreate the callback (and the ResizeObserver) on every
+  // `wrapedColumnsRef` (assigned during render, above) keeps the measure callback
+  // stable: `wrapedColumns` is derived from `measuredColumnWidths`, so depending
+  // on it directly would recreate the callback (and the ResizeObserver) on every
   // measurement.
-  const wrapedColumnsRef = useLatest(wrapedColumns);
-
   const updateMeasuredColumnWidths = React.useCallback(() => {
     const columns = wrapedColumnsRef.current;
     if (!columns.some((column) => column.fixed)) return;
@@ -319,6 +381,9 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
         onSort={handleSort}
         onCheckAll={onCheckAll}
         onInternalFilter={onFilterInternal}
+        resizingKey={resizingKey}
+        onResizeStart={onResizeStart}
+        onResizeStep={onResizeStep}
       />
     );
   };
@@ -349,8 +414,16 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
     const tableProps = {
       style: {
         ...styles?.table,
-        minWidth: scroll?.x,
-        tableLayout: pageData?.length ? tableLayout : undefined,
+        // An explicit total width replaces both `width: 100%` and `scroll.x`:
+        // either of those would let the browser stretch the table and redistribute
+        // the extra space across the columns, undoing the drag.
+        minWidth: resizeActive ? undefined : scroll?.x,
+        width: resizeTotalWidth,
+        tableLayout: resizeActive
+          ? 'fixed'
+          : pageData?.length
+            ? tableLayout
+            : undefined,
       },
       className: clsx(
         { [`${prefixCls}-bordered`]: bordered },
@@ -414,7 +487,11 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
 
   return (
     <div
-      className={clsx(`${prefixCls}-box`, className)}
+      className={clsx(
+        `${prefixCls}-box`,
+        { [`${prefixCls}-resizing`]: !!resizingKey },
+        className,
+      )}
       style={style}
       ref={ref}
       {...dataAttrs}

package/src/Table/theader/cell.tsx

@@ -29,9 +29,14 @@ const HeadCell: React.FC<HeadCellProps> = (props) => {
     width,
     colSpan,
     rowSpan,
+    resizable,
+    resizeKey,
+    resizingKey,
     onHeaderCell,
     onSort,
     onInternalFilter,
+    onResizeStart,
+    onResizeStep,
     ...rest
   } = props;
 
@@ -148,6 +153,41 @@ const HeadCell: React.FC<HeadCellProps> = (props) => {
     className,
   );
 
+  // `resizeKey` is only stamped onto leaf columns, so it doubles as the guard that
+  // keeps handles off group header cells (whose width is the sum of their leaves).
+  const showResizeHandle = !!(resizable && resizeKey && onResizeStart);
+  const isResizing = !!resizeKey && resizingKey === resizeKey;
+
+  const renderResizeHandle = () => {
+    if (!showResizeHandle) return null;
+    return (
+      <span
+        role="separator"
+        aria-orientation="vertical"
+        aria-label={tableLocale.resizeColumn || 'Drag to resize column'}
+        tabIndex={0}
+        className={clsx(`${prefixCls}-resize-handle`, {
+          [`${prefixCls}-resize-handle-active`]: isResizing,
+        })}
+        onPointerDown={(event) => onResizeStart?.(event, resizeKey as string)}
+        // The whole title area is a sort trigger, and a resize drag ends with a
+        // click on top of it; swallow it so dragging never toggles the sorter.
+        onClick={(event) => {
+          event.preventDefault();
+          event.stopPropagation();
+        }}
+        onKeyDown={(event) => {
+          if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;
+          event.preventDefault();
+          onResizeStep?.(
+            resizeKey as string,
+            event.key === 'ArrowLeft' ? -1 : 1,
+          );
+        }}
+      />
+    );
+  };
+
   const getThProps = () => {
     const styles = { ...style, width, maxWidth: width, textAlign: align };
     const cellProps = onHeaderCell ? onHeaderCell(props) : {};
@@ -165,10 +205,20 @@ const HeadCell: React.FC<HeadCellProps> = (props) => {
 
   const renderCell = () => {
     if (!filter && !sorter) {
-      return <th {...thProps}>{title}</th>;
+      return (
+        <th {...thProps}>
+          {title}
+          {renderResizeHandle()}
+        </th>
+      );
     }
 
-    return <th {...thProps}>{renderCellWithAction()}</th>;
+    return (
+      <th {...thProps}>
+        {renderCellWithAction()}
+        {renderResizeHandle()}
+      </th>
+    );
   };
 
   const cell = renderCell();

package/src/Table/util/index.ts

@@ -1,4 +1,47 @@
-import { WrapedColumnProps } from '../interface';
+import { ColumnProps, WrapedColumnProps } from '../interface';
+
+/**
+ * Stable identity for a leaf column, used to key its resized width.
+ *
+ * `key`/`dataIndex` survive re-ordering and data changes, so they are preferred.
+ * Columns declaring neither fall back to their position, which is the best that
+ * can be done without asking the caller for an id.
+ */
+export function getColumnResizeKey(column: ColumnProps, index: number) {
+  const id = column.key ?? column.dataIndex;
+  return id === undefined || id === null || id === ''
+    ? `index:${index}`
+    : `id:${id}`;
+}
+
+/**
+ * Stamp every leaf column with its `resizeKey`, resolve whether it is resizable
+ * (column level setting wins over the table level one) and override `width` with
+ * the dragged value when there is one.
+ *
+ * This runs before `handleColumns` so that the colgroup, the header cells, the
+ * body cells and the sticky offsets of fixed columns all read the same width
+ * from a single place.
+ */
+export function applyColumnResize(
+  columns: Array<WrapedColumnProps>,
+  resizable?: boolean,
+  resizedWidths?: Record<string, number>,
+) {
+  return columns.map((column, index) => {
+    const resizeKey = getColumnResizeKey(column, index);
+    const resizedWidth = resizedWidths?.[resizeKey];
+    const next: WrapedColumnProps = {
+      ...column,
+      resizeKey,
+      resizable: column.resizable ?? resizable ?? false,
+    };
+    if (Number.isFinite(resizedWidth) && (resizedWidth as number) > 0) {
+      next.width = resizedWidth;
+    }
+    return next;
+  });
+}
 
 const getColumnWidth = (
   column: WrapedColumnProps,

package/src/Tabs/demo/overflow-center.tsx

@@ -0,0 +1,35 @@
+import { Tabs } from '@rainbow-oh/yee-c';
+import React, { useState } from 'react';
+
+export default () => {
+  const items = Array.from({ length: 24 }, (_, i) => ({
+    key: `tab-${i + 1}`,
+    label: `Tab ${i + 1}`,
+    children: `Content of Tab Pane ${i + 1}`,
+  }));
+
+  const [centerKey, setCenterKey] = useState<string | number>('tab-1');
+  const [autoKey, setAutoKey] = useState<string | number>('tab-1');
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+      <div>
+        <p style={{ marginBottom: 8 }}>activeAlign=&quot;center&quot;</p>
+        <div style={{ maxWidth: 480 }} data-testid="center-wrap">
+          <Tabs
+            activeAlign="center"
+            items={items}
+            activeKey={centerKey}
+            onChange={setCenterKey}
+          />
+        </div>
+      </div>
+      <div>
+        <p style={{ marginBottom: 8 }}>default (auto)</p>
+        <div style={{ maxWidth: 480 }} data-testid="auto-wrap">
+          <Tabs items={items} activeKey={autoKey} onChange={setAutoKey} />
+        </div>
+      </div>
+    </div>
+  );
+};