src/components/reference/AssetReferencePage.js
import React from "react";
import ModelTab from "./ModelReferenceTab";
import TextureTab from "./TextureReferenceTab";
import {
    Tabs,
    Tab,
    Icon,
    Hidden,
} from "@material-ui/core";
import "../../css/ReferencePage.css";
export default class AssetReference extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: "a",
        };
    }
    handleChange = (event, value) => {
        this.setState({ value });
    };
    componentDidMount() {
        const qsa = new URLSearchParams(window.location.search);
        if (qsa.has("tab") && qsa.get("tab").toLowerCase() === "textures") {
            this.setState({ value: "b" });
        }
    }
    render() {
        document.title = "Asset | MYR";
        return (
            <div id="reference-page">
                <Tabs
                    id="reference-tabs"
                    variant="fullWidth"
                    value={this.state.value}
                    onChange={this.handleChange} >
                    <Tab
                        icon={<Icon className="material-icons model">model</Icon>}
                        label={
                            <Hidden xsDown>
                                <div>MODEL</div>
                            </Hidden>
                        }
                        value='a' />
                    <Tab
                        icon={<Icon className="material-icons texture">texture</Icon>}
                        label={
                            <Hidden xsDown>
                                <div>TEXTURE</div>
                            </Hidden>
                        }
                        value='b' />
                </Tabs>
                {this.state.value === "a" &&
                    <div style={{ marginTop: 0 }}>
                        <ModelTab />
                    </div>}
                {this.state.value === "b" &&
                    <div style={{ marginTop: 0 }}>
                        <TextureTab />
                    </div>}
            </div>
        );
    }
}