rating

sanitize properties for the wrapping div.

sanitize properties for the character span.

Injects pseudo classes for styles into the DOM.

Rating component

The component leverages 5 characters (by default stars) to allow the user to to rate.

Setting default prop values.

Apply pseudo class styling to the wrapper div.

Removes pseudo classes from the DOM once component gets removed.

As soon as the mouse enters the component the focusedValue is updated based on the value of the targeted span.

As the mouse moved over the component and enters a new star the focusedValue is updated based on the value of the targeted span.

Resets the component as the mouse leaves the hover area.

Sets isActive state to true.

Sets isActive state to false.

Change focusValue and sets isActive state to true.

set the focusedValue depending on mouse position

update the component when touch ends

reset the component in case of touch cancel

reset the component on blur

enable focus styling of component when tab is used to focus component

Manages the keyboard events.

In case the Rating Component is in focus Space, ArrowUp will result in increasing the value and arrow down will result in decreasing the value. Enter/ space will result in updating the value of the component.

Pressing Escape will reset the value to last value.

decrease the value by 1 when arrow down key is pressed

increase value by 1 when arrow up key is pressed

set component value to current focus value

reset component when escape key is pressed esc key should just reset the component displayed rating without removing hover or focus styles

Returns current value of rating to be displayed on the component

The function will be passed to requestAnimationFrame for touchMove

update component when component is clicked, touch ends, enter or space key are hit different update logic will apply depending on whether component has property defaultValue, value or valueLink specified

Returns the HTML function to be rendered by this component.