import React from "react";
export const API_NAME = "addActivityScreenApi";
/**
* @typedef {Object} KeyboardOptionsButtonsProps
* @property {NavigationService} navigation
* @property {Boolean} richTextEnabled Returns `true` if the rich text button should be displayed
* @property {Boolean} photosEnabled Returns `true` if the photo button should be displayed
* @property {Boolean} videosEnabled Returns `true` if the video button should be displayed
* @property {Boolean} docsEnabled Returns `true` if the document button should be displayed
* @property {Boolean} gifsEnabled Returns `true` if the gif button should be displayed
* @property {React.ComponentType} RichTextButton Renders the rich text button
* @property {React.ComponentType} PhotoButton Renders the photo button
* @property {React.ComponentType} VideoButton Renders the video button
* @property {React.ComponentType} DocButton Renders the document button
* @property {React.ComponentType} GifButton Renders the gif button
* @property {Function} renderMoreOptions Renders additional buttons depending on which screen the KeyboardOptions component is
* @property {Function} richTextButtonOnPress Calls the default on press function of the rich text button
* @property {Function} photoButtonOnPress Calls the default on press function of the photo button
* @property {Function} videoButtonOnPress Calls the default on press function of the video button
* @property {Function} docButtonOnPress Calls the default on press function of the doc button
* @property {Function} gifButtonOnPress Calls the default on press function of the gif button
*
*/
/**
* @typedef {Object} ToolbarHeaderProps
* @property {TranslationFunction} t
* @property {Function} renderToolBarHeader Function that returns the default component used for the screen
* @property {Object} colors App colors
* @property {Object} global App global style
*/
/**
* @typedef {Object} TransformCreateActivityParams
* @property {Object} props Activity details
*/
/**
* @typedef {Object} TransformUpdateActivityParams
* @property {Object} props Activity details
*/
/**
* @typedef {Object} PostInComponentProps
* @property {Boolean} disableSelection Returns `true` if the component should be disabled
* @property {Function} togglePostInOptions Toggles the modal where the user can select visibility
* @property {Object} global App global style
* @property {Object} colors App colors
* @property {Object} styles Default styles
* @property {Object} icon Default Icon
*/
/**
* @class
* Add Activity Screen Hooks.
* Instance name: addActivityScreenApi
The AddActivityScreenApi() can be used to customize the components on the CreatePost Screen such as when creating a new activity post or adding a comment in an activity post.
* @example
* externalCodeSetup.addActivityScreenApi.METHOD_NAME
*/
export class AddActivityScreenApi {
KeyboardOptionsButtons = null;
/**
* You can use this hook to customize the keyboard options buttons such as the RichTextButton and PhotoButton components.
* For example, you can add your own component together with the default keyboard options buttons.
* @method
* @param {KeyboardOptionsButtonsProps} KeyboardOptionsButtons
*
* @example
*
* import React from "react";
* import IconButton from "@src/components/IconButton";
* import MyCustomScreen from "./screens/MyCustomScreen";
* export const applyCustomCode = externalCodeSetup => {
* externalCodeSetup.addActivityScreenApi.setKeyboardOptionsButtons(
* ({
* navigation,
* richTextEnabled,
* photosEnabled,
* videosEnabled,
* docsEnabled,
* gifsEnabled,
* RichTextButton,
* PhotoButton,
* VideoButton,
* DocButton,
* GifButton,
* renderMoreOptions
* }) => {
* const state = navigation.state;
* const params = state.params;
*
* //Only show the RichTextButton if adding a comment to an activity post
* if (
* state.routeName === "ActivitiesCreatePostScreen" &&
* params.isComment &&
* richTextEnabled
* ) {
* return <RichTextButton />;
* }
*
* //Add a custom icon button
* return (
* <>
* {richTextEnabled && <RichTextButton />}
* {photosEnabled && <PhotoButton />}
* {videosEnabled && <VideoButton />}
* {docsEnabled && <DocButton />}
* {gifsEnabled && <GifButton />}
* <IconButton
* icon={{fontIconName: 'arrow-right', weight: 300}}
* tintColor="#aaa"
* style={{
* marginTop: 6,
* marginRight: 10
* }}
* pressHandler={() => navigation.navigate("book")}
* />
* {renderMoreOptions()}
* </>
* );
* }
* );
*
* externalCodeSetup.navigationApi.addNavigationRoute(
* "book",
* "BookScreen",
* MyCustomScreen,
* "All"
* );
* externalCodeSetup.navigationApi.addNavigationRoute(
* "book",
* "BookScreen",
* MyCustomScreen,
* "Main"
* );
* };
*
*/
setKeyboardOptionsButtons = KeyboardOptionsButtons => {
this.KeyboardOptionsButtons = KeyboardOptionsButtons;
};
ToolbarHeader = null;
/**
* You can use this hook to add a component above the keyboard options buttons.
* @method
* @param {ToolbarHeaderProps} ToolbarHeader
* @example
*
* externalCodeSetup.addActivityScreenApi.setToolbarHeader(props => {
* return <Text>Please remember to choose the correct visibility of the post</Text>
* })
*/
setToolbarHeader = ToolbarHeader => {
this.ToolbarHeader = ToolbarHeader;
};
createActivityParamsFilter = params => params;
/**
* It overrides the parameters that are used to create activities in the Activities screen and enables you to add more parameters when creating an activity so that you can make it as customizable as possible when calling its API.
* @method
* @param {TransformCreateActivityParams} createActivityParamsFilter
* @example
*
* externalCodeSetup.addActivityScreenApi.setCreateActivityParamsFilter(props => {
* return {
* ...props,
* bar: 'foo'
* };
* });
*/
setCreateActivityParamsFilter = createActivityParamsFilter => {
this.createActivityParamsFilter = createActivityParamsFilter;
};
updateActivityParamsFilter = params => params;
/**
* It overrides the parameters that are used to update activities in the Activities screen and enables you to add more parameters when updating an activity so that you can make it as customizable as possible when calling its API.
* @method
* @param {TransformUpdateActivityParams} updateActivityParamsFilter
* @example
* externalCodeSetup.addActivityScreenApi.setUpdateActivityParamsFilter(props => {
* return {
* ...props,
* bar: 'foo'
* };
* });
*/
setUpdateActivityParamsFilter = updateActivityParamsFilter => {
this.updateActivityParamsFilter = updateActivityParamsFilter;
};
PostInComponent = null;
/**
* You can utilize this hook to modify the PostIn component, enabling users to choose their desired destination for posting the activity.
* @method
* @param {PostInComponentProps} PostInComponent
* @example
*
* ...
*
* import Icon from "@src/components/Icon";
* import FilterLink from '@src/components/FilterLink';
*
* export const applyCustomCode = (externalCodeSetup) => {
*
* externalCodeSetup.addActivityScreenApi.setPostInComponent(
* ({
* disableSelection,
* togglePostInOptions,
* global,
* colors,
* styles,
* icon,
* label
* }) =>
* !disableSelection ? (
* <FilterLink
* onPress={togglePostInOptions(true)}
* global={global}
* style={styles.container}
* >
* <Icon
* icon={icon}
* tintColor={colors.textColor}
* styles={styles.icon}
* />
* <Text style={[global.activityPostInText]}>{label}</Text>
* </FilterLink>
* ) : <Text>Selection disabled</Text>
* );
* }
*/
setPostInComponent = PostInComponent => {
this.PostInComponent = PostInComponent;
};
}
Source