Function Tabs

components/dash-core-components/src/components/Tabs.tsx:99–302

* A Dash component that lets you render pages with tabs - the Tabs component's children * can be dcc.Tab components, which can hold a label that will be displayed as a tab, and can in turn hold * children components that will be that tab's content.

({
    // eslint-disable-next-line no-magic-numbers
    mobile_breakpoint = 800,
    colors = {
        border: 'var(--Dash-Stroke-Weak)',
        primary: 'var(--Dash-Fill-Interactive-Strong)',
        background: 'var(--Dash-Fill-Interactive-Weak)',
    },
    vertical = false,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    persisted_props = [PersistedProps.value],
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    persistence_type = PersistenceTypes.local,
    children,
    ...props
}: TabsProps)

 * children components that will be that tab's content.
 */
function Tabs({
    // eslint-disable-next-line no-magic-numbers
    mobile_breakpoint = 800,
    colors = {
        border: 'var(--Dash-Stroke-Weak)',
        primary: 'var(--Dash-Fill-Interactive-Strong)',
        background: 'var(--Dash-Fill-Interactive-Weak)',
    },
    vertical = false,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    persisted_props = [PersistedProps.value],
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    persistence_type = PersistenceTypes.local,
    children,
    ...props
}: TabsProps) {
    const initializedRef = useRef(false);
    const [isAboveBreakpoint, setIsAboveBreakpoint] = useState(false);

    const parseChildrenToArray = useCallback((): DashComponent[] => {
        if (!children) {
            return [];
        }
        if (children instanceof Array) {
            return children;
        }
        return [children];
    }, [children]);

    const valueOrDefault = (): string | undefined => {
        if (has('value', props)) {
            return props.value;
        }
        const children = parseChildrenToArray();
        if (children && children.length && children[0].props.componentPath) {
            const firstChildren: TabProps = window.dash_component_api.getLayout(
                [...children[0].props.componentPath, 'props']
            );
            return firstChildren.value ?? 'tab-1';
        }
        return 'tab-1';
    };

    // Initialize value on mount if not set
    useEffect(() => {
        if (!initializedRef.current && !has('value', props)) {
            props.setProps({
                value: `${valueOrDefault()}`,
            });
            initializedRef.current = true;
        }
    }, []);

    // Setup matchMedia for responsive breakpoint
    useEffect(() => {
        const mediaQuery = window.matchMedia(
            `(min-width: ${mobile_breakpoint}px)`
        );