Merge pull request #95 from hemengke1997/version-3

use-antd-resizable-header@3.0.0

.github/workflows/pages.yml

@@ -0,0 +1,40 @@
+name: Github Pages Deploy
+
+on:
+  push:
+    branches:
+      - master
+
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    if: contains(github.event.head_commit.message, 'release') || contains(github.event.head_commit.message, 'deploy')
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          persist-credentials: false
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2.0.1
+        with:
+          version: 9.7.1
+
+      - name: Install Dependencies
+        run: |
+          pnpm install
+
+      - name: Build
+        run: |
+          pnpm run build:pages
+
+      - name: Deploy
+        uses: JamesIves/github-pages-deploy-action@releases/v3
+        with:
+          ACCESS_TOKEN: ${{ secrets.GHB_TOKEN }}
+          BRANCH: gh-pages
+          FOLDER: playground/dist

.github/workflows/publish.yml

@@ -17,13 +17,13 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: 20.x
           registry-url: https://registry.npmjs.org/
 
       - name: Install pnpm
         uses: pnpm/action-setup@v2.0.1
         with:
-          version: 7.27.1
+          version: 9.7.1
 
       - name: Install Dependencies
         run: pnpm install --no-frozen-lockfile

.github/workflows/release.yml

@@ -17,7 +17,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 20.x
 
       - run: npx changelogithub
         env:

.github/workflows/test.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 20.x
 
       - name: Install dependencies
         run: npx pnpm install --no-frozen-lockfile

README.md

@@ -8,39 +8,33 @@
 
 ## 在线地址
 
