@momo-kits/carousel 0.0.62-alpha.22 → 0.0.62-alpha.25

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/carousel",
-    "version": "0.0.62-alpha.22",
+    "version": "0.0.62-alpha.25",
     "private": false,
     "main": "index.js",
     "dependencies": {

package/pagination/Pagination.js

@@ -3,7 +3,7 @@ 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';
+import { Colors, Radius, Spacing } from '@momo-kits/core-v2';
 
 const IS_IOS = Platform.OS === 'ios';
 const IS_RTL = I18nManager.isRTL;
@@ -62,6 +62,7 @@ export default class Pagination extends PureComponent {
             inactiveDotStyle,
             renderDots,
             tappableDots,
+            type,
         } = this.props;
 
         if (renderDots) {
@@ -80,6 +81,7 @@ export default class Pagination extends PureComponent {
                 inactiveOpacity={inactiveDotOpacity}
                 inactiveScale={inactiveDotScale}
                 inactiveStyle={inactiveDotStyle}
+                type={type}
             />
         );
 
@@ -108,8 +110,13 @@ export default class Pagination extends PureComponent {
     }
 
     render() {
-        const { dotsLength, containerStyle, vertical, accessibilityLabel } =
-            this.props;
+        const {
+            dotsLength,
+            containerStyle,
+            vertical,
+            accessibilityLabel,
+            type,
+        } = this.props;
 
         if (!dotsLength || dotsLength < 2) {
             return false;
@@ -133,7 +140,19 @@ export default class Pagination extends PureComponent {
                 style={style}
                 accessible={!!accessibilityLabel}
                 accessibilityLabel={accessibilityLabel}>
-                {this.dots}
+                <View
+                    style={[
+                        {
+                            flexDirection: 'row',
+                            padding: Spacing.XS,
+                            borderRadius: Radius.S,
+                        },
+                        type === 'light'
+                            ? {}
+                            : { backgroundColor: Colors.opacity_02_white_20 },
+                    ]}>
+                    {this.dots}
+                </View>
             </View>
         );
     }
@@ -157,6 +176,7 @@ Pagination.propTypes = {
     accessibilityLabel: PropTypes.string,
     containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
     dotContainerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    type: PropTypes.oneOf(['light', 'dark']),
 };
 
 Pagination.defaultProps = {
@@ -164,4 +184,5 @@ Pagination.defaultProps = {
     inactiveDotScale: 0.5,
     tappableDots: false,
     vertical: false,
+    type: 'light',
 };

package/pagination/PaginationDot.js

@@ -78,10 +78,10 @@ export default class PaginationDot extends PureComponent {
             inactiveColor,
             inactiveStyle,
             inactiveOpacity,
-            inactiveScale,
             index,
             style,
             tappable,
+            type,
         } = this.props;
 
         const animatedStyle = {
@@ -114,7 +114,9 @@ export default class PaginationDot extends PureComponent {
             (!active && inactiveStyle) || {},
             !active && { backgroundColor: Colors.black_10 },
             animatedStyle,
-            animatedColor,
+            type === 'light'
+                ? animatedColor
+                : { backgroundColor: Colors.black_01 },
         ];
 
         const onPress = tappable
@@ -136,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,