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

* improve rowSelection.selections of Table

* fix classNames spell error

* update class name

components/table/SelectionCheckboxAll.tsx

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

components/table/Table.tsx

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

components/table/__tests__/Table.rowSelection.test.js

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

components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap

@@ -1,6 +1,6 @@
 // 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
     class="ant-dropdown  ant-dropdown-placement-bottomLeft  ant-dropdown-hidden"

components/table/__tests__/__snapshots__/demo.test.js.snap

@@ -1439,7 +1439,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
                           class="ant-table-selection"
                         >
                           <label
-                            class="ant-table-selection-select-all ant-checkbox-wrapper"
+                            class="ant-checkbox-wrapper"
                           >
                             <span
                               class="ant-checkbox"
@@ -1453,13 +1453,6 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
                               />
                             </span>
                           </label>
-                          <div
-                            class="ant-table-selection-down ant-dropdown-trigger"
-                          >
-                            <i
-                              class="anticon anticon-down"
-                            />
-                          </div>
                         </div>
                       </span>
                     </th>
@@ -2966,7 +2959,7 @@ exports[`renders ./components/table/demo/expand-children.md correctly 1`] = `
                         class="ant-table-selection"
                       >
                         <label
-                          class="ant-table-selection-select-all ant-checkbox-wrapper"
+                          class="ant-checkbox-wrapper"
                         >
                           <span
                             class="ant-checkbox"
@@ -2980,13 +2973,6 @@ exports[`renders ./components/table/demo/expand-children.md correctly 1`] = `
                             />
                           </span>
                         </label>
-                        <div
-                          class="ant-table-selection-down ant-dropdown-trigger"
-                        >
-                          <i
-                            class="anticon anticon-down"
-                          />
-                        </div>
                       </div>
                     </span>
                   </th>
@@ -8841,7 +8827,7 @@ exports[`renders ./components/table/demo/row-selection.md correctly 1`] = `
                         class="ant-table-selection"
                       >
                         <label
-                          class="ant-table-selection-select-all ant-checkbox-wrapper"
+                          class="ant-checkbox-wrapper"
                         >
                           <span
                             class="ant-checkbox"
@@ -8855,13 +8841,6 @@ exports[`renders ./components/table/demo/row-selection.md correctly 1`] = `
                             />
                           </span>
                         </label>
-                        <div
-                          class="ant-table-selection-down ant-dropdown-trigger"
-                        >
-                          <i
-                            class="anticon anticon-down"
-                          />
-                        </div>
                       </div>
                     </span>
                   </th>
@@ -9176,7 +9155,7 @@ exports[`renders ./components/table/demo/row-selection-and-operation.md correctl
                           class="ant-table-selection"
                         >
                           <label
-                            class="ant-table-selection-select-all ant-checkbox-wrapper"
+                            class="ant-checkbox-wrapper"
                           >
                             <span
                               class="ant-checkbox"
@@ -9190,13 +9169,6 @@ exports[`renders ./components/table/demo/row-selection-and-operation.md correctl
                               />
                             </span>
                           </label>
-                          <div
-                            class="ant-table-selection-down ant-dropdown-trigger"
-                          >
-                            <i
-                              class="anticon anticon-down"
-                            />
-                          </div>
                         </div>
                       </span>
                     </th>
@@ -9767,14 +9739,14 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
               >
                 <tr>
                   <th
-                    class="ant-table-selection-column"
+                    class="ant-table-selection-column ant-table-selection-column-custom"
                   >
                     <span>
                       <div
                         class="ant-table-selection"
                       >
                         <label
-                          class="ant-table-selection-select-all ant-checkbox-wrapper"
+                          class="ant-table-selection-select-all-custom ant-checkbox-wrapper"
                         >
                           <span
                             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"
                 >
                   <td
-                    class="ant-table-selection-column"
+                    class="ant-table-selection-column ant-table-selection-column-custom"
                   >
                     <span>
                       <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"
                 >
                   <td
-                    class="ant-table-selection-column"
+                    class="ant-table-selection-column ant-table-selection-column-custom"
                   >
                     <span>
                       <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"
                 >
                   <td
-                    class="ant-table-selection-column"
+                    class="ant-table-selection-column ant-table-selection-column-custom"
                   >
                     <span>
                       <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"
                 >
                   <td
-                    class="ant-table-selection-column"
+                    class="ant-table-selection-column ant-table-selection-column-custom"
                   >
                     <span>
                       <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"
                 >
                   <td
-                    class="ant-table-selection-column"
+                    class="ant-table-selection-column ant-table-selection-column-custom"
                   >
                     <span>
                       <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"
                 >
                   <td
-                    class="ant-table-selection-column"
+                    class="ant-table-selection-column ant-table-selection-column-custom"
                   >
                     <span>
                       <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"
                 >
                   <td
-                    class="ant-table-selection-column"
+                    class="ant-table-selection-column ant-table-selection-column-custom"
                   >
                     <span>
                       <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"
                 >
                   <td
-                    class="ant-table-selection-column"
+                    class="ant-table-selection-column ant-table-selection-column-custom"
                   >
                     <span>
                       <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"
                 >
                   <td
-                    class="ant-table-selection-column"
+                    class="ant-table-selection-column ant-table-selection-column-custom"
                   >
                     <span>
                       <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"
                 >
                   <td
-                    class="ant-table-selection-column"
+                    class="ant-table-selection-column ant-table-selection-column-custom"
                   >
                     <span>
                       <label

components/table/demo/row-selection-custom.md

@@ -7,11 +7,11 @@ title:
 
 ## zh-CN
 
-默认有全选和反选，通过 `rowSelection.selections` 自定义选择项。
+通过 `rowSelection.selections` 自定义选择项，默认不显示下拉选项，设为 `true` 时显示默认选择项。
 
 ## 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

components/table/index.en-US.md

@@ -120,7 +120,7 @@ Properties for selection.
 | 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) |   -   |
 | 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
 

components/table/index.zh-CN.md

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

components/table/style/index.less

@@ -140,7 +140,7 @@
     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-right: 0;
   }
@@ -445,7 +445,7 @@
   }
 
   &-selection {
-    &-select-all {
+    &-select-all-custom {
       margin-right: 4px !important;
     }