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

React components for building web UI in Azure DevOps

import{__assign,__extends}from"tslib";import"../../CommonImports";import"../../Core/core.css";import"./Panel.css";import*as React from"react";import{ScreenContext,ScreenSize}from"../../Core/Util/Screen";import{Callout,ContentJustification,ContentLocation,ContentOrientation,ContentSize}from"../../Callout";import{FocusZoneKeyStroke}from"../../FocusZone";import{Observer}from"../../Observer";import{Spacing,Surface,SurfaceContext}from"../../Surface";import{css,KeyCode}from"../../Util";var CustomPanel=function(t){function e(e){var n=t.call(this,e)||this;return n.calloutContentRef=React.createRef(),n.defaultActiveElement=function(){var e=n.props.defaultActiveElement,e="function"==typeof e?e():e;if(e&&n.calloutContentRef.current){var t=n.calloutContentRef.current.querySelectorAll(e);if(t&&t.length)return e}return".bolt-panel-focus-element"},n.state={isDisplayed:!0},n}return __extends(e,t),e.prototype.render=function(){var t=this,e=this.props,n=e.ariaLabel,o=e.ariaLabelledBy,a=e.blurDismiss,s=e.calloutClassName,r=e.children,i=e.className,l=e.contentClassName,c=e.escDismiss,u=e.id,m=e.lightDismiss,f=e.modal,p=e.onDismiss,C=e.portalProps,e=e.size,d=void 0===e?ContentSize.Medium:e,S=this.state.isDisplayed;return React.createElement(Observer,{size:this.context.size},function(e){e=e.size===ScreenSize.xsmall;return React.createElement(Callout,{ariaLabel:n,ariaLabelledBy:o,blurDismiss:a,className:css("bolt-panel",s,!1===S&&"no-events"),contentClassName:css(l,"bolt-panel-callout-content scroll-auto",S?"in":"out",e?"bolt-panel-fullscreen absolute-fill":"relative"),contentJustification:ContentJustification.Stretch,contentLocation:ContentLocation.End,contentOrientation:ContentOrientation.Column,contentRef:t.calloutContentRef,contentShadow:!0,contentSize:e?void 0:d,escDismiss:c,id:u,focuszoneProps:{circularNavigation:!0,defaultActiveElement:t.defaultActiveElement,focusOnMount:!0,handleTabKey:!0,includeDefaults:!0,postprocessKeyStroke:function(e){return e.which===KeyCode.tab&&e.preventDefault(),FocusZoneKeyStroke.IgnoreParents}},lightDismiss:m&&!1!==S,modal:f&&!1!==S,onDismiss:p,portalProps:C},React.createElement(SurfaceContext.Consumer,null,function(e){return React.createElement(Surface,__assign({},e,{spacing:Spacing.default}),React.createElement("div",{className:css(i,"bolt-panel-root flex-column flex-grow scroll-auto")},React.createElement("div",{className:"bolt-panel-focus-element no-outline",tabIndex:-1}),r))}))})},e.prototype.animateOut=function(){return Promise.resolve()},e.defaultProps={escDismiss:!0,lightDismiss:!0,modal:!0},e.contextType=ScreenContext,e}(React.Component);export{CustomPanel};