UNPKG

primereact

Version:

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

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