Source

externalCode/socialGroupSingle.ts

import React from "react";
import {TGroupViewModel, TTranslationFunction} from "./types";
export const API_NAME = "socialGroupSingleApi";
/**
 * GroupListTab
 */
type GroupListTab = {
	icon: number,
	label: string,
	/**
	 * Indicates badge value
	 */
	count: number,
	/**
	 * Returns `true` if tab is loading
	 */
	loading: boolean,
	/**
	 * Default function of the tab
	 */
	onPress: Function
};

/**
 * GroupActionButton
 */
type GroupActionButton = {
	icon: number,
	label: string,
	/**
	 * Default function of action button
	 */
	doFunction: Function,
	/**
	 * Validation details
	 */
	onPressValidation?: Record<any, any>
};

/**
 * TransformGroupActionButtonsCallback
 */
type TransformGroupActionButtonsCallback = {
	action: Record<any, any>[]
};

/**
 * GroupHeaderAvatarProps
 */
type GroupHeaderAvatarProps = {
	/**
	 * App global style
	 */
	global: Record<any, any>,
	/**
	 * App colors
	 */
	colors: Record<any, any>,
	group: TGroupViewModel,
	/**
	 * Returns `true` if group avatar upload is disabled
	 */
	disableGroupAvatarUpload: boolean
};

/**
 * BeforeGroupDetailsComponentProps
 */
type BeforeGroupDetailsComponentProps = {
	/**
	 * App global style
	 */
	global: Record<any, any>,
	/**
	 * App colors
	 */
	colors: Record<any, any>,
	group: TGroupViewModel
};

/**
 * AfterGroupDetailsComponentProps
 */
type AfterGroupDetailsComponentProps = {
	/**
	 * App global style
	 */
	global: Record<any, any>,
	/**
	 * App colors
	 */
	colors: Record<any, any>,
	group: TGroupViewModel
};
/**
 * GroupHeaderButtonsProps
 */
type GroupHeaderButtonsProps = {
	/**
	 * Default button component displayed for the group. Ex: "Request to Join", "Member", etc.
	 */
	OldButtonComponent: Function,
	/**
	 * App global style
	 */
	global: Record<any, any>,
	/**
	 * App colors
	 */
	colors: Record<any, any>,
	group: TGroupViewModel,
	/**
	 *  Details about the currently logged-in user
	 */
	currentUser: Record<any, any>,
	t: TTranslationFunction,
	/**
	 * Functions used in group details
	 */
	filteredActions: Record<any, any>[],
	/**
	 * Default function when a link is pressed
	 */
	onLinkPress: Function,
	buttonTextColor: string,
	buttonStyle: Record<any, any>,
	/**
	 * Default styles
	 */
	styles: Record<any, any>,
	/**
	 * true when user can join Group
	 */
	canJoin: boolean,
	/**
	 * true, if user is admin
	 */
	isAdmin: boolean,
	/**
	 * true, when Group join request is processing
	 */
	joinGroupLoading: boolean,
	/**
	 * true, when Group delete join request is processing
	 */
	deleteJoinLoading: boolean,
	/**
	 * Functions to join a Group
	 */
	joinGroup: Function,
	/**
	 * Functions to delete Group join request
	 */
	deleteJoinRequest: Function
};

/**
 * GroupDetailsComponentProps
 */
type GroupDetailsComponentProps = {
	/**
	 * App global style
	 */
	global: Record<any, any>,
	/**
	 * App colors
	 */
	colors: Record<any, any>,
	group: TGroupViewModel,
	t: TTranslationFunction,
	/**
	 * Functions used in group details
	 */
	filteredActions: Record<any, any>[],
	/**
	 * Default function when a link is pressed
	 */
	onLinkPress: Function,
	/**
	 * Group description
	 */
	truncated: Record<any, any>,
	/**
	 * used for controlling the alignment of the view
	 */
	headerStyle: Record<any, any>,
	/**
	 * Styles group details component
	 */
	styles: Record<any, any>,
	/**
	 * Boolean value for controlling Group type text display
	 */
	showGroupType: boolean,
	/**
	 * Boolean value for controlling Group status text display
	 */
	showGroupPrivacy: boolean
};

