react-tooltip-z/build/index.esm.js

Lightweight, customizable React tooltip component with hover, click, focus and manual trigger support.

import n,{useState as t,useEffect as o,useRef as e,useLayoutEffect as r,createContext as i,useContext as a,Children as l,isValidElement as c,cloneElement as u,useCallback as s,forwardRef as p,useImperativeHandle as d}from"react";import{createPortal as f}from"react-dom";import{CmUtils as m,HtmlUtils as h,Hooks as v}from"@delpi/common";import g,{keyframes as w,css as b}from"styled-components";var x=function(){return x=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},x.apply(this,arguments)};function y(n,t){return Object.defineProperty?Object.defineProperty(n,"raw",{value:t}):n.raw=t,n}function C(t){var o=t.children;return"function"==typeof o?n.createElement(n.Fragment,null,o()):n.createElement(n.Fragment,null,o)}"function"==typeof SuppressedError&&SuppressedError;function T(){return window.innerWidth+window.pageXOffset}function k(){return window.innerHeight+window.pageYOffset}function P(n){var t,o=n.placement,e=n.top,r=n.right,i=n.bottom,a=n.left,l=n.arrowCentered,c=n.tooltipEl,u=n.targetRect,s=n.scrollX,p=n.scrollY,d=function(n,t,o,e,r){return t?"top":o?"right":e?"bottom":r?"left":n||"top"}(o,e,r,i,a),f=u.top+p,m=u.bottom+p,h=u.left+s,v=u.right+s,g=u.width,w=u.height,b=!("left"===d||"right"===d),x=b?h:f,y=b?v:m,C=b?g:w,P=b?c.clientHeight:c.clientWidth;function O(){switch(d){case"top":return f-c.clientHeight-8;case"bottom":return m+8;case"left":return h-c.clientWidth-10;case"right":return v+10}}var E,S=O(),z=x,N=b?k():T();return S<0&&("top"===d&&(d="bottom"),"left"===d&&(d="right"),S=O()),S+P>N&&("bottom"===d&&(d="top"),"right"===d&&(d="left"),S=O()),t=function(n,t,o,e,r,i,a,l){void 0===l&&(l=30);var c="horizontal"===a?T():k(),u="horizontal"===a?5:4,s="horizontal"===a?o.clientWidth:o.clientHeight;if(n){l="horizontal"===a?50:47;var p=s/2,d=r+e/2,f=0;return d+p>c?(t=c-s,f=s-(c-i+e/2)-u):d-p<0?(t=0,f=Math.floor(e*l/100)-u):(t=d-p,f=Math.floor(s*l/100)-u),[t,f]}t+s>c?(t=c-s,l=50):s<e&&(e=s);var m=Math.floor(e*l/100)+r-t;return m>=6&&(m-=1),[t,m]}(Boolean(l),z,c,C,x,y,b?"horizontal":"vertical"),z=t[0],E=t[1],{clientTop:b?S:z,clientLeft:b?z:S,posPlacement:d,arrowPosition:E}}var O,E,S,z,N,L,W,M,j,R,F,H,I,B,X,Y,q,A="#282727",D=-12,$={fade:[w(O||(O=y(["\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"]))),w(E||(E=y(["\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:[w(S||(S=y(["\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"]))),w(z||(z=y(["\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"])))]},G=g.div(N||(N=y(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"],["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"]))),J=g(G).withConfig({shouldForwardProp:function(n){return!["top","left","backgroundColor","textColor","animation","delay","constrainWidth","arrowPosition","pos"].includes(n)}})(F||(F=y(["\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: 9999;\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: 9999;\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||A}),(function(n){return n.textColor||"#ffffff"}),(function(n){return"number"!=typeof n.top?"hidden":"visible"}),(function(n){var t=n.animation;return n.top?$[t][0]:$[t][1]}),(function(n){return n.delay}),(function(n){return n.delay}),(function(n){return n.constrainWidth?"220px":"none"}),(function(n){var t=n.pos,o=n.backgroundColor;return t&&b(L||(L=y(["\n        border-",": 8px solid ",";\n      "],["\n        border-",": 8px solid ",";\n      "])),t,o||A)}),(function(n){var t=n.pos,o=n.arrowPosition;return"bottom"===t&&b(W||(W=y(["\n        top: ","px;\n        left: ","px;\n      "],["\n        top: ","px;\n        left: ","px;\n      "])),D,o)}),(function(n){var t=n.pos,o=n.arrowPosition;return"top"===t&&b(M||(M=y(["\n        bottom: ","px;\n        left: ","px;\n      "],["\n        bottom: ","px;\n        left: ","px;\n      "])),D,o)}),(function(n){var t=n.pos,o=n.arrowPosition;return"right"===t&&b(j||(j=y(["\n        top: ","px;\n        left: ","px;\n      "],["\n        top: ","px;\n        left: ","px;\n      "])),o,D)}),(function(n){var t=n.pos,o=n.arrowPosition;return"left"===t&&b(R||(R=y(["\n        top: ","px;\n        right: ","px;\n      "],["\n        top: ","px;\n        right: ","px;\n      "])),o,D)}));g.div.withConfig({shouldForwardProp:function(n){return!["pos","arrowPosition","backgroundColor"].includes(n)}})(q||(q=y(["\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&&b(H||(H=y(["\n      border-",": 8px solid ",";\n    "],["\n      border-",": 8px solid ",";\n    "])),t,o||A)}),(function(n){var t=n.pos,o=n.arrowPosition;return"bottom"===t&&b(I||(I=y(["\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&&b(B||(B=y(["\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&&b(X||(X=y(["\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&&b(Y||(Y=y(["\n      top: ","px;\n      right: -10px;\n    "],["\n      top: ","px;\n      right: -10px;\n    "])),o)}));function K(i){var a,l=i.tooltipId,c=i.isShow,u=i.content,s=i.tooltipClassName,p=i.constrainWidth,d=i.delay,v=i.animation,g=i.backgroundColor,w=i.textColor,b=function(){var n=t(),e=n[0],r=n[1];return o((function(){var n=window.document.body.querySelector("#portal-tooltip");n||((n=window.document.createElement("div")).setAttribute("id","portal-tooltip"),window.document.body.append(n)),r(n)}),[]),e}(),y=function(n){var o=n.isShow,i=n.content,a=n.target,l=n.resizeSize,c=n.setTargetTooltip,u=e(null),s=t({clientTop:null,clientLeft:null,posPlacement:null,arrowPosition:null}),p=s[0],d=s[1];return r((function(){var t=u.current;if(null==c||c(t),o&&!m.isNil(i)&&t&&a){var e=a.getBoundingClientRect(),r=P(x(x({},n),{tooltipEl:t,targetRect:e,scrollX:window.pageXOffset,scrollY:window.pageYOffset}));d(r)}else d({clientTop:null,clientLeft:null,posPlacement:null,arrowPosition:null})}),[o,i,a,l]),{refTooltip:u,position:p}}(i),T=y.refTooltip,k=y.position;return b&&c?f(n.createElement(J,{id:l,ref:T,className:h.joinClass([s,"ldk-placement-".concat(k.posPlacement)]),top:k.clientTop,left:k.clientLeft,pos:k.posPlacement,arrowPosition:k.arrowPosition,constrainWidth:p,delay:(a=d,/^\d+$/.test("".concat(a||250))?"".concat(a,"ms"):a),animation:v,backgroundColor:g,textColor:w},n.createElement("div",{className:"ldk-icon"}),n.createElement(G,{className:"ldk-content"},n.createElement(C,null,u))),b):null}var Q=i(null),U=function(o){var r=o.children,i=t({content:null,target:null,open:!1,placement:"top",delay:250,backgroundColor:"#282727"}),a=i[0],l=i[1],c=e();return n.createElement(Q.Provider,{value:{show:function(n,t,o){var e=o||{},r=e.placement,i=void 0===r?"top":r,a=e.delay,u=void 0===a?0:a,s=e.backgroundColor,p=void 0===s?"black":s;c.current&&clearTimeout(c.current),u>0?c.current=window.setTimeout((function(){l({content:n,target:t,open:!0,placement:i,delay:u,backgroundColor:p})}),u):l({content:n,target:t,open:!0,placement:i,delay:u,backgroundColor:p})},hide:function(){c.current&&clearTimeout(c.current),l((function(n){return x(x({},n),{open:!1})}))}}},r,a.open&&a.target&&n.createElement(K,{content:a.content,target:a.target,placement:a.placement,backgroundColor:a.backgroundColor}))},V=function(){var n=a(Q);if(!n)throw new Error("useTooltip must be used inside TooltipProvider");return n};function Z(t){var o=t.children,e=t.tagName,r=t.appendProps;if(e){var i=e;return n.createElement(i,x({},r(0)),o)}return n.createElement(n.Fragment,null,l.map(o,(function(n,t){if(!c(n))return n;var o=r(t),e=x(x({},n.props),o);return u(n,e)})))}function _(n,t,o){return function(e,r){null==n||n(e),t()&&o(e,r)}}function nn(n){var t=n.children,o=n.trigger,e=n.isHoverFocus,r=n.itemsRef,i=n.statusTooltip,a=n.setStatusTooltip,c=n.hideTooltip,u=n.onOpenChange,s=n.onClick,p=n.onMouseEnter,d=n.onMouseLeave,f=n.className,m=n.style,h=n.restProps,v=l.count(t);function g(n,t){var o=function(n){var t=n.idx,o=n.childrenCount,e=n.status,r=n.currentTarget,i=n.eventTarget;return-1===t?"noop":o>1?e.target===r&&e.show?"toggle-off":"show":e.show&&e.target&&i instanceof Node&&e.target.contains(i)?"noop":"show"}({idx:t,childrenCount:v,status:i,currentTarget:r.current[t],eventTarget:n.target});if("noop"!==o){if(n.preventDefault(),n.stopPropagation(),"toggle-off"===o)return c(),a({show:!1,target:r.current[t]}),void(null==u||u(!1));"show"===o&&(a({show:!0,target:r.current[t]}),null==u||u(!0))}}var w=_(s,(function(){return"click"===o}),(function(n,t){return g(n,t)})),b=_(p,(function(){return e}),(function(n,t){return g(n,t)})),y=_(d,(function(){return e}),(function(){c(),null==u||u(!1)}));return{appendProps:function(n){return x({onMouseEnter:function(t){return b(t,n)},onMouseLeave:y,onClick:function(t){return w(t,n)},ref:function(t){r.current[n]=t},className:f,style:m},h)}}}function tn(n){var t=n.isOpen,e=n.isManual,r=n.tooltipId,i=n.mouseWheel,a=n.closeOnScroll,l=n.target,c=n.hideTooltip,u=s((function(){a&&c()}),[a,c]),p=s((function(n){var t,o;void 0===n&&(n=window.event);try{if(e||(null===(o=null===(t=null==n?void 0:n.target)||void 0===t?void 0:t.closest)||void 0===o?void 0:o.call(t,"#".concat(r))))return}catch(n){}(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})(n)||!l||h.elContains(l,n.target)||c()}),[e,r,l,c]);o((function(){if(t)return document.addEventListener("mousedown",p),document.addEventListener("touchstart",p),document.addEventListener("scroll",u),i&&document.addEventListener("wheel",u),function(){document.removeEventListener("mousedown",p),document.removeEventListener("touchstart",p),document.removeEventListener("scroll",u),i&&document.removeEventListener("wheel",u)}}),[t,p,u,i])}var on=p((function(r,i){var a=r.children,l=r.tagName,c=r.className,u=r.style,p=r.tooltipClassName,f=r.content,h=r.placement,g=void 0===h?"top":h,w=r.trigger,b=void 0===w?"hover":w,y=r.delay,C=void 0===y?250:y,T=r.animation,k=void 0===T?"fade":T,P=r.backgroundColor,O=r.textColor,E=r.constrainWidth,S=void 0===E||E,z=r.onClick,N=r.onMouseEnter,L=r.onMouseLeave,W=r.onOpenChange,M=r.mouseWheel,j=void 0===M||M,R=r.open,F=r.closeOnResize,H=void 0===F||F,I=r.closeOnScroll,B=r.top,X=r.bottom,Y=r.right,q=r.left,A=r.arrowCentered,D=function(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}(r,["children","tagName","className","style","tooltipClassName","content","placement","trigger","delay","animation","backgroundColor","textColor","constrainWidth","onClick","onMouseEnter","onMouseLeave","onOpenChange","mouseWheel","open","closeOnResize","closeOnScroll","top","bottom","right","left","arrowCentered"]),$=t(m.idv4Time("dk-ttip"))[0],G=t(null);G[0];var J=G[1],Q=e([]),U="manual"===b,V=["hover","focus"].includes(b),_=function(n){var o=n.onOpenChange,e=t({}),r=e[0],i=e[1],a=t(null),l=a[0],c=a[1],u=s((function(n,t){void 0!==n&&c(n),i((function(n){return x(x({},n),{target:null!=t?t:n.target,show:!0})})),null==o||o(!0)}),[o]),p=s((function(){c(null),i((function(n){return x(x({},n),{show:!1})})),null==o||o(!1)}),[o]);return{statusTooltip:r,setStatusTooltip:i,dynamicContent:l,showTooltip:u,hideTooltip:p}}({onOpenChange:W}),on=_.statusTooltip,en=_.setStatusTooltip,rn=_.dynamicContent,an=_.showTooltip,ln=_.hideTooltip;!function(n){var t=n.open,e=n.itemsRef,r=n.statusTooltip,i=n.setStatusTooltip;o((function(){var n,o;if(void 0!==t){var a=null!==(o=null!==(n=r.target)&&void 0!==n?n:e.current[0])&&void 0!==o?o:null;r.show!==t&&i((function(n){return x(x({},n),{target:a,show:t})}))}}),[t,r.show,r.target])}({open:R,itemsRef:Q,statusTooltip:on,setStatusTooltip:en});var cn=function(n){var t=n.closeOnResize,e=n.hideTooltip,r=v.useWindowSize();return o((function(){t&&e()}),[r]),r}({closeOnResize:H,hideTooltip:ln});tn({isOpen:on.show,isManual:U,tooltipId:$,mouseWheel:j,closeOnScroll:I,target:on.target,hideTooltip:ln});var un=nn({children:a,trigger:b,isHoverFocus:V,itemsRef:Q,statusTooltip:on,setStatusTooltip:en,hideTooltip:ln,onOpenChange:W,onClick:z,onMouseEnter:N,onMouseLeave:L,className:c,style:u,restProps:D}).appendProps;return d(i,(function(){return{show:function(n){U&&an(n,Q.current[0])},hide:function(){U&&ln()},isOpen:function(){return Boolean(on.show)}}})),n.createElement(n.Fragment,null,n.createElement(Z,{tagName:l,appendProps:un},a),n.createElement(K,{tooltipId:$,isShow:Boolean(on.show),tooltipClassName:p,content:rn||f,placement:g,target:on.target,constrainWidth:S,resizeSize:cn,delay:C,animation:k,top:B,bottom:X,right:Y,left:q,backgroundColor:P,textColor:O,arrowCentered:A,setTargetTooltip:J}))}));export{on as Tooltip,U as TooltipProvider,on as default,V as useTooltip};
//# sourceMappingURL=index.esm.js.map