112 lines
2.4 KiB
JavaScript
112 lines
2.4 KiB
JavaScript
import { DetailMessage, TableStyle, TableWrapper } from '../../../styles/Components';
|
|
import { StatusLabel } from '../../../styles/ModuleComponents';
|
|
import { Button, CheckBox } from '../index';
|
|
import { convertKTC, getOptionsArray } from '../../../utils';
|
|
import { styled } from 'styled-components';
|
|
|
|
const CaliTable = ({
|
|
columns,
|
|
data,
|
|
selectedRows = [],
|
|
onSelectRow,
|
|
onAction,
|
|
refProp
|
|
}) => {
|
|
|
|
const renderCell = (column, item) => {
|
|
const { type, id, option_name, format, action } = column;
|
|
const value = item[id];
|
|
|
|
const options = getOptionsArray(option_name);
|
|
|
|
switch (type) {
|
|
case 'text':
|
|
return value;
|
|
|
|
case 'date':
|
|
return convertKTC(value);
|
|
|
|
case 'status':
|
|
const statusOption = options.find(opt => opt.value === value);
|
|
return (
|
|
<StatusWapper>
|
|
<StatusLabel $status={value}>
|
|
{statusOption ? statusOption.name : value}
|
|
</StatusLabel>
|
|
</StatusWapper>
|
|
);
|
|
|
|
case 'button':
|
|
return (
|
|
<Button
|
|
theme="line"
|
|
text={column.text || "액션"}
|
|
handleClick={() => onAction(id, item)}
|
|
/>
|
|
);
|
|
|
|
case 'checkbox':
|
|
return (
|
|
<CheckBox
|
|
name={column.name || 'select'}
|
|
id={item.id}
|
|
setData={(e) => onSelectRow(e, item)}
|
|
checked={selectedRows.some(row => row.id === item.id)}
|
|
/>
|
|
);
|
|
|
|
case 'option':
|
|
const dataOption = options.find(opt => opt.value === value);
|
|
return (
|
|
dataOption ? dataOption.name : value
|
|
);
|
|
|
|
case "link":
|
|
return (
|
|
<DetailMessage onClick={() => onAction(action)}>
|
|
{value.content.length > 20 ? value.content.slice(0, 20) + '...' : value.content || ''}
|
|
</DetailMessage>
|
|
);
|
|
|
|
default:
|
|
return value;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<TableWrapper>
|
|
<TableStyle ref={refProp}>
|
|
<caption></caption>
|
|
<thead>
|
|
<tr>
|
|
{columns.map((column, index) => (
|
|
<th key={index} width={column.width || 'auto'}>
|
|
{column.title}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{data?.map((item, rowIndex) => (
|
|
<tr key={rowIndex}>
|
|
{columns.map((column, colIndex) => (
|
|
<td key={colIndex}>
|
|
{renderCell(column, item)}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</TableStyle>
|
|
</TableWrapper>
|
|
);
|
|
};
|
|
|
|
export default CaliTable;
|
|
|
|
const StatusWapper = styled.div`
|
|
display: flex;
|
|
gap: 0.35rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
`; |