/**
 * AfterGroupProfileHeaderProps
 */
type AfterGroupProfileHeaderProps = {
	/**
	 * App global style
	 */
	global: Record<any, any>,
	/**
	 * App colors
	 */
	colors: Record<any, any>,
	group: TGroupViewModel
};

/**
 * HeaderRightComponentProps
 */
type HeaderRightComponentProps = {
	styles: Record<any, any>,
	t: TTranslationFunction,
	group: TGroupViewModel,
	/**
	 * App global style
	 */
	global: Record<any, any>,
	/**
	 * App colors
	 */
	colors: Record<any, any>,
	/**
	 * Handles link press for the HTML component
	 */
	onLinkPress: Function,
	/**
	 * Default icon
	 */
	icon: number,
	/**
	 * Default header color
	 */
	headerColor: string,
	/**
	 * Action buttons to render
	 */
	actionButtons: Record<any, any>[],
	/**
	 * Returns `true` if logged-in user can subscribe to the group
	 */
	canSubscribe: boolean,
	/**
	 * Returns `true` if logged-in user is subscribed to the group
	 */
	isSubscribed: boolean,
	/**
	 * Returns `true` if subscription state is loading
	 */
	subscriptionLoading: boolean,
	/**
	 * Function to toggle user's subscription to the group
	 */
	subscribeToGroup: Function,
	/**
	 * Default font icon name of the header action button
	 */
	fontIconName: string,
	/**
	 * Default font icon weight of the header action button
	 */
	fontIconWeight: number,
	/**
	 * Default font icon name of the subscribe button
	 */
	fontIconSubscribeName: string,
	/**
	 * Default font icon weight of the subscribe button
	 */
	fontIconSubscribeWeight: number,
	/**
	 * Returns `true` if user can create post in group
	 */
	canPost: boolean,
	/**
	 * Function to open Group Activity screen.
	 */
	openCreateActivityScreen: Function
};

/**
 * ParentGroupBarProps
 */
type ParentGroupBarProps = {
	/**
	 * Default styles
	 */
	styles: Record<any, any>,
	/**
	 * Details of group's parent
	 */
	parentGroup: null | Record<any, any>,
	group: TGroupViewModel,
	/**
	 * App global style
	 */
	global: Record<any, any>,
	/**
	 * App colors
	 */
	colors: Record<any, any>,
	/**
	 * Navigate to parent group
	 */
	navigateToParent: Function,
	t: TTranslationFunction
};

/**
 * GroupTabBadgeProps
 */
type GroupTabBadgeProps = {
	/**
	 * Badge details
	 */
	item: Record<any, any>,
	/**
	 * App global style
	 */
	global: Record<any, any>,
	/**
	 * Badge text
	 */
	text: number,
	/**
	 * Default styles
	 */
	styles: Record<any, any>
};

/**
 * GroupTabIconProps
 */
type GroupTabIconProps = {
	/**
	 * Icon details
	 */
	link: Record<any, any>,
	/**
	 * App global style
	 */
	global: Record<any, any>,
	/**
	 * App colors
	 */
	colors: Record<any, any>
};

/**
 * GroupTabArrowComponentProps
 */
type GroupTabArrowComponentProps = {
	/**
	 * Icon color
	 */
	tintColor: string,
	/**
	 * Icon resource
	 */
	icon: number,
	/**
	 * Default styles
	 */
	styles: Record<any, any>
};

/**
 * GroupTabTitleComponentProps
 */
type GroupTabTitleComponentProps = {
	/**
	 * Tab index
	 */
	index: number,
	/**
	 * Default styles
	 */
	styles: Record<any, any>,
	/**
	 * Tab title
	 */
	title: string
};

/**
 * GroupSendInvitesTab
 */
type GroupSendInvitesTab = {
	/**
	 * Default icon
	 */
	icon: number,
	/**
	 * Default label
	 */
	label: string,
	/**
	 * Default function to execute when tab is pressed
	 */
	onPress: Function
};

/**
 * GroupManageTab
 */
