@kwiz/fluentui/dist/controls/tabs.js

KWIZ common controls for FluentUI

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Tab, TabList } from "@fluentui/react-components";
import { CommonLogger, firstOrNull, isUndefined } from "@kwiz/common";
import { useEffect, useMemo, useState } from "react";
import { Stack } from "./stack";
const logger = new CommonLogger("Tabs");
export function TabsEX(props) {
    const [isUnControlled, setIsUnControlled] = useState(!isUndefined(props.defaultSelected));
    const __isUnControlled = !isUndefined(props.defaultSelected);
    useEffect(() => {
        if (__isUnControlled !== isUnControlled) {
            logger.error(`A TabsEX control was switched from controlled to uncontrolled mode. This is not supported.`);
            setIsUnControlled(__isUnControlled);
            if (!__isUnControlled) {
                setUncontrolledSelected(props.selected);
            }
        }
    }, [__isUnControlled, isUnControlled]);
    const [uncontrolledSelected, setUncontrolledSelected] = useState(isUnControlled ? props.defaultSelected : props.selected);
    const selectedValueToUse = isUnControlled ? uncontrolledSelected : props.selected;
    const selectedTab = useMemo(() => {
        return firstOrNull(props.tabs, t => t.key === selectedValueToUse);
    }, [props.tabs, selectedValueToUse]);
    return _jsxs(Stack, Object.assign({ direction: "v" }, (props.container || {}), { children: [_jsx(TabList, Object.assign({}, props.root, { selectedValue: selectedValueToUse, onTabSelect: (e, data) => {
                    var _a;
                    setUncontrolledSelected(data.value);
                    (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, data.value);
                }, children: props.tabs.map(t => _jsx(Tab, { value: t.key, children: t.title }, t.key)) })), selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.children] }));
}
//# sourceMappingURL=tabs.js.map