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

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _Text = _interopRequireDefault(require("../Text"));

var _TextButton = _interopRequireDefault(require("../TextButton"));

var _VerticalTabsItemSt = require("./VerticalTabsItem.st.css");

var _context = require("../FontUpgrade/context");

var _VerticalTabsContext = _interopRequireDefault(require("../VerticalTabs/VerticalTabsContext"));

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

/** Internal Component to be used by VerticalTabs */
var VerticalTabsItem = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inherits2["default"])(VerticalTabsItem, _React$PureComponent);

  var _super = _createSuper(VerticalTabsItem);

  function VerticalTabsItem() {
    (0, _classCallCheck2["default"])(this, VerticalTabsItem);
    return _super.apply(this, arguments);
  }

  (0, _createClass2["default"])(VerticalTabsItem, [{
    key: "_renderText",
    value: function _renderText(_ref) {
      var isMadefor = _ref.isMadefor;
      var _this$props = this.props,
          children = _this$props.children,
          type = _this$props.type,
          disabled = _this$props.disabled;
      var size = this.context.size;
      var isTitle = type === 'title';
      var commonProps = {
        weight: isMadefor ? 'thin' : 'normal',
        size: isTitle ? 'small' : size,
        dataHook: 'vertical-tabs-item-text'
      };
      return type === 'action' ? /*#__PURE__*/_react["default"].createElement(_TextButton["default"], (0, _extends2["default"])({}, commonProps, {
        disabled: disabled
      }), children) : /*#__PURE__*/_react["default"].createElement(_Text["default"], (0, _extends2["default"])({
        className: _VerticalTabsItemSt.classes.text,
        light: isTitle,
        secondary: isTitle,
        skin: disabled ? 'disabled' : 'standard'
      }, commonProps), children);
    }
  }, {
    key: "_renderPrefix",
    value: function _renderPrefix() {
      var _this$props2 = this.props,
          prefixIcon = _this$props2.prefixIcon,
          type = _this$props2.type;
      var size = this.context.size;
      return /*#__PURE__*/_react["default"].cloneElement(prefixIcon, {
        size: size === 'medium' ? 24 : 18,
        'data-hook': 'vertical-tabs-item-prefix-icon',
        className: (0, _VerticalTabsItemSt.st)(_VerticalTabsItemSt.classes.prefixIcon, {
          action: type === 'action'
        })
      });
    }
  }, {
    key: "_renderSuffix",
    value: function _renderSuffix() {
      var suffixIcon = this.props.suffixIcon;
      var size = this.context.size;
      return /*#__PURE__*/_react["default"].cloneElement(suffixIcon, {
        size: size === 'medium' ? 24 : 18,
        className: _VerticalTabsItemSt.classes.suffixIcon,
        'data-hook': 'vertical-tabs-item-suffix-icon'
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this = this;

      var _this$props3 = this.props,
          id = _this$props3.id,
          dataHook = _this$props3.dataHook,
          disabled = _this$props3.disabled,
          prefixIcon = _this$props3.prefixIcon,
          suffixIcon = _this$props3.suffixIcon,
          tabIndex = _this$props3.tabIndex,
          type = _this$props3.type;
      var selected = !!id && !!this.context.activeTabId && id === this.context.activeTabId;
      return /*#__PURE__*/_react["default"].createElement(_context.FontUpgradeContext.Consumer, null, function (_ref2) {
        var isMadefor = _ref2.active;
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: (0, _VerticalTabsItemSt.st)(_VerticalTabsItemSt.classes.root, {
            disabled: disabled,
            action: type === 'action',
            title: type === 'title',
            suffixIcon: !!suffixIcon,
            prefixIcon: !!prefixIcon,
            selected: selected
          }),
          id: id,
          tabIndex: tabIndex,
          ref: function ref(_ref3) {
            return _this.innerComponentRef = _ref3;
          },
          "data-hook": dataHook,
          onClick: !disabled ? function () {
            return _this.context.onChange(id);
          } : undefined
        }, prefixIcon && _this._renderPrefix(), _this._renderText({
          isMadefor: isMadefor
        }), suffixIcon && _this._renderSuffix());
      });
    }
  }]);
  return VerticalTabsItem;
}(_react["default"].PureComponent);

(0, _defineProperty2["default"])(VerticalTabsItem, "displayName", 'VerticalTabsItem');
(0, _defineProperty2["default"])(VerticalTabsItem, "propTypes", {
  /** type of vertical tab item. can be of the following: 'tab' (default), 'action', 'title' */
  type: _propTypes["default"].oneOf(['tab', 'action', 'title']),

  /** Data attribute for testing purposes */
  dataHook: _propTypes["default"].string,

  /** Prefix Icon - should be <code>Icon</code>*/
  prefixIcon: _propTypes["default"].node,

  /** Suffix Icon - should be <code>Icon</code> or <code>IconButton</code> with the <code>size="tiny"</code> prop*/
  suffixIcon: _propTypes["default"].node,

  /** Children - only single child is allowed here */
  children: _propTypes["default"].node,

  /** Disabled */
  disabled: _propTypes["default"].bool,

  /** identifier to help identify the current selected tab */
  id: _propTypes["default"].number
});
(0, _defineProperty2["default"])(VerticalTabsItem, "defaultProps", {
  type: 'tab'
});
VerticalTabsItem.contextType = _VerticalTabsContext["default"];
var _default = VerticalTabsItem;
exports["default"] = _default;