monday-ui-react-core/dist/mocked_classnames_esm/src/components/Dialog/Dialog.js

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

import{inherits as e,createClass as o,toConsumableArray as n,classCallCheck as t,callSuper as i}from"../../../_virtual/_rollupPluginBabelHelpers.js";import s from"classnames";import a,{PureComponent as r}from"react";import{createPortal as l}from"react-dom";import{Manager as u,Reference as d,Popper as h}from"react-popper";import{DialogPosition as c}from"../../constants/positions.js";import{isFunction as p}from"lodash-es";import{backwardCompatibilityForProperties as m}from"../../helpers/backwardCompatibilityForProperties.js";import{NOOP as g,convertToArray as f,chainFunctions as v}from"../../utils/function-utils.js";import{DialogContent as E}from"./DialogContent/DialogContent.js";import{isInsideClass as D}from"../../utils/dom-utils.js";import{Refable as y}from"../Refable/Refable.js";import{HideShowEvent as w,AnimationType as C}from"../../constants/dialog.js";import T from"./Dialog.module.scss.js";import{getTestId as k,ComponentDefaultTestId as S}from"../../tests/testIds.js";import{isClient as O}from"../../utils/ssr-utils.js";var b=function(c){function g(e){var o;return t(this,g),(o=i(this,g,[e])).state={shouldUseDerivedStateFromProps:e.useDerivedStateFromProps,isOpen:e.shouldShowOnMount},o.onMouseEnter=o.onMouseEnter.bind(o),o.onMouseLeave=o.onMouseLeave.bind(o),o.onMouseDown=o.onMouseDown.bind(o),o.onClick=o.onClick.bind(o),o.onFocus=o.onFocus.bind(o),o.onBlur=o.onBlur.bind(o),o.isShown=o.isShown.bind(o),o.onEsc=o.onEsc.bind(o),o.onClickOutside=o.onClickOutside.bind(o),o.onDialogEnter=o.onDialogEnter.bind(o),o.onDialogLeave=o.onDialogLeave.bind(o),o.getContainer=o.getContainer.bind(o),o.onContentClick=o.onContentClick.bind(o),o.onKeyDown=o.onKeyDown.bind(o),o.closeDialogOnEscape=o.closeDialogOnEscape.bind(o),o.onContextMenu=o.onContextMenu.bind(o),o.hideTimeout=null,o.showTimeout=null,o}return e(g,r),o(g,[{key:"closeDialogOnEscape",value:function(e){if(this.state.isOpen)switch(e.key){case"Escape":this.hideDialogIfNeeded(e,w.ESCAPE_KEY);break;case"Tab":this.handleEvent(w.TAB_KEY,e.target,e);break;case"Enter":this.handleEvent(w.ENTER,e.target,e)}}},{key:"componentDidMount",value:function(){var e=this.props,o=e.onDialogDidShow,n=m([e.shouldCallbackOnMount,e.shoudlCallbackOnMount],!1),t=this.state.isOpen;O()&&document.addEventListener("keyup",this.closeDialogOnEscape),n&&t&&o&&o()}},{key:"componentWillUnmount",value:function(){O()&&document.removeEventListener("keyup",this.closeDialogOnEscape)}},{key:"getContainer",value:function(){var e=this.props.containerSelector;if(!e)return document.body;var o=document.querySelector(e);return o&&o instanceof Element?o:document.body}},{key:"showDialog",value:function(e,o){var n=this,t=this.props,i=t.instantShowAndHide,s=t.getDynamicShowDelay,a=t.showDelay,r=(arguments.length>2&&void 0!==arguments[2]?arguments[2]:{}).preventAnimation;if(s){var l=s();a=l.showDelay||0,r=r||l.preventAnimation}i?(this.onShowDialog(e,o),this.setState({isOpen:!0,preventAnimation:r}),this.showTimeout=null):this.showTimeout=setTimeout((function(){n.onShowDialog(e,o),n.showTimeout=null,n.setState({isOpen:!0,preventAnimation:r})}),a)}},{key:"onShowDialog",value:function(e,o){this.isShown()||(0,this.props.onDialogDidShow)(e,o)}},{key:"showDialogIfNeeded",value:function(e,o){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};this.props.disable||(this.hideTimeout&&(clearTimeout(this.hideTimeout),this.hideTimeout=null),this.showTimeout||this.showDialog(e,o,n))}},{key:"hideDialog",value:function(e,o){var n=this,t=this.props,i=t.hideDelay;t.instantShowAndHide?(this.onHideDialog(e,o),this.setState({isOpen:!1}),this.hideTimeout=null):this.hideTimeout=setTimeout((function(){n.onHideDialog(e,o),n.setState({isOpen:!1}),n.hideTimeout=null}),i)}},{key:"onHideDialog",value:function(e,o){var n=this.props.onDialogDidHide;n&&n(e,o)}},{key:"hideDialogIfNeeded",value:function(e,o){this.showTimeout&&(clearTimeout(this.showTimeout),this.showTimeout=null),this.hideTimeout||this.hideDialog(e,o)}},{key:"handleEvent",value:function(e,o,n){var t=this.props,i=t.showTriggerIgnoreClass,s=t.hideTriggerIgnoreClass;return!this.isShowTrigger(e)||this.isShown()||D(o,i)?this.isHideTrigger(e)&&!D(o,s)?this.hideDialogIfNeeded(n,e):void 0:this.showDialogIfNeeded(n,e)}},{key:"isShown",value:function(){return this.state.isOpen||this.props.open}},{key:"isShowTrigger",value:function(e){var o=this.props,n=o.addKeyboardHideShowTriggersByDefault,t=f(o.showTrigger);return!(!n||e!==w.FOCUS||-1>=t.indexOf(w.MOUSE_ENTER))||t.indexOf(e)>-1}},{key:"isHideTrigger",value:function(e){var o=this.props,n=o.addKeyboardHideShowTriggersByDefault,t=f(o.hideTrigger);return!(!n||e!==w.BLUR||-1>=t.indexOf(w.MOUSE_LEAVE))||t.indexOf(e)>-1}},{key:"onMouseEnter",value:function(e){this.handleEvent(w.MOUSE_ENTER,e.target,e)}},{key:"onMouseLeave",value:function(e){this.handleEvent(w.MOUSE_LEAVE,e.target,e)}},{key:"onClick",value:function(e){e.button||this.handleEvent(w.CLICK,e.target,e)}},{key:"onKeyDown",value:function(e){"Enter"===e.key&&this.handleEvent(w.ENTER,e.target,e),"Tab"===e.key&&this.handleEvent(w.TAB_KEY,e.target,e)}},{key:"onMouseDown",value:function(e){e.button||this.handleEvent(w.MOUSE_DOWN,e.target,e)}},{key:"onFocus",value:function(e){this.handleEvent(w.FOCUS,e.target,e)}},{key:"onBlur",value:function(e){this.handleEvent(w.BLUR,e.relatedTarget,e)}},{key:"onEsc",value:function(e){this.handleEvent(w.ESCAPE_KEY,e.target,e)}},{key:"onContextMenu",value:function(e){var o=this.isShown();(this.isShowTrigger(w.CONTEXT_MENU)&&!o||this.isHideTrigger(w.CONTEXT_MENU)&&o)&&e.preventDefault(),this.handleEvent(w.CONTEXT_MENU,e.target,e)}},{key:"onClickOutside",value:function(e){var o=this.props.onClickOutside;this.handleEvent(w.CLICK_OUTSIDE,e.target,e),o(e)}},{key:"onDialogEnter",value:function(e){this.props.showOnDialogEnter&&this.showDialogIfNeeded(e,"DialogEnter")}},{key:"onDialogLeave",value:function(e){this.props.showOnDialogEnter&&this.hideDialogIfNeeded(e,"DialogLeave")}},{key:"onContentClick",value:function(e){var o=this.props.onContentClick;this.handleEvent(w.CONTENT_CLICK,e.target,e),o(e)}},{key:"render",value:function(){var e=this,o=this.props,t=o.wrapperClassName,i=o.content,r=o.startingEdge,c=o.children,m=o.preventAnimationOnMount,g=o.animationType,f=o.position,v=o.showDelay,D=o.moveBy,C=o.modifiers,b=o.tooltip,N=o.tooltipClassName,L=o.referenceWrapperClassName,H=o.zIndex,A=o.hideWhenReferenceHidden,I=o.disableContainerScroll,U=o.containerSelector,_=this.state.preventAnimation,K=o["data-testid"]||k(S.DIALOG,o.id),x=!this.isHideTrigger(w.CLICK_OUTSIDE),B=m||_?void 0:g,R=p(i)?i():i;return R?a.createElement(u,null,a.createElement(d,null,(function(o){var n=o.ref;return a.createElement(y,{className:s(L),ref:n,onBlur:M("onBlur",e,e.props),onKeyDown:M("onKeyDown",e,e.props),onClick:M("onClick",e,e.props),onFocus:M("onFocus",e,e.props),onMouseDown:M("onMouseDown",e,e.props),onMouseEnter:M("onMouseEnter",e,e.props),onMouseLeave:M("onMouseLeave",e,e.props),onContextMenu:M("onContextMenu",e,e.props)},c)})),O()&&l(a.createElement(h,{placement:f,modifiers:[{name:"offset",options:{offset:[D.secondary,D.main]}},{name:"zIndex",enabled:!0,phase:"write",fn:function(e){var o=e.state;return H&&(o.styles.popper.zIndex=H+""),o}},{name:"rotator",enabled:!0,phase:"write",fn:function(e){var o=e.state;return o.styles.arrow?(o.styles.arrow.transform="".concat(o.styles.arrow.transform," rotate(45deg)"),o):o}}].concat(n(C))},(function(o){var n=o.placement,i=o.style,l=o.ref,u=o.arrowProps,d=o.isReferenceHidden;if(!e.isShown()&&n)return null;if(A&&d){var h=new CustomEvent("onReferenceHidden");e.hideDialog(h,"onReferenceHidden")}return a.createElement(E,{"data-testid":K,isReferenceHidden:A&&d,onMouseEnter:e.onDialogEnter,onMouseLeave:e.onDialogLeave,disableOnClickOutside:x,onClickOutside:e.onClickOutside,onContextMenu:e.onContextMenu,onEsc:e.onEsc,animationType:B,position:n,wrapperClassName:t,startingEdge:r,isOpen:e.isShown(),showDelay:v,styleObject:i,ref:l,onClick:e.onContentClick,hasTooltip:!!b,containerSelector:U,disableContainerScroll:I},R,b&&a.createElement("div",{style:u.style,ref:u.ref,className:s(T.arrow,N),"data-placement":n}))})),this.getContainer())):c}}],[{key:"getDerivedStateFromProps",value:function(e,o){return o.shouldUseDerivedStateFromProps?{isOpen:e.isOpen}:null}}])}();function M(e,o,n){return v([n[e],o[e]],!0)}b.hideShowTriggers=w,b.positions=c,b.animationTypes=C,b.defaultProps={position:"top",modifiers:[],moveBy:{main:0,secondary:0},showDelay:100,hideDelay:100,showTrigger:b.hideShowTriggers.MOUSE_ENTER,hideTrigger:b.hideShowTriggers.MOUSE_LEAVE,showOnDialogEnter:!1,shouldShowOnMount:!1,disable:!1,open:!1,animationType:b.animationTypes.EXPAND,preventAnimationOnMount:!1,containerSelector:"body",tooltip:!1,onDialogDidShow:g,onDialogDidHide:g,onClickOutside:g,onContentClick:g,useDerivedStateFromProps:!1,hideWhenReferenceHidden:!1,shoudlCallbackOnMount:!1,shouldCallbackOnMount:!1,instantShowAndHide:!1,addKeyboardHideShowTriggersByDefault:!1};export{b as default};
//# sourceMappingURL=Dialog.js.map