azure-devops-ui
Version:
React components for building web UI in Azure DevOps
1 lines • 5.49 kB
JavaScript
import{__assign,__extends}from"tslib";import"../../CommonImports";import"../../Core/core.css";import"./Dialog.css";import*as React from"react";import{EventManagement}from"../../Core/EventManagement";import{announce}from"../../Core/Util/Accessibility";import{ScreenContext,ScreenSize}from"../../Core/Util/Screen";import{format}from"../../Core/Util/String";import{Callout,ContentJustification,ContentLocation,ContentOrientation,ContentSize}from"../../Callout";import{FocusZoneKeyStroke}from"../../FocusZone";import{Icon}from"../../Icon";import{Observer}from"../../Observer";import*as Resources from"../../Resources.Layer";import{Spinner,SpinnerSize}from"../../Spinner";import{Spacing,Surface,SurfaceContext}from"../../Surface";import{css,KeyCode}from"../../Util";var MIN_DIALOG_Size=320,DIALOG_RESIZE_INCREMENT=2,CustomDialog=function(t){function e(e){var o=t.call(this,e)||this;return o.events=new EventManagement,o.contentRef=React.createRef(),o.onGripperKeyDown=function(e){if(o.contentRef.current){var t=o.contentRef.current.getBoundingClientRect();switch(o.currentHeight=t.height,o.currentWidth=t.width,e.keyCode){case KeyCode.leftArrow:o.setState({width:Math.max(o.currentWidth-DIALOG_RESIZE_INCREMENT,MIN_DIALOG_Size)});break;case KeyCode.rightArrow:o.setState({width:o.currentWidth+DIALOG_RESIZE_INCREMENT});break;case KeyCode.upArrow:o.setState({height:Math.max(o.currentHeight-DIALOG_RESIZE_INCREMENT,MIN_DIALOG_Size)});break;case KeyCode.downArrow:o.setState({height:o.currentHeight+DIALOG_RESIZE_INCREMENT});break;default:return}e.preventDefault(),e.stopPropagation(),announce(format(Resources.SizeFormat,o.state.height||o.currentHeight,o.state.width||o.currentWidth))}},o.onGripperMouseDown=function(e){o.onGripperDown(e,e.clientX,e.clientY),o.attachMouseWindowEvents()},o.onGripperDown=function(e,t,n){o.contentRef&&(e.preventDefault(),e.stopPropagation(),o.anchorX=t,o.anchorY=n,o.contentRef.current)&&(e=o.contentRef.current.getBoundingClientRect(),o.currentHeight=e.height,o.currentWidth=e.width)},o.onGripperMouseMove=function(e){o.handleDragEvent(e,e.clientX,e.clientY)},o.onGripperMouseUp=function(e){o.detachMouseWindowEvents(),announce(format(Resources.SizeFormat,o.state.height,o.state.width))},o.onKeyDown=function(e){var t=o.props,n=t.enterPrimary,t=t.primaryButtonProps;n&&t&&e.which===KeyCode.enter&&!e.defaultPrevented&&(null!=(n=t.onClick)&&n.call(t,e),e.preventDefault())},o.state={},o}return __extends(e,t),e.prototype.render=function(){var n=this,e=this.props,o=e.ariaDescribedBy,i=e.ariaLabel,r=e.ariaLabelledBy,a=e.blurDismiss,s=e.calloutClassName,c=e.className,l=e.calloutContentClassName,u=e.contentJustification,m=e.contentLocation,p=e.defaultActiveElement,d=e.defaultFocusableElementAriaLabel,h=e.escDismiss,f=e.id,v=e.lightDismiss,g=e.onDismiss,C=e.overlay,S=e.modal,w=e.resizable,E=e.role,e=e.contentSize,D=void 0===e?ContentSize.Medium:e;return React.createElement(Observer,{size:this.context.size},function(e){var t=e.size===ScreenSize.xsmall;return React.createElement(Callout,{ariaDescribedBy:o,ariaLabel:i,ariaLabelledBy:r,blurDismiss:a,className:css(s,"bolt-dialog-callout"),contentClassName:css(l,"bolt-dialog-callout-content relative scroll-auto",t&&"bolt-dialog-mobile flex-grow"),contentJustification:u,contentLocation:m,contentOrientation:ContentOrientation.Column,contentRef:n.contentRef,contentShadow:!0,contentSize:t?void 0:D,escDismiss:h,focuszoneProps:{circularNavigation:!0,defaultActiveElement:p||".bolt-dialog-focus-element",focusOnMount:!0,handleTabKey:!0,includeDefaults:!0,selectInputTextOnFocus:n.props.selectInputTextOnFocus,postprocessKeyStroke:function(e){return e.which===KeyCode.tab&&e.preventDefault(),FocusZoneKeyStroke.IgnoreParents}},id:f,lightDismiss:v,modal:S,onDismiss:g,role:E,height:n.state.height,width:n.state.width,onKeyDown:n.onKeyDown},React.createElement(SurfaceContext.Consumer,null,function(e){return React.createElement(Surface,__assign({},e,{spacing:Spacing.default}),React.createElement("div",{className:css(c,"bolt-dialog-root flex-column flex-grow scroll-hidden")},React.createElement("div",{"aria-label":d,className:"bolt-dialog-focus-element no-outline",tabIndex:-1,role:d?"heading":void 0,"aria-level":d?1:void 0}),n.props.children,!t&&w&&React.createElement(Icon,{ariaLabel:Resources.Resize,iconName:"GripperResize",onMouseDown:n.onGripperMouseDown,onKeyDown:n.onGripperKeyDown,tabIndex:0,wrapperClass:"bolt-dialog-resize-icon"}),C&&React.createElement("div",{className:"absolute-fill bolt-dialog-overlay flex-column justify-center"},React.createElement(Spinner,{size:SpinnerSize.large,ariaLabel:C.spinnerAriaLabel,ariaLive:"assertive",label:C.spinnerLabel}))))}))})},e.prototype.handleDragEvent=function(e,t,n){t=Math.max((this.currentWidth||0)+2*(t-this.anchorX),MIN_DIALOG_Size),n=Math.max((this.currentHeight||0)+2*(n-this.anchorY),MIN_DIALOG_Size);this.setState({width:t,height:n})},e.prototype.attachMouseWindowEvents=function(){this.events.addEventListener(window,"mousemove",this.onGripperMouseMove),this.events.addEventListener(window,"mouseup",this.onGripperMouseUp)},e.prototype.detachMouseWindowEvents=function(){this.events.removeEventListener(window,"mousemove",this.onGripperMouseMove),this.events.removeEventListener(window,"mouseup",this.onGripperMouseUp)},e.defaultProps={contentJustification:ContentJustification.Center,contentLocation:ContentLocation.Center,escDismiss:!0,lightDismiss:!0,enterPrimary:!0},e.contextType=ScreenContext,e}(React.Component);export{CustomDialog};