App Codex Version: 1.0.0

Source

externalCode/socialGroupSingle.ts

  1. import React from "react";
  2. import {TGroupViewModel, TTranslationFunction} from "./types";
  3. export const API_NAME = "socialGroupSingleApi";
  4. /**
  5.  * GroupListTab
  6.  */
  7. type GroupListTab = {
  8. 	icon: number,
  9. 	label: string,
  10. 	/**
  11. 	 * Indicates badge value
  12. 	 */
  13. 	count: number,
  14. 	/**
  15. 	 * Returns `true` if tab is loading
  16. 	 */
  17. 	loading: boolean,
  18. 	/**
  19. 	 * Default function of the tab
  20. 	 */
  21. 	onPress: Function
  22. };
  24. /**
  25.  * GroupActionButton
  26.  */
  27. type GroupActionButton = {
  28. 	icon: number,
  29. 	label: string,
  30. 	/**
  31. 	 * Default function of action button
  32. 	 */
  33. 	doFunction: Function,
  34. 	/**
  35. 	 * Validation details
  36. 	 */
  37. 	onPressValidation?: Record<any, any>
  38. };
  40. /**
  41.  * TransformGroupActionButtonsCallback
  42.  */
  43. type TransformGroupActionButtonsCallback = {
  44. 	action: Record<any, any>[]
  45. };
  47. /**
  48.  * GroupHeaderAvatarProps
  49.  */
  50. type GroupHeaderAvatarProps = {
  51. 	/**
  52. 	 * App global style
  53. 	 */
  54. 	global: Record<any, any>,
  55. 	/**
  56. 	 * App colors
  57. 	 */
  58. 	colors: Record<any, any>,
  59. 	group: TGroupViewModel,
  60. 	/**
  61. 	 * Returns `true` if group avatar upload is disabled
  62. 	 */
  63. 	disableGroupAvatarUpload: boolean
  64. };
  66. /**
  67.  * BeforeGroupDetailsComponentProps
  68.  */
  69. type BeforeGroupDetailsComponentProps = {
  70. 	/**
  71. 	 * App global style
  72. 	 */
  73. 	global: Record<any, any>,
  74. 	/**
  75. 	 * App colors
  76. 	 */
  77. 	colors: Record<any, any>,
  78. 	group: TGroupViewModel
  79. };
  81. /**
  82.  * AfterGroupDetailsComponentProps
  83.  */
  84. type AfterGroupDetailsComponentProps = {
  85. 	/**
  86. 	 * App global style
  87. 	 */
  88. 	global: Record<any, any>,
  89. 	/**
  90. 	 * App colors
  91. 	 */
  92. 	colors: Record<any, any>,
  93. 	group: TGroupViewModel
  94. };
  95. /**
  96.  * GroupHeaderButtonsProps
  97.  */
  98. type GroupHeaderButtonsProps = {
  99. 	/**
  100. 	 * Default button component displayed for the group. Ex: "Request to Join", "Member", etc.
  101. 	 */
  102. 	OldButtonComponent: Function,
  103. 	/**
  104. 	 * App global style
  105. 	 */
  106. 	global: Record<any, any>,
  107. 	/**
  108. 	 * App colors
  109. 	 */
  110. 	colors: Record<any, any>,
  111. 	group: TGroupViewModel,
  112. 	/**
  113. 	 *  Details about the currently logged-in user
  114. 	 */
  115. 	currentUser: Record<any, any>,
  116. 	t: TTranslationFunction,
  117. 	/**
  118. 	 * Functions used in group details
  119. 	 */
  120. 	filteredActions: Record<any, any>[],
  121. 	/**
  122. 	 * Default function when a link is pressed
  123. 	 */
  124. 	onLinkPress: Function,
  125. 	buttonTextColor: string,
  126. 	buttonStyle: Record<any, any>,
  127. 	/**
  128. 	 * Default styles
  129. 	 */
  130. 	styles: Record<any, any>,
  131. 	/**
  132. 	 * true when user can join Group
  133. 	 */
  134. 	canJoin: boolean,
  135. 	/**
  136. 	 * true, if user is admin
  137. 	 */
  138. 	isAdmin: boolean,
  139. 	/**
  140. 	 * true, when Group join request is processing
  141. 	 */
  142. 	joinGroupLoading: boolean,
  143. 	/**
  144. 	 * true, when Group delete join request is processing
  145. 	 */
  146. 	deleteJoinLoading: boolean,
  147. 	/**
  148. 	 * Functions to join a Group
  149. 	 */
  150. 	joinGroup: Function,
  151. 	/**
  152. 	 * Functions to delete Group join request
  153. 	 */
  154. 	deleteJoinRequest: Function
  155. };
  157. /**
  158.  * GroupDetailsComponentProps
  159.  */
  160. type GroupDetailsComponentProps = {
  161. 	/**
  162. 	 * App global style
  163. 	 */
  164. 	global: Record<any, any>,
  165. 	/**
  166. 	 * App colors
  167. 	 */
  168. 	colors: Record<any, any>,
  169. 	group: TGroupViewModel,
  170. 	t: TTranslationFunction,
  171. 	/**
  172. 	 * Functions used in group details
  173. 	 */
  174. 	filteredActions: Record<any, any>[],
  175. 	/**
  176. 	 * Default function when a link is pressed
  177. 	 */
  178. 	onLinkPress: Function,
  179. 	/**
  180. 	 * Group description
  181. 	 */
  182. 	truncated: Record<any, any>,
  183. 	/**
  184. 	 * used for controlling the alignment of the view
  185. 	 */
  186. 	headerStyle: Record<any, any>,
  187. 	/**
  188. 	 * Styles group details component
  189. 	 */
  190. 	styles: Record<any, any>,
  191. 	/**
  192. 	 * Boolean value for controlling Group type text display
  193. 	 */
  194. 	showGroupType: boolean,
  195. 	/**
  196. 	 * Boolean value for controlling Group status text display
  197. 	 */
  198. 	showGroupPrivacy: boolean
  199. };
  201. /**
  202.  * AfterGroupProfileHeaderProps
  203.  */
  204. type AfterGroupProfileHeaderProps = {
  205. 	/**
  206. 	 * App global style
  207. 	 */
  208. 	global: Record<any, any>,
  209. 	/**
  210. 	 * App colors
  211. 	 */
  212. 	colors: Record<any, any>,
  213. 	group: TGroupViewModel
  214. };
  216. /**
  217.  * HeaderRightComponentProps
  218.  */
  219. type HeaderRightComponentProps = {
  220. 	styles: Record<any, any>,
  221. 	t: TTranslationFunction,
  222. 	group: TGroupViewModel,
  223. 	/**
  224. 	 * App global style
  225. 	 */
  226. 	global: Record<any, any>,
  227. 	/**
  228. 	 * App colors
  229. 	 */
  230. 	colors: Record<any, any>,
  231. 	/**
  232. 	 * Handles link press for the HTML component
  233. 	 */
  234. 	onLinkPress: Function,
  235. 	/**
  236. 	 * Default icon
  237. 	 */
  238. 	icon: number,
  239. 	/**
  240. 	 * Default header color
  241. 	 */
  242. 	headerColor: string,
  243. 	/**
  244. 	 * Action buttons to render
  245. 	 */
  246. 	actionButtons: Record<any, any>[],
  247. 	/**
  248. 	 * Returns `true` if logged-in user can subscribe to the group
  249. 	 */
  250. 	canSubscribe: boolean,
  251. 	/**
  252. 	 * Returns `true` if logged-in user is subscribed to the group
  253. 	 */
  254. 	isSubscribed: boolean,
  255. 	/**
  256. 	 * Returns `true` if subscription state is loading
  257. 	 */
  258. 	subscriptionLoading: boolean,
  259. 	/**
  260. 	 * Function to toggle user's subscription to the group
  261. 	 */
  262. 	subscribeToGroup: Function,
  263. 	/**
  264. 	 * Default font icon name of the header action button
  265. 	 */
  266. 	fontIconName: string,
  267. 	/**
  268. 	 * Default font icon weight of the header action button
  269. 	 */
  270. 	fontIconWeight: number,
  271. 	/**
  272. 	 * Default font icon name of the subscribe button
  273. 	 */
  274. 	fontIconSubscribeName: string,
  275. 	/**
  276. 	 * Default font icon weight of the subscribe button
  277. 	 */
  278. 	fontIconSubscribeWeight: number,
  279. 	/**
  280. 	 * Returns `true` if user can create post in group
  281. 	 */
  282. 	canPost: boolean,
  283. 	/**
  284. 	 * Function to open Group Activity screen.
  285. 	 */
  286. 	openCreateActivityScreen: Function
  287. };
  289. /**
  290.  * ParentGroupBarProps
  291.  */
  292. type ParentGroupBarProps = {
  293. 	/**
  294. 	 * Default styles
  295. 	 */
  296. 	styles: Record<any, any>,
  297. 	/**
  298. 	 * Details of group's parent
  299. 	 */
  300. 	parentGroup: null | Record<any, any>,
  301. 	group: TGroupViewModel,
  302. 	/**
  303. 	 * App global style
  304. 	 */
  305. 	global: Record<any, any>,
  306. 	/**
  307. 	 * App colors
  308. 	 */
  309. 	colors: Record<any, any>,
  310. 	/**
  311. 	 * Navigate to parent group
  312. 	 */
  313. 	navigateToParent: Function,
  314. 	t: TTranslationFunction
  315. };
  317. /**
  318.  * GroupTabBadgeProps
  319.  */
  320. type GroupTabBadgeProps = {
  321. 	/**
  322. 	 * Badge details
  323. 	 */
  324. 	item: Record<any, any>,
  325. 	/**
  326. 	 * App global style
  327. 	 */
  328. 	global: Record<any, any>,
  329. 	/**
  330. 	 * Badge text
  331. 	 */
  332. 	text: number,
  333. 	/**
  334. 	 * Default styles
  335. 	 */
  336. 	styles: Record<any, any>
  337. };
  339. /**
  340.  * GroupTabIconProps
  341.  */
  342. type GroupTabIconProps = {
  343. 	/**
  344. 	 * Icon details
  345. 	 */
  346. 	link: Record<any, any>,
  347. 	/**
  348. 	 * App global style
  349. 	 */
  350. 	global: Record<any, any>,
  351. 	/**
  352. 	 * App colors
  353. 	 */
  354. 	colors: Record<any, any>
  355. };
  357. /**
  358.  * GroupTabArrowComponentProps
  359.  */
  360. type GroupTabArrowComponentProps = {
  361. 	/**
  362. 	 * Icon color
  363. 	 */
  364. 	tintColor: string,
  365. 	/**
  366. 	 * Icon resource
  367. 	 */
  368. 	icon: number,
  369. 	/**
  370. 	 * Default styles
  371. 	 */
  372. 	styles: Record<any, any>
  373. };
  375. /**
  376.  * GroupTabTitleComponentProps
  377.  */
  378. type GroupTabTitleComponentProps = {
  379. 	/**
  380. 	 * Tab index
  381. 	 */
  382. 	index: number,
  383. 	/**
  384. 	 * Default styles
  385. 	 */
  386. 	styles: Record<any, any>,
  387. 	/**
  388. 	 * Tab title
  389. 	 */
  390. 	title: string
  391. };
  393. /**
  394.  * GroupSendInvitesTab
  395.  */
  396. type GroupSendInvitesTab = {
  397. 	/**
  398. 	 * Default icon
  399. 	 */
  400. 	icon: number,
  401. 	/**
  402. 	 * Default label
  403. 	 */
  404. 	label: string,
  405. 	/**
  406. 	 * Default function to execute when tab is pressed
  407. 	 */
  408. 	onPress: Function
  409. };
  411. /**
  412.  * GroupManageTab
  413.  */
  414. type GroupManageTab = {
  415. 	/**
  416. 	 * Default icon
  417. 	 */
  418. 	icon: number,
  419. 	/**
  420. 	 * Default label
  421. 	 */
  422. 	label: string,
  423. 	/**
  424. 	 * Default function to execute when tab is pressed
  425. 	 */
  426. 	onPress: Function
  427. };
  429. /**
  430.  * @class
  431.  * Group Single Screen Hooks.
  432.  * Instance name: socialGroupSingleApi
  434.    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.
  435.  * @example
  436.  * externalCodeSetup.socialGroupSingleApi.METHOD_NAME
  437.  */
  438. export class SocialGroupSingleApi {
  439. 	filterTabs = (tabs: GroupListTab[]) => tabs;
  440. 	/**
  441. 	 * You can use it to modify the tab list on the Groups screen.
  442. 	 * @method
  443. 	 * @param {GroupListTab[]} tabFilter
  444. 	 * @example
  445. 	 * externalCodeSetup.socialGroupSingleApi.setTabFilter(props => {
  446. 	 *     const customTab = {
  447. 	 *         icon: {fontIconName: 'comment', weight: 200},
  448. 	 *         label: "About",
  449. 	 *         onPress: () => Alert.alert("This group was created by the admin"),
  450. 	 *         count: 0,
  451. 	 *         loading: false,
  452. 	 *     };
  453. 	 *
  454. 	 *     return [...props, customTab];
  455. 	 * });
  456. 	 */
  457. 	setTabFilter = (tabFilter: (tabs: GroupListTab[]) => GroupListTab[]) => {
  458. 		this.filterTabs = tabFilter;
  459. 	};
  461. 	//@ts-ignore
  462. 	privateGroupTabIgnoreFilter = tabs => tabs;
  464. 	/**
  465. 	 * @ignore
  466. 	 * Reason for ignore: privateGroupTabIgnoreFilter is not being used in the app
  467. 	 * Filters the list of items that should not show to non-members if group is private
  468. 	 */
  469. 	//@ts-ignore
  470. 	setPrivateGroupTabFilter = filterFunction => {
  471. 		this.privateGroupTabIgnoreFilter = filterFunction;
  472. 	};
  474. 	GroupHeaderAvatar: React.ComponentType<GroupHeaderAvatarProps> | null = null;
  476. 	/**
  477. 	 * 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.
  478. 	 * @method
  479. 	 * @param {React.ComponentType<GroupHeaderAvatarProps>} GroupHeaderAvatar
  480. 	 * @example <caption> Change default group avatar if group has no avatar </caption>
  481. 	 *
  482. 	 * ...
  483. 	 * import Animated from "react-native-reanimated";
  484. 	 * import AppImage from "@src/components/AppImage";
  485. 	 * import {DEVICE_WIDTH} from "@src/styles/global";
  486. 	 * export const applyCustomCode = externalCodeSetup => {
  487. 	 *
  488. 	 *   externalCodeSetup.socialGroupSingleApi.setGroupHeaderAvatar(props => {
  489. 	 *       const {global, group} = props;
  490. 	 *
  491. 	 *       const avatarSize = Math.min(DEVICE_WIDTH * 0.3, 110);
  492. 	 *       let customUri = group.avatar;
  493. 	 *
  494. 	 *       if (group.avatar.includes("mystery-group")) {
  495. 	 *           customUri = "https://link-to-image.png";
  496. 	 *       }
  497. 	 *
  498. 	 *       return (
  499. 	 *           <Animated.View
  500. 	 *               style={[
  501. 	 *                   {
  502. 	 *                       marginBottom: 18,
  503. 	 *                       marginTop: "auto"
  504. 	 *                   },
  505. 	 *                   !!group.coverImage && {
  506. 	 *                       borderRadius: 18,
  507. 	 *                       backgroundColor: "#fff",
  508. 	 *                       borderWidth: 3,
  509. 	 *                       borderColor: "#fff",
  510. 	 *                       ...global.shadowBelow
  511. 	 *                   }
  512. 	 *               ]}
  513. 	 *           >
  514. 	 *               <AppImage
  515. 	 *                   source={{uri: customUri}}
  516. 	 *                   style={[{width: avatarSize, height: avatarSize, borderRadius: 18}]}
  517. 	 *                   resizeMode={"contain"}
  518. 	 *               />
  519. 	 *           </Animated.View>
  520. 	 *       );
  521. 	 *   });
  522. 	 * }
  523. 	 */
  524. 	setGroupHeaderAvatar = (
  525. 		GroupHeaderAvatar: React.ComponentType<GroupHeaderAvatarProps> | null
  526. 	) => {
  527. 		this.GroupHeaderAvatar = GroupHeaderAvatar;
  528. 	};
  530. 	customHeaderBackground: string | null = null;
  532. 	/**
  533. 	 * Replaces a group's cover image
  534. 	 * @method
  535. 	 * @param {String} customHeaderBackground
  536. 	 * @example
  537. 	 * externalCodeSetup.socialGroupSingleApi.setCustomHeaderBackground('https://link-to-image.png')
  538. 	 */
  539. 	setCustomHeaderBackground = (customHeaderBackground: string | null) => {
  540. 		this.customHeaderBackground = customHeaderBackground;
  541. 	};
  543. 	BeforeDetailsComponent: React.ComponentType<
  544. 		BeforeGroupDetailsComponentProps
  545. 	> | null = null;
  547. 	/**
  548. 	 * You can use it to add a component before the group details such as the title and group description.
  549. 	 * @method
  550. 	 * @param {React.ComponentType<BeforeGroupDetailsComponentProps>} BeforeDetailsComponent
  551. 	 * @example
  552. 	 * externalCodeSetup.socialGroupSingleApi.setBeforeDetailsComponent(
  553. 	 *     props =>
  554. 	 *         !props.group.isMember ? (
  555. 	 *             <Text>
  556. 	 *                 You are not a member of this group. To see all available items, please
  557. 	 *                 join the group.
  558. 	 *             </Text>
  559. 	 *         ) : null
  560. 	 * );
  561. 	 */
  562. 	setBeforeDetailsComponent = (
  563. 		BeforeDetailsComponent: React.ComponentType<
  564. 			BeforeGroupDetailsComponentProps
  565. 		> | null
  566. 	) => {
  567. 		this.BeforeDetailsComponent = BeforeDetailsComponent;
  568. 	};
  570. 	AfterDetailsComponent: React.ComponentType<
  571. 		AfterGroupDetailsComponentProps
  572. 	> | null = null;
  574. 	/**
  575. 	 * 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.
  576. 	 * @method
  577. 	 * @param {React.ComponentType<AfterGroupDetailsComponentProps>} AfterDetailsComponent
  578. 	 * @example
  579. 	 * externalCodeSetup.socialGroupSingleApi.setAfterDetailsComponent(props => {
  580. 	 *     return (
  581. 	 *         <Button
  582. 	 *             title="Open this group in a web browser"
  583. 	 *             onPress={() => props.group.navigateToWeb()}
  584. 	 *         />
  585. 	 *     );
  586. 	 * });
  587. 	 */
  588. 	setAfterDetailsComponent = (
  589. 		AfterDetailsComponent: React.ComponentType<
  590. 			AfterGroupDetailsComponentProps
  591. 		> | null
  592. 	) => {
  593. 		this.AfterDetailsComponent = AfterDetailsComponent;
  594. 	};
  596. 	GroupDetailsComponent: React.ComponentType<
  597. 		GroupDetailsComponentProps
  598. 	> | null = null;
  600. 	/**
  601. 	 * Replaces the group details component and lets you compose your own component to display the group details.
  602. 	 * @method
  603. 	 * @param {React.ComponentType<GroupDetailsComponentProps>} GroupDetailsComponent
  604. 	 * @example
  605. 	 *
  606. 	 * //In custom_code/GroupDetailsComponent.js...
  607. 	 *
  608. 	 * import React from "react";
  609. 	 * import {View, Text, Animated} from "react-native";
  610. 	 * import HTML from "react-native-render-html";
  611. 	 * import htmlclean from "htmlclean";
  612. 	 * import {groupMembersCountTranslation, groupStatusTranslation} from "@src/utils"; //BuddyBoss translation helper functions
  613. 	 * import GroupActionSheetWrapper from "@src/components/Group/GroupActionSheetWrapper";
  614. 	 *
  615. 	 * const GroupDetailsComponent = ({
  616. 	 *     global,
  617. 	 *     colors,
  618. 	 *     group,
  619. 	 *     truncated,
  620. 	 *     textStyle,
  621. 	 *     t,
  622. 	 *     filteredActions,
  623. 	 *     onLinkPress,
  624. 	 *     styles
  625. 	 * }) => (
  626. 	 *     <>
  627. 	 *         <Text
  628. 	 *             numberOfLines={1}
  629. 	 *             style={[global.textHeaderTitle, styles.textHeaderTitle, textStyle]}
  630. 	 *         >
  631. 	 *             {group.title}
  632. 	 *         </Text>
  633. 	 *         <Animated.View style={[global.screenMetas, styles.groupStatusContainer]}>
  634. 	 *             <Text style={[global.textHeaderMeta, styles.groupStatusText, textStyle]}>
  635. 	 *                 {groupStatusTranslation(t, group)} •{" "}
  636. 	 *                 {groupMembersCountTranslation(t, group)}
  637. 	 *             </Text>
  638. 	 *         </Animated.View>
  639. 	 *         {!!group.shortContent && (
  640. 	 *             <Animated.View style={{maxWidth: 300}}>
  641. 	 *                 <GroupActionSheetWrapper
  642. 	 *                     actionButtons={filteredActions}
  643. 	 *                     {...{
  644. 	 *                         global,
  645. 	 *                         colors,
  646. 	 *                         t,
  647. 	 *                         group,
  648. 	 *                         onLinkPress
  649. 	 *                     }}
  650. 	 *                 >
  651. 	 *                     <View>
  652. 	 *                         <HTML
  653. 	 *                             html={htmlclean(truncated.html)}
  654. 	 *                             tagsStyles={{
  655. 	 *                                 p: {marginTop: 0},
  656. 	 *                                 a: global.textHeaderShortContent
  657. 	 *                             }}
  658. 	 *                             baseFontStyle={{
  659. 	 *                                 ...global.textHeaderShortContent,
  660. 	 *                                 ...textStyle
  661. 	 *                             }}
  662. 	 *                             onLinkPress={(event, url) => {
  663. 	 *                                 if (onLinkPress) {
  664. 	 *                                     onLinkPress(event, url);
  665. 	 *                                 }
  666. 	 *                             }}
  667. 	 *                         />
  668. 	 *                     </View>
  669. 	 *                 </GroupActionSheetWrapper>
  670. 	 *             </Animated.View>
  671. 	 *         )}
  672. 	 *     </>
  673. 	 * );
  674. 	 *
  675. 	 * export default GroupDetailsComponent;
  676. 	 *
  677. 	 *
  678. 	 * //In custom_code/index.js...
  679. 	 *
  680. 	 * ...
  681. 	 *
  682. 	 * import GroupDetailsComponent from "./GroupDetailsComponent";
  683. 	 * export const applyCustomCode = externalCodeSetup => {
  684. 	 *   externalCodeSetup.socialGroupSingleApi.setGroupDetailsComponent(props => <GroupDetailsComponent {...props} />);
  685. 	 * }
  686. 	 */
  687. 	setGroupDetailsComponent = (
  688. 		GroupDetailsComponent: React.ComponentType<
  689. 			GroupDetailsComponentProps
  690. 		> | null
  691. 	) => {
  692. 		this.GroupDetailsComponent = GroupDetailsComponent;
  693. 	};
  695. 	GroupHeaderButtons: React.ComponentType<
  696. 		GroupHeaderButtonsProps
  697. 	> | null = null;
  699. 	/**
  700. 	 * You can add new components near the default group button section.
  701. 	 * @method
  702. 	 * @param {React.ComponentType<GroupHeaderButtonsProps>} GroupHeaderButtons
  703. 	 * @example <caption> Add buttons that can open the group in a web browser </caption>
  704. 	 * externalCodeSetup.socialGroupSingleApi.setGroupHeaderButtons(props => {
  705. 	 *
  706. 	 *     const {OldButtonComponent, group} = props;
  707. 	 *
  708. 	 *     const goToForum = () => {
  709. 	 *         if (typeof group.navigateToForum === 'function'){
  710. 	 *             group.navigateToForum()
  711. 	 *         }
  712. 	 *     }
  713. 	 *
  714. 	 *     const NavigateToForum = () => (
  715. 	 *         <TouchableOpacity onPress={() => goToForum()}>
  716. 	 *             <Text> Go to forum </Text>
  717. 	 *         </TouchableOpacity>
  718. 	 *     );
  719. 	 *
  720. 	 *     const OpenInWeb = () => (
  721. 	 *         <TouchableOpacity onPress={() => group.navigateToWeb()}>
  722. 	 *             <Text> Open in browser </Text>
  723. 	 *         </TouchableOpacity>
  724. 	 *     );
  725. 	 *
  726. 	 *     return (
  727. 	 *         <View style={{flexDirection: "column"}}>
  728. 	 *             <NavigateToForum />
  729. 	 *             <OpenInWeb />
  730. 	 *             <OldButtonComponent />
  731. 	 *         </View>
  732. 	 *     );
  733. 	 *
  734. 	 * });
  735. 	 *
  736. 	 * @example <caption> Default component structure </caption>
  737. 	 *
  738. 	 * //In custom_code/GroupHeaderButton.js...
  739. 	 *
  740. 	 * import React from "react";
  741. 	 * import GroupActionSheetWrapper from "@src/components/Group/GroupActionSheetWrapper";
  742. 	 * import AvatarActionButton from "@src/components/ActionButtons/AvatarActionButton";
  743. 	 * import AuthWrapper from "@src/components/AuthWrapper";
  744. 	 * import ActionButtonList from "@src/components/ActionButtons/ActionButtonList";
  745. 	 *
  746. 	 * const GroupHeaderButton = ({group, currentUser, global, colors, t, onLinkPress, filteredActions, buttonTextColor, buttonStyle}) => {
  747. 	 *
  748. 	 *  return group.isMember ? (
  749. 	 *    <GroupActionSheetWrapper
  750. 	 *      actionButtons={filteredActions}
  751. 	 *      {...{
  752. 	 *        global,
  753. 	 *        colors,
  754. 	 *        t,
  755. 	 *        group,
  756. 	 *        onLinkPress
  757. 	 *      }}
  758. 	 *    >
  759. 	 *      <AvatarActionButton
  760. 	 *        user={currentUser}
  761. 	 *        style={{
  762. 	 *          ...buttonStyle,
  763. 	 *          paddingLeft: 3,
  764. 	 *          paddingRight: 13
  765. 	 *        }}
  766. 	 *        {...{
  767. 	 *          global,
  768. 	 *          colors,
  769. 	 *          t,
  770. 	 *          title: group.role,
  771. 	 *          titleStyle: {
  772. 	 *            ...global.textHeaderActionButton,
  773. 	 *            color: colors.primaryColor
  774. 	 *          },
  775. 	 *          color: buttonTextColor
  776. 	 *        }}
  777. 	 *      />
  778. 	 *      </GroupActionSheetWrapper>
  779. 	 *    ) : (
  780. 	 *      <AuthWrapper>
  781. 	 *        <ActionButtonList
  782. 	 *          hideIcons={true}
  783. 	 *          actionButtons={filteredActions}
  784. 	 *          object={group}
  785. 	 *          color={buttonTextColor}
  786. 	 *          t={t}
  787. 	 *          buttonStyle={{
  788. 	 *            ...buttonStyle,
  789. 	 *            marginHorizontal: 5,
  790. 	 *            paddingVertical: 0
  791. 	 *          }}
  792. 	 *          textStyle={global.textHeaderActionButton}
  793. 	 *        />
  794. 	 *      </AuthWrapper>
  795. 	 *    );
  796. 	 *
  797. 	 * }
  798. 	 *
  799. 	 * export default GroupHeaderButton;
  800. 	 *
  801. 	 * //In custom_code/index.js...
  802. 	 *
  803. 	 * import GroupHeaderButton from "./components/GroupHeaderButton";
  804. 	 * export const applyCustomCode = externalCodeSetup => {
  805. 	 *   externalCodeSetup.socialGroupSingleApi.setGroupHeaderButtons(GroupHeaderButton)
  806. 	 * }
  807. 	 */
  808. 	setGroupHeaderButtons = (
  809. 		GroupHeaderButtons: React.ComponentType<GroupHeaderButtonsProps> | null
  810. 	) => {
  811. 		this.GroupHeaderButtons = GroupHeaderButtons;
  812. 	};
  814. 	AfterProfileHeader: React.ComponentType<
  815. 		AfterGroupProfileHeaderProps
  816. 	> | null = null;
  818. 	/**
  819. 	 * It adds a component after the group header but places it before the group items list.
  820. 	 * @method
  821. 	 * @param {React.ComponentType<AfterGroupProfileHeaderProps>} AfterProfileHeader
  822. 	 * @example
  823. 	 * externalCodeSetup.socialGroupSingleApi.setAfterProfileHeader(({group}) => {
  824. 	 *
  825. 	 *     const toggleSubscription = () => {
  826. 	 *         if (typeof group.subscribeClick === "function") {
  827. 	 *             group.subscribeClick();
  828. 	 *         }
  829. 	 *     };
  830. 	 *
  831. 	 *     return group.hasForum ? (
  832. 	 *         <View style={{margin: 10}}>
  833. 	 *             <Button
  834. 	 *                 onPress={toggleSubscription}
  835. 	 *                 title="Subscribe/Unsubscribe to group forum"
  836. 	 *             />
  837. 	 *         </View>
  838. 	 *     ) : null;
  839. 	 * });
  840. 	 */
  841. 	setAfterProfileHeader = (
  842. 		AfterProfileHeader: React.ComponentType<AfterGroupProfileHeaderProps> | null
  843. 	) => {
  844. 		this.AfterProfileHeader = AfterProfileHeader;
  845. 	};
  847. 	filteredGroupActionButtons = (actions: GroupActionButton[]) => actions;
  849. 	/**
  850. 	 * Append or prepend action buttons.
  851. 	 * You can use this to modify the group's default action buttons.
  852. 	 * `doFunction` can be used to dispatch a redux action.
  853. 	 * @method
  854. 	 * @param {GroupActionButton[]} filteredGroupActionButtons
  855. 	 * @example
  856. 	 *
  857. 	 * externalCodeSetup.socialGroupSingleApi.setFilteredGroupActionButtons(
  858. 	 *     action => {
  859. 	 *         const requestDeliveryRedux = {
  860. 	 *             icon: {fontIconName: 'activity', weight: 200},
  861. 	 *             label: "Request for food delivery",
  862. 	 *             doFunction: () => ({type: "FOOD_DELIVERY_REQUEST"}) //Call custom redux action FOOD_DELIVERY_REQUEST
  863. 	 *         };
  864. 	 *         return [...action, requestDeliveryRedux];
  865. 	 *     }
  866. 	 * );
  867. 	 */
  868. 	setFilteredGroupActionButtons = (
  869. 		filteredGroupActionButtons: (
  870. 			buttons: GroupActionButton[]
  871. 		) => GroupActionButton[]
  872. 	) => {
  873. 		this.filteredGroupActionButtons = filteredGroupActionButtons;
  874. 	};
  876. 	HeaderRightComponent: React.ComponentType<
  877. 		HeaderRightComponentProps
  878. 	> | null = null;
  880. 	/**
  881. 	 * You can use this hook to customize the button of the HeaderRightComponent.
  882. 	 * @method
  883. 	 * @param {React.ComponentType<HeaderRightComponentProps>} HeaderRightComponent
  884. 	 * @example
  885. 	 *
  886. 	 * ...
  887. 	 *
  888. 	 * import AuthWrapper from "@src/components/AuthWrapper";
  889. 	 * import {BottomSheetWrapper} from "../src/containers/SocialGroupsSingleScreen";
  890. 	 * import IconButton from "@src/components/IconButton";
  891. 	 * export const applyCustomCode = (externalCodeSetup: ExternalCodeSetup) => {
  892. 	 *     externalCodeSetup.socialGroupSingleApi.setHeaderRightComponent(
  893. 	 *         ({
  894. 	 *             styles,
  895. 	 *             t,
  896. 	 *             group,
  897. 	 *             colors,
  898. 	 *             global,
  899. 	 *             actionButtons,
  900. 	 *             onLinkPress,
  901. 	 *             icon,
  902. 	 *             headerColor,
  903. 	 *             rest
  904. 	 *         }) => (
  905. 	 *             <AuthWrapper>
  906. 	 *                 <View style={styles.container}>
  907. 	 *                     <BottomSheetWrapper
  908. 	 *                         t={t}
  909. 	 *                         group={group}
  910. 	 *                         colors={colors}
  911. 	 *                         global={global}
  912. 	 *                         actionButtons={actionButtons}
  913. 	 *                         onLinkPress={onLinkPress}
  914. 	 *                     >
  915. 	 *                         <IconButton
  916. 	 *                             icon={icon}
  917. 	 *                             webIcon={"IconAdd"}
  918. 	 *                             tintColor={headerColor}
  919. 	 *                             style={styles.icon}
  920. 	 *                             {...rest}
  921. 	 *                         />
  922. 	 *                     </BottomSheetWrapper>
  923. 	 *                 </View>
  924. 	 *             </AuthWrapper>
  925. 	 *         )
  926. 	 *     );
  927. 	 * }
  928. 	 */
  929. 	setHeaderRightComponent = (
  930. 		HeaderRightComponent: React.ComponentType<HeaderRightComponentProps> | null
  931. 	) => {
  932. 		this.HeaderRightComponent = HeaderRightComponent;
  933. 	};
  935. 	ParentGroupBar: React.ComponentType<ParentGroupBarProps> | null = null;
  937. 	/**
  938. 	 * You can use this hook to customize the ParentGroupBar component which is rendered if a group has a parent.
  939. 	 * @method
  940. 	 * @param {React.ComponentType<ParentGroupBarProps>} ParentGroupBar
  941. 	 * @example
  942. 	 *
  943. 	 * ...
  944. 	 *
  945. 	 * import ParentGroupBar from "@src/components/Group/ParentGroupBar";
  946. 	 *
  947. 	 * export const applyCustomCode = (externalCodeSetup) => {
  948. 	 *
  949. 	 *     externalCodeSetup.socialGroupSingleApi.setParentGroupBar(
  950. 	 *         ({parentGroup, styles, group, global, colors, navigateToParent, t}) => {
  951. 	 *             return !!parentGroup ? (
  952. 	 *                 <ParentGroupBar
  953. 	 *                     containerStyle={styles.container}
  954. 	 *                     parentGroup={parentGroup}
  955. 	 *                     subGroup={group}
  956. 	 *                     global={global}
  957. 	 *                     colors={colors}
  958. 	 *                     onPress={navigateToParent}
  959. 	 *                     t={t}
  960. 	 *                 />
  961. 	 *             ) : null;
  962. 	 *         }
  963. 	 *     );
  964. 	 *
  965. 	 * }
  966. 	 */
  967. 	setParentGroupBar = (
  968. 		ParentGroupBar: React.ComponentType<ParentGroupBarProps> | null
  969. 	) => {
  970. 		this.ParentGroupBar = ParentGroupBar;
  971. 	};
  973. 	TabBadge: React.ComponentType<GroupTabBadgeProps> | null = null;
  975. 	/**
  976. 	 * You can use this hook to customize the list item's badge.
  977. 	 * @method
  978. 	 * @param {React.ComponentType<GroupTabBadgeProps>} TabBadge
  979. 	 * @example
  980. 	 *
  981. 	 * ...
  982. 	 *
  983. 	 * import {BubbleIcon} from "@src/components/BubbleIcon";
  984. 	 *
  985. 	 * export const applyCustomCode = (externalCodeSetup) => {
  986. 	 *     externalCodeSetup.socialGroupSingleApi.setTabBadge(
  987. 	 *         ({item, global, text, styles}) => (
  988. 	 *             <BubbleIcon
  989. 	 *                 key={"tab_badge_" + item.label}
  990. 	 *                 global={global}
  991. 	 *                 text={text}
  992. 	 *                 containerStyle={styles.container}
  993. 	 *                 textStyle={styles.text}
  994. 	 *             />
  995. 	 *         )
  996. 	 *     );
  997. 	 * }
  998. 	 *
  999. 	 */
  1000. 	setTabBadge = (TabBadge: React.ComponentType<GroupTabBadgeProps> | null) => {
  1001. 		this.TabBadge = TabBadge;
  1002. 	};
  1004. 	TabIcon: React.ComponentType<GroupTabIconProps> | null = null;
  1006. 	/**
  1007. 	 * You can use this hook to customize the list item's icon.
  1008. 	 * @method
  1009. 	 * @param {React.ComponentType<GroupTabIconProps>} TabIcon
  1010. 	 * @example
  1011. 	 *
  1012. 	 * ...
  1013. 	 *
  1014. 	 * import Icon from "@src/components/Icon";
  1015. 	 *
  1016. 	 * export const applyCustomCode = (externalCodeSetup: ExternalCodeSetup) => {
  1017. 	 *
  1018. 	 *     externalCodeSetup.socialGroupSingleApi.setTabIcon(
  1019. 	 *         ({link, global, colors}) => {
  1020. 	 *             return link.icon ? (
  1021. 	 *                 <View style={global.profileItemIconWrap}>
  1022. 	 *                     <Icon
  1023. 	 *                         tintColor={colors.textColor}
  1024. 	 *                         icon={link.icon}
  1025. 	 *                         styles={global.profileItemIcon}
  1026. 	 *                     />
  1027. 	 *                 </View>
  1028. 	 *             ) : null;
  1029. 	 *         }
  1030. 	 *     );
  1031. 	 * }
  1032. 	 */
  1033. 	setTabIcon = (TabIcon: React.ComponentType<GroupTabIconProps> | null) => {
  1034. 		this.TabIcon = TabIcon;
  1035. 	};
  1037. 	TabArrowComponent: React.ComponentType<
  1038. 		GroupTabArrowComponentProps
  1039. 	> | null = null;
  1041. 	/**
  1042. 	 * You can use this hook to customize the list item's arrow component.
  1043. 	 * @method
  1044. 	 * @param {React.ComponentType<GroupTabArrowComponentProps>} TabArrowComponent
  1045. 	 * @example
  1046. 	 *
  1047. 	 * ...
  1048. 	 *
  1049. 	 * import Icon from "@src/components/Icon";
  1050. 	 *
  1051. 	 * export const applyCustomCode = (externalCodeSetup) => {
  1052. 	 *   externalCodeSetup.socialGroupSingleApi.setTabArrowComponent(
  1053. 	 *       ({tintColor, icon, styles}) => (
  1054. 	 *           <Icon
  1055. 	 *               webIcon={"IconArrowRight"}
  1056. 	 *               tintColor={tintColor}
  1057. 	 *               icon={icon}
  1058. 	 *               styles={styles.arrow}
  1059. 	 *           />
  1060. 	 *       )
  1061. 	 *   );
  1062. 	 * }
  1063. 	 *
  1064. 	 */
  1065. 	setTabArrowComponent = (
  1066. 		TabArrowComponent: React.ComponentType<GroupTabArrowComponentProps> | null
  1067. 	) => {
  1068. 		this.TabArrowComponent = TabArrowComponent;
  1069. 	};
  1071. 	TabTitleComponent: React.ComponentType<
  1072. 		GroupTabTitleComponentProps
  1073. 	> | null = null;
  1075. 	/**
  1076. 	 * You can use this hook to customize the list item's title component.
  1077. 	 * @method
  1078. 	 * @param {React.ComponentType<GroupTabTitleComponentProps>} TabTitleComponent
  1079. 	 * @example
  1080. 	 *
  1081. 	 * externalCodeSetup.socialGroupSingleApi.setTabTitleComponent(
  1082. 	 *     ({index, styles, title}) => (
  1083. 	 *         <Text key={"itemTitle_" + index} style={styles.title}>
  1084. 	 *             {title}
  1085. 	 *         </Text>
  1086. 	 *     )
  1087. 	 * );
  1088. 	 *
  1089. 	 */
  1090. 	setTabTitleComponent = (
  1091. 		TabTitleComponent: React.ComponentType<GroupTabTitleComponentProps> | null
  1092. 	) => {
  1093. 		this.TabTitleComponent = TabTitleComponent;
  1094. 	};
  1096. 	sendInvitesTabFilter = (tabs: GroupSendInvitesTab[]) => tabs;
  1097. 	/**
  1098. 	 * You can use this hook to modify the tabs in the Group Send Invites screen.
  1099. 	 * By default, only "Send Invites" and "Pending Invites" are available.
  1100. 	 * @method
  1101. 	 * @param {GroupSendInvitesTab[]} sendInvitesTabFilter
  1102. 	 * @example
  1103. 	 * externalCodeSetup.socialGroupSingleApi.setSendInvitesTabFilter(props => {
  1104. 	 *
  1105. 	 *    const customTab = {
  1106. 	 *        icon: {fontIconName: 'comment', weight: 200},
  1107. 	 *        label: "About",
  1108. 	 *        onPress: () => Alert.alert("Navigate to custom invite screen"),
  1109. 	 *    };
  1110. 	 *
  1111. 	 *    return [...props, customTab];
  1112. 	 * });
  1113. 	 */
  1114. 	setSendInvitesTabFilter = (
  1115. 		sendInvitesTabFilter: (tabs: GroupSendInvitesTab[]) => GroupSendInvitesTab[]
  1116. 	) => {
  1117. 		this.sendInvitesTabFilter = sendInvitesTabFilter;
  1118. 	};
  1120. 	manageGroupTabFilter = (tabs: GroupManageTab[]) => tabs;
  1121. 	/**
  1122. 	 * You can use this hook to modify the tabs in the Group Manage screen.
  1123. 	 * @method
  1124. 	 * @param {GroupManageTab[]} manageGroupTabFilter
  1125. 	 * @example
  1126. 	 * externalCodeSetup.socialGroupSingleApi.setManageGroupTabFilter(props => {
  1127. 	 *     const customTab = {
  1128. 	 *         icon: {fontIconName: 'comment', weight: 200},
  1129. 	 *         label: "About",
  1130. 	 *         onPress: () => Alert.alert("Navigate to custom manage screen")
  1131. 	 *     };
  1132. 	 *
  1133. 	 *     return [...props, customTab];
  1134. 	 * });
  1135. 	 */
  1136. 	setManageGroupTabFilter = (
  1137. 		manageGroupTabFilter: (tabs: GroupManageTab[]) => GroupManageTab[]
  1138. 	) => {
  1139. 		this.manageGroupTabFilter = manageGroupTabFilter;
  1140. 	};
  1141. }