Align table checkbox (#5183)

* Align table checkbox

* Don't select Item

* I18n selection text

* Update snapshot

components/locale-provider/en_US.tsx

@@ -17,6 +17,8 @@ export default {
     filterConfirm: 'OK',
     filterReset: 'Reset',
     emptyText: 'No Data',
+    selectAll: 'Select All',
+    selectInvert: 'Select Invert',
   },
   Modal: {
     okText: 'OK',

components/table/SelectionCheckboxAll.tsx

@@ -13,6 +13,7 @@ export interface SelectionDecorator {
 
 export interface SelectionCheckboxAllProps {
   store: Store;
+  locale: any;
   disabled: boolean;
   getCheckboxPropsByItem: (item, index) => any;
   getRecordKey: (record, index?) => string;
@@ -22,22 +23,23 @@ export interface SelectionCheckboxAllProps {
   selections: SelectionDecorator[];
 }
 
-const defaultSelections: SelectionDecorator[] = [{
-  key: 'all',
-  text: '全选',
-  onSelect: () => {},
-}, {
-  key: 'invert',
-  text: '反选',
-  onSelect: () => {},
-}];
-
 export default class SelectionCheckboxAll extends React.Component<SelectionCheckboxAllProps, any> {
   unsubscribe: () => void;
+  defaultSelections: SelectionDecorator[];
 
   constructor(props) {
     super(props);
 
+    this.defaultSelections = [{
+      key: 'all',
+      text: props.locale.selectAll,
+      onSelect: () => {},
+    }, {
+      key: 'invert',
+      text: props.locale.selectInvert,
+      onSelect: () => {},
+    }];
+
     this.state = {
       checked: this.getCheckState(props),
       indeterminate: this.getIndeterminateState(props),
@@ -154,11 +156,12 @@ export default class SelectionCheckboxAll extends React.Component<SelectionCheck
 
     let selectionPrefixCls = `${prefixCls}-selection`;
 
-    let selections = defaultSelections.concat(this.props.selections || []);
+    let selections = this.defaultSelections.concat(this.props.selections || []);
 
     let menu = (
       <Menu
         className={`${selectionPrefixCls}-menu`}
+        selectedKeys={[]}
       >
         {this.renderMenus(selections)}
       </Menu>
@@ -167,6 +170,7 @@ export default class SelectionCheckboxAll extends React.Component<SelectionCheck
     return (
       <div className={selectionPrefixCls}>
         <Checkbox
+          className={`${selectionPrefixCls}-select-all`}
           checked={checked}
           indeterminate={indeterminate}
           disabled={disabled}

components/table/Table.tsx

@@ -30,6 +30,8 @@ const defaultLocale = {
   filterConfirm: '确定',
   filterReset: '重置',
   emptyText: <span><Icon type="frown-o" />暂无数据</span>,
+  selectAll: '全选',
+  selectInvert: '反选',
 };
 
 const defaultPagination = {
@@ -627,6 +629,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
         selectionColumn.title  = (
           <SelectionCheckboxAll
             store={this.store}
+            locale={this.getLocale()}
             data={data}
             getCheckboxPropsByItem={this.getCheckboxPropsByItem}
             getRecordKey={this.getRecordKey}

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

@@ -1135,7 +1135,7 @@ exports[`test renders ./components/table/demo/dynamic-settings.md correctly 1`]
                         <div
                           class="ant-table-selection">
                           <label
-                            class="ant-checkbox-wrapper">
+                            class="ant-table-selection-select-all ant-checkbox-wrapper">
                             <span
                               class="ant-checkbox">
                               <input
@@ -2335,7 +2335,7 @@ exports[`test renders ./components/table/demo/expand-children.md correctly 1`] =
                       <div
                         class="ant-table-selection">
                         <label
-                          class="ant-checkbox-wrapper">
+                          class="ant-table-selection-select-all ant-checkbox-wrapper">
                           <span
                             class="ant-checkbox">
                             <input
@@ -6987,7 +6987,7 @@ exports[`test renders ./components/table/demo/row-selection.md correctly 1`] = `
                       <div
                         class="ant-table-selection">
                         <label
-                          class="ant-checkbox-wrapper">
+                          class="ant-table-selection-select-all ant-checkbox-wrapper">
                           <span
                             class="ant-checkbox">
                             <input
@@ -7253,7 +7253,7 @@ exports[`test renders ./components/table/demo/row-selection-and-operation.md cor
                         <div
                           class="ant-table-selection">
                           <label
-                            class="ant-checkbox-wrapper">
+                            class="ant-table-selection-select-all ant-checkbox-wrapper">
                             <span
                               class="ant-checkbox">
                               <input
@@ -7725,7 +7725,7 @@ exports[`test renders ./components/table/demo/row-selection-custom.md correctly
                       <div
                         class="ant-table-selection">
                         <label
-                          class="ant-checkbox-wrapper">
+                          class="ant-table-selection-select-all ant-checkbox-wrapper">
                           <span
                             class="ant-checkbox">
                             <input

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

@@ -53,7 +53,7 @@ class App extends React.Component {
       onChange: this.onSelectChange,
       selections: [{
         key: 'odd',
-        text: '奇数项',
+        text: 'Select Odd Row',
         onSelect: (changableRowKeys) => {
           let newSelectedRowKeys = [];
           newSelectedRowKeys = changableRowKeys.filter((key, index) => {
@@ -66,7 +66,7 @@ class App extends React.Component {
         },
       }, {
         key: 'even',
-        text: '偶数项',
+        text: 'Select Even Row',
         onSelect: (changableRowKeys) => {
           let newSelectedRowKeys = [];
           newSelectedRowKeys = changableRowKeys.filter((key, index) => {

components/table/style/index.less

@@ -138,12 +138,17 @@
     word-break: break-all;
   }
 
+  &-thead > tr > th.@{table-prefix-cls}-selection-column {
+    padding-left: 16px;
+    padding-right: 0;
+  }
+
   &-thead > tr > th.@{table-prefix-cls}-selection-column,
   &-tbody > tr > td.@{table-prefix-cls}-selection-column,
   &-expand-icon-th,
   &-row-expand-icon-cell {
     text-align: center;
-    width: 48px;
+    width: 62px;
   }
 
   &-header {
@@ -432,7 +437,9 @@
   }
 
   &-selection {
-    width: 40px;
+    &-select-all {
+      margin-right: 4px !important;
+    }
 
     .@{iconfont-css-prefix}-down {
       color: #aaa;
@@ -456,8 +463,11 @@
     }
 
     &-down {
+      cursor: pointer;
       padding: 0;
       display: inline-block;
+      vertical-align: middle;
+      line-height: 1;
     }
   }