82 lines
2.8 KiB
TypeScript
82 lines
2.8 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState } from "react";
|
||
import type { AgedPipeFilters } from "./agedPipeUtils";
|
||
|
||
type Props = {
|
||
filters: AgedPipeFilters;
|
||
onFiltersChange: (filters: AgedPipeFilters) => void;
|
||
onApply: (filters?: AgedPipeFilters) => void;
|
||
};
|
||
|
||
export default function AgedPipeLayerSettingPanel({
|
||
filters,
|
||
onFiltersChange,
|
||
onApply,
|
||
}: Props) {
|
||
const [isCollapsed, setIsCollapsed] = useState(false);
|
||
const [elapsedYearsText, setElapsedYearsText] = useState(String(filters.elapsedYears ?? ""));
|
||
|
||
useEffect(() => {
|
||
setElapsedYearsText(String(filters.elapsedYears ?? ""));
|
||
}, [filters.elapsedYears]);
|
||
|
||
const commitElapsedYears = () => {
|
||
const nextFilters = {
|
||
...filters,
|
||
elapsedYears: elapsedYearsText === "" ? ("" as unknown as number) : Number(elapsedYearsText),
|
||
};
|
||
onFiltersChange(nextFilters);
|
||
onApply(nextFilters);
|
||
};
|
||
|
||
return (
|
||
<div className="overflow-hidden rounded-sm border border-red-100 bg-red-50/35">
|
||
<div className="relative flex min-h-[30px] items-center justify-center border-b border-red-100 bg-white px-8">
|
||
<button
|
||
type="button"
|
||
className="absolute left-2 top-1/2 h-[18px] w-[18px] -translate-y-1/2 bg-transparent text-[1.2rem] leading-none text-[#555]"
|
||
onClick={() => setIsCollapsed((value) => !value)}
|
||
title={isCollapsed ? "펼치기" : "접기"}
|
||
>
|
||
{isCollapsed ? "›" : "⌄"}
|
||
</button>
|
||
<span className="text-[1.2rem] font-semibold text-red-700">노후관로 설정</span>
|
||
</div>
|
||
|
||
{!isCollapsed && (
|
||
<div className="px-2 py-2">
|
||
<div className="flex min-h-[30px] items-center gap-1 whitespace-nowrap text-[1.2rem] text-[#333]">
|
||
<label htmlFor="aged-pipe-elapsed-years">경과년도(년)</label>
|
||
<input
|
||
id="aged-pipe-elapsed-years"
|
||
className="h-[22px] w-14 border border-[#ccd6df] px-1 text-center text-[1.2rem]"
|
||
type="text"
|
||
inputMode="numeric"
|
||
pattern="[0-9]*"
|
||
autoComplete="off"
|
||
value={elapsedYearsText}
|
||
onFocus={(event) => event.currentTarget.select()}
|
||
onChange={(event) => {
|
||
const digits = event.target.value.replace(/[^0-9]/g, "");
|
||
setElapsedYearsText(digits);
|
||
}}
|
||
onKeyDown={(event) => {
|
||
if (event.key === "Enter") commitElapsedYears();
|
||
}}
|
||
/>
|
||
<button
|
||
type="button"
|
||
className="grid h-[22px] w-[22px] place-items-center rounded-full bg-[#31a83b] text-[1.4rem] font-bold leading-none text-white"
|
||
onClick={commitElapsedYears}
|
||
title="적용"
|
||
>
|
||
✓
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|