react-toolbox/spec/components/switch.js

42 lines
1.0 KiB
JavaScript
Raw Normal View History

import React from 'react';
2015-09-21 11:01:52 +03:00
import Switch from '../../components/switch';
2015-10-22 02:31:17 +03:00
class SwitchTest extends React.Component {
2015-11-12 07:52:05 +03:00
state = {
2015-12-11 21:11:55 +03:00
switch_1: true,
switch_2: false,
2017-01-26 20:05:32 +03:00
switch_3: true,
2015-11-12 07:52:05 +03:00
};
2015-12-11 21:11:55 +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-09-21 11:01:52 +03:00
2017-01-26 20:05:32 +03:00
render() {
2015-09-21 11:01:52 +03:00
return (
<section>
2015-10-07 23:24:02 +03:00
<h5>Switches</h5>
2017-01-26 20:05:32 +03:00
<p style={{ marginBottom: '10px' }}>This is more beautiful than the old fashion checkboxes...</p>
2015-11-12 07:52:05 +03:00
<Switch
2015-12-11 21:11:55 +03:00
checked={this.state.switch_1}
2015-11-12 07:52:05 +03:00
label="Push notifications"
2015-12-11 21:11:55 +03:00
onChange={this.handleChange.bind(this, 'switch_1')}
2015-11-12 07:52:05 +03:00
/>
<Switch
2015-12-11 21:11:55 +03:00
checked={this.state.switch_2}
2015-11-12 07:52:05 +03:00
label="Mail notifications"
2015-12-11 21:11:55 +03:00
onChange={this.handleChange.bind(this, 'switch_2')}
2015-11-12 07:52:05 +03:00
/>
<Switch
2015-12-11 21:11:55 +03:00
checked={this.state.switch_3}
2015-11-12 07:52:05 +03:00
disabled
label="Nothing, thanks"
2015-12-11 21:11:55 +03:00
onChange={this.handleChange.bind(this, 'switch_3')}
2015-11-12 07:52:05 +03:00
/>
2015-09-21 11:01:52 +03:00
</section>
);
}
2015-10-21 13:25:07 +03:00
}
2015-10-22 02:31:17 +03:00
export default SwitchTest;