From 5fd741bf2178af331a0dfb52d25a44e23430fb3c Mon Sep 17 00:00:00 2001 From: mgrdevport Date: Wed, 31 Jan 2018 08:07:53 +0100 Subject: [PATCH] Pass name prop down to the table selection input (#9054) --- components/table/SelectionBox.tsx | 20 +++-- components/table/Table.tsx | 2 +- .../table/__tests__/SelectionBox.test.js | 79 +++++++++++++------ .../__tests__/Table.rowSelection.test.js | 3 + .../__tests__/__snapshots__/demo.test.js.snap | 4 + components/table/demo/row-selection.md | 1 + components/table/interface.tsx | 1 + 7 files changed, 75 insertions(+), 35 deletions(-) diff --git a/components/table/SelectionBox.tsx b/components/table/SelectionBox.tsx index cb67e4fa8a..17a6f0b60d 100644 --- a/components/table/SelectionBox.tsx +++ b/components/table/SelectionBox.tsx @@ -45,26 +45,24 @@ export default class SelectionBox extends React.Component + ); + } else { + return ( + ); } - - return ( - - ); } } diff --git a/components/table/Table.tsx b/components/table/Table.tsx index 0e01cd033d..f761ac0047 100755 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -597,9 +597,9 @@ export default class Table extends React.Component, TableState< type={type} store={this.store} rowIndex={rowIndex} - disabled={props.disabled} onChange={handleChange} defaultSelection={this.getDefaultSelection()} + {...props} /> ); diff --git a/components/table/__tests__/SelectionBox.test.js b/components/table/__tests__/SelectionBox.test.js index 6b501d4f3b..11564ec96c 100644 --- a/components/table/__tests__/SelectionBox.test.js +++ b/components/table/__tests__/SelectionBox.test.js @@ -3,16 +3,18 @@ import { mount } from 'enzyme'; import createStore from '../createStore'; import SelectionBox from '../SelectionBox'; +const getDefaultStore = (selectedRowKeys) => { + return createStore({ + selectedRowKeys: selectedRowKeys || [], + selectionDirty: false, + }); +}; + describe('SelectionBox', () => { it('unchecked by selectedRowKeys ', () => { - const store = createStore({ - selectedRowKeys: [], - selectionDirty: false, - }); - const wrapper = mount( {}} @@ -24,14 +26,9 @@ describe('SelectionBox', () => { }); it('checked by selectedRowKeys ', () => { - const store = createStore({ - selectedRowKeys: ['1'], - selectionDirty: false, - }); - const wrapper = mount( {}} @@ -43,14 +40,9 @@ describe('SelectionBox', () => { }); it('checked by defaultSelection', () => { - const store = createStore({ - selectedRowKeys: [], - selectionDirty: false, - }); - const wrapper = mount( {}} @@ -62,11 +54,7 @@ describe('SelectionBox', () => { }); it('checked when store change', () => { - const store = createStore({ - selectedRowKeys: [], - selectionDirty: false, - }); - + const store = getDefaultStore(); const wrapper = mount( { expect(wrapper.state()).toEqual({ checked: true }); }); + + it('passes props to Checkbox', () => { + const checkboxProps = { + name: 'testName', + id: 'testId', + }; + const wrapper = mount( + { + }} + defaultSelection={['1']} + {...checkboxProps} + /> + ); + wrapper.find('Checkbox').forEach((box) => { + expect(box.props().name).toEqual(checkboxProps.name); + expect(box.props().id).toEqual(checkboxProps.id); + }); + }); + + it('passes props to Radios', () => { + const radioProps = { + name: 'testName', + id: 'testId', + }; + const wrapper = mount( + { + }} + defaultSelection={['1']} + type="radio" + {...radioProps} + /> + ); + wrapper.find('Radio').forEach((radio) => { + expect(radio.props().name).toEqual(radioProps.name); + expect(radio.props().id).toEqual(radioProps.id); + }); + }); }); diff --git a/components/table/__tests__/Table.rowSelection.test.js b/components/table/__tests__/Table.rowSelection.test.js index 9b84cc06a9..ba250a0a77 100644 --- a/components/table/__tests__/Table.rowSelection.test.js +++ b/components/table/__tests__/Table.rowSelection.test.js @@ -77,6 +77,7 @@ describe('Table.rowSelection', () => { const rowSelection = { getCheckboxProps: record => ({ disabled: record.name === 'Lucy', + name: record.name, }), }; @@ -84,7 +85,9 @@ describe('Table.rowSelection', () => { const checkboxes = wrapper.find('input'); expect(checkboxes.at(1).props().disabled).toBe(false); + expect(checkboxes.at(1).props().name).toEqual(data[0].name); expect(checkboxes.at(2).props().disabled).toBe(true); + expect(checkboxes.at(2).props().name).toEqual(data[1].name); }); it('works with pagination', () => { diff --git a/components/table/__tests__/__snapshots__/demo.test.js.snap b/components/table/__tests__/__snapshots__/demo.test.js.snap index 8d70519c6c..12acf8af91 100644 --- a/components/table/__tests__/__snapshots__/demo.test.js.snap +++ b/components/table/__tests__/__snapshots__/demo.test.js.snap @@ -9302,6 +9302,7 @@ exports[`renders ./components/table/demo/row-selection.md correctly 1`] = ` > ({ disabled: record.name === 'Disabled User', // Column configuration not to be checked + name: record.name, }), }; diff --git a/components/table/interface.tsx b/components/table/interface.tsx index 3334d21fbc..fa78c8ea98 100644 --- a/components/table/interface.tsx +++ b/components/table/interface.tsx @@ -152,6 +152,7 @@ export interface SelectionBoxProps { type?: RowSelectionType; defaultSelection: string[]; rowIndex: string; + name?: string; disabled?: boolean; onChange: React.ChangeEventHandler; }