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

package/index.js

@@ -1,5 +1,7 @@
+//import Carousel from './Carousel';
 import Carousel from './CarouselV2';
 import Pagination from './pagination/Pagination';
-import NumberPagination from './pagination/NumberPagination';
 
-export {Carousel, Pagination, NumberPagination};
+export {
+    Carousel, Pagination
+};

package/package.json

@@ -1,17 +1,16 @@
 {
-    "name": "@momo-kits/carousel",
-    "version": "0.0.65-alpha.10",
-    "private": false,
-    "main": "index.js",
-    "dependencies": {
-        "prop-types": "^15.7.2",
-        "react": "16.9.0"
-    },
-    "peerDependencies": {
-        "react": "16.9.0",
-        "react-native": ">=0.55",
-        "@momo-kits/core-v2": ">=0.0.4-beta"
-    },
-    "devDependencies": {},
-    "license": "MoMo"
-}
+  "name": "@momo-kits/carousel",
+  "version": "0.0.65-alpha.12",
+  "private": false,
+  "main": "index.js",
+  "dependencies": {
+    "prop-types": "^15.7.2",
+    "react": "16.9.0"
+  },
+  "peerDependencies": {
+    "react": "16.9.0",
+    "react-native": ">=0.55"
+  },
+  "devDependencies": {},
+  "license": "MoMo"
+}

package/pagination/Pagination.js

@@ -1,9 +1,10 @@
 import React, { PureComponent } from 'react';
-import { I18nManager, Platform, View } from 'react-native';
+import {
+    I18nManager, Platform, View
+} from 'react-native';
 import PropTypes from 'prop-types';
 import PaginationDot from './PaginationDot';
 import styles from './styles';
-import { Colors, Radius, Spacing } from '@momo-kits/core-v2';
 
 const IS_IOS = Platform.OS === 'ios';
 const IS_RTL = I18nManager.isRTL;
