mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 21:19:37 +08:00
Code Issues Actions 50 Packages Projects Releases Wiki Activity

fix: improve rowSelection.selections of Table (#5409)

Browse Source 
* improve rowSelection.selections of Table

* fix classNames spell error

* update class name
This commit is contained in:
feng zhi hao 2017-03-24 11:44:36 +08:00 committed by Benjy Cui
parent 18fced672a
commit 8dfdce50f9
9 changed files with 66 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
components/table/SelectionCheckboxAll.tsx
View File

@ -4,6 +4,7 @@ import { Store } from './createStore';
import Dropdown from '../dropdown'; import Dropdown from '../dropdown';
import Menu from '../menu'; import Menu from '../menu';
import Icon from '../icon'; import Icon from '../icon';
import classNames from 'classnames';
export interface SelectionDecorator { export interface SelectionDecorator {
key: string; key: string;
@ -20,7 +21,7 @@ export interface SelectionCheckboxAllProps {
data: any[]; data: any[];
prefixCls: string | undefined; prefixCls: string | undefined;
onSelect: (key: string, index: number, selectFunc: any) => void; onSelect: (key: string, index: number, selectFunc: any) => void;
selections: SelectionDecorator[]; selections?: SelectionDecorator[] | boolean;
} }
export default class SelectionCheckboxAll extends React.Component<SelectionCheckboxAllProps, any> { export default class SelectionCheckboxAll extends React.Component<SelectionCheckboxAllProps, any> {
@ -151,31 +152,27 @@ export default class SelectionCheckboxAll extends React.Component<SelectionCheck
} }
render() { render() {
const { disabled, prefixCls } = this.props; const { disabled, prefixCls, selections } = this.props;
const { checked, indeterminate } = this.state; const { checked, indeterminate } = this.state;
let selectionPrefixCls = `${prefixCls}-selection`; let selectionPrefixCls = `${prefixCls}-selection`;
let selections = this.defaultSelections.concat(this.props.selections || []); let customSelections: React.ReactNode = null;
let menu = ( if (selections) {
<Menu let newSelections = Array.isArray(selections) ? this.defaultSelections.concat(selections)
className={`${selectionPrefixCls}-menu`} : this.defaultSelections;
selectedKeys={[]}
>
{this.renderMenus(selections)}
</Menu>
);
return ( let menu = (
<div className={selectionPrefixCls}> <Menu
<Checkbox className={`${selectionPrefixCls}-menu`}
className={`${selectionPrefixCls}-select-all`} selectedKeys={[]}
checked={checked} >
indeterminate={indeterminate} {this.renderMenus(newSelections)}
disabled={disabled} </Menu>
onChange={this.handleSelectAllChagne} );
/>
customSelections = (
<Dropdown <Dropdown
overlay={menu} overlay={menu}
getPopupContainer={(trigger: HTMLElement) => trigger.parentNode as HTMLElement} getPopupContainer={(trigger: HTMLElement) => trigger.parentNode as HTMLElement}
@ -184,6 +181,19 @@ export default class SelectionCheckboxAll extends React.Component<SelectionCheck
<Icon type="down" /> <Icon type="down" />
</div> </div>
</Dropdown> </Dropdown>
);
}
return (
<div className={selectionPrefixCls}>
<Checkbox
className={classNames({ [`${selectionPrefixCls}-select-all-custom`]: customSelections })}
checked={checked}
indeterminate={indeterminate}
disabled={disabled}
onChange={this.handleSelectAllChagne}
/>
{customSelections}
</div> </div>
); );
} }

9
components/table/Table.tsx
View File

@ -54,7 +54,7 @@ export interface TableRowSelection<T> {
onSelect?: (record: T, selected: boolean, selectedRows: Object[]) => any; onSelect?: (record: T, selected: boolean, selectedRows: Object[]) => any;
onSelectAll?: (selected: boolean, selectedRows: Object[], changeRows: Object[]) => any; onSelectAll?: (selected: boolean, selectedRows: Object[], changeRows: Object[]) => any;
onSelectInvert?: (selectedRows: Object[]) => any; onSelectInvert?: (selectedRows: Object[]) => any;
selections?: SelectionDecorator[]; selections?: SelectionDecorator[] | boolean;
} }
export interface TableProps<T> { export interface TableProps<T> {
@ -624,10 +624,13 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
} }
return true; return true;
}); });
let selectionColumnClass = classNames(`${prefixCls}-selection-column`, {
[`${prefixCls}-selection-column-custom`]: rowSelection.selections,
});
const selectionColumn: ColumnProps<any> = { const selectionColumn: ColumnProps<any> = {
key: 'selection-column', key: 'selection-column',
render: this.renderSelectionBox(rowSelection.type), render: this.renderSelectionBox(rowSelection.type),
className: `${prefixCls}-selection-column`, className: selectionColumnClass,
}; };
if (rowSelection.type !== 'radio') { if (rowSelection.type !== 'radio') {
const checkboxAllDisabled = data.every((item, index) => this.getCheckboxPropsByItem(item, index).disabled); const checkboxAllDisabled = data.every((item, index) => this.getCheckboxPropsByItem(item, index).disabled);
@ -641,7 +644,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
disabled={checkboxAllDisabled} disabled={checkboxAllDisabled}
prefixCls={prefixCls} prefixCls={prefixCls}
onSelect={this.handleSelectRow} onSelect={this.handleSelectRow}
selections={rowSelection.selections || []} selections={rowSelection.selections}
/> />
); );
} }

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

