"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Checkbox_1 = require("office-ui-fabric-react/lib/Checkbox");
var Link_1 = require("office-ui-fabric-react/lib/Link");
var Stack_1 = require("office-ui-fabric-react/lib/Stack");
// Optional extra props to pass through to the input element
var inputProps = {
    onFocus: function () { return console.log('Checkbox is focused'); },
    onBlur: function () { return console.log('Checkbox is blurred'); }
};
// Used to add spacing between example checkboxes
var stackTokens = { childrenGap: 10 };
exports.CheckboxOtherExample = function () {
    // Only for the first checkbox, which is controlled
    var _a = React.useState(true), isChecked = _a[0], setIsChecked = _a[1];
    var onChange = React.useCallback(function (ev, checked) {
        setIsChecked(!!checked);
    }, []);
    return (React.createElement(Stack_1.Stack, { tokens: stackTokens },
        React.createElement(Checkbox_1.Checkbox, { label: "Controlled checkbox", checked: isChecked, onChange: onChange }),
        React.createElement(Checkbox_1.Checkbox, { label: 'Checkbox rendered with boxSide "end"', boxSide: "end" }),
        React.createElement(Checkbox_1.Checkbox, { label: "Checkbox with extra props for the input", inputProps: inputProps }),
        React.createElement(Checkbox_1.Checkbox, { label: "Checkbox with link inside the label", onRenderLabel: _renderLabelWithLink })));
};
function _renderLabelWithLink() {
    return (React.createElement("span", null,
        "Custom-rendered label with a",
        ' ',
        React.createElement(Link_1.Link, { href: "https://www.microsoft.com", target: "_blank" }, "link")));
}
//# sourceMappingURL=Checkbox.Other.Example.js.map