import * as React from 'react';
import { Tabs, TabItem } from '@fluentui/react-tabs';
import { Toggle } from '@fluentui/react/lib/Toggle';
import { useBoolean } from '@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...');
};
export var TabsRenderActiveOnlyExample = function () {
    var _a = useBoolean(false), alwaysRender = _a[0], toggleAlwaysRender = _a[1].toggle;
    return (React.createElement("div", null,
        React.createElement(Toggle, { label: "Always render children", inlineLabel: true, checked: alwaysRender, onChange: toggleAlwaysRender }),
        React.createElement(Tabs, { "aria-label": "Separately Rendered Content Tabs Example" },
            React.createElement(TabItem, { headerText: "Expensive component #1", alwaysRender: alwaysRender },
                React.createElement(ExpensiveToMount, null),
                "Component #1"),
            React.createElement(TabItem, { headerText: "Expensive component #2", alwaysRender: alwaysRender },
                React.createElement(ExpensiveToMount, null),
                "Component #2"))));
};
//# sourceMappingURL=Tabs.AlwaysRender.Example.js.map