Skip to content

Commit

Permalink
Rating on Hover #48
Browse files Browse the repository at this point in the history
  • Loading branch information
@anatolyevych
anatolyevych committed Jul 30, 2019
1 parent 3e65ad8 commit f158f98
Show file tree
Hide file tree
Showing 3 changed files with 119 additions and 50 deletions.
3 changes: 3 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
107 changes: 75 additions & 32 deletions dist/react-stars.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
})
});
}
}, {
Expand Down Expand Up @@ -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',
Expand All @@ -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) {
Expand All @@ -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) {
Expand All @@ -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)
Expand All @@ -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,
Expand All @@ -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
Expand Down Expand Up @@ -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;
59 changes: 41 additions & 18 deletions src/react-stars.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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) {
Expand All @@ -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() {
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -250,7 +270,10 @@ ReactStars.defaultProps = {
color1: 'gray',
color2: '#ffd700',

onChange: () => { }
onChange: () => { },
onMouseLeave: () => { },
onMouseMove: () => { },
onMouseOver: () => { },
};

export default ReactStars

0 comments on commit f158f98

Please sign in to comment.