@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.
@@ -1,13 +1,21 @@
1
1
  import React from 'react';
2
2
  import { TButtonColor } from '../Button/Button';
3
- import { Settings } from 'react-slick';
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
- sliderSettings: Settings;
18
+ responsiveSettings: TSliderResponsive[];
11
19
  slotsLength: number;
12
20
  };
13
- export declare const Slider: ({ children, slotsLength, iconHeight, iconWidth, iconColor, sliderSettings }: TSlider) => JSX.Element;
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, sliderSettings }: TSlider) => JSX.Element;
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, sliderSettings = _a.sliderSettings;
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 _a;
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.slideToScroll
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, sliderSettings]);
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: sliderSettings === null || sliderSettings === void 0 ? void 0 : sliderSettings.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, sliderSettings = _a.sliderSettings;
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 _a;
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.slideToScroll
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, sliderSettings]);
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: sliderSettings === null || sliderSettings === void 0 ? void 0 : sliderSettings.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.207",
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": "f59b83e6f073ab39a325531d119b6f123f482f29"
77
+ "gitHead": "b46bccd764f4dab141e2905b96b2becc8384efc7"
78
78
  }