sprinklers3/app/components/DurationInput.tsx

import * as React from "react";
import { Input, InputOnChangeData } from "semantic-ui-react";

import { Duration } from "@common/sprinklers";

export default class DurationInput extends React.Component<{
    duration: Duration,
    onDurationChange: (newDuration: Duration) => void;
}> {
    render() {
        const duration = this.props.duration;
        // const editing = this.props.onDurationChange != null;
        return (
            <div className="field durationInput">
                <label>Duration</label>
                <div className="fields">
                    <Input
                        type="number"
                        className="field durationInput--minutes"
                        value={duration.minutes}
                        onChange={this.onMinutesChange}
                        label="M"
                        labelPosition="right"
                    />
                    <Input
                        type="number"
                        className="field durationInput--seconds"
                        value={duration.seconds}
                        onChange={this.onSecondsChange}
                        max="60"
                        label="S"
                        labelPosition="right"
                    />
                </div>
            </div>
        );
    }

    private onMinutesChange = (e: React.SyntheticEvent<any>, { value }: InputOnChangeData) => {
        if (value.length === 0 || isNaN(Number(value))) {
            return;
        }
        const newMinutes = parseInt(value, 10);
        this.props.onDurationChange(this.props.duration.withMinutes(newMinutes));
    }

    private onSecondsChange = (e: React.SyntheticEvent<any>, { value }: InputOnChangeData) => {
        if (value.length === 0 || isNaN(Number(value))) {
            return;
        }
        const newSeconds = parseInt(value, 10);
        this.props.onDurationChange(this.props.duration.withSeconds(newSeconds));
    }
}