@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
37 lines • 2.74 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var experiments_1 = require("@uifabric/experiments");
var office_ui_fabric_react_1 = require("office-ui-fabric-react");
// tslint:disable:jsx-no-lambda
var ToggleExample = /** @class */ (function (_super) {
tslib_1.__extends(ToggleExample, _super);
function ToggleExample(props) {
var _this = _super.call(this, props) || this;
_this._onChange = function (ev, checked) {
console.log('toggle is ' + (checked ? 'checked' : 'not checked'));
};
_this._onCustomRenderChange = function (ev, checked) {
console.log('toggle is ' + (checked ? 'checked' : 'not checked'));
_this.setState({ checked: checked });
};
_this.state = { checked: true };
return _this;
}
ToggleExample.prototype.render = function () {
var checked = this.state.checked;
return (React.createElement("div", null,
React.createElement(experiments_1.Toggle, { defaultChecked: true, onText: "No Label", offText: "No Label", onChange: this._onChange }),
React.createElement(experiments_1.Toggle, { defaultChecked: true, label: "No Text", onChange: this._onChange }),
React.createElement(experiments_1.Toggle, { defaultChecked: true, label: "Enabled and checked", onText: "On", offText: "Off", onChange: this._onChange }),
React.createElement(experiments_1.Toggle, { defaultChecked: false, label: "Enabled and unchecked", onText: "On", offText: "Off", onChange: this._onChange }),
React.createElement(experiments_1.Toggle, { defaultChecked: true, disabled: true, label: "Disabled and checked", onText: "On", offText: "Off" }),
React.createElement(experiments_1.Toggle, { defaultChecked: false, disabled: true, label: "Disabled and unchecked", onText: "On", offText: "Off" }),
React.createElement(experiments_1.Toggle, { defaultChecked: false, label: "Text prop overrides", onText: "Shouldn't see me", offText: "Shouldn't see me", text: "Override" }),
React.createElement(experiments_1.Toggle, { defaultChecked: true, label: "Custom On/Off render functions", onChange: this._onCustomRenderChange, text: function (render) { return render(function (TextType, props) { return React.createElement(office_ui_fabric_react_1.Label, tslib_1.__assign({}, props), checked ? React.createElement(office_ui_fabric_react_1.Spinner, null) : 'Spinner Off'); }); } })));
};
return ToggleExample;
}(React.Component));
exports.ToggleExample = ToggleExample;
//# sourceMappingURL=Toggle.Example.js.map