import * as React from "react";
/**
* @class
* Blocks Screen Hooks.
* Instance name: blockScreenHooksApi
Enables modifications to the appearance of blocks on the app pages
* @example
* externalCodeSetup.blockScreenHooksApi.METHOD_NAME
*/
export class BlockScreenApi {
// @deprecated
headerRightRenderer = null;
// @deprecated
setHeaderRightRenderer = renderer => {
this.headerRightRenderer = renderer;
};
/**
* @deprecated
* Changes header style
* @private
*/
headerStyle = {};
/**
* @deprecated
* Override app header styles, by providing `headerStyle`
* @param {RNStyleValue} headerStyle
*/
setHeaderStyle = headerStyle => {
this.headerStyle = headerStyle;
};
/**
* Changes header icon style
* @private
*/
iconStyle = {};
/**
* It overrides the default header icons style (or Home Screen logo) when you input the different style dimensions.
* When you use this method, it replaces the icon image which is set from the WordPress BuddyBoss Dashboard > BuddyBoss App > Branding > Images > Home Screen Logo.
* @method
* @param {RNStyleValue} iconStyle React Native style
* @example <caption>User would like to adjust the height of the app home icon</caption>
* externalCodeSetup.blockScreenHooksApi.setIconStyle({height: 100});
*/
setIconStyle = iconStyle => {
this.iconStyle = iconStyle;
};
// show some JSX before block list
beforeBlockList = null;
/**
* The content shows before the blocks provided that the React component will show on top of the blocks at the top of the app page.
* @param {React.ComponentType<any>} beforeBlockList React Native component
* @method
* @example <caption>User would like to have a status report of the logged-in user in their home page before any blocks that they added such as Courses, Notifications or Activites blocks</caption>
* //In custom_code/components/BeforeBlocks.js
*
* import React from 'react';
* import { View, Text } from 'react-native';
* import { globalStyle } from "@src/styles/global";
* import { useSelector } from "react-redux";
* import FastImage from 'react-native-fast-image';
* const BeforeBlocks = (props) => {
* const globalStyles = useSelector((state) => globalStyle(state.config.styles)) // Get style from redux
* const user = useSelector((state) => state.user.userObject); //Get logged user from redux
* const { colors, global } = globalStyles;
*
* return (
*
* <View style={{padding: 20}}>
* <View style={global.widgetInner}>
*
* <FastImage style={{width: 50, height: 50, marginBottom: 20}} source={{uri: user.avatar_urls.thumb}} />
*
* <Text> Welcome {user.nicename}! </Text>
* <Text> You have {user.member_rest.unread_messages_count} unread messages </Text>
* <Text> Your last activity was on {user.member_rest.last_activity} </Text>
* </View>
* </View>)
* }
*
* export default BeforeBlocks;
*
* //In custom_code/index.js
*
* ...
*
* import BeforeBlocks from "./components/BeforeBlocks";
* export const applyCustomCode = externalCodeSetup => {
* externalCodeSetup.blockScreenHooksApi.setBeforeBlockList(() => <BeforeBlocks />);
* }
*/
setBeforeBlockList = beforeBlockList => {
this.beforeBlockList = beforeBlockList;
};
renderHeaderTitle = null;
/**
* Overrides how the Blocks Screen Title is rendered by taking the rendering function as an argument.
* @param {React.ComponentType<any>} renderer React Native component
* @method
* @example <caption>User would like to have a sticky header</caption>
* //In custom_code/components/HeaderTitle.js
*
* import React from 'react';
* import { View, Text } from 'react-native';
* import { globalStyle, NAV_HEIGHT, DEVICE_WIDTH, GUTTER } from "@src/styles/global";
* import { useSelector } from "react-redux";
* import FontManager from '@src/FontManager';
*
* const HeaderTitle = (props) => {
*
* const globalStyles = useSelector((state) => globalStyle(state.config.styles))
* const { colors, global } = globalStyles;
* const HEADER_HEIGHT = FontManager.applyFontHeightAdjustment(NAV_HEIGHT + 69);
*
* return (
* <View
* style={[
* global.bottomBorder,
* {
* position: "absolute",
* paddingTop: NAV_HEIGHT + 8,
* backgroundColor: colors.headerBg,
* height: HEADER_HEIGHT,
* width: DEVICE_WIDTH,
* paddingHorizontal: GUTTER
* }
* ]}
* >
*
* <Text
* style={{
* ...global.iosStyleScreenTitle,
* alignSelf: "stretch",
* }}
* numberOfLines={1}
* ellipsizeMode={"tail"}
* >
* My App Title
* </Text>
*
* </View>
* )
* }
*
* export default HeaderTitle;
*
*
* //In custom_code/index.js
*
* ...
*
* import HeaderTitle from "./components/HeaderTitle";
* export const applyCustomCode = externalCodeSetup => {
* externalCodeSetup.blockScreenHooksApi.setRenderHeaderTitle(() => <HeaderTitle />)
* }
*/
setRenderHeaderTitle = renderer => {
this.renderHeaderTitle = renderer;
};
renderHeaderRight = null;
/**
* 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<any>} 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.blockScreenHooksApi.setRenderHeaderRight(<HomeHeaderRight />);
* }
*/
setRenderHeaderRight = renderer => {
this.renderHeaderRight = renderer;
};
alwaysShowHeaderRight = false;
/**
* Use this to always show the header right component.
* @method
* @example
* externalCodeSetup.blockScreenHooksApi.enableAlwaysShowHeaderRight();
*/
enableAlwaysShowHeaderRight = () => {
this.alwaysShowHeaderRight = true;
};
renderHeaderLeft = null;
/**
* Use this to add a component to the left side of the header. The component will be visible even when the user scrolls down.
* @method
* @param {React.ComponentType<any>} renderer Component to render
* @example <caption>Add a link to another page</caption>
*
* //In custom_code/HomeHeaderLeft.js
* import React from 'react';
* import {withNavigation} from "@src/components/hocs/withNavigation";
* import IconButton from "@src/components/IconButton";
* const HomeHeaderLeft = (props) => (
* <IconButton
* pressHandler={() => props.navigation.navigate("NotificationsScreen")}
* icon={{fontIconName: 'bell', weight: 100}}
* tintColor="#aaa"
* style={{
* marginLeft: -20
* }}
* />
* )
*
* export default withNavigation(HomeHeaderLeft);
* //In custom_code/index.js
*
* ...
*
* import HomeHeaderLeft from "./components/HomeHeaderLeft";
* export const applyCustomCode = externalCodeSetup => {
* externalCodeSetup.blockScreenHooksApi.setRenderHeaderLeft(() => <HomeHeaderLeft />);
* }
*/
setRenderHeaderLeft = renderer => {
this.renderHeaderLeft = renderer;
};
alwaysShowHeaderLeft = false;
/**
* Use this to always show the header left component.
* @method
* @example
* externalCodeSetup.blockScreenHooksApi.enableAlwaysShowHeaderLeft();
*/
enableAlwaysShowHeaderLeft = () => {
this.alwaysShowHeaderLeft = true;
};
}
Source