pixelize-design-library 2.2.79 → 2.2.81
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.
- package/dist/Components/ProductCard/ProductCard.d.ts +1 -1
- package/dist/Components/ProductCard/ProductCard.js +17 -21
- package/dist/Components/ProductCard/ProductCardProps.d.ts +1 -0
- package/dist/Components/ProductCard/ProductPrice.d.ts +1 -1
- package/dist/Components/ProductDetails/ProductDetails.d.ts +1 -1
- package/dist/Components/ProductDetails/ProductDetails.js +14 -19
- package/dist/Components/ProductDetails/ProductDetailsProps.d.ts +1 -0
- package/dist/Components/ProductDetails/ProductDtlPrice.d.ts +1 -1
- package/package.json +1 -1
|
@@ -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, description, avalabilitys, onAddToCart, onNotifyMe, onClick, addToCart, goToCart, OnGoToCart, size, }: ProductCardProps) => React.JSX.Element;
|
|
3
|
+
declare const ProductCard: ({ id, label, productImage, rating, reviews, tags, options, button, batch, description, avalabilitys, onAddToCart, onNotifyMe, onClick, onOptionChange, addToCart, goToCart, OnGoToCart, size, }: ProductCardProps) => React.JSX.Element;
|
|
4
4
|
export default ProductCard;
|
|
@@ -36,12 +36,16 @@ var ProductLabel_1 = __importDefault(require("./ProductLabel"));
|
|
|
36
36
|
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
37
37
|
var lucide_react_1 = require("lucide-react");
|
|
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, description = _a.description, avalabilitys = _a.avalabilitys, onAddToCart = _a.onAddToCart, onNotifyMe = _a.onNotifyMe, onClick = _a.onClick, addToCart = _a.addToCart, goToCart = _a.goToCart, OnGoToCart = _a.OnGoToCart,
|
|
41
|
-
var
|
|
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, description = _a.description, avalabilitys = _a.avalabilitys, onAddToCart = _a.onAddToCart, onNotifyMe = _a.onNotifyMe, onClick = _a.onClick, onOptionChange = _a.onOptionChange, addToCart = _a.addToCart, goToCart = _a.goToCart, OnGoToCart = _a.OnGoToCart, _k = _a.size, size = _k === void 0 ? "sm" : _k;
|
|
41
|
+
var _l = (0, react_1.useState)(false), hover = _l[0], setHover = _l[1];
|
|
42
42
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
43
|
-
var
|
|
44
|
-
var
|
|
43
|
+
var _m = (0, react_1.useState)(options === null || options === void 0 ? void 0 : options[0]), selectedOption = _m[0], setSelectedOption = _m[1];
|
|
44
|
+
var _o = (0, react_1.useState)(1), qty = _o[0], setQty = _o[1];
|
|
45
|
+
var handleOptionSelect = function (option) {
|
|
46
|
+
setSelectedOption(option);
|
|
47
|
+
onOptionChange === null || onOptionChange === void 0 ? void 0 : onOptionChange(option);
|
|
48
|
+
};
|
|
45
49
|
var handleIncrement = function (e) {
|
|
46
50
|
e.stopPropagation();
|
|
47
51
|
if ((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) && qty < selectedOption.stocks) {
|
|
@@ -60,7 +64,7 @@ var ProductCard = function (_a) {
|
|
|
60
64
|
md: { cardWidth: "20rem", imgHeight: "15rem", padding: 5 },
|
|
61
65
|
lg: { cardWidth: "22rem", imgHeight: "17rem", padding: 6 },
|
|
62
66
|
};
|
|
63
|
-
var
|
|
67
|
+
var _p = sizeStyles[size], cardWidth = _p.cardWidth, imgHeight = _p.imgHeight, padding = _p.padding;
|
|
64
68
|
var allowedSizes = ["sm", "md", "lg", "xl", "xs"];
|
|
65
69
|
var safeSize = allowedSizes.includes(size) ? size : "md";
|
|
66
70
|
return (react_1.default.createElement(react_2.Box, { borderWidth: "0.063rem", borderRadius: "lg", overflow: "hidden", w: "full", maxW: cardWidth, position: "relative", bg: theme.colors.white, boxShadow: "lg" },
|
|
@@ -86,24 +90,16 @@ var ProductCard = function (_a) {
|
|
|
86
90
|
react_1.default.createElement(react_2.Box, { onClick: onClick, cursor: "pointer" },
|
|
87
91
|
react_1.default.createElement(ProductLabel_1.default, { label: label, description: description, size: size })),
|
|
88
92
|
tags && react_1.default.createElement(ProductTags_1.default, { tags: tags, size: size }),
|
|
89
|
-
options && react_1.default.createElement(ProductPrice_1.default, { options: options, size: size, onSelect:
|
|
90
|
-
typeof (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) === "number" && (
|
|
91
|
-
|
|
92
|
-
: ((_e = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _e !== void 0 ? _e : 0) > 0
|
|
93
|
-
? "orange"
|
|
94
|
-
: "red", fontSize: "xs", px: 2, py: 1, variant: "subtle", rounded: "md", fontWeight: "semibold", textTransform: "uppercase" }, ((_f = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _f !== void 0 ? _f : 0) >= 5
|
|
95
|
-
? "IN STOCK"
|
|
96
|
-
: ((_g = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _g !== void 0 ? _g : 0) > 0
|
|
97
|
-
? "".concat(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks, " IN STOCK")
|
|
98
|
-
: "OUT OF STOCK")),
|
|
99
|
-
addToCart && (((_h = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _h !== void 0 ? _h : 1) > 0) && (react_1.default.createElement(react_2.HStack, { w: "full", justify: "space-between", mb: 2 },
|
|
93
|
+
options && react_1.default.createElement(ProductPrice_1.default, { options: options, size: size, onSelect: handleOptionSelect }),
|
|
94
|
+
typeof (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) === "number" && ((_d = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _d !== void 0 ? _d : 0) <= 0 && (react_1.default.createElement(react_2.Badge, { colorScheme: "red", fontSize: "xs", px: 2, py: 1, variant: "subtle", rounded: "md", fontWeight: "semibold", textTransform: "uppercase" }, "OUT OF STOCK")),
|
|
95
|
+
addToCart && (((_e = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _e !== void 0 ? _e : 1) > 0) && (react_1.default.createElement(react_2.HStack, { w: "full", justify: "space-between", mb: 2 },
|
|
100
96
|
react_1.default.createElement(react_2.HStack, null,
|
|
101
97
|
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
98
|
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 && (((
|
|
99
|
+
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 >= ((_f = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _f !== void 0 ? _f : 1), isRound: true, variant: "outline", colorScheme: "red" })))),
|
|
100
|
+
(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 }, (_g = button.label) !== null && _g !== void 0 ? _g : "Add to Cart")),
|
|
101
|
+
addToCart && (((_h = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _h !== void 0 ? _h : 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")),
|
|
102
|
+
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 && (onNotifyMe === null || onNotifyMe === void 0 ? void 0 : onNotifyMe(id, selectedOption.var_id)); }, colorScheme: "red", variant: "outline" }, "Notify Me")),
|
|
107
103
|
goToCart && (react_1.default.createElement(Button_1.default, { width: "100%", size: safeSize, onClick: OnGoToCart, colorScheme: "red" }, "Go to Cart")))));
|
|
108
104
|
};
|
|
109
105
|
exports.default = ProductCard;
|
|
@@ -15,6 +15,7 @@ export type ProductCardProps = {
|
|
|
15
15
|
};
|
|
16
16
|
onAddToCart?: (id: string | number, var_id: number, qty?: number) => void;
|
|
17
17
|
onNotifyMe?: (id: string | number, var_id: number) => void;
|
|
18
|
+
onOptionChange?: (option: options) => void;
|
|
18
19
|
addToCart?: boolean;
|
|
19
20
|
goToCart?: boolean;
|
|
20
21
|
OnGoToCart?: () => void;
|
|
@@ -3,7 +3,7 @@ import { options, SizeType } from './ProductCardProps';
|
|
|
3
3
|
type ProductPriceProps = {
|
|
4
4
|
options: options[];
|
|
5
5
|
size: SizeType;
|
|
6
|
-
onSelect?:
|
|
6
|
+
onSelect?: (option: options) => void;
|
|
7
7
|
};
|
|
8
8
|
declare const ProductPrice: ({ options, size, onSelect }: ProductPriceProps) => React.JSX.Element;
|
|
9
9
|
export default ProductPrice;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { ProductDetailsProps } from "./ProductDetailsProps";
|
|
3
|
-
declare const ProductDetails: ({ id, price, label, shortdesc, tags, images, batch, category, onAddToCart, onNotifyMe, addToCart, goToCart, OnGoToCart, }: ProductDetailsProps) => React.JSX.Element;
|
|
3
|
+
declare const ProductDetails: ({ id, price, label, shortdesc, tags, images, batch, category, onAddToCart, onNotifyMe, onOptionChange, addToCart, goToCart, OnGoToCart, }: ProductDetailsProps) => React.JSX.Element;
|
|
4
4
|
export default ProductDetails;
|
|
@@ -13,11 +13,11 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
|
13
13
|
var Button_1 = __importDefault(require("../Button/Button"));
|
|
14
14
|
var lucide_react_1 = require("lucide-react");
|
|
15
15
|
var ProductDetails = function (_a) {
|
|
16
|
-
var _b, _c, _d, _e, _f
|
|
17
|
-
var id = _a.id, price = _a.price, label = _a.label, shortdesc = _a.shortdesc, tags = _a.tags, images = _a.images, batch = _a.batch, category = _a.category, onAddToCart = _a.onAddToCart, onNotifyMe = _a.onNotifyMe, addToCart = _a.addToCart, goToCart = _a.goToCart, OnGoToCart = _a.OnGoToCart;
|
|
16
|
+
var _b, _c, _d, _e, _f;
|
|
17
|
+
var id = _a.id, price = _a.price, label = _a.label, shortdesc = _a.shortdesc, tags = _a.tags, images = _a.images, batch = _a.batch, category = _a.category, onAddToCart = _a.onAddToCart, onNotifyMe = _a.onNotifyMe, onOptionChange = _a.onOptionChange, addToCart = _a.addToCart, goToCart = _a.goToCart, OnGoToCart = _a.OnGoToCart;
|
|
18
18
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
19
|
-
var
|
|
20
|
-
var
|
|
19
|
+
var _g = react_1.default.useState(price === null || price === void 0 ? void 0 : price[0]), selectedOption = _g[0], setSelectedOption = _g[1];
|
|
20
|
+
var _h = react_1.default.useState(1), qty = _h[0], setQty = _h[1];
|
|
21
21
|
react_1.default.useEffect(function () {
|
|
22
22
|
setQty(1);
|
|
23
23
|
}, [selectedOption]);
|
|
@@ -40,24 +40,19 @@ var ProductDetails = function (_a) {
|
|
|
40
40
|
label && react_1.default.createElement(ProductLabel_1.default, { label: label, size: "sm" }),
|
|
41
41
|
react_1.default.createElement(react_2.Text, { fontSize: "md", color: theme.colors.gray[700], my: 3 }, shortdesc),
|
|
42
42
|
tags && react_1.default.createElement(ProductTags_1.default, { tags: tags, size: "sm" }),
|
|
43
|
-
price && react_1.default.createElement(ProductDtlPrice_1.default, { price: price, onSelect:
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
: "red", fontSize: "xs", px: 2, py: 1, variant: "subtle", rounded: "md", fontWeight: "semibold", textTransform: "uppercase" }, ((_d = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _d !== void 0 ? _d : 0) >= 5
|
|
50
|
-
? "IN STOCK"
|
|
51
|
-
: ((_e = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _e !== void 0 ? _e : 0) > 0
|
|
52
|
-
? "".concat(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks, " IN STOCK")
|
|
53
|
-
: "OUT OF STOCK"))),
|
|
43
|
+
price && (react_1.default.createElement(ProductDtlPrice_1.default, { price: price, onSelect: function (option) {
|
|
44
|
+
setSelectedOption(option);
|
|
45
|
+
onOptionChange === null || onOptionChange === void 0 ? void 0 : onOptionChange(option);
|
|
46
|
+
} })),
|
|
47
|
+
typeof (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) === "number" && ((_b = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _b !== void 0 ? _b : 0) <= 0 && (react_1.default.createElement(react_2.Box, { sx: { ml: "1.1rem", mt: "0.5rem", mb: "0.5rem" } },
|
|
48
|
+
react_1.default.createElement(react_2.Badge, { colorScheme: "red", fontSize: "xs", px: 2, py: 1, variant: "subtle", rounded: "md", fontWeight: "semibold", textTransform: "uppercase" }, "OUT OF STOCK"))),
|
|
54
49
|
goToCart && (react_1.default.createElement(Button_1.default, { size: "sm", colorScheme: "red", leftIcon: react_1.default.createElement(lucide_react_1.ShoppingCartIcon, null), sx: { ml: "1.1rem" }, onClick: OnGoToCart }, "Go to cart")),
|
|
55
|
-
addToCart && (((
|
|
50
|
+
addToCart && (((_c = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _c !== void 0 ? _c : 1) > 0) && (react_1.default.createElement(react_2.HStack, { sx: { ml: "1.1rem", mb: 4 }, spacing: 4 },
|
|
56
51
|
react_1.default.createElement(react_2.HStack, null,
|
|
57
52
|
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" }),
|
|
58
53
|
react_1.default.createElement(react_2.Text, { fontWeight: "bold", w: 8, textAlign: "center" }, qty),
|
|
59
|
-
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 >= ((
|
|
60
|
-
addToCart && (((
|
|
61
|
-
addToCart && (((
|
|
54
|
+
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 >= ((_d = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _d !== void 0 ? _d : Infinity), isRound: true, variant: "outline", colorScheme: "red" })))),
|
|
55
|
+
addToCart && (((_e = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _e !== void 0 ? _e : 1) > 0) && (react_1.default.createElement(Button_1.default, { size: "sm", colorScheme: "red", leftIcon: react_1.default.createElement(lucide_react_1.ShoppingCartIcon, null), sx: { ml: "1.1rem" }, 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)); } }, "Add to cart")),
|
|
56
|
+
addToCart && (((_f = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _f !== void 0 ? _f : 1) <= 0) && (react_1.default.createElement(Button_1.default, { size: "sm", colorScheme: "red", variant: "outline", sx: { ml: "1.1rem" }, 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)); } }, "Notify Me")))));
|
|
62
57
|
};
|
|
63
58
|
exports.default = ProductDetails;
|
|
@@ -10,6 +10,7 @@ export type ProductDetailsProps = {
|
|
|
10
10
|
category?: string;
|
|
11
11
|
onAddToCart?: (id: string | number, var_id: number, qty?: number) => void;
|
|
12
12
|
onNotifyMe?: (id: string | number, var_id: number) => void;
|
|
13
|
+
onOptionChange?: (option: options) => void;
|
|
13
14
|
addToCart?: boolean;
|
|
14
15
|
goToCart?: boolean;
|
|
15
16
|
OnGoToCart?: () => void;
|
|
@@ -2,7 +2,7 @@ import React from "react";
|
|
|
2
2
|
import { options } from "../ProductCard/ProductCardProps";
|
|
3
3
|
interface ProductDtlPriceProps {
|
|
4
4
|
price: options[];
|
|
5
|
-
onSelect?:
|
|
5
|
+
onSelect?: (option: options) => void;
|
|
6
6
|
}
|
|
7
7
|
declare const ProductDtlPrice: ({ price, onSelect }: ProductDtlPriceProps) => React.JSX.Element;
|
|
8
8
|
export default ProductDtlPrice;
|