pixelize-design-library 2.2.104 → 2.2.105
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { ProductCardProps } from "./ProductCardProps";
|
|
3
|
-
declare const ProductCard: ({ id, label, productImage, rating, reviews, tags, options, button, batch,
|
|
3
|
+
declare const ProductCard: ({ id, label, productImage, rating, reviews, tags, options, button, batch, onAddToCart, onNotifyMe, onClick, onOptionChange, addToCart, goToCart, OnGoToCart, size, notifyMe, isQtyEditable, displayRating, }: ProductCardProps) => React.JSX.Element;
|
|
4
4
|
export default ProductCard;
|
|
@@ -36,13 +36,12 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
|
36
36
|
var lucide_react_1 = require("lucide-react");
|
|
37
37
|
var ProductReview_1 = __importDefault(require("./ProductReview"));
|
|
38
38
|
var ProductCard = function (_a) {
|
|
39
|
-
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
40
|
-
var id = _a.id, label = _a.label, productImage = _a.productImage, rating = _a.rating, reviews = _a.reviews, tags = _a.tags, options = _a.options, button = _a.button, batch = _a.batch,
|
|
41
|
-
|
|
42
|
-
var _o = (0, react_1.useState)(false), hover = _o[0], setHover = _o[1];
|
|
39
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
40
|
+
var id = _a.id, label = _a.label, productImage = _a.productImage, rating = _a.rating, reviews = _a.reviews, tags = _a.tags, options = _a.options, button = _a.button, batch = _a.batch, onAddToCart = _a.onAddToCart, onNotifyMe = _a.onNotifyMe, onClick = _a.onClick, onOptionChange = _a.onOptionChange, addToCart = _a.addToCart, goToCart = _a.goToCart, OnGoToCart = _a.OnGoToCart, _l = _a.size, size = _l === void 0 ? "sm" : _l, notifyMe = _a.notifyMe, _m = _a.isQtyEditable, isQtyEditable = _m === void 0 ? false : _m, _o = _a.displayRating, displayRating = _o === void 0 ? true : _o;
|
|
41
|
+
var _p = (0, react_1.useState)(false), hover = _p[0], setHover = _p[1];
|
|
43
42
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
44
|
-
var
|
|
45
|
-
var
|
|
43
|
+
var _q = (0, react_1.useState)(options === null || options === void 0 ? void 0 : options[0]), selectedOption = _q[0], setSelectedOption = _q[1];
|
|
44
|
+
var _r = (0, react_1.useState)(1), qty = _r[0], setQty = _r[1];
|
|
46
45
|
var handleOptionSelect = function (option) {
|
|
47
46
|
setSelectedOption(option);
|
|
48
47
|
onOptionChange === null || onOptionChange === void 0 ? void 0 : onOptionChange(option);
|
|
@@ -65,12 +64,13 @@ var ProductCard = function (_a) {
|
|
|
65
64
|
md: { cardWidth: "20rem", imgHeight: "15rem", padding: 5 },
|
|
66
65
|
lg: { cardWidth: "22rem", imgHeight: "17rem", padding: 6 },
|
|
67
66
|
};
|
|
68
|
-
var
|
|
67
|
+
var _s = sizeStyles[size], cardWidth = _s.cardWidth, imgHeight = _s.imgHeight, padding = _s.padding;
|
|
68
|
+
var imageList = (_b = productImage === null || productImage === void 0 ? void 0 : productImage.filter(function (img) { return img.isImage !== false; })) !== null && _b !== void 0 ? _b : [];
|
|
69
69
|
var allowedSizes = ["sm", "md", "lg", "xl", "xs"];
|
|
70
70
|
var safeSize = allowedSizes.includes(size) ? size : "md";
|
|
71
71
|
return (react_1.default.createElement(react_2.Box, { borderWidth: "0.063rem", borderRadius: "lg", overflow: "hidden", w: "full", maxW: cardWidth, h: "full", display: "flex", flexDirection: "column", position: "relative", bg: theme.colors.white, boxShadow: "lg" },
|
|
72
|
-
react_1.default.createElement(react_2.Box, { onMouseEnter: function () { return setHover(true); }, onMouseLeave: function () { return setHover(false); }, h: imgHeight, w: "full", overflow: "hidden", onClick: onClick, cursor: "pointer" },
|
|
73
|
-
react_1.default.createElement(react_2.Image, { src: hover && ((
|
|
72
|
+
imageList.length > 0 && (react_1.default.createElement(react_2.Box, { onMouseEnter: function () { return setHover(true); }, onMouseLeave: function () { return setHover(false); }, h: imgHeight, w: "full", overflow: "hidden", onClick: onClick, cursor: "pointer" },
|
|
73
|
+
react_1.default.createElement(react_2.Image, { src: hover && ((_c = imageList === null || imageList === void 0 ? void 0 : imageList[1]) === null || _c === void 0 ? void 0 : _c.imageUrl) ? imageList[1].imageUrl : (_d = imageList === null || imageList === void 0 ? void 0 : imageList[0]) === null || _d === void 0 ? void 0 : _d.imageUrl, alt: label, w: "full", h: "full", transform: hover ? "scale(1.06)" : "scale(1)", transition: "transform 0.7s cubic-bezier(0.16, 1, 0.3, 1)" }),
|
|
74
74
|
batch && (react_1.default.createElement(react_2.Badge, { colorScheme: batch.color || "green", position: "absolute", top: 2, right: 2, fontSize: {
|
|
75
75
|
xs: "xs",
|
|
76
76
|
sm: "sm",
|
|
@@ -86,7 +86,7 @@ var ProductCard = function (_a) {
|
|
|
86
86
|
sm: 1,
|
|
87
87
|
md: 1.5,
|
|
88
88
|
lg: 2,
|
|
89
|
-
}[size] }, batch.label))),
|
|
89
|
+
}[size] }, batch.label)))),
|
|
90
90
|
react_1.default.createElement(react_2.VStack, { spacing: 2, align: "start", p: padding, flex: "1", w: "full" },
|
|
91
91
|
react_1.default.createElement(react_2.Box, { onClick: onClick, cursor: "pointer" },
|
|
92
92
|
react_1.default.createElement(ProductLabel_1.default, { label: label, size: size })),
|
|
@@ -95,15 +95,15 @@ var ProductCard = function (_a) {
|
|
|
95
95
|
? react_1.default.createElement(ProductReview_1.default, { rating: rating, reviewCount: reviews })
|
|
96
96
|
: undefined })),
|
|
97
97
|
react_1.default.createElement(react_2.VStack, { w: "full", align: "stretch", spacing: 2, mt: "auto" },
|
|
98
|
-
typeof (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) === "number" && ((
|
|
99
|
-
addToCart && (((
|
|
98
|
+
typeof (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) === "number" && ((_e = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _e !== void 0 ? _e : 0) <= 0 && (react_1.default.createElement(Button_1.default, { colorScheme: "gray", size: safeSize, width: "100%", isDisabled: true }, "Out of Stock")),
|
|
99
|
+
addToCart && (((_f = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _f !== void 0 ? _f : 1) > 0) && isQtyEditable && (react_1.default.createElement(react_2.HStack, { w: "full", justify: "space-between" },
|
|
100
100
|
react_1.default.createElement(react_2.HStack, null,
|
|
101
101
|
react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Minus, { size: 16 }), "aria-label": "Decrease quantity", size: "xs", onClick: handleDecrement, isDisabled: qty <= 1, isRound: true, variant: "outline", colorScheme: "red" }),
|
|
102
102
|
react_1.default.createElement(react_2.Text, { fontWeight: "bold", w: 8, textAlign: "center" }, qty),
|
|
103
|
-
react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Plus, { size: 16 }), "aria-label": "Increase quantity", size: "xs", onClick: handleIncrement, isDisabled: qty >= ((
|
|
104
|
-
(button === null || button === void 0 ? void 0 : button.onClick) && (react_1.default.createElement(Button_1.default, { colorScheme: "red", size: safeSize, width: "100%", onClick: button === null || button === void 0 ? void 0 : button.onClick }, (
|
|
105
|
-
addToCart && (((
|
|
106
|
-
addToCart && (((
|
|
103
|
+
react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Plus, { size: 16 }), "aria-label": "Increase quantity", size: "xs", onClick: handleIncrement, isDisabled: qty >= ((_g = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _g !== void 0 ? _g : 1), isRound: true, variant: "outline", colorScheme: "red" })))),
|
|
104
|
+
(button === null || button === void 0 ? void 0 : button.onClick) && (react_1.default.createElement(Button_1.default, { colorScheme: "red", size: safeSize, width: "100%", onClick: button === null || button === void 0 ? void 0 : button.onClick }, (_h = button.label) !== null && _h !== void 0 ? _h : "Add to Cart")),
|
|
105
|
+
addToCart && (((_j = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _j !== void 0 ? _j : 1) > 0) && (react_1.default.createElement(Button_1.default, { width: "100%", size: safeSize, onClick: function () { return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.var_id) !== undefined && (onAddToCart === null || onAddToCart === void 0 ? void 0 : onAddToCart(id, selectedOption.var_id, qty)); }, colorScheme: "red" }, "Add to Cart")),
|
|
106
|
+
addToCart && (((_k = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _k !== void 0 ? _k : 1) <= 0) && notifyMe && (react_1.default.createElement(Button_1.default, { width: "100%", size: safeSize, onClick: function () { return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.var_id) !== undefined && (onNotifyMe === null || onNotifyMe === void 0 ? void 0 : onNotifyMe(id, selectedOption.var_id)); }, colorScheme: "red", variant: "outline" }, "Notify Me")),
|
|
107
107
|
goToCart && (react_1.default.createElement(Button_1.default, { width: "100%", size: safeSize, onClick: OnGoToCart, colorScheme: "red" }, "Go to Cart"))))));
|
|
108
108
|
};
|
|
109
109
|
exports.default = ProductCard;
|