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