Merge commit '42b6dfc616c308e474a354de305ed6bb6dc89e80' into iipbs/wr/form_fuction
This commit is contained in:
@@ -6,22 +6,40 @@ type ModalType = {
|
||||
body: React.ReactNode;
|
||||
open?: boolean;
|
||||
onOpenChange?: (open: boolean) => void;
|
||||
noHeaderYn?: 'N' | 'Y';
|
||||
noFooterYn?: 'N' | 'Y';
|
||||
headerTitle?: string;
|
||||
footerContent?: React.ReactNode;
|
||||
}
|
||||
|
||||
export function UiModal({ bodyClass, body, open, onOpenChange }: ModalType) {
|
||||
export function UiModal({
|
||||
bodyClass,
|
||||
body,
|
||||
open,
|
||||
onOpenChange,
|
||||
noHeaderYn = 'N',
|
||||
noFooterYn = 'N',
|
||||
headerTitle,
|
||||
footerContent
|
||||
}: ModalType) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className={bodyClass}>
|
||||
<DialogHeader>
|
||||
<DialogDescription>
|
||||
</DialogDescription>
|
||||
|
||||
</DialogHeader>
|
||||
{(open && body)}
|
||||
<DialogFooter className="sm:justify-start">
|
||||
</DialogFooter>
|
||||
{noHeaderYn === 'N' && (
|
||||
<DialogHeader>
|
||||
<DialogDescription>
|
||||
{headerTitle}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
)}
|
||||
{(open && body)}
|
||||
{noFooterYn === 'N' && (
|
||||
<DialogFooter className="sm:justify-start">
|
||||
{footerContent}
|
||||
</DialogFooter>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
|
||||
@@ -12,29 +12,36 @@ type UiTableProps = {
|
||||
cellClick : ((index:number|undefined, headId:string)=>void )| undefined;
|
||||
onPageChange: (page: number) => void;
|
||||
className?: string;
|
||||
resetPageNo?: boolean;
|
||||
}
|
||||
|
||||
type UiHeadProps = {
|
||||
id: string;
|
||||
title: string;
|
||||
align?: string;
|
||||
}
|
||||
|
||||
export function UiTable({ tableData, headlist, pageSize, total, children, headName, cellClick, onPageChange, className = '' }: UiTableProps) {
|
||||
export function UiTable({ tableData, headlist, pageSize, total, children, headName, cellClick, onPageChange, className = '', resetPageNo = false }: UiTableProps) {
|
||||
const [cur, setCur] = useState<number>(1);
|
||||
const [idx, setIdx] = useState<number>(-1);
|
||||
|
||||
useEffect(() => {
|
||||
if (resetPageNo) {
|
||||
setCur(1);
|
||||
onPageChange(1);
|
||||
}
|
||||
}, [onPageChange, resetPageNo]);
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
setCur(page);
|
||||
onPageChange(page);
|
||||
}
|
||||
|
||||
|
||||
const handleCellClick = (index: number,headId:string )=> {
|
||||
if (cellClick) {
|
||||
cellClick(index,headId);
|
||||
setIdx(index);
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -43,8 +50,8 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa
|
||||
<h3 className="text-2xl font-medium text-label">{headName}</h3>
|
||||
</div> : <></>}
|
||||
<div className={`card !m-[1.2rem] !p-0r ${className}`}>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<Table variant="secondary">
|
||||
<TableHeader >
|
||||
{children ? <>{children}</> : <TableRow>
|
||||
{headlist?.map((head) => (
|
||||
<TableHead key={head.id}>{head.title}</TableHead>
|
||||
@@ -52,11 +59,19 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa
|
||||
</TableRow>}
|
||||
</TableHeader>
|
||||
<TableBody className='text-center'>
|
||||
{tableData?.map((el: { [key: string]: any}, index) => (
|
||||
<TableRow key={index + "row"} >
|
||||
{tableData?.map((el: { [key: string]: string | number | boolean | object}, index) => (
|
||||
<TableRow key={index + "row"}>
|
||||
{headlist?.map((head) => (
|
||||
// <TableCell className={cellClick&&idx==index?"bg-black/10 cursor-pointer":cellClick?"cursor-pointer":""} onClick={()=>handleCellClick(index)} key={head.id + index}>{el[head.id]}</TableCell>
|
||||
<TableCell className={cellClick&&idx==index?"opacity-40 cursor-pointer":cellClick?"cursor-pointer":""} onClick={(e)=>handleCellClick(index,head.id)} key={head.id + index}>{el[head.id]}</TableCell>
|
||||
<TableCell
|
||||
className={`${head.align === 'right' ? 'text-right' : 'text-center'} ${
|
||||
cellClick && idx === index ? '!font-[1000] cursor-pointer' :
|
||||
cellClick ? 'cursor-pointer' : ''
|
||||
}`}
|
||||
onClick={() => handleCellClick(index, head.id)}
|
||||
key={head.id + index}
|
||||
>
|
||||
{String(el[head.id] ?? '')}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
|
||||
@@ -29,7 +29,7 @@ const TableHeader = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
|
||||
<thead ref={ref} className={cn("sticky top-0 bg-secondary [&_tr]:border-b", className)} {...props} />
|
||||
));
|
||||
TableHeader.displayName = "TableHeader";
|
||||
|
||||
|
||||
Reference in New Issue
Block a user