krl-alfred 2.17.43 → 2.17.45
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/Input/Input.d.ts +1 -1
- package/dist/components/Input/Input.js +76 -15
- package/dist/components/Input/Input.styled.js +16 -1
- package/dist/components/Input/props.d.ts +2 -0
- package/dist/components/Input/props.js +1 -0
- package/dist/components/OptionMenu/OptionMenu.js +1 -1
- package/dist/components/OptionMenu/OptionMenu.styled.js +1 -1
- package/dist/components/ProductCardVertical/ProductCardVertical.js +1 -1
- package/package.json +3 -3
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { InputProps } from "./props";
|
|
2
|
-
declare const Input: ({ hasError, disabled, label, customLinkText, customLinkHref, onCustomLinkClick, onChange, errorMessage, type, name, width, mask, placeholder, hasCopyButton, readOnly, autoFocus, value, format, visible, infoText, id, isClearable, onClear, hasNumericFormat, inline, minDate, maxDate, filterDate, ...other }: InputProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare const Input: ({ hasError, disabled, label, customLinkText, customLinkHref, onCustomLinkClick, onChange, errorMessage, type, name, width, mask, placeholder, hasCopyButton, readOnly, autoFocus, value, format, visible, infoText, id, isClearable, onClear, hasNumericFormat, inline, minDate, maxDate, filterDate, onCalendarOpen, ...other }: InputProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default Input;
|
|
@@ -41,11 +41,25 @@ var locale_1 = require("date-fns/locale");
|
|
|
41
41
|
var date_fns_1 = require("date-fns");
|
|
42
42
|
var Input = function (_a) {
|
|
43
43
|
var _b;
|
|
44
|
-
var _c = _a.hasError, hasError = _c === void 0 ? props_1.InputDefault.hasError : _c, _d = _a.disabled, disabled = _d === void 0 ? props_1.InputDefault.disabled : _d, _e = _a.label, label = _e === void 0 ? props_1.InputDefault.label : _e, _f = _a.customLinkText, customLinkText = _f === void 0 ? props_1.InputDefault.customLinkText : _f, _g = _a.customLinkHref, customLinkHref = _g === void 0 ? props_1.InputDefault.customLinkHref : _g, _h = _a.onCustomLinkClick, onCustomLinkClick = _h === void 0 ? props_1.InputDefault.onCustomLinkClick : _h, _j = _a.onChange, onChange = _j === void 0 ? props_1.InputDefault.onChange : _j, _k = _a.errorMessage, errorMessage = _k === void 0 ? props_1.InputDefault.errorMessage : _k, _l = _a.type, type = _l === void 0 ? props_1.InputDefault.type : _l, _m = _a.name, name = _m === void 0 ? props_1.InputDefault.name : _m, _o = _a.width, width = _o === void 0 ? props_1.InputDefault.width : _o, _p = _a.mask, mask = _p === void 0 ? props_1.InputDefault.mask : _p, _q = _a.placeholder, placeholder = _q === void 0 ? props_1.InputDefault.placeholder : _q, _r = _a.hasCopyButton, hasCopyButton = _r === void 0 ? props_1.InputDefault.hasCopyButton : _r, _s = _a.readOnly, readOnly = _s === void 0 ? props_1.InputDefault.readOnly : _s, _t = _a.autoFocus, autoFocus = _t === void 0 ? props_1.InputDefault.autoFocus : _t, value = _a.value, _u = _a.format, format = _u === void 0 ? props_1.InputDefault.format : _u, _v = _a.visible, visible = _v === void 0 ? props_1.InputDefault.visible : _v, _w = _a.infoText, infoText = _w === void 0 ? props_1.InputDefault.infoText : _w, _x = _a.id, id = _x === void 0 ? props_1.InputDefault.id : _x, _y = _a.isClearable, isClearable = _y === void 0 ? props_1.InputDefault.isClearable : _y, _z = _a.onClear, onClear = _z === void 0 ? props_1.InputDefault.onClear : _z, _0 = _a.hasNumericFormat, hasNumericFormat = _0 === void 0 ? props_1.InputDefault.hasNumericFormat : _0, _1 = _a.inline, inline = _1 === void 0 ? props_1.InputDefault.inline : _1, _2 = _a.minDate, minDate = _2 === void 0 ? props_1.InputDefault.minDate : _2, _3 = _a.maxDate, maxDate = _3 === void 0 ? props_1.InputDefault.maxDate : _3, _4 = _a.filterDate, filterDate = _4 === void 0 ? props_1.InputDefault.filterDate : _4, other = __rest(_a, ["hasError", "disabled", "label", "customLinkText", "customLinkHref", "onCustomLinkClick", "onChange", "errorMessage", "type", "name", "width", "mask", "placeholder", "hasCopyButton", "readOnly", "autoFocus", "value", "format", "visible", "infoText", "id", "isClearable", "onClear", "hasNumericFormat", "inline", "minDate", "maxDate", "filterDate"]);
|
|
45
|
-
var
|
|
46
|
-
var
|
|
47
|
-
var
|
|
48
|
-
var
|
|
44
|
+
var _c = _a.hasError, hasError = _c === void 0 ? props_1.InputDefault.hasError : _c, _d = _a.disabled, disabled = _d === void 0 ? props_1.InputDefault.disabled : _d, _e = _a.label, label = _e === void 0 ? props_1.InputDefault.label : _e, _f = _a.customLinkText, customLinkText = _f === void 0 ? props_1.InputDefault.customLinkText : _f, _g = _a.customLinkHref, customLinkHref = _g === void 0 ? props_1.InputDefault.customLinkHref : _g, _h = _a.onCustomLinkClick, onCustomLinkClick = _h === void 0 ? props_1.InputDefault.onCustomLinkClick : _h, _j = _a.onChange, onChange = _j === void 0 ? props_1.InputDefault.onChange : _j, _k = _a.errorMessage, errorMessage = _k === void 0 ? props_1.InputDefault.errorMessage : _k, _l = _a.type, type = _l === void 0 ? props_1.InputDefault.type : _l, _m = _a.name, name = _m === void 0 ? props_1.InputDefault.name : _m, _o = _a.width, width = _o === void 0 ? props_1.InputDefault.width : _o, _p = _a.mask, mask = _p === void 0 ? props_1.InputDefault.mask : _p, _q = _a.placeholder, placeholder = _q === void 0 ? props_1.InputDefault.placeholder : _q, _r = _a.hasCopyButton, hasCopyButton = _r === void 0 ? props_1.InputDefault.hasCopyButton : _r, _s = _a.readOnly, readOnly = _s === void 0 ? props_1.InputDefault.readOnly : _s, _t = _a.autoFocus, autoFocus = _t === void 0 ? props_1.InputDefault.autoFocus : _t, value = _a.value, _u = _a.format, format = _u === void 0 ? props_1.InputDefault.format : _u, _v = _a.visible, visible = _v === void 0 ? props_1.InputDefault.visible : _v, _w = _a.infoText, infoText = _w === void 0 ? props_1.InputDefault.infoText : _w, _x = _a.id, id = _x === void 0 ? props_1.InputDefault.id : _x, _y = _a.isClearable, isClearable = _y === void 0 ? props_1.InputDefault.isClearable : _y, _z = _a.onClear, onClear = _z === void 0 ? props_1.InputDefault.onClear : _z, _0 = _a.hasNumericFormat, hasNumericFormat = _0 === void 0 ? props_1.InputDefault.hasNumericFormat : _0, _1 = _a.inline, inline = _1 === void 0 ? props_1.InputDefault.inline : _1, _2 = _a.minDate, minDate = _2 === void 0 ? props_1.InputDefault.minDate : _2, _3 = _a.maxDate, maxDate = _3 === void 0 ? props_1.InputDefault.maxDate : _3, _4 = _a.filterDate, filterDate = _4 === void 0 ? props_1.InputDefault.filterDate : _4, _5 = _a.onCalendarOpen, onCalendarOpen = _5 === void 0 ? props_1.InputDefault.onCalendarOpen : _5, other = __rest(_a, ["hasError", "disabled", "label", "customLinkText", "customLinkHref", "onCustomLinkClick", "onChange", "errorMessage", "type", "name", "width", "mask", "placeholder", "hasCopyButton", "readOnly", "autoFocus", "value", "format", "visible", "infoText", "id", "isClearable", "onClear", "hasNumericFormat", "inline", "minDate", "maxDate", "filterDate", "onCalendarOpen"]);
|
|
45
|
+
var _6 = (0, react_1.useState)(type), inputType = _6[0], setInputType = _6[1];
|
|
46
|
+
var _7 = (0, react_1.useState)(false), alert = _7[0], setAlert = _7[1];
|
|
47
|
+
var _8 = (0, react_1.useState)(value), inputValue = _8[0], setInputValue = _8[1];
|
|
48
|
+
var _9 = (0, react_1.useState)(false), isCalendarOpen = _9[0], setIsCalendarOpen = _9[1];
|
|
49
|
+
var _10 = (0, react_1.useState)(function () {
|
|
50
|
+
if (!value)
|
|
51
|
+
return null;
|
|
52
|
+
// Eğer format "dd.MM.yyyy" gibi bir format ise, parse et
|
|
53
|
+
if (format && format.includes('dd') && format.includes('MM') && format.includes('yyyy')) {
|
|
54
|
+
try {
|
|
55
|
+
return (0, date_fns_1.parse)(value, format, new Date());
|
|
56
|
+
}
|
|
57
|
+
catch (_a) {
|
|
58
|
+
return new Date(value);
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
return new Date(value);
|
|
62
|
+
}), startDate = _10[0], setStartDate = _10[1];
|
|
49
63
|
var inputRef = (0, react_1.useRef)(null);
|
|
50
64
|
var t = (0, react_i18next_1.useTranslation)().t;
|
|
51
65
|
var language = i18n_1.default.language;
|
|
@@ -54,8 +68,24 @@ var Input = function (_a) {
|
|
|
54
68
|
}, [type]);
|
|
55
69
|
(0, react_1.useEffect)(function () {
|
|
56
70
|
setInputValue(value);
|
|
57
|
-
|
|
58
|
-
|
|
71
|
+
if (!value) {
|
|
72
|
+
setStartDate(null);
|
|
73
|
+
}
|
|
74
|
+
else {
|
|
75
|
+
// Eğer format "dd.MM.yyyy" gibi bir format ise, parse et
|
|
76
|
+
if (format && format.includes('dd') && format.includes('MM') && format.includes('yyyy')) {
|
|
77
|
+
try {
|
|
78
|
+
setStartDate((0, date_fns_1.parse)(value, format, new Date()));
|
|
79
|
+
}
|
|
80
|
+
catch (_a) {
|
|
81
|
+
setStartDate(new Date(value));
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
else {
|
|
85
|
+
setStartDate(new Date(value));
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}, [value, format]);
|
|
59
89
|
(0, react_1.useEffect)(function () {
|
|
60
90
|
if (alert) {
|
|
61
91
|
setTimeout(function () {
|
|
@@ -74,7 +104,24 @@ var Input = function (_a) {
|
|
|
74
104
|
inputRef.current.blur();
|
|
75
105
|
};
|
|
76
106
|
var CustomDateInput = (0, react_1.forwardRef)(function (props, ref) {
|
|
77
|
-
|
|
107
|
+
// DatePicker ISO formatında ("yyyy-MM-dd") value gönderir
|
|
108
|
+
// Biz bunu format'a göre formatlayıp gösteririz
|
|
109
|
+
var displayValue = '';
|
|
110
|
+
if (props.value && format) {
|
|
111
|
+
try {
|
|
112
|
+
// ISO formatındaki değeri parse et ve format'a göre göster
|
|
113
|
+
var date = (0, date_fns_1.parse)(props.value, "yyyy-MM-dd", new Date());
|
|
114
|
+
displayValue = (0, date_fns_1.format)(date, format);
|
|
115
|
+
}
|
|
116
|
+
catch (_a) {
|
|
117
|
+
// Parse edilemezse inputValue'yu kullan
|
|
118
|
+
displayValue = inputValue || '';
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
else {
|
|
122
|
+
displayValue = inputValue || '';
|
|
123
|
+
}
|
|
124
|
+
return ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: ref, "$hasError": hasError, "$hasIcon": (isClearable && inputValue) || ["password", "date"].includes(type) || hasCopyButton || infoText, "$isCalendarOpen": isCalendarOpen }, props, { value: displayValue })));
|
|
78
125
|
});
|
|
79
126
|
var handleClearValue = function () {
|
|
80
127
|
setInputValue(null);
|
|
@@ -85,17 +132,31 @@ var Input = function (_a) {
|
|
|
85
132
|
onClear();
|
|
86
133
|
};
|
|
87
134
|
return (0, jsx_runtime_1.jsxs)(Input_styled_1.Container, __assign({ "$width": width }, { children: [label && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)("top", (_b = {}, _b["justify-between"] = customLinkText, _b)) }, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: id }, { children: label })), customLinkText && (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (customLinkHref && { href: customLinkHref }), { onClick: onCustomLinkClick }, { children: customLinkText }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [hasNumericFormat ? ((0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue }, other, { customInput: Input_styled_1.InputStyled, id: id }))) : ((mask && format) ? ((0, jsx_runtime_1.jsx)(react_number_format_1.PatternFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue }, other, { format: format, mask: mask, customInput: Input_styled_1.InputStyled, id: id })))
|
|
88
|
-
: type === 'date' ? ((0, jsx_runtime_1.jsx)(Input_styled_1.DatePickerWrapperStyled, __assign({ "$inline": inline }, { children: (0, jsx_runtime_1.jsx)(react_datepicker_1.default, { placeholderText: placeholder, disabled: disabled, name: name,
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
135
|
+
: type === 'date' ? ((0, jsx_runtime_1.jsx)(Input_styled_1.DatePickerWrapperStyled, __assign({ "$inline": inline }, { children: (0, jsx_runtime_1.jsx)(react_datepicker_1.default, { placeholderText: placeholder, disabled: disabled, name: name, readOnly: readOnly, autoFocus: autoFocus, onChange: function (date, event) {
|
|
136
|
+
if (date) {
|
|
137
|
+
setStartDate(date);
|
|
138
|
+
// DatePicker'dan gelen Date objesini format'a göre formatla
|
|
139
|
+
var formattedValue = (0, date_fns_1.format)(date, format);
|
|
140
|
+
setInputValue(formattedValue);
|
|
141
|
+
onChange(formattedValue);
|
|
142
|
+
}
|
|
143
|
+
else {
|
|
144
|
+
setStartDate(null);
|
|
145
|
+
setInputValue(null);
|
|
146
|
+
onChange(null);
|
|
147
|
+
}
|
|
92
148
|
setTimeout(function () {
|
|
93
149
|
var _a, _b;
|
|
94
150
|
(_b = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.blur();
|
|
95
|
-
},
|
|
96
|
-
}, selected: startDate, ref: inputRef, dateFormat:
|
|
151
|
+
}, 10);
|
|
152
|
+
}, selected: startDate, ref: inputRef, dateFormat: "yyyy-MM-dd", locale: language === "tr" ? locale_1.tr : locale_1.enGB, customInput: (0, jsx_runtime_1.jsx)(CustomDateInput, {}),
|
|
97
153
|
//customInput={<InputStyled $hasError={hasError} id={id}/>}
|
|
98
|
-
inline: inline, minDate: minDate, maxDate: maxDate, filterDate: filterDate,
|
|
154
|
+
inline: inline, minDate: minDate, maxDate: maxDate, filterDate: filterDate, open: isCalendarOpen, onCalendarOpen: function () {
|
|
155
|
+
setIsCalendarOpen(true);
|
|
156
|
+
if (onCalendarOpen) {
|
|
157
|
+
onCalendarOpen();
|
|
158
|
+
}
|
|
159
|
+
}, onCalendarClose: function () { return setIsCalendarOpen(false); }, onBlur: function () { return setIsCalendarOpen(false); }, renderCustomHeader: function (_a) {
|
|
99
160
|
var monthDate = _a.monthDate, customHeaderCount = _a.customHeaderCount, decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, decreaseYear = _a.decreaseYear, increaseYear = _a.increaseYear, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, nextMonthButtonDisabled = _a.nextMonthButtonDisabled, prevYearButtonDisabled = _a.prevYearButtonDisabled, nextYearButtonDisabled = _a.nextYearButtonDisabled;
|
|
100
161
|
return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "headerTopContent" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "leftButtons" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Previous Year", className: "react-datepicker__navigation react-datepicker__navigation--previous", onClick: decreaseYear, type: "button", disabled: prevYearButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CalenderArrowleftsmall" }) })), (0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Previous Month", className: "react-datepicker__navigation react-datepicker__navigation--previous", onClick: decreaseMonth, type: "button", disabled: prevMonthButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallLeft" }) }))] })), (0, jsx_runtime_1.jsxs)("span", __assign({ className: "react-datepicker__current-month" }, { children: [monthDate.toLocaleString(language === "tr" ? "tr-TR" : "en-GB", { month: "long" }), ", ", monthDate.toLocaleString(language === "tr" ? "tr-TR" : "en-GB", { year: "numeric" })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "rightButtons" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Next Month", className: "react-datepicker__navigation react-datepicker__navigation--next", onClick: increaseMonth, type: "button", disabled: nextMonthButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRight" }) })), (0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Next Year", className: "react-datepicker__navigation react-datepicker__navigation--next", onClick: increaseYear, type: "button", disabled: nextYearButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Calenderarrowrightsmall" }) }))] }))] })));
|
|
101
162
|
} }) }))) : ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType, "$hasError": hasError, disabled: disabled, onChange: function (e) {
|
|
@@ -11,6 +11,21 @@ exports.DatePickerWrapperStyled = exports.InputStyled = exports.Container = expo
|
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n right: 8px;\n top: -20px;\n height: 28px;\n border-radius: 0.5rem;\n background-color: white;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 1rem;\n user-select: none;\n pointer-events: none;\n transition: opacity .4s ease;\n opacity: ", ";\n font: var(--caption-medium-10-12);\n"], ["\n position: absolute;\n right: 8px;\n top: -20px;\n height: 28px;\n border-radius: 0.5rem;\n background-color: white;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 1rem;\n user-select: none;\n pointer-events: none;\n transition: opacity .4s ease;\n opacity: ", ";\n font: var(--caption-medium-10-12);\n"])), function (props) { return props.$visible ? '1' : '0'; });
|
|
13
13
|
exports.Container = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font: var(--caption-bold-12-15);\n\n &.justify-between {\n justify-content: space-between;\n }\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n\n /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n\n .inputIcon {\n position: absolute;\n width: 24px;\n height: 24px;\n top: 16px;\n right: 16px;\n cursor: pointer;\n\n &:not(.hasNoBg) {\n &:hover {\n background-color: var(--primary-opacity-5);\n }\n }\n }\n\n .removeIcon {\n position: absolute;\n top: 16px;\n right: 1rem;\n cursor: pointer;\n *{\n display: block;\n }\n }\n\n .popupText {\n font: var(--caption-semi-bold-11-13);\n text-align: center;\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font: var(--caption-semi-bold-11-13);\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font: var(--caption-bold-12-15);\n\n &.justify-between {\n justify-content: space-between;\n }\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n\n /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n\n .inputIcon {\n position: absolute;\n width: 24px;\n height: 24px;\n top: 16px;\n right: 16px;\n cursor: pointer;\n\n &:not(.hasNoBg) {\n &:hover {\n background-color: var(--primary-opacity-5);\n }\n }\n }\n\n .removeIcon {\n position: absolute;\n top: 16px;\n right: 1rem;\n cursor: pointer;\n *{\n display: block;\n }\n }\n\n .popupText {\n font: var(--caption-semi-bold-11-13);\n text-align: center;\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font: var(--caption-semi-bold-11-13);\n }\n }\n"])), function (props) { return props.$width || '370px'; });
|
|
14
|
-
exports.InputStyled = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 0.5rem;\n border: ", ";\n padding: ", ";\n color: ", ";\n ", "\n font: var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n -webkit-appearance: none;\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n\n &:is([disabled]) {\n color: var(--dark-opacity-25);\n }\n\n"], ["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 0.5rem;\n border: ", ";\n padding: ", ";\n color: ", ";\n ", "\n font: var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n -webkit-appearance: none;\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n\n &:is([disabled]) {\n color: var(--dark-opacity-25);\n }\n\n"])), function (props) {
|
|
14
|
+
exports.InputStyled = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 0.5rem;\n border: ", ";\n padding: ", ";\n color: ", ";\n ", "\n font: var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n -webkit-appearance: none;\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n\n &:is([disabled]) {\n color: var(--dark-opacity-25);\n }\n\n"], ["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 0.5rem;\n border: ", ";\n padding: ", ";\n color: ", ";\n ", "\n font: var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n -webkit-appearance: none;\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n\n &:is([disabled]) {\n color: var(--dark-opacity-25);\n }\n\n"])), function (props) {
|
|
15
|
+
if (props.disabled)
|
|
16
|
+
return 'var(--dark-opacity-5)';
|
|
17
|
+
if (props.$isCalendarOpen || props.$hasError)
|
|
18
|
+
return 'white';
|
|
19
|
+
return 'var(--dark-opacity-3)';
|
|
20
|
+
}, function (props) {
|
|
21
|
+
if (props.$isCalendarOpen || props.$hasError) {
|
|
22
|
+
return props.$hasError ? '2px solid var(--red)' : '2px solid var(--primary)';
|
|
23
|
+
}
|
|
24
|
+
return '1px solid var(--dark-opacity-10)';
|
|
25
|
+
}, function (props) {
|
|
26
|
+
if (props.$isCalendarOpen || props.$hasError)
|
|
27
|
+
return '18.5px 23px';
|
|
28
|
+
return '19.5px 24px';
|
|
29
|
+
}, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.$hasIcon ? 'padding-right: 45px !important;' : ''; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; });
|
|
15
30
|
exports.DatePickerWrapperStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject([";\n .react-datepicker-wrapper {\n display: block;\n }\n\n .react-datepicker-popper {\n transform: none !important;\n top: 100% !important;\n width: 100%;\n z-index: 5;\n\n .react-datepicker__triangle {\n display: none !important;\n }\n\n }\n .react-datepicker {\n font-family: inherit !important;\n width: 100%;\n border: none !important;\n border-radius: 0 0 0.5rem 0.5rem !important;\n box-shadow: ", ";\n\n .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n background-color: transparent !important;\n color: inherit !important;\n }\n\n .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n margin: 0 !important;\n width: 1.5rem !important;\n height: 1.5rem !important;\n line-height: 1.5rem !important;\n }\n\n .react-datepicker__navigation {\n position: static;\n border-radius: 0.5rem;\n transition: all .2s ease;\n &:is([disabled]){\n cursor: not-allowed;\n }\n &:not([disabled]):hover {\n background-color: white;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n z-index: 2;\n cursor: pointer;\n }\n }\n\n .react-datepicker__month-container {\n float: none !important;\n\n .react-datepicker__header {\n background-color: white !important;\n border: none !important;\n padding: 0 0 0 0 !important;\n\n .headerTopContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", ";\n\n .react-datepicker__navigation {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n .leftButtons, .rightButtons {\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--dark-opacity-50);\n\n svg {\n color: var(--dark-opacity-50);\n }\n }\n }\n\n .react-datepicker__current-month {\n display: block !important;\n font: var(--body-semi-bold-14-17);\n }\n }\n\n .react-datepicker__month {\n margin: ", ";\n }\n\n .react-datepicker__day-names {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: ", ";\n\n .react-datepicker__day-name {\n color: var(--grey-50);\n font: var(--body-medium-13-16);\n }\n }\n\n .react-datepicker__week {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n + .react-datepicker__week {\n margin-top: 0.5rem;\n }\n\n\n .react-datepicker__day {\n font: var(--caption-bold-12-15);\n color: var(--dark);\n outline: none !important;\n \n &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n border-radius: 0.25rem;\n background-color: var(--primary-opacity-10) !important;\n color: var(--primary) !important;\n cursor: pointer;\n }\n\n &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n color: var(--primary) !important;\n }\n\n &:is(.react-datepicker__day--outside-month) {\n color: var(--grey-50);\n }\n }\n .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n color: var(--grey-50) !important;\n background-color: transparent !important;\n text-decoration: line-through;\n cursor: no-drop;\n }\n .react-datepicker__day--outside-month{\n visibility: hidden;\n }\n }\n }\n }\n\n input {\n &:is(.react-datepicker-ignore-onclickoutside) {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n\n"], [";\n .react-datepicker-wrapper {\n display: block;\n }\n\n .react-datepicker-popper {\n transform: none !important;\n top: 100% !important;\n width: 100%;\n z-index: 5;\n\n .react-datepicker__triangle {\n display: none !important;\n }\n\n }\n .react-datepicker {\n font-family: inherit !important;\n width: 100%;\n border: none !important;\n border-radius: 0 0 0.5rem 0.5rem !important;\n box-shadow: ", ";\n\n .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n background-color: transparent !important;\n color: inherit !important;\n }\n\n .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n margin: 0 !important;\n width: 1.5rem !important;\n height: 1.5rem !important;\n line-height: 1.5rem !important;\n }\n\n .react-datepicker__navigation {\n position: static;\n border-radius: 0.5rem;\n transition: all .2s ease;\n &:is([disabled]){\n cursor: not-allowed;\n }\n &:not([disabled]):hover {\n background-color: white;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n z-index: 2;\n cursor: pointer;\n }\n }\n\n .react-datepicker__month-container {\n float: none !important;\n\n .react-datepicker__header {\n background-color: white !important;\n border: none !important;\n padding: 0 0 0 0 !important;\n\n .headerTopContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", ";\n\n .react-datepicker__navigation {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n .leftButtons, .rightButtons {\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--dark-opacity-50);\n\n svg {\n color: var(--dark-opacity-50);\n }\n }\n }\n\n .react-datepicker__current-month {\n display: block !important;\n font: var(--body-semi-bold-14-17);\n }\n }\n\n .react-datepicker__month {\n margin: ", ";\n }\n\n .react-datepicker__day-names {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: ", ";\n\n .react-datepicker__day-name {\n color: var(--grey-50);\n font: var(--body-medium-13-16);\n }\n }\n\n .react-datepicker__week {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n + .react-datepicker__week {\n margin-top: 0.5rem;\n }\n\n\n .react-datepicker__day {\n font: var(--caption-bold-12-15);\n color: var(--dark);\n outline: none !important;\n \n &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n border-radius: 0.25rem;\n background-color: var(--primary-opacity-10) !important;\n color: var(--primary) !important;\n cursor: pointer;\n }\n\n &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n color: var(--primary) !important;\n }\n\n &:is(.react-datepicker__day--outside-month) {\n color: var(--grey-50);\n }\n }\n .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n color: var(--grey-50) !important;\n background-color: transparent !important;\n text-decoration: line-through;\n cursor: no-drop;\n }\n .react-datepicker__day--outside-month{\n visibility: hidden;\n }\n }\n }\n }\n\n input {\n &:is(.react-datepicker-ignore-onclickoutside) {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n\n"])), function (props) { return props.$inline ? "none" : "0 6px 30px 0 var(--box-shadow-color)"; }, function (props) { return props.$inline ? "0 0 1rem 0" : "1rem 1.5rem"; }, function (props) { return props.$inline ? "0 !important" : "0 1.5rem 1rem 1.5rem !important"; }, function (props) { return props.$inline ? "0.5rem 0 !important" : "0.5rem 1.5rem !important"; });
|
|
16
31
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -28,6 +28,7 @@ export interface Input {
|
|
|
28
28
|
minDate?: Date;
|
|
29
29
|
maxDate?: Date;
|
|
30
30
|
filterDate?: any;
|
|
31
|
+
onCalendarOpen?(): void;
|
|
31
32
|
}
|
|
32
33
|
export interface InputStyledProps {
|
|
33
34
|
disabled?: boolean;
|
|
@@ -37,6 +38,7 @@ export interface InputStyledProps {
|
|
|
37
38
|
$isClearable?: boolean;
|
|
38
39
|
$inline?: boolean;
|
|
39
40
|
$hasIcon?: any;
|
|
41
|
+
$isCalendarOpen?: boolean;
|
|
40
42
|
}
|
|
41
43
|
export interface ContainerProps {
|
|
42
44
|
$width?: string;
|
|
@@ -25,7 +25,7 @@ var OptionMenu = function (_a) {
|
|
|
25
25
|
var dataWithColumn = (0, refactorColumn_1.default)(data, rowLength || 0);
|
|
26
26
|
var ButtonLinkComponent = function (_a) {
|
|
27
27
|
var item = _a.item, children = _a.children, hasBadge = _a.hasBadge, badgeText = _a.badgeText;
|
|
28
|
-
return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "componentWrapper" }, { children: [children, hasBadge ? (0, jsx_runtime_1.jsx)("div", __assign({ className: "badgesWrapper" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "
|
|
28
|
+
return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "componentWrapper" }, { children: [children, hasBadge ? (0, jsx_runtime_1.jsx)("div", __assign({ className: "badgesWrapper" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: badgeText }) })) : ""] })) })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "componentWrapper" }, { children: [children, hasBadge ? (0, jsx_runtime_1.jsx)("div", __assign({ className: "badgesWrapper" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: badgeText }) })) : ""] })) })));
|
|
29
29
|
};
|
|
30
30
|
return ((0, jsx_runtime_1.jsx)(OptionMenu_styled_1.OptionMenuStyled, __assign({ "$gridTemplateColumns": grid, "$gridItemWidth": gridItemWidth }, { children: dataWithColumn.map(function (item, key) { return ((0, jsx_runtime_1.jsx)(OptionMenu_styled_1.SubCategoryItem, { children: (0, jsx_runtime_1.jsx)(OptionMenu_styled_1.SubCategoryInner, { children: item.map(function (subItem, subKey) { return ((0, jsx_runtime_1.jsx)(OptionMenu_styled_1.SubCategoryInnerItem, __assign({ "$isSeeAll": subItem.isSeeAll }, { children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, __assign({ item: subItem, hasBadge: subItem.hasBadge, badgeText: subItem.badgeText }, { children: (0, jsx_runtime_1.jsx)(OptionMenu_styled_1.SubCategoryInnerItemButtonInner, __assign({ "$hasBadge": subItem.hasBadge, "$isActive": hasActiveItem && subItem.isActive }, { children: subItem.name })) })) }), subItem.id)); }) }) }, key)); }) })));
|
|
31
31
|
};
|
|
@@ -12,6 +12,6 @@ var styled_components_1 = __importDefault(require("styled-components"));
|
|
|
12
12
|
exports.OptionMenuStyled = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin: 0;\n padding: 8px;\n border: 1px solid var(--grey-10);\n background-color: white;\n border-radius: 0.5rem;\n transition: all 0.2s ease-in-out;\n display: grid;\n gap: 0 16px;\n grid-template-columns: repeat(", ", ", ");\n transition-delay: 0s;\n"], ["\n margin: 0;\n padding: 8px;\n border: 1px solid var(--grey-10);\n background-color: white;\n border-radius: 0.5rem;\n transition: all 0.2s ease-in-out;\n display: grid;\n gap: 0 16px;\n grid-template-columns: repeat(", ", ", ");\n transition-delay: 0s;\n"])), function (props) { return props.$gridTemplateColumns || '3'; }, function (props) { return props.$gridItemWidth && props.$gridItemWidth; });
|
|
13
13
|
exports.SubCategoryItem = styled_components_1.default.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n padding: 0;\n margin: 0;\n"], ["\n display: block;\n padding: 0;\n margin: 0;\n"])));
|
|
14
14
|
exports.SubCategoryInner = styled_components_1.default.ul(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 0;\n display: grid;\n gap:4px 0;\n margin: 0;\n"], ["\n padding: 0;\n display: grid;\n gap:4px 0;\n margin: 0;\n"])));
|
|
15
|
-
exports.SubCategoryInnerItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 0;\n display: block;\n a {\n color: var(--dark);\n text-decoration: none;\n position: relative;\n span {\n font-weight: ", ";\n }\n .badgesWrapper{\n position: absolute;\n right: 0.5rem;\n top: 50%;\n transform: translateY(-50%);\n }\n }\n"], ["\n padding: 0;\n display: block;\n a {\n color: var(--dark);\n text-decoration: none;\n position: relative;\n span {\n font-weight: ", ";\n }\n .badgesWrapper{\n position: absolute;\n right: 0.5rem;\n top: 50%;\n transform: translateY(-50%);\n }\n }\n"])), function (props) { return props.$isSeeAll ? '700' : '500'; });
|
|
15
|
+
exports.SubCategoryInnerItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 0;\n display: block;\n a {\n color: var(--dark);\n text-decoration: none;\n position: relative;\n span {\n font-weight: ", ";\n }\n .badgesWrapper{\n position: absolute;\n right: 0.5rem;\n top: 50%;\n transform: translateY(-50%);\n user-select: none;\n pointer-events: none;\n }\n }\n"], ["\n padding: 0;\n display: block;\n a {\n color: var(--dark);\n text-decoration: none;\n position: relative;\n span {\n font-weight: ", ";\n }\n .badgesWrapper{\n position: absolute;\n right: 0.5rem;\n top: 50%;\n transform: translateY(-50%);\n user-select: none;\n pointer-events: none;\n }\n }\n"])), function (props) { return props.$isSeeAll ? '700' : '500'; });
|
|
16
16
|
exports.SubCategoryInnerItemButtonInner = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display:block;\n text-decoration: none;\n color: var(--dark);\n padding: ", ";\n border-radius: 5px;\n background: transparent;\n outline:0;\n border:0;\n width:100%;\n text-align:start;\n cursor:pointer;\n box-sizing: border-box;\n font:var(--caption-medium-12-15);\n ", "\n background-color: var(--primary-opacity-10);\n color: var(--primary) !important;\n font-weight: 700 !important;\n ", "\n"], ["\n display:block;\n text-decoration: none;\n color: var(--dark);\n padding: ", ";\n border-radius: 5px;\n background: transparent;\n outline:0;\n border:0;\n width:100%;\n text-align:start;\n cursor:pointer;\n box-sizing: border-box;\n font:var(--caption-medium-12-15);\n ", "\n background-color: var(--primary-opacity-10);\n color: var(--primary) !important;\n font-weight: 700 !important;\n ", "\n"])), function (props) { return props.$hasBadge ? '0.5rem 50px 0.5rem 0.5rem' : '0.5rem'; }, function (props) { return (props.$isActive ? "" : "&:hover{"); }, function (props) { return (props.$isActive ? "" : "}"); });
|
|
17
17
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -34,6 +34,6 @@ var Badges_1 = __importDefault(require("../Badges"));
|
|
|
34
34
|
var ProductCardVertical = function (_a) {
|
|
35
35
|
var _b = _a.title, title = _b === void 0 ? props_1.ProductCardVerticalDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.ProductCardVerticalDefault.description : _c, _d = _a.hasDiscount, hasDiscount = _d === void 0 ? props_1.ProductCardVerticalDefault.hasDiscount : _d, _e = _a.price, price = _e === void 0 ? props_1.ProductCardVerticalDefault.price : _e, _f = _a.oldPrice, oldPrice = _f === void 0 ? props_1.ProductCardVerticalDefault.oldPrice : _f, _g = _a.oldPricePeriod, oldPricePeriod = _g === void 0 ? props_1.ProductCardVerticalDefault.oldPricePeriod : _g, _h = _a.slug, slug = _h === void 0 ? props_1.ProductCardVerticalDefault.slug : _h, _j = _a.period, period = _j === void 0 ? props_1.ProductCardVerticalDefault.period : _j, _k = _a.discountRate, discountRate = _k === void 0 ? props_1.ProductCardVerticalDefault.discountRate : _k, _l = _a.isResponsive, isResponsive = _l === void 0 ? props_1.ProductCardVerticalDefault.isResponsive : _l, _m = _a.image, image = _m === void 0 ? props_1.ProductCardVerticalDefault.image : _m, _o = _a.hasCustomBadge, hasCustomBadge = _o === void 0 ? props_1.ProductCardVerticalDefault.hasCustomBadge : _o, _p = _a.customBadge, customBadge = _p === void 0 ? props_1.ProductCardVerticalDefault.customBadge : _p, _q = _a.hasNewImageType, hasNewImageType = _q === void 0 ? props_1.ProductCardVerticalDefault.hasNewImageType : _q, _r = _a.hasOutOfStock, hasOutOfStock = _r === void 0 ? props_1.ProductCardVerticalDefault.hasOutOfStock : _r, _s = _a.hasBeltBadge, hasBeltBadge = _s === void 0 ? props_1.ProductCardVerticalDefault.hasBeltBadge : _s, _t = _a.beltBadgeVariant, beltBadgeVariant = _t === void 0 ? props_1.ProductCardVerticalDefault.beltBadgeVariant : _t, _u = _a.beltBadgeTitle, beltBadgeTitle = _u === void 0 ? props_1.ProductCardVerticalDefault.beltBadgeTitle : _u, _v = _a.imageInfoText, imageInfoText = _v === void 0 ? props_1.ProductCardVerticalDefault.imageInfoText : _v, _w = _a.imageInfoTextVariant, imageInfoTextVariant = _w === void 0 ? props_1.ProductCardVerticalDefault.imageInfoTextVariant : _w, _x = _a.isShowOldPrice, isShowOldPrice = _x === void 0 ? props_1.ProductCardVerticalDefault.isShowOldPrice : _x, _y = _a.isOldPricePeriodUnderline, isOldPricePeriodUnderline = _y === void 0 ? props_1.ProductCardVerticalDefault.isOldPricePeriodUnderline : _y, _z = _a.hasImageOffset, hasImageOffset = _z === void 0 ? props_1.ProductCardVerticalDefault.hasImageOffset : _z, other = __rest(_a, ["title", "description", "hasDiscount", "price", "oldPrice", "oldPricePeriod", "slug", "period", "discountRate", "isResponsive", "image", "hasCustomBadge", "customBadge", "hasNewImageType", "hasOutOfStock", "hasBeltBadge", "beltBadgeVariant", "beltBadgeTitle", "imageInfoText", "imageInfoTextVariant", "isShowOldPrice", "isOldPricePeriodUnderline", "hasImageOffset"]);
|
|
36
36
|
var t = (0, react_i18next_1.useTranslation)().t;
|
|
37
|
-
return ((0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.ProductCardVerticalStyled, __assign({ "$isResponsive": isResponsive, "$discountRate": discountRate, "$hasNewImageType": hasNewImageType, "$hasOutOfStock": hasOutOfStock, "$imageInfoTextVariant": imageInfoTextVariant, "$isOldPricePeriodUnderline": isOldPricePeriodUnderline, "$hasImageOffset": hasImageOffset }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [hasBeltBadge && !hasCustomBadge && (0, jsx_runtime_1.jsx)("div", __assign({ className: "cartBadge" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { variant: beltBadgeVariant, size: "medium", left: (isResponsive ? '16px' : '8px'), top: (isResponsive ? '16px' : '8px'), title: beltBadgeTitle }) })), hasCustomBadge && (0, jsx_runtime_1.jsx)("div", __assign({ className: "cartBadge hasInset" }, { children: customBadge })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "img" }, { children: [image, hasOutOfStock && (0, jsx_runtime_1.jsx)("div", __assign({ className: "outOfStock" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "light", title: t("ALL_RENTED") }) })), imageInfoText && (0, jsx_runtime_1.jsx)("div", { className: "imageInfoText", dangerouslySetInnerHTML: { __html: imageInfoText } })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardContent" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle" }, { children: title })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "productCardDescription" }, { children: description })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardPriceContent" }, { children: [discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "discountRate" }, { children: ["%", discountRate] })), (0, jsx_runtime_1.jsxs)("div", { children: [oldPrice && isShowOldPrice && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "oldPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: oldPrice })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(oldPricePeriod) }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "newPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: price })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(period) }))] }))] })] }))] }))] }) })));
|
|
37
|
+
return ((0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.ProductCardVerticalStyled, __assign({ "$isResponsive": isResponsive, "$discountRate": discountRate, "$hasNewImageType": hasNewImageType, "$hasOutOfStock": hasOutOfStock, "$imageInfoTextVariant": imageInfoTextVariant, "$isOldPricePeriodUnderline": isOldPricePeriodUnderline, "$hasImageOffset": hasImageOffset }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [hasBeltBadge && !hasCustomBadge && (0, jsx_runtime_1.jsx)("div", __assign({ className: "cartBadge" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { variant: beltBadgeVariant, size: "medium", left: (isResponsive ? '16px' : '8px'), top: (isResponsive ? '16px' : '8px'), title: beltBadgeTitle }) })), hasCustomBadge && (0, jsx_runtime_1.jsx)("div", __assign({ className: "cartBadge hasInset" }, { children: customBadge })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "img" }, { children: [image, hasOutOfStock && (0, jsx_runtime_1.jsx)("div", __assign({ className: "outOfStock" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "light", title: t("ALL_RENTED") }) })), imageInfoText && (0, jsx_runtime_1.jsx)("div", { className: "imageInfoText", dangerouslySetInnerHTML: { __html: imageInfoText } })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardContent" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle" }, { children: title })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "productCardDescription" }, { children: description })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardPriceContent" }, { children: [discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "discountRate" }, { children: ["%", discountRate] })), (0, jsx_runtime_1.jsxs)("div", { children: [oldPrice && isShowOldPrice && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "oldPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: oldPrice })), oldPricePeriod && (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(oldPricePeriod) }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "newPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: price })), period && (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(period) }))] }))] })] }))] }))] }) })));
|
|
38
38
|
};
|
|
39
39
|
exports.default = (0, react_1.memo)(ProductCardVertical);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "krl-alfred",
|
|
3
|
-
"version": "2.17.
|
|
3
|
+
"version": "2.17.45",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist"
|
|
6
6
|
],
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"@types/styled-components": "^5.1.34",
|
|
26
26
|
"classnames": "^2.3.2",
|
|
27
27
|
"css-loader": "^6.7.3",
|
|
28
|
-
"date-fns": "^
|
|
28
|
+
"date-fns": "^4.1.0",
|
|
29
29
|
"i18next": "^23.7.6",
|
|
30
30
|
"plop": "^3.1.2",
|
|
31
31
|
"rc-pagination": "^4.3.0",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"rc-table": "^7.48.0",
|
|
34
34
|
"react": "^18.2.0",
|
|
35
35
|
"react-circular-progressbar": "^2.1.0",
|
|
36
|
-
"react-datepicker": "^
|
|
36
|
+
"react-datepicker": "^9.0.0",
|
|
37
37
|
"react-device-detect": "^2.2.3",
|
|
38
38
|
"react-dom": "^18.2.0",
|
|
39
39
|
"react-i18next": "^13.5.0",
|