move ant-checkbox into ant-form-item

components/table/index.jsx

@@ -4,6 +4,7 @@ import React from 'react';
 import jQuery from 'jquery';
 import Table from 'rc-table';
 import Dropdown from '../dropdown';
+import Checkbox from '../checkbox';
 import FilterMenu from './filterMenu';
 import Pagination from '../pagination';
 import objectAssign from 'object-assign';
@@ -102,15 +103,13 @@ let AntTable = React.createClass({
     }
     this.fetch();
   },
-  handleSelect(e) {
-    let checked = e.currentTarget.checked;
-    let currentRowIndex = e.currentTarget.parentElement.parentElement.rowIndex;
-    let selectedRow = this.state.data[currentRowIndex - 1];
+  handleSelect(rowIndex, checked) {
+    let selectedRow = this.state.data[rowIndex];
     if (checked) {
-      this.state.selectedRowKeys.push(currentRowIndex);
+      this.state.selectedRowKeys.push(rowIndex);
     } else {
       this.state.selectedRowKeys = this.state.selectedRowKeys.filter(function(i) {
-        return currentRowIndex !== i;
+        return rowIndex !== i;
       });
     }
     this.setState({
@@ -120,8 +119,7 @@ let AntTable = React.createClass({
       this.props.rowSelection.onSelect(selectedRow, checked);
     }
   },
-  handleSelectAllRow(e) {
-    let checked = e.currentTarget.checked;
+  handleSelectAllRow(checked) {
     this.setState({
       selectedRowKeys: checked ? this.state.data.map(function(item, i) {
         return i + 1;
@@ -139,9 +137,9 @@ let AntTable = React.createClass({
     }, this.fetch);
   },
   renderSelectionCheckBox(value, record, index) {
-    let checked = this.state.selectedRowKeys.indexOf(index + 1) >= 0;
-    let checkbox = <input type="checkbox" checked={checked} onChange={this.handleSelect} />;
-    return checkbox;
+    let rowIndex = index + 1; // 从 1 开始
+    let checked = this.state.selectedRowKeys.indexOf(rowIndex) >= 0;
+    return <Checkbox checked={checked} onChange={this.handleSelect.bind(this, rowIndex)} label="" />;
   },
   renderRowSelection() {
     var columns = this.props.columns;
@@ -149,7 +147,7 @@ let AntTable = React.createClass({
       let checked = this.state.data.every(function(item, i) {
         return this.state.selectedRowKeys.indexOf(i + 1) >= 0;
       }, this);
-      let checkboxAll = <input type="checkbox" checked={checked} onChange={this.handleSelectAllRow} />;
+      let checkboxAll = <Checkbox checked={checked} onChange={this.handleSelectAllRow} label="" />;
       let selectionColumn = {
         key: 'selection-column',
         title: checkboxAll,

style/components/checkbox.less

@@ -8,6 +8,7 @@
   cursor: pointer;
   outline: none;
   display: inline-block;
+  vertical-align: middle;
 
   .@{checkboxPrefixCls} {
     &:after {
@@ -176,4 +177,4 @@
   100% {
     opacity: 0;
   }
-}
\ No newline at end of file
+}

style/components/form.less

@@ -65,7 +65,7 @@ form {
     font-size: @font-size-base;
     padding: @input-padding-horizontal;
   }
-  
+
   // input[type=file]
   .@{css-prefix}upload {
     padding-top: 7px;
@@ -74,52 +74,51 @@ form {
     font-size: @font-size-base;
     background: transparent;
   }
-}
+  // Radio & Checkbox
+  .@{css-prefix}radio,
+  .@{css-prefix}checkbox {
+    position: relative;
+    display: block;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    height: @input-height-lg;
 
-// Radio & Checkbox
-.@{css-prefix}radio,
-.@{css-prefix}checkbox {
-  position: relative;
-  display: block;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  height: @input-height-lg;
+    label {
+      min-height: @line-height-computed;
+      padding: 7px 0 7px 20px;
+      margin-bottom: 0;
+      font-weight: normal;
+      cursor: pointer;
+    }
+  }
+  .@{css-prefix}radio input[type="radio"],
+  .@{css-prefix}radio-inline input[type="radio"],
+  .@{css-prefix}checkbox input[type="checkbox"],
+  .@{css-prefix}checkbox-inline input[type="checkbox"] {
+    position: absolute;
+    margin-left: -20px;
+    margin-top: 4px \9;
+  }
 
-  label {
-    min-height: @line-height-computed;
-    padding: 7px 0 7px 20px;
+  .@{css-prefix}radio + .@{css-prefix}radio,
+  .@{css-prefix}checkbox + .@{css-prefix}checkbox {
+    margin-top: -5px;
+  }
+
+  // Radios and checkboxes on same line
+  .@{css-prefix}radio-inline,
+  .@{css-prefix}checkbox-inline {
+    position: relative;
+    display: inline-block;
+    padding: 7px 20px;
+    padding-right: 0!important;
     margin-bottom: 0;
+    margin-right: 10px;
+    vertical-align: middle;
     font-weight: normal;
     cursor: pointer;
   }
 }
-.@{css-prefix}radio input[type="radio"],
-.@{css-prefix}radio-inline input[type="radio"],
-.@{css-prefix}checkbox input[type="checkbox"],
-.@{css-prefix}checkbox-inline input[type="checkbox"] {
-  position: absolute;
-  margin-left: -20px;
-  margin-top: 4px \9;
-}
-
-.@{css-prefix}radio + .@{css-prefix}radio,
-.@{css-prefix}checkbox + .@{css-prefix}checkbox {
-  margin-top: -5px;
-}
-
-// Radios and checkboxes on same line
-.@{css-prefix}radio-inline,
-.@{css-prefix}checkbox-inline {
-  position: relative;
-  display: inline-block;
-  padding: 7px 20px;
-  padding-right: 0!important;
-  margin-bottom: 0;
-  margin-right: 10px;
-  vertical-align: middle;
-  font-weight: normal;
-  cursor: pointer;
-}
 
 input[type="radio"],
 input[type="checkbox"] {