@momo-kits/carousel 0.0.65-alpha.11 → 0.0.65-alpha.12

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 (8) hide show
  1. package/CarouselV2.js +1221 -1196
  2. package/index.js +4 -2
  3. package/package.json +15 -16
  4. package/pagination/Pagination.js +34 -64
  5. package/pagination/PaginationDot.js +39 -45
  6. package/pagination/styles.js +6 -6
  7. package/utils/animationsV2.js +207 -230
  8. package/pagination/NumberPagination.js +0 -43
package/utils/animationsV2.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { Platform, Animated } from 'react-native';
2
+
2
3
  const IS_ANDROID = Platform.OS === 'android';
3
4
 
4
5
  // Get scroll interpolator's input range from an array of slide indexes
@@ -11,14 +12,10 @@ const IS_ANDROID = Platform.OS === 'android';
11
12
  // index * sizeRef, // active
12
13
  // (index + 1) * sizeRef // active - 1
13
14
  // ]
14
- export function getInputRangeFromIndexes (
15
- range,
16
- index,
17
- carouselProps
18
- ) {
19
- const sizeRef = carouselProps.vertical ?
20
- carouselProps.itemHeight :
21
- carouselProps.itemWidth;
15
+ export function getInputRangeFromIndexes(range, index, carouselProps) {
16
+ const sizeRef = carouselProps.vertical
17
+ ? carouselProps.itemHeight
18
+ : carouselProps.itemWidth;
22
19
  const inputRange = [];
23
20
 
24
21
  for (let i = 0; i < range.length; i++) {
@@ -31,21 +28,18 @@ export function getInputRangeFromIndexes (
31
28
  // Default behavior
32
29
  // Scale and/or opacity effect
33
30
  // Based on props 'inactiveSlideOpacity' and 'inactiveSlideScale'
34
- export function defaultScrollInterpolator (
35
- index,
36
- carouselProps
37
- ) {
31
+ export function defaultScrollInterpolator(index, carouselProps) {
38
32
  const range = [1, 0, -1];
39
33
  const inputRange = getInputRangeFromIndexes(range, index, carouselProps);
40
34
  const outputRange = [0, 1, 0];
41
35
 
42
- return { inputRange, outputRange };
36
+ return {
37
+ inputRange,
38
+ outputRange,
39
+ };
43
40
  }
44
- export function defaultAnimatedStyles (
45
- _index,
46
- animatedValue,
47
- carouselProps
48
- ) {
41
+
42
+ export function defaultAnimatedStyles(_index, animatedValue, carouselProps) {
49
43
  let animatedOpacity = {};
50
44
  let animatedScale = {};
51
45
 
@@ -53,8 +47,8 @@ export function defaultAnimatedStyles (
53
47
  animatedOpacity = {
54
48
  opacity: animatedValue.interpolate({
55
49
  inputRange: [0, 1],
56
- outputRange: [carouselProps.inactiveSlideOpacity, 1]
57
- })
50
+ outputRange: [carouselProps.inactiveSlideOpacity, 1],
51
+ }),
58
52
  };
59
53
  }
60
54
 
@@ -64,27 +58,23 @@ export function defaultAnimatedStyles (
64
58
  {
65
59
  scale: animatedValue.interpolate({
66
60
  inputRange: [0, 1],
67
- outputRange: [carouselProps.inactiveSlideScale, 1]
68
- })
69
- }
70
- ]
61
+ outputRange: [carouselProps.inactiveSlideScale, 1],
62
+ }),
63
+ },
64
+ ],
71
65
  };
72
66
  }
73
67
 
74
68
  return {
75
69
  ...animatedOpacity,
76
- ...animatedScale
70
+ ...animatedScale,
77
71
  };
78
72
  }
79
73
 
80
74
  // Shift animation
81
75
  // Same as the default one, but the active slide is also shifted up or down
82
76
  // Based on prop 'inactiveSlideShift'
