@zohodesk/components/es/Tab/TabWrapper.js

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

import React, { useState, useCallback } from 'react';
import { TabWrapper_defaultProps } from "./props/defaultProps";
import { TabWrapper_propTypes } from "./props/propTypes";
import { Container } from "../Layout";
import { TAB_ALIGN_MAPPING } from "./utils/tabConfigs";

function TabWrapper(_ref) {
  let {
    defaultTab,
    hookToDisableInternalState,
    onSelect,
    type,
    isAnimate,
    needTabBorder,
    needBorder,
    needPadding,
    needAppearance,
    align,
    dataId,
    children,
    dataSelectorId
  } = _ref;
  let [selectedTabInternal, setSelected] = useState(!hookToDisableInternalState ? defaultTab || 0 : null);
  const setSelectedTab = useCallback(id => {
    if (!hookToDisableInternalState) {
      setSelected(id);
    }

    onSelect && onSelect(id);
  }, [hookToDisableInternalState, onSelect]);
  return /*#__PURE__*/React.createElement(Container, {
    alignBox: TAB_ALIGN_MAPPING[align],
    dataId: dataId,
    dataSelectorId: dataSelectorId
  }, React.Children.map(children, child => {
    let TabsChild = child.type;
    let selectedTab = hookToDisableInternalState ? defaultTab : selectedTabInternal;
    return /*#__PURE__*/React.createElement(TabsChild // eslint-disable-next-line react/no-array-index-key
    , { ...child.props,
      selectedTab: selectedTab,
      onSelect: setSelectedTab,
      type: type,
      isAnimate: isAnimate,
      needTabBorder: needTabBorder,
      needBorder: needBorder,
      needPadding: needPadding,
      needAppearance: needAppearance,
      hookToDisableInternalState: hookToDisableInternalState,
      align: align
    });
  }));
}

TabWrapper.propTypes = TabWrapper_propTypes;
TabWrapper.defaultProps = TabWrapper_defaultProps;
export default TabWrapper;