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 | 15x 129x 5x 5x 5x 129x 15x 129x | import { Box, SxProps } from "@mui/material";
import { MinusIcon, PlusIcon } from "@phosphor-icons/react";
import GiveIconButton from "@shared/IconButton/GiveIconButton";
import GiveText from "@shared/Text/GiveText";
import { styled } from "@theme/v2/Provider";
import GiveTooltip from "@shared/Tooltip/GiveTooltip";
import { CANNOT_EXCEED_MAX_AMOUNT } from "@constants/stringConstants";
interface Props {
handleDecrement: (e?: React.MouseEvent) => void;
handleIncrement: (e?: React.MouseEvent) => void;
quantity: number;
sx?: SxProps;
disableAddition?: boolean;
textColor?: string;
isAmountExceeded?: boolean;
disabled?: boolean;
}
const QuantityInput = ({
handleDecrement,
handleIncrement,
quantity,
sx,
disableAddition,
textColor,
isAmountExceeded,
disabled,
}: Props) => {
const QuantityInputClick = (e: React.MouseEvent) => {
Iif (disabled) return;
e.preventDefault();
e.stopPropagation();
};
return (
<StyledBox sx={{ ...sx }} onClick={QuantityInputClick}>
<StyledIcon
variant="ghost"
size="extraSmall"
onClick={handleDecrement}
Icon={MinusIcon}
data-testid="minus-button"
color={textColor}
disabled={disabled}
/>
<GiveText
data-testid="quantity-display-text"
variant="bodyS"
sx={{ color: textColor }}
>
{quantity}
</GiveText>
<GiveTooltip
title={CANNOT_EXCEED_MAX_AMOUNT}
placement="top"
disableHoverListener={!isAmountExceeded}
>
<StyledIcon
variant="ghost"
size="extraSmall"
onClick={handleIncrement}
Icon={PlusIcon}
disabled={disableAddition || isAmountExceeded || disabled}
data-testid="plus-button"
color={textColor}
/>
</GiveTooltip>
</StyledBox>
);
};
export default QuantityInput;
const StyledIcon = styled(GiveIconButton)({
"&:hover": {
background: "transparent !important",
},
});
const StyledBox = styled(Box)(({ theme }) => ({
background: theme.palette.primitive?.transparent["darken-5"],
display: "flex",
alignItems: "center",
justifyContent: "space-between",
bgcolor: "#f4f4f4",
borderRadius: "24px",
padding: "4px 16px",
minWidth: "88px",
}));
|