krl-alfred 1.79.6 → 1.80.0
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/DescriptionCard/DescriptionCard.styled.js +2 -2
- package/dist/components/DescriptionCard/stories/DescriptionCard.stories.js +18 -5
- package/dist/components/Icon/index.js +4 -0
- package/dist/components/Input/Input.styled.js +1 -1
- package/dist/components/ProductCardHorizontal/ProductCardHorizontal.js +6 -2
- package/dist/components/ProductCardHorizontal/ProductCardHorizontal.styled.js +1 -1
- package/dist/components/ProductCardHorizontal/props.js +1 -0
- package/dist/components/ProductCardHorizontal/stories/ProductCardHorizontal.stories.js +2 -1
- package/dist/components/SearchBox/SearchBox.js +2 -3
- package/dist/components/SkeletonLoader/SkeletonLoader.js +11 -0
- package/dist/components/SkeletonLoader/SkeletonLoader.styled.js +13 -0
- package/dist/components/SkeletonLoader/index.js +8 -0
- package/dist/components/SkeletonLoader/props.js +7 -0
- package/dist/components/SkeletonLoader/stories/SkeletonLoader.stories.js +16 -0
- package/dist/components/Table/Table.js +2 -1
- package/dist/index.js +3 -1
- package/package.json +1 -1
|
@@ -14,11 +14,11 @@ exports.DescriptionCardHeaderStyled = styled_components_1.default.div(templateOb
|
|
|
14
14
|
exports.HeaderTitleStyled = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font: var(--headline-semi-bold-18-22);\n display: block;\n"], ["\n font: var(--headline-semi-bold-18-22);\n display: block;\n"])));
|
|
15
15
|
exports.HeaderImageWrapperStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: block;\n border: 1px solid var(--dark-opacity-5);\n width: 64px;\n height: 64px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin-right: 1.5rem;\n *{\n width: 100%;\n height: 100%;\n object-fit: contain;\n display: block;\n padding: 0.5rem;\n box-sizing: border-box;\n }\n"], ["\n display: block;\n border: 1px solid var(--dark-opacity-5);\n width: 64px;\n height: 64px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin-right: 1.5rem;\n *{\n width: 100%;\n height: 100%;\n object-fit: contain;\n display: block;\n padding: 0.5rem;\n box-sizing: border-box;\n }\n"])));
|
|
16
16
|
exports.BadgeWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: block;\n margin-left: 1.5rem;\n"], ["\n display: block;\n margin-left: 1.5rem;\n"])));
|
|
17
|
-
exports.ListStyled = styled_components_1.default.ul(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ",1fr);\n padding: 0;\n margin: 0;\n position: relative;\n &:before{\n content: \"\";\n position: absolute;\n inset: 0;\n border: 1px solid
|
|
17
|
+
exports.ListStyled = styled_components_1.default.ul(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ",1fr);\n padding: 0;\n margin: 0;\n position: relative;\n &:before{\n content: \"\";\n position: absolute;\n inset: -1px -1px 0 -1px;\n border: 1px solid var(--dark-opacity-10);\n border-radius: inherit;\n user-select: none;\n pointer-events: none;\n }\n li{\n display: block;\n padding: 1.5rem;\n border-right: 1px solid var(--dark-opacity-10);\n border-bottom: 1px solid var(--dark-opacity-10);\n word-break: break-word;\n &:is(:last-child){\n border-right: 0;\n }\n .displayTitle{\n display: block;\n color: var(--dark-opacity-50);\n font: var(--body-semi-bold-14-17);\n }\n .displayValue{\n display: block;\n margin-top: 0.5rem;\n color: var(--dark);\n font: var(--body-semi-bold-14-17);\n }\n }\n"], ["\n display: grid;\n grid-template-columns: repeat(", ",1fr);\n padding: 0;\n margin: 0;\n position: relative;\n &:before{\n content: \"\";\n position: absolute;\n inset: -1px -1px 0 -1px;\n border: 1px solid var(--dark-opacity-10);\n border-radius: inherit;\n user-select: none;\n pointer-events: none;\n }\n li{\n display: block;\n padding: 1.5rem;\n border-right: 1px solid var(--dark-opacity-10);\n border-bottom: 1px solid var(--dark-opacity-10);\n word-break: break-word;\n &:is(:last-child){\n border-right: 0;\n }\n .displayTitle{\n display: block;\n color: var(--dark-opacity-50);\n font: var(--body-semi-bold-14-17);\n }\n .displayValue{\n display: block;\n margin-top: 0.5rem;\n color: var(--dark);\n font: var(--body-semi-bold-14-17);\n }\n }\n"])), function (props) { return props.$boxSize; });
|
|
18
18
|
exports.DropdownWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: block;\n position: relative;\n\n &:hover{\n > div{\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n transition-delay: 0.2s;\n }\n button{\n svg{\n transform: rotate(180deg);\n }\n }\n }\n"], ["\n display: block;\n position: relative;\n\n &:hover{\n > div{\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n transition-delay: 0.2s;\n }\n button{\n svg{\n transform: rotate(180deg);\n }\n }\n }\n"])));
|
|
19
19
|
exports.SubMenu = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 100%;\n transition: all 0.2s ease-in-out;\n opacity: 0;\n visibility: hidden;\n transform: translateY(10px);\n transition-delay: 0s;\n padding: 0;\n margin: 0;\n z-index: 5;\n > ul{\n margin: 0.5rem 0 0 0;\n }\n"], ["\n position: absolute;\n right: 0;\n top: 100%;\n transition: all 0.2s ease-in-out;\n opacity: 0;\n visibility: hidden;\n transform: translateY(10px);\n transition-delay: 0s;\n padding: 0;\n margin: 0;\n z-index: 5;\n > ul{\n margin: 0.5rem 0 0 0;\n }\n"])));
|
|
20
20
|
exports.AccordionListWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n\n"], ["\n\n"])));
|
|
21
|
-
exports.AccordionItemWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n border-top: 1px solid var(--dark-opacity-10);\n"], ["\n border-top: 1px solid var(--dark-opacity-10);\n"])));
|
|
21
|
+
exports.AccordionItemWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n + div{\n border-top: 1px solid var(--dark-opacity-10);\n margin-top: -1px;\n }\n"], ["\n + div{\n border-top: 1px solid var(--dark-opacity-10);\n margin-top: -1px;\n }\n"])));
|
|
22
22
|
exports.AccordionItemHeader = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--primary);\n padding: 1.5rem;\n cursor: pointer;\n border-bottom: ", ";\n strong{\n font: var(--body-bold-14-17);\n display: block;\n color: inherit;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--primary);\n padding: 1.5rem;\n cursor: pointer;\n border-bottom: ", ";\n strong{\n font: var(--body-bold-14-17);\n display: block;\n color: inherit;\n }\n"])), function (props) { return props.$show ? "1px solid var(--dark-opacity-10)" : "none"; });
|
|
23
23
|
exports.AccordionItemBody = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n\n"], ["\n\n"])));
|
|
24
24
|
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;
|
|
@@ -1,9 +1,20 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
2
13
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
14
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
15
|
};
|
|
5
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.Default = void 0;
|
|
17
|
+
exports.HasAccordion = exports.Default = void 0;
|
|
7
18
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
19
|
var DescriptionCard_1 = __importDefault(require("../DescriptionCard"));
|
|
9
20
|
var descriptionList_json_1 = __importDefault(require("./../../../jsons/descriptionList.json"));
|
|
@@ -44,7 +55,11 @@ exports.Default = {
|
|
|
44
55
|
},
|
|
45
56
|
}
|
|
46
57
|
],
|
|
47
|
-
|
|
58
|
+
headerImage: (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" }),
|
|
59
|
+
},
|
|
60
|
+
};
|
|
61
|
+
exports.HasAccordion = {
|
|
62
|
+
args: __assign(__assign({}, exports.Default.args), { accordionList: [
|
|
48
63
|
{
|
|
49
64
|
title: "Gelen Kargo",
|
|
50
65
|
list: [
|
|
@@ -79,7 +94,5 @@ exports.Default = {
|
|
|
79
94
|
}
|
|
80
95
|
]
|
|
81
96
|
}
|
|
82
|
-
],
|
|
83
|
-
headerImage: (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" }),
|
|
84
|
-
},
|
|
97
|
+
], headerImage: (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" }) }),
|
|
85
98
|
};
|
|
@@ -714,6 +714,10 @@ exports.iconList = {
|
|
|
714
714
|
var props = __rest(_a, []);
|
|
715
715
|
return (0, jsx_runtime_1.jsx)(Cargo_1.default, __assign({}, props));
|
|
716
716
|
},
|
|
717
|
+
Cargo1: function (_a) {
|
|
718
|
+
var props = __rest(_a, []);
|
|
719
|
+
return (0, jsx_runtime_1.jsx)(Cargo1_1.default, __assign({}, props));
|
|
720
|
+
},
|
|
717
721
|
Cargo2: function (_a) {
|
|
718
722
|
var props = __rest(_a, []);
|
|
719
723
|
return (0, jsx_runtime_1.jsx)(Cargo2_1.default, __assign({}, props));
|
|
@@ -12,5 +12,5 @@ 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 &.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 &:not(.hasNoBg){\n &:hover{\n background-color: var(--primary-opacity-5);\n }\n }\n }\n .removeIcon {\n position: absolute;\n top: 17px;\n right: 16px;\n cursor: pointer;\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 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 &.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 &:not(.hasNoBg){\n &:hover{\n background-color: var(--primary-opacity-5);\n }\n }\n }\n .removeIcon {\n position: absolute;\n top: 17px;\n right: 16px;\n cursor: pointer;\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 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
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 font: var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\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 &: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 font: var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\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 &:is([disabled]){\n color: var(--dark-opacity-25);\n }\n\n"])), function (props) { return props.disabled ? 'var(--dark-opacity-5)' : (props.$hasError ? 'white' : 'var(--dark-opacity-3)'); }, function (props) { return props.$hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.$hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; }, 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
|
-
exports.DatePickerWrapperStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n .react-datepicker-wrapper{\n display: block;\n }\n .react-datepicker-popper {\n transform: none !important;\n top: 100% !important;\n width: 100%;\n .react-datepicker__triangle{\n display: none !important;\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: 0 6px 30px 0 var(--box-shadow-color);\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 .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 .react-datepicker__navigation{\n position: static;\n border-radius: 0.5rem;\n transition:all .2s ease;\n &:hover{\n background-color: white;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n z-index: 2;\n }\n }\n .react-datepicker__month-container{\n float: none !important;\n .react-datepicker__header{\n background-color: white !important;\n border:none !important;\n padding: 0 0 0 0 !important;\n .headerTopContent{\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 1rem 1.5rem;\n .react-datepicker__navigation{\n width: 1.5rem;\n height: 1.5rem;\n }\n .leftButtons, .rightButtons{\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--dark-opacity-50);\n svg{\n color: var(--dark-opacity-50);\n }\n }\n }\n .react-datepicker__current-month{\n display: block !important;\n }\n }\n .react-datepicker__month{\n margin: 0 1.5rem 1rem 1.5rem !important;\n }\n .react-datepicker__day-names{\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0.5rem 1.5rem !important;\n .react-datepicker__day-name{\n color: var(--grey-50);\n font: var(--body-medium-13-16);\n }\n }\n .react-datepicker__week{\n display: flex;\n align-items: center;\n justify-content: space-between;\n + .react-datepicker__week{\n margin-top: 0.5rem;\n }\n .react-datepicker__day{\n font: var(--caption-bold-12-15);\n color: var(--dark);\n outline: none !important;\n &:is(.react-datepicker__day--selected), &:hover{\n border-radius: 0.25rem;\n background-color: var(--primary-opacity-10) !important;\n color: var(--primary) !important;\n }\n &:is(.react-datepicker__day--today){\n color: var(--primary) !important;\n }\n &:is(.react-datepicker__day--outside-month){\n color: var(--grey-50);\n }\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 .react-datepicker-popper {\n transform: none !important;\n top: 100% !important;\n width: 100%;\n .react-datepicker__triangle{\n display: none !important;\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: 0 6px 30px 0 var(--box-shadow-color);\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 .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 .react-datepicker__navigation{\n position: static;\n border-radius: 0.5rem;\n transition:all .2s ease;\n &:hover{\n background-color: white;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n z-index: 2;\n }\n }\n .react-datepicker__month-container{\n float: none !important;\n .react-datepicker__header{\n background-color: white !important;\n border:none !important;\n padding: 0 0 0 0 !important;\n .headerTopContent{\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 1rem 1.5rem;\n .react-datepicker__navigation{\n width: 1.5rem;\n height: 1.5rem;\n }\n .leftButtons, .rightButtons{\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--dark-opacity-50);\n svg{\n color: var(--dark-opacity-50);\n }\n }\n }\n .react-datepicker__current-month{\n display: block !important;\n }\n }\n .react-datepicker__month{\n margin: 0 1.5rem 1rem 1.5rem !important;\n }\n .react-datepicker__day-names{\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0.5rem 1.5rem !important;\n .react-datepicker__day-name{\n color: var(--grey-50);\n font: var(--body-medium-13-16);\n }\n }\n .react-datepicker__week{\n display: flex;\n align-items: center;\n justify-content: space-between;\n + .react-datepicker__week{\n margin-top: 0.5rem;\n }\n .react-datepicker__day{\n font: var(--caption-bold-12-15);\n color: var(--dark);\n outline: none !important;\n &:is(.react-datepicker__day--selected), &:hover{\n border-radius: 0.25rem;\n background-color: var(--primary-opacity-10) !important;\n color: var(--primary) !important;\n }\n &:is(.react-datepicker__day--today){\n color: var(--primary) !important;\n }\n &:is(.react-datepicker__day--outside-month){\n color: var(--grey-50);\n }\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"])));
|
|
15
|
+
exports.DatePickerWrapperStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n .react-datepicker-wrapper{\n display: block;\n }\n .react-datepicker-popper {\n transform: none !important;\n top: 100% !important;\n width: 100%;\n .react-datepicker__triangle{\n display: none !important;\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: 0 6px 30px 0 var(--box-shadow-color);\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 .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 .react-datepicker__navigation{\n position: static;\n border-radius: 0.5rem;\n transition:all .2s ease;\n &:hover{\n background-color: white;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n z-index: 2;\n }\n }\n .react-datepicker__month-container{\n float: none !important;\n .react-datepicker__header{\n background-color: white !important;\n border:none !important;\n padding: 0 0 0 0 !important;\n .headerTopContent{\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 1rem 1.5rem;\n .react-datepicker__navigation{\n width: 1.5rem;\n height: 1.5rem;\n }\n .leftButtons, .rightButtons{\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--dark-opacity-50);\n svg{\n color: var(--dark-opacity-50);\n }\n }\n }\n .react-datepicker__current-month{\n display: block !important;\n font: var(--body-semi-bold-14-17);\n }\n }\n .react-datepicker__month{\n margin: 0 1.5rem 1rem 1.5rem !important;\n }\n .react-datepicker__day-names{\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0.5rem 1.5rem !important;\n .react-datepicker__day-name{\n color: var(--grey-50);\n font: var(--body-medium-13-16);\n }\n }\n .react-datepicker__week{\n display: flex;\n align-items: center;\n justify-content: space-between;\n + .react-datepicker__week{\n margin-top: 0.5rem;\n }\n .react-datepicker__day{\n font: var(--caption-bold-12-15);\n color: var(--dark);\n outline: none !important;\n &:is(.react-datepicker__day--selected), &:hover{\n border-radius: 0.25rem;\n background-color: var(--primary-opacity-10) !important;\n color: var(--primary) !important;\n }\n &:is(.react-datepicker__day--today){\n color: var(--primary) !important;\n }\n &:is(.react-datepicker__day--outside-month){\n color: var(--grey-50);\n }\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 .react-datepicker-popper {\n transform: none !important;\n top: 100% !important;\n width: 100%;\n .react-datepicker__triangle{\n display: none !important;\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: 0 6px 30px 0 var(--box-shadow-color);\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 .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 .react-datepicker__navigation{\n position: static;\n border-radius: 0.5rem;\n transition:all .2s ease;\n &:hover{\n background-color: white;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n z-index: 2;\n }\n }\n .react-datepicker__month-container{\n float: none !important;\n .react-datepicker__header{\n background-color: white !important;\n border:none !important;\n padding: 0 0 0 0 !important;\n .headerTopContent{\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 1rem 1.5rem;\n .react-datepicker__navigation{\n width: 1.5rem;\n height: 1.5rem;\n }\n .leftButtons, .rightButtons{\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--dark-opacity-50);\n svg{\n color: var(--dark-opacity-50);\n }\n }\n }\n .react-datepicker__current-month{\n display: block !important;\n font: var(--body-semi-bold-14-17);\n }\n }\n .react-datepicker__month{\n margin: 0 1.5rem 1rem 1.5rem !important;\n }\n .react-datepicker__day-names{\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0.5rem 1.5rem !important;\n .react-datepicker__day-name{\n color: var(--grey-50);\n font: var(--body-medium-13-16);\n }\n }\n .react-datepicker__week{\n display: flex;\n align-items: center;\n justify-content: space-between;\n + .react-datepicker__week{\n margin-top: 0.5rem;\n }\n .react-datepicker__day{\n font: var(--caption-bold-12-15);\n color: var(--dark);\n outline: none !important;\n &:is(.react-datepicker__day--selected), &:hover{\n border-radius: 0.25rem;\n background-color: var(--primary-opacity-10) !important;\n color: var(--primary) !important;\n }\n &:is(.react-datepicker__day--today){\n color: var(--primary) !important;\n }\n &:is(.react-datepicker__day--outside-month){\n color: var(--grey-50);\n }\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"])));
|
|
16
16
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -10,16 +10,20 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
};
|
|
11
11
|
return __assign.apply(this, arguments);
|
|
12
12
|
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
13
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
17
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
15
18
|
var props_1 = require("./props");
|
|
16
19
|
var ProductCardHorizontal_styled_1 = require("./ProductCardHorizontal.styled");
|
|
20
|
+
var SkeletonLoader_1 = __importDefault(require("../SkeletonLoader"));
|
|
17
21
|
var ProductCardHorizontal = function (_a) {
|
|
18
|
-
var _b = _a.title, title = _b === void 0 ? props_1.ProductCardHorizontalDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.ProductCardHorizontalDefault.description : _c, _d = _a.price, price = _d === void 0 ? props_1.ProductCardHorizontalDefault.price : _d, _e = _a.slug, slug = _e === void 0 ? props_1.ProductCardHorizontalDefault.slug : _e, _f = _a.period, period = _f === void 0 ? props_1.ProductCardHorizontalDefault.period : _f, _g = _a.image, image = _g === void 0 ? props_1.ProductCardHorizontalDefault.image : _g, _h = _a.component, component = _h === void 0 ? props_1.ProductCardHorizontalDefault.component : _h, _j = _a.onClick, onClick = _j === void 0 ? props_1.ProductCardHorizontalDefault.onClick : _j;
|
|
22
|
+
var _b = _a.title, title = _b === void 0 ? props_1.ProductCardHorizontalDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.ProductCardHorizontalDefault.description : _c, _d = _a.price, price = _d === void 0 ? props_1.ProductCardHorizontalDefault.price : _d, _e = _a.slug, slug = _e === void 0 ? props_1.ProductCardHorizontalDefault.slug : _e, _f = _a.period, period = _f === void 0 ? props_1.ProductCardHorizontalDefault.period : _f, _g = _a.image, image = _g === void 0 ? props_1.ProductCardHorizontalDefault.image : _g, _h = _a.component, component = _h === void 0 ? props_1.ProductCardHorizontalDefault.component : _h, _j = _a.onClick, onClick = _j === void 0 ? props_1.ProductCardHorizontalDefault.onClick : _j, _k = _a.hasLoading, hasLoading = _k === void 0 ? props_1.ProductCardHorizontalDefault.hasLoading : _k;
|
|
19
23
|
var LinkComponent = function (_a) {
|
|
20
24
|
var item = _a.item, children = _a.children;
|
|
21
25
|
return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: children })));
|
|
22
26
|
};
|
|
23
|
-
return ((0, jsx_runtime_1.jsx)(ProductCardHorizontal_styled_1.ProductCardHorizontalStyled, __assign({ onClick: onClick }, { children: (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: { component: component, slug: slug } }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "horizontalWrapper" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: image })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: title })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "description" }, { children: description })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "priceContent" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: price })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(period) }))] }))] }))] })) })) })));
|
|
27
|
+
return (hasLoading ? ((0, jsx_runtime_1.jsx)(ProductCardHorizontal_styled_1.ProductCardHorizontalStyled, __assign({ "$hasLoading": hasLoading }, { children: (0, jsx_runtime_1.jsx)("a", { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "horizontalWrapper" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "142px", height: "77px" }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "400px", height: "19px" }) })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "description" }, { children: (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "300px", height: "17px" }) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "priceContent" }, { children: (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "200px", height: "17px" }) }))] }))] })) }) }))) : ((0, jsx_runtime_1.jsx)(ProductCardHorizontal_styled_1.ProductCardHorizontalStyled, __assign({ onClick: onClick }, { children: (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: { component: component, slug: slug } }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "horizontalWrapper" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: image })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: title })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "description" }, { children: description })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "priceContent" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: price })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(period) }))] }))] }))] })) })) }))));
|
|
24
28
|
};
|
|
25
29
|
exports.default = ProductCardHorizontal;
|
|
@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.ProductCardHorizontalStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.ProductCardHorizontalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: var(--dark);\n padding: 0.5rem;\n transition: all .2s ease;\n border-radius: 0.5rem;\n\n
|
|
13
|
+
exports.ProductCardHorizontalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: var(--dark);\n padding: 0.5rem;\n transition: all .2s ease;\n border-radius: 0.5rem;\n\n ", "\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .horizontalWrapper {\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n\n .img {\n border: ", ";\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n width: 142px;\n height: 88px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n @media only screen and ", " {\n margin-right: 0.5rem;\n width: 71px;\n height: 50px;\n box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n border: 0;\n }\n\n * {\n width: ", " !important;\n height: ", " !important;\n object-fit: contain;\n object-position: center center;\n display: block !important;\n }\n }\n .title{\n display: block;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font: var(--title-semi-bold-16-19);\n @media only screen and ", " {\n font: var(--caption-semi-bold-12-15);\n }\n }\n\n .description {\n color: var(--grey-50);\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font:var(--body-medium-14-17);\n @media only screen and ", " {\n display: none;\n }\n }\n\n .priceContent {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 4px;\n font:var(--body-extra-bold-14-17);\n @media only screen and ", " {\n font: var(--caption-extra-bold-12-15);\n }\n }\n\n .period {\n font:var(--body-regular-13-16);\n @media only screen and ", " {\n font: var(--caption-regular-12-15);\n }\n }\n }\n }\n"], ["\n color: var(--dark);\n padding: 0.5rem;\n transition: all .2s ease;\n border-radius: 0.5rem;\n\n ", "\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .horizontalWrapper {\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n\n .img {\n border: ", ";\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n width: 142px;\n height: 88px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n @media only screen and ", " {\n margin-right: 0.5rem;\n width: 71px;\n height: 50px;\n box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n border: 0;\n }\n\n * {\n width: ", " !important;\n height: ", " !important;\n object-fit: contain;\n object-position: center center;\n display: block !important;\n }\n }\n .title{\n display: block;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font: var(--title-semi-bold-16-19);\n @media only screen and ", " {\n font: var(--caption-semi-bold-12-15);\n }\n }\n\n .description {\n color: var(--grey-50);\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font:var(--body-medium-14-17);\n @media only screen and ", " {\n display: none;\n }\n }\n\n .priceContent {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 4px;\n font:var(--body-extra-bold-14-17);\n @media only screen and ", " {\n font: var(--caption-extra-bold-12-15);\n }\n }\n\n .period {\n font:var(--body-regular-13-16);\n @media only screen and ", " {\n font: var(--caption-regular-12-15);\n }\n }\n }\n }\n"])), function (props) { return !props.$hasLoading && "\n &:hover {\n background: var(--dark-opacity-3);\n }\n "; }, function (props) { return props.$hasLoading ? "none" : "1px solid var(--dark-opacity-5)"; }, devices_1.devices.sm, function (props) { return props.$hasLoading ? "100%" : "90%"; }, function (props) { return props.$hasLoading ? "100%" : "90%"; }, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm);
|
|
14
14
|
var templateObject_1;
|
|
@@ -33,6 +33,7 @@ exports.Default = {
|
|
|
33
33
|
return (0, jsx_runtime_1.jsx)("a", __assign({ href: "test" }, { children: children }));
|
|
34
34
|
},
|
|
35
35
|
period: "hafta",
|
|
36
|
-
image: (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" })
|
|
36
|
+
image: (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" }),
|
|
37
|
+
hasLoading: false
|
|
37
38
|
},
|
|
38
39
|
};
|
|
@@ -19,13 +19,12 @@ var react_1 = require("react");
|
|
|
19
19
|
var props_1 = require("./props");
|
|
20
20
|
var SearchBox_styled_1 = require("./SearchBox.styled");
|
|
21
21
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
22
|
-
var Loader_1 = __importDefault(require("../Loader"));
|
|
23
22
|
var simplebar_react_1 = __importDefault(require("simplebar-react"));
|
|
24
23
|
var react_i18next_1 = require("react-i18next");
|
|
24
|
+
var ProductCardHorizontal_1 = __importDefault(require("../ProductCardHorizontal"));
|
|
25
25
|
var SearchBox = function (_a) {
|
|
26
26
|
var _b = _a.onKeyUp, onKeyUp = _b === void 0 ? props_1.SearchBoxDefault.onKeyUp : _b, _c = _a.onBlur, onBlur = _c === void 0 ? props_1.SearchBoxDefault.onBlur : _c, _d = _a.onFocus, onFocus = _d === void 0 ? props_1.SearchBoxDefault.onFocus : _d, _e = _a.onChange, onChange = _e === void 0 ? props_1.SearchBoxDefault.onChange : _e, _f = _a.onButtonClick, onButtonClick = _f === void 0 ? props_1.SearchBoxDefault.onButtonClick : _f, _g = _a.children, children = _g === void 0 ? props_1.SearchBoxDefault.children : _g, _h = _a.isLoading, isLoading = _h === void 0 ? props_1.SearchBoxDefault.isLoading : _h, _j = _a.showResultList, showResultList = _j === void 0 ? props_1.SearchBoxDefault.showResultList : _j, _k = _a.placeholder, placeholder = _k === void 0 ? props_1.SearchBoxDefault.placeholder : _k, _l = _a.value, value = _l === void 0 ? props_1.SearchBoxDefault.value : _l;
|
|
27
27
|
var t = (0, react_i18next_1.useTranslation)().t;
|
|
28
|
-
var LoadingContent = function () { return (0, jsx_runtime_1.jsx)(SearchBox_styled_1.LoadingStyled, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "24px", height: "24px" }) }); };
|
|
29
28
|
var resultRef = (0, react_1.useRef)();
|
|
30
29
|
var simplebarRef = (0, react_1.useRef)(null);
|
|
31
30
|
var _m = (0, react_1.useState)(null), selectedIndex = _m[0], setSelectedIndex = _m[1];
|
|
@@ -73,6 +72,6 @@ var SearchBox = function (_a) {
|
|
|
73
72
|
}
|
|
74
73
|
});
|
|
75
74
|
}, [selectedIndex]);
|
|
76
|
-
return ((0, jsx_runtime_1.jsxs)(SearchBox_styled_1.SearchBoxStyled, __assign({ "$showResultList": showResultList }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "shadowBox" }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "inputWrapper" }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: placeholder, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onBlur: onBlur, onFocus: onFocus, value: value, onChange: onChange }), (0, jsx_runtime_1.jsx)("button", __assign({ onClick: onButtonClick, className: "icon", "aria-label": t("SEARCH") }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", hasWrapper: false, width: "16px", height: "16px" }) }))] })), showResultList && ((0, jsx_runtime_1.jsx)("div", __assign({ ref: resultRef, className: "resultList" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "resultListInner" }, { children: (0, jsx_runtime_1.jsx)(simplebar_react_1.default, __assign({ ref: simplebarRef, autoHide: false }, { children: isLoading ? (0, jsx_runtime_1.jsx)(
|
|
75
|
+
return ((0, jsx_runtime_1.jsxs)(SearchBox_styled_1.SearchBoxStyled, __assign({ "$showResultList": showResultList }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "shadowBox" }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "inputWrapper" }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: placeholder, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onBlur: onBlur, onFocus: onFocus, value: value, onChange: onChange }), (0, jsx_runtime_1.jsx)("button", __assign({ onClick: onButtonClick, className: "icon", "aria-label": t("SEARCH") }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", hasWrapper: false, width: "16px", height: "16px" }) }))] })), showResultList && ((0, jsx_runtime_1.jsx)("div", __assign({ ref: resultRef, className: "resultList" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "resultListInner" }, { children: (0, jsx_runtime_1.jsx)(simplebar_react_1.default, __assign({ ref: simplebarRef, autoHide: false }, { children: isLoading ? Array.from({ length: 4 }, function (_, index) { return index; }).map(function (index) { return (0, jsx_runtime_1.jsx)(ProductCardHorizontal_1.default, { hasLoading: true }, index); }) : children })) })) })))] })));
|
|
77
76
|
};
|
|
78
77
|
exports.default = SearchBox;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
|
+
var props_1 = require("./props");
|
|
5
|
+
var SkeletonLoader_styled_1 = require("./SkeletonLoader.styled");
|
|
6
|
+
var SkeletonLoader = function (_a) {
|
|
7
|
+
var _b = _a.width, width = _b === void 0 ? props_1.SkeletonLoaderDefault.width : _b, _c = _a.height, height = _c === void 0 ? props_1.SkeletonLoaderDefault.height : _c;
|
|
8
|
+
return ((0, jsx_runtime_1.jsx)(SkeletonLoader_styled_1.SkeletonLoaderStyled, { "$width": width, "$height": height }));
|
|
9
|
+
};
|
|
10
|
+
SkeletonLoader.defaultProps = {};
|
|
11
|
+
exports.default = SkeletonLoader;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
7
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
|
+
};
|
|
9
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
+
exports.SkeletonLoaderStyled = void 0;
|
|
11
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
+
exports.SkeletonLoaderStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n @keyframes shineSkeleton {\n 0% {\n background-color: var(--dark-opacity-5);\n }\n 50% {\n background-color: var(--dark-opacity-3);\n }\n 100% {\n background-color: var(--dark-opacity-5);\n }\n }\n height: ", ";\n max-width: ", ";\n width: 100%;\n border-radius: 0.25rem;\n background-color: var(--dark-opacity-3);\n animation: shineSkeleton 1s ease infinite;\n"], ["\n @keyframes shineSkeleton {\n 0% {\n background-color: var(--dark-opacity-5);\n }\n 50% {\n background-color: var(--dark-opacity-3);\n }\n 100% {\n background-color: var(--dark-opacity-5);\n }\n }\n height: ", ";\n max-width: ", ";\n width: 100%;\n border-radius: 0.25rem;\n background-color: var(--dark-opacity-3);\n animation: shineSkeleton 1s ease infinite;\n"])), function (props) { return props.$height; }, function (props) { return props.$width; });
|
|
13
|
+
var templateObject_1;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var SkeletonLoader_1 = require("./SkeletonLoader");
|
|
8
|
+
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(SkeletonLoader_1).default; } });
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.Default = void 0;
|
|
7
|
+
var SkeletonLoader_1 = __importDefault(require("../SkeletonLoader"));
|
|
8
|
+
exports.default = {
|
|
9
|
+
title: 'Components/SkeletonLoader',
|
|
10
|
+
component: SkeletonLoader_1.default,
|
|
11
|
+
tags: ['autodocs'],
|
|
12
|
+
argTypes: {}
|
|
13
|
+
};
|
|
14
|
+
exports.Default = {
|
|
15
|
+
args: {},
|
|
16
|
+
};
|
|
@@ -29,6 +29,7 @@ var props_1 = require("./props");
|
|
|
29
29
|
var Table_styled_1 = require("./Table.styled");
|
|
30
30
|
var rc_table_1 = __importDefault(require("rc-table"));
|
|
31
31
|
var react_i18next_1 = require("react-i18next");
|
|
32
|
+
var SkeletonLoader_1 = __importDefault(require("../SkeletonLoader"));
|
|
32
33
|
var Table = function (_a) {
|
|
33
34
|
var _b = _a.columns, columns = _b === void 0 ? props_1.TableDefault.columns : _b, emptyText = _a.emptyText, _c = _a.hasLoading, hasLoading = _c === void 0 ? props_1.TableDefault.hasLoading : _c, _d = _a.data, data = _d === void 0 ? props_1.TableDefault.data : _d;
|
|
34
35
|
var t = (0, react_i18next_1.useTranslation)().t;
|
|
@@ -44,7 +45,7 @@ var Table = function (_a) {
|
|
|
44
45
|
});
|
|
45
46
|
return refactorItem;
|
|
46
47
|
}));
|
|
47
|
-
setTableColumns(__spreadArray([], columns, true).map(function (column) { return (__assign(__assign({}, column), { render: function (_, renderData) { return (0, jsx_runtime_1.jsx)(
|
|
48
|
+
setTableColumns(__spreadArray([], columns, true).map(function (column) { return (__assign(__assign({}, column), { render: function (_, renderData) { return (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { height: "20px", width: "100%" }); } })); }));
|
|
48
49
|
}
|
|
49
50
|
else {
|
|
50
51
|
setTableData(data);
|
package/dist/index.js
CHANGED
|
@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.ProductCardCheckbox = exports.PaymentCart = exports.Tabs = exports.ProductCardHorizontalSm = exports.ProductCardHorizontal = exports.ProductCardVertical = exports.BannerCard = exports.AutocompleteInput = exports.InstallmentBox = exports.AddressCard = exports.ReviewCard = exports.useTranslation = exports.trLocale = exports.enLocale = exports.initi18n = exports.initReactI18next = exports.CampaignCard = exports.Dropdown = exports.InlineProgress = exports.Loader = exports.ShoppingCartProduct = exports.CouponCode = exports.InfoBox = exports.ListGroup = exports.InsuranceBox = exports.Tooltip = exports.TextLink = exports.SelectBox = exports.Badges = exports.SuggestBox = exports.Toaster = exports.toast = exports.Accordion = exports.Divider = exports.SearchBox = exports.Textarea = exports.ActionButton = exports.RadioButton = exports.Icon = exports.Agreement = exports.Alert = exports.Stepper = exports.OtpInput = exports.Modal = exports.Input = exports.CircleProgress = exports.Checkbox = exports.CategoryMenu = exports.Breadcrumbs = exports.Button = void 0;
|
|
7
|
-
exports.Pagination = exports.DescriptionCard = exports.Table = exports.DropdownButton = exports.OptionMenu = void 0;
|
|
7
|
+
exports.SkeletonLoader = exports.Pagination = exports.DescriptionCard = exports.Table = exports.DropdownButton = exports.OptionMenu = void 0;
|
|
8
8
|
var react_i18next_1 = require("react-i18next");
|
|
9
9
|
Object.defineProperty(exports, "initReactI18next", { enumerable: true, get: function () { return react_i18next_1.initReactI18next; } });
|
|
10
10
|
Object.defineProperty(exports, "useTranslation", { enumerable: true, get: function () { return react_i18next_1.useTranslation; } });
|
|
@@ -113,3 +113,5 @@ var DescriptionCard_1 = __importDefault(require("./components/DescriptionCard"))
|
|
|
113
113
|
exports.DescriptionCard = DescriptionCard_1.default;
|
|
114
114
|
var Pagination_1 = __importDefault(require("./components/Pagination"));
|
|
115
115
|
exports.Pagination = Pagination_1.default;
|
|
116
|
+
var SkeletonLoader_1 = __importDefault(require("./components/SkeletonLoader"));
|
|
117
|
+
exports.SkeletonLoader = SkeletonLoader_1.default;
|