Files
web-menu-react-version/src/components/InputCard.tsx

47 lines
1.2 KiB
TypeScript

import { Form, Input } from "antd";
import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
import { updateOrder } from "features/order/orderSlice";
import { useAppDispatch } from "redux/hooks";
interface InputCardProps {
title: string;
name: string;
placeholder: string;
value: string;
required?: boolean;
reuireqMessage?: string;
}
export default function InputCard({
title,
name,
placeholder,
value,
required = false,
reuireqMessage = "",
}: InputCardProps) {
const dispatch = useAppDispatch();
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
dispatch(updateOrder({ [name]: e.target.value }));
};
return (
<>
<ProInputCard title={title} dividerStyle={{ margin: "5px 0 0 0" }}>
<Form.Item
name={name}
rules={[{ required, message: reuireqMessage }]}
>
<Input
placeholder={placeholder}
size="large"
autoFocus={false}
style={{ padding: "7px 11px", height: 48, borderRadius: 888 }}
value={value}
onChange={handleChange}
/>
</Form.Item>
</ProInputCard>
</>
);
}