toolpool.tsx

import { InferType } from "prop-types";
import React from "react";
import { State } from "../state";
import { ToolButton } from "./toolbutton";
import wand from "../../images/tools/wand.png";
import "./toolpool.css";

type propTypes = {
    state: State;
};

export class ToolPool extends React.PureComponent<
    propTypes,
    InferType<typeof ToolPool.stateTypes>
> {
    static stateTypes = {};

    constructor(props: propTypes) {
        super(props);
    }

    render(): React.ReactNode {
        // Don't render anything if state is not defined
        // TODO: Reactivate code later. Was commented to work on the proper toolpool render
        // if (!this.state) {
        //     return <div id="toolpool"></div>;
        // }

        return (
            <div id="toolpool">
                <ToolButton
                    icon={wand}
                    title="Example Tools"
                    key="1"
                ></ToolButton>
                <ToolButton
                    icon={wand}
                    title="Example Tool"
                    key="2"
                ></ToolButton>
                <ToolButton
                    icon={wand}
                    title="Example Tool"
                    key="3"
                ></ToolButton>
                <ToolButton
                    icon={wand}
                    title="Example Tool"
                    key="4"
                ></ToolButton>
                <ToolButton
                    icon={wand}
                    title="Example Tool"
                    key="5"
                ></ToolButton>
                <ToolButton
                    icon={wand}
                    title="Example Tool"
                    key="6"
                ></ToolButton>
                <ToolButton
                    icon={wand}
                    title="Example Tool"
                    key="7"
                ></ToolButton>
                <ToolButton
                    icon={wand}
                    title="Example Tool"
                    key="8"
                ></ToolButton>
                <ToolButton
                    icon={wand}
                    title="Example Tool"
                    key="9"
                ></ToolButton>

                {/* {this.props.state.display.tools.map((t) => (
                    <ToolButton
                        tool={t}
                        state={this.props.state}
                        key={t.getKey()}
                    />
                ))} */}
            </div>
        );
    }
}