vhad/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/gosticks/DefinitelyTyped.git synced 2025-10-16 12:05:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[react-native-snap-carousel] Update definitions to match v3.x changes (#23005)

Browse Source 
* 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
This commit is contained in:
Jacob Froman 2018-01-18 14:47:28 -06:00 committed by Wesley Wigham
parent a72670d7f8
commit ec586dfcfb
2 changed files with 175 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
types/react-native-snap-carousel/index.d.ts vendored
View File

@ -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 <https://github.com/jnbt>
// Jacob Froman <https://github.com/j-fro>
// 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<ScrollViewProperties> {
export interface AdditionalParallaxProps {
carouselRef?: React.Component<FlatListProperties<any>>;
itemHeight?: number;
itemWidth?: number;
scrollPosition?: Animated.Value;
sliderHeight?: number;
sliderWidth?: number;
vertical?: boolean;
}
export interface CarouselProps<T> extends React.Props<ScrollViewProperties> {
// Required
/**
* Array of items to loop over
*/
data: ReadonlyArray<T>;
/**
* 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<ScrollViewProperties> {
* 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<ScrollViewProperties> {
* Index of the first item to display
*/
firstItem?: number;
/**
* Flag to indicate whether the carousel contains `<ParallaxImage />`. 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<ScrollViewProperties> {
* 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<ScrollViewProperties> {
// 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<ScrollViewProperties> {
/**
* 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<ScrollViewProperties> {
* 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<ScrollViewProperties> {
onSnapToItem?(slideIndex: number): void;
}
export interface CarouselStatic extends React.ComponentClass<CarouselProps> {
export interface CarouselStatic<T> extends React.ComponentClass<CarouselProps<T>> {
currentIndex: number;
currentScrollPosition: number;
startAutoplay(instantly?: boolean): void;
@ -172,7 +241,40 @@ export interface CarouselStatic extends React.ComponentClass<CarouselProps> {
snapToPrev(animated?: boolean): void;
}
export type CarouselProperties = ScrollViewProperties & CarouselProps & React.Props<CarouselStatic>;
export type CarouselProperties<T> = ScrollViewProperties & CarouselProps<T> & React.Props<CarouselStatic<T>>;
export interface ParallaxImageProps extends ImageProperties, AdditionalParallaxProps {
/**
* Optional style for image's container
*/
containerStyle?: StyleProp<ViewStyle>;
/**
* 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<ParallaxImageProps>;
export type ParallaxImageProperties = ParallaxImageProps & React.Props<ParallaxImageStatic>;
export class ParallaxImage extends React.Component<ParallaxImageProperties> { }
export interface PaginationProps {
/**
@ -207,4 +309,4 @@ export type PaginationProperties = PaginationProps & React.Props<PaginationStati
export class Pagination extends React.Component<PaginationProperties> { }
export default class Carousel extends React.Component<CarouselProperties> { }
export default class Carousel<T> extends React.Component<CarouselProperties<T>> { }

90
types/react-native-snap-carousel/react-native-snap-carousel-tests.tsx
View File

@ -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<string> {}
class SnapCarouselTest extends React.Component {
data = ['Item #1', 'Item #2', 'Item #3'];
renderItem({ item }: { item: string }): React.ReactNode {
return (
<View style={styles.item}>
<Text>{item}</Text>
</View>
);
}
render(): React.ReactElement<any> {
return (
<View>
<Carousel
itemWidth={75}
sliderWidth={300}
/>
<Carousel
<StringCarousel
data={this.data}
renderItem={item => 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}
>
<View
style={styles.item}
>
<Text>Item #1</Text>
</View>
</Carousel>
<Carousel
/>
<StringCarousel
data={this.data}
renderItem={item => 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 (
<View style={styles.item}>
<Text>{item}</Text>
</View>
);
}
render(): React.ReactElement<any> {
return (
<View>
<Carousel
<StringCarousel
data={['Item #1', 'Item #2']}
renderItem={item => this.renderItem(item)}
itemWidth={75}
sliderWidth={300}
keyboardDismissMode='interactive'
onSnapToItem={(index) => this.setState({ activeSlide: index })}
>
<View>
<Text>Item #1</Text>
</View>
<View>
<Text>Item #2</Text>
</View>
</Carousel>
/>
<Pagination
dotsLength={2}
activeDotIndex={this.state.activeSlide}
@ -100,6 +108,36 @@ class SnapCarouselWithPaginationTest extends React.Component<{}, {activeSlide: n
}
}
class SnapCarouselWithParallaxTest extends React.Component {
data = ['Item #1', 'Item #2', 'Item #3'];
renderParallaxItem({ item }: { item: string }, parallaxProps?: AdditionalParallaxProps): React.ReactNode {
return (
<ParallaxImage
source={{ uri: 'http://via.placeholder.com/350x150' }}
containerStyle={styles.parallaxItem}
parallaxFactor={0.5}
showSpinner={true}
{...parallaxProps}
/>
);
}
render(): React.ReactElement<any> {
return (
<View>
<StringCarousel
data={this.data}
renderItem={(item, parallaxProps) => this.renderParallaxItem(item, parallaxProps)}
itemWidth={75}
sliderWidth={300}
containerCustomStyle={styles.container}
/>
</View>
);
}
}
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
}
});