Merge pull request #125 from birdwingo/fix/removed-deprecated-props

fix: removed deprecated props
birdwingo · Oct 17, 2024 · cf7728a · cf7728a
2 parents 773c361 + 0ceac70
commit cf7728a
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 63 deletions.
diff --git a/src/components/Avatar/index.tsx b/src/components/Avatar/index.tsx
@@ -15,7 +15,6 @@ const AnimatedImage = Animated.createAnimatedComponent( Image );
 const StoryAvatar: FC<StoryAvatarProps> = ( {
   id,
   avatarSource,
-  imgUrl,
   name,
   stories,
   loadingStory,
@@ -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,

diff --git a/src/components/AvatarList/index.tsx b/src/components/AvatarList/index.tsx
@@ -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}
@@ -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>
   );

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -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,
 } ) => {
 
@@ -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>}

diff --git a/src/components/Image/index.tsx b/src/components/Image/index.tsx
@@ -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 );
 
     }
 
@@ -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"

diff --git a/src/components/InstagramStories/index.tsx b/src/components/InstagramStories/index.tsx
@@ -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,
@@ -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;
 
     } );
 
@@ -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}

diff --git a/src/core/dto/componentsDTO.ts b/src/core/dto/componentsDTO.ts
@@ -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;
 }
@@ -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;

diff --git a/src/core/dto/instagramStoriesDTO.ts b/src/core/dto/instagramStoriesDTO.ts
@@ -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;
@@ -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;
@@ -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;

diff --git a/tests/index.test.js b/tests/index.test.js
@@ -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',
   } ],
 } ];
@@ -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' },
         } ],
       } ] );
 
@@ -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();
@@ -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: [],
     } ]} /> );
 
@@ -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"