wix-storybook-utils/src/TabbedView/index.js

Utilities for automated component documentation within Storybook

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Tabs from '../ui/Tabs';
import * as queryString from 'query-string';
import { isE2E } from '../utils';

const TabbedView = props => {
  const [activeTabId, setActiveTabId] = React.useState(
    props.activeTabId || props.tabs[0],
  );
  const handleTabClick = tab => {
    setActiveTabId(tab.id);
  };
  const activeIndex = props.tabs.findIndex(
    tab => tab.toLowerCase() === activeTabId.toLowerCase(),
  );
  return (
    <>
      {props.showTabs && (
        <Tabs
          activeId={activeTabId}
          onClick={handleTabClick}
          items={props.tabs.map(id => ({ title: id, id, dataHook: id }))}
          className={props.className}
        />
      )}

      {React.Children.map(props.children, (child, index) => {
        if (index === activeIndex) {
          return child;
        }
        return null;
      })}
    </>
  );
};

export default TabbedView;