74 lines
1.8 KiB
TypeScript
74 lines
1.8 KiB
TypeScript
import { ChangeEvent } from 'react';
|
|
import { Box } from './Box';
|
|
import { Input } from './Input';
|
|
import { Text } from './Text';
|
|
|
|
export interface DurationFieldProps {
|
|
label: string;
|
|
value: number; // in minutes
|
|
onChange: (value: number) => void;
|
|
disabled?: boolean;
|
|
error?: string;
|
|
}
|
|
|
|
export const DurationField = ({
|
|
label,
|
|
value,
|
|
onChange,
|
|
disabled = false,
|
|
error
|
|
}: DurationFieldProps) => {
|
|
const hours = Math.floor(value / 60);
|
|
const minutes = value % 60;
|
|
|
|
const handleHoursChange = (e: ChangeEvent<HTMLInputElement>) => {
|
|
const h = parseInt(e.target.value) || 0;
|
|
onChange(h * 60 + minutes);
|
|
};
|
|
|
|
const handleMinutesChange = (e: ChangeEvent<HTMLInputElement>) => {
|
|
const m = parseInt(e.target.value) || 0;
|
|
onChange(hours * 60 + m);
|
|
};
|
|
|
|
return (
|
|
<Box>
|
|
<Text as="label" size="xs" weight="bold" variant="low" block>
|
|
{label}
|
|
</Text>
|
|
<Box display="flex" alignItems="center" gap={4}>
|
|
<Box display="flex" alignItems="center" gap={2}>
|
|
<Input
|
|
type="number"
|
|
value={hours}
|
|
onChange={handleHoursChange}
|
|
disabled={disabled}
|
|
min={0}
|
|
style={{ width: '4rem' }}
|
|
/>
|
|
<Text size="sm" variant="low">h</Text>
|
|
</Box>
|
|
<Box display="flex" alignItems="center" gap={2}>
|
|
<Input
|
|
type="number"
|
|
value={minutes}
|
|
onChange={handleMinutesChange}
|
|
disabled={disabled}
|
|
min={0}
|
|
max={59}
|
|
style={{ width: '4rem' }}
|
|
/>
|
|
<Text size="sm" variant="low">m</Text>
|
|
</Box>
|
|
</Box>
|
|
{error && (
|
|
<Box marginTop={1}>
|
|
<Text size="xs" variant="critical">
|
|
{error}
|
|
</Text>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|