/**
* @typedef {Object} ThreadItemHeaderProps
* @property {Object} message Message data filtered by a view model
* @property {Object} thread Contains thread information such as recipients, messages etc
* @property {Object} item Message data
* @property {Object} global App global style
*/
/**
* @typedef {Object} ThreadItemAvatarProps
* @property {Object} message Message data filtered by a view model
* @property {Object} thread Contains thread information such as recipients, messages etc
* @property {Object} item Message data
* @property {Number} size Default avatar size in message thread item
* @property {Object} source Contains uri of user image
* @property {Object} style Default thread item style
*/
/**
* @typedef {Object} ThreadItemTextProps
* @property {Object} message Message data filtered by a view model
* @property {Object} thread Contains thread information such as recipients, messages etc
* @property {Object} item Message data
* @property {TranslationFunction} t
* @property {Object} global App global style
* @property {Function} attemptDeepLink Attempt deep linking
* @property {Number} size Character length to display
*/
/**
* @typedef {Function} TransformMessageActionsCallback
* @param {Array} buttonConfig Contains the default buttons for the list
* @return {Array}
*/
/**
* @class
* Messages Single Screen Hooks.
* Instance name: messagesSingleScreenApi
*
You can use this to customize the single message screen components such as the header, avatar, and text.
* @example
* externalCodeSetup.messagesSingleScreenApi.METHOD_NAME
*/
export class MessagesSingleScreenApi {
ThreadItemHeader = null;
/**
* You can use this to change or modify the author name and date in the messages thread.
* @method
* @param {?React.ComponentType<ThreadItemHeaderProps>} ThreadItemHeader
* @example <caption> Identify the admin user in the thread </caption>
*
* //In custom_code/components/ThreadItemHeader.js...
* import React from "react";
* import { Text, View } from "react-native";
* import {FontWeights} from "@src/styles/global";
*
* const getStatus = (item) => {
* const idWithAdmin = 1;
*
* if (item.sender_id === 1){
* return "(Admin)"
* }
*
* return "";
* }
* const ThreadItemHeader = (props) => {
*
* const {message, global, thread, item} = props;
* const name = message.name + getStatus(item);
*
* return <View
* style={[
* global.row,
* { justifyContent: "space-between", marginBottom: 2, marginTop: 2 }
* ]}
* >
* <Text style={[global.text, { fontWeight: FontWeights.semiBold }]}>
* {name}
* </Text>
* <Text style={[global.itemLightMeta]}>{message.date}</Text>
* </View>
* }
*
* export default ThreadItemHeader;
*
* //In custom_code/index.js...
*
* ...
*
* import ThreadItemHeader from "./components/ThreadItemHeader";
* export const applyCustomCode = externalCodeSetup => {
* externalCodeSetup.messagesSingleScreenApi.setThreadItemHeader((props) => <ThreadItemHeader {...props} />)
* }
*
*/
setThreadItemHeader = ThreadItemHeader => {
this.ThreadItemHeader = ThreadItemHeader;
};
ThreadItemAvatar = null;
/**
* You can use this to modify the user's avatar in the messages thread.
* @method
* @param {?React.ComponentType<ThreadItemAvatarProps>} ThreadItemAvatar
* @example <caption> Make admin's avatar larger </caption>
*
* //In custom_code/components/ThreadItemAvatar.js...
* import React from "react";
* import AppAvatar from "@src/components/AppAvatar";
*
* const getSize = (item, defaultSize) => {
* const idWithAdmin = 1;
*
* if (item.sender_id === idWithAdmin){
* return 60;
* }
*
* return defaultSize;
*
* }
*
* const ThreadItemAvatar = (props) => {
*
* const {message, item, thread, size, source, style} = props;
*
* const avatarSize = getSize(item, size);
*
* return <AppAvatar
* size={avatarSize}
* source={source}
* style={style}
* />
* }
*
* export default ThreadItemAvatar;
*
* //In custom_code/index.js...
*
* ...
*
*
* import ThreadItemAvatar from "./components/ThreadItemAvatar";
* export const applyCustomCode = externalCodeSetup => {
* externalCodeSetup.messagesSingleScreenApi.setThreadItemAvatar((props) => <ThreadItemAvatar {...props} />)
* }
*
*/
setThreadItemAvatar = ThreadItemAvatar => {
this.ThreadItemAvatar = ThreadItemAvatar;
};
ThreadItemText = null;
/**
* You can use this to change the text component.
* @method
* @param {?React.ComponentType<ThreadItemTextProps>} ThreadItemText
* @example <caption> Change color of admin's message </caption>
*
* //In custom_code/components/ThreadItemText.js...
*
* import React from "react";
* import ReadMore from "@src/components/ReadMore"; //BuddyBoss component that wraps long texts with a "Read more" function
* import HTML from "react-native-render-html";
* import htmlclean from "htmlclean";
*
* const getColor = (item) => {
* const idWithAdmin = 1;
*
* if (item.sender_id === idWithAdmin){
* return "red"
* }
*
* return "#737679";
*
* }
* const ThreadItemText = (props) => {
*
* const {message, item, t, global, attemptDeepLink, size} = props;
*
* const textColor = getColor(item);
*
* return <ReadMore content={message.message} size={size} t={t} global={global}>
* {content => (
* <HTML
* html={htmlclean(content)}
* tagsStyles={{p: {...global.messageExcerpt, ...{color: textColor}}}}
* onLinkPress={attemptDeepLink(false)}
* />
* )}
* </ReadMore>
* }
*
* export default ThreadItemText;
*
* //In custom_code/index.js...
*
* ...
*
* import ThreadItemText from "./components/ThreadItemText"
* export const applyCustomCode = externalCodeSetup => {
* externalCodeSetup.messagesSingleScreenApi.setThreadItemText((props) => <ThreadItemText {...props} />);
* }
*
*/
setThreadItemText = ThreadItemText => {
this.ThreadItemText = ThreadItemText;
};
// filters and changes action buttons list
actionsFilter = membersActions => membersActions;
/**
* It sets the filter function to modify the message action buttons array such as removing an action button from the list.
* @method
* @param {TransformMessageActionsCallback} actionsFilter
* @example <caption>The following example shows how to add a button to the list.</caption>
* externalCodeSetup.messagesSingleScreenApi.setActionsFilter(buttonConfig => {
* const newButton = {
* flow: [
* {
* check: () => true, //Return `true` to show the button
* buttons: [
* {
* icon: {fontIconName: "flag", weight: "400"},
* label: "New Button",
* isNavigation: true, //If set to true, the button will not be set to a "loading" state
* useDispatch: false, //If this is not set, `doFunction` will be wrapped in a `dispatch` function which is used to call a redux function
* doFunction: () => {
* return console.log("Button pressed")
* }
* }
* ]
* }
* ]
* };
*
* return [...buttonConfig, newButton];
* });
*/
setActionsFilter = actionsFilter => {
this.actionsFilter = actionsFilter;
};
}
Source