swcho
d5c967e9ad
- SelectBox 컴포넌트에 selectContentClass props 추가 (드롭다운에 z index 값을 추가 하기 위함) - SelectBox2 컴포넌트 삭제
106 lines
2.9 KiB
TypeScript
106 lines
2.9 KiB
TypeScript
// selectBox
|
|
|
|
import { Label } from "@common/components";
|
|
import React, { useEffect, useState } from "react";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "./lib/selectBox";
|
|
|
|
/** 차트 기본 스타일 */
|
|
interface SelectBox1 {
|
|
text: string;
|
|
val: string | number;
|
|
hidden?: boolean;
|
|
}
|
|
|
|
const SelectBox = React.forwardRef<
|
|
HTMLDivElement,
|
|
React.HTMLAttributes<HTMLDivElement> & {
|
|
label: string;
|
|
selectClass: string | undefined;
|
|
className: string;
|
|
selectArray: SelectBox1[];
|
|
onSelectValue: (val: string | number) => void;
|
|
value?: string | number;
|
|
readOnly?: boolean; // readOnly 속성 추가
|
|
selectContentClass?: string;
|
|
}
|
|
>(
|
|
(
|
|
{
|
|
label,
|
|
className,
|
|
selectClass,
|
|
selectArray,
|
|
onSelectValue,
|
|
value,
|
|
readOnly = false,
|
|
selectContentClass,
|
|
},
|
|
ref,
|
|
) => {
|
|
// hidden이 true인 첫 번째 항목을 placeholder로 사용
|
|
const hiddenItem = selectArray.find((item) => item.hidden);
|
|
const placeHolder = hiddenItem?.text ?? "선택";
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
// hidden이 true인 항목만 드롭다운에서 제외
|
|
const visibleItems = selectArray.filter((item) => !item.hidden);
|
|
|
|
// 현재 값이 hidden 항목이거나 빈 값인 경우 undefined로 설정하여 placeholder가 표시되도록 함
|
|
const currentValue =
|
|
value !== undefined &&
|
|
hiddenItem &&
|
|
(String(value) === String(hiddenItem.val) ||
|
|
value === "" ||
|
|
value === "0" ||
|
|
value === 0)
|
|
? undefined
|
|
: value !== undefined
|
|
? String(value)
|
|
: undefined;
|
|
|
|
return (
|
|
<div className={className + " flex items-center"} ref={ref}>
|
|
{label && (
|
|
<Label className="w-20 whitespace-nowrap text-xl text-gray-600">
|
|
{label}
|
|
</Label>
|
|
)}
|
|
<Select
|
|
open={isOpen}
|
|
onOpenChange={(open) => {
|
|
if (readOnly === true) {
|
|
// readOnly 일경우 Select 선택안하게 하기
|
|
setIsOpen(false);
|
|
} else {
|
|
setIsOpen(open);
|
|
}
|
|
}}
|
|
onValueChange={onSelectValue}
|
|
value={currentValue}
|
|
// disabled={readOnly} //물재이용 감리 지적사항으로 일단 주석처리
|
|
>
|
|
<SelectTrigger
|
|
className={selectClass ? selectClass : "flex-1 rounded border p-2"}
|
|
>
|
|
<SelectValue placeholder={placeHolder} />
|
|
</SelectTrigger>
|
|
<SelectContent className={selectContentClass}>
|
|
{visibleItems.map((selectArray) => (
|
|
<SelectItem key={selectArray.val} value={String(selectArray.val)}>
|
|
{selectArray.text}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
);
|
|
},
|
|
);
|
|
|
|
export { SelectBox };
|