@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.
56 lines (55 loc) • 3.58 kB
JavaScript
;
"use client";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _TabContext = require("../../TabContext");
var _consts = require("./consts");
const Tab = props => {
const {
children,
dataTest,
active = false,
disabled,
onClick,
type = _consts.TYPE_OPTIONS.DEFAULT,
ref
} = props;
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, onClick]);
return /*#__PURE__*/_react.default.createElement("button", {
ref: ref,
"data-test": dataTest,
className: (0, _clsx.default)("flex flex-1 flex-row items-center justify-between", "appearance-none border-0", "min-w-fit", "box-border", "font-base font-medium", "rounded-t-200", "duration-fast transition-colors ease-in-out", "px-400 focus:z-default", compact ? "text-normal py-[5px] leading-normal" : "text-large leading-large py-[9px]", disabled && "cursor-not-allowed opacity-50", !disabled && ["cursor-pointer", !isSelected && "border-0", isSelected && type === _consts.TYPE_OPTIONS.DEFAULT && "border-product-normal border-b-2", isSelected && type !== _consts.TYPE_OPTIONS.DEFAULT && type === _consts.TYPE_OPTIONS.BASIC && "border-b-2 [border-image-slice:1] [border-image-source:theme(backgroundImage.tab-bundle-basic-foreground)]", isSelected && type !== _consts.TYPE_OPTIONS.DEFAULT && type === _consts.TYPE_OPTIONS.MEDIUM && "border-b-2 [border-image-slice:1] [border-image-source:theme(backgroundImage.tab-bundle-medium-foreground)]", isSelected && type !== _consts.TYPE_OPTIONS.DEFAULT && type === _consts.TYPE_OPTIONS.TOP && "border-b-2 [border-image-slice:1] [border-image-source:theme(backgroundImage.tab-bundle-top-foreground)]"], type === _consts.TYPE_OPTIONS.DEFAULT && "bg-white-normal hover:bg-white-normal-hover ", type === _consts.TYPE_OPTIONS.BASIC && "bg-tab-bundle-basic-background hover:bg-tab-bundle-basic-background-hover active:bg-tab-bundle-basic-background-active", type === _consts.TYPE_OPTIONS.MEDIUM && "bg-tab-bundle-medium-background hover:bg-tab-bundle-medium-background-hover active:bg-tab-bundle-medium-background-active", type === _consts.TYPE_OPTIONS.TOP && "bg-tab-bundle-top-background hover:bg-tab-bundle-top-background-hover"),
onClick: ev => {
if (onClick) {
onClick(ev);
} else setSelected(index);
},
id: `tab-${index}`,
type: "button",
disabled: disabled,
role: "tab",
tabIndex: isSelected ? 0 : -1,
"aria-selected": isSelected,
"aria-disabled": disabled,
"aria-controls": `panel-${index}`
}, /*#__PURE__*/_react.default.createElement("span", {
className: (0, _clsx.default)("w-full", isSelected ? "text-ink-dark" : "text-ink-normal", type !== _consts.TYPE_OPTIONS.DEFAULT && ["bg-clip-text [-webkit-background-clip:text] [-webkit-text-fill-color:transparent]", type === _consts.TYPE_OPTIONS.BASIC && "bg-tab-bundle-basic-foreground", type === _consts.TYPE_OPTIONS.MEDIUM && "bg-tab-bundle-medium-foreground", type === _consts.TYPE_OPTIONS.TOP && "bg-tab-bundle-top-foreground"])
}, children));
};
var _default = exports.default = Tab;