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

wix-style-react

import _extends from "@babel/runtime/helpers/extends";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }

import React from 'react';
import PropTypes from 'prop-types';
import Text from '../Text';
import TextButton from '../TextButton';
import { st, classes } from './VerticalTabsItem.st.css';
import { FontUpgradeContext } from '../FontUpgrade/context';
import VerticalTabsContext from '../VerticalTabs/VerticalTabsContext';
/** Internal Component to be used by VerticalTabs */

var VerticalTabsItem = /*#__PURE__*/function (_React$PureComponent) {
  _inherits(VerticalTabsItem, _React$PureComponent);

  var _super = _createSuper(VerticalTabsItem);

  function VerticalTabsItem() {
    _classCallCheck(this, VerticalTabsItem);

    return _super.apply(this, arguments);
  }

  _createClass(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.createElement(TextButton, _extends({}, commonProps, {
        disabled: disabled
      }), children) : /*#__PURE__*/React.createElement(Text, _extends({
        className: 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.cloneElement(prefixIcon, {
        size: size === 'medium' ? 24 : 18,
        'data-hook': 'vertical-tabs-item-prefix-icon',
        className: st(classes.prefixIcon, {
          action: type === 'action'
        })
      });
    }
  }, {
    key: "_renderSuffix",
    value: function _renderSuffix() {
      var suffixIcon = this.props.suffixIcon;
      var size = this.context.size;
      return /*#__PURE__*/React.cloneElement(suffixIcon, {
        size: size === 'medium' ? 24 : 18,
        className: 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.createElement(FontUpgradeContext.Consumer, null, function (_ref2) {
        var isMadefor = _ref2.active;
        return /*#__PURE__*/React.createElement("div", {
          className: st(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.PureComponent);

_defineProperty(VerticalTabsItem, "displayName", 'VerticalTabsItem');

_defineProperty(VerticalTabsItem, "propTypes", {
  /** type of vertical tab item. can be of the following: 'tab' (default), 'action', 'title' */
  type: PropTypes.oneOf(['tab', 'action', 'title']),

  /** Data attribute for testing purposes */
  dataHook: PropTypes.string,

  /** Prefix Icon - should be <code>Icon</code>*/
  prefixIcon: PropTypes.node,

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

  /** Children - only single child is allowed here */
  children: PropTypes.node,

  /** Disabled */
  disabled: PropTypes.bool,

  /** identifier to help identify the current selected tab */
  id: PropTypes.number
});

_defineProperty(VerticalTabsItem, "defaultProps", {
  type: 'tab'
});

VerticalTabsItem.contextType = VerticalTabsContext;
export default VerticalTabsItem;