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

React components for building web UI in Azure DevOps

import"../../CommonImports";import"../../Core/core.css";import*as React from"react";import{createMergedRef}from"../../Util";const defaultThreshold=[];for(let t=0;t<=100;t++)defaultThreshold.push(t/100);const optimizedThreshold=[0,.1,.2,.3,.4,.5,.6,.7,.8,.9,1];class IntersectionContextImpl{constructor(){this.callbacks=[],this.callbacksSet=new Set,this.pending=[],this.pendingSet=new Set,this.scrollThrottleId=null,this.lastScrollTime=0,this.rootMargin=0,this.root=document.body,this.ENABLE_INTERSECTION_PERF_OPTIMIZATIONS=!0===window.__VSS_INTERSECTION_PERFORMANCE_IMPROVEMENT_ENABLED,this.onIntersect=t=>{if(this.observer)if(this.ENABLE_INTERSECTION_PERF_OPTIMIZATIONS)for(const e of this.callbacksSet)e(t,this.observer);else for(const s of this.callbacks)s(t,this.observer)},this.onScrollThrottled=()=>{var t;this.ENABLE_INTERSECTION_PERF_OPTIMIZATIONS?(t=performance.now())-this.lastScrollTime>=IntersectionContextImpl.SCROLL_THROTTLE_MS?(this.lastScrollTime=t,this.onIntersect([]),null!==this.scrollThrottleId&&(cancelAnimationFrame(this.scrollThrottleId),this.scrollThrottleId=null)):null===this.scrollThrottleId&&(this.scrollThrottleId=requestAnimationFrame(()=>{this.scrollThrottleId=null,this.lastScrollTime=performance.now(),this.onIntersect([])})):this.onIntersect([])}}get performanceOptimizationsEnabled(){return this.ENABLE_INTERSECTION_PERF_OPTIMIZATIONS}connect(t,e=0,s){s=s||(this.ENABLE_INTERSECTION_PERF_OPTIMIZATIONS?optimizedThreshold:defaultThreshold);if(this.observer=new IntersectionObserver(this.onIntersect,{root:t,rootMargin:e+"px",threshold:s}),this.rootMargin=e,this.root=t,this.ENABLE_INTERSECTION_PERF_OPTIMIZATIONS)for(const o of this.pendingSet)this.observer.observe(o);else for(const r of this.pending)this.observer.observe(r)}disconnect(){this.observer&&this.observer.disconnect(),this.ENABLE_INTERSECTION_PERF_OPTIMIZATIONS&&null!==this.scrollThrottleId&&(cancelAnimationFrame(this.scrollThrottleId),this.scrollThrottleId=null)}observe(t){this.observer?this.observer.observe(t):this.ENABLE_INTERSECTION_PERF_OPTIMIZATIONS?this.pendingSet.add(t):this.pending.push(t)}register(t){this.ENABLE_INTERSECTION_PERF_OPTIMIZATIONS?this.callbacksSet.add(t):this.callbacks.push(t)}unobserve(t){var e;this.ENABLE_INTERSECTION_PERF_OPTIMIZATIONS?this.pendingSet.delete(t):0<=(e=this.pending.indexOf(t))&&this.pending.splice(e,1),this.observer&&this.observer.unobserve(t)}unregister(t){this.ENABLE_INTERSECTION_PERF_OPTIMIZATIONS?this.callbacksSet.delete(t):0<=(t=this.callbacks.indexOf(t))&&this.callbacks.splice(t,1)}}IntersectionContextImpl.SCROLL_THROTTLE_MS=16;const IntersectionContext=React.createContext(new IntersectionContextImpl);class Intersection extends React.Component{constructor(){super(...arguments),this.mergedRef=createMergedRef(),this.rootElement=React.createRef(),this.state=new IntersectionContextImpl,this.onScroll=t=>{this.state.performanceOptimizationsEnabled?this.state.onScrollThrottled():this.state.onIntersect([])}}render(){const e=React.Children.only(this.props.children);let t;return t=e.props.onScroll?t=>{e.props.onScroll&&e.props.onScroll(t),this.onScroll(t)}:this.onScroll,React.createElement(IntersectionContext.Provider,{value:this.state},React.cloneElement(e,Object.assign(Object.assign({},e.props),{ref:this.mergedRef(this.rootElement,e.ref),onScroll:t}),e.props.children))}componentDidMount(){var{observationElement:e,rootElement:t}=this.props;let s=null;if(t?(s="string"==typeof t?document.querySelector(t):"function"==typeof t?t():t)&&(s.addEventListener("scroll",this.onScroll),this.externalElement=s):this.rootElement&&(s=this.rootElement.current),s&&(this.state.connect(s,this.props.rootMargin,this.props.threshold),this.props.onIntersect&&this.state.register(this.props.onIntersect),e)){let t;(t="string"==typeof e?document.querySelector(e):"function"==typeof e?e():e)&&this.state.observe(t)}}componentWillUnmount(){this.externalElement&&this.externalElement.removeEventListener("scroll",this.onScroll),this.state.disconnect()}}export{IntersectionContext,Intersection};