wix-style-react/dist/src/StarsRatingBar/components/InteractiveModeStar.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 _Focusable = require("../../common/Focusable");
var _InteractiveModeStarSt = require("./InteractiveModeStar.st.css");
var _constants = require("../constants");
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/StarsRatingBar/components/InteractiveModeStar.js";
class InteractiveModeStar extends _react.default.PureComponent {
  constructor() {
    super(...arguments);
    this._onMouseEnter = () => {
      var {
        index
      } = this.props;
      this.props.onMouseEnter(index);
    };
    this._onMouseLeave = () => {
      this.props.onMouseLeave();
    };
    this._onClick = () => {
      var {
        index
      } = this.props;
      this.props.onClick(index);
    };
    this._onFocus = () => {
      var {
        focusableOnFocus,
        index
      } = this.props;

      // We would like to change the rate caption label when focus / hover
      this.props.handleFocus(index);
      focusableOnFocus();
    };
    this._onBlur = () => {
      var {
        focusableOnBlur
      } = this.props;

      // We would like to change the rate caption label when focus / hover
      this.props.handleBlur();
      focusableOnBlur();
    };
  }
  render() {
    var {
      dataHook,
      selectedStarIndex,
      index,
      starsRatingBarSize,
      hoveredStarIndex
    } = this.props;
    var isStarsHovered = hoveredStarIndex !== 0;
    var isCurrentStarHovered = hoveredStarIndex === index;

    // If the user hovers on a star the value should be compatible to the value of the hovered star
    // otherwise the value should be compatible to the selected value.
    var isFilledStar = isStarsHovered ? index <= hoveredStarIndex : index <= selectedStarIndex;
    var commonProps = {
      size: _constants.starRatingBarSizesInPx[starsRatingBarSize]
    };
    return /*#__PURE__*/_react.default.createElement("button", {
      role: "radio",
      "aria-checked": isFilledStar,
      "aria-label": index,
      "data-hook": dataHook,
      "data-index": index,
      className: (0, _InteractiveModeStarSt.st)(_InteractiveModeStarSt.classes.root, this.props.className),
      onClick: () => this._onClick(index),
      onMouseEnter: () => this._onMouseEnter(index),
      onMouseLeave: () => this._onMouseLeave(),
      onFocus: this._onFocus,
      onBlur: this._onBlur,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 69,
        columnNumber: 7
      }
    }, isFilledStar ? /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.StarFilled, (0, _extends2.default)({
      "aria-hidden": true
    }, commonProps, {
      "data-hook": _constants.dataHooks.filledStar,
      className: (0, _InteractiveModeStarSt.st)(_InteractiveModeStarSt.classes.star, {
        filled: true,
        hovered: isCurrentStarHovered
      }),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 83,
        columnNumber: 11
      }
    })) : /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.Star, (0, _extends2.default)({
      "aria-hidden": true
    }, commonProps, {
      "data-hook": _constants.dataHooks.emptyStar,
      className: (0, _InteractiveModeStarSt.st)(_InteractiveModeStarSt.classes.star, {
        empty: true,
        hovered: isCurrentStarHovered
      }),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 93,
        columnNumber: 11
      }
    })));
  }
}
InteractiveModeStar.displayName = 'InteractiveModeStar';
InteractiveModeStar.propTypes = {
  /** Applied as data-hook HTML attribute that can be used in the tests */
  dataHook: _propTypes.default.string,
  /** A css class to be applied to the component's root element */
  className: _propTypes.default.string,
  /** Specifies the size of the star rating bar. Interactive mode must be 'large'. The default value for the read only mode is 'medium'. */
  starsRatingBarSize: _propTypes.default.oneOf(['large']),
  /** The star index. */
  index: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5]).isRequired,
  /** The star rating bar’s selected rate. */
  selectedStarIndex: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5]).isRequired,
  /** The star rating bar’s hovered star index. */
  hoveredStarIndex: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5]).isRequired,
  /** A Handler for clicking on the star
   * ##### Signature:
   * function(rating: number) => void
   * * `rating`: 1 | 2 | 3 | 4 | 5
   */
  onClick: _propTypes.default.func,
  /** A Handler for mouse enter
   * ##### Signature:
   * function(rating: number) => void
   * * `rating`: 1 | 2 | 3 | 4 | 5
   */
  onMouseEnter: _propTypes.default.func,
  /** A Handler for mouse leave
   * ##### Signature:
   * function() => void
   */
  onMouseLeave: _propTypes.default.func,
  /** A Handler for focus
   * ##### Signature:
   * function() => void
   */
  handleFocus: _propTypes.default.func,
  /** A Handler for blur
   * ##### Signature:
   * function() => void
   */
  handleBlur: _propTypes.default.func
};
var _default = exports.default = (0, _Focusable.withFocusable)(InteractiveModeStar);
//# sourceMappingURL=InteractiveModeStar.js.map