Babylon.js/Playground/src/components/examplesComponent.tsx

import * as React from "react";
import { GlobalState } from "../globalState";

require("../scss/examples.scss");

interface IExamplesComponentProps {
    globalState: GlobalState;
}

export class ExamplesComponent extends React.Component<IExamplesComponentProps, { filter: string }> {
    private _state = "removed";
    private _rootRef: React.RefObject<HTMLDivElement>;
    private _scripts: {
        title: string;
        samples: {
            title: string;
            doc: string;
            icon: string;
            PGID: string;
            description: string;
        }[];
    }[];

    public constructor(props: IExamplesComponentProps) {
        super(props);
        this._loadScripts();

        this.state = { filter: "" };
        this._rootRef = React.createRef();

        this.props.globalState.onExamplesDisplayChangedObservable.add(() => {
            if (this._state !== "visible") {
                this._rootRef.current!.classList.remove("removed");
                setTimeout(() => {
                    this._rootRef.current!.classList.add("visible");
                    this._state = "visible";
                }, 16);
            } else {
                this._rootRef.current!.classList.remove("visible");
                this._state = "";
                setTimeout(() => {
                    this._rootRef.current!.classList.add("removed");
                }, 200);
            }
        });
    }

    private _loadScripts() {
        var xhr = new XMLHttpRequest();

        if (this.props.globalState.language === "JS") {
            xhr.open("GET", "https://raw.githubusercontent.com/BabylonJS/Documentation/master/examples/list.json", true);
        } else {
            xhr.open("GET", "https://raw.githubusercontent.com/BabylonJS/Documentation/master/examples/list_ts.json", true);
        }

        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    this._scripts = JSON.parse(xhr.response)["examples"];

                    this._scripts.sort((a, b) => {
                        if (a.title < b.title) {
                            return -1;
                        }
                        return 1;
                    });

                    this._scripts.forEach((s) => {
                        s.samples.sort((a, b) => {
                            if (a.title < b.title) {
                                return -1;
                            }
                            return 1;
                        });
                    });

                    this.forceUpdate();
                }
            }
        };

        xhr.send(null);
    }

    private _onLoadPG(id: string) {
        this.props.globalState.onLoadRequiredObservable.notifyObservers(id);

        if (window.innerWidth < this.props.globalState.MobileSizeTrigger) {
            this.props.globalState.onExamplesDisplayChangedObservable.notifyObservers();
        }
    }

    public render() {
        if (!this._scripts) {
            return null;
        }

        return (
            <div id="examples" className={this._state} ref={this._rootRef}>
                <div id="examples-header">Examples</div>
                <div id="examples-filter">
                    <input
                        id="examples-filter-text"
                        type="text"
                        placeholder="Filter examples"
                        value={this.state.filter}
                        onChange={(evt) => {
                            this.setState({ filter: evt.target.value });
                        }}
                    />
                </div>
                <div id="examples-list">
                    {this._scripts.map((s) => {
                        let active = s.samples.filter((ss) => {
                            return !this.state.filter || ss.title.toLowerCase().indexOf(this.state.filter.toLowerCase()) !== -1 || ss.description.toLowerCase().indexOf(this.state.filter.toLowerCase()) !== -1;
                        });

                        if (active.length === 0) {
                            return null;
                        }

                        return (
                            <div key={s.title} className="example-category">
                                <div className="example-category-title">{s.title}</div>
                                {active.map((ss) => {
                                    return (
                                        <div className="example" key={ss.title} onClick={() => this._onLoadPG(ss.PGID)}>
                                            <img src={ss.icon.replace("icons", "https://doc.babylonjs.com/examples/icons")} />
                                            <div className="example-title">{ss.title}</div>
                                            <div className="example-description">{ss.description}</div>
                                            <a className="example-link" href={ss.doc} target="_blank">
                                                Documentation
                                            </a>
                                        </div>
                                    );
                                })}
                            </div>
                        );
                    })}
                </div>
            </div>
        );
    }
}