"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TabsRenderActiveOnlyExample = void 0;
var React = require("react");
var react_tabs_1 = require("@fluentui/react-tabs");
var Toggle_1 = require("@fluentui/react/lib-commonjs/Toggle");
var react_hooks_1 = require("@fluentui/react-hooks");
var ExpensiveToMount = function () {
    var _a = React.useState(false), mounted = _a[0], setMounted = _a[1];
    React.useEffect(function () {
        setTimeout(function () {
            setMounted(true);
        }, 3000);
    }, []);
    return React.createElement("div", null, mounted ? 'Rendered' : 'Mounting...');
};
var TabsRenderActiveOnlyExample = function () {
    var _a = react_hooks_1.useBoolean(false), alwaysRender = _a[0], toggleAlwaysRender = _a[1].toggle;
    return (React.createElement("div", null,
        React.createElement(Toggle_1.Toggle, { label: "Always render children", inlineLabel: true, checked: alwaysRender, onChange: toggleAlwaysRender }),
        React.createElement(react_tabs_1.Tabs, { "aria-label": "Separately Rendered Content Tabs Example" },
            React.createElement(react_tabs_1.TabItem, { headerText: "Expensive component #1", alwaysRender: alwaysRender },
                React.createElement(ExpensiveToMount, null),
                "Component #1"),
            React.createElement(react_tabs_1.TabItem, { headerText: "Expensive component #2", alwaysRender: alwaysRender },
                React.createElement(ExpensiveToMount, null),
                "Component #2"))));
};
exports.TabsRenderActiveOnlyExample = TabsRenderActiveOnlyExample;
//# sourceMappingURL=Tabs.AlwaysRender.Example.js.map