137 lines
3.4 KiB
TypeScript
137 lines
3.4 KiB
TypeScript
import { Button, Divider, Form, Input } from "antd";
|
|
import { RoomDetailsType } from "features/order/orderSlice";
|
|
import { useEffect } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
|
|
import ProRatioGroups from "../ProRatioGroups/ProRatioGroups";
|
|
|
|
const { TextArea } = Input;
|
|
|
|
interface RoomBottomSheetProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
initialValue: RoomDetailsType | null;
|
|
onSave: (value: RoomDetailsType) => void;
|
|
}
|
|
|
|
export function RoomBottomSheet({
|
|
isOpen,
|
|
onClose,
|
|
initialValue,
|
|
onSave,
|
|
}: RoomBottomSheetProps) {
|
|
const { t } = useTranslation();
|
|
const [roomForm] = Form.useForm();
|
|
useEffect(() => {
|
|
roomForm.setFieldsValue(initialValue);
|
|
}, [initialValue, roomForm]);
|
|
|
|
const handleSave = () => {
|
|
onSave(roomForm.getFieldsValue());
|
|
roomForm.resetFields();
|
|
onClose();
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
roomForm.setFieldsValue(initialValue);
|
|
roomForm.resetFields();
|
|
onClose();
|
|
};
|
|
|
|
return (
|
|
<ProBottomSheet
|
|
isOpen={isOpen}
|
|
onClose={handleCancel}
|
|
title={t("address.roomDetails")}
|
|
showCloseButton={false}
|
|
initialSnap={1}
|
|
height={665}
|
|
snapPoints={[665]}
|
|
>
|
|
<Form
|
|
layout="vertical"
|
|
style={{ marginTop: 12 }}
|
|
name="roomForm"
|
|
form={roomForm}
|
|
initialValues={initialValue as RoomDetailsType}
|
|
>
|
|
<Form.Item
|
|
name="roomNo"
|
|
label={t("address.roomNo")}
|
|
rules={[{ required: true, message: "" }]}
|
|
colon={false}
|
|
>
|
|
<Input
|
|
placeholder={t("address.roomNo")}
|
|
size="large"
|
|
style={{
|
|
fontSize: 14,
|
|
height: 50,
|
|
}}
|
|
autoFocus={false}
|
|
/>
|
|
</Form.Item>{" "}
|
|
<Form.Item
|
|
name="floorNo"
|
|
label={t("address.floorNo")}
|
|
rules={[{ required: true, message: "" }]}
|
|
>
|
|
<Input
|
|
placeholder={t("address.floorNo")}
|
|
size="large"
|
|
style={{
|
|
fontSize: 14,
|
|
height: 50,
|
|
}}
|
|
autoFocus={false}
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item name="guestName" label={t("address.guestName")}>
|
|
<Input
|
|
placeholder={t("address.guestName")}
|
|
size="large"
|
|
style={{
|
|
fontSize: 14,
|
|
height: 50,
|
|
}}
|
|
autoFocus={false}
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item name="note" label={t("address.note")}>
|
|
<TextArea
|
|
placeholder={t("address.addressLabel")}
|
|
size="large"
|
|
style={{
|
|
fontSize: 14,
|
|
borderRadius: 10,
|
|
}}
|
|
rows={2}
|
|
autoFocus={false}
|
|
/>
|
|
</Form.Item>
|
|
<Divider />
|
|
<Form.Item name="deliverWay">
|
|
<ProRatioGroups
|
|
options={[
|
|
{
|
|
label: t("address.pleaseKnockSoftly"),
|
|
value: "pleaseKnockSoftly",
|
|
},
|
|
{
|
|
label: t("address.deliverToRoom"),
|
|
value: "deliverToRoom",
|
|
},
|
|
]}
|
|
/>
|
|
</Form.Item>
|
|
</Form>
|
|
|
|
<br />
|
|
|
|
<Button type="primary" style={{ width: "100%" }} onClick={handleSave}>
|
|
{t("address.save")}
|
|
</Button>
|
|
</ProBottomSheet>
|
|
);
|
|
}
|