import * as React from "react";
/**
* @typedef {Object} LearnTopicAfterContentRenderProps
* @property {LearnTopicViewModel} topic
* @property {Object} global App global style
* @property {Object} colors App colors
* @property {NavigationService} navigation
*/
/**
* @typedef {Object} LearnTopicViewModel
* @property {Number} id Topic id
* @property {Object} title Topic title
* @property {Object} content Content of topic
* @property {String} date Date created
* @property {String} date_gmt Date created
* @property {String} modified Date modified
* @property {String} modified_gmt Date modified
* @property {String} link Url to topic
* @property {String} slug Slug used for topic
* @property {Number} author Author's id
* @property {Number} featured_media Featured media of topic
* @property {Number} course Course id of topic's parent
* @property {Number} lesson Lesson id of topic's parent
* @property {String} materials Topic materials
* @property {String} video Url for video progression
*/
/**
* @typedef {Function} LearnTopicAfterContentRendererFunction
* @param {LearnTopicAfterContentRenderProps} props
* @return {?React.ComponentType<any>}
*/
/**
* @typedef {Function} TransformTopicActionButtonsCallback
* @property {React.ComponentType} topicButton Topic action button
* @property {Boolean} showComplete Returns `true` if "Mark as Complete" button should be shown
* @property {Object} global App global style
* @property {Object} colors App colors
* @property {TopicViewModel} topic
* @property {Boolean} completing Returns `true` if topic is being completed
* @property {Object} labels Labels in the topic
* @property {Function} handleComplete Function that marks the topic as complete
*/
/**
* @typedef {Object} LearnTopicProps
* @property {TopicViewModel} topic
* @return {Boolean}
*/
/**
* @class
* Learn Topic Screen Hooks.
* Instance name: learnTopicSingleScreenApi
You can use this hook to customize the learn topic screen such as by adding a component by the topic content.
* @example
* externalCodeSetup.learnTopicSingleScreenApi.METHOD_NAME
*/
export class LearnTopicSingleScreenHooksApi {
afterContentRenderer = renderProps => null;
/**
* It adds a component after the topic content so you can customize the information to be displayed.
* @method
* @param {LearnTopicAfterContentRendererFunction} renderFunction
* @example
* externalCodeSetup.learnTopicSingleScreenApi.setAfterContentRenderer((topicObject, global, colors, navigation) => (
* <TouchableOpacity onPress={() => navigation.navigate("CoursesScreen")}>
* <Text style={{fontSize: 12}}> Tap to go back to courses list</Text>
* </TouchableOpacity>
* ))
*/
setAfterContentRenderer = renderFunction => {
this.afterContentRenderer = renderFunction;
};
transformTopicActionButtons = (
topicButton,
showComplete,
global,
colors,
lesson,
completing,
labels,
handleComplete
) => topicButton;
/**
* You can transform the default lesson action button by replacing it with your preferred action buttons.
* For example, you can add an inline button to the topic screen for marking topic completion.
* @param {TransformTopicActionButtonsCallback} transformTopicActionButtons
* @method
* @example <caption> Add more components for topic action </caption>
*
* externalCodeSetup.learnTopicSingleScreenApi.setTransformTopicActionButtons((
* topicButton,
* showComplete,
* global,
* colors,
* topic,
* completing,
* labels,
* handleComplete) => {
*
* const Buttons =
* <View style={[global.row, { backgroundColor: "#fff" }]}>
*
* <View style={{ width: "45%", backgroundColor: "#fff", paddingHorizontal: 20, paddingVertical: 15 }}>
* <AppTouchableOpacity
* style={[
* global.completeLessonButtonW,
* { flex: 1, backgroundColor: colors.primaryButtonBg }
* ]}
* onPress={() => {
* //Do function...
* }}
* >
* <View style={global.row}>
* <View style={global.linkWithArrow}>
* <Text
* style={{ color: "#fff", fontWeight: "bold" }}
* >
* Questions?
* </Text>
* </View>
* </View>
* </AppTouchableOpacity>
* </View>
* <View style={{ width: "45%", marginLeft: "auto" }}>
* {topicButton}
* </View>
* </View>
*
* return Buttons;
* })
*/
setTransformTopicActionButtons = transformTopicActionButtons => {
this.transformTopicActionButtons = transformTopicActionButtons;
};
showMarkAsComplete = topic => topic;
/**
* Use this to hide or show the mark as complete component.
* @method
* @param {LearnTopicProps} topic
* @example
* externalCodeSetup.learnTopicSingleScreenApi.setShowMarkAsComplete((topic) => false);
*/
setShowMarkAsComplete = showMarkAsComplete => {
this.showMarkAsComplete = showMarkAsComplete;
};
}
Source