mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 09:26:06 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

Pass name prop down to the table selection input (#9054)

Browse Source
This commit is contained in:
mgrdevport 2018-01-31 08:07:53 +01:00 committed by Wei Zhu
parent 842c7f21d9
commit 5fd741bf21
7 changed files with 76 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/table/SelectionBox.tsx
View File

@ -45,26 +45,24 @@ export default class SelectionBox extends React.Component<SelectionBoxProps, Sel
}
render() {
const { type, rowIndex, disabled, onChange } = this.props;
const { type, rowIndex, ...rest } = this.props;
const { checked } = this.state;
if (type === 'radio') {
return (
<Radio
disabled={disabled}
onChange={onChange}
value={rowIndex}
checked={checked}
value={rowIndex}
{...rest}
/>
);
} else {
return (
<Checkbox
checked={checked}
{...rest}
/>
);
}
return (
<Checkbox
checked={checked}
disabled={disabled}
onChange={onChange}
/>
);
}
}

2
components/table/Table.tsx
View File

@ -597,9 +597,9 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
type={type}
store={this.store}
rowIndex={rowIndex}
disabled={props.disabled}
onChange={handleChange}
defaultSelection={this.getDefaultSelection()}
{...props}
/>
</span>
);

79
components/table/__tests__/SelectionBox.test.js
View File

@ -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(
<SelectionBox
store={store}
store={getDefaultStore()}
rowIndex="1"
disabled={false}
onChange={() => {}}
@ -24,14 +26,9 @@ describe('SelectionBox', () => {
});
it('checked by selectedRowKeys ', () => {
const store = createStore({
selectedRowKeys: ['1'],
selectionDirty: false,
});
const wrapper = mount(
<SelectionBox
store={store}
store={getDefaultStore(['1'])}
rowIndex="1"
disabled={false}
onChange={() => {}}
@ -43,14 +40,9 @@ describe('SelectionBox', () => {
});
it('checked by defaultSelection', () => {
const store = createStore({
selectedRowKeys: [],
selectionDirty: false,
});
const wrapper = mount(
<SelectionBox
store={store}
store={getDefaultStore()}
rowIndex="1"
disabled={false}
onChange={() => {}}
@ -62,11 +54,7 @@ describe('SelectionBox', () => {
});
it('checked when store change', () => {
const store = createStore({
selectedRowKeys: [],
selectionDirty: false,
});
const store = getDefaultStore();
const wrapper = mount(
<SelectionBox
store={store}
@ -84,4 +72,49 @@ describe('SelectionBox', () => {
expect(wrapper.state()).toEqual({ checked: true });
});
it('passes props to Checkbox', () => {
const checkboxProps = {
name: 'testName',
id: 'testId',
};
const wrapper = mount(
<SelectionBox
store={getDefaultStore()}
rowIndex="1"
disabled={false}
onChange={() => {
}}
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(
<SelectionBox
store={getDefaultStore()}
rowIndex="1"
disabled={false}
onChange={() => {
}}
defaultSelection={['1']}
type="radio"
{...radioProps}
/>
);
wrapper.find('Radio').forEach((radio) => {
expect(radio.props().name).toEqual(radioProps.name);
expect(radio.props().id).toEqual(radioProps.id);
});
});
});

3
components/table/__tests__/Table.rowSelection.test.js
View File

@ -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', () => {

4
components/table/__tests__/__snapshots__/demo.test.js.snap
View File

@ -9302,6 +9302,7 @@ exports[`renders ./components/table/demo/row-selection.md correctly 1`] = `
>
<input
class="ant-checkbox-input"
name="John Brown"
type="checkbox"
/>
<span
@ -9350,6 +9351,7 @@ exports[`renders ./components/table/demo/row-selection.md correctly 1`] = `
>
<input
class="ant-checkbox-input"
name="Jim Green"
type="checkbox"
/>
<span
@ -9398,6 +9400,7 @@ exports[`renders ./components/table/demo/row-selection.md correctly 1`] = `
>
<input
class="ant-checkbox-input"
name="Joe Black"
type="checkbox"
/>
<span
@ -9447,6 +9450,7 @@ exports[`renders ./components/table/demo/row-selection.md correctly 1`] = `
<input
class="ant-checkbox-input"
disabled=""
name="Disabled User"
type="checkbox"
/>
<span

1
components/table/demo/row-selection.md
View File

@ -60,6 +60,7 @@ const rowSelection = {
},
getCheckboxProps: record => ({
disabled: record.name === 'Disabled User', // Column configuration not to be checked
name: record.name,
}),
};

1
components/table/interface.tsx
View File

@ -152,6 +152,7 @@ export interface SelectionBoxProps {
type?: RowSelectionType;
defaultSelection: string[];
rowIndex: string;
name?: string;
disabled?: boolean;
onChange: React.ChangeEventHandler<HTMLInputElement>;
}