@hi-ui/table 4.6.0 → 4.7.0-alpha.0

package/lib/cjs/hooks/use-col-width.js

@@ -25,7 +25,8 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var useColWidth = function useColWidth(_ref) {
   var resizable = _ref.resizable,
     columns = _ref.columns,
-    virtual = _ref.virtual;
+    virtual = _ref.virtual,
+    onResize = _ref.onResize;
   var measureRowElementRef = React__default["default"].useRef(null);
   // 是否重新设置过表格每列宽度
   var hasResetWidths = React__default["default"].useRef(false);
@@ -194,7 +195,7 @@ var useColWidth = function useColWidth(_ref) {
   /**
    * 列宽拖拽 resize，只处理拖拽线两边的列宽度
    */
-  var onColumnResizable = React__default["default"].useCallback(function (_, _ref3, index) {
+  var onColumnResizable = React__default["default"].useCallback(function (evt, _ref3, index) {
     var size = _ref3.size;
     var minWidth = minColWidth[index];
     var anotherMinWidth = minColWidth[index + 1];
@@ -208,9 +209,10 @@ var useColWidth = function useColWidth(_ref) {
       }
       nextColWidths[index] = nextWidth;
       nextColWidths[index + 1] = anotherWidth;
+      onResize === null || onResize === void 0 ? void 0 : onResize(evt, size, index, nextColWidths);
       return nextColWidths;
     });
-  }, [minColWidth]);
+  }, [minColWidth, onResize]);
   var getColgroupProps = React__default["default"].useCallback(function (column, index) {
     var width = colWidths[index] || undefined;
     return {

package/lib/cjs/use-table.js

@@ -91,7 +91,8 @@ var useTable = function useTable(_a) {
     scrollbar = _a.scrollbar,
     rowClassName = _a.rowClassName,
     cellClassName = _a.cellClassName,
-    rootProps = tslib.__rest(_a, ["data", "columns", "defaultFixedToColumn", "fixedToColumn", "onFixedToColumn", "scrollWidth", "resizable", "errorRowKeys", "highlightedColKeys", "highlightedRowKeys", "showColHighlight", "showRowHighlight", "highlightRowOnDoubleClick", "defaultExpandedRowKeys", "expandedRowKeys", "onExpand", "defaultExpandAll", "onLoadChildren", "maxHeight", "sticky", "stickyTop", "draggable", "onDragStart", "onDrop", "onDropEnd", "showColMenu", "rowSelection", "cellRender", "footerRender", "fieldKey", "virtual", "scrollbar", "rowClassName", "cellClassName"]);
+    onResize = _a.onResize,
+    rootProps = tslib.__rest(_a, ["data", "columns", "defaultFixedToColumn", "fixedToColumn", "onFixedToColumn", "scrollWidth", "resizable", "errorRowKeys", "highlightedColKeys", "highlightedRowKeys", "showColHighlight", "showRowHighlight", "highlightRowOnDoubleClick", "defaultExpandedRowKeys", "expandedRowKeys", "onExpand", "defaultExpandAll", "onLoadChildren", "maxHeight", "sticky", "stickyTop", "draggable", "onDragStart", "onDrop", "onDropEnd", "showColMenu", "rowSelection", "cellRender", "footerRender", "fieldKey", "virtual", "scrollbar", "rowClassName", "cellClassName", "onResize"]);
   /**
    * 获取 key 字段值
    */
@@ -183,7 +184,8 @@ var useTable = function useTable(_a) {
       data: data,
       columns: columns,
       resizable: resizable,
-      virtual: virtual
+      virtual: virtual,
+      onResize: onResize
     }),
     measureRowElementRef = _useColWidth.measureRowElementRef,
     getColgroupProps = _useColWidth.getColgroupProps,

package/lib/esm/hooks/use-col-width.js

@@ -13,7 +13,8 @@ import { useUpdateEffect } from '@hi-ui/use-update-effect';
 var useColWidth = function useColWidth(_ref) {
   var resizable = _ref.resizable,
     columns = _ref.columns,
-    virtual = _ref.virtual;
+    virtual = _ref.virtual,
+    onResize = _ref.onResize;
   var measureRowElementRef = React__default.useRef(null);
   // 是否重新设置过表格每列宽度
   var hasResetWidths = React__default.useRef(false);
@@ -182,7 +183,7 @@ var useColWidth = function useColWidth(_ref) {
   /**
    * 列宽拖拽 resize，只处理拖拽线两边的列宽度
    */
-  var onColumnResizable = React__default.useCallback(function (_, _ref3, index) {
+  var onColumnResizable = React__default.useCallback(function (evt, _ref3, index) {
     var size = _ref3.size;
     var minWidth = minColWidth[index];
     var anotherMinWidth = minColWidth[index + 1];
@@ -196,9 +197,10 @@ var useColWidth = function useColWidth(_ref) {
       }
       nextColWidths[index] = nextWidth;
       nextColWidths[index + 1] = anotherWidth;
+      onResize === null || onResize === void 0 ? void 0 : onResize(evt, size, index, nextColWidths);
       return nextColWidths;
     });
-  }, [minColWidth]);
+  }, [minColWidth, onResize]);
   var getColgroupProps = React__default.useCallback(function (column, index) {
     var width = colWidths[index] || undefined;
     return {

package/lib/esm/use-table.js

@@ -79,7 +79,8 @@ var useTable = function useTable(_a) {
     scrollbar = _a.scrollbar,
     rowClassName = _a.rowClassName,
     cellClassName = _a.cellClassName,
-    rootProps = __rest(_a, ["data", "columns", "defaultFixedToColumn", "fixedToColumn", "onFixedToColumn", "scrollWidth", "resizable", "errorRowKeys", "highlightedColKeys", "highlightedRowKeys", "showColHighlight", "showRowHighlight", "highlightRowOnDoubleClick", "defaultExpandedRowKeys", "expandedRowKeys", "onExpand", "defaultExpandAll", "onLoadChildren", "maxHeight", "sticky", "stickyTop", "draggable", "onDragStart", "onDrop", "onDropEnd", "showColMenu", "rowSelection", "cellRender", "footerRender", "fieldKey", "virtual", "scrollbar", "rowClassName", "cellClassName"]);
+    onResize = _a.onResize,
+    rootProps = __rest(_a, ["data", "columns", "defaultFixedToColumn", "fixedToColumn", "onFixedToColumn", "scrollWidth", "resizable", "errorRowKeys", "highlightedColKeys", "highlightedRowKeys", "showColHighlight", "showRowHighlight", "highlightRowOnDoubleClick", "defaultExpandedRowKeys", "expandedRowKeys", "onExpand", "defaultExpandAll", "onLoadChildren", "maxHeight", "sticky", "stickyTop", "draggable", "onDragStart", "onDrop", "onDropEnd", "showColMenu", "rowSelection", "cellRender", "footerRender", "fieldKey", "virtual", "scrollbar", "rowClassName", "cellClassName", "onResize"]);
   /**
    * 获取 key 字段值
    */
@@ -171,7 +172,8 @@ var useTable = function useTable(_a) {
       data: data,
       columns: columns,
       resizable: resizable,
-      virtual: virtual
+      virtual: virtual,
+      onResize: onResize
     }),
     measureRowElementRef = _useColWidth.measureRowElementRef,
     getColgroupProps = _useColWidth.getColgroupProps,

package/lib/types/context.d.ts

@@ -37,7 +37,7 @@ export declare const TableProvider: import("react").Provider<(Omit<{
     onTreeNodeSwitch: (node: import("./types").TableRowEventData, onlyExpand?: any) => Promise<void>;
     resizable: boolean;
     colWidths: number[];
-    onColumnResizable: (_: any, { size }: any, index: number) => void;
+    onColumnResizable: (evt: any, { size }: any, index: number) => void;
     isTree: boolean;
     cellRender: ((text: any) => import("react").ReactNode) | undefined;
     footerRender: ((...nodes: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>[]) => import("react").ReactNode) | undefined;
@@ -152,7 +152,7 @@ export declare const useTableContext: () => Omit<{
     onTreeNodeSwitch: (node: import("./types").TableRowEventData, onlyExpand?: any) => Promise<void>;
     resizable: boolean;
     colWidths: number[];
-    onColumnResizable: (_: any, { size }: any, index: number) => void;
+    onColumnResizable: (evt: any, { size }: any, index: number) => void;
     isTree: boolean;
     cellRender: ((text: any) => import("react").ReactNode) | undefined;
     footerRender: ((...nodes: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>[]) => import("react").ReactNode) | undefined;

package/lib/types/hooks/use-col-width.d.ts

@@ -1,13 +1,15 @@
 import React from 'react';
 import { FlattedTableColumnItemData, TableColumnItem, TableRowRecord } from '../types';
-export declare const useColWidth: ({ resizable, data, columns, virtual, }: {
+import { ResizeCallbackData } from 'react-resizable';
+export declare const useColWidth: ({ resizable, data, columns, virtual, onResize, }: {
     resizable: boolean;
     data: TableRowRecord[];
     columns: TableColumnItem[];
     virtual?: boolean | undefined;
+    onResize?: ((e: React.SyntheticEvent, data: ResizeCallbackData, index: number, columnsWidth: number[]) => void) | undefined;
 }) => {
     measureRowElementRef: React.MutableRefObject<HTMLTableRowElement | null>;
-    onColumnResizable: (_: any, { size }: any, index: number) => void;
+    onColumnResizable: (evt: any, { size }: any, index: number) => void;
     getColgroupProps: (column: FlattedTableColumnItemData, index: number) => {
         style: {
             width: number | undefined;

package/lib/types/use-table.d.ts

@@ -2,7 +2,8 @@ import React from 'react';
 import { PaginationProps } from '@hi-ui/pagination';
 import { ScrollbarProps } from '@hi-ui/scrollbar';
 import { TableColumnItem, TableFrozenColumnOptions, TableRowEventData, TableRowSelection, FlattedTableColumnItemData, FlattedTableRowData } from './types';
-export declare const useTable: ({ data, columns: columnsProp, defaultFixedToColumn, fixedToColumn: fixedToColumnProp, onFixedToColumn, scrollWidth, resizable, errorRowKeys, highlightedColKeys: highlightedColKeysProp, highlightedRowKeys: highlightedRowKeysProp, showColHighlight, showRowHighlight, highlightRowOnDoubleClick, defaultExpandedRowKeys, expandedRowKeys: expandRowKeysProp, onExpand, defaultExpandAll, onLoadChildren, maxHeight, sticky, stickyTop, draggable, onDragStart, onDrop: onDropProp, onDropEnd, showColMenu, rowSelection, cellRender, footerRender, fieldKey, virtual, scrollbar, rowClassName, cellClassName, ...rootProps }: UseTableProps) => {
+import { ResizeCallbackData } from 'react-resizable';
+export declare const useTable: ({ data, columns: columnsProp, defaultFixedToColumn, fixedToColumn: fixedToColumnProp, onFixedToColumn, scrollWidth, resizable, errorRowKeys, highlightedColKeys: highlightedColKeysProp, highlightedRowKeys: highlightedRowKeysProp, showColHighlight, showRowHighlight, highlightRowOnDoubleClick, defaultExpandedRowKeys, expandedRowKeys: expandRowKeysProp, onExpand, defaultExpandAll, onLoadChildren, maxHeight, sticky, stickyTop, draggable, onDragStart, onDrop: onDropProp, onDropEnd, showColMenu, rowSelection, cellRender, footerRender, fieldKey, virtual, scrollbar, rowClassName, cellClassName, onResize, ...rootProps }: UseTableProps) => {
     getColgroupProps: (column: FlattedTableColumnItemData, index: number) => {
         style: {
             width: number | undefined;
@@ -39,7 +40,7 @@ export declare const useTable: ({ data, columns: columnsProp, defaultFixedToColu
     onTreeNodeSwitch: (node: TableRowEventData, onlyExpand?: any) => Promise<void>;
     resizable: boolean;
     colWidths: number[];
-    onColumnResizable: (_: any, { size }: any, index: number) => void;
+    onColumnResizable: (evt: any, { size }: any, index: number) => void;
     isTree: boolean;
     cellRender: ((text: any) => React.ReactNode) | undefined;
     footerRender: ((...nodes: React.ReactElement[]) => React.ReactNode) | undefined;
@@ -296,5 +297,9 @@ export interface UseTableProps {
      * 设置单元格类名
      */
     cellClassName?: (record: Record<string, any>, column: Record<string, any>, index: number) => string;
+    /**
+     * resizable 模式下，设置列宽变化时触发的回调
+     */
+    onResize?: (e: React.SyntheticEvent, data: ResizeCallbackData, index: number, columnsWidth: number[]) => void;
 }
 export declare type UseTableReturn = ReturnType<typeof useTable>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/table",
-  "version": "4.6.0",
+  "version": "4.7.0-alpha.0",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",