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