Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: removed deprecated props #125

Merged
merged 1 commit into from
Oct 17, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions src/components/Avatar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ const AnimatedImage = Animated.createAnimatedComponent( Image );
const StoryAvatar: FC<StoryAvatarProps> = ( {
id,
avatarSource,
imgUrl,
name,
stories,
loadingStory,
Expand Down Expand Up @@ -53,7 +52,7 @@ const StoryAvatar: FC<StoryAvatarProps> = ( {
<TouchableOpacity activeOpacity={0.6} onPress={onPress} testID={`${id}StoryAvatar${stories.length}Story`}>
<Loader loading={isLoading} color={loaderColor} size={size + AVATAR_OFFSET * 2} />
<AnimatedImage
source={avatarSource ?? { uri: imgUrl }}
source={avatarSource}
style={[
AvatarStyles.avatar,
imageAnimatedStyles,
Expand Down
9 changes: 4 additions & 5 deletions src/components/AvatarList/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,12 @@ try {

const StoryAvatarList: FC<StoryAvatarListProps> = ( {
stories, loadingStory, seenStories, colors, seenColors, size,
showName, nameTextStyle, nameTextProps, listContainerProps, listContainerStyle,
showName, nameTextStyle, nameTextProps,
avatarListContainerProps, avatarListContainerStyle, onPress,
} ) => {

const renderItem = ( story: InstagramStoryProps ) => story.renderAvatar?.()
?? ( ( story.avatarSource || story.imgUrl ) && (
?? ( story.avatarSource && (
<StoryAvatar
{...story}
loadingStory={loadingStory}
Expand All @@ -45,20 +45,19 @@ const StoryAvatarList: FC<StoryAvatarListProps> = ( {
return (
<FlashList
horizontal
{...listContainerProps}
{...avatarListContainerProps}
data={stories}
renderItem={( { item } : { item: InstagramStoryProps } ) => renderItem( item )}
keyExtractor={( item: InstagramStoryProps ) => item.id}
contentContainerStyle={[ listContainerStyle, avatarListContainerStyle ]}
contentContainerStyle={avatarListContainerStyle}
testID="storiesList"
/>
);

}

return (
<ScrollView horizontal {...listContainerProps} {...avatarListContainerProps} contentContainerStyle={[ listContainerStyle, avatarListContainerStyle ]} testID="storiesList">
<ScrollView horizontal {...avatarListContainerProps} contentContainerStyle={avatarListContainerStyle} testID="storiesList">
{stories.map( renderItem )}
</ScrollView>
);
Expand Down
6 changes: 3 additions & 3 deletions src/components/Header/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { StoryHeaderProps } from '../../core/dto/componentsDTO';
import Close from '../Icon/close';

const StoryHeader: FC<StoryHeaderProps> = ( {
avatarSource, imgUrl, name, onClose, avatarSize, textStyle, closeColor, headerStyle,
avatarSource, name, onClose, avatarSize, textStyle, closeColor, headerStyle,
headerContainerStyle, renderStoryHeader, onStoryHeaderPress,
} ) => {

Expand All @@ -35,9 +35,9 @@ const StoryHeader: FC<StoryHeaderProps> = ( {
]}
>
<Pressable style={[ HeaderStyles.left, headerStyle ]} onPress={() => onStoryHeaderPress?.()}>
{( Boolean( avatarSource ) || Boolean( imgUrl ) ) && (
{( Boolean( avatarSource ) ) && (
<View style={[ HeaderStyles.avatar, { borderRadius: styles.borderRadius } ]}>
<Image source={avatarSource ?? { uri: imgUrl }} style={styles} />
<Image source={avatarSource!} style={styles} />
</View>
)}
{Boolean( name ) && <Text style={textStyle}>{name}</Text>}
Expand Down
10 changes: 5 additions & 5 deletions src/components/Image/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,9 @@ const StoryImage: FC<StoryImageProps> = ( {

const nextStory = stories[stories.indexOf( story ) + 1];

if ( nextStory && nextStory.mediaType !== 'video' && ( ( nextStory.source as any )?.uri || nextStory.sourceUrl ) ) {
if ( nextStory && nextStory.mediaType !== 'video' && ( nextStory.source as any )?.uri ) {

Image.prefetch( ( nextStory.source as any )?.uri ?? nextStory.sourceUrl );
Image.prefetch( ( nextStory.source as any )?.uri );

}

Expand Down Expand Up @@ -98,19 +98,19 @@ const StoryImage: FC<StoryImageProps> = ( {
<Loader loading={loading} color={color} size={50} />
</View>
<View style={[ ImageStyles.image, mediaContainerStyle ]}>
{( data.data?.source || data.data?.sourceUrl ) && (
{data.data?.source && (
data.isVideo ? (
<StoryVideo
onLoad={onContentLoad}
onLayout={onImageLayout}
source={data.data.source ?? { uri: data.data.sourceUrl }}
source={data.data.source}
paused={isPaused}
isActive={isActive}
{...videoProps}
/>
) : (
<Image
source={data.data.source ?? { uri: data.data.sourceUrl }}
source={data.data.source}
style={[ { width: WIDTH, aspectRatio: 0.5626 }, imageStyles ]}
resizeMode="contain"
testID="storyImageComponent"
Expand Down
6 changes: 1 addition & 5 deletions src/components/InstagramStories/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,7 @@ const InstagramStories = forwardRef<InstagramStoriesPublicMethods, InstagramStor
avatarSeenBorderColors = SEEN_LOADER_COLORS,
avatarSize = AVATAR_SIZE,
storyAvatarSize = STORY_AVATAR_SIZE,
listContainerStyle,
avatarListContainerStyle,
listContainerProps,
avatarListContainerProps,
animationDuration = ANIMATION_DURATION,
backgroundColor = BACKGROUND_COLOR,
Expand Down Expand Up @@ -81,7 +79,7 @@ const InstagramStories = forwardRef<InstagramStoriesPublicMethods, InstagramStor

}

return seenStory.mediaType !== 'video' ? Image.prefetch( ( seenStory.source as any )?.uri ?? seenStory.sourceUrl ) : true;
return seenStory.mediaType !== 'video' ? Image.prefetch( ( seenStory.source as any )?.uri ) : true;

} );

Expand Down Expand Up @@ -238,8 +236,6 @@ const InstagramStories = forwardRef<InstagramStoriesPublicMethods, InstagramStor
showName={showName}
nameTextStyle={nameTextStyle}
nameTextProps={nameTextProps}
listContainerProps={listContainerProps}
listContainerStyle={listContainerStyle}
avatarListContainerProps={avatarListContainerProps}
avatarListContainerStyle={avatarListContainerStyle}
onPress={onPress}
Expand Down
5 changes: 1 addition & 4 deletions src/core/dto/componentsDTO.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,7 @@ export interface StoryAvatarListProps {
showName: InstagramStoriesProps['showName'];
nameTextStyle: InstagramStoriesProps['nameTextStyle'];
nameTextProps: InstagramStoriesProps['nameTextProps'];
listContainerStyle: InstagramStoriesProps['listContainerStyle'];
avatarListContainerStyle: InstagramStoriesProps['avatarListContainerStyle'];
listContainerProps: InstagramStoriesProps['listContainerProps'];
avatarListContainerProps: InstagramStoriesProps['avatarListContainerProps'];
onPress: ( id: string ) => void;
}
Expand Down Expand Up @@ -131,8 +129,7 @@ export interface StoryProgressItemProps extends Omit<StoryProgressProps, 'length
}

export interface StoryHeaderProps {
avatarSource?: ImageProps['source'];
imgUrl?: string;
avatarSource: ImageProps['source'];
name?: string;
avatarSize: number;
textStyle?: TextStyle;
Expand Down
18 changes: 1 addition & 17 deletions src/core/dto/instagramStoriesDTO.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,6 @@ import { FlashListProps } from '@shopify/flash-list';

export interface StoryItemProps {
id: string;
/**
* @deprecated Use {@link source} instead (set source to {uri: 'your url'}).
*/
sourceUrl?: string;
source: ImageProps['source'];
mediaType?: 'image' | 'video';
animationDuration?: number;
Expand All @@ -21,11 +17,7 @@ export interface StoryItemProps {

export interface InstagramStoryProps {
id: string;
/**
* @deprecated Use {@link avatarSource} instead (set avatarSource to {uri: 'your url'}).
*/
imgUrl?: string;
avatarSource?: ImageProps['source'];
avatarSource: ImageProps['source'];
renderAvatar?: () => ReactNode;
renderStoryHeader?: () => ReactNode;
onStoryHeaderPress?: () => void;
Expand All @@ -40,15 +32,7 @@ export interface InstagramStoriesProps {
avatarSeenBorderColors?: string[];
avatarSize?: number;
storyAvatarSize?: number;
/**
* @deprecated Use {@link avatarListContainerStyle} instead.
*/
listContainerStyle?: ScrollViewProps['contentContainerStyle'];
avatarListContainerStyle?: ScrollViewProps['contentContainerStyle'];
/**
* @deprecated Use {@link avatarListContainerProps} instead.
*/
listContainerProps?: ScrollViewProps | Partial<FlashListProps<InstagramStoryProps>>;
avatarListContainerProps?: ScrollViewProps | Partial<FlashListProps<InstagramStoryProps>>;
containerStyle?: ViewStyle;
textStyle?: TextStyle;
Expand Down
44 changes: 22 additions & 22 deletions tests/index.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,61 +31,61 @@ jest.spyOn( Storage, 'setProgressStorage' ).mockImplementation( () => ( {} ) );
const stories = [ {
id: '1',
name: 'John Doe',
avatarSource: 'https://picsum.photos/200/300',
avatarSource: { uri: 'https://picsum.photos/200/300' },
stories: [ {
id: '1',
sourceUrl: 'https://picsum.photos/200/300',
source: { uri: 'https://picsum.photos/200/300' },
renderContent: () => <View />,
} ],
} ];

const stories2 = [ {
id: '1',
name: 'John Doe',
imgUrl: 'https://picsum.photos/200/300',
avatarSource: { uri: 'https://picsum.photos/200/300' },
stories: [ {
id: '1',
sourceUrl: 'https://picsum.photos/200/300',
source: { uri: 'https://picsum.photos/200/300' },
} ],
}, {
id: '2',
name: 'John Doe 2',
imgUrl: 'https://picsum.photos/200/300',
avatarSource: { uri: 'https://picsum.photos/200/300' },
stories: [ {
id: '1',
sourceUrl: 'https://picsum.photos/200/300',
source: { uri: 'https://picsum.photos/200/300' },
} ],
} ];

const stories3 = [ {
id: '1',
name: 'John Doe',
imgUrl: 'https://picsum.photos/200/300',
avatarSource: { uri: 'https://picsum.photos/200/300' },
stories: [ {
id: '1',
sourceUrl: 'https://picsum.photos/200/300',
source: { uri: 'https://picsum.photos/200/300' },
}, {
id: '2',
sourceUrl: 'https://picsum.photos/200/300',
source: { uri: 'https://picsum.photos/200/300' },
} ],
} ];

const stories4 = [ {
id: '1',
name: 'John Doe',
imgUrl: 'https://picsum.photos/200/300',
avatarSource: { uri: 'https://picsum.photos/200/300' },
stories: [ {
id: '1',
sourceUrl: 'https://picsum.photos/200/300',
source: { uri: 'https://picsum.photos/200/300' },
mediaType: 'video',
} ],
}, {
id: '2',
name: 'John Doe 2',
imgUrl: 'https://picsum.photos/200/300',
avatarSource: { uri: 'https://picsum.photos/200/300' },
stories: [ {
id: '1',
sourceUrl: 'https://picsum.photos/200/300',
source: { uri: 'https://picsum.photos/200/300' },
mediaType: 'video',
} ],
} ];
Expand Down Expand Up @@ -214,10 +214,10 @@ describe( 'Instagram Stories test', () => {
ref.current.spliceStories( [ {
id: '2',
name: 'John Doe 2',
imgUrl: 'https://picsum.photos/200/300',
avatarSource: { uri: 'https://picsum.photos/200/300' },
stories: [ {
id: '1',
sourceUrl: 'https://picsum.photos/200/300',
source: { uri: 'https://picsum.photos/200/300' },
} ],
} ] );

Expand All @@ -226,30 +226,30 @@ describe( 'Instagram Stories test', () => {
ref.current.spliceStories( [ {
id: '3',
name: 'John Doe 3',
imgUrl: 'https://picsum.photos/200/300',
avatarSource: { uri: 'https://picsum.photos/200/300' },
stories: [ {
id: '1',
sourceUrl: 'https://picsum.photos/200/300',
source: { uri: 'https://picsum.photos/200/300' },
} ],
} ], -1 );

await sleep();

ref.current.spliceUserStories( [ {
id: '2',
sourceUrl: 'https://picsum.photos/200/300',
source: { uri: 'https://picsum.photos/200/300' },
} ], '1' );

await sleep();

ref.current.spliceUserStories( [ {
id: '2',
sourceUrl: 'https://picsum.photos/200/300',
source: { uri: 'https://picsum.photos/200/300' },
} ], '2', 2 );

ref.current.spliceUserStories( [ {
id: '2',
sourceUrl: 'https://picsum.photos/200/300',
source: { uri: 'https://picsum.photos/200/300' },
} ], '20', 2 );

await sleep();
Expand Down Expand Up @@ -462,7 +462,7 @@ describe( 'Instagram Stories test', () => {
render( <InstagramStories stories={[ {
id: '1',
name: 'John Doe',
imgUrl: 'https://picsum.photos/200/300',
avatarSource: { uri: 'https://picsum.photos/200/300' },
stories: [],
} ]} /> );

Expand Down Expand Up @@ -530,7 +530,7 @@ describe( 'Story Image test', () => {
const onLoad = jest.fn();

render( <StoryImage
stories={[ { id: '1', sourceUrl: '' } ]}
stories={[ { id: '1', source: { uri: '' } } ]}
active={{ value: true }}
activeStory={{ value: '1' }}
defaultImage="url"
Expand Down
Loading