@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
28 lines • 2.02 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var index_1 = require("../index");
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