react-tooltip-z
Version:
React simple tooltip - ts/js. Fetch, click, hover...
2 lines (1 loc) • 14.4 kB
JavaScript
!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("@delpi/common"),require("react-if-vz"),require("react-dom"),require("styled-components")):"function"==typeof define&&define.amd?define(["exports","react","@delpi/common","react-if-vz","react-dom","styled-components"],t):t((n="undefined"!=typeof globalThis?globalThis:n||self).ReactTooltip={},n.React,n.common,n.reactIfVz,n.reactDom,n.styled)}(this,(function(n,t,e,o,r,i){"use strict";function a(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}var l=a(t),c=a(i),s=function(){return s=Object.assign||function(n){for(var t,e=1,o=arguments.length;e<o;e++)for(var r in t=arguments[e])Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r]);return n},s.apply(this,arguments)};function u(n,t){var e={};for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&t.indexOf(o)<0&&(e[o]=n[o]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(n);r<o.length;r++)t.indexOf(o[r])<0&&Object.prototype.propertyIsEnumerable.call(n,o[r])&&(e[o[r]]=n[o[r]])}return e}function f(n,t){return Object.defineProperty?Object.defineProperty(n,"raw",{value:t}):n.raw=t,n}"function"==typeof SuppressedError&&SuppressedError;var p,d,h,m,v,w,g,b,y,x,C,E,k,P,z,S,T,O=t.createContext({}),D=function(n){var t=n.shareContext,e=u(n,["shareContext"]);return t?l.default.createElement(O.Provider,{value:e},e.children):e.children},L="#282727",W=-12,M={fade:[i.keyframes(p||(p=f(["\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n"],["\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n"]))),i.keyframes(d||(d=f(["\n from {\n opacity: 0;\n }\n\n to {\n transform: scale(.25);\n }\n"],["\n from {\n opacity: 0;\n }\n\n to {\n transform: scale(.25);\n }\n"])))],zoom:[i.keyframes(h||(h=f(["\n from {\n transform: scale(.25);\n opacity: 0;\n }\n\n to {\n transform: scale(1);\n opacity: 1;\n }\n"],["\n from {\n transform: scale(.25);\n opacity: 0;\n }\n\n to {\n transform: scale(1);\n opacity: 1;\n }\n"]))),i.keyframes(m||(m=f(["\n from {\n transform: scale(1);\n opacity: 0;\n }\n\n to {\n transform: scale(.25);\n opacity: 1;\n }\n"],["\n from {\n transform: scale(1);\n opacity: 0;\n }\n\n to {\n transform: scale(.25);\n opacity: 1;\n }\n"])))]},j=c.default.div(v||(v=f(["\n display: flex;\n justify-content: center;\n align-items: center;\n"],["\n display: flex;\n justify-content: center;\n align-items: center;\n"]))),N=c.default(j).withConfig({shouldForwardProp:function(n){return!["top","left","backgroundColor","tooltipColor","animationDisplay","showDelay","constrainWidth","arrowPosition","pos"].includes(n)}})(C||(C=f(["\n position: absolute;\n top: ","px;\n left: ","px;\n padding: 0.25rem 0.75rem;\n border-radius: 8px;\n background: ",";\n color: ",";\n font-size: 14px;\n z-index: 1111;\n\n visibility: ",";\n animation: ","\n "," ease-in;\n transition: visibility "," ease-in;\n\n div.ldk-content {\n position: relative;\n max-width: ",";\n word-break: break-all;\n height: 100%;\n }\n\n div.ldk-icon {\n position: absolute;\n width: 0;\n height: 0;\n border: 5px solid transparent;\n\n ","\n\n ","\n\n ","\n\n ","\n\n ","\n }\n"],["\n position: absolute;\n top: ","px;\n left: ","px;\n padding: 0.25rem 0.75rem;\n border-radius: 8px;\n background: ",";\n color: ",";\n font-size: 14px;\n z-index: 1111;\n\n visibility: ",";\n animation: ","\n "," ease-in;\n transition: visibility "," ease-in;\n\n div.ldk-content {\n position: relative;\n max-width: ",";\n word-break: break-all;\n height: 100%;\n }\n\n div.ldk-icon {\n position: absolute;\n width: 0;\n height: 0;\n border: 5px solid transparent;\n\n ","\n\n ","\n\n ","\n\n ","\n\n ","\n }\n"])),(function(n){return n.top}),(function(n){return n.left}),(function(n){return n.backgroundColor||L}),(function(n){return n.tooltipColor||"#ffffff"}),(function(n){return"number"!=typeof n.top?"hidden":"visible"}),(function(n){var t=n.animationDisplay;return n.top?M[t][0]:M[t][1]}),(function(n){return n.showDelay}),(function(n){return n.showDelay}),(function(n){return n.constrainWidth?"200px":"none"}),(function(n){var t=n.pos,e=n.backgroundColor;return t&&i.css(w||(w=f(["\n border-",": 8px solid ",";\n "],["\n border-",": 8px solid ",";\n "])),t,e||L)}),(function(n){var t=n.pos,e=n.arrowPosition;return"bottom"===t&&i.css(g||(g=f(["\n top: ","px;\n left: ","px;\n "],["\n top: ","px;\n left: ","px;\n "])),W,e)}),(function(n){var t=n.pos,e=n.arrowPosition;return"top"===t&&i.css(b||(b=f(["\n bottom: ","px;\n left: ","px;\n "],["\n bottom: ","px;\n left: ","px;\n "])),W,e)}),(function(n){var t=n.pos,e=n.arrowPosition;return"right"===t&&i.css(y||(y=f(["\n top: ","px;\n left: ","px;\n "],["\n top: ","px;\n left: ","px;\n "])),e,W)}),(function(n){var t=n.pos,e=n.arrowPosition;return"left"===t&&i.css(x||(x=f(["\n top: ","px;\n right: ","px;\n "],["\n top: ","px;\n right: ","px;\n "])),e,W)}));c.default.div.withConfig({shouldForwardProp:function(n){return!["pos","arrowPosition","backgroundColor"].includes(n)}})(T||(T=f(["\n position: absolute;\n width: 0;\n height: 0;\n border: 5px solid transparent;\n\n ","\n\n ","\n\n ","\n\n ","\n\n ","\n"],["\n position: absolute;\n width: 0;\n height: 0;\n border: 5px solid transparent;\n\n ","\n\n ","\n\n ","\n\n ","\n\n ","\n"])),(function(n){var t=n.pos,e=n.backgroundColor;return t&&i.css(E||(E=f(["\n border-",": 8px solid ",";\n "],["\n border-",": 8px solid ",";\n "])),t,e||L)}),(function(n){var t=n.pos,e=n.arrowPosition;return"bottom"===t&&i.css(k||(k=f(["\n top: -12px;\n left: ","px;\n "],["\n top: -12px;\n left: ","px;\n "])),e)}),(function(n){var t=n.pos,e=n.arrowPosition;return"top"===t&&i.css(P||(P=f(["\n bottom: -12px;\n left: ","px;\n "],["\n bottom: -12px;\n left: ","px;\n "])),e)}),(function(n){var t=n.pos,e=n.arrowPosition;return"right"===t&&i.css(z||(z=f(["\n top: ","px;\n left: -10px;\n "],["\n top: ","px;\n left: -10px;\n "])),e)}),(function(n){var t=n.pos,e=n.arrowPosition;return"left"===t&&i.css(S||(S=f(["\n top: ","px;\n right: -10px;\n "],["\n top: ","px;\n right: -10px;\n "])),e)}));var I=function(n){var t=n.children;return"function"==typeof t?l.default.createElement(l.default.Fragment,null,t()):t},H=function(){var n=t.useState(),e=n[0],o=n[1];return t.useEffect((function(){var n=window.document.body.querySelector("#portal-tooltip");n||((n=window.document.createElement("div")).setAttribute("id","portal-tooltip"),window.document.body.append(n)),o(n)}),[]),e},B=function(){return window.innerWidth+window.pageXOffset},R=function(){return window.innerHeight+window.pageYOffset},q=function(n){void 0===n&&(n=window.event);var t=!1;return"which"in n?t=3===n.which:"button"in n&&(t=2===n.button),t},U=function(n){return/^\d+$/.test("".concat(n||250))?"".concat(n,"ms"):n},F=function(n,t,e,o,r,i,a,l){void 0===l&&(l=30);var c="horizontal"===a?B():R(),s="horizontal"===a?5:4,u="horizontal"===a?e.clientWidth:e.clientHeight;if(n){l="horizontal"===a?50:47;var f=u/2,p=r+o/2,d=0;return p+f>c?(t=c-u,d=u-(c-i+o/2)-s):p-f<0?(t=0,d=Math.floor(o*l/100)-s):(t=p-f,d=Math.floor(u*l/100)-s),[t,d]}t+u>c?(t=c-u,l=50):u<o&&(o=u);var h=Math.floor(o*l/100)+r-t;return h>=6&&(h-=1),[t,h]},X=function(n){var o=n.tooltipId,i=n.isShow,a=n.tooltipContent,c=n.tooltipClassName,s=n.placement,u=n.target,f=n.constrainWidth,p=n.resizeSize,d=n.showDelay,h=n.animationDisplay,m=n.top,v=n.bottom,w=n.right,g=n.left,b=n.backgroundColor,y=n.tooltipColor,x=n.arrowCentered,C=n.setTargetTooltip,E=void 0===C?function(){}:C,k=t.useRef({clientTop:0,clientLeft:0,posPlacement:null,arrowPosition:null}),P=t.useRef(null),z=H();return t.useEffect((function(){var n,t,o,r,l,c,f=(P||{}).current;if(E(f),i||(k.current.clientTop=null,k.current.clientLeft=0),e.CmUtils.isNil(a))return k.current.clientTop=null,void(k.current.clientLeft=0);if(f&&u){var p=m?"top":w?"right":v?"bottom":g?"left":s||"top",d=u.getBoundingClientRect(),h=d.top,b=d.left,y=d.bottom,C=d.right,z=d.width,S=d.height;h+=window.pageYOffset,y+=window.pageYOffset,b+=window.pageXOffset,C+=window.pageXOffset;var T=function(){return h-f.clientHeight-8},O=function(){return C+10},D=function(){return y+8},L=function(){return b-f.clientWidth-10},W=0,M=b,j=T();switch(p){case"top":j<0&&(p="bottom",j=D()),M=(n=F(Boolean(x),M,f,z,b,C,"horizontal"))[0],W=n[1];break;case"bottom":(j=D())>R()&&(p="top",j=T()),M=(t=F(Boolean(x),M,f,z,b,C,"horizontal"))[0],W=t[1];break;case"left":j=h,(M=L())<0&&(p="right",M=O()),M+f.clientWidth>B()?(p="top",M=b,j=T(),M=(o=F(Boolean(x),M,f,z,b,C,"horizontal"))[0],W=o[1]):(j=(r=F(Boolean(x),j,f,S,h,y,"vertical"))[0],W=r[1]),j<0&&(p="bottom",j=D());break;case"right":j=h,(M=O())+f.clientWidth>B()&&(p="left",M=L()),M<0?(p="top",M=b,j=T(),M=(l=F(Boolean(x),M,f,z,b,C,"horizontal"))[0],W=l[1]):(j=(c=F(Boolean(x),j,f,S,h,y,"vertical"))[0],W=c[1]),j<0&&(p="bottom",j=D())}k.current.arrowPosition=W,k.current.clientTop=j,k.current.clientLeft=M,k.current.posPlacement=p}}),[i,u,p,a,c,s,m,w,v,g]),z&&i?r.createPortal(l.default.createElement(N,{id:o,ref:P,className:e.HtmlUtils.joinClass([c,"ldk-placement-".concat(k.current.posPlacement)]),top:k.current.clientTop,left:k.current.clientLeft,pos:k.current.posPlacement,arrowPosition:k.current.arrowPosition,constrainWidth:f,showDelay:U(d),animationDisplay:h,backgroundColor:b,tooltipColor:y},l.default.createElement("div",{className:"ldk-icon"}),l.default.createElement(j,{className:"ldk-content"},l.default.createElement(I,null,a))),z):l.default.createElement(l.default.Fragment,null)},Y=function(n){var r=n.children,i=n.tagName,a=n.className,c=n.style,f=n.tooltipClassName,p=n.tooltipContent,d=n.placement,h=void 0===d?"top":d,m=n.trigger,v=void 0===m?"hover":m,w=n.showDelay,g=void 0===w?250:w,b=n.animationDisplay,y=void 0===b?"fade":b,x=n.backgroundColor,C=n.tooltipColor,E=n.constrainWidth,k=void 0===E||E,P=n.handleClick,z=void 0===P?function(){}:P,S=n.handleMouseEnter,T=void 0===S?function(){}:S,O=n.handleMouseLeave,L=void 0===O?function(){}:O,W=n.onClick,M=void 0===W?function(){}:W,j=n.onMouseEnter,N=void 0===j?function(){}:j,I=n.onMouseLeave,H=void 0===I?function(){}:I,B=n.onShown,R=void 0===B?function(){}:B,U=n.onHidden,F=void 0===U?function(){}:U,Y=n.mouseWheel,V=void 0===Y||Y,_=n.shareContext,A=void 0===_||_,$=n.open,G=n.showSync,J=n.hideIfResize,K=void 0===J||J,Q=n.hideIfScroll,Z=n.top,nn=n.bottom,tn=n.right,en=n.left,on=n.arrowCentered,rn=n.forceHide,an=u(n,["children","tagName","className","style","tooltipClassName","tooltipContent","placement","trigger","showDelay","animationDisplay","backgroundColor","tooltipColor","constrainWidth","handleClick","handleMouseEnter","handleMouseLeave","onClick","onMouseEnter","onMouseLeave","onShown","onHidden","mouseWheel","shareContext","open","showSync","hideIfResize","hideIfScroll","top","bottom","right","left","arrowCentered","forceHide"]),ln=t.useState(i)[0],cn=t.useState(e.CmUtils.idv4Time("dk-ttip"))[0],sn=t.useState({}),un=sn[0],fn=sn[1],pn=t.useState(null),dn=pn[0],hn=pn[1],mn=t.useState(null),vn=mn[0],wn=mn[1],gn=t.useRef([]),bn=e.Hooks.useWindowSize(),yn="manual"===v,xn=["hover","focus"].includes(v);t.useEffect((function(){var n=un.target||gn.current[0];$&&n&&(fn({target:n,show:!1}),setTimeout((function(){return fn((function(n){return s(s({},n),{show:!0})}))})))}),[$]),t.useEffect((function(){yn&&fn({target:gn.current[0],show:G})}),[G]),t.useEffect((function(){K&&Cn()}),[K,bn]),t.useEffect((function(){!e.CmUtils.isNil(rn)&&Cn()}),[rn]),t.useEffect((function(){return un.show?(document.addEventListener("mousedown",Pn),document.addEventListener("touchstart",Pn),document.addEventListener("scroll",En),V&&document.addEventListener("wheel",En)):(kn(),hn(null)),function(){kn()}}),[un.show]);var Cn=function(){un.show&&(hn(null),kn(),fn((function(n){return s(s({},n),{show:!1})})),F(!1))},En=function(){Q&&Cn()},kn=function(){document.removeEventListener("mousedown",Pn),document.removeEventListener("touchstart",Pn),document.removeEventListener("scroll",En),V&&document.removeEventListener("wheel",En)},Pn=function(n){void 0===n&&(n=window.event);try{if(yn||n.target.closest("#".concat(cn)))return}catch(n){}q(n)||!un.target||e.HtmlUtils.elContains(un.target,n.target)||Cn()},zn=function(n,o){var i=n.target,a=function(){fn({show:!0,target:gn.current[o]}),R(),n.preventDefault(),n.stopPropagation()};return t.Children.count(r)>1?un.target===gn.current[o]&&un.show?(n.preventDefault(),n.stopPropagation(),Cn(),void fn({show:!1,target:gn.current[o]})):void(-1!==o&&a()):e.HtmlUtils.elContains(un.target,i)&&un.show?(n.preventDefault(),void n.stopPropagation()):void(-1!==o&&a())},Sn=function(n){L(n),H(n),xn&&Cn()},Tn=function(n){return s({onMouseEnter:function(t){return function(n,t){T(n),N(n),xn&&zn(n,t)}(t,n)},onMouseLeave:Sn,onClick:function(t){return function(n,t){z(n),M(n),"click"===v&&zn(n,t)}(t,n)},ref:function(t){return gn.current[n]=t},className:a,style:c},an)};return l.default.createElement(D,{shareContext:A,showTooltip:function(n){hn(n),fn((function(n){return s(s({},n),{show:!0})})),R()},hideTooltip:Cn,isShow:Boolean(un.show),tooltipId:cn,tooltipElement:vn},l.default.createElement(o.Ifz,null,l.default.createElement(o.Ifz.If,{condition:!ln},t.Children.map(r,(function(n,e){return t.isValidElement(n)?t.cloneElement(n,s({},Tn(e))):n}))),l.default.createElement(o.Ifz.Else,null,l.default.createElement(ln,s({},Tn(0)),r))),l.default.createElement(X,{tooltipId:cn,isShow:Boolean(un.show),tooltipClassName:f,tooltipContent:dn||p,placement:h,target:un.target,constrainWidth:k,resizeSize:bn,showDelay:g,animationDisplay:y,top:Z,bottom:nn,right:tn,left:en,backgroundColor:x,tooltipColor:C,arrowCentered:on,setTargetTooltip:wn}))};n.Tooltip=Y,n.TooltipContent=I,n.TooltipContext=D,n.TooltipPortal=X,n.default=Y,n.delayTime=U,n.isMouseRightClick=q,n.overHeight=R,n.overWidth=B,n.usePortalTooltip=H,n.useTooltipContext=function(){return t.useContext(O)},Object.defineProperty(n,"__esModule",{value:!0})}));