From 063c06f9c6b53fab9bea5f51af7b0732e7129d1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9E=9C=E5=86=BB=E6=A9=99?= <shifeng199307@gmail.com>
Date: Thu, 27 Apr 2023 21:04:29 +0800
Subject: [PATCH] fix: table resizable not work && type error (#6514)

---
 components/table/Table.tsx       |  1 +
 components/table/style/index.ts  |  2 ++
 components/table/style/resize.ts | 52 ++++++++++++++++++++++++++++++++
 3 files changed, 55 insertions(+)
 create mode 100644 components/table/style/resize.ts

diff --git a/components/table/Table.tsx b/components/table/Table.tsx
index 1d57c6cbb..19428a765 100644
--- a/components/table/Table.tsx
+++ b/components/table/Table.tsx
@@ -106,6 +106,7 @@ export interface TableProps<RecordType = DefaultRecordType>
     sorter: SorterResult<RecordType> | SorterResult<RecordType>[],
     extra: TableCurrentDataSource<RecordType>,
   ) => void;
+  onResizeColumn?: (w: number, col: ColumnType) => void;
   rowSelection?: TableRowSelection<RecordType>;
 
   getPopupContainer?: GetPopupContainer;
diff --git a/components/table/style/index.ts b/components/table/style/index.ts
index 1dd0becd4..d5ad893ee 100644
--- a/components/table/style/index.ts
+++ b/components/table/style/index.ts
@@ -13,6 +13,7 @@ import genRadiusStyle from './radius';
 import genRtlStyle from './rtl';
 import genSelectionStyle from './selection';
 import genSizeStyle from './size';
+import genResizeStyle from './resize';
 import genSorterStyle from './sorter';
 import genStickyStyle from './sticky';
 import genSummaryStyle from './summary';
@@ -404,6 +405,7 @@ export default genComponentStyleHook('Table', token => {
     genStickyStyle(tableToken),
     genEllipsisStyle(tableToken),
     genSizeStyle(tableToken),
+    genResizeStyle(tableToken),
     genRtlStyle(tableToken),
   ];
 });
diff --git a/components/table/style/resize.ts b/components/table/style/resize.ts
new file mode 100644
index 000000000..e46dc0deb
--- /dev/null
+++ b/components/table/style/resize.ts
@@ -0,0 +1,52 @@
+// 此样式是vue版本独有样式，react版本没有拖拽改变列宽度功能
+import type { CSSObject } from '../../_util/cssinjs';
+import type { GenerateStyle } from '../../theme/internal';
+import type { TableToken } from './index';
+
+const genResizeStyle: GenerateStyle<TableToken, CSSObject> = token => {
+  const { componentCls } = token;
+
+  return {
+    [`${componentCls}-wrapper ${componentCls}-resize-handle`]: {
+      position: 'absolute',
+      top: 0,
+      height: '100% !important',
+      bottom: 0,
+      left: ' auto !important',
+      right: ' -8px',
+      cursor: 'col-resize',
+      touchAction: 'none',
+      userSelect: 'auto',
+      width: '16px',
+      zIndex: 1,
+      [`&-line`]: {
+        display: 'block',
+        width: '1px',
+        marginLeft: '7px',
+        height: '100% !important',
+        backgroundColor: token.colorPrimary,
+        opacity: 0,
+      },
+      [`&:hover &-line`]: {
+        opacity: 1,
+      },
+    },
+    [`${componentCls}-wrapper  ${componentCls}-resize-handle.dragging`]: {
+      overflow: 'hidden',
+      [`${componentCls}-resize-handle-line`]: {
+        opacity: 1,
+      },
+      [`&:before`]: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        content: '" "',
+        width: '200vw',
+        transform: 'translateX(-50%)',
+        opacity: 0,
+      },
+    },
+  };
+};
+
+export default genResizeStyle;