labo-components/app/components/resourceviewer/annotationColumn/SelectionSpatialForm.jsx

B&G UI components

import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
import IDUtil from "../../../util/IDUtil";
import TimeInput from "./TimeInput";

export default class SelectionSpatialForm extends React.PureComponent {
    constructor(props) {
        super(props);
        this.x = React.createRef();
        this.y = React.createRef();
        this.w = React.createRef();
        this.h = React.createRef();
    }

    onAdd = () => {
        let x = this.x.current.value;
        let y = this.y.current.value;
        let w = this.w.current.value;
        let h = this.h.current.value;

        const selection = Object.assign({}, this.props.selection, {
            rect: {
                x,
                y,
                w,
                h,
            },
        });
        this.props.onUpdate(selection);
    };

    onFocus = (e) => {
        // select all
        e.target.select();
    };

    render() {
        const inputs = ["x", "y", "w", "h"].map((v) => (
            <span key={v}>
                <label>{v}</label>
                <input
                    type="number"
                    ref={this[v]}
                    defaultValue={this.props.selection.rect[v]}
                    onFocus={this.onFocus}
                />
            </span>
        ));

        return (
            <div
                className={classNames(
                    IDUtil.cssClassName("selection-spatial-form")
                )}
            >
                {inputs}
                <button className="btn btn-secondary" onClick={this.onAdd}>
                    Add
                </button>
            </div>
        );
    }
}

SelectionSpatialForm.propTypes = {
    selection: PropTypes.object.isRequired,
    onUpdate: PropTypes.func.isRequired,
};