39 lines
1.0 KiB
TypeScript
39 lines
1.0 KiB
TypeScript
import { DatePickerInput } from "@mantine/dates";
|
|
import { type FC, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
type BankPeriodPickerProps = {
|
|
period: { from: string; to: string };
|
|
onChange: (value: [string | null, string | null]) => void;
|
|
};
|
|
const BankPeriodPicker: FC<BankPeriodPickerProps> = (props) => {
|
|
const { period, onChange } = props;
|
|
const { t } = useTranslation();
|
|
const scope = `${period.from}-${period.to}`;
|
|
const [draft, setDraft] = useState<{
|
|
scope: string;
|
|
value: [string | null, string | null];
|
|
}>();
|
|
const value: [string | null, string | null] =
|
|
draft?.scope === scope ? draft.value : [period.from, period.to];
|
|
return (
|
|
<DatePickerInput
|
|
type="range"
|
|
allowSingleDateInRange
|
|
label={t("bank.period")}
|
|
valueFormat="DD.MM.YYYY"
|
|
value={value}
|
|
onChange={(next) => {
|
|
setDraft({ scope, value: next });
|
|
onChange(next);
|
|
}}
|
|
popoverProps={{
|
|
returnFocus: true,
|
|
middlewares: { shift: { crossAxis: true } },
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export { BankPeriodPicker };
|