type GroupManageTab = {
	/**
	 * Default icon
	 */
	icon: number,
	/**
	 * Default label
	 */
	label: string,
	/**
	 * Default function to execute when tab is pressed
	 */
	onPress: Function
};

/**
 * @class
 * Group Single Screen Hooks.
 * Instance name: socialGroupSingleApi

   You can customize the Social Group options such as replacing group avatars, adding components before/after the group details, modifying the default group action buttons and much more.
 * @example
 * externalCodeSetup.socialGroupSingleApi.METHOD_NAME
 */
export class SocialGroupSingleApi {
	filterTabs = (tabs: GroupListTab[]) => tabs;
	/**
	 * You can use it to modify the tab list on the Groups screen.
	 * @method
	 * @param {GroupListTab[]} tabFilter
	 * @example
	 * externalCodeSetup.socialGroupSingleApi.setTabFilter(props => {
	 *     const customTab = {
	 *         icon: {fontIconName: 'comment', weight: 200},
	 *         label: "About",
	 *         onPress: () => Alert.alert("This group was created by the admin"),
	 *         count: 0,
	 *         loading: false,
	 *     };
	 *
	 *     return [...props, customTab];
	 * });
	 */
	setTabFilter = (tabFilter: (tabs: GroupListTab[]) => GroupListTab[]) => {
		this.filterTabs = tabFilter;
	};

	//@ts-ignore
	privateGroupTabIgnoreFilter = tabs => tabs;

	/**
	 * @ignore
	 * Reason for ignore: privateGroupTabIgnoreFilter is not being used in the app
	 * Filters the list of items that should not show to non-members if group is private
	 */
	//@ts-ignore
	setPrivateGroupTabFilter = filterFunction => {
		this.privateGroupTabIgnoreFilter = filterFunction;
	};

	GroupHeaderAvatar: React.ComponentType<GroupHeaderAvatarProps> | null = null;

	/**
	 * You can use it to replace the group header avatar. For example, you change the default group avatar if the group does not have an avatar.
	 * @method
	 * @param {React.ComponentType<GroupHeaderAvatarProps>} GroupHeaderAvatar
	 * @example <caption> Change default group avatar if group has no avatar </caption>
	 *
	 * ...
	 * import Animated from "react-native-reanimated";
	 * import AppImage from "@src/components/AppImage";
	 * import {DEVICE_WIDTH} from "@src/styles/global";
	 * export const applyCustomCode = externalCodeSetup => {
	 *
	 *   externalCodeSetup.socialGroupSingleApi.setGroupHeaderAvatar(props => {
	 *       const {global, group} = props;
	 *
	 *       const avatarSize = Math.min(DEVICE_WIDTH * 0.3, 110);
	 *       let customUri = group.avatar;
	 *
	 *       if (group.avatar.includes("mystery-group")) {
	 *           customUri = "https://link-to-image.png";
	 *       }
	 *
	 *       return (
	 *           <Animated.View
	 *               style={[
	 *                   {
	 *                       marginBottom: 18,
	 *                       marginTop: "auto"
	 *                   },
	 *                   !!group.coverImage && {
	 *                       borderRadius: 18,
	 *                       backgroundColor: "#fff",
	 *                       borderWidth: 3,
	 *                       borderColor: "#fff",
	 *                       ...global.shadowBelow
	 *                   }
	 *               ]}
	 *           >
	 *               <AppImage
	 *                   source={{uri: customUri}}
	 *                   style={[{width: avatarSize, height: avatarSize, borderRadius: 18}]}
	 *                   resizeMode={"contain"}
	 *               />
	 *           </Animated.View>
	 *       );
	 *   });
	 * }
	 */
	setGroupHeaderAvatar = (
		GroupHeaderAvatar: React.ComponentType<GroupHeaderAvatarProps> | null
	) => {
		this.GroupHeaderAvatar = GroupHeaderAvatar;
	};

	customHeaderBackground: string | null = null;

	/**
	 * Replaces a group's cover image
	 * @method
	 * @param {String} customHeaderBackground
	 * @example
	 * externalCodeSetup.socialGroupSingleApi.setCustomHeaderBackground('https://link-to-image.png')
	 */
	setCustomHeaderBackground = (customHeaderBackground: string | null) => {
		this.customHeaderBackground = customHeaderBackground;
	};

