EntryControls.js

import React from 'react';

import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Button from 'react-bootstrap/Button';

class EntryControls extends React.Component {
	constructor(props) {
		super(props);

		this.handleAddTextEntryClick = this.handleAddTextEntryClick.bind(this);
		this.handleStartClick = this.handleStartClick.bind(this);
		this.handleIntroClick = this.handleIntroClick.bind(this);
		this.handleMissionClick = this.handleMissionClick.bind(this);
		this.handleCutsceneClick = this.handleCutsceneClick.bind(this);
		this.handleTrashClick = this.handleTrashClick.bind(this);
		this.handleStopClick = this.handleStopClick.bind(this);
	}

	handleAddTextEntryClick(e) {
		if (this.props.addTextEntryClicked) {
			this.props.addTextEntryClicked(e);
		}
	}

	handleStartClick(e) {
		if (this.props.startClicked) {
			this.props.startClicked(e);
		}
	}

	handleIntroClick(e) {
		if (this.props.introClicked) {
			this.props.introClicked(e);
		}
	}

	handleMissionClick(e) {
		if (this.props.missionClicked) {
			this.props.missionClicked(e);
		}
	}

	handleCutsceneClick(e) {
		if (this.props.cutsceneClicked) {
			this.props.cutsceneClicked(e);
		}
	}

	handleTrashClick(e) {
		if (this.props.trashClicked) {
			this.props.trashClicked(e);
		}
	}

	handleStopClick(e) {
		if (this.props.stopClicked) {
			this.props.stopClicked(e);
		}
	}

	render() {
		return (
			<React.Fragment>
				<Row className="p-1">
					<Col>
						Entry: <input data-bind="value: entryName" />
					</Col>
					<Col>
						<Button onClick={this.handleAddTextEntryClick}>Add Text Entry</Button>
					</Col>
				</Row>
				<Row className="p-1">
					<Col>
						<Button onClick={this.handleStartClick}>Start</Button>
					</Col>
					<Col>
						<Button onClick={this.handleIntroClick}>Intro</Button>
					</Col>
					<Col>
						<Button onClick={this.handleMissionClick}>Mission</Button>
					</Col>
					<Col>
						<Button onClick={this.handleCutsceneClick}>Cutscene</Button>
					</Col>
					<Col>
						<Button onClick={this.handleTrashClick}>Trash</Button>
					</Col>
					<Col>
						<Button onClick={this.handleStopClick}>Stop</Button>
					</Col>
				</Row>
			</React.Fragment>
		);
	}
}

export default EntryControls;