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

React components for building web UI in Azure DevOps

import"../../CommonImports";import"../../Core/core.css";import"./SingleLayerMasterPanel.css";import*as React from"react";import{useObservable}from"../../Core/Observable";import{TimerManagement}from"../../Core/TimerManagement";import{Header,TitleSize}from"../../Header";import{Intersection}from"../../Intersection";import{Observer}from"../../Observer";import{css}from"../../Util";var SingleLayerMasterPanel=function(e){function r(){var e;u.current&&f.current&&(e=u.current.scrollTop,i.value&&!v.current&&0===e?o(!1):i.value||R.current+f.current.clientHeight>u.current.clientHeight&&h.current+f.current.clientHeight<u.current.clientHeight||(v.current=!0,b.current&&p.current.clearTimeout(b.current),b.current=p.current.setTimeout(function(){v.current=!1,r()},100),o(!0)))}function n(e){if(e&&(e.id="",e.hasChildNodes()))for(var r=e.children,t=0;t<r.length;t++)n(r.item(t))}var t=e.className,a=e.renderContent,c=e.renderHeader,l=e.renderSearch,e=e.showOnSmallScreens,e=void 0!==e&&e,s=useObservable(!1),i=s[0],o=s[1],u=React.useRef(null),m=React.useRef(null),d=React.useRef(null),f=React.useRef(null),R=React.useRef(0),h=React.useRef(0),p=React.useRef(new TimerManagement),v=React.useRef(!1),b=React.useRef();return React.useEffect(function(){return m.current&&(R.current=m.current.clientHeight),d.current&&(n(d.current),h.current=d.current.clientHeight),document.addEventListener("resize",r),function(){document.removeEventListener("resize",r),p.current.dispose()}},[]),React.createElement(Intersection,null,React.createElement("div",{className:css(t,"bolt-master-panel flex-column flex-noshrink scroll-auto",e&&"show-on-small-screens"),onScroll:r,ref:u},c&&React.createElement(React.Fragment,null,React.createElement(Observer,{isScrolled:i},function(e){return React.createElement("div",{className:css("bolt-master-panel-header",l&&"has-search",e.isScrolled&&"content-scrolled"),ref:m},c())}),React.createElement("div",{"aria-hidden":"true",className:css("bolt-master-panel-header hide",l&&"has-search","content-scrolled"),ref:d},c())),React.createElement("div",{className:"bolt-master-panel-content flex-column",ref:f},l&&React.createElement("div",{className:"bolt-master-panel-search"},l()),a&&a())))},SingleLayerMasterPanelHeader=function(e){var r=e.title,t=e.titleAriaLevel,n=e.subTitle,e=e.onBackButtonClick;return React.createElement(Header,{backButtonProps:e?{onClick:e,subtle:!0}:void 0,className:"bolt-master-panel-standard-header",description:n,descriptionClassName:"bolt-master-panel-header-subtitle bolt-master-panel-header-secondary",title:r,titleAriaLevel:t,titleClassName:"bolt-master-panel-header-title",titleSize:TitleSize.Large})};export{SingleLayerMasterPanel,SingleLayerMasterPanelHeader};