react-star-ratings/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('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,
          ignoreInlineStyles = _props4.ignoreInlineStyles;


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

      var pathStyle = {
        fill: fill,
        transition: '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,
  ignoreInlineStyles: _propTypes2.default.bool.isRequired,
  svgIconPath: _propTypes2.default.string.isRequired,
  svgIconViewBox: _propTypes2.default.string.isRequired
};

exports.default = Star;