perf: optimize tootipRender

extra:
1. update vitest
2. fix type
3. remove import `css` in playground

.npmrc

@@ -1,2 +1,3 @@
 strict-peer-dependencies=false
+auto-install-peers=false
 ignore-workspace-root-check=true

README.md

@@ -12,24 +12,35 @@
 
 ## 安装
 
-```bash
+```sh
+npm i use-antd-resizable-header
+```
+
+or 
+```sh
+yarn add use-antd-resizable-header
+```
+or
+
+```sh
 pnpm add use-antd-resizable-header
 ```
 
 ## API
 
 ### Properties
 
-| Name           | Type             | Default   | Description                                      |
-| -------------- | ---------------- | --------- | ------------------------------------------------ |
-| columns        | ColumnType[]     | undefined | antd table 的 columns                            |
-| defaultWidth   | number           | 120       | 某一列不能拖动，设置该列的最小展示宽度，默认 120 |
-| minConstraints | number           | 60        | 拖动最小宽度 默认 60                             |
-| maxConstraints | number           | Infinity  | 拖动最大宽度 默认无穷                            |
-| cache          | boolean          | true      | 是否缓存宽度，避免渲染重置拖拽宽度               |
-| columnsState   | ColumnsStateType | undefined | 列状态的配置，可以用来操作列拖拽宽度             |
-| onResizeStart  | Function         | undefined | 开始拖拽时触发                                   |
-| onResizeEnd    | Function         | undefined | 结束拖拽时触发                                   |
+| 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 |
 
 ### Return
 
@@ -47,29 +58,41 @@ pnpm add use-antd-resizable-header
 - **若 column 未传入`dataIndex`，请传入一个唯一的`key`，否则按照将按照 column 的序号 index 计算唯一 key**
 - **若 column 有副作用，请把依赖项传入 useMemo deps 中**
 
+## 更新
+
+- v2.9.0起，不需要再手动引入css样式文件
+- 请安装 `use-antd-resizable-header`，而非 `@minko-fe/use-antd-resizable-header`
+
 ## Example
 
 ```tsx
 import ProTable from '@ant-design/pro-table'
-import { Button, Table } from 'antd'
+import { Button, Table, Tooltip } from 'antd'
 import { useAntdResizableHeader } from 'use-antd-resizable-header'
 
 function App() {
-  const columns = []
-
+  const columns: ColumnsType<object> = []
   const { components, resizableColumns, tableWidth, resetColumns } = 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={resizableColumns} components={components} dataSource={data} scroll={{ x: tableWidth }} />
+      <ProTable columns={proResizableColumns} components={proComponents} dataSource={data} scroll={{ x: proTableWidth }} />
       <Button onClick={() => resetColumns()}>重置宽度</Button>
     </>
   )

package.json

@@ -66,7 +66,7 @@
     "@types/react": "^18.2.28",
     "@types/react-dom": "^18.2.13",
     "@types/react-resizable": "^3.0.5",
-    "@vitest/ui": "^0.29.2",
+    "@vitest/ui": "^0.34.0",
     "antd": "^5.3.0",
     "bumpp": "^9.0.0",
     "conventional-changelog-cli": "^4.1.0",
@@ -82,6 +82,6 @@
     "tsup": "^7.2.0",
     "typescript": "^5.2.2",
     "vite": "^4.1.4",
-    "vitest": "^0.29.2"
+    "vitest": "^0.34.0"
   }
 }

playground/src/44/index.tsx

@@ -1,6 +1,5 @@
 import ProTable from '@ant-design/pro-table'
 import { useAntdResizableHeader } from 'use-antd-resizable-header'
-import 'use-antd-resizable-header/dist/style.css'
 
 const columns: any[] = [
   {

playground/src/67/index.tsx

@@ -4,12 +4,12 @@ import { useState } from 'react'
 import { useAntdResizableHeader } from 'use-antd-resizable-header'
 
 export default function () {
-  const [proCols, _setProCols] = useState<ProColumns<any>[]>([])
+  const [proCols, _setProCols] = useState<ProColumns[]>([])
   const { resizableColumns: proResizableColumns } = useAntdResizableHeader({
     columns: proCols,
   })
 
-  const [cols, _setCols] = useState<ColumnsType<any>>([{ title: 'Name', dataIndex: 'name' }])
+  const [cols, _setCols] = useState<ColumnsType<object>>([])
   const { resizableColumns } = useAntdResizableHeader({
     columns: cols,
   })

playground/src/App.tsx

@@ -19,8 +19,8 @@ export default function App() {
   const routes = Object.keys(modules).map((key) => {
     return {
       path: key.replace('./', '').replace('/index.tsx', ''),
-      /* @vite-ignore */
-      component: () => import(key),
+
+      component: () => import(/* @vite-ignore */ key),
     }
   })