@ -172,8 +172,11 @@ describe('Table.rowSelection', () => {
expect(handleSelectAll).toBeCalledWith(false, [], data); expect(handleSelectAll).toBeCalledWith(false, [], data);
}); });
it('render selection correctly', () => { it('render with default selection correctly', () => {
const wrapper = mount(createTable()); const rowSelection = {
selections: true,
};
const wrapper = mount(createTable({ rowSelection }));
const dropdownWrapper = render(wrapper.find('Trigger').node.getComponent()); const dropdownWrapper = render(wrapper.find('Trigger').node.getComponent());
expect(renderToJson(dropdownWrapper)).toMatchSnapshot(); expect(renderToJson(dropdownWrapper)).toMatchSnapshot();
}); });
@ -182,6 +185,7 @@ describe('Table.rowSelection', () => {
const handleSelectAll = jest.fn(); const handleSelectAll = jest.fn();
const rowSelection = { const rowSelection = {
onSelectAll: handleSelectAll, onSelectAll: handleSelectAll,
selections: true,
}; };
const wrapper = mount(createTable({ rowSelection })); const wrapper = mount(createTable({ rowSelection }));
@ -195,6 +199,7 @@ describe('Table.rowSelection', () => {
const handleSelectInvert = jest.fn(); const handleSelectInvert = jest.fn();
const rowSelection = { const rowSelection = {
onSelectInvert: handleSelectInvert, onSelectInvert: handleSelectInvert,
selections: true,
}; };
const wrapper = mount(createTable({ rowSelection })); const wrapper = mount(createTable({ rowSelection }));
const checkboxes = wrapper.find('input'); const checkboxes = wrapper.find('input');

2
components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap
View File

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Table.rowSelection render selection correctly 1`] = ` exports[`Table.rowSelection render with default selection correctly 1`] = `
<div> <div>
<div <div
class="ant-dropdown ant-dropdown-placement-bottomLeft ant-dropdown-hidden" class="ant-dropdown ant-dropdown-placement-bottomLeft ant-dropdown-hidden"

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

@ -1439,7 +1439,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
class="ant-table-selection" class="ant-table-selection"
> >
<label <label
class="ant-table-selection-select-all ant-checkbox-wrapper" class="ant-checkbox-wrapper"
> >
<span <span
class="ant-checkbox" class="ant-checkbox"
@ -1453,13 +1453,6 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
/> />
</span> </span>
</label> </label>
<div
class="ant-table-selection-down ant-dropdown-trigger"
>
<i
class="anticon anticon-down"
/>
</div>
</div> </div>
</span> </span>
</th> </th>
@ -2966,7 +2959,7 @@ exports[`renders ./components/table/demo/expand-children.md correctly 1`] = `
class="ant-table-selection" class="ant-table-selection"
> >
<label <label
class="ant-table-selection-select-all ant-checkbox-wrapper" class="ant-checkbox-wrapper"
> >
<span <span
class="ant-checkbox" class="ant-checkbox"
@ -2980,13 +2973,6 @@ exports[`renders ./components/table/demo/expand-children.md correctly 1`] = `
/> />
</span> </span>
</label> </label>
<div
class="ant-table-selection-down ant-dropdown-trigger"
>
<i
class="anticon anticon-down"
/>
</div>
</div> </div>
</span> </span>
</th> </th>
@ -8841,7 +8827,7 @@ exports[`renders ./components/table/demo/row-selection.md correctly 1`] = `
class="ant-table-selection" class="ant-table-selection"
> >
<label <label
class="ant-table-selection-select-all ant-checkbox-wrapper" class="ant-checkbox-wrapper"
> >
<span <span
class="ant-checkbox" class="ant-checkbox"
@ -8855,13 +8841,6 @@ exports[`renders ./components/table/demo/row-selection.md correctly 1`] = `
/> />
</span> </span>
</label> </label>
<div
class="ant-table-selection-down ant-dropdown-trigger"
>
<i
class="anticon anticon-down"
/>
</div>
</div> </div>
</span> </span>
</th> </th>
@ -9176,7 +9155,7 @@ exports[`renders ./components/table/demo/row-selection-and-operation.md correctl
class="ant-table-selection" class="ant-table-selection"
> >
<label <label
class="ant-table-selection-select-all ant-checkbox-wrapper" class="ant-checkbox-wrapper"
> >
<span <span
class="ant-checkbox" class="ant-checkbox"
@ -9190,13 +9169,6 @@ exports[`renders ./components/table/demo/row-selection-and-operation.md correctl
/> />
</span> </span>
</label> </label>
<div
class="ant-table-selection-down ant-dropdown-trigger"
>
<i
class="anticon anticon-down"
/>
</div>
</div> </div>
</span> </span>
</th> </th>
@ -9767,14 +9739,14 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
> >
<tr> <tr>
<th <th
class="ant-table-selection-column" class="ant-table-selection-column ant-table-selection-column-custom"
> >
<span> <span>
<div <div
class="ant-table-selection" class="ant-table-selection"
> >
<label <label
class="ant-table-selection-select-all ant-checkbox-wrapper" class="ant-table-selection-select-all-custom ant-checkbox-wrapper"
> >
<span <span
class="ant-checkbox" class="ant-checkbox"
@ -9828,7 +9800,7 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
class="ant-table-row ant-table-row-level-0" class="ant-table-row ant-table-row-level-0"
> >
<td <td
class="ant-table-selection-column" class="ant-table-selection-column ant-table-selection-column-custom"
> >
<span> <span>
<label <label
@ -9872,7 +9844,7 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
class="ant-table-row ant-table-row-level-0" class="ant-table-row ant-table-row-level-0"
> >
<td <td
class="ant-table-selection-column" class="ant-table-selection-column ant-table-selection-column-custom"
> >
<span> <span>
<label <label
@ -9916,7 +9888,7 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
class="ant-table-row ant-table-row-level-0" class="ant-table-row ant-table-row-level-0"
> >
<td <td
class="ant-table-selection-column" class="ant-table-selection-column ant-table-selection-column-custom"
> >
<span> <span>
<label <label
@ -9960,7 +9932,7 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
class="ant-table-row ant-table-row-level-0" class="ant-table-row ant-table-row-level-0"
> >
<td <td
class="ant-table-selection-column" class="ant-table-selection-column ant-table-selection-column-custom"
> >
<span> <span>
<label <label
@ -10004,7 +9976,7 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
class="ant-table-row ant-table-row-level-0" class="ant-table-row ant-table-row-level-0"
> >
<td <td
class="ant-table-selection-column" class="ant-table-selection-column ant-table-selection-column-custom"
> >
<span> <span>
<label <label
@ -10048,7 +10020,7 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
class="ant-table-row ant-table-row-level-0" class="ant-table-row ant-table-row-level-0"
> >
<td <td
class="ant-table-selection-column" class="ant-table-selection-column ant-table-selection-column-custom"
> >
<span> <span>
<label <label
@ -10092,7 +10064,7 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
class="ant-table-row ant-table-row-level-0" class="ant-table-row ant-table-row-level-0"
> >
<td <td
class="ant-table-selection-column" class="ant-table-selection-column ant-table-selection-column-custom"
> >
<span> <span>
<label <label
@ -10136,7 +10108,7 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
class="ant-table-row ant-table-row-level-0" class="ant-table-row ant-table-row-level-0"
> >
<td <td
class="ant-table-selection-column" class="ant-table-selection-column ant-table-selection-column-custom"
> >
<span> <span>
<label <label
@ -10180,7 +10152,7 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
class="ant-table-row ant-table-row-level-0" class="ant-table-row ant-table-row-level-0"
> >
<td <td
class="ant-table-selection-column" class="ant-table-selection-column ant-table-selection-column-custom"
> >
<span> <span>
<label <label
@ -10224,7 +10196,7 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
class="ant-table-row ant-table-row-level-0" class="ant-table-row ant-table-row-level-0"
> >
<td <td
class="ant-table-selection-column" class="ant-table-selection-column ant-table-selection-column-custom"
> >
<span> <span>
<label <label

4
components/table/demo/row-selection-custom.md
View File

@ -7,11 +7,11 @@ title:
## zh-CN ## zh-CN
默认有全选和反选，通过 `rowSelection.selections` 自定义选择项。 通过 `rowSelection.selections` 自定义选择项，默认不显示下拉选项，设为 `true` 时显示默认选择项。
## en-US ## en-US
Default selection is select all and select invert, Use `rowSelection.selections` custom selections. Use `rowSelection.selections` custom selections, default no select dropdown, show default selections via setting to `true`.
````jsx ````jsx

2
components/table/index.en-US.md
View File

@ -120,7 +120,7 @@ Properties for selection.
| onSelect | callback that is called when select/deselect one row | Function(record, selected, selectedRows) | - | | onSelect | callback that is called when select/deselect one row | Function(record, selected, selectedRows) | - |
| onSelectAll | callback that is called when select/deselect all | Function(selected, selectedRows, changeRows) | - | | onSelectAll | callback that is called when select/deselect all | Function(selected, selectedRows, changeRows) | - |
| onSelectInvert | callback that is called when select invert | Function(selectedRows) | - | | onSelectInvert | callback that is called when select invert | Function(selectedRows) | - |
| selections | custom selection, [config](#rowSelection) | object[] | - | | selections | custom selection [config](#rowSelection), show default selections via setting to `true` | object[] | - |
### selection ### selection

2
components/table/index.zh-CN.md
View File

@ -121,7 +121,7 @@ const columns = [{
| onSelect | 用户手动选择/取消选择某列的回调 | Function(record, selected, selectedRows) | - | | onSelect | 用户手动选择/取消选择某列的回调 | Function(record, selected, selectedRows) | - |
| onSelectAll | 用户手动选择/取消选择所有列的回调 | Function(selected, selectedRows, changeRows) | - | | onSelectAll | 用户手动选择/取消选择所有列的回调 | Function(selected, selectedRows, changeRows) | - |
| onSelectInvert | 用户手动选择反选的回调 | Function(selectedRows) | - | | onSelectInvert | 用户手动选择反选的回调 | Function(selectedRows) | - |
| selections | 自定义选择项, [配置项](#selection) | object[] | - | | selections | 自定义选择项 [配置项](#selection), 设为 `true` 时显示默认选择项 | object[] | true | - |
### selection ### selection

4
components/table/style/index.less
View File

@ -140,7 +140,7 @@
word-break: break-all; word-break: break-all;
} }
&-thead > tr > th.@{table-prefix-cls}-selection-column { &-thead > tr > th.@{table-prefix-cls}-selection-column-custom {
padding-left: 16px; padding-left: 16px;
padding-right: 0; padding-right: 0;
} }
@ -445,7 +445,7 @@
} }
&-selection { &-selection {
&-select-all { &-select-all-custom {
margin-right: 4px !important; margin-right: 4px !important;
} }