@citygross/components 0.7.207 → 0.7.208
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 +11 -3
- package/build/@types/components/Slider/Slider.stories.d.ts +1 -1
- package/build/cjs/components/src/components/Slider/Slider.js +7 -11
- package/build/cjs/components/src/components/Slider/Slider.js.map +1 -1
- package/build/es/components/src/components/Slider/Slider.js +7 -11
- package/build/es/components/src/components/Slider/Slider.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,13 +1,21 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TButtonColor } from '../Button/Button';
|
|
3
|
-
|
|
3
|
+
export declare type TSliderResponsiveSetting = {
|
|
4
|
+
slidesToShow: number;
|
|
5
|
+
slidesToScroll: number;
|
|
6
|
+
initialSlide?: number;
|
|
7
|
+
};
|
|
8
|
+
export declare type TSliderResponsive = {
|
|
9
|
+
breakpoint: number;
|
|
10
|
+
settings: TSliderResponsiveSetting;
|
|
11
|
+
};
|
|
4
12
|
export declare type TSlider = {
|
|
5
13
|
children: React.ReactNode;
|
|
6
14
|
itemGap?: number;
|
|
7
15
|
iconHeight?: number;
|
|
8
16
|
iconWidth?: number;
|
|
9
17
|
iconColor?: TButtonColor;
|
|
10
|
-
|
|
18
|
+
responsiveSettings: TSliderResponsive[];
|
|
11
19
|
slotsLength: number;
|
|
12
20
|
};
|
|
13
|
-
export declare const Slider: ({ children, slotsLength, iconHeight, iconWidth, iconColor,
|
|
21
|
+
export declare const Slider: ({ children, slotsLength, iconHeight, iconWidth, iconColor, responsiveSettings }: 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, slotsLength, iconHeight, iconWidth, iconColor,
|
|
5
|
+
component: ({ children, slotsLength, iconHeight, iconWidth, iconColor, responsiveSettings }: TSlider) => JSX.Element;
|
|
6
6
|
title: string;
|
|
7
7
|
};
|
|
8
8
|
export default _default;
|
|
@@ -17,25 +17,24 @@ var SlickSlider__default = /*#__PURE__*/_interopDefaultLegacy(SlickSlider);
|
|
|
17
17
|
|
|
18
18
|
var defaultSlides = 5;
|
|
19
19
|
var Slider = function (_a) {
|
|
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,
|
|
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, responsiveSettings = _a.responsiveSettings;
|
|
21
21
|
var _e = React.useState(false), isMax = _e[0], setIsMax = _e[1];
|
|
22
22
|
var _f = React.useState(true), isMin = _f[0], setIsMin = _f[1];
|
|
23
23
|
var _g = React.useState(0), currentPage = _g[0], setCurrentPage = _g[1];
|
|
24
24
|
var width = utils.useWindowSize().width;
|
|
25
25
|
var ref = React.useRef(null);
|
|
26
26
|
var resizeSlides = React.useMemo(function () {
|
|
27
|
-
var
|
|
28
|
-
var breakpoints = (_a = sliderSettings === null || sliderSettings === void 0 ? void 0 : sliderSettings.responsive) === null || _a === void 0 ? void 0 : _a.map(function (item) {
|
|
27
|
+
var breakpoints = responsiveSettings === null || responsiveSettings === void 0 ? void 0 : responsiveSettings.map(function (item) {
|
|
29
28
|
var _a;
|
|
30
29
|
return {
|
|
31
30
|
breakpoint: item.breakpoint,
|
|
32
31
|
// @ts-ignore
|
|
33
|
-
slidesToShow: (_a = item.settings) === null || _a === void 0 ? void 0 : _a.
|
|
32
|
+
slidesToShow: (_a = item.settings) === null || _a === void 0 ? void 0 : _a.slidesToScroll
|
|
34
33
|
};
|
|
35
34
|
}).sort(function (a, b) { return a.breakpoint - b.breakpoint; });
|
|
36
35
|
var curBreakpoint = breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.find(function (b) { return b.breakpoint > width; });
|
|
37
36
|
return curBreakpoint ? curBreakpoint === null || curBreakpoint === void 0 ? void 0 : curBreakpoint.slidesToShow : defaultSlides;
|
|
38
|
-
}, [width,
|
|
37
|
+
}, [width, responsiveSettings]);
|
|
39
38
|
var pageSections = React.useMemo(function () {
|
|
40
39
|
var sections = Array.from(Array(slotsLength || 0).keys()).filter(function (_, index) {
|
|
41
40
|
return index % resizeSlides === 0;
|
|
@@ -57,23 +56,20 @@ var Slider = function (_a) {
|
|
|
57
56
|
var curPage = next / totalPages;
|
|
58
57
|
var slides = slotsLength || 0;
|
|
59
58
|
setCurrentPage(next);
|
|
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);
|
|
65
59
|
if (curPage === 0 || next === 0) {
|
|
66
60
|
setIsMin(true);
|
|
61
|
+
setIsMax(false);
|
|
67
62
|
return;
|
|
68
63
|
}
|
|
69
64
|
if (next + resizeSlides >= slides) {
|
|
70
65
|
setIsMax(true);
|
|
66
|
+
setIsMin(false);
|
|
71
67
|
return;
|
|
72
68
|
}
|
|
73
69
|
setIsMax(false);
|
|
74
70
|
setIsMin(false);
|
|
75
71
|
},
|
|
76
|
-
responsive:
|
|
72
|
+
responsive: responsiveSettings
|
|
77
73
|
};
|
|
78
74
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
79
75
|
React__default["default"].createElement(Slider_styles.Container, null,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Slider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -8,25 +8,24 @@ import { useWindowSize } from '@citygross/utils';
|
|
|
8
8
|
|
|
9
9
|
var defaultSlides = 5;
|
|
10
10
|
var Slider = function (_a) {
|
|
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,
|
|
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, responsiveSettings = _a.responsiveSettings;
|
|
12
12
|
var _e = useState(false), isMax = _e[0], setIsMax = _e[1];
|
|
13
13
|
var _f = useState(true), isMin = _f[0], setIsMin = _f[1];
|
|
14
14
|
var _g = useState(0), currentPage = _g[0], setCurrentPage = _g[1];
|
|
15
15
|
var width = useWindowSize().width;
|
|
16
16
|
var ref = useRef(null);
|
|
17
17
|
var resizeSlides = useMemo(function () {
|
|
18
|
-
var
|
|
19
|
-
var breakpoints = (_a = sliderSettings === null || sliderSettings === void 0 ? void 0 : sliderSettings.responsive) === null || _a === void 0 ? void 0 : _a.map(function (item) {
|
|
18
|
+
var breakpoints = responsiveSettings === null || responsiveSettings === void 0 ? void 0 : responsiveSettings.map(function (item) {
|
|
20
19
|
var _a;
|
|
21
20
|
return {
|
|
22
21
|
breakpoint: item.breakpoint,
|
|
23
22
|
// @ts-ignore
|
|
24
|
-
slidesToShow: (_a = item.settings) === null || _a === void 0 ? void 0 : _a.
|
|
23
|
+
slidesToShow: (_a = item.settings) === null || _a === void 0 ? void 0 : _a.slidesToScroll
|
|
25
24
|
};
|
|
26
25
|
}).sort(function (a, b) { return a.breakpoint - b.breakpoint; });
|
|
27
26
|
var curBreakpoint = breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.find(function (b) { return b.breakpoint > width; });
|
|
28
27
|
return curBreakpoint ? curBreakpoint === null || curBreakpoint === void 0 ? void 0 : curBreakpoint.slidesToShow : defaultSlides;
|
|
29
|
-
}, [width,
|
|
28
|
+
}, [width, responsiveSettings]);
|
|
30
29
|
var pageSections = useMemo(function () {
|
|
31
30
|
var sections = Array.from(Array(slotsLength || 0).keys()).filter(function (_, index) {
|
|
32
31
|
return index % resizeSlides === 0;
|
|
@@ -48,23 +47,20 @@ var Slider = function (_a) {
|
|
|
48
47
|
var curPage = next / totalPages;
|
|
49
48
|
var slides = slotsLength || 0;
|
|
50
49
|
setCurrentPage(next);
|
|
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);
|
|
56
50
|
if (curPage === 0 || next === 0) {
|
|
57
51
|
setIsMin(true);
|
|
52
|
+
setIsMax(false);
|
|
58
53
|
return;
|
|
59
54
|
}
|
|
60
55
|
if (next + resizeSlides >= slides) {
|
|
61
56
|
setIsMax(true);
|
|
57
|
+
setIsMin(false);
|
|
62
58
|
return;
|
|
63
59
|
}
|
|
64
60
|
setIsMax(false);
|
|
65
61
|
setIsMin(false);
|
|
66
62
|
},
|
|
67
|
-
responsive:
|
|
63
|
+
responsive: responsiveSettings
|
|
68
64
|
};
|
|
69
65
|
return (React.createElement(React.Fragment, null,
|
|
70
66
|
React.createElement(Container, null,
|
|
@@ -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.208",
|
|
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": "b46bccd764f4dab141e2905b96b2becc8384efc7"
|
|
78
78
|
}
|