"use strict";
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var React = require('react');
require('./Toggle.scss');
var _instance = 0;
var Toggle = (function (_super) {
__extends(Toggle, _super);
function Toggle(props) {
_super.call(this);
this.state = {
isToggled: props.isToggled
};
this._id = "Toggle-" + _instance++;
this._handleInputChange = this._handleInputChange.bind(this);
}
Toggle.prototype.componentWillReceiveProps = function (newProps) {
if (newProps.isToggled !== this.props.isToggled) {
this.setState({
isToggled: newProps.isToggled
});
}
};
Toggle.prototype.render = function () {
var _a = this.props, label = _a.label, onText = _a.onText, offText = _a.offText;
var isToggled = this.state.isToggled;
return (React.createElement("div", {className: 'ms-Toggle'}, React.createElement("label", {className: 'ms-Toggle-description'}, label), React.createElement("input", {id: this._id, name: this._id, type: 'checkbox', className: 'ms-Toggle-input', checked: isToggled, "aria-pressed": isToggled, onChange: this._handleInputChange, "aria-label": label}), React.createElement("label", {className: 'ms-Toggle-field', title: label, htmlFor: this._id}, React.createElement("span", {className: 'ms-Label ms-Label--off'}, offText), React.createElement("span", {className: 'ms-Label ms-Label--on'}, onText))));
};
Toggle.prototype._handleInputChange = function (evt) {
var onChanged = this.props.onChanged;
var isToggled = evt.target.checked;
this.setState({
isToggled: isToggled
});
Eif (onChanged) {
onChanged(isToggled);
}
};
Toggle.initialProps = {
label: '',
isToggled: false,
onText: 'On',
offText: 'Off'
};
return Toggle;
}(React.Component));
exports.Toggle = Toggle;
//# sourceMappingURL=Toggle.js.map
|