Source

externalCode/indexScreen.js

import * as React from "react";

/**
 * @typedef {Object} FilterProps Note: There are more data available in this props but the listed below are valuable when customizing a filter row. Data also might also be different for each screens.
 * @property {String} filter
 * @property {Object} activeSubFilters
 * @property {NavigationService} navigation
 * @property {Boolean} disableSubFilters
 * @property {String} filterType
 * @property {React.ComponentType<any>} renderFilter
 */

/**
 * @typedef {Object} headerProps
 * @property {React.ComponentType<any>} headerLeft
 * @property {React.ComponentType<any>} headerTitle
 * @property {React.ComponentType<any>} headerRight
 * @property {Function} getHeaderRight
 */

/**
 * @typedef {Object} HeaderRightProps
 * @property {React.ComponentType<any>} headerRight
 * @property {Function} headerAction Default function called when the HeaderRight component is pressed
 */

/**
 * @typedef {Object} screenProps
 * @property { Object } global
 * @property { Object } colors
 * @property { TranslationFunction } t
 * @property { boolean } isFeatureEnabled
 */
/**
 * @typedef {Object} ScrollHeaderProps
 * @property {Array<headerProps>} headerProps
 * @property { NavigationService } navigation
 * @property { String } screenTitle Title of screen
 * @property {Object} global App global style
 * @property {TranslationFunction} t
 * @property { Object } headerTitleStyle
 * @property { ?String } screenSubtitle
 */

/**
 * @typedef {Object} AnimatedListHeaderProps
 * @property { String } title Screen's title
 * @property { String } subTitle
 * @property { Object } global App global style
 * @property { Object } titleStyle
 */

/**
 * @typedef {Function} HeaderHeightCallback
 * @param {Number} defaultHeaderHeight Default header height
 * @param {String} filterType Name of filter in the index screen
 * @param {NavigationService} navigation
 * @return {Number}
 */

/**
 * @typedef {Object} AfterHeaderComponentProps
 * @property {FilterProps} props
 */
/**
 * @class
 * Index screen hooks.
 * Instance name: indexScreenApiHooks
 
   You can use this hook to customize the appearance of your app screen by personalizing the screen title component and header title component when users scroll the app.
 * @example
 * externalCodeSetup.indexScreenApiHooks.METHOD_NAME
 */
export class IndexScreenApi {
	ScrollHeaderTitleComponent = null;

	/**
	 * It replaces the header title component that is visible to users when the screen is scrolled. For example, it can always show a text title and modify its colors as users scroll through.
	 * @method
	 * @param {?React.ComponentType<ScrollHeaderProps>} ScrollHeaderTitleComponent
	 * @example <caption> Always show a text title and modify its color </caption>
	 * const CustomScrollHeaderTitleComponent = ({
	 *  headerProps,
	 *  navigation,
	 *  screenTitle,
	 *  global,
	 *  t,
	 *  headerTitleStyle,
	 *  screenSubtitle
	 * }) => {
	 *
	 *    const title = t(screenTitle) || "";
	 *
	 *    return <Text
	 *      ellipsizeMode="tail"
	 *      numberOfLines={1}
	 *      style={[global.appHeaderTitle, headerTitleStyle, {color: "red"}]}>
	 *
	 *          {screenSubtitle ? `${screenSubtitle} - ${title}` : title}
	 *      </Text>
	 * }
	 * externalCodeSetup.indexScreenApiHooks.setScrollHeaderTitleComponent(CustomScrollHeaderTitleComponent)
	 */

	setScrollHeaderTitleComponent = ScrollHeaderTitleComponent => {
		this.ScrollHeaderTitleComponent = ScrollHeaderTitleComponent;
	};

	AnimatedListHeaderTitleComponent = null;

	/**
	 * You can use this hook to replace the screen title component with items based on your preference such as changing the color/font of the title.
	 * @method
	 * @param {?React.ComponentType<AnimatedListHeaderProps>} AnimatedListHeaderTitleComponent
	 * @example <caption> Change color and font size of the title </caption>
	 * const CustomAnimatedComponent = ({
	 *  title,
	 *  subtitle,
	 *  global,
	 *  titleStyle,
	 * }) => (
	 *  <Text
	 *    style={{
	 *      ...global.iosStyleScreenTitle,
	 *      alignSelf: "stretch",
	 *      ...titleStyle,
	 *      color: "red",
	 *      fontSize: 30
	 *    }}
	 *    numberOfLines={1}
	 *    ellipsizeMode={"tail"}
	 *  >
	 *    {title}
	 *  </Text>
	 * )
	 *externalCodeSetup.indexScreenApiHooks.setAnimatedListHeaderTitleComponent(CustomAnimatedComponent)
	 */

	setAnimatedListHeaderTitleComponent = AnimatedListHeaderTitleComponent => {
		this.AnimatedListHeaderTitleComponent = AnimatedListHeaderTitleComponent;
	};

	renderHeaderRight = undefined;

