1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | 1× 1× 1× 1× 1× 1× 1× 1× 1× 1× 1× 1× 3× 3× 3× 3× 1× 1× 1× 4× 4× 4× 4× 4× 5× 1× 1× 2× 2× 2× 1× 2× 1× 1× 1× 1× | "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'); var css_1 = require('../../utilities/css'); var Label_1 = require('../../Label'); require('./Toggle.scss'); var _instance = 0; var Toggle = (function (_super) { __extends(Toggle, _super); function Toggle(props) { _super.call(this); this.state = { isChecked: !!(props.checked || props.defaultChecked) }; this._id = "Toggle-" + _instance++; this._onClick = this._onClick.bind(this); } Object.defineProperty(Toggle.prototype, "checked", { /** * Gets the current checked state of the toggle. */ get: function () { return this.state.isChecked; }, enumerable: true, configurable: true }); Toggle.prototype.componentWillReceiveProps = function (newProps) { if (newProps.checked !== undefined) { this.setState({ isChecked: newProps.checked }); } }; Toggle.prototype.render = function () { var _this = this; var _a = this.props, label = _a.label, onText = _a.onText, offText = _a.offText, className = _a.className, disabled = _a.disabled; var isChecked = this.state.isChecked; var stateText = isChecked ? onText : offText; return (React.createElement("div", {className: css_1.css('ms-Toggle', { 'is-checked': isChecked, 'is-enabled': !disabled, 'is-disabled': disabled })}, React.createElement("div", {className: 'ms-Toggle-innerContainer'}, React.createElement(Label_1.Label, {className: 'ms-Toggle-label', htmlFor: this._id}, label), React.createElement("div", {className: 'ms-Toggle-slider'}, React.createElement("button", {ref: function (c) { return _this._toggleButton = c; }, id: this._id, name: this._id, className: css_1.css('ms-Toggle-button', className), disabled: disabled, role: 'button', "aria-pressed": isChecked, onClick: this._onClick}), React.createElement("div", {className: 'ms-Toggle-background'}, React.createElement("div", {className: 'ms-Toggle-focus'}), React.createElement("div", {className: 'ms-Toggle-thumb'})), React.createElement(Label_1.Label, {className: 'ms-Toggle-stateText'}, stateText))))); }; Toggle.prototype.focus = function () { if (this._toggleButton) { this._toggleButton.focus(); } }; Toggle.prototype._onClick = function () { var _a = this.props, checked = _a.checked, onChanged = _a.onChanged; var isChecked = this.state.isChecked; // Only update the state if the user hasn't provided it. if (checked === undefined) { this.setState({ isChecked: !isChecked }); } if (onChanged) { onChanged(!isChecked); } }; Toggle.initialProps = { label: '', onText: 'On', offText: 'Off' }; return Toggle; }(React.Component)); exports.Toggle = Toggle; //# sourceMappingURL=Toggle.js.map |