Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | import QuillEditor from '@lib/components/QuillEditor';
import {
ManageCreateOrUpdateRewardRequestDtoRewardTypeEnum,
ManageUserRewardResponseDto
} from '@uniquegood/realworld-adventure-interface';
import { Form, Input, InputNumber, Modal, ModalProps, Select, Image } from 'antd';
import { Delta } from 'quill';
import React from 'react';
import styled from 'styled-components';
interface ModifyModalProps {
modalData: ModalProps;
closeModal: () => unknown;
userReward: ManageUserRewardResponseDto;
}
export default function DetailModal({ modalData, userReward }: ModifyModalProps) {
const [currentType, setCurrentType] =
React.useState<ManageCreateOrUpdateRewardRequestDtoRewardTypeEnum>();
const [currentGoodsCode, setCurrentGoodsCode] = React.useState<string>();
const [currentInfo, setCurrentInfo] = React.useState<Delta>();
const prevGoodsCode = React.useRef(currentGoodsCode);
const [form] = Form.useForm();
React.useEffect(() => {
setCurrentType(userReward.rewardType);
const { customData } = userReward;
if ('goodsCode' in customData && typeof customData.goodsCode === 'string') {
setCurrentGoodsCode(customData.goodsCode);
}
setCurrentInfo(JSON.parse(userReward.rewardInfo));
form.setFieldsValue({
name: userReward.rewardName,
description: userReward.description,
imageUrl: userReward.imageUrl,
rewardType: userReward.rewardType,
goodsCode: 'goodsCode' in customData ? customData.goodsCode : undefined,
weight: 'weight' in customData ? customData.weight : undefined,
order: 'order' in customData ? customData.order : undefined,
count: 'count' in customData ? customData.count : undefined
});
if ('goodsCode' in customData && typeof customData.goodsCode === 'string') {
prevGoodsCode.current = customData.goodsCode;
}
}, [userReward]);
return (
<Modal {...modalData} width={1000} title="유저 보상 정보(수정 불가)" footer={false}>
<Form form={form} disabled>
<Form.Item name="rewardType">
<Select
placeholder="보상 타입을 선택해주세요"
options={[
{ label: '기프티쇼', value: 'GiftShow' },
{ label: '할인권', value: 'DiscountTicket' },
{ label: '교환권', value: 'ExchangeTicket' },
{ label: '뽑기권', value: 'Draw' },
{ label: '프로젝트', value: 'Project' }
]}
onChange={(value) => setCurrentType(value)}
/>
</Form.Item>
{currentType === 'GiftShow' && (
<Form.Item name="goodsCode">
<Select />
</Form.Item>
)}
<Form.Item name="name">
<Input placeholder="보상 이름을 입력해주세요" />
</Form.Item>
<Form.Item name="description">
<Input placeholder="보상 설명을 입력해주세요" />
</Form.Item>
<Form.Item name="imageUrl">
<Image
width={150}
height={150}
style={{ objectFit: 'contain' }}
src={userReward.imageUrl}
/>
</Form.Item>
{(currentType === 'ExchangeTicket' || currentType === 'DiscountTicket') && (
<>
<Form.Item name="weight">
<StyledInputNumber placeholder="가중치를 입력해주세요" />
</Form.Item>
<Form.Item name="order">
<StyledInputNumber placeholder="순서를 입력해주세요" />
</Form.Item>
</>
)}
{prevGoodsCode.current === currentGoodsCode && (
<Form.Item>
<QuillEditor value={currentInfo} onChange={setCurrentInfo} disabled />
</Form.Item>
)}
</Form>
</Modal>
);
}
const StyledInputNumber = styled(InputNumber)`
width: 100%;
`;
|