@wix/design-system/dist/cjs/Tabs/components/TabItem/TabItem.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _pick = _interopRequireDefault(require("../../../utils/operators/pick"));
var _Text = _interopRequireDefault(require("../../../Text"));
var _TabsSt = require("../../Tabs.st.css.js");
var _excluded = ["item", "onItemClick", "isActive", "dynamicProperties", "size", "type", "alignment", "width", "itemMaxWidth", "scrollOnOverflow"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Tabs/components/TabItem/TabItem.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var TabItem = _ref => {
  var item = _ref.item,
    onItemClick = _ref.onItemClick,
    isActive = _ref.isActive,
    dynamicProperties = _ref.dynamicProperties,
    size = _ref.size,
    type = _ref.type,
    alignment = _ref.alignment,
    width = _ref.width,
    itemMaxWidth = _ref.itemMaxWidth,
    scrollOnOverflow = _ref.scrollOnOverflow,
    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  var minWidth = item.minWidth,
    maxWidth = item.maxWidth;
  var textSize = size === 'smallMedium' ? 'small' : size;
  var itemStyle = (0, _react.useMemo)(() => {
    var inlineStyle = {};
    if (type === 'uniformSide' && width) {
      inlineStyle = {
        width
      };
    } else if (type === 'compactSide' && itemMaxWidth) {
      inlineStyle = {
        maxWidth: "".concat(itemMaxWidth, "pt")
      };
    }
    if (minWidth) {
      inlineStyle.minWidth = minWidth;
    }
    if (maxWidth) {
      inlineStyle.maxWidth = maxWidth;
    }
    return inlineStyle;
  }, [type, width, itemMaxWidth, minWidth, maxWidth]);
  var handleKeyDown = e => {
    if (e.key === ' ' || e.key === 'Space' || e.key === 'Enter') {
      e.preventDefault();
      onItemClick == null || onItemClick(item);
    }
  };
  return /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({
    role: "tab",
    type: "button",
    "aria-selected": isActive,
    "data-active": isActive,
    "data-hook": item.dataHook,
    key: item.id,
    onClick: onItemClick ? () => onItemClick(item) : undefined,
    style: itemStyle
  }, (0, _pick.default)(restProps, dynamicProperties), {
    className: (0, _TabsSt.st)(_TabsSt.classes.tab, {
      size,
      active: isActive,
      type,
      alignment
    }),
    onKeyDown: handleKeyDown,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 52,
      columnNumber: 5
    }
  }), item.prefix && /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _TabsSt.st)(_TabsSt.classes.affix),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 65,
      columnNumber: 23
    }
  }, item.prefix), /*#__PURE__*/_react.default.createElement(_Text.default, {
    size: textSize,
    className: _TabsSt.classes.tabText,
    weight: "thin",
    ellipsis: !scrollOnOverflow,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 67,
      columnNumber: 7
    }
  }, item.title), item.suffix && /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _TabsSt.st)(_TabsSt.classes.affix),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 76,
      columnNumber: 23
    }
  }, item.suffix));
};
var _default = exports.default = TabItem;
//# sourceMappingURL=TabItem.js.map