@progress/kendo-react-inputs/rating/Rating.js

React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const J=require("react"),u=require("prop-types"),l=require("@progress/kendo-react-common"),M=require("@progress/kendo-svg-icons"),Q=require("./RatingItem.js"),c=require("./rating-reducer.js"),d=require("./utils/index.js"),V=require("../messages/index.js"),U=require("@progress/kendo-react-intl");function Y(a){const p=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const m in a)if(m!=="default"){const e=Object.getOwnPropertyDescriptor(a,m);Object.defineProperty(p,m,e.get?e:{enumerable:!0,get:()=>a[m]})}}return p.default=a,Object.freeze(p)}const n=Y(J),z=(a,p,m)=>{const[e,D]=n.useState(a);return[e,h=>{const i=c.ratingReducer(p.state||e,{...h,...p});m&&m(i,h.event),D(i)}]},F=l.createPropsContext(),S=n.forwardRef((a,p)=>{const m=l.usePropsContext(F,a),e={dir:s.dir,min:s.min,max:s.max,step:s.step,item:s.item,defaultValue:s.defaultValue,readonly:s.readonly,disabled:s.disabled,selection:s.selection,precision:s.precision,...m},D=U.useLocalization(),I=n.useRef(null),h=n.useRef(null),i=l.useDir(h,e.dir);n.useImperativeHandle(I,()=>({element:h.current,props:e})),n.useImperativeHandle(p,()=>I.current);const H=n.useCallback((t,o)=>{e.onChange&&I.current&&e.onChange.call(void 0,{value:t,target:I.current,syntheticEvent:o})},[e.onChange]),N=n.useMemo(()=>e.min!==void 0?e.min:s.min,[e.min]),R=n.useMemo(()=>e.max!==void 0?e.max:s.max,[e.max]),v=n.useMemo(()=>e.precision||s.precision,[e.precision]),r=n.useMemo(()=>e.step!==void 0?e.step:s.step,[e.step]),A=n.useMemo(()=>e.readonly||s.readonly,[e.readonly]),C=n.useMemo(()=>e.disabled||s.disabled,[e.disabled]),K=n.useMemo(()=>e.item||s.item,[e.item]),[G,f]=z(e.defaultValue!==void 0?e.defaultValue:s.defaultValue,{state:e.value,min:N,max:R,step:v==="half"?r/2:r},H),[w,E]=z(null,{state:e.value,min:N,max:R,step:v==="half"?r/2:r,precision:v}),g=n.useMemo(()=>e.value!==void 0?e.value:G,[e.value,G]),T=n.useMemo(()=>w,[w]),_=n.useMemo(()=>e.selection||s.selection,[e.selection]),k=n.useMemo(()=>r/(v==="half"?2:1),[r,v]),q=n.useCallback(t=>{if(!(!t.target||!t.target.element||A||C)){if(v==="half"){const o=t.target.element.getBoundingClientRect(),x=d.calcIsFirstHalf(i||"ltr",o,t.syntheticEvent.clientX)?d.toRound(t.target.value-r/2,k):t.target.value;f({type:c.RATING_ACTION.select,payload:x,event:t.syntheticEvent})}else f({type:c.RATING_ACTION.select,payload:t.target.value,event:t.syntheticEvent});if(e.onClick){const o={value:g,target:I.current,syntheticEvent:t.syntheticEvent};e.onClick.call(void 0,o)}}},[e.onClick,f,g]),B=n.useCallback(t=>{if(!(A||C)){switch(t.keyCode){case l.Keys.right:t.preventDefault(),f({type:i==="rtl"?c.RATING_ACTION.decrease:c.RATING_ACTION.increase,event:t});break;case l.Keys.left:t.preventDefault(),f({type:i==="rtl"?c.RATING_ACTION.increase:c.RATING_ACTION.decrease,event:t});break;case l.Keys.home:t.preventDefault(),f({type:i==="rtl"?c.RATING_ACTION.min:c.RATING_ACTION.max,event:t});break;case l.Keys.end:t.preventDefault(),f({type:i==="rtl"?c.RATING_ACTION.max:c.RATING_ACTION.min,event:t});break;case l.Keys.esc:t.preventDefault(),f({type:c.RATING_ACTION.deselect,event:t});break}e.onKeyDown&&e.onKeyDown.call(void 0,{value:g,target:I.current,syntheticEvent:t})}},[e.onKeyDown,f,g]),$=n.useCallback(t=>{if(e.onFocus){const o={target:I.current,syntheticEvent:t};e.onFocus.call(void 0,o)}},[e.onFocus]),W=n.useCallback(t=>{if(e.onBlur){const o={target:I.current,syntheticEvent:t};e.onBlur.call(void 0,o)}},[e.onBlur]),L=n.useCallback(t=>{if(!(!t.target||!t.target.element))if(v==="half"){const o=t.target.element.getBoundingClientRect(),x=d.calcIsFirstHalf(i||"ltr",o,t.syntheticEvent.clientX)?t.target.value-r/2:t.target.value;E({type:c.RATING_ACTION.select,payload:x,event:t.syntheticEvent})}else E({type:c.RATING_ACTION.select,payload:t.target.value,event:t.syntheticEvent})},[v,r,i]),j=n.useCallback(t=>{E({type:c.RATING_ACTION.reset,event:t.syntheticEvent})},[]),P=[],X=d.getRemainder(d.toRound(R-N,k),r);for(let t=N;t<=R;t=d.toRound(t+r,k)){const o=d.toRound(t+X,k),y=v==="half"?d.isHalf(o,T!==null?T:g!==null?g:0,r):!1,x=d.isSelected(o,g,r,_),O=d.isSelected(o,T!==null?T:g,r,_),b=d.isSelected(o,T,r,_);P.push(n.createElement(K,{key:o,value:o,dir:i,title:String(y?d.toRound(o-r/2,k):o),icon:e.icon,svgIcon:e.svgIcon,half:y,selected:x||O,hovered:b,onClick:q,onMouseMove:L,onMouseLeave:j},y&&n.createElement("span",{className:"k-rating-precision-complement"},!(e.icon||e.svgIconOutline)&&n.createElement(l.IconWrap,{name:"star-outline",icon:M.starOutlineIcon,style:{clipPath:`${i==="rtl"?"inset(0 50% 0 0)":"inset(0 0 0 50%)"}`},size:"xlarge"}),(e.icon||e.svgIconOutline)&&n.createElement(l.IconWrap,{name:l.toIconName(`${e.icon}-outline`),icon:e.svgIconOutline,size:"xlarge"})),y&&n.createElement("span",{className:"k-rating-precision-part"},!(e.icon||e.svgIcon)&&n.createElement(l.IconWrap,{name:"star",icon:M.starIcon,style:{clipPath:`${i==="rtl"?"inset(0 0 0 50%)":"inset(0 50% 0 0)"}`},size:"xlarge"}),(e.icon||e.svgIcon)&&n.createElement(l.IconWrap,{name:e.icon?l.toIconName(e.icon):void 0,icon:e.svgIcon,size:"xlarge"})),y&&n.createElement("span",{style:{width:"24px",height:"24px",display:"block"}}),!y&&!(e.icon||e.svgIcon)&&(b||O&&!b)&&n.createElement(l.IconWrap,{name:"star",icon:M.starIcon,size:"xlarge"})||!(e.icon||e.svgIcon)&&!b&&!O&&n.createElement(l.IconWrap,{name:"star-outline",icon:M.starOutlineIcon,size:"xlarge"})||(e.icon||e.svgIcon)&&(b||O&&!b)&&n.createElement(l.IconWrap,{name:e.icon,icon:e.svgIcon,size:"xlarge"})||(e.icon||e.svgIcon)&&!b&&n.createElement(l.IconWrap,{name:l.toIconName(`${e.icon}-outline`),icon:e.svgIconOutline,size:"xlarge"})))}return n.createElement("span",{id:e.id,style:e.style,ref:h,role:"slider",dir:i,tabIndex:l.getTabIndex(e.tabIndex,e.disabled,void 0),className:l.classNames("k-rating",{"k-rtl":i==="rtl","k-readonly":A,"k-disabled":C},e.className),onKeyDown:B,onFocus:$,onBlur:W,"aria-valuemin":N,"aria-valuemax":R,"aria-valuenow":g!==null?g:void 0,"aria-disabled":C?"true":void 0,"aria-label":D.toLanguageString(V.ratingAriaLabel,V.messages[V.ratingAriaLabel]),"aria-labelledby":e.ariaLabelledBy,"aria-describedby":e.ariaDescribedBy},n.createElement("input",{id:"rating",className:"k-hidden",readOnly:A,disabled:C}),n.createElement("span",{className:"k-rating-container"},P),e.label&&n.createElement("span",{className:"k-rating-label"},e.label))}),Z={id:u.string,dir:u.oneOf(["ltr","rtl"]),selection:u.oneOf(["continues","single"]),precision:u.oneOf(["item","half"]),value:(a,p,m)=>a.value&&a.min&&a.max&&a.step&&!(a.precision==="half"?d.isCorrectValue(a.min,a.max,a.step/2,a.value):d.isCorrectValue(a.min,a.max,a.step,a.value))&&a.precision==="half"?new Error(`Invalid prop + ${p} supplied to ${m}.
                    The value of the { value } property is not correct, please check your values.
                    `):null,defaultValue:u.number,min:u.number,max:u.number,step:(a,p,m)=>a.step!==void 0&&a.step<=0?new Error(`Invalid prop + ${p} supplied to ${m}.
                The value of the { step } property is cannot be equal or less than "0", please check your values.
                `):null,hovered:u.number,label:u.node,readonly:u.bool,disabled:u.bool,half:u.bool,icon:u.string,svgIcon:l.svgIconPropType,svgIconOutline:l.svgIconPropType,ariaDescribedBy:u.string},s={dir:"ltr",min:1,max:5,step:1,item:Q.RatingItem,defaultValue:null,readonly:!1,disabled:!1,selection:"continues",precision:"item"};S.displayName="KendoReactRating";S.propTypes=Z;exports.Rating=S;exports.RatingPropsContext=F;