@zohodesk/components/es/Tab/Tab.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

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

/* eslint-disable react/forbid-component-props */

/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['text', 'tabAlpha', 'alphaActive', 'gammaActive', 'betaActive', 'deltaActive', 'tabGamma', 'tabBeta', 'tabDelta',', 'specialActive', 'tabSpecial', 'alphaActive_border', 'gammaActive_border', 'betaActive_border', 'deltaActive_border'] }] */
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 { TAB_DIRECTION_MAPPING } from "./utils/tabConfigs";
import styles from "./Tab.module.css";
const tabTypes = {
  alpha: {
    active: 'alphaActive',
    tab: 'tabAlpha'
  },
  beta: {
    active: 'betaActive',
    tab: 'tabBeta'
  },
  delta: {
    active: 'deltaActive',
    tab: 'tabDelta'
  }
};
export default function Tab({
  id,
  style,
  text,
  children,
  className,
  dataId,
  dataSelectorId,
  title,
  titlePosition,
  activeClass,
  href,
  isLink,
  isDisabled,
  tourId,
  onClick,
  isActive,
  getTabRef,
  onSelect,
  type,
  isAnimate,
  needBorder,
  needAppearance,
  align,
  isVirtual,
  contentAlign,
  contentAlignBox,
  customProps
}) {
  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, TAB_DIRECTION_MAPPING[align] === 'column' ? styles.vertical : styles.horizontal, isDisabled && styles.disabled, needBorder && !isAnimate && needAppearance && styles.border, isActive ? activeClasses : inActiveClasses, className]);
  return /*#__PURE__*/React.createElement(Box, _extends({
    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: contentAlignBox,
    align: contentAlign,
    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'
//   };
// }