83
- export function shiftAnimatedStyles (
84
- _index,
85
- animatedValue,
86
- carouselProps
87
- ) {
77
+ export function shiftAnimatedStyles(_index, animatedValue, carouselProps) {
88
78
  let animatedOpacity = {};
89
79
  let animatedScale = {};
90
80
  let animatedTranslate = {};
@@ -93,8 +83,8 @@ export function shiftAnimatedStyles (
93
83
  animatedOpacity = {
94
84
  opacity: animatedValue.interpolate({
95
85
  inputRange: [0, 1],
96
- outputRange: [carouselProps.inactiveSlideOpacity, 1]
97
- })
86
+ outputRange: [carouselProps.inactiveSlideOpacity, 1],
87
+ }),
98
88
  };
99
89
  }
100
90
 
@@ -102,24 +92,26 @@ export function shiftAnimatedStyles (
102
92
  animatedScale = {
103
93
  scale: animatedValue.interpolate({
104
94
  inputRange: [0, 1],
105
- outputRange: [carouselProps.inactiveSlideScale, 1]
106
- })
95
+ outputRange: [carouselProps.inactiveSlideScale, 1],
96
+ }),
107
97
  };
108
98
  }
109
99
 
110
100
  if (carouselProps.inactiveSlideShift !== 0) {
111
- const translateProp = carouselProps.vertical ? 'translateX' : 'translateY';
101
+ const translateProp = carouselProps.vertical
102
+ ? 'translateX'
103
+ : 'translateY';
112
104
  animatedTranslate = {
113
105
  [translateProp]: animatedValue.interpolate({
114
106
  inputRange: [0, 1],
115
- outputRange: [carouselProps.inactiveSlideShift, 0]
116
- })
107
+ outputRange: [carouselProps.inactiveSlideShift, 0],
108
+ }),
117
109
  };
118
110
  }
119
111
 
120
112
  return {
121
113
  ...animatedOpacity,
122
- transform: [{ ...animatedScale }, { ...animatedTranslate }]
114
+ transform: [{ ...animatedScale }, { ...animatedTranslate }],
123
115
  };
124
116
  }
125
117
 
