39 lines
861 B
TypeScript
39 lines
861 B
TypeScript
import { useState } from "react";
|
|
import { dateToDigital, digitalToDate } from "../utils";
|
|
|
|
interface DigitalClockProps {
|
|
currentTime: Date;
|
|
onTimeChange: (time: Date) => void;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export function DigitalClock({
|
|
currentTime,
|
|
onTimeChange,
|
|
disabled = false,
|
|
}: DigitalClockProps) {
|
|
const [inputValue, setInputValue] = useState(dateToDigital(currentTime));
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const value = e.target.value;
|
|
setInputValue(value);
|
|
const date = digitalToDate(value);
|
|
if (!isNaN(date.getTime())) {
|
|
onTimeChange(date);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<input
|
|
data-testid="time-input"
|
|
type="text"
|
|
value={inputValue}
|
|
onChange={handleChange}
|
|
placeholder="HH:MM:SS"
|
|
disabled={disabled}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|