diff --git a/src/Table.jsx b/src/Table.jsx index 494a71526..bead2255b 100644 --- a/src/Table.jsx +++ b/src/Table.jsx @@ -583,6 +583,12 @@ export default class Table extends React.Component { } syncFixedTableRowHeight = () => { + const tableRect = this.tableNode.getBoundingClientRect(); + // If tableNode's height less than 0, suppose it is hidden and don't recalculate rowHeight. + // see: https://github.com/ant-design/ant-design/issues/4836 + if (tableRect.height !== undefined && tableRect.height <= 0) { + return; + } const { prefixCls } = this.props; const headRows = this.refs.headTable ? this.refs.headTable.querySelectorAll('thead') : diff --git a/tests/Table.fixedColumns.spec.js b/tests/Table.fixedColumns.spec.js index a49683346..2d62ffd22 100644 --- a/tests/Table.fixedColumns.spec.js +++ b/tests/Table.fixedColumns.spec.js @@ -60,4 +60,96 @@ describe('Table.fixedColumns', () => { expect(tables.at(1).find('tbody tr').at(0).is('.rc-table-row-hover')).toBe(false); expect(tables.at(2).find('tbody tr').at(0).is('.rc-table-row-hover')).toBe(false); }); + + it('calculate fixedColumns row height', () => { + const wrapper = mount( + + ); + const tableNode = wrapper.instance().tableNode; + const rows = tableNode.querySelectorAll('tr'); + const theads = tableNode.querySelectorAll('thead'); + const fixedLeftRows = tableNode.querySelectorAll('.rc-table-fixed-left tr'); + const fixedRightRows = tableNode.querySelectorAll('.rc-table-fixed-right tr'); + const rowHeight = '30px'; + + // see: + // https://github.com/airbnb/enzyme/issues/49#issuecomment-270250193 + // https://github.com/tmpvar/jsdom/issues/653 + function mockClientRect(node, rect) { + node.getBoundingClientRect = () => ({ + ...rect, + }); + } + function simulateTableShow() { + mockClientRect(tableNode, { + top: 0, + left: 0, + right: 500, + bottom: 300, + width: 500, + height: 300, + }); + theads.forEach(thead => { + mockClientRect(thead, { + top: 0, + left: 0, + right: 500, + bottom: 30, + width: 500, + height: 30, + }); + }); + + const height = parseInt(rowHeight, 10); + let i = 0; + rows.forEach(row => { + i = (rows.length / 3 === i ? 0 : (i + 1)); + mockClientRect(row, { + top: i * height, + left: 0, + right: 500, + bottom: (i + 1) * height, + width: 500, + height, + }); + }); + } + function simulateTableHidden() { + const rect = { + top: 0, + left: 0, + right: 0, + bottom: 0, + width: 0, + height: 0, + }; + mockClientRect(tableNode, rect); + mockClientRect(theads, rect); + rows.forEach(row => mockClientRect(row, rect)); + } + + //
is show. + simulateTableShow(); + wrapper.update(); + fixedLeftRows.forEach(tr => { + expect(tr.style.height).toBe(rowHeight); + }); + fixedRightRows.forEach(tr => { + expect(tr.style.height).toBe(rowHeight); + }); + + //
is hidden. + simulateTableHidden(); + wrapper.update(); + fixedLeftRows.forEach(tr => { + expect(tr.style.height).toBe(rowHeight); + }); + fixedRightRows.forEach(tr => { + expect(tr.style.height).toBe(rowHeight); + }); + }); }); diff --git a/tests/Table.spec.js b/tests/Table.spec.js index 9986e2223..5fa17a85f 100644 --- a/tests/Table.spec.js +++ b/tests/Table.spec.js @@ -102,6 +102,80 @@ describe('Table', () => { const wrapper = render(createTable({ scroll: { y: 200 } })); expect(renderToJson(wrapper)).toMatchSnapshot(); }); + + it('fire scroll event', () => { + const newColumns = [ + { title: 'title1', dataIndex: 'a', key: 'a', width: 100, fixed: 'left' }, + { title: 'title2', dataIndex: 'b', key: 'b' }, + { title: 'title3', dataIndex: 'c', key: 'c' }, + { title: 'title4', dataIndex: 'd', key: 'd', width: 100, fixed: 'right' }, + ]; + const newData = [ + { a: '123', b: 'xxxxxxxx', c: 3, d: 'hehe', key: '1' }, + { a: 'cdd', b: 'edd12221', c: 3, d: 'haha', key: '2' }, + ]; + const wrapper = mount( +
+ ); + const inst = wrapper.instance(); + const headTable = wrapper.ref('headTable'); + const bodyTable = wrapper.ref('bodyTable'); + const fixedColumnsBodyLeft = wrapper.ref('fixedColumnsBodyLeft'); + const fixedColumnsBodyRight = wrapper.ref('fixedColumnsBodyRight'); + + expect(inst.lastScrollLeft).toBe(undefined); + + // fire headTable scroll. + headTable.getNode().scrollTop = 0; + headTable.getNode().scrollLeft = 20; + headTable.simulate('mouseover'); + headTable.simulate('scroll'); + expect(bodyTable.getNode().scrollLeft).toBe(20); + expect(fixedColumnsBodyLeft.getNode().scrollTop).toBe(0); + expect(fixedColumnsBodyRight.getNode().scrollTop).toBe(0); + + expect(inst.lastScrollLeft).toBe(20); + + // fire bodyTable scroll. + bodyTable.getNode().scrollTop = 10; + bodyTable.getNode().scrollLeft = 40; + bodyTable.simulate('mouseover'); + bodyTable.simulate('scroll'); + expect(headTable.getNode().scrollLeft).toBe(40); + expect(fixedColumnsBodyLeft.getNode().scrollTop).toBe(10); + expect(fixedColumnsBodyRight.getNode().scrollTop).toBe(10); + + expect(inst.lastScrollLeft).toBe(40); + + // fire fixedColumnsBodyLeft scroll. + fixedColumnsBodyLeft.getNode().scrollTop = 30; + fixedColumnsBodyLeft.simulate('mouseover'); + fixedColumnsBodyLeft.simulate('scroll'); + expect(headTable.getNode().scrollLeft).toBe(40); + expect(bodyTable.getNode().scrollLeft).toBe(40); + expect(bodyTable.getNode().scrollTop).toBe(30); + expect(fixedColumnsBodyRight.getNode().scrollTop).toBe(30); + + expect(inst.lastScrollLeft).toBe(0); + + // fire fixedColumnsBodyRight scroll. + fixedColumnsBodyRight.getNode().scrollTop = 15; + fixedColumnsBodyRight.simulate('mouseover'); + fixedColumnsBodyRight.simulate('scroll'); + expect(headTable.getNode().scrollLeft).toBe(40); + expect(bodyTable.getNode().scrollLeft).toBe(40); + expect(bodyTable.getNode().scrollTop).toBe(15); + expect(fixedColumnsBodyLeft.getNode().scrollTop).toBe(15); + + expect(inst.lastScrollLeft).toBe(0); + }); }); describe('row click', () => {