wix-style-react
Version:
257 lines (217 loc) • 11.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _context = require("../FontUpgrade/context");
var _StarsRatingBarSt = require("./StarsRatingBar.st.css");
var _constants = require("./constants");
var _Text = _interopRequireDefault(require("../Text"));
var _InteractiveModeStar = _interopRequireDefault(require("./components/InteractiveModeStar"));
var _StarFilled = _interopRequireDefault(require("wix-ui-icons-common/StarFilled"));
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(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; } }
/** Star Rating Component */
var StarsRatingBar = /*#__PURE__*/function (_React$PureComponent) {
(0, _inherits2["default"])(StarsRatingBar, _React$PureComponent);
var _super = _createSuper(StarsRatingBar);
function StarsRatingBar(props) {
var _this;
(0, _classCallCheck2["default"])(this, StarsRatingBar);
_this = _super.call(this, props);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_getStarsRatingBarSize", function () {
var readOnly = _this.props.readOnly;
return readOnly ? _this._getReadOnlyModeStarsSize() : _this._getInteractiveModeStarsSize();
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_getReadOnlyModeStarsSize", function () {
var size = _this.props.size;
return size ? size : _constants.starRatingBarSizes.medium;
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_getInteractiveModeStarsSize", function () {
// In interactive mode the size must be 'large'
return _constants.starRatingBarSizes.large;
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onStarIconClick", function (ratingValue) {
_this.props.onChange(ratingValue);
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onMouseEnter", function (ratingValue) {
_this.setState({
hoveredStarIndex: ratingValue
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onMouseLeave", function () {
_this.setState({
hoveredStarIndex: 0
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_handleFocus", function (ratingValue) {
// We would like to change the rate caption label when focus / hover
_this.setState({
hoveredStarIndex: ratingValue
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_handleBlur", function () {
// We would like to change the rate caption label when focus / hover
_this.setState({
hoveredStarIndex: 0
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_renderStars", function () {
var _this$props = _this.props,
readOnly = _this$props.readOnly,
value = _this$props.value;
var _this$state = _this.state,
starsRatingBarSize = _this$state.starsRatingBarSize,
hoveredStarIndex = _this$state.hoveredStarIndex;
return Object.values(_constants.starIndexes).map(function (ratingValue) {
return readOnly ? _this._renderReadOnlyModeStar(ratingValue) : /*#__PURE__*/_react["default"].createElement(_InteractiveModeStar["default"], {
className: "InteractiveModeStar",
key: ratingValue,
starsRatingBarSize: starsRatingBarSize,
index: ratingValue,
selectedStarIndex: value,
hoveredStarIndex: hoveredStarIndex,
onClick: _this._onStarIconClick,
onMouseEnter: _this._onMouseEnter,
onMouseLeave: _this._onMouseLeave,
handleFocus: _this._handleFocus,
handleBlur: _this._handleBlur
});
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_renderReadOnlyModeStar", function (ratingValue) {
var _this$props2 = _this.props,
readOnly = _this$props2.readOnly,
value = _this$props2.value;
var starsRatingBarSize = _this.state.starsRatingBarSize;
var isFilledStar = ratingValue <= value;
var dataHook = isFilledStar ? _constants.dataHooks.filledStar : _constants.dataHooks.emptyStar;
return /*#__PURE__*/_react["default"].createElement(_StarFilled["default"], {
key: ratingValue,
"data-hook": dataHook,
className: (0, _StarsRatingBarSt.st)(_StarsRatingBarSt.classes.star, {
readOnly: readOnly,
filled: isFilledStar,
empty: !isFilledStar
}),
size: _constants.starRatingBarSizesInPx[starsRatingBarSize]
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_shouldShowRateCaption", function () {
var _this$props3 = _this.props,
readOnly = _this$props3.readOnly,
descriptionValues = _this$props3.descriptionValues;
var shouldShowRateCaption = false;
if (descriptionValues) {
var isValidRateCaption = Array.isArray(descriptionValues) && descriptionValues.length === 5;
if (readOnly) {
// Adding description values is not available in read only mode
shouldShowRateCaption = false;
} else {
// Description values must be an array of strings at size 5
shouldShowRateCaption = isValidRateCaption;
}
}
return shouldShowRateCaption;
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_renderRateCaption", function (_ref) {
var isMadefor = _ref.isMadefor;
var _this$props4 = _this.props,
descriptionValues = _this$props4.descriptionValues,
value = _this$props4.value;
var hoveredStarIndex = _this.state.hoveredStarIndex;
var isStarsHovered = hoveredStarIndex !== 0;
var rateCaptionCurrentLabel = ''; // If the user hovers on a star the label should be compatible to the value of the hovered star
// otherwise the label should be compatible to the selected value.
if (isStarsHovered) {
rateCaptionCurrentLabel = descriptionValues[hoveredStarIndex - 1];
} else {
rateCaptionCurrentLabel = value === 0 ? '' : descriptionValues[value - 1];
}
return /*#__PURE__*/_react["default"].createElement("div", {
className: _StarsRatingBarSt.classes.rateCaption
}, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
dataHook: _constants.dataHooks.ratingCaption,
ellipsis: true,
size: "small",
weight: isMadefor ? 'normal' : 'bold',
secondary: true
}, rateCaptionCurrentLabel));
});
var _starsRatingBarSize = _this._getStarsRatingBarSize();
_this.state = {
starsRatingBarSize: _starsRatingBarSize,
hoveredStarIndex: 0
};
return _this;
}
(0, _createClass2["default"])(StarsRatingBar, [{
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
if (prevProps.size !== this.props.size) {
var starsRatingBarSize = this._getStarsRatingBarSize();
this.setState({
starsRatingBarSize: starsRatingBarSize
});
}
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props5 = this.props,
dataHook = _this$props5.dataHook,
className = _this$props5.className;
return /*#__PURE__*/_react["default"].createElement(_context.FontUpgradeContext.Consumer, null, function (_ref2) {
var isMadefor = _ref2.active;
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": dataHook,
className: (0, _StarsRatingBarSt.st)(_StarsRatingBarSt.classes.root, className)
}, /*#__PURE__*/_react["default"].createElement("div", {
role: "radiogroup",
className: _StarsRatingBarSt.classes.starsContainer
}, _this2._renderStars()), _this2._shouldShowRateCaption() ? _this2._renderRateCaption({
isMadefor: isMadefor
}) : null);
});
}
}]);
return StarsRatingBar;
}(_react["default"].PureComponent);
StarsRatingBar.displayName = 'StarsRatingBar';
StarsRatingBar.propTypes = {
/** Applies a data-hook HTML attribute that can be used in tests */
dataHook: _propTypes["default"].string,
/** Applies a CSS class to the component’s root element */
className: _propTypes["default"].string,
/** Controls the size of the star rating bar. Interactive mode must be `large`. The default value for the read only mode is `medium`. */
size: _propTypes["default"].oneOf(['tiny', 'small', 'medium', 'large']),
/** Specifies whether the rating bar is in read-only mode. */
readOnly: _propTypes["default"].bool,
/** Specifies the rate value labels. Array must contain all 5 strings to display the rating labels. */
descriptionValues: _propTypes["default"].arrayOf(_propTypes["default"].string),
/** Specifies the selected rate. 0 indicates an undefined rating. */
value: _propTypes["default"].oneOf([0, 1, 2, 3, 4, 5]).isRequired,
/** Defines a handler that is called whenever rating changes.
* ##### Signature:
* function(rating: number) => void
* * `rating`: 1 | 2 | 3 | 4 | 5
*/
onChange: _propTypes["default"].func
};
StarsRatingBar.defaultProps = {
readOnly: false,
onChange: function onChange() {}
};
var _default = StarsRatingBar;
exports["default"] = _default;