@amityco/react-native-social-uikit 4.0.0-42bcb43.0 → 4.0.0-8da9962.0

package/src/v4/PublicApi/Components/AmityCommunityProfileTabComponent/AmityCommunityProfileTabComponent.tsx

@@ -28,107 +28,107 @@ const AmityCommunityProfileTabComponent: FC<
   currentTab,
   onTabChange,
 }) => {
-    const elementId = ElementID.community_profile_tab;
+  const elementId = ElementID.community_profile_tab;
 
-    const { themeStyles, accessibilityId } = useAmityElement({
-      pageId,
-      componentId,
-      elementId,
-    });
+  const { themeStyles, accessibilityId } = useAmityElement({
+    pageId,
+    componentId,
+    elementId,
+  });
 
-    const styles = StyleSheet.create({
-      container: {
-        backgroundColor: themeStyles?.colors.background,
-        flexDirection: 'row',
-        width: '100%',
-        paddingHorizontal: 16,
-        justifyContent: 'space-between',
-        borderBottomColor: themeStyles?.colors.baseShade4,
-        borderBottomWidth: 1,
-      },
-    });
+  const styles = StyleSheet.create({
+    container: {
+      backgroundColor: themeStyles?.colors.background,
+      flexDirection: 'row',
+      width: '100%',
+      paddingHorizontal: 16,
+      justifyContent: 'space-between',
+      borderBottomColor: themeStyles?.colors.baseShade4,
+      borderBottomWidth: 1,
+    },
+  });
 
-    const getActiveColor = useCallback(
-      (isActive: boolean) => {
-        return isActive
-          ? themeStyles?.colors.base
-          : themeStyles?.colors.baseShade2;
-      },
-      [themeStyles]
-    );
+  const getActiveColor = useCallback(
+    (isActive: boolean) => {
+      return isActive
+        ? themeStyles?.colors.base
+        : themeStyles?.colors.baseShade2;
+    },
+    [themeStyles]
+  );
 
-    return (
-      <View
-        style={styles.container}
-        testID={accessibilityId}
-        accessibilityLabel={accessibilityId}
+  return (
+    <View
+      style={styles.container}
+      testID={accessibilityId}
+      accessibilityLabel={accessibilityId}
+    >
+      <Pressable
+        onPress={() => onTabChange(CommunityProfileTab.community_feed)}
       >
-        <Pressable
-          onPress={() => onTabChange(CommunityProfileTab.community_feed)}
-        >
-          <IconTab
-            themeStyles={themeStyles}
-            icon={
-              <SvgXml
-                xml={feed(
-                  getActiveColor(
-                    currentTab === CommunityProfileTab.community_feed
-                  )
-                )}
-              />
-            }
-            isActive={currentTab === CommunityProfileTab.community_feed}
-          />
-        </Pressable>
-        <Pressable onPress={() => onTabChange(CommunityProfileTab.community_pin)}>
-          <IconTab
-            themeStyles={themeStyles}
-            icon={
-              <SvgXml
-                xml={pin(
-                  getActiveColor(currentTab === CommunityProfileTab.community_pin)
-                )}
-              />
-            }
-            isActive={currentTab === CommunityProfileTab.community_pin}
-          />
-        </Pressable>
-        <Pressable
-          onPress={() => onTabChange(CommunityProfileTab.community_image_feed)}
-        >
-          <IconTab
-            themeStyles={themeStyles}
-            icon={
-              <SvgXml
-                xml={image(
-                  getActiveColor(
-                    currentTab === CommunityProfileTab.community_image_feed
-                  )
-                )}
-              />
-            }
-            isActive={currentTab === CommunityProfileTab.community_image_feed}
-          />
-        </Pressable>
-        <Pressable
-          onPress={() => onTabChange(CommunityProfileTab.community_video_feed)}
-        >
-          <IconTab
-            themeStyles={themeStyles}
-            icon={
-              <SvgXml
-                xml={video(
-                  getActiveColor(
-                    currentTab === CommunityProfileTab.community_video_feed
-                  )
-                )}
-              />
-            }
-            isActive={currentTab === CommunityProfileTab.community_video_feed}
-          />
-        </Pressable>
-      </View>
-    );
-  };
+        <IconTab
+          themeStyles={themeStyles}
+          icon={
+            <SvgXml
+              xml={feed(
+                getActiveColor(
+                  currentTab === CommunityProfileTab.community_feed
+                )
+              )}
+            />
+          }
+          isActive={currentTab === CommunityProfileTab.community_feed}
+        />
+      </Pressable>
+      <Pressable onPress={() => onTabChange(CommunityProfileTab.community_pin)}>
+        <IconTab
+          themeStyles={themeStyles}
+          icon={
+            <SvgXml
+              xml={pin(
+                getActiveColor(currentTab === CommunityProfileTab.community_pin)
+              )}
+            />
+          }
+          isActive={currentTab === CommunityProfileTab.community_pin}
+        />
+      </Pressable>
+      <Pressable
+        onPress={() => onTabChange(CommunityProfileTab.community_image_feed)}
+      >
+        <IconTab
+          themeStyles={themeStyles}
+          icon={
+            <SvgXml
+              xml={image(
+                getActiveColor(
+                  currentTab === CommunityProfileTab.community_image_feed
+                )
+              )}
+            />
+          }
+          isActive={currentTab === CommunityProfileTab.community_image_feed}
+        />
+      </Pressable>
+      <Pressable
+        onPress={() => onTabChange(CommunityProfileTab.community_video_feed)}
+      >
+        <IconTab
+          themeStyles={themeStyles}
+          icon={
+            <SvgXml
+              xml={video(
+                getActiveColor(
+                  currentTab === CommunityProfileTab.community_video_feed
+                )
+              )}
+            />
+          }
+          isActive={currentTab === CommunityProfileTab.community_video_feed}
+        />
+      </Pressable>
+    </View>
+  );
+};
 
 export default memo(AmityCommunityProfileTabComponent);

