TabBar() — react Function Reference

Architecture documentation for the TabBar() function in TabBar.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ TabBar() — react Function Reference

Dependency Diagram

graph TD
  cbbc189a_3397_6ee7_339c_6996a36ac0e5["TabBar()"]
  1356ba82_c85f_323e_8c5f_e616c171f6ad["TabBar.js"]
  cbbc189a_3397_6ee7_339c_6996a36ac0e5 -->|defined in| 1356ba82_c85f_323e_8c5f_e616c171f6ad
  style cbbc189a_3397_6ee7_339c_6996a36ac0e5 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/TabBar.js lines 35–140

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;
      default:
        break;
    }
  }, []);

  let iconSizeClassName;
  let tabLabelClassName;
  let tabSizeClassName;
  switch (type) {
    case 'navigation':
      iconSizeClassName = styles.IconSizeNavigation;
      tabLabelClassName = styles.TabLabelNavigation;
      tabSizeClassName = styles.TabSizeNavigation;
      break;
    case 'profiler':
      iconSizeClassName = styles.IconSizeProfiler;
      tabLabelClassName = styles.TabLabelProfiler;
      tabSizeClassName = styles.TabSizeProfiler;
      break;
    case 'settings':
      iconSizeClassName = styles.IconSizeSettings;
      tabLabelClassName = styles.TabLabelSettings;
      tabSizeClassName = styles.TabSizeSettings;
      break;
    default:
      throw Error(`Unsupported type "${type}"`);
  }

  return (
    <Fragment>
      {tabs.map(tab => {
        if (tab === null) {
          return <div key="VRule" className={styles.VRule} />;
        }

        const {icon, id, label, title} = tab;

        let button = (
          <label
            className={[
              tabSizeClassName,
              disabled ? styles.TabDisabled : styles.Tab,
              !disabled && currentTab === id ? styles.TabCurrent : '',
            ].join(' ')}
            data-testname={`TabBarButton-${id}`}
            key={id}
            onKeyDown={handleKeyDown}
            onMouseDown={() => selectTab(id)}>
            <input
              type="radio"
              className={styles.Input}
              checked={currentTab === id}
              disabled={disabled}
              name={groupName}
              value={id}