43 lines
1.1 KiB
JavaScript
43 lines
1.1 KiB
JavaScript
import React from 'react';
|
|
import PureRenderMixin from 'react-pure-render/mixin';
|
|
|
|
var RoundedToggle = React.createClass({
|
|
mixins: [PureRenderMixin],
|
|
propTypes: {
|
|
options: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
|
|
active: React.PropTypes.string.isRequired,
|
|
onChange: React.PropTypes.func.isRequired
|
|
},
|
|
render() {
|
|
let { options, active } = this.props;
|
|
return (<div className='rounded-toggle inline short'>
|
|
{options.map(option =>
|
|
<RoundedToggleOption
|
|
key={option}
|
|
option={option}
|
|
onClick={this.props.onChange}
|
|
className={`strong ${option === active ? 'active': ''}`} />)}
|
|
</div>);
|
|
}
|
|
});
|
|
|
|
var RoundedToggleOption = React.createClass({
|
|
mixins: [PureRenderMixin],
|
|
propTypes: {
|
|
option: React.PropTypes.string.isRequired,
|
|
className: React.PropTypes.string.isRequired,
|
|
onClick: React.PropTypes.func.isRequired
|
|
},
|
|
onClick() {
|
|
this.props.onClick(this.props.option);
|
|
},
|
|
render() {
|
|
let { className, option } = this.props;
|
|
return (<a
|
|
onClick={this.onClick}
|
|
className={className}>{option}</a>);
|
|
}
|
|
});
|
|
|
|
module.exports = RoundedToggle;
|