wix-style-react/dist/src/CardFolderTabs/CardFolderTabs.js

wix-style-react

"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 _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Text = _interopRequireDefault(require("../Text"));
var _constants = require("./constants");
var _Tab = _interopRequireDefault(require("./Tab"));
var _CardFolderTabsSt = require("./CardFolderTabs.st.css");
var _Focusable = require("../common/Focusable");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/CardFolderTabs/CardFolderTabs.js";
var tabButton = _ref => {
  var {
    className,
    id,
    name,
    disabled,
    selected,
    maxTabWidth,
    onTabChange,
    focusableOnFocus,
    focusableOnBlur,
    fluid,
    ellipsis,
    size,
    beforeSelected,
    afterSelected
  } = _ref;
  return /*#__PURE__*/_react.default.createElement("button", {
    "data-hook": _constants.dataHooks.tabButton(id),
    className: (0, _CardFolderTabsSt.st)(_CardFolderTabsSt.classes.button, {
      selected,
      disabled,
      fluid,
      beforeSelected,
      afterSelected
    }, className),
    style: fluid ? {} : {
      [_CardFolderTabsSt.vars['maxWidth']]: maxTabWidth
    },
    onClick: () => onTabChange(id),
    disabled: disabled,
    key: id,
    onFocus: focusableOnFocus,
    onBlur: focusableOnBlur,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 26,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
    dataHook: _constants.dataHooks.tabText(id),
    ellipsis: ellipsis,
    className: _CardFolderTabsSt.classes.buttonText,
    size: size,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 46,
      columnNumber: 7
    }
  }, name));
};
var TabButton = (0, _Focusable.withFocusable)(tabButton);
class CardFolderTabs extends _react.default.PureComponent {
  render() {
    var {
      dataHook,
      className,
      children,
      activeId,
      maxTabWidth,
      onTabChange,
      fluid,
      ellipsis,
      size
    } = this.props;
    var cardFolderTabs = Array.isArray(children) ? children : [children];
    var selectedTabIndex = cardFolderTabs.findIndex(tab => activeId === tab.props.id);
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _CardFolderTabsSt.st)(_CardFolderTabsSt.classes.root, {
        fluid
      }, className),
      "data-hook": dataHook,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 78,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      "data-hook": _constants.dataHooks.header,
      className: _CardFolderTabsSt.classes.headerWrapper,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 82,
        columnNumber: 9
      }
    }, cardFolderTabs.map((_ref2, index) => {
      var {
        props
      } = _ref2;
      return /*#__PURE__*/_react.default.createElement(TabButton, (0, _extends2.default)({
        key: props.id
      }, props, {
        selected: activeId === props.id,
        beforeSelected: index === selectedTabIndex - 1,
        afterSelected: index === selectedTabIndex + 1,
        maxTabWidth: maxTabWidth,
        fluid: fluid,
        ellipsis: ellipsis,
        size: size,
        onTabChange: typeof onTabChange === 'function' ? onTabChange : undefined,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 84,
          columnNumber: 13
        }
      }));
    })), /*#__PURE__*/_react.default.createElement("div", {
      "data-hook": _constants.dataHooks.content,
      className: _CardFolderTabsSt.classes.tabContentWrapper,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 100,
        columnNumber: 9
      }
    }, cardFolderTabs.filter(tab => activeId === tab.props.id)));
  }
}
CardFolderTabs.displayName = 'CardFolderTabs';
CardFolderTabs.propTypes = {
  /** Applies a data-hook HTML attribute that can be used in the tests. */
  dataHook: _propTypes.default.string,
  /** Specifies a CSS class name to be appended to the component’s root element. */
  className: _propTypes.default.string,
  /** Specifies an id of a currently visible tab. */
  activeId: _propTypes.default.string.isRequired,
  /** Defines a callback function which is called on tab change. An id of a newly selected tab is passed as a parameter. */
  onTabChange: _propTypes.default.func,
  /** Defines a maximum width of a tab button. */
  maxTabWidth: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
  /** Stretches tabs to fill a 100% of a parent container width */
  fluid: _propTypes.default.bool,
  /** Specifies whether text that exceeds tab width is truncated with ellipsis. If false, text will wrap to another line. */
  ellipsis: _propTypes.default.bool,
  /** Controls tab label font size */
  size: _propTypes.default.oneOf(['medium', 'small'])
};
CardFolderTabs.defaultProps = {
  maxTabWidth: '138px',
  ellipsis: true,
  size: 'medium',
  fluid: false
};
CardFolderTabs.Tab = _Tab.default;
var _default = exports.default = CardFolderTabs;
//# sourceMappingURL=CardFolderTabs.js.map