@@ -128,25 +120,26 @@ export function shiftAnimatedStyles (
128
120
  // WARNING: The effect had to be visually inverted on Android because this OS doesn't honor the `zIndex`property
129
121
  // This means that the item with the higher zIndex (and therefore the tap receiver) remains the one AFTER the currently active item
130
122
  // The `elevation` property compensates for that only visually, which is not good enough
131
- export function stackScrollInterpolator (
132
- index,
133
- carouselProps
134
- ) {
135
- const range = IS_ANDROID ? [1, 0, -1, -2, -3] : [3, 2, 1, 0, -1];
123
+ export function stackScrollInterpolator(index, carouselProps) {
124
+ const range = [3, 2, 1, 0, -1];
136
125
  const inputRange = getInputRangeFromIndexes(range, index, carouselProps);
137
126
  const outputRange = range;
138
127
 
139
- return { inputRange, outputRange };
128
+ return {
129
+ inputRange,
130
+ outputRange,
131
+ };
140
132
  }
141
- export function stackAnimatedStyles (
133
+
134
+ export function stackAnimatedStyles(
142
135
  index,
143
136
  animatedValue,
144
137
  carouselProps,
145
- cardOffset
138
+ cardOffset,
146
139
  ) {
147
- const sizeRef = carouselProps.vertical ?
148
- carouselProps.itemHeight :
149
- carouselProps.itemWidth;
140
+ const sizeRef = carouselProps.vertical
141
+ ? carouselProps.itemHeight
142
+ : carouselProps.itemWidth;
150
143
  const translateProp = carouselProps.vertical ? 'translateY' : 'translateX';
151
144
 
152
145
  const card1Scale = 0.9;
@@ -158,77 +151,48 @@ export function stackAnimatedStyles (
158
151
  const centerFactor = (1 / scale) * cardIndex;
159
152
  const centeredPosition = -Math.round(sizeRef * centerFactor);
160
153
  const edgeAlignment = Math.round((sizeRef - sizeRef * scale) / 2);
161
- const offset = Math.round((newCardOffset * Math.abs(cardIndex)) / scale);
154
+ const offset = Math.round(
155
+ (newCardOffset * Math.abs(cardIndex)) / scale,
156
+ );
162
157
 
163
- return IS_ANDROID ?
164
- centeredPosition - edgeAlignment - offset :
165
- centeredPosition + edgeAlignment + offset;
158
+ return centeredPosition + edgeAlignment + offset;
166
159
  };
167
160
 
168
161
  const opacityOutputRange =
169
- carouselProps.inactiveSlideOpacity === 1 ? [1, 1, 1, 0] : [1, 0.75, 0.5, 0];
162
+ carouselProps.inactiveSlideOpacity === 1
163
+ ? [1, 1, 1, 0]
164
+ : [1, 0.75, 0.5, 0];
170
165
 
171
- return IS_ANDROID ?
172
- {
173
- // elevation.data.length - index, // fix zIndex bug visually, but not from a logic point of view
174
- opacity: animatedValue.interpolate({
175
- inputRange: [-3, -2, -1, 0],
176
- outputRange: opacityOutputRange.reverse(),
177
- extrapolate: 'clamp'
178
- }),
179
- transform: [
180
- {
181
- scale: animatedValue.interpolate({
182
- inputRange: [-2, -1, 0, 1],
183
- outputRange: [card2Scale, card1Scale, 1, card1Scale],
184
- extrapolate: 'clamp'
185
- })
186
- },
187
- {
188
- [translateProp]: animatedValue.interpolate({
189
- inputRange: [-3, -2, -1, 0, 1],
190
- outputRange: [
191
- getTranslateFromScale(-3, card2Scale),
192
- getTranslateFromScale(-2, card2Scale),
193
- getTranslateFromScale(-1, card1Scale),
194
- 0,
195
- sizeRef * 0.5
196
- ],
197
- extrapolate: 'clamp'
198
- })
199
- }
200
- ]
201
- } :
202
- {
203
- zIndex: carouselProps.data.length - index,
204
- opacity: animatedValue.interpolate({
205
- inputRange: [0, 1, 2, 3],
206
- outputRange: opacityOutputRange,
207
- extrapolate: 'clamp'
208
- }),
209
- transform: [
210
- {
211
- scale: animatedValue.interpolate({
212
- inputRange: [-1, 0, 1, 2],
213
- outputRange: [card1Scale, 1, card1Scale, card2Scale],
214
- extrapolate: 'clamp'
215
- })
216
- },
217
- {
218
- [translateProp]: animatedValue.interpolate({
219
- inputRange: [-1, 0, 1, 2, 3],
220
- outputRange: [
221
- -sizeRef * 0.5,
222
- 0,
223
- getTranslateFromScale(1, card1Scale),
224
- getTranslateFromScale(2, card2Scale),
225
- getTranslateFromScale(3, card2Scale)
226
- ],
227
- extrapolate: 'clamp'
228
- })
229
- }
230
- ]
231
- };
166
+ return {
167
+ zIndex: carouselProps.data.length - index,
168
+ opacity: animatedValue.interpolate({
169
+ inputRange: [0, 1, 2, 3],
170
+ outputRange: opacityOutputRange,
171
+ extrapolate: 'clamp',
172
+ }),
173
+ transform: [
174
+ {
175
+ scale: animatedValue.interpolate({
176
+ inputRange: [-1, 0, 1, 2],
177
+ outputRange: [card1Scale, 1, card1Scale, card2Scale],
178
+ extrapolate: 'clamp',
179
+ }),
180
+ },
181
+ {
182
+ [translateProp]: animatedValue.interpolate({
183
+ inputRange: [-1, 0, 1, 2, 3],
184
+ outputRange: [
185
+ -sizeRef * 0.5,
186
+ 0,
187
+ getTranslateFromScale(1, card1Scale),
188
+ getTranslateFromScale(2, card2Scale),
189
+ getTranslateFromScale(3, card2Scale),
190
+ ],
191
+ extrapolate: 'clamp',
192
+ }),
193
+ },
194
+ ],
195
+ };
232
196
  }
233
197
 
234
198
  // Tinder animation
@@ -236,31 +200,32 @@ export function stackAnimatedStyles (
236
200
  // WARNING: The effect had to be visually inverted on Android because this OS doesn't honor the `zIndex`property
237
201
  // This means that the item with the higher zIndex (and therefore the tap receiver) remains the one AFTER the currently active item
238
202
  // The `elevation` property compensates for that only visually, which is not good enough
239
- export function tinderScrollInterpolator (
240
- index,
241
- carouselProps
242
- ) {
203
+ export function tinderScrollInterpolator(index, carouselProps) {
243
204
  const range = IS_ANDROID ? [1, 0, -1, -2, -3] : [3, 2, 1, 0, -1];
244
205
  const inputRange = getInputRangeFromIndexes(range, index, carouselProps);
245
206
  const outputRange = range;
246
207
 
247
- return { inputRange, outputRange };
208
+ return {
209
+ inputRange,
210
+ outputRange,
211
+ };
248
212
  }
249
- export function tinderAnimatedStyles (
213
+
214
+ export function tinderAnimatedStyles(
250
215
  index,
251
216
  animatedValue,
252
217
  carouselProps,
253
- cardOffset
218
+ cardOffset,
254
219
  ) {
255
- const sizeRef = carouselProps.vertical ?
256
- carouselProps.itemHeight :
257
- carouselProps.itemWidth;
258
- const mainTranslateProp = carouselProps.vertical ?
259
- 'translateY' :
260
- 'translateX';
261
- const secondaryTranslateProp = carouselProps.vertical ?
262
- 'translateX' :
263
- 'translateY';
220
+ const sizeRef = carouselProps.vertical
221
+ ? carouselProps.itemHeight
222
+ : carouselProps.itemWidth;
223
+ const mainTranslateProp = carouselProps.vertical
224
+ ? 'translateY'
225
+ : 'translateX';
226
+ const secondaryTranslateProp = carouselProps.vertical
227
+ ? 'translateX'
228
+ : 'translateY';
264
229
 
265
230
  const card1Scale = 0.96;
266
231
  const card2Scale = 0.92;
@@ -279,103 +244,115 @@ export function tinderAnimatedStyles (
279
244
  return Math.round((newCardOffset * Math.abs(cardIndex)) / scale);
280
245
  };
281
246
 
282
- return IS_ANDROID ?
283
- {
284
- // elevation.data.length - index, // fix zIndex bug visually, but not from a logic point of view
285
- opacity: animatedValue.interpolate({
286
- inputRange: [-3, -2, -1, 0, 1],
287
- outputRange: [0, peekingCardsOpacity, peekingCardsOpacity, 1, 0],
288
- extrapolate: 'clamp'
289
- }),
290
- transform: [
291
- {
292
- scale: animatedValue.interpolate({
293
- inputRange: [-3, -2, -1, 0],
294
- outputRange: [card3Scale, card2Scale, card1Scale, 1],
295
- extrapolate: 'clamp'
296
- })
297
- },
298
- {
299
- rotate: animatedValue.interpolate({
300
- inputRange: [0, 1],
301
- outputRange: ['0deg', '22deg'],
302
- extrapolate: 'clamp'
303
- })
304
- },
305
- {
306
- [mainTranslateProp]: animatedValue.interpolate({
307
- inputRange: [-3, -2, -1, 0, 1],
308
- outputRange: [
309
- getMainTranslateFromScale(-3, card3Scale),
310
- getMainTranslateFromScale(-2, card2Scale),
311
- getMainTranslateFromScale(-1, card1Scale),
312
- 0,
313
- sizeRef * 1.1
314
- ],
315
- extrapolate: 'clamp'
316
- })
317
- },
318
- {
319
- [secondaryTranslateProp]: animatedValue.interpolate({
320
- inputRange: [-3, -2, -1, 0],
321
- outputRange: [
322
- getSecondaryTranslateFromScale(-3, card3Scale),
323
- getSecondaryTranslateFromScale(-2, card2Scale),
324
- getSecondaryTranslateFromScale(-1, card1Scale),
325
- 0
326
- ],
327
- extrapolate: 'clamp'
328
- })
329
- }
330
- ]
331
- } :
332
- {
333
- zIndex: carouselProps.data.length - index,
334
- opacity: animatedValue.interpolate({
335
- inputRange: [-1, 0, 1, 2, 3],
336
- outputRange: [0, 1, peekingCardsOpacity, peekingCardsOpacity, 0],
337
- extrapolate: 'clamp'
338
- }),
339
- transform: [
340
- {
341
- scale: animatedValue.interpolate({
342
- inputRange: [0, 1, 2, 3],
343
- outputRange: [1, card1Scale, card2Scale, card3Scale],
344
- extrapolate: 'clamp'
345
- })
346
- },
347
- {
348
- rotate: animatedValue.interpolate({
349
- inputRange: [-1, 0],
350
- outputRange: ['-22deg', '0deg'],
351
- extrapolate: 'clamp'
352
- })
353
- },
354
- {
355
- [mainTranslateProp]: animatedValue.interpolate({
356
- inputRange: [-1, 0, 1, 2, 3],
357
- outputRange: [
358
- -sizeRef * 1.1,
359
- 0,
360
- getMainTranslateFromScale(1, card1Scale),
361
- getMainTranslateFromScale(2, card2Scale),
362
- getMainTranslateFromScale(3, card3Scale)
363
- ],
364
- extrapolate: 'clamp'
365
- })
366
- },
367
- {
368
- [secondaryTranslateProp]: animatedValue.interpolate({
369
- inputRange: [0, 1, 2, 3],
370
- outputRange: [
371
- 0,
372
- getSecondaryTranslateFromScale(1, card1Scale),
373
- getSecondaryTranslateFromScale(2, card2Scale),
374
- getSecondaryTranslateFromScale(3, card3Scale)
375
- ],
376
- extrapolate: 'clamp'
377
- })
378
- }
379
- ]
380
- };
247
+ return IS_ANDROID
248
+ ? {
249
+ // elevation.data.length - index, // fix zIndex bug visually, but not from a logic point of view
250
+ opacity: animatedValue.interpolate({
251
+ inputRange: [-3, -2, -1, 0, 1],
252
+ outputRange: [
253
+ 0,
254
+ peekingCardsOpacity,
255
+ peekingCardsOpacity,
256
+ 1,
257
+ 0,
258
+ ],
259
+ extrapolate: 'clamp',
260
+ }),
261
+ transform: [
262
+ {
263
+ scale: animatedValue.interpolate({
264
+ inputRange: [-3, -2, -1, 0],
265
+ outputRange: [card3Scale, card2Scale, card1Scale, 1],
266
+ extrapolate: 'clamp',
267
+ }),
268
+ },
269
+ {
270
+ rotate: animatedValue.interpolate({
271
+ inputRange: [0, 1],
272
+ outputRange: ['0deg', '22deg'],
273
+ extrapolate: 'clamp',
274
+ }),
275
+ },
276
+ {
277
+ [mainTranslateProp]: animatedValue.interpolate({
278
+ inputRange: [-3, -2, -1, 0, 1],
279
+ outputRange: [
280
+ getMainTranslateFromScale(-3, card3Scale),
281
+ getMainTranslateFromScale(-2, card2Scale),
282
+ getMainTranslateFromScale(-1, card1Scale),
283
+ 0,
284
+ sizeRef * 1.1,
285
+ ],
286
+ extrapolate: 'clamp',
287
+ }),
288
+ },
289
+ {
290
+ [secondaryTranslateProp]: animatedValue.interpolate({
291
+ inputRange: [-3, -2, -1, 0],
292
+ outputRange: [
293
+ getSecondaryTranslateFromScale(-3, card3Scale),
294
+ getSecondaryTranslateFromScale(-2, card2Scale),
295
+ getSecondaryTranslateFromScale(-1, card1Scale),
296
+ 0,
297
+ ],
298
+ extrapolate: 'clamp',
299
+ }),
300
+ },
301
+ ],
302
+ }
303
+ : {
304
+ zIndex: carouselProps.data.length - index,
305
+ opacity: animatedValue.interpolate({
306
+ inputRange: [-1, 0, 1, 2, 3],
307
+ outputRange: [
308
+ 0,
309
+ 1,
310
+ peekingCardsOpacity,
311
+ peekingCardsOpacity,
312
+ 0,
313
+ ],
314
+ extrapolate: 'clamp',
315
+ }),
316
+ transform: [
317
+ {
318
+ scale: animatedValue.interpolate({
319
+ inputRange: [0, 1, 2, 3],
320
+ outputRange: [1, card1Scale, card2Scale, card3Scale],
321
+ extrapolate: 'clamp',
322
+ }),
323
+ },
324
+ {
325
+ rotate: animatedValue.interpolate({
326
+ inputRange: [-1, 0],
327
+ outputRange: ['-22deg', '0deg'],
328
+ extrapolate: 'clamp',
329
+ }),
330
+ },
331
+ {
332
+ [mainTranslateProp]: animatedValue.interpolate({
333
+ inputRange: [-1, 0, 1, 2, 3],
334
+ outputRange: [
335
+ -sizeRef * 1.1,
336
+ 0,
337
+ getMainTranslateFromScale(1, card1Scale),
338
+ getMainTranslateFromScale(2, card2Scale),
339
+ getMainTranslateFromScale(3, card3Scale),
340
+ ],
341
+ extrapolate: 'clamp',
342
+ }),
343
+ },
344
+ {
345
+ [secondaryTranslateProp]: animatedValue.interpolate({
346
+ inputRange: [0, 1, 2, 3],
347
+ outputRange: [
348
+ 0,
349
+ getSecondaryTranslateFromScale(1, card1Scale),
350
+ getSecondaryTranslateFromScale(2, card2Scale),
351
+ getSecondaryTranslateFromScale(3, card3Scale),
352
+ ],
353
+ extrapolate: 'clamp',
354
+ }),
355
+ },
356
+ ],
357
+ };
381
358
  }
package/pagination/NumberPagination.js DELETED
@@ -1,43 +0,0 @@
1
- import React from 'react';
2
- import { Colors, Radius, Spacing, Text } from '@momo-kits/core-v2';
3
- import { View, StyleSheet } from 'react-native';
4
- import PropTypes from 'prop-types';
5
-
6
- const NumberPagination = (props) => {
7
- const { dataLength, activeIndex, style } = props;
8
-
9
- return (
10
- <View style={style}>
11
- <View style={styles.container}>
12
- <Text.Label1 style={styles.number}>{`${
13
- activeIndex + 1
14
- }/${dataLength}`}</Text.Label1>
15
- </View>
16
- </View>
17
- );
18
- };
19
-
20
- const styles = StyleSheet.create({
21
- container: {
22
- backgroundColor: Colors.black_08,
23
- alignSelf: 'baseline',
24
- paddingHorizontal: Spacing.S,
25
- borderRadius: Radius.M,
26
- },
27
- number: {
28
- color: Colors.black_01,
29
- },
30
- });
31
-
32
- NumberPagination.defaultProps = {
33
- dataLength: 0,
34
- activeIndex: 0,
35
- };
36
-
37
- NumberPagination.propsType = {
38
- dataLength: PropTypes.number,
39
- activeIndex: PropTypes.number,
40
- style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
41
- };
42
-
43
- export default NumberPagination;