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

In this Package, we Provide Some Basic Components to Build Web App

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

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: align === 'vertical' ? 'column' : 'row',
    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;