monday-ui-react-core/dist/esm/src/components/Tooltip/Tooltip.js

Official monday.com UI resources for application development in React.js

import{inherits as e,createClass as o,defineProperty as t,classCallCheck as i,callSuper as n}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{isFunction as s,camelCase as r}from"lodash-es";import a from"classnames";import l,{isValidElement as p,PureComponent as d}from"react";import m from"../Dialog/Dialog.js";import{HideShowEvent as h,AnimationType as c,JustifyType as g}from"../../constants/dialog.js";import"../../constants/sizes.js";import{DialogPosition as u}from"../../constants/positions.js";import{TooltipTheme as T,TooltipArrowPosition as y}from"./TooltipConstants.js";import{getStyle as w}from"../../helpers/typesciptCssModulesHelper.js";import f from"./Tooltip.module.scss.js";import{getTestId as S,ComponentDefaultTestId as D}from"../../tests/testIds.js";import v from"../Icon/Icon.js";import C from"../Flex/Flex.js";import{warnDeprecated as E}from"../../utils/warn-deprecated.js";var j={lastTooltipHideTS:null,openTooltipsCount:0},b=function(h){function g(e){var o;return i(this,g),(o=n(this,g,[e])).renderTooltipContent=o.renderTooltipContent.bind(o),o.getShowDelay=o.getShowDelay.bind(o),o.onTooltipShow=o.onTooltipShow.bind(o),o.onTooltipHide=o.onTooltipHide.bind(o),o.wasShown=!1,E({component:"Tooltip",condition:o.props.theme&&!["primary","dark"].includes(o.props.theme),message:"'theme' prop will be able to get only 'dark' and 'primary' in the upcoming major version. Please consider using these themes."}),E({component:"Tooltip",condition:o.props.position&&!["top","left","right","bottom"].includes(o.props.position),message:"'position' prop will be able to get only 'top', 'bottom', 'left', and 'right' values in the upcoming major version. Please consider using these positions."}),o}return e(g,d),o(g,[{key:"getContainer",value:function(){return document.getElementById("tooltips-container")||document.querySelector("body")}},{key:"renderTooltipContent",value:function(){var e,o=this.props,i=o.theme,n=o.content,d=o.paddingSize,m=o.className,h=o.style,c=o.withMaxWidth,g=o.title,u=o.image,T=o.icon;return n?(s(n)?e=n():(p(n)||"string"==typeof n&&n||Array.isArray(n)&&n.length>0)&&(e=n),e?g||u?l.createElement("div",{style:h,className:a(f.tooltip,f.tooltipWithContent,w(f,r(i)),t({},f.withMaxWidth,c),m)},u&&l.createElement("img",{className:f.image,src:u,alt:""}),l.createElement("div",{className:a(f.content,w(f,r("padding-size-"+d)))},g&&l.createElement(C,{gap:C.gaps.XS},T&&l.createElement(v,{iconSize:"20",icon:T,clickable:!1}),l.createElement("div",{className:f.title},g)),e)):l.createElement("div",{style:h,className:a(f.tooltip,w(f,r(i)),w(f,r("padding-size-"+d)),t({},f.withMaxWidth,c),m)},e):null):null}},{key:"onTooltipShow",value:function(){if(!this.wasShown){var e=this.props.onTooltipShow;j.openTooltipsCount++,this.wasShown=!0,e&&e()}}},{key:"onTooltipHide",value:function(){if(this.wasShown){var e=this.props.onTooltipHide;j.lastTooltipHideTS=Date.now(),j.openTooltipsCount--,this.wasShown=!1,e&&e()}}},{key:"getTimeSinceLastTooltip",value:function(){return j.openTooltipsCount>0?0:j.lastTooltipHideTS?Date.now()-j.lastTooltipHideTS:1/0}},{key:"getShowDelay",value:function(){var e=this.props,o=e.showDelay,t=e.immediateShowDelay,i=this.getTimeSinceLastTooltip();return(0===t||t)&&1500>i?{showDelay:t,preventAnimation:!0}:{showDelay:o,preventAnimation:!1}}},{key:"render",value:function(){var e=this.props,o=e.justify,t=e.children,i=e.getContainer,n=e.theme,s=e.paddingSize,p=e.tip,d=e.arrowClassName,h=e.id,g=e["data-testid"];if(!t&&!e.forceRenderWithoutChildren)return null;if(e.withoutDialog)return this.renderTooltipContent();var u=this.renderTooltipContent,T=Object.assign(Object.assign({},this.props),{"data-testid":g||S(D.TOOLTIP,h),startingEdge:o,tooltip:p,content:u,getContainer:i||this.getContainer,tooltipClassName:a(f.arrow,w(f,n),w(f,r("padding-size-"+s)),d),animationType:c.EXPAND,onDialogDidHide:this.onTooltipHide,onDialogDidShow:this.onTooltipShow,getDynamicShowDelay:this.getShowDelay});return l.createElement(m,Object.assign({},T),t)}}])}();b.positions=u,b.hideShowTriggers=h,b.themes=T,b.animationTypes=c,b.justifyTypes=g,b.arrowPositions=y,b.defaultProps={arrowPosition:y.CENTER,moveBy:{main:4,secondary:0},theme:T.Dark,position:b.positions.TOP,justify:b.justifyTypes.CENTER,hideDelay:0,showDelay:300,disableDialogSlide:!0,animationType:c.EXPAND,withoutDialog:!1,containerSelector:"#tooltips-container",tip:!0,hideWhenReferenceHidden:!1,modifiers:[],showTrigger:b.hideShowTriggers.MOUSE_ENTER,hideTrigger:b.hideShowTriggers.MOUSE_LEAVE,showOnDialogEnter:!1,referenceWrapperClassName:"",addKeyboardHideShowTriggersByDefault:!1,open:!1};export{b as default};
//# sourceMappingURL=Tooltip.js.map