@citygross/components 0.7.205 → 0.7.207
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.d.ts +2 -1
- package/build/@types/components/Slider/Slider.stories.d.ts +1 -1
- package/build/cjs/components/src/components/Slider/Slider.js +27 -15
- package/build/cjs/components/src/components/Slider/Slider.js.map +1 -1
- package/build/es/components/src/components/Slider/Slider.js +27 -15
- package/build/es/components/src/components/Slider/Slider.js.map +1 -1
- package/package.json +2 -2
|
@@ -8,5 +8,6 @@ export declare type TSlider = {
|
|
|
8
8
|
iconWidth?: number;
|
|
9
9
|
iconColor?: TButtonColor;
|
|
10
10
|
sliderSettings: Settings;
|
|
11
|
+
slotsLength: number;
|
|
11
12
|
};
|
|
12
|
-
export declare const Slider: ({ children, iconHeight, iconWidth, iconColor, sliderSettings }: TSlider) => JSX.Element;
|
|
13
|
+
export declare const Slider: ({ children, slotsLength, iconHeight, iconWidth, iconColor, sliderSettings }: TSlider) => JSX.Element;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { Story } from '@storybook/react';
|
|
3
3
|
import { TSlider } from './Slider';
|
|
4
4
|
declare const _default: {
|
|
5
|
-
component: ({ children, iconHeight, iconWidth, iconColor, sliderSettings }: TSlider) => JSX.Element;
|
|
5
|
+
component: ({ children, slotsLength, iconHeight, iconWidth, iconColor, sliderSettings }: TSlider) => JSX.Element;
|
|
6
6
|
title: string;
|
|
7
7
|
};
|
|
8
8
|
export default _default;
|
|
@@ -17,12 +17,10 @@ var SlickSlider__default = /*#__PURE__*/_interopDefaultLegacy(SlickSlider);
|
|
|
17
17
|
|
|
18
18
|
var defaultSlides = 5;
|
|
19
19
|
var Slider = function (_a) {
|
|
20
|
-
var _b;
|
|
21
|
-
var
|
|
22
|
-
var _f = React.useState(
|
|
23
|
-
var _g = React.useState(
|
|
24
|
-
var _h = React.useState(0), currentPage = _h[0], setCurrentPage = _h[1];
|
|
25
|
-
var childs = (_b = React__default["default"].Children) === null || _b === void 0 ? void 0 : _b.map(children, function (child) { return child; });
|
|
20
|
+
var children = _a.children, slotsLength = _a.slotsLength, _b = _a.iconHeight, iconHeight = _b === void 0 ? 32 : _b, _c = _a.iconWidth, iconWidth = _c === void 0 ? 32 : _c, _d = _a.iconColor, iconColor = _d === void 0 ? 'darkest' : _d, sliderSettings = _a.sliderSettings;
|
|
21
|
+
var _e = React.useState(false), isMax = _e[0], setIsMax = _e[1];
|
|
22
|
+
var _f = React.useState(true), isMin = _f[0], setIsMin = _f[1];
|
|
23
|
+
var _g = React.useState(0), currentPage = _g[0], setCurrentPage = _g[1];
|
|
26
24
|
var width = utils.useWindowSize().width;
|
|
27
25
|
var ref = React.useRef(null);
|
|
28
26
|
var resizeSlides = React.useMemo(function () {
|
|
@@ -39,19 +37,31 @@ var Slider = function (_a) {
|
|
|
39
37
|
return curBreakpoint ? curBreakpoint === null || curBreakpoint === void 0 ? void 0 : curBreakpoint.slidesToShow : defaultSlides;
|
|
40
38
|
}, [width, sliderSettings]);
|
|
41
39
|
var pageSections = React.useMemo(function () {
|
|
42
|
-
var sections = Array.from(Array(
|
|
40
|
+
var sections = Array.from(Array(slotsLength || 0).keys()).filter(function (_, index) {
|
|
43
41
|
return index % resizeSlides === 0;
|
|
44
42
|
});
|
|
45
43
|
return sections;
|
|
46
|
-
}, [
|
|
47
|
-
var settings =
|
|
48
|
-
|
|
49
|
-
|
|
44
|
+
}, [slotsLength, resizeSlides]);
|
|
45
|
+
var settings = {
|
|
46
|
+
speed: 500,
|
|
47
|
+
slidesToShow: defaultSlides,
|
|
48
|
+
slidesToScroll: defaultSlides,
|
|
49
|
+
infinite: false,
|
|
50
|
+
touchTreshold: 100,
|
|
51
|
+
initialSlide: 0,
|
|
52
|
+
touchMove: true,
|
|
53
|
+
arrows: false,
|
|
54
|
+
beforeChange: function (_, next) {
|
|
55
|
+
var _a, _b;
|
|
56
|
+
var totalPages = (_b = Math.ceil((_a = slotsLength / resizeSlides) !== null && _a !== void 0 ? _a : 0)) !== null && _b !== void 0 ? _b : 0;
|
|
50
57
|
var curPage = next / totalPages;
|
|
51
|
-
var slides =
|
|
58
|
+
var slides = slotsLength || 0;
|
|
52
59
|
setCurrentPage(next);
|
|
53
|
-
|
|
54
|
-
(
|
|
60
|
+
console.log('change', next);
|
|
61
|
+
console.log('next + resizeSlides >= slides', next + resizeSlides >= slides);
|
|
62
|
+
console.log('curPage === 0 || next === 0', curPage === 0 || next === 0);
|
|
63
|
+
console.log('totalPages', totalPages);
|
|
64
|
+
console.log('curPage', curPage);
|
|
55
65
|
if (curPage === 0 || next === 0) {
|
|
56
66
|
setIsMin(true);
|
|
57
67
|
return;
|
|
@@ -62,7 +72,9 @@ var Slider = function (_a) {
|
|
|
62
72
|
}
|
|
63
73
|
setIsMax(false);
|
|
64
74
|
setIsMin(false);
|
|
65
|
-
}
|
|
75
|
+
},
|
|
76
|
+
responsive: sliderSettings === null || sliderSettings === void 0 ? void 0 : sliderSettings.responsive
|
|
77
|
+
};
|
|
66
78
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
67
79
|
React__default["default"].createElement(Slider_styles.Container, null,
|
|
68
80
|
React__default["default"].createElement(SlickSlider__default["default"], _tslib.__assign({ ref: ref }, settings), children),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Slider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -8,12 +8,10 @@ import { useWindowSize } from '@citygross/utils';
|
|
|
8
8
|
|
|
9
9
|
var defaultSlides = 5;
|
|
10
10
|
var Slider = function (_a) {
|
|
11
|
-
var _b;
|
|
12
|
-
var
|
|
13
|
-
var _f = useState(
|
|
14
|
-
var _g = useState(
|
|
15
|
-
var _h = useState(0), currentPage = _h[0], setCurrentPage = _h[1];
|
|
16
|
-
var childs = (_b = React.Children) === null || _b === void 0 ? void 0 : _b.map(children, function (child) { return child; });
|
|
11
|
+
var children = _a.children, slotsLength = _a.slotsLength, _b = _a.iconHeight, iconHeight = _b === void 0 ? 32 : _b, _c = _a.iconWidth, iconWidth = _c === void 0 ? 32 : _c, _d = _a.iconColor, iconColor = _d === void 0 ? 'darkest' : _d, sliderSettings = _a.sliderSettings;
|
|
12
|
+
var _e = useState(false), isMax = _e[0], setIsMax = _e[1];
|
|
13
|
+
var _f = useState(true), isMin = _f[0], setIsMin = _f[1];
|
|
14
|
+
var _g = useState(0), currentPage = _g[0], setCurrentPage = _g[1];
|
|
17
15
|
var width = useWindowSize().width;
|
|
18
16
|
var ref = useRef(null);
|
|
19
17
|
var resizeSlides = useMemo(function () {
|
|
@@ -30,19 +28,31 @@ var Slider = function (_a) {
|
|
|
30
28
|
return curBreakpoint ? curBreakpoint === null || curBreakpoint === void 0 ? void 0 : curBreakpoint.slidesToShow : defaultSlides;
|
|
31
29
|
}, [width, sliderSettings]);
|
|
32
30
|
var pageSections = useMemo(function () {
|
|
33
|
-
var sections = Array.from(Array(
|
|
31
|
+
var sections = Array.from(Array(slotsLength || 0).keys()).filter(function (_, index) {
|
|
34
32
|
return index % resizeSlides === 0;
|
|
35
33
|
});
|
|
36
34
|
return sections;
|
|
37
|
-
}, [
|
|
38
|
-
var settings =
|
|
39
|
-
|
|
40
|
-
|
|
35
|
+
}, [slotsLength, resizeSlides]);
|
|
36
|
+
var settings = {
|
|
37
|
+
speed: 500,
|
|
38
|
+
slidesToShow: defaultSlides,
|
|
39
|
+
slidesToScroll: defaultSlides,
|
|
40
|
+
infinite: false,
|
|
41
|
+
touchTreshold: 100,
|
|
42
|
+
initialSlide: 0,
|
|
43
|
+
touchMove: true,
|
|
44
|
+
arrows: false,
|
|
45
|
+
beforeChange: function (_, next) {
|
|
46
|
+
var _a, _b;
|
|
47
|
+
var totalPages = (_b = Math.ceil((_a = slotsLength / resizeSlides) !== null && _a !== void 0 ? _a : 0)) !== null && _b !== void 0 ? _b : 0;
|
|
41
48
|
var curPage = next / totalPages;
|
|
42
|
-
var slides =
|
|
49
|
+
var slides = slotsLength || 0;
|
|
43
50
|
setCurrentPage(next);
|
|
44
|
-
|
|
45
|
-
(
|
|
51
|
+
console.log('change', next);
|
|
52
|
+
console.log('next + resizeSlides >= slides', next + resizeSlides >= slides);
|
|
53
|
+
console.log('curPage === 0 || next === 0', curPage === 0 || next === 0);
|
|
54
|
+
console.log('totalPages', totalPages);
|
|
55
|
+
console.log('curPage', curPage);
|
|
46
56
|
if (curPage === 0 || next === 0) {
|
|
47
57
|
setIsMin(true);
|
|
48
58
|
return;
|
|
@@ -53,7 +63,9 @@ var Slider = function (_a) {
|
|
|
53
63
|
}
|
|
54
64
|
setIsMax(false);
|
|
55
65
|
setIsMin(false);
|
|
56
|
-
}
|
|
66
|
+
},
|
|
67
|
+
responsive: sliderSettings === null || sliderSettings === void 0 ? void 0 : sliderSettings.responsive
|
|
68
|
+
};
|
|
57
69
|
return (React.createElement(React.Fragment, null,
|
|
58
70
|
React.createElement(Container, null,
|
|
59
71
|
React.createElement(SlickSlider, __assign({ ref: ref }, settings), children),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Slider.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.207",
|
|
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": "f59b83e6f073ab39a325531d119b6f123f482f29"
|
|
78
78
|
}
|