	BeforeDetailsComponent: React.ComponentType<
		BeforeGroupDetailsComponentProps
	> | null = null;

	/**
	 * You can use it to add a component before the group details such as the title and group description.
	 * @method
	 * @param {React.ComponentType<BeforeGroupDetailsComponentProps>} BeforeDetailsComponent
	 * @example
	 * externalCodeSetup.socialGroupSingleApi.setBeforeDetailsComponent(
	 *     props =>
	 *         !props.group.isMember ? (
	 *             <Text>
	 *                 You are not a member of this group. To see all available items, please
	 *                 join the group.
	 *             </Text>
	 *         ) : null
	 * );
	 */
	setBeforeDetailsComponent = (
		BeforeDetailsComponent: React.ComponentType<
			BeforeGroupDetailsComponentProps
		> | null
	) => {
		this.BeforeDetailsComponent = BeforeDetailsComponent;
	};

	AfterDetailsComponent: React.ComponentType<
		AfterGroupDetailsComponentProps
	> | null = null;

	/**
	 * You can customize the Social Group options such as replacing group avatars, adding components before/after the group details, modifying the default group action buttons and much more.
	 * @method
	 * @param {React.ComponentType<AfterGroupDetailsComponentProps>} AfterDetailsComponent
	 * @example
	 * externalCodeSetup.socialGroupSingleApi.setAfterDetailsComponent(props => {
	 *     return (
	 *         <Button
	 *             title="Open this group in a web browser"
	 *             onPress={() => props.group.navigateToWeb()}
	 *         />
	 *     );
	 * });
	 */
	setAfterDetailsComponent = (
		AfterDetailsComponent: React.ComponentType<
			AfterGroupDetailsComponentProps
		> | null
	) => {
		this.AfterDetailsComponent = AfterDetailsComponent;
	};

	GroupDetailsComponent: React.ComponentType<
		GroupDetailsComponentProps
	> | null = null;

	/**
	 * Replaces the group details component and lets you compose your own component to display the group details.
	 * @method
	 * @param {React.ComponentType<GroupDetailsComponentProps>} GroupDetailsComponent
	 * @example
	 *
	 * //In custom_code/GroupDetailsComponent.js...
	 *
	 * import React from "react";
	 * import {View, Text, Animated} from "react-native";
	 * import HTML from "react-native-render-html";
	 * import htmlclean from "htmlclean";
	 * import {groupMembersCountTranslation, groupStatusTranslation} from "@src/utils"; //BuddyBoss translation helper functions
	 * import GroupActionSheetWrapper from "@src/components/Group/GroupActionSheetWrapper";
	 *
	 * const GroupDetailsComponent = ({
	 *     global,
	 *     colors,
	 *     group,
	 *     truncated,
	 *     textStyle,
	 *     t,
	 *     filteredActions,
	 *     onLinkPress,
	 *     styles
	 * }) => (
	 *     <>
	 *         <Text
	 *             numberOfLines={1}
	 *             style={[global.textHeaderTitle, styles.textHeaderTitle, textStyle]}
	 *         >
	 *             {group.title}
	 *         </Text>
	 *         <Animated.View style={[global.screenMetas, styles.groupStatusContainer]}>
	 *             <Text style={[global.textHeaderMeta, styles.groupStatusText, textStyle]}>
	 *                 {groupStatusTranslation(t, group)} •{" "}
	 *                 {groupMembersCountTranslation(t, group)}
	 *             </Text>
	 *         </Animated.View>
	 *         {!!group.shortContent && (
	 *             <Animated.View style={{maxWidth: 300}}>
	 *                 <GroupActionSheetWrapper
	 *                     actionButtons={filteredActions}
	 *                     {...{
	 *                         global,
	 *                         colors,
	 *                         t,
	 *                         group,
	 *                         onLinkPress
	 *                     }}
	 *                 >
	 *                     <View>
	 *                         <HTML
	 *                             html={htmlclean(truncated.html)}
	 *                             tagsStyles={{
	 *                                 p: {marginTop: 0},
	 *                                 a: global.textHeaderShortContent
	 *                             }}
	 *                             baseFontStyle={{
	 *                                 ...global.textHeaderShortContent,
	 *                                 ...textStyle
	 *                             }}
	 *                             onLinkPress={(event, url) => {
	 *                                 if (onLinkPress) {
	 *                                     onLinkPress(event, url);
	 *                                 }
	 *                             }}
	 *                         />
	 *                     </View>
	 *                 </GroupActionSheetWrapper>
	 *             </Animated.View>
	 *         )}
	 *     </>
	 * );
	 *
	 * export default GroupDetailsComponent;
	 *
	 *
	 * //In custom_code/index.js...
	 *
	 * ...
	 *
	 * import GroupDetailsComponent from "./GroupDetailsComponent";
	 * export const applyCustomCode = externalCodeSetup => {
	 *   externalCodeSetup.socialGroupSingleApi.setGroupDetailsComponent(props => <GroupDetailsComponent {...props} />);
	 * }
	 */
	setGroupDetailsComponent = (
		GroupDetailsComponent: React.ComponentType<
			GroupDetailsComponentProps
		> | null
	) => {
		this.GroupDetailsComponent = GroupDetailsComponent;
	};