@@ -13,37 +14,34 @@ export default class Pagination extends PureComponent {
         super(props);
 
         // Warnings
-        if (
-            (props.dotColor && !props.inactiveDotColor) ||
-            (!props.dotColor && props.inactiveDotColor)
-        ) {
+        if ((props.dotColor && !props.inactiveDotColor) || (!props.dotColor && props.inactiveDotColor)) {
             console.warn(
-                'react-native-snap-carousel | Pagination: ' +
-                    'You need to specify both `dotColor` and `inactiveDotColor`',
+                'react-native-snap-carousel | Pagination: '
+                + 'You need to specify both `dotColor` and `inactiveDotColor`'
             );
         }
-        if (
-            (props.dotElement && !props.inactiveDotElement) ||
-            (!props.dotElement && props.inactiveDotElement)
-        ) {
+        if ((props.dotElement && !props.inactiveDotElement) || (!props.dotElement && props.inactiveDotElement)) {
             console.warn(
-                'react-native-snap-carousel | Pagination: ' +
-                    'You need to specify both `dotElement` and `inactiveDotElement`',
+                'react-native-snap-carousel | Pagination: '
+                + 'You need to specify both `dotElement` and `inactiveDotElement`'
             );
         }
         if (props.tappableDots && !props.carouselRef) {
             console.warn(
-                'react-native-snap-carousel | Pagination: ' +
-                    'You must specify prop `carouselRef` when setting `tappableDots` to `true`',
+                'react-native-snap-carousel | Pagination: '
+                + 'You must specify prop `carouselRef` when setting `tappableDots` to `true`'
             );
         }
     }
 
+    _needsRTLAdaptations() {
+        const { vertical } = this.props;
+        return IS_RTL && !IS_IOS && !vertical;
+    }
+
     get _activeDotIndex() {
         const { activeDotIndex, dotsLength } = this.props;
-        return this._needsRTLAdaptations()
-            ? dotsLength - activeDotIndex - 1
-            : activeDotIndex;
+        return this._needsRTLAdaptations() ? dotsLength - activeDotIndex - 1 : activeDotIndex;
     }
 
     get dots() {
@@ -61,8 +59,7 @@ export default class Pagination extends PureComponent {
             inactiveDotScale,
             inactiveDotStyle,
             renderDots,
-            tappableDots,
-            type,
+            tappableDots
         } = this.props;
 
         if (renderDots) {
@@ -81,7 +78,6 @@ export default class Pagination extends PureComponent {
                 inactiveOpacity={inactiveDotOpacity}
                 inactiveScale={inactiveDotScale}
                 inactiveStyle={inactiveDotStyle}
-                type={type}
             />
         );
 
@@ -89,33 +85,22 @@ export default class Pagination extends PureComponent {
 
         for (let i = 0; i < dotsLength; i += 1) {
             const isActive = i === this._activeDotIndex;
-            dots.push(
-                React.cloneElement(
-                    (isActive ? dotElement : inactiveDotElement) || DefaultDot,
-                    {
-                        key: `pagination-dot-${i}`,
-                        active: i === this._activeDotIndex,
-                        index: i,
-                    },
-                ),
-            );
+            dots.push(React.cloneElement(
+                (isActive ? dotElement : inactiveDotElement) || DefaultDot,
+                {
+                    key: `pagination-dot-${i}`,
+                    active: i === this._activeDotIndex,
+                    index: i
+                }
+            ));
         }
 
         return dots;
     }
 
-    _needsRTLAdaptations() {
-        const { vertical } = this.props;
-        return IS_RTL && !IS_IOS && !vertical;
-    }
-
     render() {
         const {
-            dotsLength,
-            containerStyle,
-            vertical,
-            accessibilityLabel,
-            type,
+            dotsLength, containerStyle, vertical, accessibilityLabel
         } = this.props;
 
         if (!dotsLength || dotsLength < 2) {
@@ -127,11 +112,9 @@ export default class Pagination extends PureComponent {
             {
                 flexDirection: vertical
                     ? 'column'
-                    : this._needsRTLAdaptations()
-                    ? 'row-reverse'
-                    : 'row',
+                    : (this._needsRTLAdaptations() ? 'row-reverse' : 'row')
             },
-            containerStyle || {},
+            containerStyle || {}
         ];
 
         return (
@@ -139,20 +122,9 @@ export default class Pagination extends PureComponent {
                 pointerEvents="box-none"
                 style={style}
                 accessible={!!accessibilityLabel}
-                accessibilityLabel={accessibilityLabel}>
-                <View
-                    style={[
-                        {
-                            flexDirection: 'row',
-                            padding: Spacing.XS,
-                            borderRadius: Radius.S,
-                        },
-                        type === 'light'
-                            ? {}
-                            : { backgroundColor: Colors.opacity_02_white_20 },
-                    ]}>
-                    {this.dots}
-                </View>
+                accessibilityLabel={accessibilityLabel}
+            >
+                { this.dots }
             </View>
         );
     }
@@ -175,14 +147,12 @@ Pagination.propTypes = {
     vertical: PropTypes.bool,
     accessibilityLabel: PropTypes.string,
     containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-    dotContainerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-    type: PropTypes.oneOf(['light', 'dark']),
+    dotContainerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
 };
 
 Pagination.defaultProps = {
     inactiveDotOpacity: 0.5,
     inactiveDotScale: 0.5,
     tappableDots: false,
-    vertical: false,
-    type: 'light',
+    vertical: false
 };

package/pagination/PaginationDot.js

@@ -1,8 +1,9 @@
 import React, { PureComponent } from 'react';
-import { Animated, Easing, TouchableOpacity } from 'react-native';
+import {
+    Animated, Easing, TouchableOpacity
+} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from './styles';
-import { Colors } from '@momo-kits/core-v2';
 
 export default class PaginationDot extends PureComponent {
     constructor(props) {
@@ -10,15 +11,10 @@ export default class PaginationDot extends PureComponent {
         this.state = {
             animColor: new Animated.Value(0),
             animOpacity: new Animated.Value(0),
-            animTransform: new Animated.Value(0),
+            animTransform: new Animated.Value(0)
         };
     }
 
-    get _shouldAnimateColor() {
-        const { color, inactiveColor } = this.props;
-        return color && inactiveColor;
-    }
-
     componentDidMount() {
         const { active } = this.props;
         if (active) {
@@ -40,33 +36,36 @@ export default class PaginationDot extends PureComponent {
             toValue,
             duration: 250,
             isInteraction: false,
-            useNativeDriver: false,
+            useNativeDriver: false
         };
 
         const animations = [
             Animated.timing(animOpacity, {
                 easing: Easing.linear,
-                ...commonProperties,
+                ...commonProperties
             }),
             Animated.spring(animTransform, {
-                // friction: 4,
+                friction: 4,
                 tension: 50,
-                ...commonProperties,
-            }),
+                ...commonProperties
+            })
         ];
 
         if (this._shouldAnimateColor) {
-            animations.push(
-                Animated.timing(animColor, {
-                    easing: Easing.linear,
-                    ...commonProperties,
-                }),
-            );
+            animations.push(Animated.timing(animColor, {
+                easing: Easing.linear,
+                ...commonProperties
+            }));
         }
 
         Animated.parallel(animations).start();
     }
 
+    get _shouldAnimateColor() {
+        const { color, inactiveColor } = this.props;
+        return color && inactiveColor;
+    }
+
     render() {
         const { animColor, animOpacity, animTransform } = this.state;
         const {
@@ -78,59 +77,53 @@ export default class PaginationDot extends PureComponent {
             inactiveColor,
             inactiveStyle,
             inactiveOpacity,
+            inactiveScale,
             index,
             style,
-            tappable,
-            type,
+            tappable
         } = this.props;
 
         const animatedStyle = {
             opacity: animOpacity.interpolate({
                 inputRange: [0, 1],
-                outputRange: [inactiveOpacity, 1],
-            }),
-            width: animTransform.interpolate({
-                inputRange: [0, 1],
-                outputRange: [4, 12],
+                outputRange: [inactiveOpacity, 1]
             }),
+            transform: [{
+                scale: animTransform.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [inactiveScale, 1]
+                })
+            }]
         };
-        const animatedColor = this._shouldAnimateColor
-            ? {
-                  backgroundColor: animColor.interpolate({
-                      inputRange: [0, 1],
-                      outputRange: [inactiveColor, color],
-                  }),
-              }
-            : {};
+        const animatedColor = this._shouldAnimateColor ? {
+            backgroundColor: animColor.interpolate({
+                inputRange: [0, 1],
+                outputRange: [inactiveColor, color]
+            })
+        } : {};
 
         const dotContainerStyle = [
             styles.sliderPaginationDotContainer,
-            containerStyle || {},
+            containerStyle || {}
         ];
 
         const dotStyle = [
             styles.sliderPaginationDot,
             style || {},
             (!active && inactiveStyle) || {},
-            !active && { backgroundColor: Colors.black_10 },
             animatedStyle,
-            type === 'light'
-                ? animatedColor
-                : { backgroundColor: Colors.black_01 },
+            animatedColor
         ];
 
-        const onPress = tappable
-            ? () =>
-                  carouselRef &&
-                  carouselRef._snapToItem(carouselRef._getPositionIndex(index))
-            : undefined;
+        const onPress = tappable ? () => carouselRef && carouselRef._snapToItem(carouselRef._getPositionIndex(index)) : undefined;
 
         return (
             <TouchableOpacity
                 accessible={false}
                 style={dotContainerStyle}
                 activeOpacity={tappable ? activeOpacity : 1}
-                onPress={onPress}>
+                onPress={onPress}
+            >
                 <Animated.View style={dotStyle} />
             </TouchableOpacity>
         );
@@ -138,6 +131,7 @@ export default class PaginationDot extends PureComponent {
 }
 PaginationDot.propTypes = {
     inactiveOpacity: PropTypes.number.isRequired,
+    inactiveScale: PropTypes.number.isRequired,
     active: PropTypes.bool,
     activeOpacity: PropTypes.number,
     carouselRef: PropTypes.object,

package/pagination/styles.js

@@ -1,24 +1,24 @@
 import { StyleSheet } from 'react-native';
-import { Colors, Spacing } from '@momo-kits/core-v2';
 
-const DEFAULT_DOT_SIZE = 4;
-const DEFAULT_DOT_COLOR = Colors.pink_03;
+const DEFAULT_DOT_SIZE = 7;
+const DEFAULT_DOT_COLOR = 'rgba(0, 0, 0, 0.75)';
 
 export default StyleSheet.create({
     sliderPagination: {
         alignItems: 'center',
         justifyContent: 'center',
         paddingHorizontal: 20,
+        //         paddingVertical: 30
     },
     sliderPaginationDotContainer: {
         alignItems: 'center',
         justifyContent: 'center',
-        marginHorizontal: Spacing.XS,
+        marginHorizontal: 8
     },
     sliderPaginationDot: {
         width: DEFAULT_DOT_SIZE,
         height: DEFAULT_DOT_SIZE,
         borderRadius: DEFAULT_DOT_SIZE / 2,
-        backgroundColor: DEFAULT_DOT_COLOR,
-    },
+        backgroundColor: DEFAULT_DOT_COLOR
+    }
 });