Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

get Rating on Hover #48 #61

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

get Rating on Hover #48 #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions README.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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