111 lines
2.9 KiB
TypeScript
111 lines
2.9 KiB
TypeScript
import React from "react";
|
|
import { SelectBox2 } from "@common/business_components/ui/select/index-2";
|
|
|
|
interface YearRangeSelectBoxProps {
|
|
start: string;
|
|
end: string;
|
|
onChange: (range: { start: string; end: string }) => void;
|
|
startLabel?: string;
|
|
endLabel?: string;
|
|
minYear?: number;
|
|
maxYear?: number;
|
|
className?: string;
|
|
selectClass?: string;
|
|
}
|
|
|
|
// 시작년도 selectArray 생성 함수
|
|
export function getStartYearArray({
|
|
minYear = 1900,
|
|
maxYear = new Date().getFullYear(),
|
|
placeholder = "년",
|
|
endYear,
|
|
}: {
|
|
minYear?: number;
|
|
maxYear?: number;
|
|
placeholder?: string;
|
|
endYear?: string;
|
|
} = {}) {
|
|
const years = Array.from({ length: maxYear - minYear + 1 }, (_, i) =>
|
|
(maxYear - i).toString()
|
|
).filter(y => !endYear || parseInt(y) <= parseInt(endYear));
|
|
return [
|
|
{ val: "0", text: placeholder },
|
|
...years.map(y => ({ val: y, text: y })),
|
|
];
|
|
}
|
|
|
|
// 종료년도 selectArray 생성 함수
|
|
export function getEndYearArray({
|
|
minYear = 1900,
|
|
maxYear = new Date().getFullYear(),
|
|
placeholder = "년",
|
|
startYear,
|
|
}: {
|
|
minYear?: number;
|
|
maxYear?: number;
|
|
placeholder?: string;
|
|
startYear?: string;
|
|
} = {}) {
|
|
const years = Array.from({ length: maxYear - minYear + 1 }, (_, i) =>
|
|
(maxYear - i).toString()
|
|
).filter(y => !startYear || parseInt(y) >= parseInt(startYear));
|
|
return [
|
|
{ val: "9999", text: placeholder },
|
|
...years.map(y => ({ val: y, text: y })),
|
|
];
|
|
}
|
|
|
|
export function YearRangeSelectBox({
|
|
start,
|
|
end,
|
|
onChange,
|
|
startLabel = "시작년도",
|
|
endLabel = "",
|
|
minYear = 1900,
|
|
maxYear = new Date().getFullYear(),
|
|
className = "",
|
|
selectClass = "rounded-lg bg-white"
|
|
}: YearRangeSelectBoxProps) {
|
|
// 시작년도 배열
|
|
const getStartYearArray = () => {
|
|
const years = Array.from({ length: maxYear - minYear + 1 }, (_, i) =>
|
|
(maxYear - i).toString()
|
|
).filter(y => !end || parseInt(y) <= parseInt(end));
|
|
return [
|
|
{ val: "0", text: "년" },
|
|
...years.map(y => ({ val: y, text: y })),
|
|
];
|
|
};
|
|
// 종료년도 배열
|
|
const getEndYearArray = () => {
|
|
const years = Array.from({ length: maxYear - minYear + 1 }, (_, i) =>
|
|
(maxYear - i).toString()
|
|
).filter(y => !start || parseInt(y) >= parseInt(start));
|
|
return [
|
|
{ val: "9999", text: "년" },
|
|
...years.map(y => ({ val: y, text: y })),
|
|
];
|
|
};
|
|
|
|
return (
|
|
<div className={`flex items-center ${className}`}>
|
|
<SelectBox2
|
|
className="w-50 mr-3"
|
|
selectClass={selectClass}
|
|
label={startLabel}
|
|
selectArray={getStartYearArray()}
|
|
onSelectValue={val => onChange({ start: String(val), end })}
|
|
value={start}
|
|
/>
|
|
<span className="font-semibold text-xl mx-2">~</span>
|
|
<SelectBox2
|
|
className="w-50 mr-8"
|
|
selectClass={selectClass}
|
|
label={endLabel}
|
|
selectArray={getEndYearArray()}
|
|
onSelectValue={val => onChange({ start, end: String(val) })}
|
|
value={end}
|
|
/>
|
|
</div>
|
|
);
|
|
} |