@viacast/react-contexify/dist/react-contexify.cjs.production.min.js

Add contextmenu to your react component with ease

"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),t=e(n),i=e(require("clsx"));function r(){return(r=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e}).apply(this,arguments)}function o(e,n){if(null==e)return{};var t,i,r={},o=Object.keys(e);for(i=0;i<o.length;i++)n.indexOf(t=o[i])>=0||(r[t]=e[t]);return r}var l=n.createContext({});function a(){return n.useContext(l)}var u=function(e){return t.createElement(l.Provider,{value:e.refTracker},e.children)};function s(){var e=new Map;return{on:function(n,t){var i;return e.has(n)?null==(i=e.get(n))||i.add(t):e.set(n,new Set([t])),this},off:function(n,t){return t?e.get(n).delete(t):e.delete(n),this},emit:function(n,t){if("production"!==process.env.NODE){var i=n;e.has(n)||0===i||console.error("It seems that the menu you are trying to display is not renderer or you have a menu id mismatch.","You used the menu id: "+n)}return e.has(n)&&e.get(n).forEach((function(e){e(t)})),this}}}var c=s();function d(){return n.useRef(new Map).current}var v,f,m={show:function(e){var n=e.id,t=e.event,i=e.props,r=e.position;t.preventDefault&&t.preventDefault(),c.emit(0).emit(n,{event:t.nativeEvent||t,props:i,position:r})},hideAll:function(){c.emit(0)}};!function(e){e.menu="react-contexify",e.submenu="react-contexify react-contexify__submenu",e.submenuArrow="react-contexify__submenu-arrow",e.submenuOpen="react-contexify__submenu--is-open",e.separator="react-contexify__separator",e.item="react-contexify__item",e.itemDisabled="react-contexify__item--disabled",e.itemContent="react-contexify__item__content",e.theme="react-contexify__theme--",e.animationWillEnter="react-contexify__will-enter--",e.animationWillLeave="react-contexify__will-leave--"}(v||(v={})),function(e){e[e.HIDE_ALL=0]="HIDE_ALL"}(f||(f={}));var p=function(){};function b(e){return"function"==typeof e}function g(e){return"string"==typeof e}function h(e,t){return n.Children.map(n.Children.toArray(e).filter(Boolean),(function(e){return n.cloneElement(e,t)}))}function w(e,n){return b(e)?e(n):e}function y(e,n){return b(n)?r({},e,n(e)):r({},e,n)}exports.Item=function(e){var n,r,l,u,s,c=e.id,d=void 0===c?"":c,f=e.children,m=e.className,p=e.style,b=e.triggerEvent,g=e.data,h=e.propsFromTrigger,y=e.onClick,E=void 0===y?null:y,x=e.disabled,L=void 0!==x&&x,_=e.hidden,k=void 0!==_&&_,S=e.render,T=void 0===S?null:S,A=o(e,["id","children","className","style","triggerEvent","data","propsFromTrigger","onClick","disabled","hidden","render"]),N=a(),O={id:d,data:g,props:h,triggerEvent:b},C=w(L,O)||(null==h||null==(n=h.disabledPredicates)||null==(r=n[d])?void 0:r.call(n,O))||!1;if(w(k,O)||(null==h||null==(l=h.hiddenPredicates)||null==(u=l[d])?void 0:u.call(l,O)))return null;var D=i(v.item,m,((s={})[""+v.itemDisabled]=C,s));return t.createElement("div",Object.assign({},A,{className:D,style:p,onClick:function(e){if(O.event=e,C)e.stopPropagation();else if(E)null==E||E(O);else{var n,t;null==h||null==(n=h.onClickHandlers)||null==(t=n[d])||t.call(n,O)}},onKeyDown:function(e){"Enter"===e.key&&(O.event=e,null==E||E(O))},ref:function(e){e&&!C&&N.set(e,{node:e,isSubmenu:!1})},tabIndex:-1,role:"menuitem","aria-disabled":C}),t.createElement("div",{className:v.itemContent},T?T(O):f))},exports.Menu=function(e){var l,a,s,m=e.id,b=e.theme,w=e.style,E=e.className,x=e.children,L=e.animation,_=void 0===L?"scale":L,k=e.onHidden,S=void 0===k?p:k,T=e.onShown,A=void 0===T?p:T,N=e.hideOnMouseLeave,O=void 0!==N&&N,C=e.ignoreBounds,D=void 0!==C&&C,R=e.ignoreKeyboard,M=void 0!==R&&R,W=e.ignoreClickOutside,H=void 0!==W&&W,I=o(e,["id","theme","style","className","children","animation","onHidden","onShown","hideOnMouseLeave","ignoreBounds","ignoreKeyboard","ignoreClickOutside"]),P=n.useReducer(y,{x:0,y:0,willShow:!1,visible:!1,triggerEvent:{},propsFromTrigger:null,willLeave:!1}),F=P[0],j=P[1],B=n.useRef(null),K=n.useRef(!1),U=(a=F.visible,s=n.useRef(),n.useEffect((function(){s.current=a}),[a]),s.current),Y=d(),q=n.useState((function(){return function(){var e,n,t,i,r=new Map,o=!1;function l(){var n;null==(n=i[e])||n.node.focus()}function a(){return-1!==e||(u(),!1)}function u(){e+1<i.length?e++:e+1===i.length&&(e=0),o&&s(),l()}function s(){if(a()&&!t){var u=r.get(n),s=u.isRoot,c=u.items,d=u.focusedIndex,f=u.parentNode;n.classList.remove(v.submenuOpen),i=c,n=f,s&&(t=!0,r.clear()),o||(e=d,l())}}return{init:function(n){i=n,e=-1,t=!0},moveDown:u,moveUp:function(){-1===e||0===e?e=i.length-1:e-1<i.length&&e--,o&&s(),l()},openSubmenu:function(){if(a()&&e>=0&&(null==(f=i[e])?void 0:f.isSubmenu)){var u,s=Array.from(null==(d=i[e])?void 0:d.submenuRefTracker.values()),c=null==(u=i[e])?void 0:u.node;return r.set(c,{isRoot:t,focusedIndex:e,parentNode:n||c,items:i}),c.classList.add(v.submenuOpen),n=c,s.length>0?(e=0,i=s):o=!0,t=!1,l(),!0}var d,f;return!1},closeSubmenu:s}}()}))[0];function z(e){var n=e.event,t=e.props,i=e.position;n.stopPropagation();var r,o,l=i||(o={x:0,y:0},function(e){return"touchend"===e.type}(r=n)&&r.changedTouches&&r.changedTouches.length>0?(o.x=r.changedTouches[0].clientX,o.y=r.changedTouches[0].clientY):(o.x=r.clientX,o.y=r.clientY),(!o.x||o.x<0)&&(o.x=0),(!o.y||o.y<0)&&(o.y=0),o),a=l.x,u=l.y;setTimeout((function(){j({visible:!0,willLeave:!1,x:a,y:u,triggerEvent:n,propsFromTrigger:t})}),0),setTimeout((function(){j({willShow:!0})}),0)}function X(e){(void 0===e||2!==e.button&&!0!==e.ctrlKey||"contextmenu"===e.type)&&(function(e){return!(!e||!(g(e)||"exit"in e&&e.exit))}(_)?j((function(e){return{willLeave:e.visible}})):j((function(e){return{visible:!e.visible&&e.visible,willShow:!e.visible&&e.visible}})))}n.useEffect((function(){return K.current=!0,c.on(m,z).on(f.HIDE_ALL,X),function(){c.off(m,z).off(f.HIDE_ALL,X)}}),[m]),n.useEffect((function(){K.current&&F.visible!==U&&(F.visible?A():S())}),[F.visible,S,A]),n.useEffect((function(){F.visible?q.init(Array.from(Y.values())):Y.clear()}),[F.visible,q,Y]),n.useEffect((function(){if(F.visible){var e=window,n=e.innerWidth,t=B.current,i=t.offsetWidth,r=t.offsetHeight;if(D)return;var o=F.x,l=F.y;o+i>n&&(o=n-i),l+r>e.innerHeight&&(l=Math.max(0,l-r)),j({x:o,y:l})}}),[F.visible]),n.useEffect((function(){function e(e){var n=!0;switch(e.key){case"Enter":q.openSubmenu()||X();break;case"Escape":X();break;case"ArrowUp":q.moveUp();break;case"ArrowDown":q.moveDown();break;case"ArrowRight":q.openSubmenu();break;case"ArrowLeft":q.closeSubmenu();break;default:n=!1}n&&e.preventDefault()}return F.visible&&(window.addEventListener("resize",X),window.addEventListener("contextmenu",X),window.addEventListener("click",H?p:X),window.addEventListener("scroll",X),window.addEventListener("keydown",M?p:e),window.addEventListener("blur",X)),function(){window.removeEventListener("resize",X),window.removeEventListener("contextmenu",X),window.removeEventListener("click",X),window.removeEventListener("scroll",X),window.removeEventListener("keydown",M?p:e),window.removeEventListener("blur",X)}}),[F.visible,q,M]);var G,J,Q=F.visible,V=F.triggerEvent,Z=F.propsFromTrigger,$=F.x,ee=F.y,ne=F.willLeave,te=i(v.menu,E,((l={})[""+v.theme+b]=b,l),_?g(_)?i(((G={})[""+v.animationWillEnter+_]=_&&Q&&!ne,G[""+v.animationWillLeave+_+" "+v.animationWillLeave+"'disabled'"]=_&&Q&&ne,G)):"enter"in _&&"exit"in _?i(((J={})[""+v.animationWillEnter+_.enter]=_.enter&&Q&&!ne,J[""+v.animationWillLeave+_.exit+" "+v.animationWillLeave+"'disabled'"]=_.exit&&Q&&ne,J)):null:null),ie=r({},w,{left:$,top:ee,opacity:1});return t.createElement(u,{refTracker:Y},Q&&t.createElement("div",Object.assign({},I,{className:te,onAnimationEnd:function(){F.willLeave&&F.visible&&j({visible:!1,willLeave:!1,willShow:!1})},style:r({},ie,{opacity:F.willShow?1:0}),ref:B,role:"menu",onMouseLeave:function(){O&&X()}}),h(x,{propsFromTrigger:Z,triggerEvent:V})))},exports.Separator=function(){return t.createElement("div",{className:"react-contexify__separator"})},exports.Submenu=function(e){var l,s,c,f,m,p=e.id,b=void 0===p?"":p,g=e.arrow,y=void 0===g?"▶":g,E=e.children,x=e.disabled,L=void 0!==x&&x,_=e.hidden,k=void 0!==_&&_,S=e.label,T=e.className,A=e.triggerEvent,N=e.propsFromTrigger,O=e.style,C=o(e,["id","arrow","children","disabled","hidden","label","className","triggerEvent","propsFromTrigger","style"]),D=a(),R=d(),M=n.useRef(null),W=n.useState({left:"100%",top:0,bottom:"initial"}),H=W[0],I=W[1],P={id:b,triggerEvent:A,props:N},F=w(L,P)||(null==N||null==(l=N.disabledPredicates)||null==(s=l[b])?void 0:s.call(l,P))||!1,j=w(k,P)||(null==N||null==(c=N.hiddenPredicates)||null==(f=c[b])?void 0:f.call(c,P))||!1;if(n.useEffect((function(){if(M.current){var e=window,n=e.innerWidth,t=e.innerHeight,i=M.current.getBoundingClientRect(),r={};i.right<n?(r.left="100%",r.right=void 0):(r.right="100%",r.left=void 0),i.bottom>t?(r.bottom=0,r.top="initial"):r.bottom="initial",I(r)}}),[]),j)return null;var B=i(v.item,T,((m={})[""+v.itemDisabled]=F,m)),K=r({},O,H);return t.createElement(u,{refTracker:R},t.createElement("div",Object.assign({},C,{className:B,ref:function(e){e&&!F&&D.set(e,{node:e,isSubmenu:!0,submenuRefTracker:R})},tabIndex:-1,role:"menuitem","aria-haspopup":!0,"aria-disabled":F}),t.createElement("div",{className:v.itemContent,onClick:function(e){e.stopPropagation()}},S,t.createElement("span",{className:v.submenuArrow},y)),t.createElement("div",{className:v.submenu,ref:M,style:K},h(E,{propsFromTrigger:N,triggerEvent:A}))))},exports.animation={fade:"fade",flip:"flip",scale:"scale",slide:"slide"},exports.contextMenu=m,exports.theme={light:"light",dark:"dark"},exports.useContextMenu=function(e){return{show:function(n,t){m.show({id:(null==t?void 0:t.id)||(null==e?void 0:e.id),props:(null==t?void 0:t.props)||(null==e?void 0:e.props),event:n,position:null==t?void 0:t.position})},hideAll:function(){m.hideAll()}}};
//# sourceMappingURL=react-contexify.cjs.production.min.js.map