Toggle checbox
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { modal } from '../../../actions/modal';
class Status extends Component {
constructor(props) {
super(props)
//I get a `status` variable from a global variable on another part of my system.
this.state = {
status
}
this.openTMMESwitchModal = this.openTMMESwitchModal.bind(this);
this.handleStatusChange = this.handleStatusChange.bind(this);
}
componentWillMount() {
if(this.state.status) {
this.status = "checked";
}
}
handleStatusChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
openTMMESwitchModal() {
this.props.modal({
type: 'SHOW_MODAL',
modalType: 'TMME_SWITCH',
modalProps: {}
})
}
render() {
return (
<div className="slds-col slds-size--1-of-1 slds-medium-size--1-of-3 slds-large-size--1-of-3">
<div className="slds-align--absolute-center slds-text-align--center">
<div className="slds-form-element">
<label className="slds-checkbox--toggle slds-grid">
<span className="slds-form-element__label slds-m-bottom--none">Status</span>
<input onClick={ this.openTMMESwitchModal } type="checkbox" ref={(input) => { this.status = input; }} onChange={this.handleStatusChange} name="status"/>
<span id="toggle-desc" className="slds-checkbox--faux_container" ariaLive="assertive">
<span className="slds-checkbox--faux"></span>
<span className="slds-checkbox--on">Enabled</span>
<span className="slds-checkbox--off">Disabled</span>
</span>
</label>
</div>
</div>
</div>
);
}
}
export default connect(null, { modal } )(Status);