primereact/knob/knob.esm.min.js

PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime

import*as t from"react";import{useEventListener as e}from"primereact/hooks";import{ObjectUtils as n,classNames as r}from"primereact/utils";function o(){return o=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},o.apply(this,arguments)}function a(t){if(Array.isArray(t))return t}function i(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=n){var r,o,a,i,l=[],c=!0,u=!1;try{if(a=(n=n.call(t)).next,0===e){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=a.call(n)).done)&&(l.push(r.value),l.length!==e);c=!0);}catch(t){u=!0,o=t}finally{try{if(!c&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(u)throw o}}return l}}function l(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}function c(t,e){if(t){if("string"==typeof t)return l(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?l(t,e):void 0}}function u(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function s(t,e){return a(t)||i(t,e)||c(t,e)||u()}var f={defaultProps:{__TYPE:"Knob",id:null,style:null,className:null,value:null,size:100,disabled:!1,readOnly:!1,showValue:!0,step:1,min:0,max:100,strokeWidth:14,name:null,valueColor:"var(--primary-color, Black)",rangeColor:"var(--surface-border, LightGray)",textColor:"var(--text-color-secondary, Black)",valueTemplate:"{value}",onChange:null,children:void 0},getProps:function(t){return n.getMergedProps(t,f.defaultProps)},getOtherProps:function(t){return n.getDiffProps(t,f.defaultProps)}},m=40,h=4*Math.PI/3,p=-Math.PI/3,d=t.memo(t.forwardRef((function(n,a){var i=f.getProps(n),l=t.useRef(null),c=!i.disabled&&!i.readOnly,u=s(e({target:"window",type:"mousemove",listener:function(t){N(t.offsetX,t.offsetY),t.preventDefault()},when:c}),2),d=u[0],v=u[1],g=s(e({target:"window",type:"mouseup",listener:function(t){v(),b(),t.preventDefault()},when:c}),2),y=g[0],b=g[1],w=s(e({target:"window",type:"touchmove",listener:function(t){if(1===t.touches.length){var e=l.current.getBoundingClientRect(),n=t.targetTouches.item(0);N(n.clientX-e.left,n.clientY-e.top),t.preventDefault()}},when:c}),2),M=w[0],P=w[1],x=s(e({target:"window",type:"touchend",listener:function(){P(),O()},when:c}),2),k=x[0],O=x[1],C=function(t,e,n,r,o){return(t-e)*(o-r)/(n-e)+r},E=function(){return C(i.min>0&&i.max>0?i.min:0,i.min,i.max,h,p)},I=function(){return C(i.value,i.min,i.max,h,p)},A="M ".concat(50+Math.cos(h)*m," ").concat(50-Math.sin(h)*m," A ").concat(m," ").concat(m," 0 1 1 ").concat(50+Math.cos(p)*m," ").concat(50-Math.sin(p)*m),j="M ".concat(50+Math.cos(E())*m," ").concat(50-Math.sin(E())*m," A ").concat(m," ").concat(m," 0 ").concat(Math.abs(E()-I())<Math.PI?0:1," ").concat(I()>E()?0:1," ").concat(50+Math.cos(I())*m," ").concat(50-Math.sin(I())*m),N=function(t,e){var n=Math.atan2(i.size/2-e,t-i.size/2),r=-Math.PI/2-Math.PI/6;S(n,r)},S=function(t,e){var n;if(t>p)n=C(t,h,p,i.min,i.max);else{if(!(t<e))return;n=C(t+2*Math.PI,h,p,i.min,i.max)}i.onChange&&i.onChange({value:Math.round((n-i.min)/i.step)*i.step+i.min})};t.useImperativeHandle(a,(function(){return{props:i,getElement:function(){return l.current}}}));var T=f.getOtherProps(i),D=r("p-knob p-component",{"p-disabled":i.disabled},i.className),z=i.showValue&&t.createElement("text",{x:50,y:57,textAnchor:"middle",fill:i.textColor,className:"p-knob-text",name:i.name},i.valueTemplate.replace("{value}",i.value.toString()));return t.createElement("div",o({ref:l,id:i.id,className:D,style:i.style},T),t.createElement("svg",{viewBox:"0 0 100 100",width:i.size,height:i.size,onClick:function(t){i.disabled||i.readOnly||N(t.nativeEvent.offsetX,t.nativeEvent.offsetY)},onMouseDown:function(t){d(),y(),t.preventDefault()},onMouseUp:function(){v(),b()},onTouchStart:function(){M(),k()},onTouchEnd:function(){P(),O()}},t.createElement("path",{d:A,strokeWidth:i.strokeWidth,stroke:i.rangeColor,className:"p-knob-range"}),t.createElement("path",{d:j,strokeWidth:i.strokeWidth,stroke:i.valueColor,className:"p-knob-value"}),z))})));d.displayName="Knob";export{d as Knob};