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 e from"react";import{PrimeReactContext as t}from"primereact/api";import{ComponentBase as n,useHandleStyle as a}from"primereact/componentbase";import{useMergeProps as r,useEventListener as o}from"primereact/hooks";import{classNames as l}from"primereact/utils";function i(e){if(Array.isArray(e))return e}function c(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var a,r,o,l,i=[],c=!0,s=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(a=o.call(n)).done)&&(i.push(a.value),i.length!==t);c=!0);}catch(e){s=!0,r=e}finally{try{if(!c&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(s)throw r}}return i}}function s(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,a=new Array(t);n<t;n++)a[n]=e[n];return a}function u(e,t){if(e){if("string"==typeof e)return s(e,t);var n=Object.prototype.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)?s(e,t):void 0}}function m(){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 f(e,t){return i(e)||c(e,t)||u(e,t)||m()}var d=n.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 l("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            }\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=e.memo(e.forwardRef((function(n,i){var c=r(),s=e.useContext(t),u=d.getProps(n,s),m=d.setMetaData({props:u}),b=m.ptm,y=m.cx;a(d.css.styles,m.isUnstyled,{name:"knob"});var g=e.useRef(null),w=!u.disabled&&!u.readOnly,x=f(o({target:"window",type:"mousemove",listener:function(e){B(e.offsetX,e.offsetY),e.preventDefault()},when:w}),2),k=x[0],M=x[1],C=f(o({target:"window",type:"mouseup",listener:function(e){M(),A(),e.preventDefault()},when:w}),2),D=C[0],A=C[1],I=f(o({target:"window",type:"touchmove",listener:function(e){if(1===e.touches.length){var t=g.current.getBoundingClientRect(),n=e.targetTouches.item(0);B(n.clientX-t.left,n.clientY-t.top),e.preventDefault()}},when:w}),2),E=I[0],P=I[1],N=f(o({target:"window",type:"touchend",listener:function(){P(),S()},when:w}),2),O=N[0],S=N[1],T=function(e,t,n,a,r){return(e-t)*(r-a)/(n-t)+a},z=function(){return T(u.min>0&&u.max>0?u.min:0,u.min,u.max,p,h)},j=function(){return T(u.value,u.min,u.max,p,h)},U="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),W="M ".concat(50+Math.cos(z())*v," ").concat(50-Math.sin(z())*v," A ").concat(v," ").concat(v," 0 ").concat(Math.abs(z()-j())<Math.PI?0:1," ").concat(j()>z()?0:1," ").concat(50+Math.cos(j())*v," ").concat(50-Math.sin(j())*v),B=function(e,t){var n=Math.atan2(u.size/2-t,e-u.size/2),a=-Math.PI/2-Math.PI/6;L(n,a)},L=function(e,t){var n;if(e>h)n=T(e,p,h,u.min,u.max);else{if(!(e<t))return;n=T(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})},R=function(e){var t;t=e>u.max?u.max:e<u.min?u.min:e,u.onChange&&u.onChange({value:t})},Y=function(e){if(!u.disabled&&!u.readonly)switch(e.code){case"ArrowRight":case"ArrowUp":e.preventDefault(),R(u.value+1);break;case"ArrowLeft":case"ArrowDown":e.preventDefault(),R(u.value-1);break;case"Home":e.preventDefault(),R(u.min);break;case"End":e.preventDefault(),R(u.max);break;case"PageUp":e.preventDefault(),R(u.value+10);break;case"PageDown":e.preventDefault(),R(u.value-10)}};e.useImperativeHandle(i,(function(){return{props:u,getElement:function(){return g.current}}}));var K=c({x:50,y:57,textAnchor:"middle",fill:u.textColor,className:y("label"),name:u.name},b("label")),X=u.showValue&&e.createElement("text",K,u.valueTemplate.replace("{value}",u.value.toString())),H=c({ref:g,id:u.id,className:l(u.className,y("root")),style:u.style},b("root")),V=c({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||B(t.nativeEvent.offsetX,t.nativeEvent.offsetY));var t},onMouseDown:function(e){return t=e,k(),D(),void t.preventDefault();var t},onMouseUp:function(e){return M(),void A()},onTouchStart:function(e){return E(),void O()},onTouchEnd:function(e){return P(),void S()},onKeyDown:function(e){return Y(e)}},b("svg")),_=c({d:U,strokeWidth:u.strokeWidth,stroke:u.rangeColor,className:y("range")},b("range")),G=c({d:W,strokeWidth:u.strokeWidth,stroke:u.valueColor,className:y("value")},b("value"));return e.createElement("div",H,e.createElement("svg",V,e.createElement("path",_),e.createElement("path",G),X))})));b.displayName="Knob";export{b as Knob};