react-tooltip-z/build/index.js

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

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