Skip to content

Commit

Permalink
fix: column中有副作用时render问题 #7
Browse files Browse the repository at this point in the history
  • Loading branch information
@hemengke1997
hemengke1997 committed Dec 15, 2021
1 parent 0de06ac commit 274a973
Show file tree
Hide file tree
Showing 4 changed files with 98 additions and 203 deletions.
139 changes: 73 additions & 66 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
![preview](./image/new_preview.gif)

## 在线地址

[codesandbox](https://codesandbox.io/s/divine-silence-fl6b0?file=/src/App.tsx)

## 安装
Expand All @@ -20,6 +21,7 @@ yarn add use-antd-resizable-header
- **默认拖动颜色为`#000`，可通过`global`或设置 css 变量`--atrh-color`设置颜色**
- **至少一列不能拖动（width 不设置即可），[请保持最后至少一列的自适应](https://ant-design.gitee.io/components/table-cn/#components-table-demo-fixed-columns)**
- **若 column 未传入`dataIndex`，请传入一个唯一的`key`，否则按照将按照 column 的序号 index 计算唯一 key**
- **若 column 有副作用，请把依赖项传入 refreshDeps 中**
- **remenber import style**

## Example
Expand Down Expand Up @@ -92,76 +94,81 @@ const data = [

const Hello: React.FC = () => {
const [, forceRender] = useReducer((s) => s + 1, 0);

const columns = React.useMemo(() => {
return [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
width: 300,
ellipsis: true,
render: (text) => <a>{text}</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>
),
},
];
}, []);
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>
),
},
];

const { components, resizableColumns, tableWidth } = useATRH({
columns,
minConstraints: 50,
refreshDeps: [deps]
});

return (
Expand Down
145 changes: 15 additions & 130 deletions example/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import React from 'react';
import { Table } from 'antd';
import ProTable, { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import './App.css';
import useATRH from 'use-antd-resizable-header';
import 'use-antd-resizable-header/dist/style.css';
import 'antd/es/table/style/index.css';
import { useReducer } from 'react';
import { useEffect } from 'react';

const data: any[] = [];
for (let i = 0; i < 100; i++) {
Expand All @@ -16,8 +18,8 @@ for (let i = 0; i < 100; i++) {
});
}


function App() {
const [x, setX] = useReducer((s) => s + 1, 0);

const columns = [
{
Expand All @@ -36,58 +38,15 @@ function App() {
{
title: 'Column 1',
dataIndex: 'address',
key: '1',
width: 150,
},
{
title: 'Column 2',
dataIndex: 'address',
key: '2',
width: 150,
},
{
title: 'Column 3',
dataIndex: 'address',
key: '3',
width: 150,
},
{
title: 'Column 4',
dataIndex: 'address',
key: '4',
width: 150,
},
{
title: 'Column 5',
dataIndex: 'address',
key: '5',
width: 150,
},
{
title: 'Column 6',
dataIndex: 'address',
key: '6',
width: 150,
},
{
title: 'Column 7777777777777',
dataIndex: 'address',
key: '7',
width: 150,
},
{
title: 'Column 8',
dataIndex: 'address',
key: '8',
width: 150,
},
{
title: 'Column 9',
dataIndex: 'address',
key: '9',
width: 150,
title: 'test render',
dataIndex: 'testRender',
width: 200,
render: () => {
return <div onClick={() => setX()}>{x}</div>;
},
},
{ title: 'Column 10', dataIndex: 'address', key: '10' },
{
title: 'Action',
key: 'operation',
Expand All @@ -99,91 +58,17 @@ function App() {
},
];

const proColumns: ProColumns<any>[] = [
{
title: 'Name',
width: 100,
dataIndex: 'name',
key: 'name',
fixed: 'left',
},
{
title: 'Age',
width: 100,
dataIndex: 'age',
key: 'age',
},
{
title: 'Column 1',
dataIndex: 'address',
key: '1',
width: 150,
},
{
title: 'Column 2',
dataIndex: 'address',
key: '2',
width: 150,
},
{
title: 'Column 3',
dataIndex: 'address',
key: '3',
width: 150,
},
{
title: 'Column 4',
dataIndex: 'address',
key: '4',
width: 150,
},
{
title: 'Column 5',
dataIndex: 'address',
key: '5',
width: 150,
},
{
title: 'Column 6',
dataIndex: 'address',
key: '6',
width: 150,
},
{
title: 'Column 7777777777777',
dataIndex: 'address',
key: '7',
width: 150,
},
{
title: 'Column 8',
dataIndex: 'address',
key: '8',
width: 150,
},
{
title: 'Column 9',
dataIndex: 'address',
key: '9',
width: 150,
},
{ title: 'Column 10', dataIndex: 'address', key: '10' },
{
title: 'Action',
key: 'operation',
fixed: 'right',
width: 100,
render: () => <a>action</a>,
},
];
useEffect(() => {
console.log('x', x);
}, [x]);

const { components, resizableColumns, tableWidth } = useATRH({columns});
const { components, resizableColumns, tableWidth } = useATRH({ columns, refreshDeps: [x] });

const {
components: proComponents,
resizableColumns: proResizableColumns,
tableWidth: proTableWidth,
} = useATRH({columns: proColumns});
} = useATRH({ columns: columns });

return (
<div className="App">
Expand Down
Loading

0 comments on commit 274a973

Please sign in to comment.