/**
* @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 {Function} FilterComponent
* @param {FilterProps} props
* @return {?React.ComponentType<any>}
*/
/**
* @typedef {Function} BeforeFilterComponent
* @param {FilterProps} props
* @return {?React.ComponentType<any>}
*/
/**
* @typedef {Function} AfterFilterComponent
* @param {FilterProps} props
* @return {?React.ComponentType<any>}
*/
/**
* @typedef {Object} FilterItemComponentProps
* @property {Number} index
* @property {RNStyleValue} style
* @property {Function} onPress onPress handler
* @property {Object} global App global style
* @property {String} text Label of filter item
* @property {LocalImageSource} icon
* @property {Boolean} isSelected Returns `true` if filter item is selected
*/
/**
* @typedef {Function} FilterAllButtonHiddenCallback
* @param {String} filterType Returns the filter type used in the screen. Such values include: `courses`, `members`, `groups`, `courseCategories`
* @return {Boolean} Return `true` if component should be hidden
*/
/**
* @typedef {Object} ActiveSubFiltersProps
* @property {Object} defaultSubFilters Default subfilters for the screen
*/
/**
* @class
* Filter component hooks.
* Instance name: filterScreenApiHooks
These hooks can be used to customize the various filter components.
* @example
* externalCodeSetup.filterScreenApiHooks.METHOD_NAME
*/
export class FilterScreenApi {
FilterComponent = null;
/**
* You can use it to replace the default filter row component with your custom filter component.
* @method
* @param {?React.ComponentType<FilterComponent>} FilterComponent
* @example <caption>Show filtered count in courses screen but not in other screens</caption>
* //In custom_code/components/FilterRow.js
*
* import React, {useState} from 'react';
* import { useSelector } from 'react-redux';
* import FilterListHeaderInner from "@src/components/Filter/FilterListHeader"; //Use BuddyBoss component for generating filter row
* const FilterRow = (props) => {
*
* const courseCount = useSelector((state) => state.courses.all.count); //Get courses count from redux
*
* const {
* details,
* filter,
* initialTab,
* filters,
* subfilters,
* activeSubFilters,
* global,
* colors,
* t,
* labels,
* filterType } = props;
*
* const [activeFilter, setActiveFilter] = useState(initialTab || filters[0]);
*
* //Pass all props required by FilterListHeaderInner
* return <FilterListHeaderInner
* {...{
* showFilterArrow: true,
* details,
* disableFilter: false,
* disableSubFilters: false,
* count: filterType === "courses" ? courseCount : undefined,
* filter: activeFilter,
* subfilters,
* activeSubFilters,
* global,
* colors,
* t,
* labels,
* filterType,
* containerStyle: {
* backgroundColor: colors.bodyFrontBg
* }
* }}
* />
* }
*
* export default FilterRow;
*
* //In custom_code/index.js
*
* ...
*
* import FilterRow from "./components/FilterRow";
* export const applyCustomCode = externalCodeSetup => {
*
* externalCodeSetup.filterScreenApiHooks.setFilterComponent(props => {
* return <FilterRow {...props} />
* })
* }
*/
setFilterComponent = FilterComponent => {
this.FilterComponent = FilterComponent;
};
BeforeFilterComponent = null;
/**
* It is used to add a component before the filter row component.
* For example, you can place a component above the filter row.
* @method
* @param {React.ComponentType<BeforeFilterComponent>} BeforeFilterComponent
* @example <caption>Add a component above the filter row component</caption>
* ...
*
* import FastImage from "react-native-fast-image";
* import {CommonActions} from "@react-navigation/native";
* export const applyCustomCode = externalCodeSetup => {
*
* const CustomBeforeFilterComponent = (props) => {
*
* const navigateToCourse = () => {
*
* const courseId = 162;
*
* setTimeout(() => {
* props.navigation.dispatch(
* CommonActions.navigate({
* name: "CoursesSingleScreen",
* params: {
* id: courseId
* },
* key: courseId.toString()
* })
* );
* }, 0);
* };
*
* return (
* <>
* <TouchableWithoutFeedback onPress={navigateToCourse}>
* <FastImage
* style={{ width: "auto", height: 200 }}
* source={{
* uri: 'https://link-to-image.png',
* }}
* />
* </TouchableWithoutFeedback>
* <Text>Tap the image above to find out our recommended course for you!</Text>
* </>)
* }
* externalCodeSetup.filterScreenApiHooks.setBeforeFilterComponent(CustomBeforeFilterComponent)
* }
*/
setBeforeFilterComponent = BeforeFilterComponent => {
this.BeforeFilterComponent = BeforeFilterComponent;
};
AfterFilterComponent = null;
/**
* It is used to add a component after the filter row component.
* For example, you can add a component below the filter row.
* @method
* @param {React.ComponentType<AfterFilterComponent>} AfterFilterComponent
* @example <caption>Add a component below the filter row component</caption>
* ...
*
* import FastImage from "react-native-fast-image";
* import {CommonActions} from "@react-navigation/native";
* export const applyCustomCode = externalCodeSetup => {
*
* const CustomAfterFilterComponent = (props) => {
*
* const navigateToCourse = () => {
*
* const courseId = 162;
*
* setTimeout(() => {
* props.navigation.dispatch(
* CommonActions.navigate({
* name: "CoursesSingleScreen",
* params: {
* id: courseId
* },
* key: courseId.toString()
* })
* );
* }, 0);
* };
*
* return (
* <>
* <TouchableWithoutFeedback onPress={navigateToCourse}>
* <FastImage
* style={{ width: "auto", height: 200 }}
* source={{
* uri: 'https://link-to-image.png',
* }}
* />
* </TouchableWithoutFeedback>
* <Text>Tap the image above to find out our recommended course for you!</Text>
* </>)
* }
* externalCodeSetup.filterScreenApiHooks.setAfterFilterComponent(CustomAfterFilterComponent)
* }
*/
setAfterFilterComponent = AfterFilterComponent => {
this.AfterFilterComponent = AfterFilterComponent;
};
FilterItemComponent = null;
/**
* It can set a custom Filter Item (from the filters list) Component.
* @method
* @param {?React.ComponentType<FilterItemComponentProps>} FilterItemComponent
* @example <caption> Add background color for selected filter item </caption>
*
* ...
*
* externalCodeSetup.filterScreenApiHooks.setFilterItemComponent(props => {
*
* const {style, global, icon, text, isSelected, index, onPress } = props;
*
* return <TouchableOpacity
* style={styles.container}
* onPress={onPress}
* >
* <View style={styles.inner}>
* <View style={styles.labelContainer}>
* {!!icon && <Icon styles={styles.icon} icon={icon} tintColor="black"/>}
* <Text
* style={styles.label}
* >
* {text}
* </Text>
* </View>
* {isSelected && (
* <Icon
* tintColor={global.link.color}
* icon={{fontIconName: "check", weight: 300}}
* styles={{height: 22, width: 22}}
* />
* )}
* </View>
* </TouchableOpacity>
* });
*/
setFilterItemComponent = FilterItemComponent =>
(this.FilterItemComponent = FilterItemComponent);
shouldHideFilterAllButton = filterAllHiddenProps => false;
/**
* You can use this hook to hide the 'Filter All' button on screens such as courses, groups, or members screen.
* @method
* @param {FilterAllButtonHiddenCallback} filterAllHidden
* @example
*
* ...
* export const applyCustomCode = externalCodeSetup => {
* externalCodeSetup.filterScreenApiHooks.setFilterAllButtonHidden(filterType => {
* if (filterType === "courses"){
* return false;
* }
* return true;
* });
* }
*/
setFilterAllButtonHidden = filterAllHidden => {
this.shouldHideFilterAllButton = filterAllHidden;
};
activeSubFilters = activeSubFilters => activeSubFilters;
/**
* You can use this hook to set the active sub filters in the list screens.
* @method
* @param {ActiveSubFiltersProps} activeSubFilters
* @example
*
* externalCodeSetup.filterScreenApiHooks.setActiveSubFilters((defaultSubFilters) => {
* const groupSubFilters = {
* type: "active",
* group_type: "company"
* };
* return groupSubFilters;
* });
*
*/
setActiveSubFilters = activeSubFilters => {
this.activeSubFilters = activeSubFilters;
};
}
Source