@momo-kits/carousel 0.0.65-beta → 0.0.65-beta.2

package/index.js

@@ -1,6 +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,16 +1,17 @@
 {
-  "name": "@momo-kits/carousel",
-  "version": "0.0.65-beta",
-  "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"
+    "name": "@momo-kits/carousel",
+    "version": "0.0.65-beta.2",
+    "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"
 }

package/pagination/NumberPagination.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Colors, Radius, Spacing, Text } from '@momo-kits/core-v2';
+import { View, StyleSheet } from 'react-native';
+import PropTypes from 'prop-types';
+
+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,
+    },
+});
+
+NumberPagination.defaultProps = {
+    dataLength: 0,
+    activeIndex: 0,
+};
+
+NumberPagination.propsType = {
+    dataLength: PropTypes.number,
+    activeIndex: PropTypes.number,
+    style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+};
+
+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, Radius, Spacing } 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,8 @@ export default class Pagination extends PureComponent {
             inactiveDotScale,
             inactiveDotStyle,
             renderDots,
-            tappableDots
+            tappableDots,
+            type,
         } = this.props;
 
         if (renderDots) {
@@ -78,6 +81,7 @@ export default class Pagination extends PureComponent {
                 inactiveOpacity={inactiveDotOpacity}
                 inactiveScale={inactiveDotScale}
                 inactiveStyle={inactiveDotStyle}
+                type={type}
             />
         );
 
@@ -85,22 +89,33 @@ 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
+            dotsLength,
+            containerStyle,
+            vertical,
+            accessibilityLabel,
+            type,
         } = this.props;
 
         if (!dotsLength || dotsLength < 2) {
@@ -112,9 +127,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 +139,20 @@ export default class Pagination extends PureComponent {
                 pointerEvents="box-none"
                 style={style}
                 accessible={!!accessibilityLabel}
-                accessibilityLabel={accessibilityLabel}
-            >
-                { this.dots }
+                accessibilityLabel={accessibilityLabel}>
+                <View
+                    style={[
+                        {
+                            flexDirection: 'row',
+                            padding: Spacing.XS,
+                            borderRadius: Radius.S,
+                        },
+                        type === 'light'
+                            ? {}
+                            : { backgroundColor: Colors.opacity_02_white_20 },
+                    ]}>
+                    {this.dots}
+                </View>
             </View>
         );
     }
@@ -147,12 +175,14 @@ 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]),
+    type: PropTypes.oneOf(['light', 'dark']),
 };
 
 Pagination.defaultProps = {
     inactiveDotOpacity: 0.5,
     inactiveDotScale: 0.5,
     tappableDots: false,
-    vertical: false
+    vertical: false,
+    type: 'light',
 };

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: !this._shouldAnimateColor
+            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 {
@@ -77,53 +78,59 @@ export default class PaginationDot extends PureComponent {
             inactiveColor,
             inactiveStyle,
             inactiveOpacity,
-            inactiveScale,
             index,
             style,
-            tappable
+            tappable,
+            type,
         } = 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
+            type === 'light'
+                ? animatedColor
+                : { backgroundColor: Colors.black_01 },
         ];
 
-        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>
         );
@@ -131,7 +138,6 @@ 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 = 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,
+    },
 });

package/publish.sh

@@ -21,7 +21,7 @@ rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type
 #npm login
 #publish dist to npm
 cd dist
-npm publish --access=public
+npm publish --tag beta --access=public
 cd ..
 rm -rf dist