	GroupHeaderButtons: React.ComponentType<
		GroupHeaderButtonsProps
	> | null = null;

	/**
	 * You can add new components near the default group button section.
	 * @method
	 * @param {React.ComponentType<GroupHeaderButtonsProps>} GroupHeaderButtons
	 * @example <caption> Add buttons that can open the group in a web browser </caption>
	 * externalCodeSetup.socialGroupSingleApi.setGroupHeaderButtons(props => {
	 *
	 *     const {OldButtonComponent, group} = props;
	 *
	 *     const goToForum = () => {
	 *         if (typeof group.navigateToForum === 'function'){
	 *             group.navigateToForum()
	 *         }
	 *     }
	 *
	 *     const NavigateToForum = () => (
	 *         <TouchableOpacity onPress={() => goToForum()}>
	 *             <Text> Go to forum </Text>
	 *         </TouchableOpacity>
	 *     );
	 *
	 *     const OpenInWeb = () => (
	 *         <TouchableOpacity onPress={() => group.navigateToWeb()}>
	 *             <Text> Open in browser </Text>
	 *         </TouchableOpacity>
	 *     );
	 *
	 *     return (
	 *         <View style={{flexDirection: "column"}}>
	 *             <NavigateToForum />
	 *             <OpenInWeb />
	 *             <OldButtonComponent />
	 *         </View>
	 *     );
	 *
	 * });
	 *
	 * @example <caption> Default component structure </caption>
	 *
	 * //In custom_code/GroupHeaderButton.js...
	 *
	 * import React from "react";
	 * import GroupActionSheetWrapper from "@src/components/Group/GroupActionSheetWrapper";
	 * import AvatarActionButton from "@src/components/ActionButtons/AvatarActionButton";
	 * import AuthWrapper from "@src/components/AuthWrapper";
	 * import ActionButtonList from "@src/components/ActionButtons/ActionButtonList";
	 *
	 * const GroupHeaderButton = ({group, currentUser, global, colors, t, onLinkPress, filteredActions, buttonTextColor, buttonStyle}) => {
	 *
	 *  return group.isMember ? (
	 *    <GroupActionSheetWrapper
	 *      actionButtons={filteredActions}
	 *      {...{
	 *        global,
	 *        colors,
	 *        t,
	 *        group,
	 *        onLinkPress
	 *      }}
	 *    >
	 *      <AvatarActionButton
	 *        user={currentUser}
	 *        style={{
	 *          ...buttonStyle,
	 *          paddingLeft: 3,
	 *          paddingRight: 13
	 *        }}
	 *        {...{
	 *          global,
	 *          colors,
	 *          t,
	 *          title: group.role,
	 *          titleStyle: {
	 *            ...global.textHeaderActionButton,
	 *            color: colors.primaryColor
	 *          },
	 *          color: buttonTextColor
	 *        }}
	 *      />
	 *      </GroupActionSheetWrapper>
	 *    ) : (
	 *      <AuthWrapper>
	 *        <ActionButtonList
	 *          hideIcons={true}
	 *          actionButtons={filteredActions}
	 *          object={group}
	 *          color={buttonTextColor}
	 *          t={t}
	 *          buttonStyle={{
	 *            ...buttonStyle,
	 *            marginHorizontal: 5,
	 *            paddingVertical: 0
	 *          }}
	 *          textStyle={global.textHeaderActionButton}
	 *        />
	 *      </AuthWrapper>
	 *    );
	 *
	 * }
	 *
	 * export default GroupHeaderButton;
	 *
	 * //In custom_code/index.js...
	 *
	 * import GroupHeaderButton from "./components/GroupHeaderButton";
	 * export const applyCustomCode = externalCodeSetup => {
	 *   externalCodeSetup.socialGroupSingleApi.setGroupHeaderButtons(GroupHeaderButton)
	 * }
	 */
	setGroupHeaderButtons = (
		GroupHeaderButtons: React.ComponentType<GroupHeaderButtonsProps> | null
	) => {
		this.GroupHeaderButtons = GroupHeaderButtons;
	};

