react-star-ratings-eco/build/star.js

A customizable star rating component for selecting x stars or visualizing x stars

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _classnames = require("classnames");

var _classnames2 = _interopRequireDefault(_classnames);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Star = function (_React$Component) {
  _inherits(Star, _React$Component);

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

    return _possibleConstructorReturn(this, (Star.__proto__ || Object.getPrototypeOf(Star)).apply(this, arguments));
  }

  _createClass(Star, [{
    key: "render",
    value: function render() {
      var _props = this.props,
          changeRating = _props.changeRating,
          hoverOverStar = _props.hoverOverStar,
          unHoverOverStar = _props.unHoverOverStar,
          svgIconViewBox = _props.svgIconViewBox,
          svgIconPath = _props.svgIconPath;

      return _react2.default.createElement(
        "div",
        {
          className: "star-container",
          style: this.starContainerStyle,
          onMouseEnter: hoverOverStar,
          onMouseLeave: unHoverOverStar,
          onClick: changeRating
        },
        _react2.default.createElement(
          "svg",
          {
            viewBox: svgIconViewBox,
            className: this.starClasses,
            style: this.starSvgStyle
          },
          _react2.default.createElement(
            "g",
            {
              id: "Category-Page",
              stroke: "none",
              strokeWidth: "1",
              fill: "none",
              fillRule: "evenodd"
            },
            _react2.default.createElement(
              "g",
              {
                id: "Product-preview---salmon-no-discount-Copy-12",
                transform: "translate(-49, -490)",
                fill: "#818181"
              },
              _react2.default.createElement("path", { className: "star", style: this.pathStyle, d: svgIconPath })
            )
          )
        )
      );
    }
  }, {
    key: "starContainerStyle",
    get: function get() {
      var _props2 = this.props,
          changeRating = _props2.changeRating,
          starSpacing = _props2.starSpacing,
          isFirstStar = _props2.isFirstStar,
          isLastStar = _props2.isLastStar,
          ignoreInlineStyles = _props2.ignoreInlineStyles;


      var starContainerStyle = {
        position: "relative",
        display: "inline-block",
        verticalAlign: "middle",
        paddingLeft: isFirstStar ? undefined : starSpacing,
        paddingRight: isLastStar ? undefined : starSpacing,
        cursor: changeRating ? "pointer" : undefined
      };
      return ignoreInlineStyles ? {} : starContainerStyle;
    }
  }, {
    key: "starSvgStyle",
    get: function get() {
      var _props3 = this.props,
          ignoreInlineStyles = _props3.ignoreInlineStyles,
          isCurrentHoveredStar = _props3.isCurrentHoveredStar,
          starDimension = _props3.starDimension;

      var starSvgStyle = {
        width: starDimension,
        height: starDimension,
        transition: "transform .2s ease-in-out",
        transform: isCurrentHoveredStar ? "scale(1.1)" : undefined
      };

      return ignoreInlineStyles ? {} : starSvgStyle;
    }
  }, {
    key: "pathStyle",
    get: function get() {
      var _props4 = this.props,
          isStarred = _props4.isStarred,
          isPartiallyFullStar = _props4.isPartiallyFullStar,
          isHovered = _props4.isHovered,
          hoverMode = _props4.hoverMode,
          starEmptyColor = _props4.starEmptyColor,
          starRatedColor = _props4.starRatedColor,
          starHoverColor = _props4.starHoverColor,
          gradientPathName = _props4.gradientPathName,
          fillId = _props4.fillId,
          disableFillTransition = _props4.disableFillTransition,
          ignoreInlineStyles = _props4.ignoreInlineStyles;


      var fill = void 0;
      if (hoverMode) {
        if (isHovered) fill = starHoverColor;else fill = starEmptyColor;
      } else {
        if (isPartiallyFullStar) {
          if (!fillId) fill = starRatedColor;else fill = "url('" + gradientPathName + "#" + fillId + "')";
        } else if (isStarred) fill = starRatedColor;else fill = starEmptyColor;
      }

      var pathStyle = {
        fill: fill,
        transition: disableFillTransition ? "none" : "fill .2s ease-in-out"
      };

      return ignoreInlineStyles ? {} : pathStyle;
    }
  }, {
    key: "starClasses",
    get: function get() {
      var _props5 = this.props,
          isSelected = _props5.isSelected,
          isPartiallyFullStar = _props5.isPartiallyFullStar,
          isHovered = _props5.isHovered,
          isCurrentHoveredStar = _props5.isCurrentHoveredStar,
          ignoreInlineStyles = _props5.ignoreInlineStyles;


      var starClasses = (0, _classnames2.default)({
        "widget-svg": true,
        "widget-selected": isSelected,
        "multi-widget-selected": isPartiallyFullStar,
        hovered: isHovered,
        "current-hovered": isCurrentHoveredStar
      });

      return ignoreInlineStyles ? {} : starClasses;
    }
  }]);

  return Star;
}(_react2.default.Component);

Star.propTypes = {
  fillId: _propTypes2.default.string.isRequired,
  changeRating: _propTypes2.default.func,
  hoverOverStar: _propTypes2.default.func,
  unHoverOverStar: _propTypes2.default.func,
  isStarred: _propTypes2.default.bool.isRequired,
  isPartiallyFullStar: _propTypes2.default.bool.isRequired,
  isHovered: _propTypes2.default.bool.isRequired,
  hoverMode: _propTypes2.default.bool.isRequired,
  isCurrentHoveredStar: _propTypes2.default.bool.isRequired,
  isFirstStar: _propTypes2.default.bool.isRequired,
  isLastStar: _propTypes2.default.bool.isRequired,
  starDimension: _propTypes2.default.string.isRequired,
  starSpacing: _propTypes2.default.string.isRequired,
  starHoverColor: _propTypes2.default.string.isRequired,
  starRatedColor: _propTypes2.default.string.isRequired,
  starEmptyColor: _propTypes2.default.string.isRequired,
  gradientPathName: _propTypes2.default.string.isRequired,
  disableFillTransition: _propTypes2.default.bool.isRequired,
  ignoreInlineStyles: _propTypes2.default.bool.isRequired,
  svgIconPath: _propTypes2.default.string.isRequired,
  svgIconViewBox: _propTypes2.default.string.isRequired
};

exports.default = Star;