@spaced-out/ui-design-system/lib/components/ButtonTabs/ButtonTabs.js

Sense UI components library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ButtonTabs = void 0;
var React = _interopRequireWildcard(require("react"));
var _classify = _interopRequireDefault(require("../../utils/classify"));
var _ButtonTabDropdown = require("./ButtonTabDropdown");
var _ButtonTabsModule = _interopRequireDefault(require("./ButtonTabs.module.css"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (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 (const 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); }
const ButtonTabs = exports.ButtonTabs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
  let {
    classNames,
    children,
    isFluid,
    size = 'medium',
    disabled,
    selectedButtonTabId,
    onButtonTabSelect,
    wrapAfter,
    elevation = 'modal',
    wrapTabTitle = 'more',
    anchorPosition
  } = _ref;
  const childrenArray = React.Children.toArray(children);
  let unwrappedNodes = childrenArray;
  let wrappedNodes = [];
  if (typeof wrapAfter === 'number' && wrapAfter > -1) {
    unwrappedNodes = childrenArray.slice(0, wrapAfter);
    wrappedNodes = childrenArray.slice(wrapAfter);
    if (wrappedNodes.length) {
      unwrappedNodes.push(/*#__PURE__*/React.createElement(_ButtonTabDropdown.ButtonTabDropdown, {
        id: "more-tab",
        title: wrapTabTitle,
        iconName: "ellipsis-vertical",
        elevation: elevation,
        anchorPosition: anchorPosition,
        dropdownClass: classNames?.buttonTabDropdownWrapper
      }, wrappedNodes));
    }
  }
  const childrenWithProps = unwrappedNodes.map((child, index) => {
    if (/*#__PURE__*/React.isValidElement(child)) {
      const {
        disabled: disabledChild,
        classNames: classNamesChild
      } = child.props;
      const isFirst = index === 0;
      const isLast = index === unwrappedNodes.length - 1;
      return /*#__PURE__*/React.cloneElement(child, {
        ...child.props,
        isFluid,
        size,
        isLeftCurved: isFirst,
        isRightCurved: isLast,
        disabled: disabledChild || disabled,
        selectedButtonTabId,
        onButtonTabSelect,
        classNames: {
          wrapper: classNamesChild?.wrapper
        }
      });
    }
    return child;
  });
  return /*#__PURE__*/React.createElement("div", {
    "data-testid": "ButtonTabs",
    ref: ref,
    className: (0, _classify.default)(_ButtonTabsModule.default.buttonTabsWrapper, {
      [_ButtonTabsModule.default.medium]: size === 'medium',
      [_ButtonTabsModule.default.small]: size === 'small',
      [_ButtonTabsModule.default.isFluid]: isFluid,
      [_ButtonTabsModule.default.disabled]: disabled
    }, classNames?.wrapper)
  }, childrenWithProps);
});