package/src/v4/PublicApi/Components/AmityGlobalFeedComponent/AmityGlobalFeedComponent.tsx

@@ -1,5 +1,5 @@
 import React, { FC, memo, useCallback, useRef, useState } from 'react';
-import { FlatList } from 'react-native';
+import { FlatList, View } from 'react-native';
 
 import { RefreshControl } from 'react-native';
 import AmityPostContentComponent from '../AmityPostContentComponent/AmityPostContentComponent';
@@ -20,6 +20,7 @@ import Divider from '../../../component/Divider';
 type AmityGlobalFeedComponentType = {
   pageId?: PageID;
   isShowStoryTab?: boolean;
+  GlobalFeedHeaderComponent?: React.ReactElement;
 };
 
 export const globalFeedPageLimit = 20;
@@ -27,6 +28,7 @@ export const globalFeedPageLimit = 20;
 const AmityGlobalFeedComponent: FC<AmityGlobalFeedComponentType> = ({
   pageId,
   isShowStoryTab = true,
+  GlobalFeedHeaderComponent,
 }) => {
   const { itemWithAds, refresh, loading, onNextPage } =
     useCustomRankingGlobalFeed();
@@ -100,12 +102,15 @@ const AmityGlobalFeedComponent: FC<AmityGlobalFeedComponentType> = ({
       }
       keyboardShouldPersistTaps="handled"
       ListHeaderComponent={
-        !refreshing &&
-        !loading &&
-        isShowStoryTab && (
-          <AmityStoryTabComponent
-            type={AmityStoryTabComponentEnum.globalFeed}
-          />
+        !refreshing && !loading && isShowStoryTab ? (
+          <View>
+            {GlobalFeedHeaderComponent}
+            <AmityStoryTabComponent
+              type={AmityStoryTabComponentEnum.globalFeed}
+            />
+          </View>
+        ) : (
+          GlobalFeedHeaderComponent
         )
       }
       viewabilityConfig={{ viewAreaCoveragePercentThreshold: 60 }}

package/src/v4/PublicApi/Components/AmityPostContentComponent/AmityPostContentComponent.tsx

@@ -158,8 +158,6 @@ const AmityPostContentComponent: FC<AmityPostContentComponentProps> = ({
     });
   };
 
-  if (post?.structureType === 'liveStream') return null;
-
   return (
     <View>
       {(category === AmityPostCategory.ANNOUNCEMENT ||

package/src/v4/PublicApi/Components/AmityReactionListComponent/AmityReactionListComponent.tsx

@@ -74,10 +74,10 @@ const AmityReactionListComponent: FC<AmityReactionListComponentType> = ({
         selectedReactionIndex === 0
           ? allReactionList
           : selectedReactionIndex === 1
-            ? likeReactionList
-            : selectedReactionIndex === 2
-              ? loveReactionList
-              : null;
+          ? likeReactionList
+          : selectedReactionIndex === 2
+          ? loveReactionList
+          : null;
       if (currentUsers?.length > 0) {
         const userList = currentUsers.map((item) => item.userId);
         try {
@@ -95,7 +95,7 @@ const AmityReactionListComponent: FC<AmityReactionListComponentType> = ({
       }
     })();
 
-    return () => { };
+    return () => {};
   }, [
     allReactionList,
     likeReactionList,
@@ -231,10 +231,10 @@ const AmityReactionListComponent: FC<AmityReactionListComponentType> = ({
         {loading
           ? renderContentLoading()
           : hasError
-            ? errorContent()
-            : reactors
-              ? renderReactionList()
-              : null}
+          ? errorContent()
+          : reactors
+          ? renderReactionList()
+          : null}
       </View>
     </Modal>
   );

package/src/v4/PublicApi/Pages/AmityLivestreamPostTargetSelectionPage/AmityLivestreamPostTargetSelectionPage.tsx

@@ -37,10 +37,16 @@ const AmityLivestreamPostTargetSelectionPage = () => {
     navigation.navigate('CreateLivestream', context);
   };
 
+  const onClickClose = () => {
+    if (AmityLivestreamPostTargetSelectionPageBehavior?.onClickClose) {
+      AmityLivestreamPostTargetSelectionPageBehavior.onClickClose();
+    }
+  };
   return (
     <TargetSelectionPage
       onSelectFeed={onSelectFeed}
       pageId={PageID.livestream_post_target_selection_page}
+      onClickClose={onClickClose}
     />
   );
 };

package/src/v4/PublicApi/Pages/AmityPollTargetSelectionPage/AmityPollTargetSelectionPage.tsx

@@ -28,11 +28,16 @@ const AmityPollTargetSelectionPage = () => {
     }
     navigation.navigate('PollPostComposer', context);
   };
-
+  const onClickClose = () => {
+    if (AmityPollTargetSelectionPageBehavior?.onClickClose) {
+      AmityPollTargetSelectionPageBehavior.onClickClose();
+    }
+  };
   return (
     <TargetSelectionPage
       onSelectFeed={onSelectFeed}
       pageId={PageID.select_poll_target_page}
+      onClickClose={onClickClose}
     />
   );
 };

package/src/v4/PublicApi/Pages/AmityPostComposerPage/AmityPostComposerPage.tsx

@@ -60,6 +60,7 @@ import { getPostErrorMessage } from '../../../utils/errors';
 import { MAXIMUM_POST_CHARACTERS } from '../../../constants';
 import { replaceTriggerValues } from 'react-native-controlled-mentions';
 import { useUIKitDispatch } from '../../../../redux/store';
+import { useBehaviour } from '../../../../v4/providers/BehaviourProvider';
 
 const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
   mode,
@@ -75,6 +76,7 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
     shouldCall: true,
   });
   const pageId = PageID.post_composer_page;
+  const { AmityPostComposerPageBehavior } = useBehaviour();
   const { isExcluded, themeStyles, accessibilityId } = useAmityPage({ pageId });
   const styles = useStyles(themeStyles);
   const { getImage } = useFile();
@@ -286,10 +288,13 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
 
   const onPressClose = useCallback(() => {
     const routes = navigation.getState().routes;
+    if (AmityPostComposerPageBehavior?.onPressPost) {
+      AmityPostComposerPageBehavior.onPressPost();
+    }
     if (routes[routes.length - 2].name === 'PostTargetSelection') {
       navigation.pop(2);
     } else navigation.pop();
-  }, [navigation]);
+  }, [navigation, AmityPostComposerPageBehavior]);
 
   const onClose = useCallback(() => {
     Alert.alert(

package/src/v4/PublicApi/Pages/AmityPostTargetSelectionPage/AmityPostTargetSelectionPage.tsx

@@ -81,10 +81,17 @@ const AmityPostTargetSelectionPage = ({
     }
   };
 
+  const onClickClose = () => {
+    if (AmityPostTargetSelectionPageBehavior?.onClickClose) {
+      AmityPostTargetSelectionPageBehavior.onClickClose();
+    }
+  };
+
   return (
     <TargetSelectionPage
       pageId={PageID.select_post_target_page}
       onSelectFeed={onSelectFeed}
+      onClickClose={onClickClose}
     />
   );
 };

package/src/v4/PublicApi/Pages/AmitySocialHomePage/AmitySocialHomePage.tsx

@@ -3,7 +3,11 @@ import { useCallback, useState } from 'react';
 import { LogBox, SafeAreaView, StyleSheet } from 'react-native';
 import CustomSocialTab from '../../../../v4/component/CustomSocialTab/CustomSocialTab';
 import { useUiKitConfig } from '../../../../v4/hook';
-import { ComponentID, ElementID, PageID } from '../../../../v4/enum/enumUIKitID';
+import {
+  ComponentID,
+  ElementID,
+  PageID,
+} from '../../../../v4/enum/enumUIKitID';
 
 import { useTheme } from 'react-native-paper';
 import { useBehaviour } from '../../../../v4/providers/BehaviourProvider';

package/src/v4/PublicApi/Pages/AmityStoryTargetSelectionPage/AmityStoryTargetSelectionPage.tsx

@@ -24,11 +24,18 @@ const AmityStoryTargetSelectionPage = () => {
     });
   };
 
+  const onClickClose = () => {
+    if (AmityStoryTargetSelectionPageBehavior?.onClickClose) {
+      AmityStoryTargetSelectionPageBehavior.onClickClose();
+    }
+  };
+
   return (
     <TargetSelectionPage
       pageId={PageID.select_story_target_page}
       onSelectFeed={onSelectFeed}
       hideMyTimelineTarget={true}
+      onClickClose={onClickClose}
     />
   );
 };

