toolitem.tsx

import React from "react";
import { Tool } from "../structures/editor/tools/tool";
import { Editor } from "./editor";

type ToolItemProps = { tool: Tool; editor: Editor };

class ToolItem extends React.Component {
    state = {};
    props: ToolItemProps;

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

    /**
     * Handles the click-on-tool-icon event.
     */
    private handleClick() {
        if (this.props.editor.getCurrentTool() !== this.props.tool) {
            // Not selected, so select
            this.props.editor.setTool(this.props.tool);
            return;
        }

        // Is already set, so only unset, if tool is toggleable
        if (!this.props.tool.isToggleable) {
            return;
        }

        this.props.editor.setPreviousTool();
    }

    public render() {
        return (
            <button
                id={this.props.tool.id}
                title={this.props.tool.name}
                onClick={this.handleClick}
            >
                <img src={this.props.tool.icon} />
            </button>
        );
    }
}