azure-devops-ui/Components/Observer/ReadyableArrayObserver.js

React components for building web UI in Azure DevOps

import "../../CommonImports";
import "../../Core/core.css";
import * as React from "react";
import { Observer } from "./Observer";
export class ReadyableArrayObserver extends React.Component {
    constructor() {
        super(...arguments);
        this.loaded = false;
        this.handleLoaded = () => {
            if (this.props.data.ready.value && !this.loaded) {
                this.props.onReady && this.props.onReady();
                this.loaded = true;
            }
        };
    }
    render() {
        const { dataComponent, loadingComponent, zeroDataComponent } = this.props;
        return (React.createElement(Observer, { data: this.props.data, onUpdate: this.handleLoaded, ready: this.props.data.ready }, (props) => {
            if (!props.ready) {
                return loadingComponent ? loadingComponent() : null;
            }
            if (props.data.length) {
                return dataComponent(props.data);
            }
            return zeroDataComponent ? zeroDataComponent() : null;
        }));
    }
    componentDidUpdate(prevProps) {
        if (prevProps.data !== this.props.data) {
            this.loaded = false;
            this.handleLoaded();
        }
    }
    componentDidMount() {
        this.handleLoaded();
    }
}