@citygross/components 0.7.208 → 0.7.210

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 +2 -1
  2. package/build/@types/components/Slider/Slider.stories.d.ts +1 -1
  3. package/build/cjs/components/src/components/Slider/Slider.js +5 -24
  4. package/build/cjs/components/src/components/Slider/Slider.js.map +1 -1
  5. package/build/es/components/src/components/Slider/Slider.js +5 -24
  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
@@ -17,5 +17,6 @@ export declare type TSlider = {
17
17
  iconColor?: TButtonColor;
18
18
  responsiveSettings: TSliderResponsive[];
19
19
  slotsLength: number;
20
+ initialSlot?: number;
20
21
  };
21
- export declare const Slider: ({ children, slotsLength, iconHeight, iconWidth, iconColor, responsiveSettings }: 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, responsiveSettings }: 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,10 +17,8 @@ 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, responsiveSettings = _a.responsiveSettings;
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 ? 0 : _e, responsiveSettings = _a.responsiveSettings;
21
+ var _f = React.useState(initialSlot), currentPage = _f[0], setCurrentPage = _f[1];
24
22
  var width = utils.useWindowSize().width;
25
23
  var ref = React.useRef(null);
26
24
  var resizeSlides = React.useMemo(function () {
@@ -28,7 +26,6 @@ var Slider = function (_a) {
28
26
  var _a;
29
27
  return {
30
28
  breakpoint: item.breakpoint,
31
- // @ts-ignore
32
29
  slidesToShow: (_a = item.settings) === null || _a === void 0 ? void 0 : _a.slidesToScroll
33
30
  };
34
31
  }).sort(function (a, b) { return a.breakpoint - b.breakpoint; });
@@ -47,27 +44,11 @@ var Slider = function (_a) {
47
44
  slidesToScroll: defaultSlides,
48
45
  infinite: false,
49
46
  touchTreshold: 100,
50
- initialSlide: 0,
47
+ initialSlide: initialSlot,
51
48
  touchMove: true,
52
49
  arrows: false,
53
50
  beforeChange: function (_, next) {
54
- var _a, _b;
55
- var totalPages = (_b = Math.ceil((_a = slotsLength / resizeSlides) !== null && _a !== void 0 ? _a : 0)) !== null && _b !== void 0 ? _b : 0;
56
- var curPage = next / totalPages;
57
- var slides = slotsLength || 0;
58
51
  setCurrentPage(next);
59
- if (curPage === 0 || next === 0) {
60
- setIsMin(true);
61
- setIsMax(false);
62
- return;
63
- }
64
- if (next + resizeSlides >= slides) {
65
- setIsMax(true);
66
- setIsMin(false);
67
- return;
68
- }
69
- setIsMax(false);
70
- setIsMin(false);
71
52
  },
72
53
  responsive: responsiveSettings
73
54
  };
@@ -75,14 +56,14 @@ var Slider = function (_a) {
75
56
  React__default["default"].createElement(Slider_styles.Container, null,
76
57
  React__default["default"].createElement(SlickSlider__default["default"], _tslib.__assign({ ref: ref }, settings), children),
77
58
  React__default["default"].createElement(Slider_styles.LeftIconButtonContainer, null,
78
- 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 () {
59
+ React__default["default"].createElement(IconButton.IconButton, { isDisabled: currentPage < 1, color: iconColor, icon: React__default["default"].createElement(Icon.Icons.ChevronLeft, { color: 'white' }), height: iconHeight, width: iconWidth, borderRadius: 100, onClick: function () {
79
60
  var _a;
80
61
  var prevPage = pageSections.reverse().find(function (section) { return section < currentPage; }) ||
81
62
  0;
82
63
  (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(prevPage);
83
64
  } })),
84
65
  React__default["default"].createElement(Slider_styles.RightIconButtonContainer, null,
85
- 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 () {
66
+ React__default["default"].createElement(IconButton.IconButton, { isDisabled: currentPage + resizeSlides >= slotsLength, color: iconColor, icon: React__default["default"].createElement(Icon.Icons.ChevronRight, { color: 'white' }), height: iconHeight, width: iconWidth, borderRadius: 100, onClick: function () {
86
67
  var _a;
87
68
  var nextPage = pageSections.find(function (section) { return section > currentPage; }) ||
88
69
  pageSections[(pageSections === null || pageSections === void 0 ? void 0 : pageSections.length) - 1];
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,10 +8,8 @@ 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, responsiveSettings = _a.responsiveSettings;
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 ? 0 : _e, responsiveSettings = _a.responsiveSettings;
12
+ var _f = useState(initialSlot), currentPage = _f[0], setCurrentPage = _f[1];
15
13
  var width = useWindowSize().width;
16
14
  var ref = useRef(null);
17
15
  var resizeSlides = useMemo(function () {
@@ -19,7 +17,6 @@ var Slider = function (_a) {
19
17
  var _a;
20
18
  return {
21
19
  breakpoint: item.breakpoint,
22
- // @ts-ignore
23
20
  slidesToShow: (_a = item.settings) === null || _a === void 0 ? void 0 : _a.slidesToScroll
24
21
  };
25
22
  }).sort(function (a, b) { return a.breakpoint - b.breakpoint; });
@@ -38,27 +35,11 @@ var Slider = function (_a) {
38
35
  slidesToScroll: defaultSlides,
39
36
  infinite: false,
40
37
  touchTreshold: 100,
41
- initialSlide: 0,
38
+ initialSlide: initialSlot,
42
39
  touchMove: true,
43
40
  arrows: false,
44
41
  beforeChange: function (_, next) {
45
- var _a, _b;
46
- var totalPages = (_b = Math.ceil((_a = slotsLength / resizeSlides) !== null && _a !== void 0 ? _a : 0)) !== null && _b !== void 0 ? _b : 0;
47
- var curPage = next / totalPages;
48
- var slides = slotsLength || 0;
49
42
  setCurrentPage(next);
50
- if (curPage === 0 || next === 0) {
51
- setIsMin(true);
52
- setIsMax(false);
53
- return;
54
- }
55
- if (next + resizeSlides >= slides) {
56
- setIsMax(true);
57
- setIsMin(false);
58
- return;
59
- }
60
- setIsMax(false);
61
- setIsMin(false);
62
43
  },
63
44
  responsive: responsiveSettings
64
45
  };
@@ -66,14 +47,14 @@ var Slider = function (_a) {
66
47
  React.createElement(Container, null,
67
48
  React.createElement(SlickSlider, __assign({ ref: ref }, settings), children),
68
49
  React.createElement(LeftIconButtonContainer, null,
69
- React.createElement(IconButton, { isDisabled: isMin, color: iconColor, icon: React.createElement(Icons.ChevronLeft, { color: 'white' }), height: iconHeight, width: iconWidth, borderRadius: 100, onClick: function () {
50
+ React.createElement(IconButton, { isDisabled: currentPage < 1, color: iconColor, icon: React.createElement(Icons.ChevronLeft, { color: 'white' }), height: iconHeight, width: iconWidth, borderRadius: 100, onClick: function () {
70
51
  var _a;
71
52
  var prevPage = pageSections.reverse().find(function (section) { return section < currentPage; }) ||
72
53
  0;
73
54
  (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(prevPage);
74
55
  } })),
75
56
  React.createElement(RightIconButtonContainer, null,
76
- React.createElement(IconButton, { isDisabled: isMax, color: iconColor, icon: React.createElement(Icons.ChevronRight, { color: 'white' }), height: iconHeight, width: iconWidth, borderRadius: 100, onClick: function () {
57
+ React.createElement(IconButton, { isDisabled: currentPage + resizeSlides >= slotsLength, color: iconColor, icon: React.createElement(Icons.ChevronRight, { color: 'white' }), height: iconHeight, width: iconWidth, borderRadius: 100, onClick: function () {
77
58
  var _a;
78
59
  var nextPage = pageSections.find(function (section) { return section > currentPage; }) ||
79
60
  pageSections[(pageSections === null || pageSections === void 0 ? void 0 : pageSections.length) - 1];
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.208",
3
+ "version": "0.7.210",
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": "b46bccd764f4dab141e2905b96b2becc8384efc7"
77
+ "gitHead": "15131526bcc36059fd40cbe0e5a30a34dc220dd5"
78
78
  }