@citygross/components 0.7.201 → 0.7.203
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/@types/components/Slider/Slider.styles.d.ts +0 -1
- package/build/cjs/components/src/components/DeliverySlotItem/DeliverySlotItem.styles.js +2 -2
- package/build/cjs/components/src/components/RadioListItem/RadioListItem.styles.js +3 -3
- package/build/cjs/components/src/components/Slider/Slider.js +49 -9
- package/build/cjs/components/src/components/Slider/Slider.js.map +1 -1
- package/build/cjs/components/src/components/Slider/Slider.styles.js +5 -6
- package/build/cjs/components/src/components/Slider/Slider.styles.js.map +1 -1
- package/build/es/components/src/components/DeliverySlotItem/DeliverySlotItem.styles.js +2 -2
- package/build/es/components/src/components/RadioListItem/RadioListItem.styles.js +3 -3
- package/build/es/components/src/components/Slider/Slider.js +51 -11
- package/build/es/components/src/components/Slider/Slider.js.map +1 -1
- package/build/es/components/src/components/Slider/Slider.styles.js +5 -6
- package/build/es/components/src/components/Slider/Slider.styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -2,7 +2,6 @@ declare type TItemsCotainer = {
|
|
|
2
2
|
itemGap?: number;
|
|
3
3
|
};
|
|
4
4
|
export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
5
|
-
export declare const SliderContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
6
5
|
export declare const LeftIconButtonContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
7
6
|
export declare const RightIconButtonContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
8
7
|
export declare const ItemsContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TItemsCotainer, never>;
|
|
@@ -9,12 +9,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
9
9
|
|
|
10
10
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
11
11
|
|
|
12
|
-
var DeliverySlotItemContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-self: center;\n opacity: ", ";\n transition: opacity ", ";\n min-width: ", "px;\n margin: 0 ", "px;\n border: solid 1px\n ", ";\n border-radius: ", "px;\n overflow: hidden;\n
|
|
12
|
+
var DeliverySlotItemContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-self: center;\n opacity: ", ";\n transition: opacity ", ";\n min-width: ", "px;\n margin: 0 ", "px;\n height: 100%;\n border: solid 1px\n ", ";\n border-radius: ", "px;\n overflow: hidden;\n min-height: ", "px;\n\n @media (min-width: ", "px) {\n min-width: ", "px;\n }\n\n &:hover {\n cursor: pointer;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-self: center;\n opacity: ", ";\n transition: opacity ", ";\n min-width: ", "px;\n margin: 0 ", "px;\n height: 100%;\n border: solid 1px\n ", ";\n border-radius: ", "px;\n overflow: hidden;\n min-height: ", "px;\n\n @media (min-width: ", "px) {\n min-width: ", "px;\n }\n\n &:hover {\n cursor: pointer;\n }\n"])), function (props) { return (props.isVisible ? 1 : 0.4); }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.transition) === null || _b === void 0 ? void 0 : _b.t1; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotItemWidth; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) {
|
|
13
13
|
var _a, _b;
|
|
14
14
|
return props.selected
|
|
15
15
|
? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlue
|
|
16
16
|
: (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.medium;
|
|
17
|
-
}, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.
|
|
17
|
+
}, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotItemHeight; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotItemWidthDesktop; });
|
|
18
18
|
styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n width: 100%;\n"], ["\n display: flex;\n width: 100%;\n"])));
|
|
19
19
|
var DeliverySlotHeaderText = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
20
20
|
var DeliverySlotContainer = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n padding: ", "px;\n flex: 1;\n width: stretch;\n background: ", ";\n &:hover {\n cursor: pointer;\n ", ";\n }\n"], ["\n padding: ", "px;\n flex: 1;\n width: stretch;\n background: ", ";\n &:hover {\n cursor: pointer;\n ", ";\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs2; }, function (props) {
|
|
@@ -20,9 +20,9 @@ var BaseRadioListItemContainer = styled__default["default"].div(templateObject_1
|
|
|
20
20
|
? (_c = props.theme.palette) === null || _c === void 0 ? void 0 : _c.blueLight
|
|
21
21
|
: (_d = props.theme.palette) === null || _d === void 0 ? void 0 : _d.white;
|
|
22
22
|
}, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
23
|
-
var BaseRadioItemLeftWrapper = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n flex: 5;\n align-items: flex-start;\n ", ";\n
|
|
24
|
-
var StyledH3 = styled__default["default"](typography.H3).attrs({ as: 'label' })(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n ", ";\n"], ["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n ", ";\n"])), function (props) { var _a; return props.isDisabled && "color:".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark); });
|
|
25
|
-
var RadioRightWrapper = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n display: flex;\n gap: ", "px;\n justify-content: flex-end;\n text-align: right;\n font-size: ", "px;\n
|
|
23
|
+
var BaseRadioItemLeftWrapper = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n flex: 5;\n align-items: flex-start;\n ", ";\n"], ["\n display: flex;\n flex: 5;\n align-items: flex-start;\n ", ";\n"])), function (props) { return props.flexGrow && "flex-grow: ".concat(props.flexGrow); });
|
|
24
|
+
var StyledH3 = styled__default["default"](typography.H3).attrs({ as: 'label' })(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"], ["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.m1; }, function (props) { var _a; return props.isDisabled && "color:".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark); });
|
|
25
|
+
var RadioRightWrapper = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n display: flex;\n gap: ", "px;\n justify-content: flex-end;\n text-align: right;\n font-size: ", "px;\n"], ["\n display: flex;\n gap: ", "px;\n justify-content: flex-end;\n text-align: right;\n font-size: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; });
|
|
26
26
|
var DisableText = styled__default["default"](typography.BodyText)(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n font-size: ", "px;\n color: ", ";\n ", "\n @media (min-width: ", "px) {\n font-size: ", "px;\n text-align: inherit;\n }\n"], ["\n font-size: ", "px;\n color: ", ";\n ", "\n @media (min-width: ", "px) {\n font-size: ", "px;\n text-align: inherit;\n }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; }, function (props) {
|
|
27
27
|
return (props === null || props === void 0 ? void 0 : props.wrapMobile) &&
|
|
28
28
|
"\n text-align: left;\n \n";
|
|
@@ -8,29 +8,55 @@ var Slider_styles = require('./Slider.styles.js');
|
|
|
8
8
|
var IconButton = require('../Button/IconButton.js');
|
|
9
9
|
var Icon = require('@citygross/icons');
|
|
10
10
|
var SlickSlider = require('react-slick');
|
|
11
|
+
var utils = require('@citygross/utils');
|
|
11
12
|
|
|
12
13
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
13
14
|
|
|
14
15
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
15
16
|
var SlickSlider__default = /*#__PURE__*/_interopDefaultLegacy(SlickSlider);
|
|
16
17
|
|
|
18
|
+
var defaultSlides = 5;
|
|
17
19
|
var Slider = function (_a) {
|
|
18
20
|
var _b;
|
|
19
21
|
var children = _a.children, _c = _a.iconHeight, iconHeight = _c === void 0 ? 32 : _c, _d = _a.iconWidth, iconWidth = _d === void 0 ? 32 : _d, _e = _a.iconColor, iconColor = _e === void 0 ? 'darkest' : _e, sliderSettings = _a.sliderSettings;
|
|
20
22
|
var _f = React.useState(false), isMax = _f[0], setIsMax = _f[1];
|
|
21
23
|
var _g = React.useState(true), isMin = _g[0], setIsMin = _g[1];
|
|
24
|
+
var _h = React.useState(0), currentPage = _h[0], setCurrentPage = _h[1];
|
|
22
25
|
var childs = (_b = React__default["default"].Children) === null || _b === void 0 ? void 0 : _b.map(children, function (child) { return child; });
|
|
23
|
-
var
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
var
|
|
29
|
-
|
|
26
|
+
var width = utils.useWindowSize().width;
|
|
27
|
+
var ref = React.useRef(null);
|
|
28
|
+
var resizeSlides = React.useMemo(function () {
|
|
29
|
+
var _a;
|
|
30
|
+
var breakpoints = (_a = sliderSettings === null || sliderSettings === void 0 ? void 0 : sliderSettings.responsive) === null || _a === void 0 ? void 0 : _a.map(function (item) {
|
|
31
|
+
var _a;
|
|
32
|
+
return {
|
|
33
|
+
breakpoint: item.breakpoint,
|
|
34
|
+
// @ts-ignore
|
|
35
|
+
slidesToShow: (_a = item.settings) === null || _a === void 0 ? void 0 : _a.slideToScroll
|
|
36
|
+
};
|
|
37
|
+
}).sort(function (a, b) { return a.breakpoint - b.breakpoint; });
|
|
38
|
+
var curBreakpoint = breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.find(function (b) { return b.breakpoint > width; });
|
|
39
|
+
return curBreakpoint ? curBreakpoint === null || curBreakpoint === void 0 ? void 0 : curBreakpoint.slidesToShow : defaultSlides;
|
|
40
|
+
}, [width, sliderSettings]);
|
|
41
|
+
var pageSections = React.useMemo(function () {
|
|
42
|
+
var sections = Array.from(Array((childs === null || childs === void 0 ? void 0 : childs.length) || 0).keys()).filter(function (_, index) {
|
|
43
|
+
return index % resizeSlides === 0;
|
|
44
|
+
});
|
|
45
|
+
return sections;
|
|
46
|
+
}, [childs, resizeSlides]);
|
|
47
|
+
var settings = _tslib.__assign({ speed: 500, slidesToShow: defaultSlides, slidesToScroll: defaultSlides, infinite: false, touchTreshold: 100, initialSlide: 0, touchMove: true, arrows: false, beforeChange: function (_, next) {
|
|
48
|
+
var _a, _b, _c;
|
|
49
|
+
var totalPages = (_b = Math.ceil((_a = (childs && (childs === null || childs === void 0 ? void 0 : childs.length) / resizeSlides)) !== null && _a !== void 0 ? _a : 0)) !== null && _b !== void 0 ? _b : 0;
|
|
50
|
+
var curPage = next / totalPages;
|
|
51
|
+
var slides = (childs === null || childs === void 0 ? void 0 : childs.length) || 0;
|
|
52
|
+
setCurrentPage(next);
|
|
53
|
+
// @ts-ignore
|
|
54
|
+
(_c = ref === null || ref === void 0 ? void 0 : ref.current) === null || _c === void 0 ? void 0 : _c.slickGoTo(5, true);
|
|
55
|
+
if (curPage === 0 || next === 0) {
|
|
30
56
|
setIsMin(true);
|
|
31
57
|
return;
|
|
32
58
|
}
|
|
33
|
-
if (
|
|
59
|
+
if (next + resizeSlides >= slides) {
|
|
34
60
|
setIsMax(true);
|
|
35
61
|
return;
|
|
36
62
|
}
|
|
@@ -39,7 +65,21 @@ var Slider = function (_a) {
|
|
|
39
65
|
} }, sliderSettings);
|
|
40
66
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
41
67
|
React__default["default"].createElement(Slider_styles.Container, null,
|
|
42
|
-
React__default["default"].createElement(SlickSlider__default["default"], _tslib.__assign({}, settings), children)
|
|
68
|
+
React__default["default"].createElement(SlickSlider__default["default"], _tslib.__assign({ ref: ref }, settings), children),
|
|
69
|
+
React__default["default"].createElement(Slider_styles.LeftIconButtonContainer, null,
|
|
70
|
+
React__default["default"].createElement(IconButton.IconButton, { isDisabled: isMin, color: iconColor, icon: React__default["default"].createElement(Icon.Icons.ChevronLeft, { color: 'white' }), height: iconHeight, width: iconWidth, borderRadius: 100, onClick: function () {
|
|
71
|
+
var _a;
|
|
72
|
+
var prevPage = pageSections.reverse().find(function (section) { return section < currentPage; }) ||
|
|
73
|
+
0;
|
|
74
|
+
(_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(prevPage);
|
|
75
|
+
} })),
|
|
76
|
+
React__default["default"].createElement(Slider_styles.RightIconButtonContainer, null,
|
|
77
|
+
React__default["default"].createElement(IconButton.IconButton, { isDisabled: isMax, color: iconColor, icon: React__default["default"].createElement(Icon.Icons.ChevronRight, { color: 'white' }), height: iconHeight, width: iconWidth, borderRadius: 100, onClick: function () {
|
|
78
|
+
var _a;
|
|
79
|
+
var nextPage = pageSections.find(function (section) { return section > currentPage; }) ||
|
|
80
|
+
pageSections[(pageSections === null || pageSections === void 0 ? void 0 : pageSections.length) - 1];
|
|
81
|
+
(_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(nextPage);
|
|
82
|
+
} })))));
|
|
43
83
|
};
|
|
44
84
|
|
|
45
85
|
exports.Slider = Slider;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Slider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -9,12 +9,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
9
9
|
|
|
10
10
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
11
11
|
|
|
12
|
-
var Container = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n position: relative;\n\n @media (min-width: ", "px) {\n padding: 0 32px;\n }\n"], ["\n position: relative;\n\n @media (min-width: ", "px) {\n padding: 0 32px;\n }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; });
|
|
13
|
-
styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n
|
|
14
|
-
var
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
12
|
+
var Container = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n position: relative;\n\n @media (min-width: ", "px) {\n padding: 0 32px;\n }\n .slick-track {\n display: flex;\n flex-wrap: nowrap;\n align-items: stretch;\n }\n .slick-slide {\n height: unset;\n min-height: unset;\n > div {\n height: 100%;\n }\n }\n"], ["\n position: relative;\n\n @media (min-width: ", "px) {\n padding: 0 32px;\n }\n .slick-track {\n display: flex;\n flex-wrap: nowrap;\n align-items: stretch;\n }\n .slick-slide {\n height: unset;\n min-height: unset;\n > div {\n height: 100%;\n }\n }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; });
|
|
13
|
+
var LeftIconButtonContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n position: absolute;\n left: -", "px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 1;\n @media (max-width: ", "px) {\n display: none !important;\n }\n @media (min-width: ", "px) {\n display: block;\n left: -", "px;\n }\n"], ["\n display: flex;\n position: absolute;\n left: -", "px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 1;\n @media (max-width: ", "px) {\n display: none !important;\n }\n @media (min-width: ", "px) {\n display: block;\n left: -", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl; });
|
|
14
|
+
var RightIconButtonContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n display: flex;\n\n top: 50%;\n transform: translateY(-50%);\n position: absolute;\n right: -", "px;\n\n @media (max-width: ", "px) {\n display: none !important;\n }\n\n @media (min-width: ", "px) {\n display: block;\n right: -", "px;\n }\n"], ["\n display: flex;\n\n top: 50%;\n transform: translateY(-50%);\n position: absolute;\n right: -", "px;\n\n @media (max-width: ", "px) {\n display: none !important;\n }\n\n @media (min-width: ", "px) {\n display: block;\n right: -", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl; });
|
|
15
|
+
styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: ", "px;\n padding: 0 ", "px;\n @media (min-width: ", "px) {\n padding: 0 ", "px;\n gap: ", "px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n gap: ", "px;\n padding: 0 ", "px;\n @media (min-width: ", "px) {\n padding: 0 ", "px;\n gap: ", "px;\n }\n"])), function (props) { var _a, _b; return (_a = props.itemGap) !== null && _a !== void 0 ? _a : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a, _b; return (_a = props.itemGap) !== null && _a !== void 0 ? _a : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs; });
|
|
16
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
18
17
|
|
|
19
18
|
exports.Container = Container;
|
|
20
19
|
exports.LeftIconButtonContainer = LeftIconButtonContainer;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Slider.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
|
|
4
|
-
var DeliverySlotItemContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-self: center;\n opacity: ", ";\n transition: opacity ", ";\n min-width: ", "px;\n margin: 0 ", "px;\n border: solid 1px\n ", ";\n border-radius: ", "px;\n overflow: hidden;\n
|
|
4
|
+
var DeliverySlotItemContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-self: center;\n opacity: ", ";\n transition: opacity ", ";\n min-width: ", "px;\n margin: 0 ", "px;\n height: 100%;\n border: solid 1px\n ", ";\n border-radius: ", "px;\n overflow: hidden;\n min-height: ", "px;\n\n @media (min-width: ", "px) {\n min-width: ", "px;\n }\n\n &:hover {\n cursor: pointer;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-self: center;\n opacity: ", ";\n transition: opacity ", ";\n min-width: ", "px;\n margin: 0 ", "px;\n height: 100%;\n border: solid 1px\n ", ";\n border-radius: ", "px;\n overflow: hidden;\n min-height: ", "px;\n\n @media (min-width: ", "px) {\n min-width: ", "px;\n }\n\n &:hover {\n cursor: pointer;\n }\n"])), function (props) { return (props.isVisible ? 1 : 0.4); }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.transition) === null || _b === void 0 ? void 0 : _b.t1; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotItemWidth; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) {
|
|
5
5
|
var _a, _b;
|
|
6
6
|
return props.selected
|
|
7
7
|
? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlue
|
|
8
8
|
: (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.medium;
|
|
9
|
-
}, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.
|
|
9
|
+
}, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotItemHeight; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotItemWidthDesktop; });
|
|
10
10
|
styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n width: 100%;\n"], ["\n display: flex;\n width: 100%;\n"])));
|
|
11
11
|
var DeliverySlotHeaderText = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
12
12
|
var DeliverySlotContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: ", "px;\n flex: 1;\n width: stretch;\n background: ", ";\n &:hover {\n cursor: pointer;\n ", ";\n }\n"], ["\n padding: ", "px;\n flex: 1;\n width: stretch;\n background: ", ";\n &:hover {\n cursor: pointer;\n ", ";\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs2; }, function (props) {
|
|
@@ -12,9 +12,9 @@ var BaseRadioListItemContainer = styled.div(templateObject_1 || (templateObject_
|
|
|
12
12
|
? (_c = props.theme.palette) === null || _c === void 0 ? void 0 : _c.blueLight
|
|
13
13
|
: (_d = props.theme.palette) === null || _d === void 0 ? void 0 : _d.white;
|
|
14
14
|
}, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
15
|
-
var BaseRadioItemLeftWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex: 5;\n align-items: flex-start;\n ", ";\n
|
|
16
|
-
var StyledH3 = styled(H3).attrs({ as: 'label' })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n ", ";\n"], ["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n ", ";\n"])), function (props) { var _a; return props.isDisabled && "color:".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark); });
|
|
17
|
-
var RadioRightWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n gap: ", "px;\n justify-content: flex-end;\n text-align: right;\n font-size: ", "px;\n
|
|
15
|
+
var BaseRadioItemLeftWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex: 5;\n align-items: flex-start;\n ", ";\n"], ["\n display: flex;\n flex: 5;\n align-items: flex-start;\n ", ";\n"])), function (props) { return props.flexGrow && "flex-grow: ".concat(props.flexGrow); });
|
|
16
|
+
var StyledH3 = styled(H3).attrs({ as: 'label' })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"], ["\n cursor: pointer;\n white-space: nowrap;\n display: block;\n line-height: ", "px;\n ", ";\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.m1; }, function (props) { var _a; return props.isDisabled && "color:".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark); });
|
|
17
|
+
var RadioRightWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n gap: ", "px;\n justify-content: flex-end;\n text-align: right;\n font-size: ", "px;\n"], ["\n display: flex;\n gap: ", "px;\n justify-content: flex-end;\n text-align: right;\n font-size: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; });
|
|
18
18
|
var DisableText = styled(BodyText)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: ", "px;\n color: ", ";\n ", "\n @media (min-width: ", "px) {\n font-size: ", "px;\n text-align: inherit;\n }\n"], ["\n font-size: ", "px;\n color: ", ";\n ", "\n @media (min-width: ", "px) {\n font-size: ", "px;\n text-align: inherit;\n }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; }, function (props) {
|
|
19
19
|
return (props === null || props === void 0 ? void 0 : props.wrapMobile) &&
|
|
20
20
|
"\n text-align: left;\n \n";
|
|
@@ -1,27 +1,53 @@
|
|
|
1
1
|
import { __assign } from '../../../../_virtual/_tslib.js';
|
|
2
|
-
import React, { useState } from 'react';
|
|
3
|
-
import {
|
|
2
|
+
import React, { useState, useRef, useMemo } from 'react';
|
|
3
|
+
import { Container, LeftIconButtonContainer, RightIconButtonContainer } from './Slider.styles.js';
|
|
4
4
|
import { IconButton } from '../Button/IconButton.js';
|
|
5
5
|
import { Icons } from '@citygross/icons';
|
|
6
6
|
import SlickSlider from 'react-slick';
|
|
7
|
+
import { useWindowSize } from '@citygross/utils';
|
|
7
8
|
|
|
9
|
+
var defaultSlides = 5;
|
|
8
10
|
var Slider = function (_a) {
|
|
9
11
|
var _b;
|
|
10
12
|
var children = _a.children, _c = _a.iconHeight, iconHeight = _c === void 0 ? 32 : _c, _d = _a.iconWidth, iconWidth = _d === void 0 ? 32 : _d, _e = _a.iconColor, iconColor = _e === void 0 ? 'darkest' : _e, sliderSettings = _a.sliderSettings;
|
|
11
13
|
var _f = useState(false), isMax = _f[0], setIsMax = _f[1];
|
|
12
14
|
var _g = useState(true), isMin = _g[0], setIsMin = _g[1];
|
|
15
|
+
var _h = useState(0), currentPage = _h[0], setCurrentPage = _h[1];
|
|
13
16
|
var childs = (_b = React.Children) === null || _b === void 0 ? void 0 : _b.map(children, function (child) { return child; });
|
|
14
|
-
var
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
var
|
|
20
|
-
|
|
17
|
+
var width = useWindowSize().width;
|
|
18
|
+
var ref = useRef(null);
|
|
19
|
+
var resizeSlides = useMemo(function () {
|
|
20
|
+
var _a;
|
|
21
|
+
var breakpoints = (_a = sliderSettings === null || sliderSettings === void 0 ? void 0 : sliderSettings.responsive) === null || _a === void 0 ? void 0 : _a.map(function (item) {
|
|
22
|
+
var _a;
|
|
23
|
+
return {
|
|
24
|
+
breakpoint: item.breakpoint,
|
|
25
|
+
// @ts-ignore
|
|
26
|
+
slidesToShow: (_a = item.settings) === null || _a === void 0 ? void 0 : _a.slideToScroll
|
|
27
|
+
};
|
|
28
|
+
}).sort(function (a, b) { return a.breakpoint - b.breakpoint; });
|
|
29
|
+
var curBreakpoint = breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.find(function (b) { return b.breakpoint > width; });
|
|
30
|
+
return curBreakpoint ? curBreakpoint === null || curBreakpoint === void 0 ? void 0 : curBreakpoint.slidesToShow : defaultSlides;
|
|
31
|
+
}, [width, sliderSettings]);
|
|
32
|
+
var pageSections = useMemo(function () {
|
|
33
|
+
var sections = Array.from(Array((childs === null || childs === void 0 ? void 0 : childs.length) || 0).keys()).filter(function (_, index) {
|
|
34
|
+
return index % resizeSlides === 0;
|
|
35
|
+
});
|
|
36
|
+
return sections;
|
|
37
|
+
}, [childs, resizeSlides]);
|
|
38
|
+
var settings = __assign({ speed: 500, slidesToShow: defaultSlides, slidesToScroll: defaultSlides, infinite: false, touchTreshold: 100, initialSlide: 0, touchMove: true, arrows: false, beforeChange: function (_, next) {
|
|
39
|
+
var _a, _b, _c;
|
|
40
|
+
var totalPages = (_b = Math.ceil((_a = (childs && (childs === null || childs === void 0 ? void 0 : childs.length) / resizeSlides)) !== null && _a !== void 0 ? _a : 0)) !== null && _b !== void 0 ? _b : 0;
|
|
41
|
+
var curPage = next / totalPages;
|
|
42
|
+
var slides = (childs === null || childs === void 0 ? void 0 : childs.length) || 0;
|
|
43
|
+
setCurrentPage(next);
|
|
44
|
+
// @ts-ignore
|
|
45
|
+
(_c = ref === null || ref === void 0 ? void 0 : ref.current) === null || _c === void 0 ? void 0 : _c.slickGoTo(5, true);
|
|
46
|
+
if (curPage === 0 || next === 0) {
|
|
21
47
|
setIsMin(true);
|
|
22
48
|
return;
|
|
23
49
|
}
|
|
24
|
-
if (
|
|
50
|
+
if (next + resizeSlides >= slides) {
|
|
25
51
|
setIsMax(true);
|
|
26
52
|
return;
|
|
27
53
|
}
|
|
@@ -30,7 +56,21 @@ var Slider = function (_a) {
|
|
|
30
56
|
} }, sliderSettings);
|
|
31
57
|
return (React.createElement(React.Fragment, null,
|
|
32
58
|
React.createElement(Container, null,
|
|
33
|
-
React.createElement(SlickSlider, __assign({}, settings), children)
|
|
59
|
+
React.createElement(SlickSlider, __assign({ ref: ref }, settings), children),
|
|
60
|
+
React.createElement(LeftIconButtonContainer, null,
|
|
61
|
+
React.createElement(IconButton, { isDisabled: isMin, color: iconColor, icon: React.createElement(Icons.ChevronLeft, { color: 'white' }), height: iconHeight, width: iconWidth, borderRadius: 100, onClick: function () {
|
|
62
|
+
var _a;
|
|
63
|
+
var prevPage = pageSections.reverse().find(function (section) { return section < currentPage; }) ||
|
|
64
|
+
0;
|
|
65
|
+
(_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(prevPage);
|
|
66
|
+
} })),
|
|
67
|
+
React.createElement(RightIconButtonContainer, null,
|
|
68
|
+
React.createElement(IconButton, { isDisabled: isMax, color: iconColor, icon: React.createElement(Icons.ChevronRight, { color: 'white' }), height: iconHeight, width: iconWidth, borderRadius: 100, onClick: function () {
|
|
69
|
+
var _a;
|
|
70
|
+
var nextPage = pageSections.find(function (section) { return section > currentPage; }) ||
|
|
71
|
+
pageSections[(pageSections === null || pageSections === void 0 ? void 0 : pageSections.length) - 1];
|
|
72
|
+
(_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(nextPage);
|
|
73
|
+
} })))));
|
|
34
74
|
};
|
|
35
75
|
|
|
36
76
|
export { Slider };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Slider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
|
|
4
|
-
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n\n @media (min-width: ", "px) {\n padding: 0 32px;\n }\n"], ["\n position: relative;\n\n @media (min-width: ", "px) {\n padding: 0 32px;\n }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; });
|
|
5
|
-
styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n
|
|
6
|
-
var
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
4
|
+
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n\n @media (min-width: ", "px) {\n padding: 0 32px;\n }\n .slick-track {\n display: flex;\n flex-wrap: nowrap;\n align-items: stretch;\n }\n .slick-slide {\n height: unset;\n min-height: unset;\n > div {\n height: 100%;\n }\n }\n"], ["\n position: relative;\n\n @media (min-width: ", "px) {\n padding: 0 32px;\n }\n .slick-track {\n display: flex;\n flex-wrap: nowrap;\n align-items: stretch;\n }\n .slick-slide {\n height: unset;\n min-height: unset;\n > div {\n height: 100%;\n }\n }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; });
|
|
5
|
+
var LeftIconButtonContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n position: absolute;\n left: -", "px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 1;\n @media (max-width: ", "px) {\n display: none !important;\n }\n @media (min-width: ", "px) {\n display: block;\n left: -", "px;\n }\n"], ["\n display: flex;\n position: absolute;\n left: -", "px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 1;\n @media (max-width: ", "px) {\n display: none !important;\n }\n @media (min-width: ", "px) {\n display: block;\n left: -", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl; });
|
|
6
|
+
var RightIconButtonContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n\n top: 50%;\n transform: translateY(-50%);\n position: absolute;\n right: -", "px;\n\n @media (max-width: ", "px) {\n display: none !important;\n }\n\n @media (min-width: ", "px) {\n display: block;\n right: -", "px;\n }\n"], ["\n display: flex;\n\n top: 50%;\n transform: translateY(-50%);\n position: absolute;\n right: -", "px;\n\n @media (max-width: ", "px) {\n display: none !important;\n }\n\n @media (min-width: ", "px) {\n display: block;\n right: -", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl; });
|
|
7
|
+
styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: ", "px;\n padding: 0 ", "px;\n @media (min-width: ", "px) {\n padding: 0 ", "px;\n gap: ", "px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n gap: ", "px;\n padding: 0 ", "px;\n @media (min-width: ", "px) {\n padding: 0 ", "px;\n gap: ", "px;\n }\n"])), function (props) { var _a, _b; return (_a = props.itemGap) !== null && _a !== void 0 ? _a : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a, _b; return (_a = props.itemGap) !== null && _a !== void 0 ? _a : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs; });
|
|
8
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
10
9
|
|
|
11
10
|
export { Container, LeftIconButtonContainer, RightIconButtonContainer };
|
|
12
11
|
//# sourceMappingURL=Slider.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Slider.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@citygross/components",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.203",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./build/cjs/components/src/index.js",
|
|
@@ -74,5 +74,5 @@
|
|
|
74
74
|
"react-slick": "^0.30.1",
|
|
75
75
|
"slick-carousel": "^1.8.1"
|
|
76
76
|
},
|
|
77
|
-
"gitHead": "
|
|
77
|
+
"gitHead": "b83464d8272658ce0eb99133d1094ba67378b5cd"
|
|
78
78
|
}
|