aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/DocCreatorMenuButton.tsx
blob: 1d8139d4019bf93a754792e8b592a0ddb7ddf745 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import { IconProp } from "@fortawesome/fontawesome-svg-core";
import { ObservableReactComponent } from "../../../../ObservableReactComponent";
import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { setupMoveUpEvents, returnFalse } from "../../../../../../ClientUtils";
import { emptyFunction } from "../../../../../../Utils";
import { undoable } from "../../../../../util/UndoManager";
import { observer } from "mobx-react";

interface DocCreatorMenuButtonProps {
    icon: IconProp;
    function: () => any;
    styles?: string;
}

@observer
export class DocCreatorMenuButton extends ObservableReactComponent<DocCreatorMenuButtonProps> {

    setupButtonClick = (e: React.PointerEvent, func: (...args: any) => void) => {
        setupMoveUpEvents(
            this,
            e,
            returnFalse,
            emptyFunction,
            undoable(clickEv => {
                clickEv.stopPropagation();
                clickEv.preventDefault();
                func();
            }, 'create docs')
        );
    };

    render() {

        return (
            <button className={`docCreatorMenu-menu-button ${this._props.styles}`} onPointerDown={e => this.setupButtonClick(e, async () => this._props.function())}>
                <FontAwesomeIcon icon={this._props.icon} />
            </button>
        );
    }
}