-[Demo](https://stackblitz.com/edit/use-antd-resizable-header-demo?file=src/App.tsx)
+[Demo](https://hemengke1997.github.io/use-antd-resizable-header/)
+[Stackblitz](https://stackblitz.com/edit/use-antd-resizable-header-demo?file=src/App.tsx)
 
 ## 安装
 
 ```sh
 npm i use-antd-resizable-header
 ```
 
-or 
-```sh
-yarn add use-antd-resizable-header
-```
-or
+## 升级最新版本注意事项
 
-```sh
-pnpm add use-antd-resizable-header
-```
+[CHANGELOG](./docs/3.md)
 
 ## API
 
 ### Properties
 
-| Name           | Type             | Default   | Description                                          |
-| -------------- | ---------------- | --------- | ---------------------------------------------------- |
-| columns        | ColumnType[]     | undefined | antd table 的 columns                                |
-| defaultWidth   | number           | 120       | 某一列不能拖动，设置该列的最小展示宽度，默认 120     |
-| minConstraints | number           | 60        | 拖动最小宽度 默认 defaultWidth/2                     |
-| maxConstraints | number           | Infinity  | 拖动最大宽度 默认无穷                                |
-| cache          | boolean          | true      | 是否缓存宽度，避免渲染重置拖拽宽度                   |
-| columnsState   | ColumnsStateType | undefined | 列状态的配置，可以用来操作列拖拽宽度                 |
-| onResizeStart  | Function         | undefined | 开始拖拽时触发                                       |
-| onResizeEnd    | Function         | undefined | 结束拖拽时触发                                       |
-| tooltipRender  | Function         | undefined | 使用tooltip渲染表格头，当表格头文字溢出时展示tooltip |
+| Name             | Type                  | Default   | Description                                      |
+| ---------------- | --------------------- | --------- | ------------------------------------------------ |
+| columns          | ResizableColumnType[] | undefined | antd table 的 columns                            |
+| defaultWidth     | number                | 120       | 某一列不能拖动，设置该列的最小展示宽度，默认 120 |
+| minConstraints   | number                | 60        | 拖动最小宽度 默认 defaultWidth/2                 |
+| maxConstraints   | number                | Infinity  | 拖动最大宽度 默认无穷                            |
+| columnsState     | ColumnsStateType      | undefined | 列状态的配置，可以用来操作列拖拽宽度             |
+| onResizeStart    | Function              | undefined | 开始拖拽时触发                                   |
+| onResizeEnd      | Function              | undefined | 结束拖拽时触发                                   |
+| debounceWaitTime | number                | 1000      | 窗口resize时重新渲染的防抖时间，单位 ms          |
 
 ### Return
 
@@ -49,174 +43,88 @@ pnpm add use-antd-resizable-header
 | resizableColumns | 拖拽 columns，用在 Table columns        |
 | components       | 拖拽 components， 用在 Table components |
 | tableWidth       | 表格宽度，用在 Table width              |
-| resetColumns     | 重置宽度方法                            |
+| resetColumns     | 重置                                    |
+| refresh          | 刷新组件                                |
 
 ## 注意事项
 
-- **默认拖动颜色为`#000`，可通过`global`或设置 css 变量`--arh-color`设置颜色**
-- **至少一列不能拖动（width 不设置即可），[请保持至少一列的自适应](https://ant-design.gitee.io/components/table-cn/#components-table-demo-fixed-columns)**
+- **默认拖动颜色为`#000`，可通过`global`或设置 css 变量`--resizable-line-background`设置颜色**
+- **至少一列不能拖动（width 不设置即可），[请保持至少一列的自适应](https://ant-design.antgroup.com/components/table-cn#table-demo-fixed-columns)**
 - **若 column 未传入`dataIndex`，请传入一个唯一的`key`，否则按照将按照 column 的序号 index 计算唯一 key**
 - **若 column 有副作用，请把依赖项传入 useMemo deps 中**
 
-## Break-Change
-
-- v2.9.0起，不需要再手动引入css样式文件
-- 请安装 `use-antd-resizable-header`，而非 `@minko-fe/use-antd-resizable-header`
-
 ## Example
 
+### Antd Table
+
 ```tsx
-import ProTable from '@ant-design/pro-table'
-import { Button, Table, Tooltip } from 'antd'
-import { useAntdResizableHeader } from 'use-antd-resizable-header'
+import { Table, type TableColumnsType } from 'antd'
+import { useMemo } from 'react'
+import { type ResizableColumnsType, useAntdResizableHeader } from 'use-antd-resizable-header'
+
+
+type Columns = ResizableColumnsType<TableColumnsType>
 
 function App() {
-  const columns: ColumnsType<object> = []
-  const { components, resizableColumns, tableWidth, resetColumns } = useAntdResizableHeader({
+  const columns: Columns = []
+
+  const { components, resizableColumns, tableWidth, resetColumns, refresh } = useAntdResizableHeader({
     columns: useMemo(() => columns, []),
     // 保存拖拽宽度至本地localStorage
     columnsState: {
       persistenceKey: 'localKey',
       persistenceType: 'localStorage',
     },
-    tooltipRender: (props) => <Tooltip {...props} />,
-  })
-
-  const proColumns: ProColumns[] = []
-  const { components: proComponents, resizableColumns: proResizableColumns, tableWidth: proTableWidth, resetColumns: proResetColumns } = useAntdResizableHeader({
-      columns: useMemo(() => proColumns, []),
-      tooltipRender: (props) => <Tooltip {...props} />,
-    })
-
+  });
 
   return (
     <>
-      <Table columns={resizableColumns} components={components} dataSource={data} scroll={{ x: tableWidth }} />
-      <ProTable columns={proResizableColumns} components={proComponents} dataSource={data} scroll={{ x: proTableWidth }} />
-      <Button onClick={() => resetColumns()}>重置宽度</Button>
+      <Table
+        columns={resizableColumns}
+        components={components}
+        scroll={{ x: tableWidth }}
+      />
     </>
-  )
+  );
 }
 ```
 
-## 基本用例
-
-```css
-/* index.css */
---arh-color: red;
-```
+### ProTable
 
 ```tsx
-import { Space, Table, Tag } from 'antd'
-import React, { useReducer } from 'react'
-import { useAntdResizableHeader } from 'use-antd-resizable-header'
-
-const data = [
-  {
-    key: '1',
-    name: 'John Brown',
-    age: 32,
-    address: 'New York No. 1 Lake Park',
-    tags: ['nice', 'developer'],
-  },
-  {
-    key: '2',
-    name: 'Jim Green',
-    age: 42,
-    address: 'London No. 1 Lake Park',
-    tags: ['loser'],
-  },
-  {
-    key: '3',
-    name: 'Joe Black',
-    age: 32,
-    address: 'Sidney No. 1 Lake Park',
-    tags: ['cool', 'teacher'],
-  },
-]
-
-const Example: React.FC = () => {
-  const [, forceRender] = useReducer((s) => s + 1, 0)
-  const [deps, setDeps] = useState(0)
-
-  const columns = [
-    {
-      title: 'Name',
-      dataIndex: 'name',
-      key: 'name',
-      width: 300,
-      ellipsis: true,
-      render: (text) => (
-        <a onClick={() => setDeps((t) => t + 1)}>
-          {text}
-          {deps}
-        </a>
-      ),
-    },
-    {
-      title: 'Age',
-      dataIndex: 'age',
-      key: 'age',
-      ellipsis: true,
-      width: 200,
-    },
-    {
-      title: 'Address',
-      dataIndex: 'address',
-      key: 'address',
-      ellipsis: true,
-      width: 200,
-    },
-    {
-      title: 'Tags',
-      key: 'tags',
-      dataIndex: 'tags',
-      width: 200,
-      ellipsis: true,
-      render: (tags) => (
-        <>
-          {tags.map((tag) => {
-            let color = tag.length > 5 ? 'geekblue' : 'green'
-            if (tag === 'loser') {
-              color = 'volcano'
-            }
-            return (
-              <Tag color={color} key={tag}>
-                {tag.toUpperCase()}
-              </Tag>
-            )
-          })}
-        </>
-      ),
-    },
-    {
-      title: 'render',
-      key: 'action',
-      render: (text, record) => (
-        <Space size='middle'>
-          <a>Invite {record.name}</a>
-          <a
-            onClick={() => {
-              forceRender()
-              alert('render')
-            }}
-          >
-            render
-          </a>
-        </Space>
-      ),
-    },
-  ]
+import { type ProColumns, ProTable } from '@ant-design/pro-components'
+import { useMemo } from 'react'
 
-  const { components, resizableColumns, tableWidth } = useAntdResizableHeader({
-    columns: useMemo(() => columns, [deps]),
-    minConstraints: 50,
-  })
+type Columns = ResizableColumnsType<ProColumns[]>
 
-  return <Table columns={resizableColumns} components={components} dataSource={data} scroll={{ x: tableWidth }} />
+
+function App() {
+  const columns: Columns = []
+
+  const { components, resizableColumns, tableWidth, resetColumns, refresh } = useAntdResizableHeader({
+    columns: useMemo(() => columns, []),
+  });
+
+  return (
+    <>
+      <ProTable
+        columns={resizableColumns}
+        components={components}
+        scroll={{ x: tableWidth }}
+      />
+    </>
+  );
 }
 ```
 
+## 修改拖拽背景颜色
+
+```css
+/* index.css */
+--resizable-line-background: red;
+```
+
+
 ## 为什么需要 React.useMemo ?
 
 ### 如果不使用 useMemo