github.com/argoproj/argo-cd/v2@v2.10.9/ui/src/app/shared/components/query.tsx (about) 1 import * as PropTypes from 'prop-types'; 2 import * as React from 'react'; 3 import {BehaviorSubject, Observable} from 'rxjs'; 4 import {map} from 'rxjs/operators'; 5 6 import {AppContext, Consumer} from '../context'; 7 8 export const Query = (props: {children: (params: URLSearchParams) => React.ReactNode}) => ( 9 <Consumer>{ctx => props.children(new URLSearchParams(ctx.history.location.search))}</Consumer> 10 ); 11 12 export interface ObservableQueryProps { 13 children: (params: Observable<URLSearchParams>) => React.ReactNode; 14 } 15 16 export class ObservableQuery extends React.Component<ObservableQueryProps> { 17 public static contextTypes = { 18 router: PropTypes.object 19 }; 20 21 private search: BehaviorSubject<string>; 22 private stopListen: () => void; 23 24 constructor(props: ObservableQueryProps) { 25 super(props); 26 } 27 28 public componentWillMount() { 29 this.search = new BehaviorSubject(this.appContext.router.history.location.search); 30 this.stopListen = this.appContext.router.history.listen(location => { 31 this.search.next(location.search); 32 }); 33 } 34 35 public componentWillUnmount() { 36 if (this.stopListen) { 37 this.stopListen(); 38 this.stopListen = null; 39 } 40 } 41 42 public render() { 43 return this.props.children(this.search.pipe(map(search => new URLSearchParams(search)))); 44 } 45 46 private get appContext(): AppContext { 47 return this.context as AppContext; 48 } 49 }