primereact/colorpicker/colorpicker.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 e from"react";import n from"primereact/api";import{useOverlayListener as t,useEventListener as r,useMountEffect as o,useUpdateEffect as i,useUnmountEffect as a}from"primereact/hooks";import{OverlayService as c}from"primereact/overlayservice";import{Tooltip as l}from"primereact/tooltip";import{classNames as u,DomHandler as s,ObjectUtils as f,ZIndexUtils as p}from"primereact/utils";import{CSSTransition as d}from"primereact/csstransition";import{Portal as m}from"primereact/portal";function h(){return h=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},h.apply(this,arguments)}function g(e){if(Array.isArray(e))return e}function b(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,o,i=[],a=!0,c=!1;try{for(t=t.call(e);!(a=(r=t.next()).done)&&(i.push(r.value),!n||i.length!==n);a=!0);}catch(e){c=!0,o=e}finally{try{a||null==t.return||t.return()}finally{if(c)throw o}}return i}}function v(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function y(e,n){if(e){if("string"==typeof e)return v(e,n);var t=Object.prototype.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)?v(e,n):void 0}}function E(){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 k(e,n){return g(e)||b(e,n)||y(e,n)||E()}var x=e.forwardRef((function(n,t){var r,o=(r=u("p-colorpicker-panel",{"p-colorpicker-overlay-panel":!n.inline,"p-disabled":n.disabled}),e.createElement(d,{nodeRef:t,classNames:"p-connected-overlay",in:n.in,timeout:{enter:120,exit:100},options:n.transitionOptions,unmountOnExit:!0,onEnter:n.onEnter,onEntered:n.onEntered,onExit:n.onExit,onExited:n.onExited},e.createElement("div",{ref:t,className:r,onClick:n.onClick},n.children)));return n.inline?o:e.createElement(m,{element:o,appendTo:n.appendTo})}));x.displayName="ColorPickerPanel";var M=e.memo(e.forwardRef((function(d,m){var g=k(e.useState(!1),2),b=g[0],v=g[1],y=e.useRef(null),E=e.useRef(null),w=e.useRef(d.inputRef),T=e.useRef(null),C=e.useRef(null),R=e.useRef(null),O=e.useRef(null),N=e.useRef(!1),S=e.useRef(null),I=e.useRef(!1),D=k(t({target:y,overlay:E,listener:function(e,n){n.valid&&ae()},when:b}),2),P=D[0],j=D[1],Y=k(r({type:"mousemove",listener:function(e){I.current&&J(e),N.current&&F(e)}}),2),A=Y[0],H=Y[1],K=k(r({type:"mouseup",listener:function(){I.current=N.current=!1,s.removeClass(y.current,"p-colorpicker-dragging"),H(),X()}}),2),B=K[0],X=K[1],_=function(e){d.disabled||(q(),z(e))},z=function(e){d.disabled||(N.current=!0,F(e),s.addClass(y.current,"p-colorpicker-dragging"))},F=function(e){var n=O.current.getBoundingClientRect().top+(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0);S.current=se({h:Math.floor(360*(150-Math.max(0,Math.min(150,(e.pageY||e.changedTouches[0].pageY)-n)))/150),s:100,b:100}),ne(),re(),Q()},L=function(e){d.disabled||(q(),U(e))},U=function(e){d.disabled||(I.current=!0,J(e),s.addClass(y.current,"p-colorpicker-dragging"),e.preventDefault())},Z=function(e){I.current&&(J(e),e.preventDefault()),N.current&&(F(e),e.preventDefault())},$=function(){I.current=!1,N.current=!1,s.removeClass(y.current,"p-colorpicker-dragging"),G()},q=function(){A(),B()},G=function(){H(),X()},J=function(e){var n=T.current.getBoundingClientRect(),t=n.top+(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0),r=n.left+document.body.scrollLeft,o=Math.floor(100*Math.max(0,Math.min(150,(e.pageX||e.changedTouches[0].pageX)-r))/150),i=Math.floor(100*(150-Math.max(0,Math.min(150,(e.pageY||e.changedTouches[0].pageY)-t)))/150);S.current=se({h:S.current.h,s:o,b:i}),te(),oe(),Q()},Q=function(){switch(d.format){case"hex":ee(ge(S.current));break;case"rgb":ee(me(S.current));break;case"hsb":ee(S.current)}},V=function(e){var n;if(e)switch(d.format){case"hex":n=pe(e);break;case"rgb":n=de(e);break;case"hsb":n=e}else n=pe(d.defaultColor);return n},W=function(e){S.current=V(e)},ee=function(e){d.onChange&&d.onChange({value:e,stopPropagation:function(){},preventDefault:function(){},target:{name:d.name,id:d.id,value:e}})},ne=function(){if(T.current){var e=se({h:S.current.h,s:100,b:100});T.current.style.backgroundColor="#"+ge(e)}},te=function(){C.current&&(C.current.style.left=Math.floor(150*S.current.s/100)+"px",C.current.style.top=Math.floor(150*(100-S.current.b)/100)+"px")},re=function(){R.current&&(R.current.style.top=Math.floor(150-150*S.current.h/360)+"px")},oe=function(){w.current&&(w.current.style.backgroundColor="#"+ge(S.current))},ie=function(){v(!0)},ae=function(){v(!1)},ce=function(){le()},le=function(){b?ae():ie()},ue=function(e){switch(e.which){case 32:le(),e.preventDefault();break;case 27:case 9:ae()}},se=function(e){return{h:Math.min(360,Math.max(0,e.h)),s:Math.min(100,Math.max(0,e.s)),b:Math.min(100,Math.max(0,e.b))}},fe=function(e){var n=parseInt(e.indexOf("#")>-1?e.substring(1):e,16);return{r:n>>16,g:(65280&n)>>8,b:255&n}},pe=function(e){return de(fe(e))},de=function(e){var n={h:0,s:0,b:0},t=Math.min(e.r,e.g,e.b),r=Math.max(e.r,e.g,e.b),o=r-t;return n.b=r,n.s=0!==r?255*o/r:0,n.h=0!==n.s?e.r===r?(e.g-e.b)/o:e.g===r?2+(e.b-e.r)/o:4+(e.r-e.g)/o:-1,n.h*=60,n.h<0&&(n.h+=360),n.s*=100/255,n.b*=100/255,n},me=function(e){var n={r:null,g:null,b:null},t=Math.round(e.h),r=Math.round(255*e.s/100),o=Math.round(255*e.b/100);if(0===r)n={r:o,g:o,b:o};else{var i=o,a=(255-r)*o/255,c=t%60*(i-a)/60;360===t&&(t=0),t<60?(n.r=i,n.b=a,n.g=a+c):t<120?(n.g=i,n.b=a,n.r=i-c):t<180?(n.g=i,n.r=a,n.b=a+c):t<240?(n.b=i,n.r=a,n.g=i-c):t<300?(n.b=i,n.g=a,n.r=a+c):t<360?(n.r=i,n.g=a,n.b=i-c):(n.r=0,n.g=0,n.b=0)}return{r:Math.round(n.r),g:Math.round(n.g),b:Math.round(n.b)}},he=function(e){var n=[e.r.toString(16),e.g.toString(16),e.b.toString(16)];for(var t in n)1===n[t].length&&(n[t]="0"+n[t]);return n.join("")},ge=function(e){return he(me(e))},be=function(){re(),te(),oe(),ne()},ve=function(){w.current&&s.alignOverlay(E.current,w.current.parentElement,d.appendTo||n.appendTo)};e.useImperativeHandle(m,(function(){return{props:d,show:ie,hide:ae,getElement:function(){return y.current},getOverlay:function(){return E.current},getInput:function(){return w.current}}})),e.useEffect((function(){f.combinedRefs(w,d.inputRef)}),[w,d.inputRef]),o((function(){W(d.value),be()})),i((function(){I.current||N.current||W(d.value)}),[d.value]),i((function(){be()})),a((function(){p.clear(E.current)}));var ye=f.isNotEmpty(d.tooltip),Ee=f.findDiffKeys(d,M.defaultProps),ke=u("p-colorpicker p-component",{"p-colorpicker-overlay":!d.inline},d.className),xe=e.createElement("div",{className:"p-colorpicker-content"},e.createElement("div",{ref:T,className:"p-colorpicker-color-selector",onMouseDown:L,onTouchStart:U,onTouchMove:Z,onTouchEnd:$},e.createElement("div",{className:"p-colorpicker-color"},e.createElement("div",{ref:C,className:"p-colorpicker-color-handle"}))),e.createElement("div",{ref:O,className:"p-colorpicker-hue",onMouseDown:_,onTouchStart:z,onTouchMove:Z,onTouchEnd:$},e.createElement("div",{ref:R,className:"p-colorpicker-hue-handle"}))),Me=function(){if(!d.inline){var n=u("p-colorpicker-preview p-inputtext",{"p-disabled":d.disabled}),t=f.findDiffKeys(d,M.defaultProps);return e.createElement("input",h({ref:w,type:"text",className:n,readOnly:!0,id:d.inputId,tabIndex:d.tabIndex,disabled:d.disabled,onClick:ce,onKeyDown:ue},t))}return null}();return e.createElement(e.Fragment,null,e.createElement("div",h({ref:y,id:d.id,style:d.style,className:ke},Ee),Me,e.createElement(x,{ref:E,appendTo:d.appendTo,inline:d.inline,disabled:d.disabled,onClick:function(e){d.inline||c.emit("overlay-click",{originalEvent:e,target:y.current})},in:d.inline||b,onEnter:function(){p.set("overlay",E.current,n.autoZIndex,n.zIndex.overlay),ve()},onEntered:function(){P(),d.onShow&&d.onShow()},onExit:function(){j()},onExited:function(){p.clear(E.current),d.onHide&&d.onHide()},transitionOptions:d.transitionOptions},xe)),ye&&e.createElement(l,h({target:y,content:d.tooltip},d.tooltipOptions)))})));M.displayName="ColorPicker",M.defaultProps={__TYPE:"ColorPicker",id:null,inputRef:null,value:null,style:null,className:null,defaultColor:"ff0000",inline:!1,format:"hex",appendTo:null,disabled:!1,tabIndex:null,inputId:null,tooltip:null,tooltipOptions:null,transitionOptions:null,onChange:null,onShow:null,onHide:null};export{M as ColorPicker};