Function Tabs

src/components/Tabs.jsx:72–140

(props)

 *          It is initialized from the prop defaultFocus, and after the first render it is reset back to false. Later it can become true again when using keys to navigate the tabs.
 */
const Tabs = (props) => {
  checkPropTypes(propTypes, props, 'prop', 'Tabs');
  const {
    children,
    defaultFocus,
    defaultIndex,
    focusTabOnClick,
    onSelect,
    ...attributes
  } = {
    ...defaultProps,
    ...props,
  };

  const [focus, setFocus] = useState(defaultFocus);
  const [mode] = useState(getModeFromProps(attributes));
  const [selectedIndex, setSelectedIndex] = useState(
    mode === MODE_UNCONTROLLED ? defaultIndex || 0 : null,
  );

  useEffect(() => {
    // Reset focus after initial render, see comment above
    setFocus(false);
  }, []);

  if (mode === MODE_UNCONTROLLED) {
    // Ensure that we handle removed tabs and don't let selectedIndex get out of bounds
    const tabsCount = getTabsCount(children);
    useEffect(() => {
      if (selectedIndex != null) {
        const maxTabIndex = Math.max(0, tabsCount - 1);
        setSelectedIndex(Math.min(selectedIndex, maxTabIndex));
      }
    }, [tabsCount]);
  }

  checkForIllegalModeChange(attributes, mode);

  const handleSelected = (index, last, event) => {
    // Call change event handler
    if (typeof onSelect === 'function') {
      // Check if the change event handler cancels the tab change
      if (onSelect(index, last, event) === false) return;
    }

    // Always set focus on tabs unless it is disabled
    if (focusTabOnClick) {
      setFocus(true);
    }

    if (mode === MODE_UNCONTROLLED) {
      // Update selected index
      setSelectedIndex(index);
    }
  };

  let subProps = { ...props, ...attributes };