azure-devops-ui/Components/Panel/CustomPanel.min.js

React components for building web UI in Azure DevOps

import"../../CommonImports";import"../../Core/core.css";import"./Panel.css";import*as React from"react";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{Observer}from"../../Observer";import*as Resources from"../../Resources.Layer";import{Spacing,Surface,SurfaceContext}from"../../Surface";import{css,KeyCode,Mouse}from"../../Util";const defaultMinWidth=340;class CustomPanel extends React.Component{constructor(e){super(e),this.calloutContentRef=React.createRef(),this.resizeStartX=0,this.resizeStartWidth=0,this.onResizeMouseDown=e=>{var t;e.defaultPrevented||0!==e.button||(t=this.calloutContentRef.current)&&(this.resizeStartX=e.pageX,this.resizeStartWidth=t.getBoundingClientRect().width,t.classList.add("bolt-panel-resizing"),document.body.setAttribute("data-resize-active","true"),Mouse.setCapture(this.onResizeMouseCapture),e.preventDefault())},this.onResizeMouseCapture=e=>{var t=this.props["resizeOptions"],i=null!=(i=null==t?void 0:t.minWidth)?i:defaultMinWidth,n=null!=(n=null==t?void 0:t.maxWidth)?n:.9*window.innerWidth,a=this.resizeStartX-e.pageX,n=Math.floor(Math.min(n,Math.max(i,this.resizeStartWidth+a))),i=this.calloutContentRef.current;i&&(i.style.width=n+"px",i.style.maxWidth=n+"px"),"mouseup"===e.type&&(Mouse.releaseCapture(this.onResizeMouseCapture),document.body.removeAttribute("data-resize-active"),null!=i&&i.classList.remove("bolt-panel-resizing"),this.setState({panelWidth:n}),null!=(a=null==t?void 0:t.onWidthChanged))&&a.call(t,n)},this.onResizeKeyDown=t=>{var i,n=this.props["resizeOptions"];if(null!=n&&n.userResizable){var a=null!=(l=n.minWidth)?l:defaultMinWidth,o=Math.floor(null!=(l=n.maxWidth)?l:.9*window.innerWidth),s=t.shiftKey?50:10,l=this.calloutContentRef.current;if(l){var r=null!=(i=this.state.panelWidth)?i:Math.floor(l.getBoundingClientRect().width);let e;switch(t.which){case KeyCode.leftArrow:e=Math.min(o,r+s);break;case KeyCode.rightArrow:e=Math.max(a,r-s);break;case KeyCode.home:e=o;break;case KeyCode.end:e=a;break;default:return}t.preventDefault(),t.stopPropagation(),this.setState({panelWidth:e}),null!=(i=n.onWidthChanged)&&i.call(n,e)}}},this.defaultActiveElement=()=>{var e=this.props["defaultActiveElement"],e="function"==typeof e?e():e;if(e&&this.calloutContentRef.current){var t=this.calloutContentRef.current.querySelectorAll(e);if(t&&t.length)return e}return".bolt-panel-focus-element"},this.state={}}render(){const{ariaLabel:i,ariaLabelledBy:n,blurDismiss:a,calloutClassName:o,children:s,className:l,contentClassName:r,escDismiss:u,id:c,lightDismiss:d,modal:h,onDismiss:m,portalProps:p,resizeOptions:f,size:C=ContentSize.Medium}=this.props,v=null!=this.state.panelWidth;return React.createElement(Observer,{size:this.context.size},e=>{const t=e.size===ScreenSize.xsmall;return React.createElement(Callout,{ariaLabel:i,ariaLabelledBy:n,blurDismiss:a,className:css("bolt-panel",o),contentClassName:css(r,"bolt-panel-callout-content scroll-auto",t?"bolt-panel-fullscreen absolute-fill":"relative"),contentJustification:ContentJustification.Stretch,contentLocation:ContentLocation.End,contentOrientation:ContentOrientation.Column,contentRef:this.calloutContentRef,contentShadow:!0,contentSize:t||v?void 0:C,escDismiss:u,id:c,focuszoneProps:{circularNavigation:!0,defaultActiveElement:this.defaultActiveElement,focusOnMount:!0,handleTabKey:!0,includeDefaults:!0,postprocessKeyStroke:function(e){return e.which===KeyCode.tab&&e.preventDefault(),FocusZoneKeyStroke.IgnoreParents}},lightDismiss:d,modal:h,onDismiss:m,portalProps:p},React.createElement(SurfaceContext.Consumer,null,e=>{return React.createElement(Surface,Object.assign({},e,{spacing:Spacing.default}),React.createElement("div",{className:css(l,"bolt-panel-root flex-column flex-grow scroll-auto",(null===f||void 0===f?void 0:f.userResizable)&&!t&&"bolt-panel-resizable")},React.createElement("div",{className:"bolt-panel-focus-element no-outline",tabIndex:-1}),s,(null===f||void 0===f?void 0:f.userResizable)&&!t&&React.createElement("div",{className:"bolt-panel-resize-handle",onMouseDown:this.onResizeMouseDown,onKeyDown:this.onResizeKeyDown,tabIndex:0,role:"separator","aria-orientation":"vertical","aria-label":Resources.PanelResizeLabel,"aria-valuenow":null!=(e=null!=(e=null!=(e=this.state.panelWidth)?e:this.getRenderedWidth())?e:f.minWidth)?e:defaultMinWidth,"aria-valuemin":null!=(e=f.minWidth)?e:defaultMinWidth,"aria-valuemax":null!=(e=f.maxWidth)?e:Math.floor(.9*window.innerWidth),"aria-valuetext":format(Resources.PanelResizeValueText,null!=(e=null!=(e=null!=(e=this.state.panelWidth)?e:this.getRenderedWidth())?e:f.minWidth)?e:defaultMinWidth)})))}))})}componentDidMount(){this.applyCustomWidth()}componentDidUpdate(e,t){t.panelWidth!==this.state.panelWidth&&this.applyCustomWidth()}componentWillUnmount(){var e;Mouse.releaseCapture(this.onResizeMouseCapture),document.body.removeAttribute("data-resize-active"),null!=(e=this.calloutContentRef.current)&&e.classList.remove("bolt-panel-resizing")}animateOut(){return Promise.resolve()}getRenderedWidth(){var e=this.calloutContentRef.current;if(e){e=e.getBoundingClientRect().width;if(0<e)return Math.floor(e)}}applyCustomWidth(){var e,t=this.calloutContentRef.current;t&&(!t.classList.contains("bolt-panel-fullscreen")&&null!=(e=this.state.panelWidth)?(t.style.width=e+"px",t.style.maxWidth=e+"px"):(t.style.width="",t.style.maxWidth=""))}}CustomPanel.defaultProps={escDismiss:!0,lightDismiss:!0,modal:!0},CustomPanel.contextType=ScreenContext;export{CustomPanel};