diff --git a/components/checkbox/index.jsx b/components/checkbox/index.jsx index 1048c789..44afde71 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); }; handleInputClick = (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 { > @@ -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/components/table/components/head.jsx b/components/table/components/head.jsx index 211a9eb0..3f869618 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 ( - + ); } diff --git a/components/table/components/row.jsx b/components/table/components/row.jsx index e945084e..44b42fec 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 d11d1143..ee161ba6 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 { ); } 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 {

Lorem ipsum...