	AfterProfileHeader: React.ComponentType<
		AfterGroupProfileHeaderProps
	> | null = null;

	/**
	 * It adds a component after the group header but places it before the group items list.
	 * @method
	 * @param {React.ComponentType<AfterGroupProfileHeaderProps>} AfterProfileHeader
	 * @example
	 * externalCodeSetup.socialGroupSingleApi.setAfterProfileHeader(({group}) => {
	 *
	 *     const toggleSubscription = () => {
	 *         if (typeof group.subscribeClick === "function") {
	 *             group.subscribeClick();
	 *         }
	 *     };
	 *
	 *     return group.hasForum ? (
	 *         <View style={{margin: 10}}>
	 *             <Button
	 *                 onPress={toggleSubscription}
	 *                 title="Subscribe/Unsubscribe to group forum"
	 *             />
	 *         </View>
	 *     ) : null;
	 * });
	 */
	setAfterProfileHeader = (
		AfterProfileHeader: React.ComponentType<AfterGroupProfileHeaderProps> | null
	) => {
		this.AfterProfileHeader = AfterProfileHeader;
	};

	filteredGroupActionButtons = (actions: GroupActionButton[]) => actions;

	/**
	 * Append or prepend action buttons.
	 * You can use this to modify the group's default action buttons.
	 * `doFunction` can be used to dispatch a redux action.
	 * @method
	 * @param {GroupActionButton[]} filteredGroupActionButtons
	 * @example
	 *
	 * externalCodeSetup.socialGroupSingleApi.setFilteredGroupActionButtons(
	 *     action => {
	 *         const requestDeliveryRedux = {
	 *             icon: {fontIconName: 'activity', weight: 200},
	 *             label: "Request for food delivery",
	 *             doFunction: () => ({type: "FOOD_DELIVERY_REQUEST"}) //Call custom redux action FOOD_DELIVERY_REQUEST
	 *         };
	 *         return [...action, requestDeliveryRedux];
	 *     }
	 * );
	 */
	setFilteredGroupActionButtons = (
		filteredGroupActionButtons: (
			buttons: GroupActionButton[]
		) => GroupActionButton[]
	) => {
		this.filteredGroupActionButtons = filteredGroupActionButtons;
	};

	HeaderRightComponent: React.ComponentType<
		HeaderRightComponentProps
	> | null = null;

