111 lines
3.4 KiB
TypeScript
111 lines
3.4 KiB
TypeScript
import { MinusOutlined } from "@ant-design/icons";
|
|
import { Button, Grid, InputNumber, Popconfirm } from "antd";
|
|
import DeleteIcon from "components/Icons/DeleteIcon";
|
|
import PlusIcon from "components/Icons/PlusIcon";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useAppSelector } from "redux/hooks";
|
|
import { colors } from "../../ThemeConstants";
|
|
import styles from "./ActionsButtons.module.css";
|
|
|
|
const { useBreakpoint } = Grid;
|
|
|
|
export default function ActionsButtons({
|
|
quantity,
|
|
setQuantity,
|
|
max,
|
|
min,
|
|
}: {
|
|
quantity: number;
|
|
setQuantity: (quantity: number) => void;
|
|
max?: number;
|
|
min?: number;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const { xs } = useBreakpoint(); // Default to desktop
|
|
const { isRTL } = useAppSelector((state) => state.locale); // Default to LTR
|
|
|
|
const getPopconfirmOverlayStyle = () => ({
|
|
width: xs ? "280px" : "auto",
|
|
maxWidth: "320px",
|
|
".antPopconfirmMessageTitle": {
|
|
fontSize: xs ? "14px" : "16px",
|
|
paddingRight: xs ? "24px" : "0",
|
|
},
|
|
".antPopconfirmMessageContent": {
|
|
fontSize: xs ? "13px" : "14px",
|
|
marginTop: "4px",
|
|
},
|
|
".antPopconfirmButtons": {
|
|
marginTop: "12px",
|
|
".ant-btn": {
|
|
fontSize: xs ? "13px" : "14px",
|
|
height: xs ? "28px" : "32px",
|
|
padding: xs ? "0 12px" : "4px 15px",
|
|
},
|
|
},
|
|
});
|
|
|
|
return (
|
|
<div className={styles.cartItemActions}>
|
|
<div className={styles.quantityControls}>
|
|
<div className={styles.quantityInputContainer}>
|
|
{quantity > 0 ? (
|
|
<Button
|
|
type="text"
|
|
size="small"
|
|
onClick={() => setQuantity(Math.max(1, quantity - 1))}
|
|
className={styles.quantityButton}
|
|
{...(min && { disabled: quantity === min })}
|
|
>
|
|
<MinusOutlined style={{ fontSize: 16, color: colors.primary }} />
|
|
</Button>
|
|
) : (
|
|
<Popconfirm
|
|
title={t("cart.deleteConfirmation.title")}
|
|
description={t("cart.deleteConfirmation.content")}
|
|
onConfirm={() => setQuantity(0)}
|
|
okText={t("cart.deleteConfirmation.confirm")}
|
|
cancelText={t("cart.deleteConfirmation.cancel")}
|
|
okButtonProps={{ danger: true }}
|
|
placement={isRTL ? "left" : "right"}
|
|
styles={{
|
|
root: getPopconfirmOverlayStyle(),
|
|
body: {
|
|
padding: xs ? "12px" : "16px",
|
|
},
|
|
}}
|
|
>
|
|
<Button
|
|
type="text"
|
|
size="small"
|
|
danger
|
|
icon={<DeleteIcon className={styles.deleteIcon} />}
|
|
className={styles.removeButton}
|
|
/>
|
|
</Popconfirm>
|
|
)}
|
|
<InputNumber
|
|
min={min || 1}
|
|
max={max || 100}
|
|
value={quantity || 1}
|
|
onChange={(value) => setQuantity(value || 1)}
|
|
size="small"
|
|
controls={false}
|
|
className={styles.quantityInput}
|
|
name="id"
|
|
/>
|
|
<Button
|
|
type="text"
|
|
size="small"
|
|
onClick={() => setQuantity(Math.min(100, quantity + 1))}
|
|
className={styles.quantityButton}
|
|
{...(max && { disabled: quantity >= max })}
|
|
>
|
|
<PlusIcon className={styles.plusIcon} />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|