@citygross/components 0.8.9 → 0.8.11
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/build/@types/components/CartCard/CartCard.d.ts +3 -1
- package/build/@types/components/CartCard/CartCard.styles.d.ts +4 -1
- package/build/cjs/components/src/components/CartCard/CartCard.js +3 -2
- package/build/cjs/components/src/components/CartCard/CartCard.js.map +1 -1
- package/build/cjs/components/src/components/CartCard/CartCard.styles.js +1 -1
- package/build/cjs/components/src/components/CouponCode/CouponCode.js +1 -1
- package/build/cjs/components/src/components/QuantitySelector/QuantitySelector.js +6 -1
- package/build/cjs/components/src/components/QuantitySelector/QuantitySelector.js.map +1 -1
- package/build/es/components/src/components/CartCard/CartCard.js +3 -2
- package/build/es/components/src/components/CartCard/CartCard.js.map +1 -1
- package/build/es/components/src/components/CartCard/CartCard.styles.js +1 -1
- package/build/es/components/src/components/CouponCode/CouponCode.js +1 -1
- package/build/es/components/src/components/QuantitySelector/QuantitySelector.js +7 -2
- package/build/es/components/src/components/QuantitySelector/QuantitySelector.js.map +1 -1
- package/package.json +2 -2
|
@@ -3,6 +3,7 @@ export declare type TCartCard = {
|
|
|
3
3
|
markings?: React.ReactNode;
|
|
4
4
|
title: string;
|
|
5
5
|
description?: React.ReactNode;
|
|
6
|
+
secondaryDescription?: React.ReactNode;
|
|
6
7
|
showDelete?: boolean;
|
|
7
8
|
maxReachedWarning?: string;
|
|
8
9
|
maxValue?: number;
|
|
@@ -12,5 +13,6 @@ export declare type TCartCard = {
|
|
|
12
13
|
image: string;
|
|
13
14
|
onDelete?: () => void;
|
|
14
15
|
quanitytSelector?: React.ReactNode;
|
|
16
|
+
titleLineClamp?: number;
|
|
15
17
|
};
|
|
16
|
-
export declare const CartCard: ({ markings, title, description, showDelete, maxReachedWarning, value, price, image, onDelete, maxValue, quanitytSelector }: TCartCard) => JSX.Element;
|
|
18
|
+
export declare const CartCard: ({ markings, title, description, showDelete, maxReachedWarning, value, price, image, onDelete, maxValue, secondaryDescription, quanitytSelector, titleLineClamp }: TCartCard) => JSX.Element;
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
export declare type TCartCardTitle = {
|
|
2
|
+
titleLineClamp: number;
|
|
3
|
+
};
|
|
1
4
|
export declare const CartCardImage: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {}, never>;
|
|
2
5
|
export declare const CartCardContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
3
6
|
export declare const CartCardInfo: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
@@ -8,4 +11,4 @@ export declare const CartCardDelete: import("styled-components").StyledComponent
|
|
|
8
11
|
export declare const PriceContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
9
12
|
export declare const MaxWarning: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
10
13
|
export declare const MarkingsContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
11
|
-
export declare const CartCardTitle: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme,
|
|
14
|
+
export declare const CartCardTitle: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, TCartCardTitle, never>;
|
|
@@ -13,17 +13,18 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
13
13
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
14
14
|
|
|
15
15
|
var CartCard = function (_a) {
|
|
16
|
-
var markings = _a.markings, title = _a.title, description = _a.description, showDelete = _a.showDelete, maxReachedWarning = _a.maxReachedWarning, value = _a.value, price = _a.price, image = _a.image, onDelete = _a.onDelete, _b = _a.maxValue, maxValue = _b === void 0 ? 999 : _b, quanitytSelector = _a.quanitytSelector;
|
|
16
|
+
var markings = _a.markings, title = _a.title, description = _a.description, showDelete = _a.showDelete, maxReachedWarning = _a.maxReachedWarning, value = _a.value, price = _a.price, image = _a.image, onDelete = _a.onDelete, _b = _a.maxValue, maxValue = _b === void 0 ? 999 : _b, secondaryDescription = _a.secondaryDescription, quanitytSelector = _a.quanitytSelector, _c = _a.titleLineClamp, titleLineClamp = _c === void 0 ? 1 : _c;
|
|
17
17
|
return (React__default["default"].createElement(CartCard_styles.CartCardContainer, null,
|
|
18
18
|
React__default["default"].createElement(CartCard_styles.CartCardImage, { src: image || fallback_grocery }),
|
|
19
19
|
React__default["default"].createElement(CartCard_styles.CartCardInner, null,
|
|
20
20
|
React__default["default"].createElement(CartCard_styles.CartCardInnerTop, null,
|
|
21
21
|
React__default["default"].createElement(CartCard_styles.CartCardInfo, null,
|
|
22
22
|
markings && (React__default["default"].createElement(CartCard_styles.MarkingsContainer, null, markings)),
|
|
23
|
-
title && React__default["default"].createElement(CartCard_styles.CartCardTitle,
|
|
23
|
+
title && (React__default["default"].createElement(CartCard_styles.CartCardTitle, { titleLineClamp: titleLineClamp }, title)),
|
|
24
24
|
description && description),
|
|
25
25
|
showDelete && (React__default["default"].createElement("div", null,
|
|
26
26
|
React__default["default"].createElement(CgButton.CgButton, { onClick: onDelete, variant: CgButton.EButtonVariant.secondary, icon: React__default["default"].createElement(icons.Icons.Trash, { width: 16, height: 16 }) })))),
|
|
27
|
+
secondaryDescription && secondaryDescription,
|
|
27
28
|
React__default["default"].createElement(CartCard_styles.CartCardPriceContainer, null,
|
|
28
29
|
React__default["default"].createElement(CartCard_styles.PriceContainer, null,
|
|
29
30
|
price,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CartCard.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CartCard.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -21,7 +21,7 @@ var MaxWarningAnimate = styled.keyframes(templateObject_8 || (templateObject_8 =
|
|
|
21
21
|
var PriceContainer = styled__default["default"].div(templateObject_9 || (templateObject_9 = _tslib.__makeTemplateObject(["\n position: relative;\n flex: 1;\n"], ["\n position: relative;\n flex: 1;\n"])));
|
|
22
22
|
var MaxWarning = styled__default["default"].div(templateObject_10 || (templateObject_10 = _tslib.__makeTemplateObject(["\n color: ", ";\n animation: ", " 2s forwards;\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n background: ", ";\n font-size: ", "px;\n"], ["\n color: ", ";\n animation: ", " 2s forwards;\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n background: ", ";\n font-size: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertRed; }, MaxWarningAnimate, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; });
|
|
23
23
|
var MarkingsContainer = styled__default["default"].div(templateObject_11 || (templateObject_11 = _tslib.__makeTemplateObject(["\n margin-bottom: ", "px;\n"], ["\n margin-bottom: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
|
|
24
|
-
var CartCardTitle = styled__default["default"].p(templateObject_12 || (templateObject_12 = _tslib.__makeTemplateObject(["\n font-weight: ", ";\n font-size: ", "px;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp:
|
|
24
|
+
var CartCardTitle = styled__default["default"].p(templateObject_12 || (templateObject_12 = _tslib.__makeTemplateObject(["\n font-weight: ", ";\n font-size: ", "px;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ", ";\n text-overflow: ellipsis;\n overflow: hidden;\n"], ["\n font-weight: ", ";\n font-size: ", "px;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ", ";\n text-overflow: ellipsis;\n overflow: hidden;\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.medium; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s3; }, function (props) { return props.titleLineClamp; });
|
|
25
25
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
|
|
26
26
|
|
|
27
27
|
exports.CartCardContainer = CartCardContainer;
|
|
@@ -46,7 +46,7 @@ function CouponCode(_a) {
|
|
|
46
46
|
}
|
|
47
47
|
}, onBlur: function () { return setCustomFocus(false); }, customFocus: customFocus })),
|
|
48
48
|
React__default["default"].createElement("div", null,
|
|
49
|
-
React__default["default"].createElement(CgButton.CgButton, { variant: CgButton.EButtonVariant.secondary, disabled: loading
|
|
49
|
+
React__default["default"].createElement(CgButton.CgButton, { variant: CgButton.EButtonVariant.secondary, disabled: loading, onClick: function () { return value && onSubmit(); }, size: CgButton.ECgButtonSize.medium, fullWidth: true, loading: loading }, label)))) : (React__default["default"].createElement(CouponCode_styles.CouponResultContainer, { status: status === null || status === void 0 ? void 0 : status.status }, (status === null || status === void 0 ? void 0 : status.status) === exports.ECouponCodeStatus.Success ? (React__default["default"].createElement(CouponCode_styles.CouponResultMessage, null,
|
|
50
50
|
React__default["default"].createElement(CouponResultIcon, { status: status === null || status === void 0 ? void 0 : status.status }),
|
|
51
51
|
React__default["default"].createElement("p", null, status === null || status === void 0 ? void 0 : status.message))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
52
52
|
React__default["default"].createElement(CouponCode_styles.CouponResultMessage, null,
|
|
@@ -13,12 +13,17 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
13
13
|
function QuantitySelector(_a) {
|
|
14
14
|
var onAdd = _a.onAdd, onSubtract = _a.onSubtract, onChange = _a.onChange, maxValue = _a.maxValue, value = _a.value, onBlur = _a.onBlur;
|
|
15
15
|
var _b = React.useState(false), customFocus = _b[0], setCustomFocus = _b[1];
|
|
16
|
+
var inputRef = React.useRef(null);
|
|
16
17
|
return (React__default["default"].createElement(QuantitySelector_styles.QuantitySelectorContainer, null,
|
|
17
18
|
React__default["default"].createElement(QuantitySelector_styles.QuantityButton, { direction: "left", disabled: value <= 0, onClick: onSubtract, tabIndex: -1 },
|
|
18
19
|
React__default["default"].createElement(QuantitySelector_styles.IconContainer, null,
|
|
19
20
|
React__default["default"].createElement(icons.Icons.Minus, { width: 16, height: 16 }))),
|
|
20
|
-
React__default["default"].createElement(QuantitySelector_styles.QuantityInput, { customFocus: customFocus, max: maxValue, value: value, type: "number", onMouseDown: function () {
|
|
21
|
+
React__default["default"].createElement(QuantitySelector_styles.QuantityInput, { customFocus: customFocus, max: maxValue, value: value, ref: inputRef, type: "number", onMouseDown: function () {
|
|
21
22
|
setCustomFocus(true);
|
|
23
|
+
}, onClick: function () {
|
|
24
|
+
if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
|
|
25
|
+
inputRef.current.select();
|
|
26
|
+
}
|
|
22
27
|
}, onKeyDown: function (event) {
|
|
23
28
|
if (event.key === 'Enter' || event.key === 'Escape') {
|
|
24
29
|
event.currentTarget.blur();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QuantitySelector.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"QuantitySelector.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -5,17 +5,18 @@ import { Icons } from '@citygross/icons';
|
|
|
5
5
|
import { CgButton, EButtonVariant } from '../CgButton/CgButton.js';
|
|
6
6
|
|
|
7
7
|
var CartCard = function (_a) {
|
|
8
|
-
var markings = _a.markings, title = _a.title, description = _a.description, showDelete = _a.showDelete, maxReachedWarning = _a.maxReachedWarning, value = _a.value, price = _a.price, image = _a.image, onDelete = _a.onDelete, _b = _a.maxValue, maxValue = _b === void 0 ? 999 : _b, quanitytSelector = _a.quanitytSelector;
|
|
8
|
+
var markings = _a.markings, title = _a.title, description = _a.description, showDelete = _a.showDelete, maxReachedWarning = _a.maxReachedWarning, value = _a.value, price = _a.price, image = _a.image, onDelete = _a.onDelete, _b = _a.maxValue, maxValue = _b === void 0 ? 999 : _b, secondaryDescription = _a.secondaryDescription, quanitytSelector = _a.quanitytSelector, _c = _a.titleLineClamp, titleLineClamp = _c === void 0 ? 1 : _c;
|
|
9
9
|
return (React.createElement(CartCardContainer, null,
|
|
10
10
|
React.createElement(CartCardImage, { src: image || FallbackIcon }),
|
|
11
11
|
React.createElement(CartCardInner, null,
|
|
12
12
|
React.createElement(CartCardInnerTop, null,
|
|
13
13
|
React.createElement(CartCardInfo, null,
|
|
14
14
|
markings && (React.createElement(MarkingsContainer, null, markings)),
|
|
15
|
-
title && React.createElement(CartCardTitle,
|
|
15
|
+
title && (React.createElement(CartCardTitle, { titleLineClamp: titleLineClamp }, title)),
|
|
16
16
|
description && description),
|
|
17
17
|
showDelete && (React.createElement("div", null,
|
|
18
18
|
React.createElement(CgButton, { onClick: onDelete, variant: EButtonVariant.secondary, icon: React.createElement(Icons.Trash, { width: 16, height: 16 }) })))),
|
|
19
|
+
secondaryDescription && secondaryDescription,
|
|
19
20
|
React.createElement(CartCardPriceContainer, null,
|
|
20
21
|
React.createElement(PriceContainer, null,
|
|
21
22
|
price,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CartCard.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CartCard.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -13,7 +13,7 @@ var MaxWarningAnimate = keyframes(templateObject_8 || (templateObject_8 = __make
|
|
|
13
13
|
var PriceContainer = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n position: relative;\n flex: 1;\n"], ["\n position: relative;\n flex: 1;\n"])));
|
|
14
14
|
var MaxWarning = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n color: ", ";\n animation: ", " 2s forwards;\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n background: ", ";\n font-size: ", "px;\n"], ["\n color: ", ";\n animation: ", " 2s forwards;\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n background: ", ";\n font-size: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertRed; }, MaxWarningAnimate, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; });
|
|
15
15
|
var MarkingsContainer = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n margin-bottom: ", "px;\n"], ["\n margin-bottom: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
|
|
16
|
-
var CartCardTitle = styled.p(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", "px;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp:
|
|
16
|
+
var CartCardTitle = styled.p(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", "px;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ", ";\n text-overflow: ellipsis;\n overflow: hidden;\n"], ["\n font-weight: ", ";\n font-size: ", "px;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ", ";\n text-overflow: ellipsis;\n overflow: hidden;\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.medium; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s3; }, function (props) { return props.titleLineClamp; });
|
|
17
17
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
|
|
18
18
|
|
|
19
19
|
export { CartCardContainer, CartCardImage, CartCardInfo, CartCardInner, CartCardInnerTop, CartCardPriceContainer, CartCardTitle, MarkingsContainer, MaxWarning, PriceContainer };
|
|
@@ -38,7 +38,7 @@ function CouponCode(_a) {
|
|
|
38
38
|
}
|
|
39
39
|
}, onBlur: function () { return setCustomFocus(false); }, customFocus: customFocus })),
|
|
40
40
|
React.createElement("div", null,
|
|
41
|
-
React.createElement(CgButton, { variant: EButtonVariant.secondary, disabled: loading
|
|
41
|
+
React.createElement(CgButton, { variant: EButtonVariant.secondary, disabled: loading, onClick: function () { return value && onSubmit(); }, size: ECgButtonSize.medium, fullWidth: true, loading: loading }, label)))) : (React.createElement(CouponResultContainer, { status: status === null || status === void 0 ? void 0 : status.status }, (status === null || status === void 0 ? void 0 : status.status) === ECouponCodeStatus.Success ? (React.createElement(CouponResultMessage, null,
|
|
42
42
|
React.createElement(CouponResultIcon, { status: status === null || status === void 0 ? void 0 : status.status }),
|
|
43
43
|
React.createElement("p", null, status === null || status === void 0 ? void 0 : status.message))) : (React.createElement(React.Fragment, null,
|
|
44
44
|
React.createElement(CouponResultMessage, null,
|
|
@@ -1,16 +1,21 @@
|
|
|
1
|
-
import React, { useState } from 'react';
|
|
1
|
+
import React, { useState, useRef } from 'react';
|
|
2
2
|
import { QuantitySelectorContainer, QuantityButton, IconContainer, QuantityInput } from './QuantitySelector.styles.js';
|
|
3
3
|
import { Icons } from '@citygross/icons';
|
|
4
4
|
|
|
5
5
|
function QuantitySelector(_a) {
|
|
6
6
|
var onAdd = _a.onAdd, onSubtract = _a.onSubtract, onChange = _a.onChange, maxValue = _a.maxValue, value = _a.value, onBlur = _a.onBlur;
|
|
7
7
|
var _b = useState(false), customFocus = _b[0], setCustomFocus = _b[1];
|
|
8
|
+
var inputRef = useRef(null);
|
|
8
9
|
return (React.createElement(QuantitySelectorContainer, null,
|
|
9
10
|
React.createElement(QuantityButton, { direction: "left", disabled: value <= 0, onClick: onSubtract, tabIndex: -1 },
|
|
10
11
|
React.createElement(IconContainer, null,
|
|
11
12
|
React.createElement(Icons.Minus, { width: 16, height: 16 }))),
|
|
12
|
-
React.createElement(QuantityInput, { customFocus: customFocus, max: maxValue, value: value, type: "number", onMouseDown: function () {
|
|
13
|
+
React.createElement(QuantityInput, { customFocus: customFocus, max: maxValue, value: value, ref: inputRef, type: "number", onMouseDown: function () {
|
|
13
14
|
setCustomFocus(true);
|
|
15
|
+
}, onClick: function () {
|
|
16
|
+
if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
|
|
17
|
+
inputRef.current.select();
|
|
18
|
+
}
|
|
14
19
|
}, onKeyDown: function (event) {
|
|
15
20
|
if (event.key === 'Enter' || event.key === 'Escape') {
|
|
16
21
|
event.currentTarget.blur();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QuantitySelector.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"QuantitySelector.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@citygross/components",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.11",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./build/cjs/components/src/index.js",
|
|
@@ -76,5 +76,5 @@
|
|
|
76
76
|
"react-slick": "^0.30.1",
|
|
77
77
|
"slick-carousel": "^1.8.1"
|
|
78
78
|
},
|
|
79
|
-
"gitHead": "
|
|
79
|
+
"gitHead": "74636813fbee17b137d3d7b732f5ff3d45086aa0"
|
|
80
80
|
}
|