@megafon/ui-core 3.9.0 → 3.10.0
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/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [3.10.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.9.0...@megafon/ui-core@3.10.0) (2022-05-30)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **banner:** add new prop 'pauseOnHover' ([ac654c3](https://github.com/MegafonWebLab/megafon-ui/commit/ac654c3c23821a5d29ffd5cd91ff7337b3d087c1))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
# [3.9.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.8.0...@megafon/ui-core@3.9.0) (2022-05-27)
|
|
7
18
|
|
|
8
19
|
|
|
@@ -32,6 +32,8 @@ export interface IBannerProps {
|
|
|
32
32
|
autoPlay?: boolean;
|
|
33
33
|
/** Задержка автоматической прокрутки */
|
|
34
34
|
autoPlayDelay?: number;
|
|
35
|
+
/** Пауза автоматической прокрутки при наведении курсора на компонент */
|
|
36
|
+
pauseOnHover?: boolean;
|
|
35
37
|
/** Цветовая тема навигации */
|
|
36
38
|
navTheme?: NavThemeType;
|
|
37
39
|
/** Обработчик клика по стрелке "вперед" (должен быть обернут в useCallback) */
|
|
@@ -49,7 +49,9 @@ var Banner = function Banner(_ref) {
|
|
|
49
49
|
onPrevClick = _ref.onPrevClick,
|
|
50
50
|
onDotClick = _ref.onDotClick,
|
|
51
51
|
onChange = _ref.onChange,
|
|
52
|
-
dataAttrs = _ref.dataAttrs
|
|
52
|
+
dataAttrs = _ref.dataAttrs,
|
|
53
|
+
_ref$pauseOnHover = _ref.pauseOnHover,
|
|
54
|
+
pauseOnHover = _ref$pauseOnHover === void 0 ? false : _ref$pauseOnHover;
|
|
53
55
|
|
|
54
56
|
var _React$useState = React.useState(),
|
|
55
57
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
@@ -69,29 +71,42 @@ var Banner = function Banner(_ref) {
|
|
|
69
71
|
var _React$useState7 = React.useState(autoPlay),
|
|
70
72
|
_React$useState8 = _slicedToArray(_React$useState7, 2),
|
|
71
73
|
isAutoPlaying = _React$useState8[0],
|
|
72
|
-
|
|
74
|
+
setAutoPlaying = _React$useState8[1];
|
|
73
75
|
|
|
74
76
|
var _React$useState9 = React.useState(0),
|
|
75
77
|
_React$useState10 = _slicedToArray(_React$useState9, 2),
|
|
76
78
|
activeIndex = _React$useState10[0],
|
|
77
79
|
setActiveIndex = _React$useState10[1];
|
|
78
80
|
|
|
81
|
+
var _React$useState11 = React.useState(autoPlayDelay),
|
|
82
|
+
_React$useState12 = _slicedToArray(_React$useState11, 2),
|
|
83
|
+
delay = _React$useState12[0],
|
|
84
|
+
setDelay = _React$useState12[1];
|
|
85
|
+
|
|
86
|
+
var _React$useState13 = React.useState(false),
|
|
87
|
+
_React$useState14 = _slicedToArray(_React$useState13, 2),
|
|
88
|
+
isIncreasedDelay = _React$useState14[0],
|
|
89
|
+
setIsIncreasedDelay = _React$useState14[1];
|
|
90
|
+
|
|
79
91
|
var showDotTimer = loop ? isAutoPlaying : isAutoPlaying && !isEnd;
|
|
80
|
-
var dotTimerDelay =
|
|
92
|
+
var dotTimerDelay = delay / 1000;
|
|
81
93
|
var navArrowTheme = navTheme === NavTheme.DARK ? ArrowTheme.DARK : ArrowTheme.PURPLE;
|
|
94
|
+
var rootRef = React.useRef(null);
|
|
82
95
|
var increaseAutoplayDelay = React.useCallback(function (_ref2) {
|
|
83
96
|
var params = _ref2.params,
|
|
84
97
|
autoplay = _ref2.autoplay;
|
|
85
98
|
|
|
86
|
-
if (_typeof(params.autoplay) !== 'object' || !
|
|
99
|
+
if (_typeof(params.autoplay) !== 'object' || !autoPlay) {
|
|
87
100
|
return;
|
|
88
101
|
}
|
|
89
102
|
|
|
90
103
|
autoplay.stop(); // eslint-disable-next-line no-param-reassign
|
|
91
104
|
|
|
92
105
|
params.autoplay.delay = autoPlayDelay * 3;
|
|
106
|
+
setDelay(autoPlayDelay * 3);
|
|
107
|
+
setIsIncreasedDelay(true);
|
|
93
108
|
autoplay.start();
|
|
94
|
-
}, [autoPlayDelay]);
|
|
109
|
+
}, [autoPlay, autoPlayDelay]);
|
|
95
110
|
var handlePrevClick = React.useCallback(function () {
|
|
96
111
|
if (!swiperInstance) {
|
|
97
112
|
return;
|
|
@@ -99,8 +114,8 @@ var Banner = function Banner(_ref) {
|
|
|
99
114
|
|
|
100
115
|
swiperInstance.slidePrev();
|
|
101
116
|
onPrevClick === null || onPrevClick === void 0 ? void 0 : onPrevClick(swiperInstance.realIndex);
|
|
102
|
-
increaseAutoplayDelay(swiperInstance);
|
|
103
|
-
}, [swiperInstance, onPrevClick, increaseAutoplayDelay]);
|
|
117
|
+
!isIncreasedDelay && increaseAutoplayDelay(swiperInstance);
|
|
118
|
+
}, [swiperInstance, onPrevClick, isIncreasedDelay, increaseAutoplayDelay]);
|
|
104
119
|
var handleNextClick = React.useCallback(function () {
|
|
105
120
|
if (!swiperInstance) {
|
|
106
121
|
return;
|
|
@@ -108,8 +123,8 @@ var Banner = function Banner(_ref) {
|
|
|
108
123
|
|
|
109
124
|
swiperInstance.slideNext();
|
|
110
125
|
onNextClick === null || onNextClick === void 0 ? void 0 : onNextClick(swiperInstance.realIndex);
|
|
111
|
-
increaseAutoplayDelay(swiperInstance);
|
|
112
|
-
}, [swiperInstance, onNextClick, increaseAutoplayDelay]);
|
|
126
|
+
!isIncreasedDelay && increaseAutoplayDelay(swiperInstance);
|
|
127
|
+
}, [swiperInstance, onNextClick, isIncreasedDelay, increaseAutoplayDelay]);
|
|
113
128
|
var handleDotClick = React.useCallback(function (index) {
|
|
114
129
|
if (!swiperInstance) {
|
|
115
130
|
return;
|
|
@@ -122,11 +137,8 @@ var Banner = function Banner(_ref) {
|
|
|
122
137
|
}
|
|
123
138
|
|
|
124
139
|
onDotClick === null || onDotClick === void 0 ? void 0 : onDotClick(swiperInstance.realIndex);
|
|
125
|
-
increaseAutoplayDelay(swiperInstance);
|
|
126
|
-
}, [swiperInstance, loop, onDotClick, increaseAutoplayDelay]);
|
|
127
|
-
var handleSwiper = React.useCallback(function (swiper) {
|
|
128
|
-
setSwiperInstance(swiper);
|
|
129
|
-
}, []);
|
|
140
|
+
!isIncreasedDelay && increaseAutoplayDelay(swiperInstance);
|
|
141
|
+
}, [swiperInstance, loop, onDotClick, isIncreasedDelay, increaseAutoplayDelay]);
|
|
130
142
|
var handleReachBeginning = React.useCallback(function () {
|
|
131
143
|
setBeginning(true);
|
|
132
144
|
}, []);
|
|
@@ -149,23 +161,42 @@ var Banner = function Banner(_ref) {
|
|
|
149
161
|
onChange === null || onChange === void 0 ? void 0 : onChange(realIndex);
|
|
150
162
|
}, [onChange]);
|
|
151
163
|
var handleAutoplayStop = React.useCallback(function () {
|
|
152
|
-
|
|
164
|
+
setAutoPlaying(false);
|
|
153
165
|
}, []);
|
|
166
|
+
var handleAutoPlayStart = React.useCallback(function () {
|
|
167
|
+
setAutoPlaying(true);
|
|
168
|
+
}, []);
|
|
169
|
+
React.useEffect(function () {
|
|
170
|
+
var rootElement = rootRef.current;
|
|
171
|
+
|
|
172
|
+
if (!pauseOnHover || !autoPlay) {
|
|
173
|
+
return;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
rootElement === null || rootElement === void 0 ? void 0 : rootElement.addEventListener('mouseenter', function () {
|
|
177
|
+
swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay.stop();
|
|
178
|
+
});
|
|
179
|
+
rootElement === null || rootElement === void 0 ? void 0 : rootElement.addEventListener('mouseleave', function () {
|
|
180
|
+
swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay.start();
|
|
181
|
+
});
|
|
182
|
+
}, [autoPlay, pauseOnHover, swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay]);
|
|
154
183
|
return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
|
155
184
|
className: cn({
|
|
156
185
|
'nav-theme': navTheme
|
|
157
|
-
}, className)
|
|
186
|
+
}, className),
|
|
187
|
+
ref: rootRef
|
|
158
188
|
}), /*#__PURE__*/React.createElement(Swiper, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.swiper), {
|
|
159
189
|
className: cn('swiper'),
|
|
160
190
|
loop: loop,
|
|
161
191
|
autoplay: autoPlay ? getAutoPlayConfig(autoPlayDelay) : false,
|
|
162
192
|
watchSlidesVisibility: true,
|
|
163
|
-
onSwiper:
|
|
193
|
+
onSwiper: setSwiperInstance,
|
|
164
194
|
onReachBeginning: handleReachBeginning,
|
|
165
195
|
onReachEnd: handleReachEnd,
|
|
166
196
|
onFromEdge: handleFromEdge,
|
|
167
197
|
onSlideChange: handleSlideChange,
|
|
168
198
|
onAutoplayStop: handleAutoplayStop,
|
|
199
|
+
onAutoplayStart: handleAutoPlayStart,
|
|
169
200
|
onTouchEnd: increaseAutoplayDelay
|
|
170
201
|
}), React.Children.map(children, function (child, i) {
|
|
171
202
|
return /*#__PURE__*/React.createElement(SwiperSlide, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slide, i + 1), {
|
|
@@ -232,6 +263,7 @@ Banner.propTypes = {
|
|
|
232
263
|
}),
|
|
233
264
|
autoPlay: PropTypes.bool,
|
|
234
265
|
autoPlayDelay: PropTypes.number,
|
|
266
|
+
pauseOnHover: PropTypes.bool,
|
|
235
267
|
navTheme: PropTypes.oneOf(Object.values(NavTheme)),
|
|
236
268
|
onNextClick: PropTypes.func,
|
|
237
269
|
onPrevClick: PropTypes.func,
|
|
@@ -32,6 +32,8 @@ export interface IBannerProps {
|
|
|
32
32
|
autoPlay?: boolean;
|
|
33
33
|
/** Задержка автоматической прокрутки */
|
|
34
34
|
autoPlayDelay?: number;
|
|
35
|
+
/** Пауза автоматической прокрутки при наведении курсора на компонент */
|
|
36
|
+
pauseOnHover?: boolean;
|
|
35
37
|
/** Цветовая тема навигации */
|
|
36
38
|
navTheme?: NavThemeType;
|
|
37
39
|
/** Обработчик клика по стрелке "вперед" (должен быть обернут в useCallback) */
|
|
@@ -77,7 +77,9 @@ var Banner = function Banner(_ref) {
|
|
|
77
77
|
onPrevClick = _ref.onPrevClick,
|
|
78
78
|
onDotClick = _ref.onDotClick,
|
|
79
79
|
onChange = _ref.onChange,
|
|
80
|
-
dataAttrs = _ref.dataAttrs
|
|
80
|
+
dataAttrs = _ref.dataAttrs,
|
|
81
|
+
_ref$pauseOnHover = _ref.pauseOnHover,
|
|
82
|
+
pauseOnHover = _ref$pauseOnHover === void 0 ? false : _ref$pauseOnHover;
|
|
81
83
|
|
|
82
84
|
var _React$useState = React.useState(),
|
|
83
85
|
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
|
|
@@ -97,29 +99,42 @@ var Banner = function Banner(_ref) {
|
|
|
97
99
|
var _React$useState7 = React.useState(autoPlay),
|
|
98
100
|
_React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
|
|
99
101
|
isAutoPlaying = _React$useState8[0],
|
|
100
|
-
|
|
102
|
+
setAutoPlaying = _React$useState8[1];
|
|
101
103
|
|
|
102
104
|
var _React$useState9 = React.useState(0),
|
|
103
105
|
_React$useState10 = (0, _slicedToArray2["default"])(_React$useState9, 2),
|
|
104
106
|
activeIndex = _React$useState10[0],
|
|
105
107
|
setActiveIndex = _React$useState10[1];
|
|
106
108
|
|
|
109
|
+
var _React$useState11 = React.useState(autoPlayDelay),
|
|
110
|
+
_React$useState12 = (0, _slicedToArray2["default"])(_React$useState11, 2),
|
|
111
|
+
delay = _React$useState12[0],
|
|
112
|
+
setDelay = _React$useState12[1];
|
|
113
|
+
|
|
114
|
+
var _React$useState13 = React.useState(false),
|
|
115
|
+
_React$useState14 = (0, _slicedToArray2["default"])(_React$useState13, 2),
|
|
116
|
+
isIncreasedDelay = _React$useState14[0],
|
|
117
|
+
setIsIncreasedDelay = _React$useState14[1];
|
|
118
|
+
|
|
107
119
|
var showDotTimer = loop ? isAutoPlaying : isAutoPlaying && !isEnd;
|
|
108
|
-
var dotTimerDelay =
|
|
120
|
+
var dotTimerDelay = delay / 1000;
|
|
109
121
|
var navArrowTheme = navTheme === NavTheme.DARK ? _NavArrow.Theme.DARK : _NavArrow.Theme.PURPLE;
|
|
122
|
+
var rootRef = React.useRef(null);
|
|
110
123
|
var increaseAutoplayDelay = React.useCallback(function (_ref2) {
|
|
111
124
|
var params = _ref2.params,
|
|
112
125
|
autoplay = _ref2.autoplay;
|
|
113
126
|
|
|
114
|
-
if ((0, _typeof2["default"])(params.autoplay) !== 'object' || !
|
|
127
|
+
if ((0, _typeof2["default"])(params.autoplay) !== 'object' || !autoPlay) {
|
|
115
128
|
return;
|
|
116
129
|
}
|
|
117
130
|
|
|
118
131
|
autoplay.stop(); // eslint-disable-next-line no-param-reassign
|
|
119
132
|
|
|
120
133
|
params.autoplay.delay = autoPlayDelay * 3;
|
|
134
|
+
setDelay(autoPlayDelay * 3);
|
|
135
|
+
setIsIncreasedDelay(true);
|
|
121
136
|
autoplay.start();
|
|
122
|
-
}, [autoPlayDelay]);
|
|
137
|
+
}, [autoPlay, autoPlayDelay]);
|
|
123
138
|
var handlePrevClick = React.useCallback(function () {
|
|
124
139
|
if (!swiperInstance) {
|
|
125
140
|
return;
|
|
@@ -127,8 +142,8 @@ var Banner = function Banner(_ref) {
|
|
|
127
142
|
|
|
128
143
|
swiperInstance.slidePrev();
|
|
129
144
|
onPrevClick === null || onPrevClick === void 0 ? void 0 : onPrevClick(swiperInstance.realIndex);
|
|
130
|
-
increaseAutoplayDelay(swiperInstance);
|
|
131
|
-
}, [swiperInstance, onPrevClick, increaseAutoplayDelay]);
|
|
145
|
+
!isIncreasedDelay && increaseAutoplayDelay(swiperInstance);
|
|
146
|
+
}, [swiperInstance, onPrevClick, isIncreasedDelay, increaseAutoplayDelay]);
|
|
132
147
|
var handleNextClick = React.useCallback(function () {
|
|
133
148
|
if (!swiperInstance) {
|
|
134
149
|
return;
|
|
@@ -136,8 +151,8 @@ var Banner = function Banner(_ref) {
|
|
|
136
151
|
|
|
137
152
|
swiperInstance.slideNext();
|
|
138
153
|
onNextClick === null || onNextClick === void 0 ? void 0 : onNextClick(swiperInstance.realIndex);
|
|
139
|
-
increaseAutoplayDelay(swiperInstance);
|
|
140
|
-
}, [swiperInstance, onNextClick, increaseAutoplayDelay]);
|
|
154
|
+
!isIncreasedDelay && increaseAutoplayDelay(swiperInstance);
|
|
155
|
+
}, [swiperInstance, onNextClick, isIncreasedDelay, increaseAutoplayDelay]);
|
|
141
156
|
var handleDotClick = React.useCallback(function (index) {
|
|
142
157
|
if (!swiperInstance) {
|
|
143
158
|
return;
|
|
@@ -150,11 +165,8 @@ var Banner = function Banner(_ref) {
|
|
|
150
165
|
}
|
|
151
166
|
|
|
152
167
|
onDotClick === null || onDotClick === void 0 ? void 0 : onDotClick(swiperInstance.realIndex);
|
|
153
|
-
increaseAutoplayDelay(swiperInstance);
|
|
154
|
-
}, [swiperInstance, loop, onDotClick, increaseAutoplayDelay]);
|
|
155
|
-
var handleSwiper = React.useCallback(function (swiper) {
|
|
156
|
-
setSwiperInstance(swiper);
|
|
157
|
-
}, []);
|
|
168
|
+
!isIncreasedDelay && increaseAutoplayDelay(swiperInstance);
|
|
169
|
+
}, [swiperInstance, loop, onDotClick, isIncreasedDelay, increaseAutoplayDelay]);
|
|
158
170
|
var handleReachBeginning = React.useCallback(function () {
|
|
159
171
|
setBeginning(true);
|
|
160
172
|
}, []);
|
|
@@ -177,23 +189,42 @@ var Banner = function Banner(_ref) {
|
|
|
177
189
|
onChange === null || onChange === void 0 ? void 0 : onChange(realIndex);
|
|
178
190
|
}, [onChange]);
|
|
179
191
|
var handleAutoplayStop = React.useCallback(function () {
|
|
180
|
-
|
|
192
|
+
setAutoPlaying(false);
|
|
181
193
|
}, []);
|
|
194
|
+
var handleAutoPlayStart = React.useCallback(function () {
|
|
195
|
+
setAutoPlaying(true);
|
|
196
|
+
}, []);
|
|
197
|
+
React.useEffect(function () {
|
|
198
|
+
var rootElement = rootRef.current;
|
|
199
|
+
|
|
200
|
+
if (!pauseOnHover || !autoPlay) {
|
|
201
|
+
return;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
rootElement === null || rootElement === void 0 ? void 0 : rootElement.addEventListener('mouseenter', function () {
|
|
205
|
+
swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay.stop();
|
|
206
|
+
});
|
|
207
|
+
rootElement === null || rootElement === void 0 ? void 0 : rootElement.addEventListener('mouseleave', function () {
|
|
208
|
+
swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay.start();
|
|
209
|
+
});
|
|
210
|
+
}, [autoPlay, pauseOnHover, swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay]);
|
|
182
211
|
return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
|
183
212
|
className: cn({
|
|
184
213
|
'nav-theme': navTheme
|
|
185
|
-
}, className)
|
|
214
|
+
}, className),
|
|
215
|
+
ref: rootRef
|
|
186
216
|
}), /*#__PURE__*/React.createElement(_react2.Swiper, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.swiper), {
|
|
187
217
|
className: cn('swiper'),
|
|
188
218
|
loop: loop,
|
|
189
219
|
autoplay: autoPlay ? getAutoPlayConfig(autoPlayDelay) : false,
|
|
190
220
|
watchSlidesVisibility: true,
|
|
191
|
-
onSwiper:
|
|
221
|
+
onSwiper: setSwiperInstance,
|
|
192
222
|
onReachBeginning: handleReachBeginning,
|
|
193
223
|
onReachEnd: handleReachEnd,
|
|
194
224
|
onFromEdge: handleFromEdge,
|
|
195
225
|
onSlideChange: handleSlideChange,
|
|
196
226
|
onAutoplayStop: handleAutoplayStop,
|
|
227
|
+
onAutoplayStart: handleAutoPlayStart,
|
|
197
228
|
onTouchEnd: increaseAutoplayDelay
|
|
198
229
|
}), React.Children.map(children, function (child, i) {
|
|
199
230
|
return /*#__PURE__*/React.createElement(_react2.SwiperSlide, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slide, i + 1), {
|
|
@@ -260,6 +291,7 @@ Banner.propTypes = {
|
|
|
260
291
|
}),
|
|
261
292
|
autoPlay: PropTypes.bool,
|
|
262
293
|
autoPlayDelay: PropTypes.number,
|
|
294
|
+
pauseOnHover: PropTypes.bool,
|
|
263
295
|
navTheme: PropTypes.oneOf(Object.values(NavTheme)),
|
|
264
296
|
onNextClick: PropTypes.func,
|
|
265
297
|
onPrevClick: PropTypes.func,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@megafon/ui-core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.10.0",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist",
|
|
6
6
|
"styles"
|
|
@@ -97,5 +97,5 @@
|
|
|
97
97
|
"react-popper": "^2.2.3",
|
|
98
98
|
"swiper": "^6.5.6"
|
|
99
99
|
},
|
|
100
|
-
"gitHead": "
|
|
100
|
+
"gitHead": "eca7dfc6c6f0f7317f404b989bb8d7bd5ec429ed"
|
|
101
101
|
}
|