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

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

import React, { useMemo, useCallback } from 'react';
import { Tab_defaultProps } from "./props/defaultProps";
import { Tab_propTypes } from "./props/propTypes";
import { Box, Container } from "../Layout";
import { cs } from "../../utils/Common";
import styles from "./v1Tab.module.css";
const tabTypes = {
  alpha: {
    active: 'alphaActive',
    tab: 'tabAlpha'
  },
  beta: {
    active: 'betaActive',
    tab: 'tabBeta'
  },
  delta: {
    active: 'deltaActive',
    tab: 'tabDelta'
  }
};
export default function Tab(_ref) {
  let {
    id,
    style,
    text,
    children,
    className,
    dataId,
    dataSelectorId,
    title,
    titlePosition,
    activeClass,
    href,
    isLink,
    isDisabled,
    tourId,
    onClick,
    isActive,
    getTabRef,
    onSelect,
    type,
    isAnimate,
    needBorder,
    needAppearance,
    align,
    isVirtual,
    customProps
  } = _ref;
  let clickListener = useCallback(event => {
    if (isLink && event && (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)) {
      event && event.stopPropagation();
      return;
    }

    event && event.preventDefault();
    onSelect(id);
    onClick && onClick(event);
  }, [id, isLink, onSelect, onClick]);
  let styleContent = useMemo(() => tabTypes[type] || {
    active: 'active',
    tab: 'tab'
  }, [type]);
  let getTab = useCallback(ref => getTabRef && getTabRef(id, ref, isVirtual), [id, isVirtual]);
  let activeWithAppearance = cs([styles[styleContent.active], needBorder && !isAnimate && styles[`${styleContent.active}_border`]]);
  let activeClasses = cs([needAppearance && activeWithAppearance, activeClass]);
  let inActiveClasses = needAppearance && cs([styles[styleContent.tab], tabTypes[type] && styles[`${`${type}Hover`}`]]);
  let tabClass = cs([styles.tab, align === 'vertical' ? styles.vertical : styles.horizontal, isDisabled && styles.disabled, needBorder && !isAnimate && needAppearance && styles.border, isActive ? activeClasses : inActiveClasses, className]);
  return /*#__PURE__*/React.createElement(Box, {
    tourId: tourId,
    tagName: isLink ? 'a' : 'div',
    className: tabClass,
    dataId: `${dataId}_Tab`,
    onClick: !isDisabled ? clickListener : undefined,
    style: style,
    eleRef: getTab,
    "data-title": title,
    "data-title-position": titlePosition,
    adjust: true,
    href: isLink ? href : undefined,
    "data-key": id,
    role: "link",
    "aria-controls": id,
    "aria-selected": isActive ? true : false,
    tabIndex: isLink ? undefined : isActive && !isDisabled ? '0' : '0',
    "aria-label": text ? text : null,
    dataSelectorId: dataSelectorId,
    ...customProps
  }, /*#__PURE__*/React.createElement(Container, {
    alignBox: "row",
    align: "both",
    className: styles.textContainer
  }, text && /*#__PURE__*/React.createElement(Box, {
    flexible: true,
    adjust: true,
    className: styles.tabText
  }, text), children ? /*#__PURE__*/React.createElement(Box, {
    shrink: true
  }, children) : null));
}
Tab.defaultProps = Tab_defaultProps;
Tab.propTypes = Tab_propTypes; // if (__DOCS__) {
//   Tab.docs = {
//     componentGroup: 'Tab',
//     folderName: 'Style Guide'
//   };
// }