import { __assign, __extends } from "tslib";
import * as React from 'react';
import { Toggle } from '@uifabric/experiments';
import { DefaultButton, Label, Spinner } from 'office-ui-fabric-react';
var ToggleExample = /** @class */ (function (_super) {
    __extends(ToggleExample, _super);
    function ToggleExample(props) {
        var _this = _super.call(this, props) || this;
        _this._toggle = React.createRef();
        _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 _this = this;
        var checked = this.state.checked;
        return (React.createElement("div", null,
            React.createElement(Toggle, { defaultChecked: true, onText: "No Label", offText: "No Label", onChange: this._onChange }),
            React.createElement(Toggle, { defaultChecked: true, label: "No Text", onChange: this._onChange }),
            React.createElement(Toggle, { defaultChecked: true, label: "Enabled and checked", onText: "On", offText: "Off", onChange: this._onChange }),
            React.createElement(Toggle, { defaultChecked: false, label: "Enabled and unchecked", onText: "On", offText: "Off", onChange: this._onChange }),
            React.createElement(Toggle, { defaultChecked: true, disabled: true, label: "Disabled and checked", onText: "On", offText: "Off" }),
            React.createElement(Toggle, { defaultChecked: false, disabled: true, label: "Disabled and unchecked", onText: "On", offText: "Off" }),
            React.createElement(Toggle, { defaultChecked: false, label: "Text prop overrides", onText: "Shouldn't see me", offText: "Shouldn't see me", text: "Override" }),
            React.createElement(Toggle, { defaultChecked: true, label: "Custom On/Off render functions", onChange: this._onCustomRenderChange, slots: {
                    text: {
                        render: function (props) { return React.createElement(Label, __assign({}, props), checked ? React.createElement(Spinner, null) : 'Spinner Off'); },
                    },
                } }),
            React.createElement(Toggle, { checked: checked, label: "Controlled by Toggle above", onText: "Checked", offText: "Unchecked" }),
            React.createElement(DefaultButton, { text: "Focus Toggle", 
                // eslint-disable-next-line react/jsx-no-bind
                onClick: function () {
                    _this._toggle.current && _this._toggle.current.focus();
                } }),
            React.createElement(Toggle, { componentRef: this._toggle, onText: "On", offText: "Off", label: "Focused Toggle" })));
    };
    return ToggleExample;
}(React.Component));
export { ToggleExample };
//# sourceMappingURL=Toggle.Example.js.map