	/**
	 * Use this to add a component to the right side of the header. The component will be visible even when the user scrolls down.
	 * @method
	 * @param {React.ComponentType<HeaderRightProps>} renderer Component to render
	 * @example <caption>Add a link to another page</caption>
	 *
	 * //In custom_code/HomeHeaderRight.js
	 * import React from 'react';
	 * import {withNavigation} from "@src/components/hocs/withNavigation";
	 * import IconButton from "@src/components/IconButton";
	 * const HomeHeaderRight = (props) => (
	 *        <IconButton
	 *            pressHandler={() => props.navigation.navigate("NotificationsScreen")}
	 *            icon={{fontIconName: 'bell', weight: 100}}
	 *            tintColor="#aaa"
	 *            style={{
	 *                marginLeft: -20
	 *            }}
	 *        />
	 * )
	 *
	 * export default withNavigation(HomeHeaderRight);
	 * //In custom_code/index.js
	 *
	 * ...
	 * import HomeHeaderRight from "./components/HomeHeaderRight";
	 * export const applyCustomCode = externalCodeSetup => {
	 *   externalCodeSetup.indexScreenApiHooks.setRenderHeaderRight(<HomeHeaderRight />);
	 * }
	 *
	 * @example <caption> Return the default header right component for specific screens </caption>
	 *
	 * //In custom_code/HomeHeaderRight.js...
	 *
	 * import React from 'react';
	 * import {withNavigation} from "@src/components/hocs/withNavigation";
	 * import IconButton from "@src/components/IconButton";
	 *
	 * const HomeHeaderRight = props => {
	 *
	 *     const {
	 *         navigation,
	 *         headerRight
	 *     } = props;
	 *
	 *     if (navigation.state.routeName === "GroupActivity"){
	 *         return headerRight || null;
	 *     }
	 *
	 *     return <IconButton
	 *         pressHandler={() => props.navigation.navigate("MyCustomScreen")}
	 *         icon={{fontIconName: 'bell', weight: 100}}
	 *         tintColor="#aaa"
	 *         style={{
	 *             marginLeft: -20
	 *         }}
	 *     />
	 *
	 * }
	 *
	 * export default withNavigation(HomeHeaderRight);
	 *
	 * // In custom_code/index.js...
	 *
	 * ...
	 *
	 * import HomeHeaderRight from "./components/HomeHeaderRight";
	 *
	 * export const applyCustomCode = externalCodeSetup => {
	 *    externalCodeSetup.indexScreenApiHooks.setRenderHeaderRight(props => <HomeHeaderRight {...props} />);
	 * }
	 */
	setRenderHeaderRight = renderer => {
		this.renderHeaderRight = renderer;
	};

	alwaysShowHeaderRight = undefined;

	/**
	 * Use this to always show the header right component.
	 * @method
	 * @example
	 * externalCodeSetup.indexScreenApiHooks.enableAlwaysShowHeaderRight();
	 */
	enableAlwaysShowHeaderRight = () => {
		this.alwaysShowHeaderRight = true;
	};

	headerHeight = () => undefined;

	/**
	 * Use this to set the header height of index screens.
	 * @method
	 * @param {HeaderHeightCallback} headerHeight
	 * @example <caption> Add a component before the courses filter and adjust header height </caption>
	 * ...
	 * export const applyCustomCode = externalCodeSetup => {
	 *   const CustomBeforeFilterComponent = (props) => {
	 *
	 *    if (props.filterType === "courses") {
	 *      return <View style={{ height: 80, backgroundColor: "gray" }}>
	 *        <Text style={{ color: "white" }}> This is a text before the filter </Text>
	 *      </View>
	 *    }
	 *
	 *    return null
	 *  }
	 *
	 *  externalCodeSetup.filterScreenApiHooks.setBeforeFilterComponent(CustomBeforeFilterComponent);
	 *
	 *  externalCodeSetup.indexScreenApiHooks.setHeaderHeight((defaultHeaderHeight, filterType, navigation) => {
	 *
	 *    if (filterType === "courses")
	 *      return 346;
	 *
	 *    return defaultHeaderHeight;
	 *  });
	 * }
	 */
	setHeaderHeight = headerHeight => {
		this.headerHeight = headerHeight;
	};

	AfterHeaderComponent = null;

	/**
	 * You can use this hook to add a component after the list screen's header component.
	 * @method
	 * @param {React.ComponentType<AfterHeaderComponentProps>} AfterHeaderComponent
	 * @example
	 * externalCodeSetup.indexScreenApiHooks.setAfterHeaderComponent(() => <Text>Hello World</Text>);
	 */

	setAfterHeaderComponent = AfterHeaderComponent => {
		this.AfterHeaderComponent = AfterHeaderComponent;
	};

	listSearchHeaderHeight = null;

	/**
	 * Use this to modify the height of the ListSearch component that renders the title and search component in the index screens.
	 * @method
	 * @example
	 * externalCodeSetup.indexScreenApiHooks.setListSearchHeaderHeight(100);
	 */

	setListSearchHeaderHeight = listSearchHeaderHeight => {
		this.listSearchHeaderHeight = listSearchHeaderHeight;
	};
}