2015-10-11 20:07:09 +03:00
|
|
|
import React from 'react';
|
2015-10-05 10:12:16 +03:00
|
|
|
import Checkbox from '../../components/checkbox';
|
|
|
|
|
2015-10-22 02:31:17 +03:00
|
|
|
class CheckboxTest extends React.Component {
|
2015-11-07 04:59:50 +03:00
|
|
|
state = {
|
|
|
|
checkbox_1: true,
|
|
|
|
checkbox_2: false,
|
2017-01-26 20:05:32 +03:00
|
|
|
checkbox_3: true,
|
2015-11-07 04:59:50 +03:00
|
|
|
};
|
|
|
|
|
2015-11-25 13:28:36 +03:00
|
|
|
handleChange = (field, value) => {
|
2017-01-26 20:05:32 +03:00
|
|
|
this.setState({ ...this.state, [field]: value });
|
2015-10-22 02:31:17 +03:00
|
|
|
};
|
2015-10-05 10:12:16 +03:00
|
|
|
|
2015-10-22 02:31:17 +03:00
|
|
|
handleFocus = () => {
|
2015-10-05 10:12:16 +03:00
|
|
|
console.log('Focused');
|
2015-10-22 02:31:17 +03:00
|
|
|
};
|
2015-10-05 10:12:16 +03:00
|
|
|
|
2015-10-22 02:31:17 +03:00
|
|
|
handleBlur = () => {
|
2015-10-05 10:12:16 +03:00
|
|
|
console.log('Blur');
|
2015-10-22 02:31:17 +03:00
|
|
|
};
|
2015-10-05 10:12:16 +03:00
|
|
|
|
2017-01-26 20:05:32 +03:00
|
|
|
render() {
|
2015-10-05 10:12:16 +03:00
|
|
|
return (
|
|
|
|
<section>
|
2015-10-06 22:34:43 +03:00
|
|
|
<h5>Checkbox</h5>
|
2017-01-26 20:05:32 +03:00
|
|
|
<p style={{ marginBottom: '10px' }}>Lorem ipsum...</p>
|
2015-10-06 22:34:43 +03:00
|
|
|
|
2015-10-05 10:12:16 +03:00
|
|
|
<Checkbox
|
2015-11-07 04:59:50 +03:00
|
|
|
checked={this.state.checkbox_1}
|
2015-10-05 10:12:16 +03:00
|
|
|
label="Checked checkbox"
|
2015-11-07 04:59:50 +03:00
|
|
|
onChange={this.handleChange.bind(this, 'checkbox_1')}
|
2015-10-05 10:12:16 +03:00
|
|
|
onFocus={this.handleFocus}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
/>
|
|
|
|
<Checkbox
|
2015-11-07 04:59:50 +03:00
|
|
|
checked={this.state.checkbox_2}
|
2016-04-07 04:24:31 +03:00
|
|
|
label="Not checked checkbox"
|
2015-11-07 04:59:50 +03:00
|
|
|
onChange={this.handleChange.bind(this, 'checkbox_2')}
|
2015-10-05 10:12:16 +03:00
|
|
|
onFocus={this.handleFocus}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
/>
|
|
|
|
<Checkbox
|
2015-11-07 04:59:50 +03:00
|
|
|
checked={this.state.checkbox_3}
|
2015-10-05 10:12:16 +03:00
|
|
|
label="Disabled checkbox"
|
|
|
|
disabled
|
2015-11-07 04:59:50 +03:00
|
|
|
onChange={this.handleChange.bind(this, 'checkbox_3')}
|
2015-10-05 10:12:16 +03:00
|
|
|
onFocus={this.handleFocus}
|
|
|
|
onBlur={this.handleBlur}
|
|
|
|
/>
|
|
|
|
</section>
|
|
|
|
);
|
|
|
|
}
|
2015-10-21 13:25:07 +03:00
|
|
|
}
|
2015-10-22 02:31:17 +03:00
|
|
|
|
|
|
|
export default CheckboxTest;
|