import * as classNames from "classnames"; import * as React from "react"; import { Form, Input, InputProps } from "semantic-ui-react"; import { Duration } from "@common/Duration"; export default class DurationView extends React.Component<{ label?: string, inline?: boolean, duration: Duration, onDurationChange?: (newDuration: Duration) => void, className?: string, }> { render() { const { duration, label, inline, onDurationChange } = this.props; const className = classNames("durationInput", this.props.className); if (onDurationChange) { return ( {label && }
); } else { return ( {label && } {duration.minutes}M {duration.seconds}S ); } } private onMinutesChange: InputProps["onChange"] = (e, { value }) => { if (!this.props.onDurationChange || isNaN(Number(value))) { return; } const newMinutes = Number(value); this.props.onDurationChange(this.props.duration.withMinutes(newMinutes)); } private onSecondsChange: InputProps["onChange"] = (e, { value }) => { if (!this.props.onDurationChange || isNaN(Number(value))) { return; } const newSeconds = Number(value); this.props.onDurationChange(this.props.duration.withSeconds(newSeconds)); } private onWheel = () => { // do nothing } }