TabBar.js — react Source File

Source Code

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';
import {Fragment, useCallback} from 'react';
import Icon from './Icon';

import styles from './TabBar.css';
import Tooltip from './Components/reach-ui/tooltip';

import type {IconType} from './Icon';

type TabInfo = {
  icon: IconType,
  id: string,
  label: string,
  title?: string,
};

export type Props = {
  currentTab: any,
  disabled?: boolean,
  id: string,
  selectTab: (tabID: any) => void,
  tabs: Array<TabInfo | null>,
  type: 'navigation' | 'profiler' | 'settings',
};

export default function TabBar({
  currentTab,
  disabled = false,
  id: groupName,
  selectTab,
  tabs,
  type,
}: Props): React.Node {
  if (!tabs.some(tab => tab !== null && tab.id === currentTab)) {
    const firstTab = ((tabs.find(tab => tab !== null): any): TabInfo);
    selectTab(firstTab.id);
  }

  const onChange = useCallback(
    ({currentTarget}: $FlowFixMe) => selectTab(currentTarget.value),
    [selectTab],
  );

  const handleKeyDown = useCallback((event: $FlowFixMe) => {
    switch (event.key) {
      case 'ArrowDown':
      case 'ArrowLeft':
      case 'ArrowRight':
      case 'ArrowUp':
        event.stopPropagation();
        break;
// ... (81 more lines)