package/src/v4/component/MyStories/StoryCircleItem.tsx

@@ -31,13 +31,13 @@ const StoryCircleItem: FC<IStoryCircleItem> = ({
   const styles = useStyles();
   const storyRingColor: string[] = storyTarget?.hasUnseen
     ? (getUiKitConfig({
-      page: PageID.StoryPage,
-      component: ComponentID.StoryTab,
-      element: ElementID.StoryRing,
-    })?.progress_color as string[]) ?? ['#e2e2e2', '#e2e2e2']
+        page: PageID.StoryPage,
+        component: ComponentID.StoryTab,
+        element: ElementID.StoryRing,
+      })?.progress_color as string[]) ?? ['#e2e2e2', '#e2e2e2']
     : storyTarget?.failedStoriesCount > 0
-      ? ['#DE1029', '#DE1029']
-      : ['#e2e2e2', '#e2e2e2'];
+    ? ['#DE1029', '#DE1029']
+    : ['#e2e2e2', '#e2e2e2'];
 
   useEffect(() => {
     if (storyTarget.targetType !== 'community') return;
@@ -68,8 +68,8 @@ const StoryCircleItem: FC<IStoryCircleItem> = ({
         source={
           avatarUrl
             ? {
-              uri: avatarUrl,
-            }
+                uri: avatarUrl,
+              }
             : require('../../assets/images/userAvatar.png')
         }
         style={styles.communityAvatar}

package/src/v4/component/TargetSelectionPage/TargetSelectionPage.tsx

@@ -13,11 +13,12 @@ import type { MyMD3Theme } from '../../../providers/amity-ui-kit-provider';
 import CloseButtonIconElement from '../../PublicApi/Elements/CloseButtonIconElement/CloseButtonIconElement';
 import { PageID, ComponentID, ElementID } from '../../enum';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { useNavigation } from '@react-navigation/native';
 import TextKeyElement from '../../PublicApi/Elements/TextKeyElement/TextKeyElement';
 import { Typography } from '../Typography/Typography';
 import { useStyles } from './styles';
 import { Illustration } from '../../../v4/PublicApi/Components/AmityEmptyNewsFeedComponent/Elements';
+import { useNavigation } from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
 export type FeedParams = {
   targetId: string;
@@ -48,21 +49,23 @@ interface ITargetSelectionPage {
     postSetting,
     needApprovalOnPostCreation,
   }: FeedParams) => void;
+  onClickClose?: () => void;
 }
 
 const TargetSelectionPage = ({
   pageId,
   hideMyTimelineTarget = false,
   onSelectFeed,
+  onClickClose,
 }: ITargetSelectionPage) => {
   const { client } = useAuth();
-  const navigation = useNavigation();
+
   const defaultTheme = useTheme() as MyMD3Theme;
 
   const user = useUser((client as Amity.Client).userId);
   const { communities, onNextCommunityPage, loading } = useCommunities();
   const { themeStyles, accessibilityId } = useAmityPage({ pageId });
-
+  const navigation = useNavigation<NativeStackNavigationProp<any>>();
   const theme = themeStyles || defaultTheme;
   const styles = useStyles(theme);
 
@@ -102,7 +105,12 @@ const TargetSelectionPage = ({
       <View style={styles.header}>
         <TouchableOpacity
           style={styles.closeButton}
-          onPress={() => navigation.goBack()}
+          onPress={() => {
+            onClickClose?.();
+            if (navigation.canGoBack()) {
+              navigation.goBack();
+            }
+          }}
         >
           <CloseButtonIconElement style={styles.closeIcon} pageID={pageId} />
         </TouchableOpacity>

package/src/v4/elements/ActionButton/ActionButton.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 import { useAmityElement } from '../../../v4/hook';
 import { ComponentID, ElementID, PageID } from '../../../v4/enum';
-import Button, { BUTTON_SIZE, ButtonProps } from '../../../v4/component/Button/Button';
+import Button, {
+  BUTTON_SIZE,
+  ButtonProps,
+} from '../../../v4/component/Button/Button';
 import { useStyles } from './styles';
 
 type ActionButtonProps = ButtonProps & {

package/src/v4/elements/ImageViewer/ImageViewer.tsx

@@ -27,7 +27,7 @@ const ImageViewer: FC<ImageViewerProps> = ({
   images,
   onNextImage,
   onPreviousImage,
-  onClose = () => { },
+  onClose = () => {},
 }) => {
   const [active, setActive] = useState(currentImageIndex);
   const scrollViewRef = useRef<ScrollView>(null);

package/src/v4/elements/VideoViewer/VideoViewer.tsx

@@ -27,7 +27,7 @@ const VideoViewer: FC<VideoViewerProps> = ({
   images,
   onNextImage,
   onPreviousImage,
-  onClose = () => { },
+  onClose = () => {},
 }) => {
   const [active, setActive] = useState(currentImageIndex);
   const scrollViewRef = useRef<ScrollView>(null);

package/src/v4/features/community/Membership/components/MemberItem/MemberItem.tsx

@@ -9,8 +9,17 @@ import { useBottomSheet } from '../../../../../../redux/slices/bottomSheetSlice'
 import MenuAction from '../../../../../../v4/elements/MenuAction';
 import { MemberRoles } from '../../../../../../v4/constants';
 import { useToast } from '../../../../../../v4/stores/slices/toast';
-import { demote, promote, report, trash, unreport } from '../../../../../../v4/assets/icons';
-import { checkEditRolePermission, isModerator } from '../../../../../../v4/utils/permissions';
+import {
+  demote,
+  promote,
+  report,
+  trash,
+  unreport,
+} from '../../../../../../v4/assets/icons';
+import {
+  checkEditRolePermission,
+  isModerator,
+} from '../../../../../../v4/utils/permissions';
 import {
   useRolesQuery,
   useMembersQuery,

package/src/v4/features/community/shared/components/Privacy/index.tsx

@@ -5,7 +5,10 @@ import { Radio } from '../../../../../../v4/component/core/Radio';
 import { ElementID, PageID } from '../../../../../../v4/enum';
 import FormLabel from '../../../../../../v4/elements/FormLabel';
 import { AmityCommunityPrivacyEnum } from '../../types';
-import { public as $public, private as $private } from '../../../../../../v4/assets/icons';
+import {
+  public as $public,
+  private as $private,
+} from '../../../../../../v4/assets/icons';
 import { Title } from '../../../../../../v4/elements';
 import FormDescription from '../../../../../../v4/elements/FormDescription';
 import CommunityPrivacyIcon from '../../../../../../v4/elements/CommunityPrivacyIcon';

package/src/v4/hook/useImagePicker.ts

@@ -9,7 +9,10 @@ import {
 
 import { isValidImageType } from '../utils';
 import { useCameraPermission } from './usePermissions';
-import { deleteAmityFile, uploadImageFile } from '../../providers/file-provider';
+import {
+  deleteAmityFile,
+  uploadImageFile,
+} from '../../providers/file-provider';
 
 export type UseImagePickerResponse = {
   progress: number;

package/src/v4/providers/BehaviourProvider.tsx

@@ -31,6 +31,7 @@ export const BehaviourProvider = ({
       AmityCommunitySettingPageBehavior: {},
       AmityCommunityMembershipPageBehavior: {},
       AmityCommunityNotificationSettingPageBehavior: {},
+      AmityPostComposerPageBehavior: {},
     }),
     []
   );

package/src/v4/types/behaviour.interface.ts

@@ -38,6 +38,9 @@ export interface IBehaviour {
     goToUserProfilePage?: (arg?: { userId?: string }) => void;
     goToPostComposerPage?: () => void;
   };
+  AmityPostComposerPageBehavior?: {
+    onPressPost?: () => void;
+  };
   AmityCommunitySearchResultComponent?: {
     goToCommunityProfilePage?: (arg?: {
       targetId: string;
@@ -100,12 +103,14 @@ export interface IBehaviour {
       needApprovalOnPostCreation?: boolean;
       isPublic?: boolean;
     }) => void;
+    onClickClose?: () => void;
   };
   AmityStoryTargetSelectionPageBehavior?: {
     goToStoryComposerPage?: (arg?: {
       targetId: string;
       targetType: 'community' | 'user';
     }) => void;
+    onClickClose?: () => void;
   };
   AmityLivestreamPostTargetSelectionPageBehavior?: {
     goToCreateLivestreamPage?: (arg?: {
@@ -123,6 +128,7 @@ export interface IBehaviour {
       needApprovalOnPostCreation?: boolean;
       isPublic?: boolean;
     }) => void;
+    onClickClose?: () => void;
   };
   AmityCommunityProfilePageBehavior?: {
     goToPendingPostPage?: () => void;
@@ -140,6 +146,7 @@ export interface IBehaviour {
       pop?: number;
       community?: Amity.Community;
     }) => void;
+    onClickClose?: () => void;
   };
   AmityCommunitySetupPageBehavior?: {
     goToAddCategoryPage?: (context: AddCategoryPageContext) => void;