react-star-picker
Version:
A star-rating component made with React
2 lines (1 loc) • 1.55 kB
JavaScript
"use client";import*as e from"react";const t=()=>e.createElement("div",{className:"DefaultStarComponent"},String.fromCharCode(9733)),a=(e,t)=>{let a=e;return Object.keys(t).forEach((e=>{t[e]&&(a+=` ${e}`)})),a},r=({halfStars:t,starRenderer:r,index:n,selectedIndex:l,hoverIndex:s})=>e.createElement("div",{className:a("StarPickerButtonContent",{halfStars:t})},r({index:n,selectedIndex:l,hoverIndex:s})),n=({index:t,selectedIndex:n,hoverIndex:l,onClick:s,onHoverChange:d,starRenderer:o,halfStars:c,disabled:i})=>{const u=t<=n,m=null!=l,h=m&&t<=l;return e.createElement("button",{"aria-label":`button ${t+1}`,className:a("StarPickerButton",{disabled:i,halfStars:c,selected:u,addSelection:m&&!u&&h,removeSelection:m&&u&&!h,isHovered:l===t,isClicked:t===n}),type:"button",onClick:()=>{s(t)},onMouseEnter:()=>{i||d(t)},onMouseLeave:()=>{i||d(null)},disabled:i},e.createElement(r,{halfStars:c,starRenderer:o,index:t,selectedIndex:n,hoverIndex:l}))},l=({value:a,onChange:r,name:l,className:s,starCount:d,disabled:o=!1,halfStars:c=!1,resettable:i=!1,starRenderer:u=t})=>{const[m,h]=e.useState(null),x=e=>{r&&r(((e,t,a,r)=>{const n=((e,t)=>t?(e+1)/2:e+1)(e,a);return r&&n===t?null:n})(e,a,c,i),l)},S=e=>{h(e)},v=d??5,f=((e,t)=>e?t?2*e-1:e-1:-1)(a,c),C=c?2*v:v;return e.createElement("div",{className:"StarPicker"+(s?` ${s}`:"")},[...Array(C).keys()].map((t=>e.createElement(n,{key:`star-${t}`,index:t,selectedIndex:f,hoverIndex:m,onClick:x,onHoverChange:S,starRenderer:u,halfStars:c,disabled:o}))))};export{l as StarPicker,l as default,t as defaultStarRenderer};