From ec586dfcfb2bb56df89902fb64736a0ff52b362f Mon Sep 17 00:00:00 2001 From: Jacob Froman Date: Thu, 18 Jan 2018 14:47:28 -0600 Subject: [PATCH] [react-native-snap-carousel] Update definitions to match v3.x changes (#23005) * Update definitions to match v3.x changes * Correct typo in apparitionDelay * Update required props and ParallaxImage props * Add ParallaxImage example to tests * Refactor ParallaxImage example to be clearer * Correct stray blank line * Remove undefined from optional properties --- types/react-native-snap-carousel/index.d.ts | 116 ++++++++++++++++-- .../react-native-snap-carousel-tests.tsx | 90 ++++++++++---- 2 files changed, 175 insertions(+), 31 deletions(-) diff --git a/types/react-native-snap-carousel/index.d.ts b/types/react-native-snap-carousel/index.d.ts index d0ddc27b76..5bba10bafb 100644 --- a/types/react-native-snap-carousel/index.d.ts +++ b/types/react-native-snap-carousel/index.d.ts @@ -1,6 +1,7 @@ -// Type definitions for react-native-snap-carousel 2.4 +// Type definitions for react-native-snap-carousel 3.5 // Project: https://github.com/archriss/react-native-snap-carousel // Definitions by: jnbt +// Jacob Froman // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.3 @@ -13,12 +14,33 @@ import { StyleProp, ScrollViewProperties, ScrollViewStyle, - ViewStyle + ViewStyle, + ImageProperties, + FlatListProperties } from 'react-native'; -export interface CarouselProps extends React.Props { +export interface AdditionalParallaxProps { + carouselRef?: React.Component>; + itemHeight?: number; + itemWidth?: number; + scrollPosition?: Animated.Value; + sliderHeight?: number; + sliderWidth?: number; + vertical?: boolean; +} + +export interface CarouselProps extends React.Props { // Required + /** + * Array of items to loop over + */ + data: ReadonlyArray; + /** + * Function that takes an item from the `data` array and returns a React + * Element. See `react-native`'s `FlatList` + */ + renderItem(item: { item: T; index: number }, parallaxProps?: AdditionalParallaxProps): React.ReactNode; /** * Width in pixels of your slides, must be the same for all of them * Note: Required with horizontal carousel @@ -46,6 +68,16 @@ export interface CarouselProps extends React.Props { * From slider's center, minimum slide distance to be scrolled before being set to active */ activeSlideOffset?: number; + /** + * Duration of time while component is hidden after mounting. NOTE: May cause rendering + * issues on Android. Defaults to 0 + */ + apparitionDelay?: number; + /** + * Defines a small margin for callbacks firing from scroll events. Increase this value + * if you experience missed callbacks. Defaults to 5 + */ + callbackOffsetMargin?: number; /** * Since 1.5.0, the snapping effect can now be based on momentum instead of when you're * releasing your finger. It means that the component will wait until the ScrollView @@ -60,6 +92,16 @@ export interface CarouselProps extends React.Props { * Index of the first item to display */ firstItem?: number; + /** + * Flag to indicate whether the carousel contains ``. Parallax data + * will not be passed to carousel items if this is false + */ + hasParallaxImages?: boolean; + /** + * Prevent the user from interacting with the carousel while it is snapping. Ignored + * if `enableMomentum` is `true` + */ + lockScrollWhileSnapping?: boolean; /** * When momentum is disabled, this prop defines the timeframe during which multiple * callback calls should be "grouped" into a single one. This debounce also helps @@ -81,11 +123,29 @@ export interface CarouselProps extends React.Props { * Delta x when swiping to trigger the snap */ swipeThreshold?: number; + /** + * Determines whether to use `ScrollView` instead of `FlatList`. May cause + * rendering performance issues due to losing `FlatList`'s performance + * optimizations + */ + useScrollView?: boolean; /* * Layout slides vertically instead of horizontally */ vertical?: boolean; + // Loop + + /** + * Enable infinite loop mode. Does not work if `enableSnap` is `false` + */ + loop?: boolean; + /** + * Number of clones to render at the beginning and end of the list. Default + * is 3 + */ + loopClonesPerSide?: number; + // Autoplay /** @@ -103,6 +163,10 @@ export interface CarouselProps extends React.Props { // Style and animation + /** + * Determine active slide's alignment relative to the carousel + */ + activeSlideAlignment?: 'start' | 'center' | 'end'; /** * Animated animation to use. Provide the name of the method */ @@ -110,7 +174,7 @@ export interface CarouselProps extends React.Props { /** * Animation options to be merged with the default ones. Can be used w/ animationFunc */ - animationOptions?: Animated.DecayAnimationConfig | Animated.TimingAnimationConfig | Animated.SpringAnimationConfig; + customAnimationOptions?: Animated.DecayAnimationConfig | Animated.TimingAnimationConfig | Animated.SpringAnimationConfig; /** * Override container's inner padding (needed for slides's centering). * Warning: be aware that overriding the default value can mess with carousel's behavior. @@ -132,6 +196,11 @@ export interface CarouselProps extends React.Props { * Value of the 'scale' transform applied to inactive slides */ inactiveSlideScale?: number; + /** + * Value of the 'translate' transform applied to inactive slides. Not recommended with + * `customAnimationOptions` + */ + inactiveSlideShift?: number; /** * Optional style for each item's container (the one whose scale and opacity are animated) */ @@ -162,7 +231,7 @@ export interface CarouselProps extends React.Props { onSnapToItem?(slideIndex: number): void; } -export interface CarouselStatic extends React.ComponentClass { +export interface CarouselStatic extends React.ComponentClass> { currentIndex: number; currentScrollPosition: number; startAutoplay(instantly?: boolean): void; @@ -172,7 +241,40 @@ export interface CarouselStatic extends React.ComponentClass { snapToPrev(animated?: boolean): void; } -export type CarouselProperties = ScrollViewProperties & CarouselProps & React.Props; +export type CarouselProperties = ScrollViewProperties & CarouselProps & React.Props>; + +export interface ParallaxImageProps extends ImageProperties, AdditionalParallaxProps { + /** + * Optional style for image's container + */ + containerStyle?: StyleProp; + /** + * On screen dimensions of the image + */ + dimensions?: { width: number; height: number }; + /** + * Duration of fade in when object is loaded. Default of 500 + */ + fadeDuration?: number; + /** + * Speed of parallax effect. A higher value appears more 'zoomed in' + */ + parallaxFactor?: number; + /** + * Whether to display a loading spinner + */ + showSpinner?: boolean; + /** + * Color of the loading spinner if displayed + */ + spinnerColor?: string; +} + +export type ParallaxImageStatic = React.ComponentClass; + +export type ParallaxImageProperties = ParallaxImageProps & React.Props; + +export class ParallaxImage extends React.Component { } export interface PaginationProps { /** @@ -207,4 +309,4 @@ export type PaginationProperties = PaginationProps & React.Props { } -export default class Carousel extends React.Component { } +export default class Carousel extends React.Component> { } diff --git a/types/react-native-snap-carousel/react-native-snap-carousel-tests.tsx b/types/react-native-snap-carousel/react-native-snap-carousel-tests.tsx index 5edbd84389..4af5890ea6 100644 --- a/types/react-native-snap-carousel/react-native-snap-carousel-tests.tsx +++ b/types/react-native-snap-carousel/react-native-snap-carousel-tests.tsx @@ -6,20 +6,29 @@ import { StyleSheet, Text, View, - ViewStyle + ViewStyle, } from 'react-native'; +import Carousel, { Pagination, ParallaxImage, AdditionalParallaxProps, } from 'react-native-snap-carousel'; -import Carousel, { Pagination } from 'react-native-snap-carousel'; +class StringCarousel extends Carousel {} class SnapCarouselTest extends React.Component { + data = ['Item #1', 'Item #2', 'Item #3']; + + renderItem({ item }: { item: string }): React.ReactNode { + return ( + + {item} + + ); + } + render(): React.ReactElement { return ( - - this.renderItem(item)} itemWidth={75} sliderWidth={300} containerCustomStyle={styles.container} @@ -30,14 +39,10 @@ class SnapCarouselTest extends React.Component { onLayout={this.onLayout} scrollEndDragDebounceValue={100} vertical={false} - > - - Item #1 - - - + this.renderItem(item)} itemHeight={75} sliderHeight={300} vertical={true} @@ -65,22 +70,25 @@ class SnapCarouselWithPaginationTest extends React.Component<{}, {activeSlide: n this.state = { activeSlide: 0 }; } + renderItem({ item }: { item: string }): React.ReactNode { + return ( + + {item} + + ); + } + render(): React.ReactElement { return ( - this.renderItem(item)} itemWidth={75} sliderWidth={300} keyboardDismissMode='interactive' onSnapToItem={(index) => this.setState({ activeSlide: index })} - > - - Item #1 - - - Item #2 - - + /> + ); + } + + render(): React.ReactElement { + return ( + + this.renderParallaxItem(item, parallaxProps)} + itemWidth={75} + sliderWidth={300} + containerCustomStyle={styles.container} + /> + + ); + } +} + const styles = StyleSheet.create({ container: { flex: 1 @@ -107,4 +145,8 @@ const styles = StyleSheet.create({ item: { width: 75 } as ViewStyle, + parallaxItem: { + height: 350, + width: 350 + } });