react-star-rate
Version:
Lightweight, customizable star ratings component for React
445 lines (369 loc) • 15.8 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var goober = require('goober');
var prefixer = require('goober/prefixer');
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
_setPrototypeOf(subClass, superClass);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
}
function _taggedTemplateLiteralLoose(strings, raw) {
if (!raw) {
raw = strings.slice(0);
}
strings.raw = raw;
return strings;
}
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
var Star = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(Star, _React$Component);
function Star() {
var _this;
_this = _React$Component.apply(this, arguments) || this;
_this.onClick = function (e) {
var _this$props = _this.props,
index = _this$props.index,
onClick = _this$props.onClick;
onClick(e, index);
};
_this.onHover = function (e) {
var _this$props2 = _this.props,
index = _this$props2.index,
onHover = _this$props2.onHover;
onHover(e, index);
};
_this.getStarType = function () {
var _this$props3 = _this.props,
allowHalf = _this$props3.allowHalf,
index = _this$props3.index,
value = _this$props3.value;
var starValue = index + 1;
if (allowHalf && value + 0.5 >= starValue && value < starValue) {
return 'half';
} else if (starValue <= value) {
return 'full';
}
return 'zero';
};
_this.getValue = function (x, reverse) {
var _this$props4 = _this.props,
allowHalf = _this$props4.allowHalf,
index = _this$props4.index;
var value = index + 1;
if (allowHalf) {
var _this$starRef, _this$starRef2;
var doc = _this.starRef.ownerDocument;
var body = doc.body;
var docElem = doc.documentElement;
var box = (_this$starRef = _this.starRef) == null ? void 0 : _this$starRef.getBoundingClientRect();
var left = box == null ? void 0 : box.left;
left -= (docElem == null ? void 0 : docElem.clientLeft) || body.clientLeft || 0;
var w = doc.defaultView || doc.parentWindow;
var ret = w.pageXOffset;
var method = 'scrollLeft';
if (typeof ret !== 'number') {
ret = doc.documentElement[method];
if (typeof ret !== 'number') {
ret = doc.body[method];
}
}
left += ret;
var width = (_this$starRef2 = _this.starRef) == null ? void 0 : _this$starRef2.clientWidth;
if (!reverse && x - left < width / 2) {
value -= 0.5;
} else if (reverse && x - left > width / 2) {
value -= 0.5;
}
}
return value;
};
return _this;
}
var _proto = Star.prototype;
_proto.render = function render() {
var _styleHoverMap$starTy,
_styleHoverMap$starTy2,
_this2 = this,
_styleMap$starType,
_styleMap$starType2;
var _this$props5 = this.props,
classNamePrefix = _this$props5.classNamePrefix,
count = _this$props5.count,
disabled = _this$props5.disabled,
index = _this$props5.index,
reverse = _this$props5.reverse,
style = _this$props5.style,
styleFull = _this$props5.styleFull,
styleFullHover = _this$props5.styleFullHover,
styleHalf = _this$props5.styleHalf,
styleHalfHover = _this$props5.styleHalfHover,
styleHover = _this$props5.styleHover,
styleZero = _this$props5.styleZero,
styleZeroHover = _this$props5.styleZeroHover,
symbol = _this$props5.symbol,
value = _this$props5.value;
var symbolNode = typeof symbol === 'function' ? symbol(this.props) : symbol;
var starType = this.getStarType();
var classNameMap = {
zero: classNamePrefix + "__star--zero",
half: classNamePrefix + "__star--half",
full: classNamePrefix + "__star--full"
};
var className = classNamePrefix + "__star " + classNameMap[starType];
var styleMap = {
zero: styleZero,
full: styleFull,
half: styleHalf
};
var styleHoverMap = {
zero: styleZeroHover,
full: styleFullHover,
half: styleHalfHover
};
var FirstStarStyles = goober.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n top: 0;\n width: 50%;\n height: 100%;\n overflow: hidden;\n opacity: 0;\n transition: all 500ms ease;\n "])));
var FirstStarHoverStyles = goober.css({
'&:hover': (_styleHoverMap$starTy = styleHoverMap[starType]) == null ? void 0 : _styleHoverMap$starTy.first
});
var SecondStarHoverStyles = goober.css({
'&:hover': (_styleHoverMap$starTy2 = styleHoverMap[starType]) == null ? void 0 : _styleHoverMap$starTy2.second
});
var StarActiveStyles = {
zero: '',
half: goober.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n .", " {\n opacity: 1;\n color: #ffd166;\n }\n\n &:hover {\n .", " {\n color: #ffe3a2;\n }\n }\n "])), FirstStarStyles, FirstStarStyles),
full: goober.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n color: #ffd166 !important;\n\n &:hover {\n color: #ffe3a2;\n }\n "])))
};
var StarStyles = goober.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n display: inline-block;\n margin-right: 8px;\n position: relative;\n color: #e8eaeb;\n cursor: pointer;\n transition: all 500ms ease;\n ", "\n "])), reverse ? "\n margin-right: 0;\n margin-left: 8px;\n float: right;\n\n ." + FirstStarStyles + " {\n right: 0;\n left: auto;\n }\n " : "");
var StarHoverStyles = goober.css({
'&:hover': styleHover[starType]
});
return React.createElement("li", {
"aria-checked": value > index ? 'true' : 'false',
"aria-label": index + 1 + " out of " + count + " stars",
"aria-posinset": index + 1,
"aria-setsize": count,
className: className + " " + StarStyles + " " + StarHoverStyles + " " + StarActiveStyles[starType],
onClick: disabled ? undefined : this.onClick,
onMouseMove: disabled ? undefined : this.onHover,
ref: function ref(_ref) {
_this2.starRef = _ref;
},
role: "radio",
style: style[starType],
tabIndex: disabled ? -1 : 0
}, React.createElement("div", {
"aria-hidden": "true",
className: classNamePrefix + "__star__first " + FirstStarStyles + " " + FirstStarHoverStyles,
style: (_styleMap$starType = styleMap[starType]) == null ? void 0 : _styleMap$starType.first
}, symbolNode), React.createElement("div", {
"aria-hidden": "true",
className: classNamePrefix + "__star__second " + SecondStarHoverStyles,
style: (_styleMap$starType2 = styleMap[starType]) == null ? void 0 : _styleMap$starType2.second
}, symbolNode));
};
return Star;
}(React.Component);
var _templateObject$1, _templateObject2$1, _templateObject3$1;
goober.setup(React.createElement, prefixer.prefix);
var noop = function noop() {};
var StarsRating = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(StarsRating, _React$Component);
function StarsRating(props) {
var _this;
_this = _React$Component.call(this, props) || this;
_this.onHover = function (event, index) {
var onHoverChange = _this.props.onHoverChange;
var clearedValue = _this.state.clearedValue;
var hoverValue = _this.getStarValue(index, event.pageX);
if (hoverValue !== clearedValue) {
_this.setState({
hoverValue: hoverValue,
clearedValue: undefined
});
}
onHoverChange(hoverValue);
};
_this.onMouseLeave = function () {
var onHoverChange = _this.props.onHoverChange;
_this.setState({
hoverValue: undefined,
clearedValue: undefined
});
onHoverChange(undefined);
};
_this.onClick = function (event, index) {
var allowClear = _this.props.allowClear;
var value = _this.state.value;
var newValue = _this.getStarValue(index, event.pageX);
var isClear = allowClear ? newValue === value : false;
_this.onMouseLeave();
_this.changeValue(isClear ? 0 : newValue);
_this.setState({
clearedValue: isClear ? newValue : undefined
});
};
_this.onFocus = function () {
var onFocus = _this.props.onFocus;
onFocus && onFocus();
};
_this.onBlur = function () {
var onBlur = _this.props.onBlur;
onBlur && onBlur();
};
_this.changeValue = function (value) {
var onChange = _this.props.onChange;
if (!('value' in _this.props)) {
_this.setState({
value: value
});
}
onChange(value);
};
_this.saveStarRef = function (index) {
return function (node) {
_this.starRefs[index] = node;
};
};
_this.getStarValue = function (index, x) {
var direction = _this.props.direction;
var reverse = direction === 'rtl';
return _this.starRefs[index].getValue(x, reverse);
};
_this.focus = function () {
var disabled = _this.props.disabled;
if (!disabled) {
var _this$ratingContainer;
(_this$ratingContainer = _this.ratingContainerRef) == null ? void 0 : _this$ratingContainer.focus();
}
};
var defaultValue = props.defaultValue,
value = props.value;
_this.starRefs = {};
_this.state = {
value: value != null ? value : defaultValue
};
return _this;
}
var _proto = StarsRating.prototype;
_proto.componentDidMount = function componentDidMount() {
var _this$props = this.props,
autoFocus = _this$props.autoFocus,
disabled = _this$props.disabled;
if (autoFocus && !disabled) {
this.focus();
}
};
StarsRating.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, state) {
if ('value' in nextProps && nextProps.value !== undefined) {
return _extends({}, state, {
value: nextProps.value
});
}
return state;
};
_proto.render = function render() {
var _style$hover7,
_this2 = this;
var _this$props2 = this.props,
allowHalf = _this$props2.allowHalf,
classNamePrefix = _this$props2.classNamePrefix,
count = _this$props2.count,
direction = _this$props2.direction,
disabled = _this$props2.disabled,
style = _this$props2.style,
symbol = _this$props2.symbol,
tabIndex = _this$props2.tabIndex;
var _this$state = this.state,
hoverValue = _this$state.hoverValue,
value = _this$state.value;
var stars = [];
for (var index = 0; index < (count != null ? count : 0); index++) {
var _style$full, _style$half, _style$zero, _style$hover, _style$hover2, _style$hover3, _style$hover3$full, _style$hover4, _style$hover4$half, _style$hover5, _style$hover5$zero, _style$hover6;
stars.push(React.createElement(Star, {
allowHalf: allowHalf,
classNamePrefix: classNamePrefix,
count: count,
disabled: disabled,
index: index,
key: index,
ref: this.saveStarRef(index),
onClick: this.onClick,
onHover: this.onHover,
reverse: direction === 'rtl',
style: {
full: style == null ? void 0 : (_style$full = style.full) == null ? void 0 : _style$full.star,
half: style == null ? void 0 : (_style$half = style.half) == null ? void 0 : _style$half.star,
zero: style == null ? void 0 : (_style$zero = style.zero) == null ? void 0 : _style$zero.star
},
styleFull: style == null ? void 0 : style.full,
styleFullHover: style == null ? void 0 : (_style$hover = style.hover) == null ? void 0 : _style$hover.full,
styleHalf: style == null ? void 0 : style.half,
styleHalfHover: style == null ? void 0 : (_style$hover2 = style.hover) == null ? void 0 : _style$hover2.half,
styleHover: {
full: style == null ? void 0 : (_style$hover3 = style.hover) == null ? void 0 : (_style$hover3$full = _style$hover3.full) == null ? void 0 : _style$hover3$full.star,
half: style == null ? void 0 : (_style$hover4 = style.hover) == null ? void 0 : (_style$hover4$half = _style$hover4.half) == null ? void 0 : _style$hover4$half.star,
zero: style == null ? void 0 : (_style$hover5 = style.hover) == null ? void 0 : (_style$hover5$zero = _style$hover5.zero) == null ? void 0 : _style$hover5$zero.star
},
styleZero: style == null ? void 0 : style.zero,
styleZeroHover: style == null ? void 0 : (_style$hover6 = style.hover) == null ? void 0 : _style$hover6.zero,
symbol: symbol,
value: hoverValue === undefined ? value : hoverValue
}));
}
var ListContainerStyles = goober.css(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: 40px;\n display: inline-block;\n vertical-align: middle;\n font-weight: normal;\n font-style: normal;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,\n Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n "])));
var ListContainerHoverStyles = goober.css({
'&:hover': style == null ? void 0 : (_style$hover7 = style.hover) == null ? void 0 : _style$hover7.style
});
return React.createElement("ul", {
"aria-label": "Stars Rating",
className: classNamePrefix + " " + ListContainerStyles + " " + ListContainerHoverStyles + " " + (direction === 'rtl' ? classNamePrefix + "--rtl " + goober.css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n direction: rtl;\n "]))) : classNamePrefix + "--ltr " + goober.css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n direction: ltr;\n "])))),
onBlur: this.onBlur,
onFocus: this.onFocus,
onMouseLeave: disabled ? undefined : this.onMouseLeave,
ref: function ref(_ref) {
_this2.ratingContainerRef = _ref;
},
role: "radiogroup",
style: style == null ? void 0 : style.style,
tabIndex: disabled ? -1 : tabIndex
}, stars);
};
return StarsRating;
}(React.Component);
StarsRating.defaultProps = {
allowClear: true,
allowHalf: true,
classNamePrefix: 'react-star-rate',
count: 5,
defaultValue: 0,
direction: 'ltr',
disabled: false,
onChange: noop,
onHoverChange: noop,
style: {},
symbol: '★',
tabIndex: 0
};
exports.default = StarsRating;
//# sourceMappingURL=react-star-rate.cjs.development.js.map