azure-devops-ui/Components/MasterPanel/MasterPanel.min.js

React components for building web UI in Azure DevOps

import"../../CommonImports";import"../../Core/core.css";import*as React from"react";import{MasterDetailsContext}from"../../MasterDetailsContext";import{Observer}from"../../Observer";import{Surface,SurfaceBackground}from"../../Surface";import{css}from"../../Util";import{SingleLayerMasterPanel,SingleLayerMasterPanelHeader}from"../SingleLayerMasterPanel/SingleLayerMasterPanel";import*as Utils_Accessibility from"../../Core/Util/Accessibility";const MasterPanel=e=>{const{className:r,showOnSmallScreens:a}=e;React.useRef(null);e=React.useContext(MasterDetailsContext);return React.createElement(Surface,{background:SurfaceBackground.neutral},React.createElement(Observer,{masterDetailsLayer:e.getCurrentLayer(),hideDetailsPanel:e.hideDetailsPanel},e=>React.createElement(MasterPanelInternal,{className:css(r,e.hideDetailsPanel&&"full-screen"),layer:e.masterDetailsLayer,showOnSmallScreens:a||e.hideDetailsPanel})))},MasterPanelInternal=e=>{const{className:r,layer:a,showOnSmallScreens:t}=e,n=React.createRef(),s=React.useRef(!0),l=(React.useEffect(()=>{s.current?s.current=!1:(n.current&&n.current.focus(),Utils_Accessibility.announce(a.ariaLabel))},[e.layer]),a.masterPanelContent),c=a.parentItem,o=a.selectedMasterItem;var e=l.renderHeader?()=>l.renderHeader(c):void 0,i=l.renderSearch?()=>l.renderSearch(c):void 0,m=l.renderContent?()=>l.renderContent(c,o):void 0;return React.createElement(React.Fragment,null,React.createElement("div",{ref:n,tabIndex:-1}),React.createElement(SingleLayerMasterPanel,{className:r,key:"master-panel-"+a.key,renderContent:m,renderHeader:e,renderSearch:i,showOnSmallScreens:t}))},MasterPanelHeader=e=>{const r=React.useContext(MasterDetailsContext),a=r.getCurrentLayer().value.masterPanelContent;return React.createElement(SingleLayerMasterPanelHeader,Object.assign({},e,{onBackButtonClick:!1!==a.hideBackButton?void 0:()=>{!1!==(a.onBackButtonClick&&a.onBackButtonClick())&&r.pop()}}))};export{MasterPanel,MasterPanelHeader};