wix-style-react
Version:
wix-style-react
241 lines (239 loc) • 8.3 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _StarsRatingBarSt = require("./StarsRatingBar.st.css");
var _constants = require("./constants");
var _Text = _interopRequireDefault(require("../Text"));
var _InteractiveModeStar = _interopRequireDefault(require("./components/InteractiveModeStar"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/StarsRatingBar/StarsRatingBar.js";
/** Star Rating Component */
class StarsRatingBar extends _react.default.PureComponent {
constructor(props) {
super(props);
this._getStarsRatingBarSize = () => {
var {
readOnly
} = this.props;
return readOnly ? this._getReadOnlyModeStarsSize() : this._getInteractiveModeStarsSize();
};
this._getReadOnlyModeStarsSize = () => {
var {
size
} = this.props;
return size ? size : _constants.starRatingBarSizes.medium;
};
this._getInteractiveModeStarsSize = () => {
// In interactive mode the size must be 'large'
return _constants.starRatingBarSizes.large;
};
this._onStarIconClick = ratingValue => {
this.props.onChange(ratingValue);
};
this._onMouseEnter = ratingValue => {
this.setState({
hoveredStarIndex: ratingValue
});
};
this._onMouseLeave = () => {
this.setState({
hoveredStarIndex: 0
});
};
this._handleFocus = ratingValue => {
// We would like to change the rate caption label when focus / hover
this.setState({
hoveredStarIndex: ratingValue
});
};
this._handleBlur = () => {
// We would like to change the rate caption label when focus / hover
this.setState({
hoveredStarIndex: 0
});
};
this._renderStars = () => {
var {
readOnly,
value
} = this.props;
var {
starsRatingBarSize,
hoveredStarIndex
} = this.state;
return Object.values(_constants.starIndexes).map(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,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 84,
columnNumber: 9
}
});
});
};
this._renderReadOnlyModeStar = ratingValue => {
var {
readOnly,
value
} = this.props;
var {
starsRatingBarSize
} = this.state;
var isFilledStar = ratingValue <= value;
var dataHook = isFilledStar ? _constants.dataHooks.filledStar : _constants.dataHooks.emptyStar;
return /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.StarFilled, {
key: ratingValue,
"data-hook": dataHook,
className: (0, _StarsRatingBarSt.st)(_StarsRatingBarSt.classes.star, {
readOnly,
filled: isFilledStar,
empty: !isFilledStar
}),
size: _constants.starRatingBarSizesInPx[starsRatingBarSize],
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 108,
columnNumber: 7
}
});
};
this._shouldShowRateCaption = () => {
var {
readOnly,
descriptionValues
} = this.props;
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;
};
this._renderRateCaption = () => {
var {
descriptionValues,
value
} = this.props;
var {
hoveredStarIndex
} = this.state;
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,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 157,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement(_Text.default, {
dataHook: _constants.dataHooks.ratingCaption,
ellipsis: true,
size: "small",
weight: "normal",
secondary: true,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 158,
columnNumber: 9
}
}, rateCaptionCurrentLabel));
};
var _starsRatingBarSize = this._getStarsRatingBarSize();
this.state = {
starsRatingBarSize: _starsRatingBarSize,
hoveredStarIndex: 0
};
}
componentDidUpdate(prevProps) {
if (prevProps.size !== this.props.size) {
var starsRatingBarSize = this._getStarsRatingBarSize();
this.setState({
starsRatingBarSize
});
}
}
render() {
var {
dataHook,
className
} = this.props;
return /*#__PURE__*/_react.default.createElement("div", {
"data-hook": dataHook,
className: (0, _StarsRatingBarSt.st)(_StarsRatingBarSt.classes.root, className),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 175,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement("div", {
role: "radiogroup",
className: _StarsRatingBarSt.classes.starsContainer,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 176,
columnNumber: 9
}
}, this._renderStars()), this._shouldShowRateCaption() ? this._renderRateCaption() : null);
}
}
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: () => {}
};
var _default = exports.default = StarsRatingBar;
//# sourceMappingURL=StarsRatingBar.js.map