wix-style-react
Version:
248 lines (210 loc) • 9.81 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
import React from 'react';
import PropTypes from 'prop-types';
import { FontUpgradeContext } from '../FontUpgrade/context';
import { st, classes } from './StarsRatingBar.st.css';
import { dataHooks, starIndexes, starRatingBarSizes, starRatingBarSizesInPx } from './constants';
import Text from '../Text';
import InteractiveModeStar from './components/InteractiveModeStar';
import StarFilledIcon from 'wix-ui-icons-common/StarFilled';
/** Star Rating Component */
var StarsRatingBar = /*#__PURE__*/function (_React$PureComponent) {
_inherits(StarsRatingBar, _React$PureComponent);
var _super = _createSuper(StarsRatingBar);
function StarsRatingBar(props) {
var _this;
_classCallCheck(this, StarsRatingBar);
_this = _super.call(this, props);
_defineProperty(_assertThisInitialized(_this), "_getStarsRatingBarSize", function () {
var readOnly = _this.props.readOnly;
return readOnly ? _this._getReadOnlyModeStarsSize() : _this._getInteractiveModeStarsSize();
});
_defineProperty(_assertThisInitialized(_this), "_getReadOnlyModeStarsSize", function () {
var size = _this.props.size;
return size ? size : starRatingBarSizes.medium;
});
_defineProperty(_assertThisInitialized(_this), "_getInteractiveModeStarsSize", function () {
// In interactive mode the size must be 'large'
return starRatingBarSizes.large;
});
_defineProperty(_assertThisInitialized(_this), "_onStarIconClick", function (ratingValue) {
_this.props.onChange(ratingValue);
});
_defineProperty(_assertThisInitialized(_this), "_onMouseEnter", function (ratingValue) {
_this.setState({
hoveredStarIndex: ratingValue
});
});
_defineProperty(_assertThisInitialized(_this), "_onMouseLeave", function () {
_this.setState({
hoveredStarIndex: 0
});
});
_defineProperty(_assertThisInitialized(_this), "_handleFocus", function (ratingValue) {
// We would like to change the rate caption label when focus / hover
_this.setState({
hoveredStarIndex: ratingValue
});
});
_defineProperty(_assertThisInitialized(_this), "_handleBlur", function () {
// We would like to change the rate caption label when focus / hover
_this.setState({
hoveredStarIndex: 0
});
});
_defineProperty(_assertThisInitialized(_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(starIndexes).map(function (ratingValue) {
return readOnly ? _this._renderReadOnlyModeStar(ratingValue) : /*#__PURE__*/React.createElement(InteractiveModeStar, {
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
});
});
});
_defineProperty(_assertThisInitialized(_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 ? dataHooks.filledStar : dataHooks.emptyStar;
return /*#__PURE__*/React.createElement(StarFilledIcon, {
key: ratingValue,
"data-hook": dataHook,
className: st(classes.star, {
readOnly: readOnly,
filled: isFilledStar,
empty: !isFilledStar
}),
size: starRatingBarSizesInPx[starsRatingBarSize]
});
});
_defineProperty(_assertThisInitialized(_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;
});
_defineProperty(_assertThisInitialized(_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.createElement("div", {
className: classes.rateCaption
}, /*#__PURE__*/React.createElement(Text, {
dataHook: 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;
}
_createClass(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.createElement(FontUpgradeContext.Consumer, null, function (_ref2) {
var isMadefor = _ref2.active;
return /*#__PURE__*/React.createElement("div", {
"data-hook": dataHook,
className: st(classes.root, className)
}, /*#__PURE__*/React.createElement("div", {
role: "radiogroup",
className: classes.starsContainer
}, _this2._renderStars()), _this2._shouldShowRateCaption() ? _this2._renderRateCaption({
isMadefor: isMadefor
}) : null);
});
}
}]);
return StarsRatingBar;
}(React.PureComponent);
StarsRatingBar.displayName = 'StarsRatingBar';
StarsRatingBar.propTypes = {
/** Applies a data-hook HTML attribute that can be used in tests */
dataHook: PropTypes.string,
/** Applies a CSS class to the component’s root element */
className: PropTypes.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.oneOf(['tiny', 'small', 'medium', 'large']),
/** Specifies whether the rating bar is in read-only mode. */
readOnly: PropTypes.bool,
/** Specifies the rate value labels. Array must contain all 5 strings to display the rating labels. */
descriptionValues: PropTypes.arrayOf(PropTypes.string),
/** Specifies the selected rate. 0 indicates an undefined rating. */
value: PropTypes.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.func
};
StarsRatingBar.defaultProps = {
readOnly: false,
onChange: function onChange() {}
};
export default StarsRatingBar;