primereact/knob/knob.cjs.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

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),n=require("primereact/componentbase"),a=require("primereact/hooks"),r=require("primereact/utils");function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,a.get?a:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var l=o(e);function i(e){if(Array.isArray(e))return e}function s(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var a,r,o,l,i=[],s=!0,u=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;s=!1}else for(;!(s=(a=o.call(n)).done)&&(i.push(a.value),i.length!==t);s=!0);}catch(e){u=!0,r=e}finally{try{if(!s&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(u)throw r}}return i}}function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,a=Array(t);n<t;n++)a[n]=e[n];return a}function c(e,t){if(e){if("string"==typeof e)return u(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?u(e,t):void 0}}function f(){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 m(e,t){return i(e)||s(e,t)||c(e,t)||f()}var d=n.ComponentBase.extend({defaultProps:{__TYPE:"Knob",id:null,style:null,className:null,value:null,size:100,disabled:!1,readOnly:!1,showValue:!0,tabIndex: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},css:{classes:{range:"p-knob-range",value:"p-knob-value",label:"p-knob-text",root:function(e){return r.classNames("p-knob p-component",{"p-disabled":e.props.disabled})}},styles:"\n        @keyframes dash-frame {\n            100% {\n                stroke-dashoffset: 0;\n            }\n        }\n        @layer primereact {\n            .p-knob-range {\n                fill: none;\n                transition: stroke .1s ease-in;\n                cursor: pointer;\n            }\n            .p-knob-value {\n                animation-name: dash-frame;\n                animation-fill-mode: forwards;\n                fill: none;\n            }\n            .p-knob-text {\n                font-size: 1.3rem;\n                text-align: center;\n            }\n        }\n        "}}),v=40,p=4*Math.PI/3,h=-Math.PI/3,b=l.memo(l.forwardRef((function(e,o){var i=a.useMergeProps(),s=l.useContext(t.PrimeReactContext),u=d.getProps(e,s),c=d.setMetaData({props:u}),f=c.ptm,b=c.cx;n.useHandleStyle(d.css.styles,c.isUnstyled,{name:"knob"});var y=l.useRef(null),g=!u.disabled&&!u.readOnly,w=m(a.useEventListener({target:"window",type:"mousemove",listener:function(e){_(e.offsetX,e.offsetY),e.preventDefault()},when:g}),2),x=w[0],k=w[1],M=m(a.useEventListener({target:"window",type:"mouseup",listener:function(e){k(),E(),e.preventDefault()},when:g}),2),C=M[0],E=M[1],D=m(a.useEventListener({target:"window",type:"touchmove",listener:function(e){if(1===e.touches.length){var t=y.current.getBoundingClientRect(),n=e.targetTouches.item(0);_(n.clientX-t.left,n.clientY-t.top),e.preventDefault()}},when:g}),2),P=D[0],A=D[1],I=m(a.useEventListener({target:"window",type:"touchend",listener:function(){A(),j()},when:g}),2),O=I[0],j=I[1],N=function(e,t,n,a,r){return(e-t)*(r-a)/(n-t)+a},L=function(){return N(u.min>0&&u.max>0?u.min:0,u.min,u.max,p,h)},S=function(){return N(u.value,u.min,u.max,p,h)},z="M ".concat(50+Math.cos(p)*v," ").concat(50-Math.sin(p)*v," A ").concat(v," ").concat(v," 0 1 1 ").concat(50+Math.cos(h)*v," ").concat(50-Math.sin(h)*v),T="M ".concat(50+Math.cos(L())*v," ").concat(50-Math.sin(L())*v," A ").concat(v," ").concat(v," 0 ").concat(Math.abs(L()-S())<Math.PI?0:1," ").concat(S()>L()?0:1," ").concat(50+Math.cos(S())*v," ").concat(50-Math.sin(S())*v),_=function(e,t){var n=Math.atan2(u.size/2-t,e-u.size/2),a=-Math.PI/2-Math.PI/6;q(n,a)},q=function(e,t){var n;if(e>h)n=N(e,p,h,u.min,u.max);else{if(!(e<t))return;n=N(e+2*Math.PI,p,h,u.min,u.max)}u.onChange&&u.onChange({value:Math.round((n-u.min)/u.step)*u.step+u.min})},B=function(e){var t;t=e>u.max?u.max:e<u.min?u.min:e,u.onChange&&u.onChange({value:t})},R=function(e){if(!u.disabled&&!u.readonly)switch(e.code){case"ArrowRight":case"ArrowUp":e.preventDefault(),B(u.value+1);break;case"ArrowLeft":case"ArrowDown":e.preventDefault(),B(u.value-1);break;case"Home":e.preventDefault(),B(u.min);break;case"End":e.preventDefault(),B(u.max);break;case"PageUp":e.preventDefault(),B(u.value+10);break;case"PageDown":e.preventDefault(),B(u.value-10)}};l.useImperativeHandle(o,(function(){return{props:u,getElement:function(){return y.current}}}));var U=i({x:50,y:57,textAnchor:"middle",fill:u.textColor,className:b("label"),name:u.name},f("label")),W=u.showValue&&l.createElement("text",U,u.valueTemplate.replace("{value}",u.value.toString())),K=i({ref:y,id:u.id,className:r.classNames(u.className,b("root")),style:u.style},f("root")),Y=i({viewBox:"0 0 100 100",width:u.size,height:u.size,"aria-valuemin":u.min,"aria-valuemax":u.max,"aria-valuenow":u.value,"aria-labelledby":u.ariaLabelledby,"aria-label":u.ariaLabel,role:"slider",tabIndex:u.readonly||u.disabled?-1:u.tabIndex,onClick:function(e){return t=e,void(u.disabled||u.readOnly||_(t.nativeEvent.offsetX,t.nativeEvent.offsetY));var t},onMouseDown:function(e){return t=e,x(),C(),void t.preventDefault();var t},onMouseUp:function(e){return k(),void E()},onTouchStart:function(e){return P(),void O()},onTouchEnd:function(e){return A(),void j()},onKeyDown:function(e){return R(e)}},f("svg")),H=i({d:z,strokeWidth:u.strokeWidth,stroke:u.rangeColor,className:b("range")},f("range")),X=i({d:T,strokeWidth:u.strokeWidth,stroke:u.valueColor,className:b("value")},f("value"));return l.createElement("div",K,l.createElement("svg",Y,l.createElement("path",H),l.createElement("path",X),W))})));b.displayName="Knob",exports.Knob=b;