"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CheckboxOtherExample = void 0;
var tslib_1 = require("tslib");
var React = require("react");
var Checkbox_1 = require("@fluentui/react/lib-commonjs/Checkbox");
var Link_1 = require("@fluentui/react/lib-commonjs/Link");
var Stack_1 = require("@fluentui/react/lib-commonjs/Stack");
// Optional extra props to pass through to the input element
var inputProps = tslib_1.__assign({ onFocus: function () { return console.log('Checkbox is focused'); }, onBlur: function () { return console.log('Checkbox is blurred'); } }, { 'data-foo': 'bar' });
// Used to add spacing between example checkboxes
var stackTokens = { childrenGap: 10 };
var 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 link inside the label", onRenderLabel: _renderLabelWithLink }),
        React.createElement(Checkbox_1.Checkbox, { label: "Checkbox with extra props for the input (including data-*)", inputProps: inputProps })));
};
exports.CheckboxOtherExample = CheckboxOtherExample;
function _renderLabelWithLink() {
    return (React.createElement("span", null,
        "Custom-rendered label with a link to",
        ' ',
        React.createElement(Link_1.Link, { href: "https://www.microsoft.com", target: "_blank", underline: true }, "Microsoft home page")));
}
//# sourceMappingURL=Checkbox.Other.Example.js.map