primereact
Version:
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
2 lines (1 loc) • 5.88 kB
JavaScript
import*as e from"react";import{PrimeReactContext as n}from"primereact/api";import{ComponentBase as t,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,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var a,r,o,l,i=[],c=!0,s=!1;try{if(o=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;c=!1}else for(;!(c=(a=o.call(t)).done)&&(i.push(a.value),i.length!==n);c=!0);}catch(e){s=!0,r=e}finally{try{if(!c&&null!=t.return&&(l=t.return(),Object(l)!==l))return}finally{if(s)throw r}}return i}}function s(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,a=Array(n);t<n;t++)a[t]=e[t];return a}function u(e,n){if(e){if("string"==typeof e)return s(e,n);var t={}.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?s(e,n):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,n){return i(e)||c(e,n)||u(e,n)||m()}var d=t.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 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=e.memo(e.forwardRef((function(t,i){var c=r(),s=e.useContext(n),u=d.getProps(t,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 n=g.current.getBoundingClientRect(),t=e.targetTouches.item(0);B(t.clientX-n.left,t.clientY-n.top),e.preventDefault()}},when:w}),2),E=I[0],P=I[1],N=f(o({target:"window",type:"touchend",listener:function(){P(),T()},when:w}),2),S=N[0],T=N[1],z=function(e,n,t,a,r){return(e-n)*(r-a)/(t-n)+a},O=function(){return z(u.min>0&&u.max>0?u.min:0,u.min,u.max,p,h)},U=function(){return z(u.value,u.min,u.max,p,h)},W="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),j="M ".concat(50+Math.cos(O())*v," ").concat(50-Math.sin(O())*v," A ").concat(v," ").concat(v," 0 ").concat(Math.abs(O()-U())<Math.PI?0:1," ").concat(U()>O()?0:1," ").concat(50+Math.cos(U())*v," ").concat(50-Math.sin(U())*v),B=function(e,n){var t=Math.atan2(u.size/2-n,e-u.size/2),a=-Math.PI/2-Math.PI/6;L(t,a)},L=function(e,n){var t;if(e>h)t=z(e,p,h,u.min,u.max);else{if(!(e<n))return;t=z(e+2*Math.PI,p,h,u.min,u.max)}u.onChange&&u.onChange({value:Math.round((t-u.min)/u.step)*u.step+u.min})},R=function(e){var n;n=e>u.max?u.max:e<u.min?u.min:e,u.onChange&&u.onChange({value:n})},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 n=e,void(u.disabled||u.readOnly||B(n.nativeEvent.offsetX,n.nativeEvent.offsetY));var n},onMouseDown:function(e){return n=e,k(),D(),void n.preventDefault();var n},onMouseUp:function(e){return M(),void A()},onTouchStart:function(e){return E(),void S()},onTouchEnd:function(e){return P(),void T()},onKeyDown:function(e){return Y(e)}},b("svg")),_=c({d:W,strokeWidth:u.strokeWidth,stroke:u.rangeColor,className:y("range")},b("range")),G=c({d:j,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};