From b1fe6f6e27f3d4a73508f7e4b5af74453d0370e8 Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Sat, 7 Nov 2015 08:59:50 +0700
Subject: [PATCH 1/2] <Checkbox> Stateless

---
 components/checkbox/index.jsx | 33 ++++-----------------------------
 components/checkbox/readme.md |  2 --
 spec/components/checkbox.jsx  | 24 +++++++++++++++++-------
 3 files changed, 21 insertions(+), 38 deletions(-)

diff --git a/components/checkbox/index.jsx b/components/checkbox/index.jsx
index b9a578e7..a93e8074 100644
--- a/components/checkbox/index.jsx
+++ b/components/checkbox/index.jsx
@@ -21,24 +21,9 @@ class Checkbox extends React.Component {
     disabled: false
   };
 
-  state = {
-    checked: this.props.checked
-  };
-
-  componentWillReceiveProps = (next_props) => {
-    console.log('componentWillReceiveProps', next_props.checked);
-    // this.setState({ checked: next_props.checked });
-  };
-
-  handleChange = (event) => {
-    this.setState({checked: !this.state.checked}, () => {
-      if (this.props.onChange) this.props.onChange(event, this);
-    });
-  };
-
   handleClick = (event) => {
     events.pauseEvent(event);
-    if (!this.props.disabled) this.handleChange(event);
+    if (!this.props.disabled) this.props.onChange(event);
   };
 
   handleMouseDown = (event) => {
@@ -52,7 +37,7 @@ class Checkbox extends React.Component {
   render () {
     let fieldClassName = style.field;
     let checkboxClassName = style.check;
-    if (this.state.checked) checkboxClassName += ` ${style.checked}`;
+    if (this.props.checked) checkboxClassName += ` ${style.checked}`;
     if (this.props.disabled) fieldClassName += ` ${style.disabled}`;
     if (this.props.className) fieldClassName += ` ${this.props.className}`;
 
@@ -64,12 +49,10 @@ class Checkbox extends React.Component {
       >
         <input
           {...this.props}
+          className={style.input}
+          onClick={this.handleInputClick}
           ref='input'
           type='checkbox'
-          className={style.input}
-          checked={this.state.checked}
-          onChange={this.handleChange}
-          onClick={this.handleInputClick}
         />
         <span data-role='checkbox' className={checkboxClassName} onMouseDown={this.handleMouseDown}>
           <Ripple ref='ripple' data-role='ripple' className={style.ripple} spread={3} centered />
@@ -86,14 +69,6 @@ class Checkbox extends React.Component {
   focus () {
     this.refs.input.focus();
   }
-
-  getValue () {
-    return this.state.checked;
-  }
-
-  setValue (value) {
-    this.setState({checked: value});
-  }
 }
 
 export default Checkbox;
diff --git a/components/checkbox/readme.md b/components/checkbox/readme.md
index bfd8abbe..880b4006 100644
--- a/components/checkbox/readme.md
+++ b/components/checkbox/readme.md
@@ -32,7 +32,5 @@ const TestCheckbox = () => (
 
 This component has state to control its value and how is it rendered. It exposes the following instance methods:
 
-- `getValue` is used to retrieve the current value.
-- `setValue` to force a new value.
 - `blur` to blur the input.
 - `focus` to focus the input.
diff --git a/spec/components/checkbox.jsx b/spec/components/checkbox.jsx
index e1511f8c..0772068d 100644
--- a/spec/components/checkbox.jsx
+++ b/spec/components/checkbox.jsx
@@ -2,8 +2,17 @@ import React from 'react';
 import Checkbox from '../../components/checkbox';
 
 class CheckboxTest extends React.Component {
-  handleChange = (event, instance) => {
-    console.log('Changed!', instance.getValue());
+
+  state = {
+    checkbox_1: true,
+    checkbox_2: false,
+    checkbox_3: true
+  };
+
+  handleChange = (key) => {
+    const state = this.state;
+    state[key] = !state[key];
+    this.setState(state);
   };
 
   handleFocus = () => {
@@ -21,23 +30,24 @@ class CheckboxTest extends React.Component {
         <p style={{marginBottom: '10px'}}>Lorem ipsum...</p>
 
         <Checkbox
+          checked={this.state.checkbox_1}
           label="Checked checkbox"
-          checked
-          onChange={this.handleChange}
+          onChange={this.handleChange.bind(this, 'checkbox_1')}
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
         />
         <Checkbox
+          checked={this.state.checkbox_2}
           label="Not checked biatch"
-          onChange={this.handleChange}
+          onChange={this.handleChange.bind(this, 'checkbox_2')}
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
         />
         <Checkbox
+          checked={this.state.checkbox_3}
           label="Disabled checkbox"
-          checked
           disabled
-          onChange={this.handleChange}
+          onChange={this.handleChange.bind(this, 'checkbox_3')}
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
         />

From b3150f4e74f73a5a9de47cfe276bf4970125b245 Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Sat, 7 Nov 2015 09:01:07 +0700
Subject: [PATCH 2/2] <Table> using the new stateless <Checkbox>

---
 components/table/components/head.jsx | 12 +++++++-----
 components/table/components/row.jsx  |  4 ++--
 components/table/index.jsx           | 10 ++++++----
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/components/table/components/head.jsx b/components/table/components/head.jsx
index eccbbe7c..31694978 100644
--- a/components/table/components/head.jsx
+++ b/components/table/components/head.jsx
@@ -7,23 +7,25 @@ class Head extends React.Component {
   static propTypes = {
     className: React.PropTypes.string,
     model: React.PropTypes.object,
-    onSelect: React.PropTypes.func
+    onSelect: React.PropTypes.func,
+    selected: React.PropTypes.bool
   };
 
   static defaultProps = {
     className: '',
-    model: {}
+    model: {},
+    selected: false
   };
 
-  handleSelectChange = (event, instance) => {
-    this.props.onSelect(event, instance.getValue());
+  handleSelectChange = (event) => {
+    this.props.onSelect(event);
   };
 
   renderCellSelectable () {
     if (this.props.onSelect) {
       return (
         <th className={style.selectable}>
-          <Checkbox onChange={this.handleSelectChange}/>
+          <Checkbox onChange={this.handleSelectChange} checked={this.props.selected}/>
         </th>
       );
     }
diff --git a/components/table/components/row.jsx b/components/table/components/row.jsx
index 2b4fd428..cb44e555 100644
--- a/components/table/components/row.jsx
+++ b/components/table/components/row.jsx
@@ -43,8 +43,8 @@ class Row extends React.Component {
     this.props.onChange(event, this, key, event.target.value);
   };
 
-  handleSelectChange = (event, instance) => {
-    this.props.onSelect(event, instance.getValue(), this);
+  handleSelectChange = (event) => {
+    this.props.onSelect(event, this);
   };
 
   renderCell (key) {
diff --git a/components/table/index.jsx b/components/table/index.jsx
index 51d5f32a..8e4012e4 100644
--- a/components/table/index.jsx
+++ b/components/table/index.jsx
@@ -42,10 +42,11 @@ class Table extends React.Component {
     }
   };
 
-  handleRowSelect = (event, selected, instance) => {
+  handleRowSelect = (event, instance) => {
     if (this.props.onSelect) {
-      const selected_rows = this.state.selected_rows;
       const index = instance.props.index;
+      const selected_rows = this.state.selected_rows;
+      const selected = selected_rows.indexOf(index) === -1;
       if (selected) {
         selected_rows.push(index);
         this.props.onSelect(event, instance.props.data);
@@ -56,8 +57,8 @@ class Table extends React.Component {
     }
   };
 
-  handleRowsSelect = (event, selected) => {
-    this.setState({ selected: selected });
+  handleRowsSelect = (event) => {
+    this.setState({ selected: !this.state.selected });
   };
 
   isChanged = (data, base) => {
@@ -76,6 +77,7 @@ class Table extends React.Component {
         <Head
           model={this.props.model}
           onSelect={this.props.onSelect ? this.handleRowsSelect : null}
+          selected={this.state.selected}
         />
       );
     }