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;
};
}
Source