primereact/knob/knob.esm.min.js

PrimeReact is an open source UI library for React featuring a rich set of 80+ 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 a(){return a=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},a.apply(this,arguments)}function o(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,a,o=[],i=!0,l=!1;try{for(n=n.call(t);!(i=(r=n.next()).done)&&(o.push(r.value),!e||o.length!==e);i=!0);}catch(t){l=!0,a=t}finally{try{i||null==n.return||n.return()}finally{if(l)throw a}}return o}}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 o(t)||i(t,e)||c(t,e)||u()}var f=4*Math.PI/3,m=-Math.PI/3,h=t.memo(t.forwardRef((function(o,i){var l=t.useRef(null),c=!o.disabled&&!o.readOnly,u=s(e({target:"window",type:"mousemove",listener:function(t){N(t.offsetX,t.offsetY),t.preventDefault()},when:c}),2),d=u[0],p=u[1],v=s(e({target:"window",type:"mouseup",listener:function(t){p(),g(),t.preventDefault()},when:c}),2),y=v[0],g=v[1],b=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),w=b[0],M=b[1],x=s(e({target:"window",type:"touchend",listener:function(){M(),C()},when:c}),2),k=x[0],C=x[1],E=function(t,e,n,r,a){return(t-e)*(a-r)/(n-e)+r},I=function(){return E(o.min>0&&o.max>0?o.min:0,o.min,o.max,f,m)},P=function(){return E(o.value,o.min,o.max,f,m)},A="M ".concat(50+40*Math.cos(f)," ").concat(50-40*Math.sin(f)," A ").concat(40," ").concat(40," 0 1 1 ").concat(50+40*Math.cos(m)," ").concat(50-40*Math.sin(m)),O="M ".concat(50+40*Math.cos(I())," ").concat(50-40*Math.sin(I())," A ").concat(40," ").concat(40," 0 ").concat(Math.abs(I()-P())<Math.PI?0:1," ").concat(P()>I()?0:1," ").concat(50+40*Math.cos(P())," ").concat(50-40*Math.sin(P())),N=function(t,e){var n=Math.atan2(o.size/2-e,t-o.size/2),r=-Math.PI/2-Math.PI/6;S(n,r)},S=function(t,e){var n;if(t>m)n=E(t,f,m,o.min,o.max);else{if(!(t<e))return;n=E(t+2*Math.PI,f,m,o.min,o.max)}o.onChange&&o.onChange({value:Math.round((n-o.min)/o.step)*o.step+o.min})};t.useImperativeHandle(i,(function(){return{props:o,getElement:function(){return l.current}}}));var T=n.findDiffKeys(o,h.defaultProps),j=r("p-knob p-component",{"p-disabled":o.disabled},o.className),D=o.showValue&&t.createElement("text",{x:50,y:57,textAnchor:"middle",fill:o.textColor,className:"p-knob-text",name:o.name},o.valueTemplate.replace("{value}",o.value.toString()));return t.createElement("div",a({ref:l,id:o.id,className:j,style:o.style},T),t.createElement("svg",{viewBox:"0 0 100 100",width:o.size,height:o.size,onClick:function(t){o.disabled||o.readOnly||N(t.nativeEvent.offsetX,t.nativeEvent.offsetY)},onMouseDown:function(t){d(),y(),t.preventDefault()},onMouseUp:function(){p(),g()},onTouchStart:function(){w(),k()},onTouchEnd:function(){M(),C()}},t.createElement("path",{d:A,strokeWidth:o.strokeWidth,stroke:o.rangeColor,className:"p-knob-range"}),t.createElement("path",{d:O,strokeWidth:o.strokeWidth,stroke:o.valueColor,className:"p-knob-value"}),D))})));h.displayName="Knob",h.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};export{h as Knob};