@citygross/components 0.7.207 → 0.7.209

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.
Files changed (7) hide show
  1. package/build/@types/components/Slider/Slider.d.ts +12 -3
  2. package/build/@types/components/Slider/Slider.stories.d.ts +1 -1
  3. package/build/cjs/components/src/components/Slider/Slider.js +30 -15
  4. package/build/cjs/components/src/components/Slider/Slider.js.map +1 -1
  5. package/build/es/components/src/components/Slider/Slider.js +30 -15
  6. package/build/es/components/src/components/Slider/Slider.js.map +1 -1
  7. package/package.json +2 -2
package/build/@types/components/Slider/Slider.d.ts CHANGED
@@ -1,13 +1,22 @@
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;
20
+ initialSlot?: number;
12
21
  };
13
- export declare const Slider: ({ children, slotsLength, iconHeight, iconWidth, iconColor, sliderSettings }: TSlider) => JSX.Element;
22
+ export declare const Slider: ({ children, slotsLength, iconHeight, iconWidth, iconColor, initialSlot, responsiveSettings }: TSlider) => JSX.Element;
package/build/@types/components/Slider/Slider.stories.d.ts CHANGED
@@ -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, initialSlot, responsiveSettings }: TSlider) => JSX.Element;
6
6
  title: string;
7
7
  };
8
8
  export default _default;
package/build/cjs/components/src/components/Slider/Slider.js CHANGED
@@ -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;
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];
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, _e = _a.initialSlot, initialSlot = _e === void 0 ? 7 : _e, responsiveSettings = _a.responsiveSettings;
21
+ var _f = React.useState(false), isMax = _f[0], setIsMax = _f[1];
22
+ var _g = React.useState(true), isMin = _g[0], setIsMin = _g[1];
23
+ var _h = React.useState(initialSlot), currentPage = _h[0], setCurrentPage = _h[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;
@@ -48,7 +47,7 @@ var Slider = function (_a) {
48
47
  slidesToScroll: defaultSlides,
49
48
  infinite: false,
50
49
  touchTreshold: 100,
51
- initialSlide: 0,
50
+ initialSlide: initialSlot,
52
51
  touchMove: true,
53
52
  arrows: false,
54
53
  beforeChange: function (_, next) {
@@ -57,23 +56,39 @@ 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
+ onInit: function () {
73
+ var _a, _b;
74
+ var totalPages = (_b = Math.ceil((_a = slotsLength / resizeSlides) !== null && _a !== void 0 ? _a : 0)) !== null && _b !== void 0 ? _b : 0;
75
+ var curPage = initialSlot / totalPages;
76
+ var slides = slotsLength || 0;
77
+ setCurrentPage(curPage);
78
+ if (curPage === 0 || initialSlot === 0) {
79
+ setIsMin(true);
80
+ setIsMax(false);
81
+ return;
82
+ }
83
+ if (initialSlot + resizeSlides >= slides) {
84
+ setIsMax(true);
85
+ setIsMin(false);
86
+ return;
87
+ }
88
+ setIsMax(false);
89
+ setIsMin(false);
90
+ },
91
+ responsive: responsiveSettings
77
92
  };
78
93
  return (React__default["default"].createElement(React__default["default"].Fragment, null,
79
94
  React__default["default"].createElement(Slider_styles.Container, null,
package/build/cjs/components/src/components/Slider/Slider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Slider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Slider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/Slider/Slider.js CHANGED
@@ -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;
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];
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, _e = _a.initialSlot, initialSlot = _e === void 0 ? 7 : _e, responsiveSettings = _a.responsiveSettings;
12
+ var _f = useState(false), isMax = _f[0], setIsMax = _f[1];
13
+ var _g = useState(true), isMin = _g[0], setIsMin = _g[1];
14
+ var _h = useState(initialSlot), currentPage = _h[0], setCurrentPage = _h[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;
@@ -39,7 +38,7 @@ var Slider = function (_a) {
39
38
  slidesToScroll: defaultSlides,
40
39
  infinite: false,
41
40
  touchTreshold: 100,
42
- initialSlide: 0,
41
+ initialSlide: initialSlot,
43
42
  touchMove: true,
44
43
  arrows: false,
45
44
  beforeChange: function (_, next) {
@@ -48,23 +47,39 @@ 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
+ onInit: function () {
64
+ var _a, _b;
65
+ var totalPages = (_b = Math.ceil((_a = slotsLength / resizeSlides) !== null && _a !== void 0 ? _a : 0)) !== null && _b !== void 0 ? _b : 0;
66
+ var curPage = initialSlot / totalPages;
67
+ var slides = slotsLength || 0;
68
+ setCurrentPage(curPage);
69
+ if (curPage === 0 || initialSlot === 0) {
70
+ setIsMin(true);
71
+ setIsMax(false);
72
+ return;
73
+ }
74
+ if (initialSlot + resizeSlides >= slides) {
75
+ setIsMax(true);
76
+ setIsMin(false);
77
+ return;
78
+ }
79
+ setIsMax(false);
80
+ setIsMin(false);
81
+ },
82
+ responsive: responsiveSettings
68
83
  };
69
84
  return (React.createElement(React.Fragment, null,
70
85
  React.createElement(Container, null,
package/build/es/components/src/components/Slider/Slider.js.map CHANGED
@@ -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.209",
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": "28adf3a3331e88dd821aa1a816db9ee4bb280b89"
78
78
  }