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

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
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 _VerticalTabsContext = _interopRequireDefault(require("../VerticalTabs/VerticalTabsContext"));
var _Focusable = require("../common/Focusable");
var _dataHooks = _interopRequireDefault(require("./dataHooks"));
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/VerticalTabsItem/VerticalTabsItem.js";
/** Internal Component to be used by VerticalTabs */
class VerticalTabsItem extends _react.default.PureComponent {
  constructor() {
    super(...arguments);
    this._onKeyDown = e => {
      var {
        id
      } = this.props;
      if (e.key === 'Enter') {
        this.context.onChange(id);
      }
    };
  }
  _renderText() {
    var {
      children,
      type,
      disabled
    } = this.props;
    var {
      size
    } = this.context;
    var isTitle = type === 'title';
    var isTiny = size === 'tiny';
    var getTextSize = () => {
      if (isTiny) {
        if (isTitle) {
          return 'tiny';
        }
        return 'small';
      }
      if (isTitle) {
        return 'small';
      }
      return size;
    };
    return type === 'action' ? /*#__PURE__*/_react.default.createElement(_TextButton.default, {
      className: _VerticalTabsItemSt.classes.textButton,
      weigh: "thin",
      size: isTiny ? 'small' : size,
      dataHook: _dataHooks.default.verticalTabsItemText,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 62,
        columnNumber: 7
      }
    }, children) : /*#__PURE__*/_react.default.createElement(_Text.default, {
      className: _VerticalTabsItemSt.classes.text,
      light: isTitle,
      secondary: isTitle,
      skin: disabled ? 'disabled' : 'standard',
      weight: isTiny && isTitle ? 'bold' : 'thin',
      size: getTextSize(),
      dataHook: _dataHooks.default.verticalTabsItemText,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 71,
        columnNumber: 7
      }
    }, children);
  }
  _renderPrefix() {
    var {
      prefixIcon,
      type
    } = this.props;
    var {
      size
    } = this.context;
    return /*#__PURE__*/_react.default.cloneElement(prefixIcon, {
      size: size === 'medium' ? 24 : 18,
      'data-hook': _dataHooks.default.verticalTabsItemPrefixIcon,
      className: (0, _VerticalTabsItemSt.st)(_VerticalTabsItemSt.classes.prefixIcon, {
        action: type === 'action'
      })
    });
  }
  _renderSuffix() {
    var {
      suffixIcon
    } = this.props;
    var {
      size
    } = this.context;
    return /*#__PURE__*/_react.default.cloneElement(suffixIcon, {
      size: size === 'medium' ? 24 : 18,
      className: _VerticalTabsItemSt.classes.suffixIcon,
      'data-hook': _dataHooks.default.verticalTabsItemSuffixIcon
    });
  }
  render() {
    var {
      id,
      dataHook,
      disabled,
      prefixIcon,
      suffixIcon,
      tabIndex,
      type,
      focusableOnFocus,
      focusableOnBlur
    } = this.props;
    var {
      size
    } = this.context;
    var isTiny = size === 'tiny';
    var selected = id !== undefined && this.context.activeTabId !== undefined && id === this.context.activeTabId;
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _VerticalTabsItemSt.st)(_VerticalTabsItemSt.classes.root, {
        disabled,
        action: type === 'action',
        title: type === 'title',
        tiny: isTiny,
        suffixIcon: !!suffixIcon,
        prefixIcon: !!prefixIcon,
        selected
      }),
      onFocus: focusableOnFocus,
      onBlur: focusableOnBlur,
      id: id,
      tabIndex: tabIndex,
      role: "menuitem",
      ref: _ref => this.innerComponentRef = _ref,
      "data-hook": dataHook,
      onClick: !disabled ? () => this.context.onChange(id) : undefined,
      onKeyDown: !disabled ? e => this._onKeyDown(e) : undefined,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 131,
        columnNumber: 7
      }
    }, prefixIcon && this._renderPrefix(), this._renderText(), suffixIcon && this._renderSuffix());
  }
}
VerticalTabsItem.displayName = 'VerticalTabsItem';
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
};
VerticalTabsItem.defaultProps = {
  type: 'tab',
  tabIndex: 0
};
VerticalTabsItem.contextType = _VerticalTabsContext.default;
var _default = exports.default = (0, _Focusable.withFocusable)(VerticalTabsItem);
//# sourceMappingURL=VerticalTabsItem.js.map