import * as classNames from "classnames";
import * as React from "react";
import { Form, Input, InputProps } from "semantic-ui-react";
import { Duration } from "@common/Duration";
import "@client/styles/DurationView";
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, className } = this.props;
const inputsClassName = classNames("durationInputs", { inline });
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
};
}