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