	/**
	 * You can use this hook to customize the button of the HeaderRightComponent.
	 * @method
	 * @param {React.ComponentType<HeaderRightComponentProps>} HeaderRightComponent
	 * @example
	 *
	 * ...
	 *
	 * import AuthWrapper from "@src/components/AuthWrapper";
	 * import {BottomSheetWrapper} from "../src/containers/SocialGroupsSingleScreen";
	 * import IconButton from "@src/components/IconButton";
	 * export const applyCustomCode = (externalCodeSetup: ExternalCodeSetup) => {
	 *     externalCodeSetup.socialGroupSingleApi.setHeaderRightComponent(
	 *         ({
	 *             styles,
	 *             t,
	 *             group,
	 *             colors,
	 *             global,
	 *             actionButtons,
	 *             onLinkPress,
	 *             icon,
	 *             headerColor,
	 *             rest
	 *         }) => (
	 *             <AuthWrapper>
	 *                 <View style={styles.container}>
	 *                     <BottomSheetWrapper
	 *                         t={t}
	 *                         group={group}
	 *                         colors={colors}
	 *                         global={global}
	 *                         actionButtons={actionButtons}
	 *                         onLinkPress={onLinkPress}
	 *                     >
	 *                         <IconButton
	 *                             icon={icon}
	 *                             webIcon={"IconAdd"}
	 *                             tintColor={headerColor}
	 *                             style={styles.icon}
	 *                             {...rest}
	 *                         />
	 *                     </BottomSheetWrapper>
	 *                 </View>
	 *             </AuthWrapper>
	 *         )
	 *     );
	 * }
	 */
	setHeaderRightComponent = (
		HeaderRightComponent: React.ComponentType<HeaderRightComponentProps> | null
	) => {
		this.HeaderRightComponent = HeaderRightComponent;
	};

	ParentGroupBar: React.ComponentType<ParentGroupBarProps> | null = null;

	/**
	 * You can use this hook to customize the ParentGroupBar component which is rendered if a group has a parent.
	 * @method
	 * @param {React.ComponentType<ParentGroupBarProps>} ParentGroupBar
	 * @example
	 *
	 * ...
	 *
	 * import ParentGroupBar from "@src/components/Group/ParentGroupBar";
	 *
	 * export const applyCustomCode = (externalCodeSetup) => {
	 *
	 *     externalCodeSetup.socialGroupSingleApi.setParentGroupBar(
	 *         ({parentGroup, styles, group, global, colors, navigateToParent, t}) => {
	 *             return !!parentGroup ? (
	 *                 <ParentGroupBar
	 *                     containerStyle={styles.container}
	 *                     parentGroup={parentGroup}
	 *                     subGroup={group}
	 *                     global={global}
	 *                     colors={colors}
	 *                     onPress={navigateToParent}
	 *                     t={t}
	 *                 />
	 *             ) : null;
	 *         }
	 *     );
	 *
	 * }
	 */
	setParentGroupBar = (
		ParentGroupBar: React.ComponentType<ParentGroupBarProps> | null
	) => {
		this.ParentGroupBar = ParentGroupBar;
	};

	TabBadge: React.ComponentType<GroupTabBadgeProps> | null = null;

	/**
	 * You can use this hook to customize the list item's badge.
	 * @method
	 * @param {React.ComponentType<GroupTabBadgeProps>} TabBadge
	 * @example
	 *
	 * ...
	 *
	 * import {BubbleIcon} from "@src/components/BubbleIcon";
	 *
	 * export const applyCustomCode = (externalCodeSetup) => {
	 *     externalCodeSetup.socialGroupSingleApi.setTabBadge(
	 *         ({item, global, text, styles}) => (
	 *             <BubbleIcon
	 *                 key={"tab_badge_" + item.label}
	 *                 global={global}
	 *                 text={text}
	 *                 containerStyle={styles.container}
	 *                 textStyle={styles.text}
	 *             />
	 *         )
	 *     );
	 * }
	 *
	 */
	setTabBadge = (TabBadge: React.ComponentType<GroupTabBadgeProps> | null) => {
		this.TabBadge = TabBadge;
	};

	TabIcon: React.ComponentType<GroupTabIconProps> | null = null;

	/**
	 * You can use this hook to customize the list item's icon.
	 * @method
	 * @param {React.ComponentType<GroupTabIconProps>} TabIcon
	 * @example
	 *
	 * ...
	 *
	 * import Icon from "@src/components/Icon";
	 *
	 * export const applyCustomCode = (externalCodeSetup: ExternalCodeSetup) => {
	 *
	 *     externalCodeSetup.socialGroupSingleApi.setTabIcon(
	 *         ({link, global, colors}) => {
	 *             return link.icon ? (
	 *                 <View style={global.profileItemIconWrap}>
	 *                     <Icon
	 *                         tintColor={colors.textColor}
	 *                         icon={link.icon}
	 *                         styles={global.profileItemIcon}
	 *                     />
	 *                 </View>
	 *             ) : null;
	 *         }
	 *     );
	 * }
	 */
	setTabIcon = (TabIcon: React.ComponentType<GroupTabIconProps> | null) => {
		this.TabIcon = TabIcon;
	};

