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