Source

externalCode/messagesSingleScreen.js

/**
 * @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;
	};
}