@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
27 lines • 2.14 kB
JavaScript
define(["require", "exports", "tslib", "react", "../index"], function (require, exports, tslib_1, React, index_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var toggleTokens = function (props) {
return tslib_1.__assign({}, (props.checked ? { textColor: 'green' } : { textColor: 'red' }), (props.disabled
? tslib_1.__assign({ pillBackground: 'gainsboro' }, (props.checked ? { pillBackground: 'slategrey' } : {})) : tslib_1.__assign({ pillBackground: 'turquoise' }, (props.checked ? { pillBackground: 'navy' } : {}))));
};
var ToggleTokensFunctionExample = /** @class */ (function (_super) {
tslib_1.__extends(ToggleTokensFunctionExample, _super);
function ToggleTokensFunctionExample() {
return _super !== null && _super.apply(this, arguments) || this;
}
ToggleTokensFunctionExample.prototype.render = function () {
return (React.createElement("div", null,
React.createElement(index_1.Toggle, { defaultChecked: true, label: "Enabled and checked", onText: "On", offText: "Off", onChange: this._onChange, tokens: toggleTokens }),
React.createElement(index_1.Toggle, { defaultChecked: false, label: "Enabled and unchecked", onText: "On", offText: "Off", onChange: this._onChange, tokens: toggleTokens }),
React.createElement(index_1.Toggle, { defaultChecked: true, disabled: true, label: "Disabled and checked", onText: "On", offText: "Off", tokens: toggleTokens }),
React.createElement(index_1.Toggle, { defaultChecked: false, disabled: true, label: "Disabled and unchecked", onText: "On", offText: "Off", tokens: toggleTokens })));
};
ToggleTokensFunctionExample.prototype._onChange = function (ev, checked) {
console.log('toggle is ' + (checked ? 'checked' : 'not checked'));
};
return ToggleTokensFunctionExample;
}(React.Component));
exports.ToggleTokensFunctionExample = ToggleTokensFunctionExample;
});
//# sourceMappingURL=Toggle.Tokens.Function.Example.js.map