@momo-kits/carousel 0.0.62-alpha.34 → 0.0.62-alpha.35

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/index.js +4 -2
  2. package/package.json +14 -15
  3. package/pagination/Pagination.js +34 -64
  4. package/pagination/PaginationDot.js +39 -45
  5. package/pagination/styles.js +6 -6
  6. package/utils/animationsV2.js +207 -230
  7. package/pagination/NumberPagination.js +0 -43
package/index.js CHANGED
@@ -1,5 +1,7 @@
1
+ //import Carousel from './Carousel';
1
2
  import Carousel from './CarouselV2';
2
3
  import Pagination from './pagination/Pagination';
3
- import NumberPagination from './pagination/NumberPagination';
4
4
 
5
- export { Carousel, Pagination, NumberPagination };
5
+ export {
6
+ Carousel, Pagination
7
+ };
package/package.json CHANGED
@@ -1,17 +1,16 @@
1
1
  {
2
- "name": "@momo-kits/carousel",
3
- "version": "0.0.62-alpha.34",
4
- "private": false,
5
- "main": "index.js",
6
- "dependencies": {
7
- "prop-types": "^15.7.2",
8
- "react": "16.9.0"
9
- },
10
- "peerDependencies": {
11
- "react": "16.9.0",
12
- "react-native": ">=0.55",
13
- "@momo-kits/core-v2": ">=0.0.4-beta"
14
- },
15
- "devDependencies": {},
16
- "license": "MoMo"
2
+ "name": "@momo-kits/carousel",
3
+ "version": "0.0.62-alpha.35",
4
+ "private": false,
5
+ "main": "index.js",
6
+ "dependencies": {
7
+ "prop-types": "^15.7.2",
8
+ "react": "16.9.0"
9
+ },
10
+ "peerDependencies": {
11
+ "react": "16.9.0",
12
+ "react-native": ">=0.55"
13
+ },
14
+ "devDependencies": {},
15
+ "license": "MoMo"
17
16
  }
package/pagination/Pagination.js CHANGED
@@ -1,9 +1,10 @@
1
1
  import React, { PureComponent } from 'react';
2
- import { I18nManager, Platform, View } from 'react-native';
2
+ import {
3
+ I18nManager, Platform, View
4
+ } from 'react-native';
3
5
  import PropTypes from 'prop-types';
4
6
  import PaginationDot from './PaginationDot';
5
7
  import styles from './styles';
6
- import { Colors, Radius, Spacing } from '@momo-kits/core-v2';
7
8
 
8
9
  const IS_IOS = Platform.OS === 'ios';
9
10
  const IS_RTL = I18nManager.isRTL;
