generator-bingo-dig-h5
Version:
Bingo-dig-h5 generator by BINGO.DIG
77 lines (63 loc) • 2.07 kB
JSX
var React = require('react');
var Classable = require('../mixins/classable');
var EnhancedSwitch = require('./enhanced-switch');
var RadioButtonOff = require('./svg-icons/toggle-radio-button-off');
var RadioButtonOn = require('./svg-icons/toggle-radio-button-on');
var RadioButton = React.createClass({
mixins: [Classable],
propTypes: {
onCheck: React.PropTypes.func,
name: React.PropTypes.string,
value: React.PropTypes.string,
label: React.PropTypes.string,
disabled: React.PropTypes.bool,
defaultChecked: React.PropTypes.bool,
labelPosition: React.PropTypes.oneOf(['left', 'right']),
direction: React.PropTypes.oneOf(['row', 'column'])
},
render: function() {
var {
onCheck,
...other
} = this.props;
var radioButtonElement = (
<div>
<RadioButtonOff className="dig-radio-button-target" />
<RadioButtonOn className="dig-radio-button-fill" />
</div>
);
var classes = this.getClasses('dig-radio-button', {
'dig-direction-row': this.props.direction === 'row',
'dig-direction-column': this.props.direction === 'column'
});
var enhancedSwitchProps = {
ref: "enhancedSwitch",
inputType: "radio",
switchElement: radioButtonElement,
className: classes,
iconClassName: "dig-radio-button-icon",
onSwitch: this._handleCheck,
defaultSwitched: this.props.defaultChecked,
labelPosition: (this.props.labelPosition) ? this.props.labelPosition : "right"
};
return (
<EnhancedSwitch
{...other}
{...enhancedSwitchProps}/>
);
},
_handleCheck: function(e) {
if (this.props.onCheck) this.props.onCheck(e, this.props.value);
},
isChecked: function() {
return this.refs.enhancedSwitch.isSwitched();
},
setChecked: function(newCheckedValue) {
this.refs.enhancedSwitch.setSwitched(newCheckedValue);
this.setState({switched: newCheckedValue});
},
getValue: function() {
return this.refs.enhancedSwitch.getValue();
}
});
module.exports = RadioButton;