pixelize-design-library 2.2.99 → 2.2.100

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.
Files changed (2) hide show
  1. package/dist/Components/ProductCard/ProductPrice.js +24 -17
  2. package/package.json +1 -1
package/dist/Components/ProductCard/ProductPrice.js CHANGED
@@ -22,9 +22,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
22
22
  __setModuleDefault(result, mod);
23
23
  return result;
24
24
  };
25
+ var __importDefault = (this && this.__importDefault) || function (mod) {
26
+ return (mod && mod.__esModule) ? mod : { "default": mod };
27
+ };
25
28
  Object.defineProperty(exports, "__esModule", { value: true });
26
29
  var react_1 = __importStar(require("react"));
27
30
  var react_2 = require("@chakra-ui/react");
31
+ var OverflowTooltipText_1 = __importDefault(require("../SideBar/components/OverflowTooltipText"));
28
32
  var sizeConfig = {
29
33
  xs: {
30
34
  font: "xs",
@@ -76,6 +80,7 @@ var ProductPrice = function (_a) {
76
80
  var buttonRef = (0, react_1.useRef)(null);
77
81
  var dropdownRef = (0, react_1.useRef)(null);
78
82
  var isSingleOption = options.length === 1;
83
+ var isMobile = (0, react_2.useBreakpointValue)({ base: true, md: false });
79
84
  (0, react_2.useOutsideClick)({
80
85
  ref: dropdownRef,
81
86
  handler: function () { return setIsOpen(false); },
@@ -88,8 +93,8 @@ var ProductPrice = function (_a) {
88
93
  if (buttonRef.current) {
89
94
  var rect = buttonRef.current.getBoundingClientRect();
90
95
  setDropdownPosition({
91
- top: rect.bottom + window.scrollY,
92
- left: rect.left + window.scrollX,
96
+ top: rect.bottom + 4,
97
+ left: rect.left,
93
98
  width: rect.width
94
99
  });
95
100
  }
@@ -110,31 +115,33 @@ var ProductPrice = function (_a) {
110
115
  return (react_1.default.createElement(react_1.default.Fragment, null,
111
116
  isSingleOption ? (react_1.default.createElement(react_2.Box, { border: "0.063rem solid", borderColor: "red.300", bg: "#fff5f5", px: cfg.px, py: cfg.py, rounded: "md", display: "inline-block", w: "100%" },
112
117
  react_1.default.createElement(react_2.Text, { fontSize: cfg.label, fontWeight: "medium" }, options[0].label))) : (react_1.default.createElement(react_2.Box, { ref: buttonRef, onClick: function () { return setIsOpen(!isOpen); }, border: "0.063rem solid", borderColor: "red.300", bg: "#fff5f5", px: cfg.px, py: cfg.py, rounded: "md", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", w: "100%" },
113
- react_1.default.createElement(react_2.Text, { fontSize: cfg.label, fontWeight: "medium" }, selected.label),
118
+ react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
119
+ react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top", maxWidth: "70%" },
120
+ react_1.default.createElement(react_2.Text, { fontSize: cfg.label, fontWeight: "medium", whiteSpace: "nowrap" }, selected.label))),
114
121
  react_1.default.createElement(react_2.Text, { fontSize: cfg.font, color: "red.400", transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: "transform 0.2s" }, "\u25BE"))),
115
122
  !isSingleOption && isOpen && (react_1.default.createElement(react_2.Portal, null,
116
- react_1.default.createElement(react_2.Box, { ref: dropdownRef, position: "absolute", top: "".concat(dropdownPosition.top, "px"), left: "".concat(dropdownPosition.left, "px"), width: "".concat(dropdownPosition.width, "px"), bg: "white", border: "0.063rem solid", borderColor: "red.300", shadow: "md", zIndex: 9999 }, options.map(function (option) {
123
+ react_1.default.createElement(react_2.Box, { ref: dropdownRef, position: "fixed", top: "".concat(dropdownPosition.top, "px"), left: "".concat(dropdownPosition.left, "px"), width: "".concat(dropdownPosition.width, "px"), bg: "white", border: "0.063rem solid", borderColor: "red.300", borderRadius: "md", overflow: "hidden", maxH: "14rem", overflowY: "auto", shadow: "md", zIndex: 100000 }, options.map(function (option) {
117
124
  var discounted = getDiscountedPrice(option);
118
125
  var isSelected = selected.var_id === option.var_id;
119
- return (react_1.default.createElement(react_2.Box, { key: option.var_id, px: cfg.px, h: cfg.rowHeight, cursor: "pointer", bg: isSelected ? 'red.50' : 'white', _hover: { bg: 'red.100' }, onClick: function () {
126
+ return (react_1.default.createElement(react_2.Grid, { key: option.var_id, px: 3, py: 1, cursor: "pointer", bg: isSelected ? 'red.50' : 'white', borderLeft: isSelected ? '0.25rem solid' : '0.25rem solid transparent', borderLeftColor: isSelected ? 'red.300' : 'transparent', _hover: { bg: 'red.100' }, onClick: function () {
120
127
  setSelected(option);
121
128
  setIsOpen(false);
122
- }, display: "flex", alignItems: "center", justifyContent: "space-between" },
123
- react_1.default.createElement(react_2.Box, null,
124
- react_1.default.createElement(react_2.Text, { fontSize: cfg.label, fontWeight: "medium" }, option.label),
125
- option.offer > 0 && (react_1.default.createElement(react_2.Text, { fontSize: cfg.font, color: "green.600", fontWeight: "semibold" },
126
- option.offer,
127
- "% OFF"))),
128
- react_1.default.createElement(react_2.Box, { textAlign: "right" },
129
- react_1.default.createElement(react_2.Text, { fontSize: cfg.price, fontWeight: "semibold", color: "red.500" },
129
+ }, templateColumns: { base: '1fr auto', md: '1fr auto' }, columnGap: { base: 2, md: 3 }, rowGap: { base: 1.5, md: 2 }, alignItems: "center" },
130
+ react_1.default.createElement(react_2.HStack, { gridColumn: 1, gridRow: 1, spacing: 2, align: "center", minW: 0 },
131
+ react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
132
+ react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top", maxWidth: "100%" },
133
+ react_1.default.createElement(react_2.Text, { fontSize: { base: "xs", md: "sm" }, fontWeight: "medium", whiteSpace: "nowrap" }, option.label))),
134
+ option.offer > 0 && (react_1.default.createElement(react_2.Badge, { bg: "green.100", color: "green.700", borderRadius: "md", px: { base: 1, md: 2 }, py: { base: 0, md: 0.5 }, fontWeight: "bold", fontSize: { base: "2xs", md: "xs" }, flexShrink: 0 }, isMobile ? "".concat(option.offer, "%") : "".concat(option.offer, "% OFF")))),
135
+ react_1.default.createElement(react_2.Box, { gridColumn: { base: 1, md: 2 }, gridRow: { base: 2, md: 'auto' }, mt: { base: 1, md: 0 }, textAlign: { base: 'left', md: 'right' } },
136
+ react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "bold", color: "red.500", whiteSpace: "nowrap" },
130
137
  "\u20B9",
131
138
  discounted),
132
- option.offer > 0 && (react_1.default.createElement(react_2.Text, { fontSize: cfg.font, color: "gray.400", textDecoration: "line-through" },
139
+ option.offer > 0 && (react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "gray.500", textDecoration: "line-through", whiteSpace: "nowrap" },
133
140
  "\u20B9",
134
141
  option.price))),
135
- react_1.default.createElement(react_2.Box, { ml: 4, w: cfg.iconSize, h: cfg.iconSize, minW: cfg.iconSize, borderRadius: "full", border: "0.125rem solid", borderColor: isSelected ? 'red.400' : 'gray.300', display: "flex", alignItems: "center", justifyContent: "center" }, isSelected && (react_1.default.createElement(react_2.Box, { w: cfg.dotSize, h: cfg.dotSize, bg: "red.400", borderRadius: "full" })))));
142
+ react_1.default.createElement(react_2.Box, { gridColumn: 2, gridRow: { base: 1, md: 'auto' }, ml: { base: 0.5, md: 1 }, w: { base: "0.75rem", md: "0.875rem" }, h: { base: "0.75rem", md: "0.875rem" }, minW: { base: "0.75rem", md: "0.875rem" }, borderRadius: "full", border: "0.125rem solid", borderColor: isSelected ? 'red.500' : 'gray.600', bg: "white", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: { base: "0 0 0 1px rgba(0,0,0,0.08)", md: "none" } }, isSelected && (react_1.default.createElement(react_2.Box, { w: { base: "0.3125rem", md: "0.375rem" }, h: { base: "0.3125rem", md: "0.375rem" }, bg: "red.500", borderRadius: "full" })))));
136
143
  })))),
137
- react_1.default.createElement(react_2.Flex, { mt: 2, align: "center", justify: rightSlot ? "space-between" : "flex-start", w: "full", gap: 3 },
144
+ react_1.default.createElement(react_2.Flex, { mt: 2, w: "full", gap: 3, direction: { base: "column", md: "row" }, align: { base: "flex-start", md: "center" }, justify: { base: "flex-start", md: rightSlot ? "space-between" : "flex-start" } },
138
145
  react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", fontSize: cfg.price, gap: 2, minW: 0 },
139
146
  selected.offer > 0 && (react_1.default.createElement(react_2.Text, { color: "gray.400", textDecoration: "line-through" },
140
147
  "\u20B9",
@@ -142,6 +149,6 @@ var ProductPrice = function (_a) {
142
149
  react_1.default.createElement(react_2.Text, { color: "red.500", fontWeight: "semibold" },
143
150
  "\u20B9",
144
151
  getDiscountedPrice(selected))),
145
- rightSlot && react_1.default.createElement(react_2.Box, { flexShrink: 0 }, rightSlot))));
152
+ rightSlot && (react_1.default.createElement(react_2.Box, { flexShrink: 0, mt: { base: 2, md: 0 } }, rightSlot)))));
146
153
  };
147
154
  exports.default = ProductPrice;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.2.99",
3
+ "version": "2.2.100",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",