92 lines
3.1 KiB
TypeScript
92 lines
3.1 KiB
TypeScript
import React from 'react';
|
|
import classNames from 'classnames/bind';
|
|
|
|
import { GivingEmoticonState } from '@pages/emoticons/givingEmoticons/GivingEmoticons';
|
|
|
|
import styles from './EmoticonTable.module.scss';
|
|
import { EmoticonListRequest, EmoticonListResponse } from '@api/emoticonAPI';
|
|
import { Page } from 'src/services/commonResponse/PageResponse';
|
|
import Button from '@components/ui/button/Button';
|
|
import Pagination from '@components/ui/pagination/Pagination';
|
|
|
|
const cn = classNames.bind(styles);
|
|
|
|
interface Props {
|
|
emoticonListData: Page<EmoticonListResponse> | undefined;
|
|
emoticonListRequest: EmoticonListRequest;
|
|
btnName?: 'Edit' | 'Gift';
|
|
onModalClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
setEmoticonListRequest: React.Dispatch<React.SetStateAction<EmoticonListRequest>>;
|
|
setEmoticonState?: React.Dispatch<React.SetStateAction<GivingEmoticonState>>;
|
|
}
|
|
|
|
const EmoticonTable = ({
|
|
emoticonListData,
|
|
onModalClick,
|
|
btnName = 'Edit',
|
|
emoticonListRequest,
|
|
setEmoticonListRequest,
|
|
setEmoticonState
|
|
}: Props) => {
|
|
if (!emoticonListData || emoticonListData.content.length === 0) {
|
|
return <div>No emoticonListData available</div>;
|
|
}
|
|
return (
|
|
<div className={cn('emoticon_list_table')}>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th className="width-18">Emoticon</th>
|
|
<th className="width-18">Emoticon Name</th>
|
|
<th className="width-18">Guid</th>
|
|
<th className="width-18">Price</th>
|
|
<th className="width-18">Registration Date</th>
|
|
<th className="width-18"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{emoticonListData?.content.map((item, idx: number) => (
|
|
<tr key={idx}>
|
|
<td className="width-18">
|
|
<div className={cn('gift_emoticon_box')}>
|
|
<img src={item.absFilePath} alt={item.emotiName} />
|
|
</div>
|
|
</td>
|
|
<td className="width-18">{item.emotiName}</td>
|
|
<td className="width-18">{item.guid}</td>
|
|
<td className="width-18">{item.price}</td>
|
|
<td className="width-18">{item.regDt}</td>
|
|
<td className="width-18">
|
|
<Button
|
|
size="sm"
|
|
color="rounded"
|
|
value={item.guid}
|
|
name={item.emotiName}
|
|
onClick={(e) => {
|
|
onModalClick(e);
|
|
setEmoticonState?.({ guid: item.guid, emoticonName: item.emotiName });
|
|
}}
|
|
>
|
|
{btnName === 'Edit' ? 'Edit' : 'Gift'}
|
|
</Button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
<div className="list_footer">
|
|
<Pagination
|
|
totalItems={emoticonListData?.totalElements ?? 0}
|
|
itemsPerPage={emoticonListRequest.size}
|
|
currentPage={emoticonListRequest.page}
|
|
onPaginate={(pageNumber: number) =>
|
|
setEmoticonListRequest((prevState) => ({ ...prevState, page: pageNumber }))
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EmoticonTable;
|