@rainbow-oh/yee-c 0.9.2 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainbow-oh/yee-c",
-  "version": "0.9.2",
+  "version": "0.11.0",
   "description": "yee basic components",
   "keywords": [
     "react",

package/src/Button/demo/icon.tsx

@@ -1,11 +1,11 @@
-import { Button } from '@rainbow-oh/yee-c';
+import { Button, Tooltip } from '@rainbow-oh/yee-c';
 import { Download, Plus, Search } from 'lucide-react';
 import React from 'react';
 
 export default () => {
   return (
     <>
-      <Button type="primary" icon={<Search size={16} />}>
+      <Button type="primary" icon={<Search size={16} />} title="search">
         Search
       </Button>
       <span style={{ margin: '0 10px' }}></span>
@@ -14,7 +14,9 @@ export default () => {
       <br />
       <Button shape="circle" icon={<Plus size={16} />} />
       <span style={{ margin: '0 10px' }}></span>
-      <Button shape="circle" type="primary" icon={<Search size={16} />} />
+      <Tooltip title='Search'>
+        <Button shape="circle" type="primary" icon={<Search size={16} />} />
+      </Tooltip>
       <br />
       <br />
       <Button icon={<Search size={16} />} />

package/src/Input/style/index.less

@@ -13,6 +13,7 @@
   border: var(--yee-input-border-width) solid var(--yee-input-border-color);
   border-radius: var(--yee-input-border-radius, 4px);
   font-family: var(--yee-font-family);
+  outline: inherit;
 
   &:not(@{pls}-disabled):hover {
     border-color: var(--yee-input-hover-border-color);

package/src/Table/demo/resizable.tsx

@@ -0,0 +1,106 @@
+import type { ColumnProps } from '@rainbow-oh/yee-c';
+import { Table } from '@rainbow-oh/yee-c';
+import React from 'react';
+
+const columns: ColumnProps[] = [
+  {
+    title: 'Name',
+    dataIndex: 'name',
+    key: 'name',
+    fixed: 'left',
+    width: 140,
+    minWidth: 100,
+  },
+  {
+    title: 'Age',
+    dataIndex: 'age',
+    key: 'age',
+    width: 100,
+    sorter: true,
+  },
+  {
+    title: 'Address',
+    dataIndex: 'address',
+    key: 'address',
+    width: 240,
+  },
+  {
+    title: 'Company',
+    dataIndex: 'company',
+    key: 'company',
+    width: 180,
+  },
+  {
+    title: 'Email',
+    dataIndex: 'email',
+    key: 'email',
+    width: 240,
+  },
+  {
+    // Opt this column out of resizing while the rest stay resizable.
+    title: 'Action',
+    key: 'action',
+    fixed: 'right',
+    width: 100,
+    resizable: false,
+    render: (record) => <a onClick={() => console.log(record)}>View</a>,
+  },
+];
+
+const dataSource = [
+  {
+    key: '1',
+    name: 'John Brown',
+    age: 32,
+    address: 'New York No. 1 Lake Park',
+    company: 'Acme Inc.',
+    email: 'john.brown@example.com',
+  },
+  {
+    key: '2',
+    name: 'Jim Green',
+    age: 42,
+    address: 'London No. 1 Lake Park',
+    company: 'Globex',
+    email: 'jim.green@example.com',
+  },
+  {
+    key: '3',
+    name: 'Joe Black',
+    age: 28,
+    address: 'Sidney No. 1 Lake Park',
+    company: 'Initech',
+    email: 'joe.black@example.com',
+  },
+];
+
+export default () => {
+  const [widths, setWidths] = React.useState<Record<string, number>>({});
+
+  return (
+    <>
+      <Table
+        resizable
+        columns={columns}
+        dataSource={dataSource}
+        rowKey="key"
+        pagination={false}
+        scroll={{ x: 1000 }}
+        onColumnResizeEnd={(width, column) =>
+          setWidths((current) => ({
+            ...current,
+            [String(column.key ?? column.dataIndex)]: width,
+          }))
+        }
+      />
+      <p style={{ marginTop: 12 }}>
+        最近调整：
+        {Object.keys(widths).length
+          ? Object.entries(widths)
+              .map(([key, width]) => `${key}=${width}px`)
+              .join('，')
+          : '拖动表头右边缘试试'}
+      </p>
+    </>
+  );
+};

package/src/Table/hooks/useColumnResize.ts

@@ -0,0 +1,224 @@
+import * as React from 'react';
+import useLatest from '../../hooks/useLatest';
+import type { WrapedColumnProps } from '../interface';
+
+/** Floor for a dragged column when it declares no `minWidth` of its own. */
+const DEFAULT_MIN_COLUMN_WIDTH = 40;
+
+/** Width delta applied per arrow key press when a handle has focus. */
+const KEYBOARD_STEP = 8;
+
+interface UseColumnResizeOptions {
+  tableRef: React.RefObject<HTMLTableElement | null>;
+  /**
+   * Latest leaf columns. Passed as a ref because the columns are themselves
+   * derived from `resizedWidths`; depending on the array would make every
+   * width change rebuild the drag handlers mid-drag.
+   */
+  columnsRef: React.RefObject<WrapedColumnProps[]>;
+  onColumnResize?: (width: number, column: WrapedColumnProps) => void;
+  onColumnResizeEnd?: (width: number, column: WrapedColumnProps) => void;
+}
+
+const clampWidth = (width: number, column: WrapedColumnProps) => {
+  const min = Math.max(column.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH, 0);
+  const max = column.maxWidth;
+  if (width < min) return min;
+  if (max !== undefined && width > max) return max;
+  return Math.round(width);
+};
+
+/**
+ * Pointer (and keyboard) driven column resizing.
+ *
+ * The table normally lets the browser distribute widths (`width: 100%` with an
+ * `auto` layout), which means writing a width onto one column would silently
+ * steal space from its neighbours. So the first resize interaction snapshots the
+ * rendered width of *every* column; from then on the table is fully px
+ * controlled and a drag only moves the column it grabbed.
+ */
+export default function useColumnResize({
+  tableRef,
+  columnsRef,
+  onColumnResize,
+  onColumnResizeEnd,
+}: UseColumnResizeOptions) {
+  const [resizedWidths, setResizedWidths] = React.useState<
+    Record<string, number>
+  >({});
+  const [resizingKey, setResizingKey] = React.useState<string | null>(null);
+
+  // Callbacks are consumer supplied and usually re-created every render; reading
+  // them from a ref keeps `onResizeStart` stable.
+  const onColumnResizeRef = useLatest(onColumnResize);
+  const onColumnResizeEndRef = useLatest(onColumnResizeEnd);
+  const resizedWidthsRef = useLatest(resizedWidths);
+  const frameRef = React.useRef(0);
+  const teardownRef = React.useRef<(() => void) | null>(null);
+
+  /**
+   * Read the rendered width of every column off the `<col>` elements. Returns
+   * null when the measurement cannot be trusted, in which case the interaction
+   * is abandoned rather than applying a partial snapshot (a partial snapshot
+   * would leave holes once the layout switches to `fixed`).
+   */
+  const snapshotWidths = React.useCallback(() => {
+    const columns = columnsRef.current || [];
+    const colElements = tableRef.current?.querySelectorAll(
+      ':scope > colgroup > col',
+    );
+    if (!colElements || colElements.length !== columns.length) return null;
+    if (!columns.length) return null;
+
+    const snapshot: Record<string, number> = {};
+    for (let index = 0; index < columns.length; index += 1) {
+      const key = columns[index]?.resizeKey;
+      const width = Math.round(
+        colElements[index].getBoundingClientRect().width,
+      );
+      if (!key || !Number.isFinite(width) || width <= 0) return null;
+      snapshot[key] = width;
+    }
+    return snapshot;
+  }, [columnsRef, tableRef]);
+
+  const findColumn = React.useCallback(
+    (resizeKey: string) =>
+      (columnsRef.current || []).find(
+        (column) => column.resizeKey === resizeKey,
+      ),
+    [columnsRef],
+  );
+
+  const onResizeStart = React.useCallback(
+    (event: React.PointerEvent<HTMLElement>, resizeKey: string) => {
+      // Ignore secondary buttons, and never let the drag reach the sorter click
+      // handler or start a native text selection.
+      if (event.button !== 0) return;
+      event.preventDefault();
+      event.stopPropagation();
+
+      const column = findColumn(resizeKey);
+      if (!column) return;
+
+      const snapshot = snapshotWidths();
+      if (!snapshot) return;
+
+      const startX = event.clientX;
+      const startWidth = snapshot[resizeKey];
+      let latestWidth = startWidth;
+
+      setResizingKey(resizeKey);
+      setResizedWidths(snapshot);
+      document.body.style.userSelect = 'none';
+      document.body.style.cursor = 'col-resize';
+
+      const applyWidth = (clientX: number) => {
+        const next = clampWidth(startWidth + (clientX - startX), column);
+        if (next === latestWidth) return;
+        latestWidth = next;
+        setResizedWidths((current) => ({ ...current, [resizeKey]: next }));
+        onColumnResizeRef.current?.(next, column);
+      };
+
+      // pointermove fires far more often than the browser can paint, and every
+      // width change relayouts the whole table, so coalesce to one per frame.
+      const onPointerMove = (moveEvent: PointerEvent) => {
+        const { clientX } = moveEvent;
+        if (frameRef.current) cancelAnimationFrame(frameRef.current);
+        frameRef.current = requestAnimationFrame(() => {
+          frameRef.current = 0;
+          applyWidth(clientX);
+        });
+      };
+
+      // Detaching listeners and restoring the document is split out from `stop`
+      // so that unmounting mid-drag can clean up without emitting a resize-end
+      // event or touching state on a gone component.
+      // Collected as closures so that `teardown` does not have to name the
+      // handlers it removes (`stop` is defined after it, and they are mutual).
+      const detachers: Array<() => void> = [];
+      const bind = (type: string, handler: (event: PointerEvent) => void) => {
+        window.addEventListener(type, handler as EventListener);
+        detachers.push(() =>
+          window.removeEventListener(type, handler as EventListener),
+        );
+      };
+
+      const teardown = () => {
+        if (frameRef.current) {
+          cancelAnimationFrame(frameRef.current);
+          frameRef.current = 0;
+        }
+        detachers.forEach((detach) => detach());
+        detachers.length = 0;
+        document.body.style.userSelect = '';
+        document.body.style.cursor = '';
+        teardownRef.current = null;
+      };
+
+      const stop = () => {
+        teardown();
+        setResizingKey(null);
+        onColumnResizeEndRef.current?.(latestWidth, column);
+      };
+
+      teardownRef.current = teardown;
+      bind('pointermove', onPointerMove);
+      bind('pointerup', stop);
+      bind('pointercancel', stop);
+    },
+    [findColumn, snapshotWidths, onColumnResizeRef, onColumnResizeEndRef],
+  );
+
+  /** Keyboard equivalent of a drag, so the handle is operable without a mouse. */
+  const onResizeStep = React.useCallback(
+    (resizeKey: string, direction: number) => {
+      const column = findColumn(resizeKey);
+      if (!column) return;
+
+      const base = resizedWidthsRef.current;
+      const snapshot = base[resizeKey] === undefined ? snapshotWidths() : base;
+      if (!snapshot) return;
+
+      const next = clampWidth(
+        snapshot[resizeKey] + direction * KEYBOARD_STEP,
+        column,
+      );
+      if (next === snapshot[resizeKey]) return;
+
+      setResizedWidths({ ...snapshot, [resizeKey]: next });
+      onColumnResizeRef.current?.(next, column);
+      onColumnResizeEndRef.current?.(next, column);
+    },
+    [
+      findColumn,
+      snapshotWidths,
+      resizedWidthsRef,
+      onColumnResizeRef,
+      onColumnResizeEndRef,
+    ],
+  );
+
+  /**
+   * Forget the snapshot. Called when the column set changes: widths keyed to
+   * columns that no longer exist would under-report the total table width.
+   */
+  const resetResizedWidths = React.useCallback(() => {
+    setResizedWidths((current) => (Object.keys(current).length ? {} : current));
+  }, []);
+
+  // Unmounting mid-drag must not leave listeners or body styles behind.
+  React.useEffect(() => () => teardownRef.current?.(), []);
+
+  // Not gated on any `enabled` flag: the state stays empty until something drags,
+  // and handles are only rendered for columns that opted in, so an unused Table
+  // pays nothing and a column-level `resizable` works with no table-level flag.
+  return {
+    resizedWidths,
+    resizingKey,
+    onResizeStart,
+    onResizeStep,
+    resetResizedWidths,
+  };
+}

package/src/Table/hooks/useColumns.ts

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import deepClone from '../../utils/deepClone';
-import { handleColumns } from '../util';
+import { applyColumnResize, handleColumns } from '../util';
 import {
   flattenLeafColumns,
   injectSelectionExpand,
@@ -32,6 +32,8 @@ export default function useColumns({
   rowSelection,
   expandable,
   measuredColumnWidths,
+  resizable,
+  resizedWidths,
 }: {
   children?:
     | React.ReactElement<ColumnProps>
@@ -40,6 +42,8 @@ export default function useColumns({
   rowSelection?: RowSelectionType;
   expandable?: ExpandableType;
   measuredColumnWidths?: number[];
+  resizable?: boolean;
+  resizedWidths?: Record<string, number>;
 }) {
   const childColumns: Array<ColumnProps> | null = useMemo(() => {
     return children
@@ -55,10 +59,21 @@ export default function useColumns({
       []) as WrapedColumnProps[];
     const tree = injectSelectionExpand(base, rowSelection, expandable);
     const leaves = flattenLeafColumns(tree);
-    const wraped = handleColumns(leaves, measuredColumnWidths);
+    // Resized widths are folded in before the fixed-column offsets are computed,
+    // so sticky positions follow a drag without any extra bookkeeping.
+    const resized = applyColumnResize(leaves, resizable, resizedWidths);
+    const wraped = handleColumns(resized, measuredColumnWidths);
     const rows = parseHeaderRows(tree, wraped);
     return { wrapedColumns: wraped, headerRows: rows };
-  }, [childColumns, columns, rowSelection, expandable, measuredColumnWidths]);
+  }, [
+    childColumns,
+    columns,
+    rowSelection,
+    expandable,
+    measuredColumnWidths,
+    resizable,
+    resizedWidths,
+  ]);
 
   return {
     wrapedColumns,

package/src/Table/index.en-US.md

@@ -24,6 +24,7 @@ A table displays rows of data.
 <code src="./demo/column-filter.tsx" title="column filter" description="Table column filter"></code>
 <code src="./demo/grouping.tsx" title="Grouping" description="Multi-level header"></code>
 <code src="./demo/fixed.tsx" title="Fixed Columns" description="Fix columns on both sides and scroll horizontally to see the effect"></code>
+<code src="./demo/resizable.tsx" title="Resizable Columns" description="Drag the right edge of a header cell to resize it; arrow keys work too"></code>
 <code src="./demo/components-override.tsx" title="components override" description="tbody / row rendering that can be taken over by external libs (e.g. dnd-kit)"></code>
 ## API
 
@@ -58,6 +59,9 @@ A table displays rows of data.
 | rowKey | `string \| ((record: Record<string, any>) => string)` | Row key | `id` |
 | summary | `(pageData: Array<Record<string, any>>) => React.ReactNode` | Summary row | - |
 | tableLayout | `'auto' \| 'fixed'` | Table layout | - |
+| resizable | `boolean` | Allow resizing columns by dragging the right edge of the header cell; a single column can opt out via `column.resizable` | - |
+| onColumnResize | `(width: number, column: WrapedColumnProps) => void` | Fired on every width change while dragging | - |
+| onColumnResizeEnd | `(width: number, column: WrapedColumnProps) => void` | Fired once a resize interaction finishes | - |
 | virtual | `boolean` | Virtual list | - |
 | onChange | `({ pagination, filters, sorter, currentDataSource, action }) => void` | Change callback | - |
 | onRow | `(record: Record<string, any>, index: number) => Record<string, any>` | Custom row props | - |
@@ -78,6 +82,9 @@ A table displays rows of data.
 | dataIndex | `string` | Data index | - |
 | key | `string \| number` | Unique key | - |
 | width | `number \| string` | Column width | - |
+| resizable | `boolean` | Whether this column is resizable; inherits the table level `resizable` when unset | - |
+| minWidth | `number` | Lower bound (px) applied while resizing | `40` |
+| maxWidth | `number` | Upper bound (px) applied while resizing | - |
 | title | `React.ReactNode` | Column title | - |
 | helper | `string \| React.ReactNode` | Help icon for column header | - |
 | children | `ColumnProps[]` | Sub-columns for header grouping (multi-level header); use `render` for custom cell content | - |

package/src/Table/index.zh-CN.md

@@ -25,6 +25,7 @@ toc: 'content'
 <code src="./demo/merge-cell.tsx" title="合并单元格" description="合并单元格的表格"></code>
 <code src="./demo/grouping.tsx" title="表头分组" description="多级表头"></code>
 <code src="./demo/fixed.tsx" title="固定列" description="固定表格左右列，横向滚动可查看效果"></code>
+<code src="./demo/resizable.tsx" title="列宽调整" description="拖动表头右边缘调整列宽，支持键盘左右方向键"></code>
 <code src="./demo/summary.tsx" title="统计" description="表格的统计行"></code>
 <code src="./demo/filter.tsx" title="筛选" description="表格的筛选功能"></code>
 <code src="./demo/column-filter.tsx" title="列筛选" description="表格的列筛选功能"></code>
@@ -63,6 +64,9 @@ toc: 'content'
 | rowKey            | `string \| ((record: Record<string, any>) => string)`                       | 设置行的唯一键                       | `id`   |
 | summary           | `(pageData: Array<Record<string, any>>) => React.ReactNode`                 | 总结栏                               | -      |
 | tableLayout       | `'auto' \| 'fixed'`                                                         | 设置Table布局                        | -      |
+| resizable         | `boolean`                                                                   | 是否允许拖动表头右边缘调整列宽，可用 `column.resizable` 单独关闭某列 | -      |
+| onColumnResize    | `(width: number, column: WrapedColumnProps) => void`                        | 拖动过程中每次宽度变化的回调         | -      |
+| onColumnResizeEnd | `(width: number, column: WrapedColumnProps) => void`                        | 一次拖动结束时的回调                 | -      |
 | virtual           | `boolean`                                                                   | 是否开启虚拟列表                     | -      |
 | onChange          | `({ pagination, filters, sorter, currentDataSource, action }) => void`      | 分页，排序，筛选发生变化时的回调函数 | -      |
 | onRow             | `(record: Record<string, any>, index: number) => Record<string, any>`       | 自定义行属性                         | -      |
@@ -83,6 +87,9 @@ toc: 'content'
 | dataIndex    | `string`                                                             | 行数据索引                     | -      |
 | key          | `string \| number`                                                   | 唯一key                        | -      |
 | width        | `number \| string`                                                   | 设置宽度                       | -      |
+| resizable    | `boolean`                                                            | 该列是否可拖动调整列宽，未设置时继承表格的 `resizable` | -      |
+| minWidth     | `number`                                                             | 调整列宽时的最小宽度（px）     | `40`   |
+| maxWidth     | `number`                                                             | 调整列宽时的最大宽度（px）     | -      |
 | title        | `React.ReactNode`                                                    | 设置列头显示文本               | -      |
 | helper       | `string \| React.ReactNode`                                          | 设置表头help 帮助图标          | -      |
 | children     | `ColumnProps[]`                                                     | 子列，用于表头分组（多级表头）；自定义单元格内容请用 `render` | -      |

package/src/Table/interface.ts

@@ -71,6 +71,21 @@ export interface HeadCellProps extends Omit<WrapedColumnProps, 'title'> {
   internalFilters?: { [dataIndex: string]: boolean }; // Whether this column is filtered
   onSort?: (dataIndex: string, sorter: any) => void;
   onInternalFilter?: (dataIndex: string, value: string) => void;
+  /**
+   * `resizeKey` of the column currently being dragged, if any
+   */
+  resizingKey?: string | null;
+  /**
+   * Begin a pointer driven column resize. Injected by Table when resizing is on.
+   */
+  onResizeStart?: (
+    event: React.PointerEvent<HTMLElement>,
+    resizeKey: string,
+  ) => void;
+  /**
+   * Nudge a column width by `delta` px, for keyboard driven resizing
+   */
+  onResizeStep?: (resizeKey: string, delta: number) => void;
   /**
    * Horizontal span, used for grouped header cells
    */
@@ -256,6 +271,20 @@ export interface ColumnProps {
    * Set width
    */
   width?: number | string;
+  /**
+   * Whether this column can be resized by dragging the right edge of its header
+   * cell. Falls back to the table level `resizable` when not set.
+   */
+  resizable?: boolean;
+  /**
+   * Lower bound (in px) applied while resizing this column
+   * @default 40
+   */
+  minWidth?: number;
+  /**
+   * Upper bound (in px) applied while resizing this column
+   */
+  maxWidth?: number;
   /**
    * Set header display text
    */
@@ -295,6 +324,12 @@ export interface WrapedColumnProps
    * Whether this is the first column fixed to the right
    */
   isFixedRightFirst?: boolean;
+  /**
+   * Stable identity of this leaf column, used as the key of the resized width
+   * map. Only assigned to leaf columns, so its presence also marks a column as
+   * a valid resize target (group header cells never carry one).
+   */
+  resizeKey?: string;
   /**
    * prefixCls
    */
@@ -640,6 +675,23 @@ export interface TableProps
    * Set table layout
    */
   tableLayout?: 'auto' | 'fixed'; // Table layout, act on table tag
+  /**
+   * Whether columns can be resized by dragging the right edge of their header
+   * cell. Individual columns can opt out with `column.resizable: false`.
+   *
+   * The first drag snapshots the rendered width of every column and switches the
+   * table to a px controlled `table-layout: fixed`, so column widths stay exactly
+   * where they are dragged instead of being redistributed by the browser.
+   */
+  resizable?: boolean;
+  /**
+   * Fired on every width change while a column is being dragged
+   */
+  onColumnResize?: (width: number, column: WrapedColumnProps) => void;
+  /**
+   * Fired once when a column resize interaction finishes
+   */
+  onColumnResizeEnd?: (width: number, column: WrapedColumnProps) => void;
   /**
    * Whether to enable virtual list
    */

package/src/Table/style/index.less

@@ -71,6 +71,48 @@
     }
   }
 
+  // Sits inside the header cell's right padding so it never overlaps the sorter
+  // or filter controls, which are laid out against the content edge.
+  &-resize-handle {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 2;
+    width: var(--yee-table-resize-handle-width);
+    height: 100%;
+    cursor: col-resize;
+    background-color: transparent;
+    touch-action: none;
+    user-select: none;
+
+    &::after {
+      position: absolute;
+      content: '';
+      top: 25%;
+      right: calc(var(--yee-table-resize-handle-width) / 2 - 1px);
+      width: 2px;
+      height: 50%;
+      background-color: transparent;
+    }
+
+    &:hover::after,
+    &:focus-visible::after,
+    &-active::after {
+      background-color: var(--yee-primary-color);
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  // While dragging, the pointer leaves the handle constantly; keep the cursor and
+  // the selection lock consistent across the whole table.
+  &-resizing {
+    cursor: col-resize;
+    user-select: none;
+  }
+
   &-filter {
     max-height: var(--yee-table-filter-popup-height);
     background-color: var(--yee-table-filter-list-bg-color);