@momo-kits/carousel 0.80.8-beta.9 → 0.81.2

package/index.tsx

@@ -8,8 +8,9 @@ import {
   NativeSyntheticEvent,
   Platform,
   View,
+  ViewStyle,
 } from 'react-native';
-import {defaultAnimatedStyles, defaultScrollInterpolator} from './animation';
+import {defaultScrollInterpolator} from './animation';
 import {CarouselProps, CarouselRef, CarouselState, Position} from './types';
 import {scaleSize, Spacing} from '@momo-kits/foundation';
 
@@ -44,6 +45,7 @@ export default class Carousel extends React.PureComponent<
     disableIntervalMomentum: IS_ANDROID,
     useExperimentalSnap: IS_ANDROID,
     visibleItem: 1,
+    full: false,
   };
 
   _activeItem;
@@ -346,7 +348,8 @@ export default class Carousel extends React.PureComponent<
 
   _getItemMainDimension() {
     const {itemWidth} = this.state;
-    return itemWidth + Spacing.S;
+    const {full} = this.props;
+    return full ? itemWidth : itemWidth + Spacing.S;
   }
 
   _getItemScrollOffset(index: number) {
@@ -569,15 +572,20 @@ export default class Carousel extends React.PureComponent<
       this._onLayoutInitDone = true;
     }
     const containerWidth = event.nativeEvent.layout.width;
-    const itemWidth =
-      this.props.itemWidth ||
-      (this.props.visibleItem === 1
+    let itemWidth =
+      this.props.visibleItem === 1
         ? screenWidth - Spacing.M * 2
         : Math.ceil(
             scaleSize(
               (containerWidth * 0.9 - visibleItem * Spacing.S) / visibleItem,
             ),
-          ));
+          );
+    if (this.props.itemWidth) {
+      itemWidth = this.props.itemWidth;
+    }
+    if (this.props.full) {
+      itemWidth = containerWidth;
+    }
 
     this.setState({containerWidth, itemWidth});
 
@@ -640,7 +648,7 @@ export default class Carousel extends React.PureComponent<
   _renderItem(info: {item: any; index: number}) {
     const {item, index} = info;
     const {interpolators, itemWidth} = this.state;
-    const {slideStyle} = this.props;
+    const {slideStyle, full} = this.props;
     const animatedValue = interpolators && interpolators[index];
 
     if (typeof animatedValue === 'undefined') {
@@ -649,12 +657,20 @@ export default class Carousel extends React.PureComponent<
 
     const animate = this._shouldAnimateSlides();
     const Component = animate ? Animated.View : View;
-    // const animatedStyle = animate
-    //   ? this._getSlideInterpolatedStyle(index, animatedValue)
-    //   : {};
-
     const mainDimension = {width: itemWidth};
 
+    let spacingStyle: ViewStyle = this.props.loop
+      ? {marginLeft: Spacing.S}
+      : {
+          marginLeft: index === 0 ? Spacing.M : 0,
+          marginRight:
+            index === this._getCustomDataLength() - 1 ? Spacing.M : Spacing.S,
+        };
+
+    if (full) {
+      spacingStyle = {};
+    }
+
     return (
       <Component
         style={[
@@ -662,15 +678,7 @@ export default class Carousel extends React.PureComponent<
           slideStyle,
           // animatedStyle,
           {overflow: 'hidden'},
-          this.props.loop
-            ? {marginLeft: Spacing.S}
-            : {
-                marginLeft: index === 0 ? Spacing.M : 0,
-                marginRight:
-                  index === this._getCustomDataLength() - 1
-                    ? Spacing.M
-                    : Spacing.S,
-              },
+          spacingStyle,
         ]}
         pointerEvents="box-none">
         {this.props.renderItem({

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/carousel",
-    "version": "0.80.8-beta.9",
+    "version": "0.81.2",
     "private": false,
     "main": "index.tsx",
     "peerDependencies": {

package/types.ts

@@ -34,6 +34,7 @@ export type CarouselProps = {
   ) => {length: number; offset: number; index: number};
   style?: ViewStyle;
   visibleItem?: number;
+  full?: boolean;
 };
 
 export type CarouselRef = {