@@ -13,37 +14,34 @@ export default class Pagination extends PureComponent {
13
14
  super(props);
14
15
 
15
16
  // Warnings
16
- if (
17
- (props.dotColor && !props.inactiveDotColor) ||
18
- (!props.dotColor && props.inactiveDotColor)
19
- ) {
17
+ if ((props.dotColor && !props.inactiveDotColor) || (!props.dotColor && props.inactiveDotColor)) {
20
18
  console.warn(
21
- 'react-native-snap-carousel | Pagination: ' +
22
- 'You need to specify both `dotColor` and `inactiveDotColor`',
19
+ 'react-native-snap-carousel | Pagination: '
20
+ + 'You need to specify both `dotColor` and `inactiveDotColor`'
23
21
  );
24
22
  }
25
- if (
26
- (props.dotElement && !props.inactiveDotElement) ||
27
- (!props.dotElement && props.inactiveDotElement)
28
- ) {
23
+ if ((props.dotElement && !props.inactiveDotElement) || (!props.dotElement && props.inactiveDotElement)) {
29
24
  console.warn(
30
- 'react-native-snap-carousel | Pagination: ' +
31
- 'You need to specify both `dotElement` and `inactiveDotElement`',
25
+ 'react-native-snap-carousel | Pagination: '
26
+ + 'You need to specify both `dotElement` and `inactiveDotElement`'
32
27
  );
33
28
  }
34
29
  if (props.tappableDots && !props.carouselRef) {
35
30
  console.warn(
36
- 'react-native-snap-carousel | Pagination: ' +
37
- 'You must specify prop `carouselRef` when setting `tappableDots` to `true`',
31
+ 'react-native-snap-carousel | Pagination: '
32
+ + 'You must specify prop `carouselRef` when setting `tappableDots` to `true`'
38
33
  );
39
34
  }
40
35
  }
41
36
 
37
+ _needsRTLAdaptations() {
38
+ const { vertical } = this.props;
39
+ return IS_RTL && !IS_IOS && !vertical;
40
+ }
41
+
42
42
  get _activeDotIndex() {
43
43
  const { activeDotIndex, dotsLength } = this.props;
44
- return this._needsRTLAdaptations()
45
- ? dotsLength - activeDotIndex - 1
46
- : activeDotIndex;
44
+ return this._needsRTLAdaptations() ? dotsLength - activeDotIndex - 1 : activeDotIndex;
47
45
  }
48
46
 
49
47
  get dots() {
@@ -61,8 +59,7 @@ export default class Pagination extends PureComponent {
61
59
  inactiveDotScale,
62
60
  inactiveDotStyle,
63
61
  renderDots,
64
- tappableDots,
65
- type,
62
+ tappableDots
66
63
  } = this.props;
67
64
 
68
65
  if (renderDots) {
@@ -81,7 +78,6 @@ export default class Pagination extends PureComponent {
81
78
  inactiveOpacity={inactiveDotOpacity}
82
79
  inactiveScale={inactiveDotScale}
83
80
  inactiveStyle={inactiveDotStyle}
84
- type={type}
85
81
  />
86
82
  );
87
83
 
@@ -89,33 +85,22 @@ export default class Pagination extends PureComponent {
89
85
 
90
86
  for (let i = 0; i < dotsLength; i += 1) {
91
87
  const isActive = i === this._activeDotIndex;
92
- dots.push(
93
- React.cloneElement(
94
- (isActive ? dotElement : inactiveDotElement) || DefaultDot,
95
- {
96
- key: `pagination-dot-${i}`,
97
- active: i === this._activeDotIndex,
98
- index: i,
99
- },
100
- ),
101
- );
88
+ dots.push(React.cloneElement(
89
+ (isActive ? dotElement : inactiveDotElement) || DefaultDot,
90
+ {
91
+ key: `pagination-dot-${i}`,
92
+ active: i === this._activeDotIndex,
93
+ index: i
94
+ }
95
+ ));
102
96
  }
103
97
 
104
98
  return dots;
105
99
  }
106
100
 
107
- _needsRTLAdaptations() {
108
- const { vertical } = this.props;
109
- return IS_RTL && !IS_IOS && !vertical;
110
- }
111
-
112
101
  render() {
113
102
  const {
114
- dotsLength,
115
- containerStyle,
116
- vertical,
117
- accessibilityLabel,
118
- type,
103
+ dotsLength, containerStyle, vertical, accessibilityLabel
119
104
  } = this.props;
120
105
 
121
106
  if (!dotsLength || dotsLength < 2) {
@@ -127,11 +112,9 @@ export default class Pagination extends PureComponent {
127
112
  {
128
113
  flexDirection: vertical
129
114
  ? 'column'
130
- : this._needsRTLAdaptations()
131
- ? 'row-reverse'
132
- : 'row',
115
+ : (this._needsRTLAdaptations() ? 'row-reverse' : 'row')
133
116
  },
134
- containerStyle || {},
117
+ containerStyle || {}
135
118
  ];
136
119
 
137
120
  return (
@@ -139,20 +122,9 @@ export default class Pagination extends PureComponent {
139
122
  pointerEvents="box-none"
140
123
  style={style}
141
124
  accessible={!!accessibilityLabel}
142
- accessibilityLabel={accessibilityLabel}>
143
- <View
144
- style={[
145
- {
146
- flexDirection: 'row',
147
- padding: Spacing.XS,
148
- borderRadius: Radius.S,
149
- },
150
- type === 'light'
151
- ? {}
152
- : { backgroundColor: Colors.opacity_02_white_20 },
153
- ]}>
154
- {this.dots}
155
- </View>
125
+ accessibilityLabel={accessibilityLabel}
126
+ >
127
+ { this.dots }
156
128
  </View>
157
129
  );
158
130
  }
@@ -175,14 +147,12 @@ Pagination.propTypes = {
175
147
  vertical: PropTypes.bool,
176
148
  accessibilityLabel: PropTypes.string,
177
149
  containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
178
- dotContainerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
179
- type: PropTypes.oneOf(['light', 'dark']),
150
+ dotContainerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
180
151
  };
181
152
 
182
153
  Pagination.defaultProps = {
183
154
  inactiveDotOpacity: 0.5,
184
155
  inactiveDotScale: 0.5,
185
156
  tappableDots: false,
186
- vertical: false,
187
- type: 'light',
157
+ vertical: false
188
158
  };
package/pagination/PaginationDot.js CHANGED
@@ -1,8 +1,9 @@
1
1
  import React, { PureComponent } from 'react';
2
- import { Animated, Easing, TouchableOpacity } from 'react-native';
2
+ import {
3
+ Animated, Easing, TouchableOpacity
4
+ } from 'react-native';
3
5
  import PropTypes from 'prop-types';
4
6
  import styles from './styles';
5
- import { Colors } from '@momo-kits/core-v2';
6
7
 
7
8
  export default class PaginationDot extends PureComponent {
8
9
  constructor(props) {
@@ -10,15 +11,10 @@ export default class PaginationDot extends PureComponent {
10
11
  this.state = {
11
12
  animColor: new Animated.Value(0),
12
13
  animOpacity: new Animated.Value(0),
13
- animTransform: new Animated.Value(0),
14
+ animTransform: new Animated.Value(0)
14
15
  };
15
16
  }
16
17
 
17
- get _shouldAnimateColor() {
18
- const { color, inactiveColor } = this.props;
19
- return color && inactiveColor;
20
- }
21
-
22
18
  componentDidMount() {
23
19
  const { active } = this.props;
24
20
  if (active) {
@@ -40,33 +36,36 @@ export default class PaginationDot extends PureComponent {
40
36
  toValue,
41
37
  duration: 250,
42
38
  isInteraction: false,
43
- useNativeDriver: false,
39
+ useNativeDriver: false
44
40
  };
45
41
 
46
42
  const animations = [
47
43
  Animated.timing(animOpacity, {
48
44
  easing: Easing.linear,
49
- ...commonProperties,
45
+ ...commonProperties
50
46
  }),
51
47
  Animated.spring(animTransform, {
52
- // friction: 4,
48
+ friction: 4,
53
49
  tension: 50,
54
- ...commonProperties,
55
- }),
50
+ ...commonProperties
51
+ })
56
52
  ];
57
53
 
58
54
  if (this._shouldAnimateColor) {
59
- animations.push(
60
- Animated.timing(animColor, {
61
- easing: Easing.linear,
62
- ...commonProperties,
63
- }),
64
- );
55
+ animations.push(Animated.timing(animColor, {
56
+ easing: Easing.linear,
57
+ ...commonProperties
58
+ }));
65
59
  }
66
60
 
67
61
  Animated.parallel(animations).start();
68
62
  }
69
63
 
64
+ get _shouldAnimateColor() {
65
+ const { color, inactiveColor } = this.props;
66
+ return color && inactiveColor;
67
+ }
68
+
70
69
  render() {
71
70
  const { animColor, animOpacity, animTransform } = this.state;
72
71
  const {
@@ -78,59 +77,53 @@ export default class PaginationDot extends PureComponent {
78
77
  inactiveColor,
79
78
  inactiveStyle,
80
79
  inactiveOpacity,
80
+ inactiveScale,
81
81
  index,
82
82
  style,
83
- tappable,
84
- type,
83
+ tappable
85
84
  } = this.props;
86
85
 
87
86
  const animatedStyle = {
88
87
  opacity: animOpacity.interpolate({
89
88
  inputRange: [0, 1],
90
- outputRange: [inactiveOpacity, 1],
91
- }),
92
- width: animTransform.interpolate({
93
- inputRange: [0, 1],
94
- outputRange: [4, 12],
89
+ outputRange: [inactiveOpacity, 1]
95
90
  }),
91
+ transform: [{
92
+ scale: animTransform.interpolate({
93
+ inputRange: [0, 1],
94
+ outputRange: [inactiveScale, 1]
95
+ })
96
+ }]
96
97
  };
97
- const animatedColor = this._shouldAnimateColor
98
- ? {
99
- backgroundColor: animColor.interpolate({
100
- inputRange: [0, 1],
101
- outputRange: [inactiveColor, color],
102
- }),
103
- }
104
- : {};
98
+ const animatedColor = this._shouldAnimateColor ? {
99
+ backgroundColor: animColor.interpolate({
100
+ inputRange: [0, 1],
101
+ outputRange: [inactiveColor, color]
102
+ })
103
+ } : {};
105
104
 
106
105
  const dotContainerStyle = [
107
106
  styles.sliderPaginationDotContainer,
108
- containerStyle || {},
107
+ containerStyle || {}
109
108
  ];
110
109
 
111
110
  const dotStyle = [
112
111
  styles.sliderPaginationDot,
113
112
  style || {},
114
113
  (!active && inactiveStyle) || {},
115
- !active && { backgroundColor: Colors.black_10 },
116
114
  animatedStyle,
117
- type === 'light'
118
- ? animatedColor
119
- : { backgroundColor: Colors.black_01 },
115
+ animatedColor
120
116
  ];
121
117
 
122
- const onPress = tappable
123
- ? () =>
124
- carouselRef &&
125
- carouselRef._snapToItem(carouselRef._getPositionIndex(index))
126
- : undefined;
118
+ const onPress = tappable ? () => carouselRef && carouselRef._snapToItem(carouselRef._getPositionIndex(index)) : undefined;
127
119
 
128
120
  return (
129
121
  <TouchableOpacity
130
122
  accessible={false}
131
123
  style={dotContainerStyle}
132
124
  activeOpacity={tappable ? activeOpacity : 1}
133
- onPress={onPress}>
125
+ onPress={onPress}
126
+ >
134
127
  <Animated.View style={dotStyle} />
135
128
  </TouchableOpacity>
136
129
  );
@@ -138,6 +131,7 @@ export default class PaginationDot extends PureComponent {
138
131
  }
139
132
  PaginationDot.propTypes = {
140
133
  inactiveOpacity: PropTypes.number.isRequired,
134
+ inactiveScale: PropTypes.number.isRequired,
141
135
  active: PropTypes.bool,
142
136
  activeOpacity: PropTypes.number,
143
137
  carouselRef: PropTypes.object,
package/pagination/styles.js CHANGED
@@ -1,24 +1,24 @@
1
1
  import { StyleSheet } from 'react-native';
2
- import { Colors, Spacing } from '@momo-kits/core-v2';
3
2
 
4
- const DEFAULT_DOT_SIZE = 4;
5
- const DEFAULT_DOT_COLOR = Colors.pink_03;
3
+ const DEFAULT_DOT_SIZE = 7;
4
+ const DEFAULT_DOT_COLOR = 'rgba(0, 0, 0, 0.75)';
6
5
 
7
6
  export default StyleSheet.create({
8
7
  sliderPagination: {
9
8
  alignItems: 'center',
10
9
  justifyContent: 'center',
11
10
  paddingHorizontal: 20,
11
+ // paddingVertical: 30
12
12
  },
13
13
  sliderPaginationDotContainer: {
14
14
  alignItems: 'center',
15
15
  justifyContent: 'center',
16
- marginHorizontal: Spacing.XS,
16
+ marginHorizontal: 8
17
17
  },
18
18
  sliderPaginationDot: {
19
19
  width: DEFAULT_DOT_SIZE,
20
20
  height: DEFAULT_DOT_SIZE,
21
21
  borderRadius: DEFAULT_DOT_SIZE / 2,
22
- backgroundColor: DEFAULT_DOT_COLOR,
23
- },
22
+ backgroundColor: DEFAULT_DOT_COLOR
23
+ }
24
24
  });
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;