emptySymbol is not hidden when fullSymbol is displayed about react-rating

[dreyescat]

Hi @jamesw6811!

Yes, you are right. The emptySymbol elements are always there. They are not removed. They are just covered by the fullSymbol elements.

If I am not wrong your issue is that your fullSymbol is not big enough to completely cover the underlying emtpySymbol, and then you see the empty symbol under the filled symbols, right? I would just make them, the empty and the full symbol, the same size.

[jamesw6811]

Thanks for the quick reply @dreyescat ! I'm using the Font Awesome pack, and for some icons in that pack the "full" variants don't mesh well on top of the non-full. Maybe it would be beneficial feature to have a toggle for replacing instead of covering?

For example, here is the Font Awesome question mark circle:

emptySymbol={<i className="far fa-question-circle fa-2x"></i>}
fullSymbol={<i className="fas fa-question-circle fa-2x"></i>}

Here is the result when selected:

Font Awesome page: https://fontawesome.com/icons/question-circle?style=regular

[jamesw6811]

@dreyescat I'm very new to contributing to open-source, but I'm also happy to try submitting a PR for this change - the least i could do for the value I've gotten out of it.

[dreyescat]

I am always open to contributions, of any kind of expertise 👍. So if you feel that you have something to contribute, yep, go ahead and open a PR. Even more, I encourage you to do it 😉 . I will try to guide you to my best on the process. However I do not promise you it is going to be merged until we see it fits. For example, I am reluctant to adding new properties, but maybe, only rendering the required symbols would be something to be considered...

BTW, as a workaround you can try adding a solid background to your full symbol to try to cover the underlying empty symbol. Something like this:

fullSymbol={<i style={{backgroundColor: 'white'}} className="fas fa-question-circle fa-2x"></i>}

[jamesw6811]

Thanks! I think it could be very useful for some rating icons - not just my example, but also semi-animated ratings. For example, I've seen some rating bars that are a fist until you select them, then they turn into a thumbs up.

[jamesw6811]

@dreyescat I've written a proposed solution, but I dont have permissions to push a branch to make a PR.

[dreyescat]

Mmm... Where are you trying to push? Did you fork this repo first?

Usually what you should do is:

1. Fork the repo
2. Add changes (feature, fix, whatever you consider). Commit and push to your forked repo.
3. Make a pull request

Some helpful links:

• Fork a repo
• Creating a pull request

Hope it helps!

[jamesw6811]

Thanks! Like I said - brand new. I've only worked in private collaborative Git repos where everyone has branch access.

It helps a lot!

[dreyescat]

Summing up:

• emptySymbol is hidden only when it is a non-fractional rating.
• emptySymbol is kept as background of the fullSymbol otherwise.