Merge with master
commit
5f17e645dd
|
@ -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 {
|
|||
>
|
||||
<input
|
||||
{...this.props}
|
||||
className={style.input}
|
||||
onClick={this.handleInputClick}
|
||||
ref='input'
|
||||
type='checkbox'
|
||||
checked={this.state.checked}
|
||||
className={style.input}
|
||||
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;
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
|
|
Loading…
Reference in New Issue