	TabArrowComponent: React.ComponentType<
		GroupTabArrowComponentProps
	> | null = null;

	/**
	 * You can use this hook to customize the list item's arrow component.
	 * @method
	 * @param {React.ComponentType<GroupTabArrowComponentProps>} TabArrowComponent
	 * @example
	 *
	 * ...
	 *
	 * import Icon from "@src/components/Icon";
	 *
	 * export const applyCustomCode = (externalCodeSetup) => {
	 *   externalCodeSetup.socialGroupSingleApi.setTabArrowComponent(
	 *       ({tintColor, icon, styles}) => (
	 *           <Icon
	 *               webIcon={"IconArrowRight"}
	 *               tintColor={tintColor}
	 *               icon={icon}
	 *               styles={styles.arrow}
	 *           />
	 *       )
	 *   );
	 * }
	 *
	 */
	setTabArrowComponent = (
		TabArrowComponent: React.ComponentType<GroupTabArrowComponentProps> | null
	) => {
		this.TabArrowComponent = TabArrowComponent;
	};

	TabTitleComponent: React.ComponentType<
		GroupTabTitleComponentProps
	> | null = null;

	/**
	 * You can use this hook to customize the list item's title component.
	 * @method
	 * @param {React.ComponentType<GroupTabTitleComponentProps>} TabTitleComponent
	 * @example
	 *
	 * externalCodeSetup.socialGroupSingleApi.setTabTitleComponent(
	 *     ({index, styles, title}) => (
	 *         <Text key={"itemTitle_" + index} style={styles.title}>
	 *             {title}
	 *         </Text>
	 *     )
	 * );
	 *
	 */
	setTabTitleComponent = (
		TabTitleComponent: React.ComponentType<GroupTabTitleComponentProps> | null
	) => {
		this.TabTitleComponent = TabTitleComponent;
	};

	sendInvitesTabFilter = (tabs: GroupSendInvitesTab[]) => tabs;
	/**
	 * You can use this hook to modify the tabs in the Group Send Invites screen.
	 * By default, only "Send Invites" and "Pending Invites" are available.
	 * @method
	 * @param {GroupSendInvitesTab[]} sendInvitesTabFilter
	 * @example
	 * externalCodeSetup.socialGroupSingleApi.setSendInvitesTabFilter(props => {
	 *
	 *    const customTab = {
	 *        icon: {fontIconName: 'comment', weight: 200},
	 *        label: "About",
	 *        onPress: () => Alert.alert("Navigate to custom invite screen"),
	 *    };
	 *
	 *    return [...props, customTab];
	 * });
	 */
	setSendInvitesTabFilter = (
		sendInvitesTabFilter: (tabs: GroupSendInvitesTab[]) => GroupSendInvitesTab[]
	) => {
		this.sendInvitesTabFilter = sendInvitesTabFilter;
	};

	manageGroupTabFilter = (tabs: GroupManageTab[]) => tabs;
	/**
	 * You can use this hook to modify the tabs in the Group Manage screen.
	 * @method
	 * @param {GroupManageTab[]} manageGroupTabFilter
	 * @example
	 * externalCodeSetup.socialGroupSingleApi.setManageGroupTabFilter(props => {
	 *     const customTab = {
	 *         icon: {fontIconName: 'comment', weight: 200},
	 *         label: "About",
	 *         onPress: () => Alert.alert("Navigate to custom manage screen")
	 *     };
	 *
	 *     return [...props, customTab];
	 * });
	 */
	setManageGroupTabFilter = (
		manageGroupTabFilter: (tabs: GroupManageTab[]) => GroupManageTab[]
	) => {
		this.manageGroupTabFilter = manageGroupTabFilter;
	};
}