@momo-kits/carousel 0.0.62-alpha.16 → 0.0.62-alpha.17

package/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/carousel",
-    "version": "0.0.62-alpha.16",
+    "version": "0.0.62-alpha.17",
     "private": false,
     "main": "index.js",
     "dependencies": {
@@ -9,7 +9,8 @@
     },
     "peerDependencies": {
         "react": "16.9.0",
-        "react-native": ">=0.55"
+        "react-native": ">=0.55",
+        "@momo-kits/core-v2": ">=0.0.4-beta"
     },
     "devDependencies": {},
     "license": "MoMo"

package/pagination/NumberPagination.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Colors, Radius, Spacing, Text } from '@momo-kits/core-v2';
+import { View, StyleSheet } from 'react-native';
+
+const NumberPagination = (props) => {
+    const { dataLength, activeIndex, style } = props;
+
+    return (
+        <View style={style}>
+            <View style={styles.container}>
+                <Text.Label1 style={styles.number}>{`${
+                    activeIndex + 1
+                }/${dataLength}`}</Text.Label1>
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: Colors.black_08,
+        alignSelf: 'baseline',
+        paddingHorizontal: Spacing.S,
+        borderRadius: Radius.M,
+    },
+    number: {
+        color: Colors.black_01,
+    },
+});
+
+export default NumberPagination;

package/pagination/Pagination.js

@@ -1,10 +1,9 @@
 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 } from '@momo-kits/core-v2';
 
 const IS_IOS = Platform.OS === 'ios';
 const IS_RTL = I18nManager.isRTL;
@@ -14,34 +13,37 @@ 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() {
@@ -59,7 +61,7 @@ export default class Pagination extends PureComponent {
             inactiveDotScale,
             inactiveDotStyle,
             renderDots,
-            tappableDots
+            tappableDots,
         } = this.props;
 
         if (renderDots) {
@@ -85,23 +87,29 @@ 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
-        } = this.props;
+        const { dotsLength, containerStyle, vertical, accessibilityLabel } =
+            this.props;
 
         if (!dotsLength || dotsLength < 2) {
             return false;
@@ -112,9 +120,11 @@ export default class Pagination extends PureComponent {
             {
                 flexDirection: vertical
                     ? 'column'
-                    : (this._needsRTLAdaptations() ? 'row-reverse' : 'row')
+                    : this._needsRTLAdaptations()
+                    ? 'row-reverse'
+                    : 'row',
             },
-            containerStyle || {}
+            containerStyle || {},
         ];
 
         return (
@@ -122,9 +132,8 @@ export default class Pagination extends PureComponent {
                 pointerEvents="box-none"
                 style={style}
                 accessible={!!accessibilityLabel}
-                accessibilityLabel={accessibilityLabel}
-            >
-                { this.dots }
+                accessibilityLabel={accessibilityLabel}>
+                {this.dots}
             </View>
         );
     }
@@ -147,12 +156,12 @@ Pagination.propTypes = {
     vertical: PropTypes.bool,
     accessibilityLabel: PropTypes.string,
     containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-    dotContainerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
+    dotContainerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
 };
 
 Pagination.defaultProps = {
     inactiveDotOpacity: 0.5,
     inactiveDotScale: 0.5,
     tappableDots: false,
-    vertical: false
+    vertical: false,
 };

package/pagination/PaginationDot.js

@@ -1,9 +1,8 @@
 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) {
@@ -11,10 +10,15 @@ 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) {
@@ -36,36 +40,33 @@ 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 {
@@ -80,50 +81,54 @@ export default class PaginationDot extends PureComponent {
             inactiveScale,
             index,
             style,
-            tappable
+            tappable,
         } = this.props;
 
         const animatedStyle = {
             opacity: animOpacity.interpolate({
                 inputRange: [0, 1],
-                outputRange: [inactiveOpacity, 1]
+                outputRange: [inactiveOpacity, 1],
             }),
-            transform: [{
-                scale: animTransform.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [inactiveScale, 1]
-                })
-            }]
-        };
-        const animatedColor = this._shouldAnimateColor ? {
-            backgroundColor: animColor.interpolate({
+            width: animTransform.interpolate({
                 inputRange: [0, 1],
-                outputRange: [inactiveColor, color]
-            })
-        } : {};
+                outputRange: [4, 12],
+            }),
+        };
+        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,
-            animatedColor
+            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>
         );

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 = 7;
-const DEFAULT_DOT_COLOR = 'rgba(0, 0, 0, 0.75)';
+const DEFAULT_DOT_SIZE = 4;
+const DEFAULT_DOT_COLOR = Colors.pink_03;
 
 export default StyleSheet.create({
     sliderPagination: {
         alignItems: 'center',
         justifyContent: 'center',
         paddingHorizontal: 20,
-        //         paddingVertical: 30
     },
     sliderPaginationDotContainer: {
         alignItems: 'center',
         justifyContent: 'center',
-        marginHorizontal: 8
+        marginHorizontal: Spacing.XS,
     },
     sliderPaginationDot: {
         width: DEFAULT_DOT_SIZE,
         height: DEFAULT_DOT_SIZE,
         borderRadius: DEFAULT_DOT_SIZE / 2,
-        backgroundColor: DEFAULT_DOT_COLOR
-    }
+        backgroundColor: DEFAULT_DOT_COLOR,
+    },
 });