@kiwicom/orbit-components/lib/Tabs/components/Tab/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";
"use client";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _TabContext = require("../../TabContext");
var _consts = require("./consts");
var _defaultTheme = _interopRequireDefault(require("../../../defaultTheme"));
const getBundleColor = ({
  type,
  theme
}) => {
  if (type === _consts.TYPE_OPTIONS.MEDIUM) return theme.orbit.tabBundleMediumBackground;
  if (type === _consts.TYPE_OPTIONS.BASIC) return theme.orbit.tabBundleBasicBackground;
  return theme.orbit.tabBundleTopBackground;
};
const getBackgroundType = state => ({
  theme,
  $type
}) => {
  if (state === "hover") {
    if ($type === _consts.TYPE_OPTIONS.MEDIUM) return theme.orbit.tabBundleMediumBackgroundHover;
    if ($type === _consts.TYPE_OPTIONS.BASIC) return theme.orbit.tabBundleBasicBackgroundHover;
    return theme.orbit.paletteWhiteHover;
  }
  if (state === "active") {
    if ($type === _consts.TYPE_OPTIONS.MEDIUM) return theme.orbit.tabBundleMediumBackgroundActive;
    if ($type === _consts.TYPE_OPTIONS.BASIC) return theme.orbit.tabBundleBasicBackgroundActive;
    return theme.orbit.paletteWhiteActive;
  }
  return "none";
};
const StyledTab = _styledComponents.default.button.withConfig({
  displayName: "Tab__StyledTab",
  componentId: "sc-1cv6n1m-0"
})(["", ";"], ({
  theme,
  active,
  $type,
  compact,
  disabled
}) => (0, _styledComponents.css)(["display:flex;border:0;flex:1;min-width:fit-content;position:relative;appearance:none;flex-direction:row;justify-content:space-between;box-sizing:border-box;align-items:center;font-family:", ";cursor:", ";opacity:", ";padding:", ";background:", ";font-weight:", ";line-height:", ";font-size:", ";border-radius:", " ", " 0 0;transition:background ", " ease-in-out;border-bottom-width:2px;border-style:solid;border-image-slice:1;border-image-source:", ";border-bottom-color:", ";&:hover{background:", ";}&:focus,&:active{background:", ";}"], theme.orbit.fontFamily, !disabled && "pointer", disabled && "0.5", compact ? "5px 16px" : "9px 16px", getBackgroundType(), theme.orbit.fontWeightMedium, compact ? theme.orbit.lineHeightTextNormal : theme.orbit.lineHeightTextLarge, compact ? theme.orbit.fontSizeTextNormal : theme.orbit.fontSizeTextLarge, theme.orbit.borderRadiusNormal, theme.orbit.borderRadiusNormal, theme.orbit.durationFast, !disabled && active && $type !== _consts.TYPE_OPTIONS.DEFAULT && getBundleColor({
  type: $type,
  theme
}), !disabled && active && $type === _consts.TYPE_OPTIONS.DEFAULT ? `${theme.orbit.paletteProductNormal}` : "transparent", !disabled && getBackgroundType("hover"), !disabled && getBackgroundType("active")));
StyledTab.defaultProps = {
  theme: _defaultTheme.default
};
const StyledTabText = _styledComponents.default.span.withConfig({
  displayName: "Tab__StyledTabText",
  componentId: "sc-1cv6n1m-1"
})(["", ";"], ({
  theme,
  type
}) => (0, _styledComponents.css)(["color:", ";width:100%;", ";"], theme.orbit.paletteInkDark, type !== _consts.TYPE_OPTIONS.DEFAULT && (0, _styledComponents.css)(["background:", ";-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;"], getBundleColor)));
StyledTabText.defaultProps = {
  theme: _defaultTheme.default
};
const Tab = ({
  children,
  dataTest,
  active = false,
  disabled,
  onClick,
  type = _consts.TYPE_OPTIONS.DEFAULT
}) => {
  const {
    setSelected,
    selected,
    onChange
  } = (0, _TabContext.useTabs)();
  const {
    index,
    compact
  } = (0, _TabContext.useTab)();
  const isSelected = active || selected === index;
  _react.default.useEffect(() => {
    if (onChange && !onClick) onChange(selected);
    if (onClick) setSelected(undefined);
  }, [onChange, selected, setSelected]);
  return /*#__PURE__*/_react.default.createElement(StyledTab, {
    "data-test": dataTest,
    onClick: ev => {
      if (onClick) {
        onClick(ev);
      } else setSelected(index);
    },
    type: "button",
    disabled: disabled,
    $type: type,
    role: "tab",
    "aria-selected": isSelected,
    "aria-disabled": disabled,
    "aria-controls": `panel-${index}`,
    compact: compact,
    active: isSelected
  }, /*#__PURE__*/_react.default.createElement(StyledTabText, {
    type: type
  }, children));
};
var _default = Tab;
exports.default = _default;