From f158f984c125d0663267208d85840b3048f06389 Mon Sep 17 00:00:00 2001 From: Nikolay_Anatolyevych Date: Tue, 30 Jul 2019 16:39:41 +0300 Subject: [PATCH] Rating on Hover #48 --- README.md | 3 ++ dist/react-stars.js | 107 +++++++++++++++++++++++++++++++------------- src/react-stars.js | 59 ++++++++++++++++-------- 3 files changed, 119 insertions(+), 50 deletions(-) diff --git a/README.md b/README.md index d9e3698..2a84db1 100644 --- a/README.md +++ b/README.md @@ -44,6 +44,9 @@ This a list of props that you can pass down to the component: | `edit` | Should you be able to select rating or just see rating (for reusability) | `true` | boolean | | `half` | Should component use half stars, if not the decimal part will be dropped otherwise normal algebra rools will apply to round to half stars | `true` | boolean | `onChange(new_rating)` | Will be invoked any time the rating is changed | `null` | function | +| `onMouseOver(new_rating)` | Will be invoked any time the when over mouse | `null` | function | +| `onMouseMove(new_rating)` | Will be invoked any time the when move mouse | `null` | function | +| `onMouseLeave(new_rating)` | Will be invoked any time the when leave mouse | `null` | function | ### Help improve the component ###### Build on your machine: diff --git a/dist/react-stars.js b/dist/react-stars.js index bcb0ede..3ec16a4 100644 --- a/dist/react-stars.js +++ b/dist/react-stars.js @@ -94,7 +94,16 @@ var ReactStars = function (_Component) { halfStar: { at: Math.floor(props.value), hidden: this.state.config.half && props.value % 1 < 0.5 - } + }, + config: _extends({}, this.state.config, { + count: props.count, + size: props.size, + char: props.char, + color1: props.color1, + color2: props.color2, + half: props.half, + edit: props.edit + }) }); } }, { @@ -135,18 +144,35 @@ var ReactStars = function (_Component) { halfStar = _state.halfStar; if (!config.edit) return; - var index = Number(event.target.getAttribute('data-index')); - if (config.half) { - var isAtHalf = this.moreThanHalf(event, config.size); - halfStar.hidden = isAtHalf; - if (isAtHalf) index = index + 1; - halfStar.at = index; - } else { - index = index + 1; - } + + var _calcData = this.calcData(event, config, halfStar), + value = _calcData.value, + index = _calcData.index; + this.setState({ stars: this.getStars(index) }); + + this.props.onMouseOver(value); + } + }, { + key: 'mouseMove', + value: function mouseMove(event) { + var _state2 = this.state, + config = _state2.config, + halfStar = _state2.halfStar; + + if (!config.edit) return; + + var _calcData2 = this.calcData(event, config, halfStar), + value = _calcData2.value, + index = _calcData2.index; + + this.setState({ + stars: this.getStars(index) + }); + + this.props.onMouseMove(value); } }, { key: 'moreThanHalf', @@ -160,10 +186,10 @@ var ReactStars = function (_Component) { }, { key: 'mouseLeave', value: function mouseLeave() { - var _state2 = this.state, - value = _state2.value, - halfStar = _state2.halfStar, - config = _state2.config; + var _state3 = this.state, + value = _state3.value, + halfStar = _state3.halfStar, + config = _state3.config; if (!config.edit) return; if (config.half) { @@ -173,15 +199,32 @@ var ReactStars = function (_Component) { this.setState({ stars: this.getStars() }); + + this.props.onMouseLeave(value); } }, { key: 'clicked', value: function clicked(event) { - var _state3 = this.state, - config = _state3.config, - halfStar = _state3.halfStar; + var _state4 = this.state, + config = _state4.config, + halfStar = _state4.halfStar; if (!config.edit) return; + + var _calcData3 = this.calcData(event, config, halfStar), + value = _calcData3.value, + index = _calcData3.index; + + this.setState({ + value: value, + stars: this.getStars(index) + }); + + this.props.onChange(value); + } + }, { + key: 'calcData', + value: function calcData(event, config, halfStar) { var index = Number(event.target.getAttribute('data-index')); var value = void 0; if (config.half) { @@ -193,18 +236,15 @@ var ReactStars = function (_Component) { } else { value = index = index + 1; } - this.setState({ - value: value, - stars: this.getStars(index) - }); - this.props.onChange(value); + + return { value: value, index: index }; } }, { key: 'renderHalfStarStyleElement', value: function renderHalfStarStyleElement() { - var _state4 = this.state, - config = _state4.config, - uniqueness = _state4.uniqueness; + var _state5 = this.state, + config = _state5.config, + uniqueness = _state5.uniqueness; return _react2.default.createElement('style', { dangerouslySetInnerHTML: { __html: getHalfStarStyles(config.color2, uniqueness) @@ -215,11 +255,11 @@ var ReactStars = function (_Component) { value: function renderStars() { var _this2 = this; - var _state5 = this.state, - halfStar = _state5.halfStar, - stars = _state5.stars, - uniqueness = _state5.uniqueness, - config = _state5.config; + var _state6 = this.state, + halfStar = _state6.halfStar, + stars = _state6.stars, + uniqueness = _state6.uniqueness, + config = _state6.config; var color1 = config.color1, color2 = config.color2, size = config.size, @@ -246,7 +286,7 @@ var ReactStars = function (_Component) { 'data-index': i, 'data-forhalf': char, onMouseOver: _this2.mouseOver.bind(_this2), - onMouseMove: _this2.mouseOver.bind(_this2), + onMouseMove: _this2.mouseMove.bind(_this2), onMouseLeave: _this2.mouseLeave.bind(_this2), onClick: _this2.clicked.bind(_this2) }, char @@ -293,7 +333,10 @@ ReactStars.defaultProps = { color1: 'gray', color2: '#ffd700', - onChange: function onChange() {} + onChange: function onChange() {}, + onMouseLeave: function onMouseLeave() {}, + onMouseMove: function onMouseMove() {}, + onMouseOver: function onMouseOver() {} }; exports.default = ReactStars; \ No newline at end of file diff --git a/src/react-stars.js b/src/react-stars.js index ae36507..601ded5 100644 --- a/src/react-stars.js +++ b/src/react-stars.js @@ -116,20 +116,29 @@ class ReactStars extends Component { } mouseOver(event) { - let { config, halfStar } = this.state - if (!config.edit) return; - let index = Number(event.target.getAttribute('data-index')) - if (config.half) { - const isAtHalf = this.moreThanHalf(event, config.size) - halfStar.hidden = isAtHalf - if (isAtHalf) index = index + 1 - halfStar.at = index - } else { - index = index + 1 - } + const { config, halfStar } = this.state + if (!config.edit) return + + const { value, index } = this.calcData(event, config, halfStar); + + this.setState({ + stars: this.getStars(index) + }) + + this.props.onMouseOver(value); + } + + mouseMove(event) { + const { config, halfStar } = this.state + if (!config.edit) return + + const { value, index } = this.calcData(event, config, halfStar); + this.setState({ stars: this.getStars(index) }) + + this.props.onMouseMove(value) } moreThanHalf(event, size) { @@ -149,11 +158,25 @@ class ReactStars extends Component { this.setState({ stars: this.getStars() }) + + this.props.onMouseLeave(value); } clicked(event) { const { config, halfStar } = this.state if (!config.edit) return + + const { value, index } = this.calcData(event, config, halfStar); + + this.setState({ + value: value, + stars: this.getStars(index) + }) + + this.props.onChange(value); + } + + calcData(event, config, halfStar) { let index = Number(event.target.getAttribute('data-index')) let value if (config.half) { @@ -165,11 +188,8 @@ class ReactStars extends Component { } else { value = index = index + 1 } - this.setState({ - value: value, - stars: this.getStars(index) - }) - this.props.onChange(value) + + return { value, index }; } renderHalfStarStyleElement() { @@ -202,7 +222,7 @@ class ReactStars extends Component { data-index={i} data-forhalf={char} onMouseOver={this.mouseOver.bind(this)} - onMouseMove={this.mouseOver.bind(this)} + onMouseMove={this.mouseMove.bind(this)} onMouseLeave={this.mouseLeave.bind(this)} onClick={this.clicked.bind(this)}> {char} @@ -250,7 +270,10 @@ ReactStars.defaultProps = { color1: 'gray', color2: '#ffd700', - onChange: () => { } + onChange: () => { }, + onMouseLeave: () => { }, + onMouseMove: () => { }, + onMouseOver: () => { }, }; export default ReactStars