App Codex Version: 1.0.0

Source

externalCode/courseSingle.ts

  1. import * as React from "react";
  2. import {TCourseViewModel, TTranslationFunction, TQuizViewModel} from "./types";
  3. import {NavigationService} from "./types";
  4. import {NavigationProp} from "@react-navigation/native";
  5. export const API_NAME = "courseSingleApi";
  7. /**
  8.  * CoursePropsFilterCallback
  9.  */
  10. type CoursePropsFilterCallback = {
  11. 	/**
  12. 	 * Course props
  13. 	 */
  14. 	oldProps: Record<any, any>
  15. };
  16. /**
  17.  * CourseStatusHiddenCallback
  18.  */
  19. type CourseStatusHiddenCallback = {
  20. 	course: TCourseViewModel,
  21. 	/**
  22. 	 * Returns `true` if course progress has started
  23. 	 */
  24. 	hasStarted: boolean,
  25. 	/**
  26. 	 * Course structure
  27. 	 */
  28. 	courseTree: Record<any, any>
  29. };
  30. /**
  31.  * CourseDescriptionHiddenCallback
  32.  */
  33. type CourseDescriptionHiddenCallback = {
  34. 	course: TCourseViewModel
  35. };
  37. /**
  38.  * CategoryTagsHiddenCallback
  39.  */
  40. type CategoryTagsHiddenCallback = {
  41. 	course: TCourseViewModel
  42. };
  44. /**
  45.  * TransformCourseActionButtonsCallback
  46.  */
  47. type TransformCourseActionButtonsCallback = {
  48. 	CourseActionBtn: JSX.Element,
  49. 	course: TCourseViewModel,
  50. 	t: Function,
  51. 	/**
  52. 	 * App global style
  53. 	 */
  54. 	global: Record<any, any>,
  55. 	/**
  56. 	 * App colors
  57. 	 */
  58. 	colors: Record<any, any>,
  59. 	/**
  60. 	 * Products associated to the course
  61. 	 */
  62. 	products: Record<any, any>[],
  63. 	navigation: NavigationService,
  65. 	/**
  66. 	 * Starts the course when called
  67. 	 */
  68. 	startCourse: Function,
  69. 	/**
  70. 	 * Continues the course when called for a course in progress
  71. 	 */
  72. 	continueCourse: Function,
  73. 	/**
  74. 	 * Renders the price component when called
  75. 	 */
  76. 	priceComponentRender: Function
  77. };
  79. /**
  80.  * CourseMaterialsProps
  81.  */
  82. type CourseMaterialsProps = {
  83. 	/**
  84. 	 * App global style
  85. 	 */
  86. 	global: Record<any, any>,
  87. 	/**
  88. 	 * App colors
  89. 	 */
  90. 	colors: Record<any, any>,
  92. 	t: TTranslationFunction,
  94. 	/**
  95. 	 * Contents of course materials field
  96. 	 */
  97. 	materials: string,
  98. 	/**
  99. 	 * Default styles for different tags
  100. 	 */
  101. 	tagsStyles: Record<any, any>,
  102. 	/**
  103. 	 * Default styles for course materials
  104. 	 */
  105. 	materialsStyles: Record<any, any>,
  106. 	/**
  107. 	 * Function to set a font style
  108. 	 */
  109. 	baseFontStyle: Function,
  111. 	navigation: NavigationProp<any, any>,
  112. 	/**
  113. 	 * Helper function that handles link press for the HTML component
  114. 	 */
  115. 	onLinkPress: Function
  116. };
  118. /**
  119.  * HeaderAuthorComponentProps
  120.  */
  121. type HeaderAuthorComponentProps = {
  122. 	/**
  123. 	 * Author details
  124. 	 */
  125. 	user: Record<any, any>,
  126. 	/**
  127. 	 * Returns `true` if course is using cover image
  128. 	 */
  129. 	lightStyle: boolean,
  130. 	/**
  131. 	 * App global style
  132. 	 */
  133. 	global: Record<any, any>,
  134. 	/**
  135. 	 * User id of course author
  136. 	 */
  137. 	userId: number,
  138. 	onUserProfilePress: Function,
  139. 	loadingInProgress: Function,
  140. 	t: TTranslationFunction
  141. };
  143. /**
  144.  * CourseTitleProps
  145.  */
  146. type CourseTitleProps = {
  147. 	course: TCourseViewModel,
  148. 	/**
  149. 	 * App global style
  150. 	 */
  151. 	_globalStyles: Record<any, any>,
  152. 	/**
  153. 	 * App colors
  154. 	 */
  155. 	colors: Record<any, any>,
  156. 	/**
  157. 	 * Returns `true` if course is using cover image
  158. 	 */
  159. 	lightStyle: boolean,
  161. 	/**
  162. 	 * Default title styles
  163. 	 */
  164. 	styles: Record<any, any>,
  166. 	/**
  167. 	 * Returns an object generated by React Native Animated
  168. 	 */
  169. 	animatedOpacity: Record<any, any>
  170. };
  172. /**
  173.  * CourseHeaderDetailsProps
  174.  */
  175. type CourseHeaderDetailsProps = {
  176. 	courseVM: TCourseViewModel,
  177. 	/**
  178. 	 * App global style
  179. 	 */
  180. 	global: Record<any, any>,
  181. 	/**
  182. 	 * App colors
  183. 	 */
  184. 	colors: Record<any, any>,
  186. 	labels: Record<any, any>,
  188. 	t: TTranslationFunction,
  190. 	/**
  191. 	 * Lessons count
  192. 	 */
  193. 	lCount: number,
  194. 	/**
  195. 	 * Topics count
  196. 	 */
  197. 	tCount: number,
  198. 	/**
  199. 	 * Quizzes count
  200. 	 */
  201. 	qCount: number,
  203. 	/**
  204. 	 * Can be used to determine if participants should be shown in the component
  205. 	 */
  206. 	learndashCourseParticipants: number,
  208. 	navigation: NavigationProp<any, any>,
  210. 	/**
  211. 	 * Returns `true` if participants should be shown
  212. 	 */
  213. 	shouldShowParticipants: Boolean,
  215. 	/**
  216. 	 * Returns `true` if course image should be shown
  217. 	 */
  218. 	shouldShowImageBackground: Boolean,
  220. 	/**
  221. 	 * Returns `true` if course video should be shown
  222. 	 */
  223. 	shouldShowVideo: Boolean,
  224. 	/**
  225. 	 * Returns `true` if "Course Includes" label should be shown
  226. 	 */
  227. 	shouldShowCourseIncludesTitle: Boolean,
  228. 	/**
  229. 	 * Returns `true` if lessons label should be shown
  230. 	 */
  231. 	shouldShowLessonsText: Boolean,
  232. 	/**
  233. 	 * Returns `true` if topics label should be shown
  234. 	 */
  235. 	shouldShowTopicsText: Boolean,
  236. 	/**
  237. 	 * Returns `true` if quizzes label should be shown
  238. 	 */
  239. 	shouldShowQuizzesText: Boolean,
  240. 	/**
  241. 	 * Returns `true` if course certificate label should be shown
  242. 	 */
  243. 	shouldShowCertificatesText: Boolean,
  245. 	/**
  246. 	 * Returns the lessons label
  247. 	 */
  248. 	lessonsText: String,
  249. 	/**
  250. 	 * Returns the topics label
  251. 	 */
  252. 	topicsText: String,
  253. 	/**
  254. 	 * Returns the quizzes label
  255. 	 */
  256. 	quizzesText: String,
  257. 	/**
  258. 	 * Returns the enrolled label
  259. 	 */
  260. 	enrolledText: String,
  261. 	/**
  262. 	 * Default styles
  263. 	 */
  264. 	styles: Record<any, any>
  265. };
  266. /**
  267.  * DownloadProgressComponentProps
  268.  */
  269. type DownloadProgressComponentProps = {
  270. 	/**
  271. 	 * Cancels the download progress
  272. 	 */
  273. 	onPress: Function,
  274. 	/**
  275. 	 * App colors
  276. 	 */
  277. 	colors: Record<any, any>,
  278. 	/**
  279. 	 * Current progress of download
  280. 	 */
  281. 	progress: number,
  282. 	/**
  283. 	 * Size of progress circle
  284. 	 */
  285. 	size: number,
  286. 	/**
  287. 	 * Returns `true` if component should use lightStyle
  288. 	 */
  289. 	lightStyle: boolean,
  290. 	/**
  291. 	 * Default hitSlop for component
  292. 	 */
  293. 	hitSlop: Record<string, number>,
  294. 	/**
  295. 	 * Default container style
  296. 	 */
  297. 	containerStyle: Record<any, any>
  298. };
  300. /**
  301.  * CourseHeaderRightProps
  302.  */
  303. type CourseHeaderRightProps = {
  304. 	/**
  305. 	 * App global style
  306. 	 */
  307. 	global: Record<any, any>,
  308. 	/**
  309. 	 * App colors
  310. 	 */
  311. 	colors: Record<any, any>,
  313. 	t: TTranslationFunction,
  314. 	courseVM: TCourseViewModel,
  316. 	/**
  317. 	 * Returns `true` if course should be open for guest user
  318. 	 */
  319. 	isShowingOpenCourseForGuestUser: boolean,
  321. 	/**
  322. 	 * Can be used to indicate what DownloadStatusIndicator component style should use
  323. 	 */
  324. 	contentStyle: Record<any, any>
  325. };
  327. /*
  328.  *
  329.  * DownloadIconProps
  330.  */
  331. type DownloadIconProps = {
  332. 	/**
  333. 	 * Returns the status of the course being downloaded. Status includes `Complete`, `Pending`, `Failed`, etc.
  334. 	 */
  335. 	status: string,
  336. 	/**
  337. 	 * Starts the download process
  338. 	 */
  339. 	start: Function,
  340. 	/**
  341. 	 * Cancels the download process
  342. 	 */
  343. 	cancel: Function,
  344. 	/**
  345. 	 * Opens a modal that contains actions available for the downloaded
  346. 	 */
  347. 	openOptions: Function,
  348. 	/**
  349. 	 * Icon size
  350. 	 */
  351. 	size: number,
  352. 	/**
  353. 	 * Returns `true` if component should use lightStyle
  354. 	 */
  355. 	lightStyle: boolean,
  356. 	/**
  357. 	 * App colors
  358. 	 */
  359. 	colors: Record<any, any>,
  360. 	/**
  361. 	 * Default color of icon
  362. 	 */
  363. 	idleIconColor: string,
  364. 	/**
  365. 	 * Default hitSlop for component
  366. 	 */
  367. 	hitSlop: Record<string, number>
  368. };
  370. /**
  371.  * CourseStartedHeaderDetailsProps
  372.  */
  373. type CourseStartedHeaderDetailsProps = {
  374. 	/**
  375. 	 * App global style
  376. 	 */
  377. 	global: Record<any, any>,
  378. 	/**
  379. 	 * App colors
  380. 	 */
  381. 	colors: Record<any, any>,
  383. 	t: TTranslationFunction,
  385. 	courseVM: TCourseViewModel,
  387. 	/**
  388. 	 * Default styles for the header component
  389. 	 */
  390. 	styles: Record<any, any>,
  392. 	/**
  393. 	 * Helper function for parsing dates
  394. 	 */
  395. 	formatDateFunc: Function
  396. };
  398. /**
  399.  * CourseContentTitleProps
  400.  */
  401. type CourseContentTitleProps = {
  402. 	/**
  403. 	 * App global style
  404. 	 */
  405. 	global: Record<any, any>,
  407. 	t: TTranslationFunction,
  409. 	labels: Record<any, any>,
  411. 	/**
  412. 	 * Returns `true` if course content is collapsable
  413. 	 */
  414. 	isCollapsable: boolean,
  416. 	/**
  417. 	 * Returns `true` if collapsable items are already expanded
  418. 	 */
  419. 	expanded: boolean,
  421. 	/**
  422. 	 * Hides all the collapsable items
  423. 	 */
  424. 	hideAll: Function,
  426. 	/**
  427. 	 * Expands all the collapsable items
  428. 	 */
  429. 	expand: Function
  430. };
  432. /**
  433.  * CourseSectionItemProps
  434.  */
  435. type CourseSectionItemProps = {
  436. 	/**
  437. 	 * Data about item to be rendered
  438. 	 */
  439. 	item: Record<any, any>,
  440. 	/**
  441. 	 * Returns progression of the item
  442. 	 */
  443. 	progression: number,
  444. 	/**
  445. 	 * App global style
  446. 	 */
  447. 	global: Record<any, any>,
  448. 	/**
  449. 	 * App colors
  450. 	 */
  451. 	colors: Record<any, any>,
  452. 	/**
  453. 	 * Returns `true` if navigation to the item is allowed
  454. 	 */
  455. 	allowNavigation: boolean,
  456. 	/**
  457. 	 * Navigates to the lesson; topic or quiz
  458. 	 */
  459. 	onItemPress: Function,
  460. 	/**
  461. 	 * Returns number of topics and quizzes for the top-level item.
  462. 	 * This can be used when determining if the lesson should be expandable or not.
  463. 	 */
  464. 	count: number,
  465. 	/**
  466. 	 * Result of using require() when fetching the appropriate icon for each item
  467. 	 */
  468. 	icon: number,
  469. 	/**
  470. 	 * Toggle or expand the item. This can be called when creating a custom IconComponent
  471. 	 */
  472. 	toggleExpand: Function,
  473. 	/**
  474. 	 * Returs the type of section item
  475. 	 */
  476. 	blockType: string | undefined,
  477. 	/**
  478. 	 * Calls an alert component which shows an error message
  479. 	 */
  480. 	showAlertMessage: Function,
  481. 	/**
  482. 	 * Default component for displaying the steps label in the item
  483. 	 */
  484. 	StepsComponent: JSX.Element,
  485. 	/**
  486. 	 * Default component for displaying the left-most icon in the item
  487. 	 */
  488. 	IconComponent: JSX.Element
  489. };
  490. /**
  491.  * QuizSectionTitleProps
  492.  */
  493. type QuizSectionTitleProps = {
  494. 	/**
  495. 	 * App global style
  496. 	 */
  497. 	global: Record<any, any>,
  499. 	t: TTranslationFunction
  500. };
  502. /**
  503.  * CourseDescriptionSectionTitleProps
  504.  */
  505. type CourseDescriptionSectionTitleProps = {
  506. 	/**
  507. 	 * Returns `true` if there are blocks to be rendered natively
  508. 	 */
  509. 	shouldRenderBlocks: boolean,
  510. 	courseVM: TCourseViewModel,
  511. 	/**
  512. 	 * App global style
  513. 	 */
  514. 	global: Record<any, any>,
  515. 	t: TTranslationFunction,
  516. 	labels: Record<any, any>
  517. };
  519. /**
  520.  * CourseMaterialsSectionTitleProps
  521.  */
  522. type CourseMaterialsSectionTitleProps = {
  523. 	/**
  524. 	 * App global style
  525. 	 */
  526. 	global: Record<any, any>,
  527. 	t: TTranslationFunction,
  528. 	labels: Record<any, any>
  529. };
  531. /**
  532.  * CourseDescriptionReadMoreComponentProps
  533.  */
  534. type CourseDescriptionReadMoreComponentProps = {
  535. 	courseVM: TCourseViewModel,
  536. 	/**
  537. 	 * Opens the desription modal
  538. 	 */
  539. 	openDescriptionModal: Function,
  540. 	/**
  541. 	 * App global style
  542. 	 */
  543. 	global: Record<any, any>,
  544. 	t: TTranslationFunction
  545. };
  547. /**
  548.  * WebViewOfflineComponentProps
  549.  */
  550. type WebViewOfflineComponentProps = {
  551. 	/**
  552. 	 * App global style
  553. 	 */
  554. 	global: Record<any, any>,
  555. 	t: TTranslationFunction,
  557. 	/**
  558. 	 * Default container style
  559. 	 */
  560. 	containerStyle: Record<any, any>,
  562. 	/**
  563. 	 * Default style of EmptyList component
  564. 	 */
  565. 	emptyListStyle: Record<any, any>
  566. };
  568. /**
  569.  * WebViewDescriptionComponentProps
  570.  */
  571. type WebViewDescriptionComponentProps = {
  572. 	/**
  573. 	 * Returns `true` if device is connected to an internet network
  574. 	 */
  575. 	online: boolean,
  576. 	t: TTranslationFunction,
  577. 	/**
  578. 	 * The default function used for determining how to handle webview requests.
  579. 	 */
  580. 	onShouldStartLoadWithRequest: Function,
  581. 	/**
  582. 	 * Default height limit
  583. 	 */
  584. 	heightLimit: number,
  585. 	/**
  586. 	 * Contains data of the web site to be loaded in the webview
  587. 	 */
  588. 	source: Record<any, any>,
  589. 	/**
  590. 	 * App global style
  591. 	 */
  592. 	global: Record<any, any>,
  593. 	/**
  594. 	 * App colors
  595. 	 */
  596. 	colors: Record<any, any>,
  597. 	/**
  598. 	 * Modal which shows up when the "Read More" component is pressed
  599. 	 */
  600. 	ModalHeaderComponent: React.FC
  601. };
  602. /**
  603.  * CourseQuizItemProps
  604.  */
  605. type CourseQuizItemProps = {
  606. 	item: TQuizViewModel,
  607. 	style: Record<any, any>,
  608. 	/**
  609. 	 * App global style
  610. 	 */
  611. 	global: Record<any, any>,
  612. 	/**
  613. 	 * App colors
  614. 	 */
  615. 	colors: Record<any, any>,
  616. 	/**
  617. 	 * Can be used to determine if actual progress should be shown or if item should be indicated as completed
  618. 	 */
  619. 	skipProgress: boolean,
  620. 	/**
  621. 	 * Navigates to the quiz
  622. 	 */
  623. 	onPress: Function,
  624. 	/**
  625. 	 * Returns `true` if navigation to the item is allowed
  626. 	 */
  627. 	allowNavigation: boolean,
  628. 	/**
  629. 	 * Default component for displaying the left-most icon in the item
  630. 	 */
  631. 	IconComponent: JSX.Element
  632. };
  634. /**
  635.  * LessonProgressStepsProps
  636.  */
  637. type LessonProgressStepsProps = {
  638. 	t: TTranslationFunction,
  639. 	/**
  640. 	 * Item details
  641. 	 */
  642. 	item: Record<any, any>,
  643. 	/**
  644. 	 * App global style
  645. 	 */
  646. 	global: Record<any, any>,
  647. 	/**
  648. 	 * App colors
  649. 	 */
  650. 	colors: Record<any, any>,
  652. 	/**
  653. 	 * Number of items inside the item
  654. 	 */
  655. 	count: number,
  656. 	course: TCourseViewModel,
  657. 	/**
  658. 	 * Describes the type of item being generated
  659. 	 */
  660. 	blockType: string,
  661. 	/**
  662. 	 * Number of completed steps inside the lesson
  663. 	 */
  664. 	completedSteps: number
  665. };
  667. /**
  668.  * @class
  669.  * Single Course Screen Hooks.
  670.  * Instance name: courseSingleApi
  671.   
  672.    Hooks to modify the individual courses’ pages.
  673.  * @example
  674.  * externalCodeSetup.courseSingleApi.METHOD_NAME
  675.  */
  676. export class CourseSingleApi {
  677. 	/**
  678. 	 * @deprecated
  679. 	 */
  680. 	// show number of lessons on course single screen beside the lesson title
  681. 	setShowLessonsCount = () => (this.showLessonsCount = true);
  682. 	/**
  683. 	 * @deprecated
  684. 	 */
  685. 	// show number of quizzes on course single screen beside the quizzes title
  686. 	setShowQuizzesCount = () => (this.showQuizzesCount = true);
  688. 	/**
  689. 	 * @deprecated
  690. 	 * @private
  691. 	 * @property {boolean} showLessonsCount
  692. 	 */
  693. 	showLessonsCount = true;
  694. 	/**
  695. 	 * @deprecated
  696. 	 * @private
  697. 	 * @property {boolean} showQuizzesCount
  698. 	 */
  699. 	showQuizzesCount = true;
  701. 	headerAuthorRenderer: React.ComponentType<
  702. 		HeaderAuthorComponentProps
  703. 	> | null = null;
  705. 	/**
  706. 	 * Sets component for overriding the default course author component.
  707. 	 * @method
  708. 	 * @param {React.ComponentType<HeaderAuthorComponentProps>} renderer
  709. 	 * @example <caption>Add more details besides the author name</caption>
  710. 	 *
  711. 	 * //In custom_code/components/CourseAuthor.js
  712. 	 *
  713. 	 * import React from 'react';
  714. 	 * import { View, Text } from 'react-native';
  715. 	 * import AppAvatar from "@src/components/AppAvatar";
  716. 	 * import AppTouchableOpacity from "@src/components/AppTouchableOpacity";
  717. 	 * import { getBestImageVariant } from "@src/utils/CCDataUtil";
  718. 	 * import { withUserClickHandler } from "@src/components/hocs/withUserClickHandler"; //Use BuddyBoss HOC for easier navigation
  719. 	 *
  720. 	 * const CourseAuthor = (props) => {
  721. 	 *
  722. 	 *    const { user, global, lightStyle, toUserBasedOnSettings } = props;
  723. 	 *
  724. 	 *    //Able navigate to profile of `user` because of wrapping component with HOC
  725. 	 *    const boundCallback = React.useMemo(
  726. 	 *	        () => toUserBasedOnSettings.bind(null, null, user),
  727. 	 *        [user]
  728. 	 *    );
  729. 	 *
  730. 	 *    //Use BuddyBoss getBestImageVariant helper function to get best image size for the component
  731. 	 *    const userAvatarUrl = React.useMemo(
  732. 	 *        () =>
  733. 	 *            !!user
  734. 	 *                ? user.avatar_urls
  735. 	 *                    ? getBestImageVariant(user.avatar_urls, 96)
  736. 	 *                    : user?.avatar?.thumb
  737. 	 *                : "",
  738. 	 *        [user]
  739. 	 *    );
  740. 	 *
  741. 	 *    return <View style={[global.row]}>
  742. 	 *        <AppTouchableOpacity onPress={boundCallback}>
  743. 	 *            <View>
  744. 	 *                {user && (
  745. 	 *                    <AppAvatar
  746. 	 *                        size={26}
  747. 	 *                        name={user.name}
  748. 	 *                        source={{
  749. 	 *                            uri: userAvatarUrl
  750. 	 *                        }}
  751. 	 *                    />
  752. 	 *                )}
  753. 	 *            </View>
  754. 	 *        </AppTouchableOpacity>
  755. 	 *        <View style={{ marginLeft: 8 }}>
  756. 	 *            {user && (
  757. 	 *
  758. 	 *                <>
  759. 	 *                    <Text
  760. 	 *                        style={[
  761. 	 *                            global.itemAuthorName,
  762. 	 *                            { marginBottom: 1 },
  763. 	 *                            lightStyle ? { color: "white" } : {}
  764. 	 *                        ]}
  765. 	 *                    >
  766. 	 *                        {user?.name}
  767. 	 *                    </Text>
  768. 	 *
  769. 	 *                    <Text> {user?.member_rest.user_email} </Text>
  770. 	 *                </>
  771. 	 *
  772. 	 *            )}
  773. 	 *        </View>
  774. 	 *    </View>
  775. 	 * }
  776. 	 *
  777. 	 * export default withUserClickHandler(CourseAuthor);
  778. 	 *
  779. 	 * //In custom_code/index.js
  780. 	 *
  781. 	 * ...
  782. 	 *
  783. 	 * import CourseAuthor from "./components/CourseAuthor";
  784. 	 * export const applyCustomCode = externalCodeSetup => {
  785. 	 *    externalCodeSetup.courseSingleApi.setHeaderAuthorRenderer((props) => <CourseAuthor {...props} />)
  786. 	 * }
  787. 	 */
  788. 	setHeaderAuthorRenderer = (
  789. 		renderer: React.ComponentType<HeaderAuthorComponentProps> | null
  790. 	) => {
  791. 		this.headerAuthorRenderer = renderer;
  792. 	};
  794. 	filterIncomingCourseProps = (props: Record<any, any>) => props;
  796. 	/**
  797. 	 * Sets the callback function `filterIncomingCourseProps` used for filtering props that are coming into Courses Single Screen component
  798. 	 * @param {CoursePropsFilterCallback} filterIncomingCourseProps
  799. 	 * @method
  800. 	 * @example <caption>Add a date object to incoming course props</caption>
  801. 	 * externalCodeSetup.courseSingleApi.setFilterIncomingCourseProps((props) => {
  802. 	 *   return {
  803. 	 *     ...props,
  804. 	 *     date: new Date()
  805. 	 *   }
  806. 	 * });
  807. 	 */
  808. 	setFilterIncomingCourseProps = (
  809. 		filterIncomingCourseProps: (
  810. 			filterIncomingCourseProps: Record<any, any>
  811. 		) => Record<any, any>
  812. 	) => {
  813. 		this.filterIncomingCourseProps = filterIncomingCourseProps;
  814. 	};
  816. 	isCategoryTagsHidden = (course: TCourseViewModel) => false;
  818. 	/**
  819. 	 * You can use this to show or hide the category tags in the course single screen.
  820. 	 * @param {CategoryTagsHiddenCallback} CategoryTagsHiddenCallback
  821. 	 * @method
  822. 	 * @example
  823. 	 *
  824. 	 * externalCodeSetup.courseSingleApi.setIsCategoryTagsHidden((course) => {
  825. 	 *  return false;
  826. 	 * })
  827. 	 */
  828. 	setIsCategoryTagsHidden = (
  829. 		isCategoryTagsHidden: (course: TCourseViewModel) => boolean
  830. 	) => {
  831. 		this.isCategoryTagsHidden = isCategoryTagsHidden;
  832. 	};
  834. 	CourseMaterialsComponent: React.ComponentType<
  835. 		CourseMaterialsProps
  836. 	> | null = null;
  838. 	/**
  839. 	 * Sets a component that overrides the content added in course materials field found in BuddyBoss site > Learndash LMS > Courses > [Selected Course] > Settings.
  840. 	 * @method
  841. 	 * @param {React.ComponentType<CourseMaterialsProps>} CourseMaterialsComponent
  842. 	 * @example <caption>Use a different component depending on the logged-in user</caption>
  843. 	 *
  844. 	 * ...
  845. 	 *
  846. 	 * const DEVICE_WIDTH = Dimensions.get("window").width;
  847. 	 * import { useSelector } from "react-redux";
  848. 	 * import WebView from "react-native-webview";
  849. 	 * const ent = require("ent");
  850. 	 *
  851. 	 * export const applyCustomCode = (externalCodeSetup) => {
  852. 	 *
  853. 	 *   externalCodeSetup.courseSingleApi.setCourseMaterialsComponent(({
  854. 	 *     tagsStyles,
  855. 	 *     materialsStyles,
  856. 	 *     baseFontStyle,
  857. 	 *     materials,
  858. 	 *     onLinkPress,
  859. 	 *     global
  860. 	 *   }) => {
  861. 	 *
  862. 	 *     const CourseMaterial = () => {
  863. 	 *       const user = useSelector((state) => state.user.userObject);
  864. 	 *
  865. 	 *       return user.id === 1 ?
  866. 	 *         <>
  867. 	 *           <Text style={{ marginBottom: 20 }}> Welcome back {user.name}! We prepared the materials for you. </Text>
  868. 	 *           <WebView source={{ uri: 'https://buddyboss.com' }} style={{ width: "auto", height: 300 }} />
  869. 	 *         </>
  870. 	 *         :
  871. 	 *         <View style={global.courseRoundBox}>
  872. 	 *           {typeof materials === "string" && (
  873. 	 *             <View style={{ paddingHorizontal: 15 }}>
  874. 	 *               <HTML
  875. 	 *                 tagsStyles={{ ...tagsStyles, ...materialsStyles }}
  876. 	 *                 baseFontStyle={baseFontStyle(15)}
  877. 	 *                 html={ent.decode(materials)}
  878. 	 *                 imagesMaxWidth={DEVICE_WIDTH - 32}
  879. 	 *                 onLinkPress={onLinkPress}
  880. 	 *               />
  881. 	 *             </View>
  882. 	 *           )}
  883. 	 *         </View>
  884. 	 *
  885. 	 *     }
  886. 	 *
  887. 	 *     return <CourseMaterial />
  888. 	 *
  889. 	 *   })
  890. 	 * }
  891. 	 */
  892. 	setCourseMaterialsComponent = (
  893. 		CourseMaterialsComponent: React.ComponentType<CourseMaterialsProps> | null
  894. 	) => {
  895. 		this.CourseMaterialsComponent = CourseMaterialsComponent;
  896. 	};
  898. 	transformCourseActionButtons: (
  899. 		CourseActionBtn: JSX.Element,
  900. 		course: TCourseViewModel,
  901. 		t: Function,
  902. 		colors: Record<any, any>,
  903. 		global: Record<any, any>,
  904. 		products: Record<any, any>[],
  905. 		navigation: NavigationService,
  906. 		startCourse: Function,
  907. 		continueCourse: Function,
  908. 		priceComponentRender: Function
  909. 	) => JSX.Element = CourseActionBtn => CourseActionBtn;
  911. 	/**
  912. 	 * You can transform the default course action buttons which are starting, buying or continuing a course by replacing it with your preferred action buttons.
  913. 	 * @param {TransformCourseActionButtonsCallback} transformCourseActionButtons
  914. 	 * @method
  915. 	 * @example <caption> Add more components for course action </caption>
  916. 	 *
  917. 	 * import CourseActionButton from "@src/components/Course/CourseActionButton";
  918. 	 * export const applyCustomCode = (externalCodeSetup) => {
  919. 	 *   externalCodeSetup.courseSingleApi.setTransformCourseActionButtons((
  920. 	 *     CourseActionBtn,
  921. 	 *     course,
  922. 	 *     t,
  923. 	 *     colors,
  924. 	 *     global,
  925. 	 *     products,
  926. 	 *     navigation,
  927. 	 *     startCourse,
  928. 	 *     continueCourse,
  929. 	 *     priceComponentRender) => {
  930. 	 *
  931. 	 *     return <>
  932. 	 *       <View style={{ paddingHorizontal: 20, paddingVertical: 10 }}>
  933. 	 *         <Text>To continue the course, tap the button below++</Text>
  934. 	 *       </View>
  935. 	 *
  936. 	 *       <View style={{
  937. 	 *         paddingHorizontal: 20,
  938. 	 *         paddingVertical: 16,
  939. 	 *         flexDirection: "row",
  940. 	 *         alignItems: "center",
  941. 	 *         justifyContent: "space-between"
  942. 	 *       }}>
  943. 	 *         {CourseActionBtn}
  944. 	 *         <CourseActionButton
  945. 	 *           title={"Go to Courses screen"}
  946. 	 *           onPress={() => navigation.navigate("CoursesScreen")}
  947. 	 *           style={{ backgroundColor: "cyan" }}
  948. 	 *         />
  949. 	 *       </View>
  950. 	 *     </>
  951. 	 *   })
  952. 	 *
  953. 	 * }
  954. 	 */
  956. 	setTransformCourseActionButtons = (
  957. 		transformCourseActionButtons: (
  958. 			CourseActionBtn: JSX.Element,
  959. 			course: TCourseViewModel,
  960. 			t: Function,
  961. 			colors: Record<any, any>,
  962. 			global: Record<any, any>,
  963. 			products: Record<any, any>[],
  964. 			navigation: NavigationService,
  965. 			startCourse: Function,
  966. 			continueCourse: Function,
  967. 			priceComponentRender: Function
  968. 		) => JSX.Element
  969. 	) => {
  970. 		this.transformCourseActionButtons = transformCourseActionButtons;
  971. 	};
  973. 	isCourseStatusHidden = (
  974. 		course: TCourseViewModel,
  975. 		hasStarted: boolean,
  976. 		courseTree: Record<any, any>
  977. 	) => false;
  979. 	/**
  980. 	 * You can use this hook to show or hide the course status component.
  981. 	 * @param {CourseStatusHiddenCallback} CourseStatusHiddenCallback
  982. 	 * @method
  983. 	 * @example <caption> Hide the course status component depending on the course title </caption>
  984. 	 *  externalCodeSetup.courseSingleApi.setIsCourseStatusHidden((course, hasStarted, courseTree) => {
  985. 	 *    if (course.title == "React Native"){
  986. 	 *      return true;
  987. 	 *    }
  988. 	 *    return false;
  989. 	 *  })
  990. 	 */
  991. 	setIsCourseStatusHidden = (
  992. 		isCourseStatusHidden: (
  993. 			course: TCourseViewModel,
  994. 			hasStarted: boolean,
  995. 			courseTree: Record<any, any>
  996. 		) => boolean
  997. 	) => {
  998. 		this.isCourseStatusHidden = isCourseStatusHidden;
  999. 	};
  1001. 	isCourseDescriptionHidden = (course: TCourseViewModel) => false;
  1003. 	/**
  1004. 	 * You can use this hook to show or hide the course description component.
  1005. 	 * @param {CourseDescriptionHiddenCallback} CourseDescriptionHiddenCallback
  1006. 	 * @method
  1007. 	 * @example <caption> Hide the course description depending on the course title </caption>
  1008. 	 *  externalCodeSetup.courseSingleApi.setIsCourseDescriptionHidden((course) => {
  1009. 	 *    if (course.title == "React Native"){
  1010. 	 *      return true;
  1011. 	 *    }
  1012. 	 *    return false;
  1013. 	 *  })
  1014. 	 */
  1015. 	setIsCourseDescriptionHidden = (
  1016. 		isCourseDescriptionHidden: (course: TCourseViewModel) => boolean
  1017. 	) => {
  1018. 		this.isCourseDescriptionHidden = isCourseDescriptionHidden;
  1019. 	};
  1021. 	CourseTitleComponent: React.ComponentType<CourseTitleProps> | null = null;
  1023. 	/**
  1024. 	 * You can use this to replace the course title component.
  1025. 	 * For example, you can use this to change the title's font size.
  1026. 	 * @method
  1027. 	 * @param {React.ComponentType<CourseTitleProps>} CourseTitleComponent
  1028. 	 * @example
  1029. 	 *
  1030. 	 * import React from "react";
  1031. 	 * import Animated from "react-native-reanimated";
  1032. 	 * import {View} from "react-native";
  1033. 	 * 
  1034. 	 * export const applyCustomCode = externalCodeSetup => {
  1035. 	 *     externalCodeSetup.courseSingleApi.setCourseTitleComponent(props => {
  1036. 	 *         const {
  1037. 	 *             course,
  1038. 	 *             _globalStyles,
  1039. 	 *             colors,
  1040. 	 *             styles,
  1041. 	 *             lightStyle,
  1042. 	 *             animatedOpacity
  1043. 	 *         } = props;
  1044. 	 * 
  1045. 	 *         return (
  1046. 	 *             <View>
  1047. 	 *                 <Animated.Text
  1048. 	 *                     style={[
  1049. 	 *                         _globalStyles.iosStyleScreenTitle,
  1050. 	 *                         styles.title,
  1051. 	 *                         lightStyle ? {color: "white"} : {color: colors.textColor},
  1052. 	 *                         animatedOpacity
  1053. 	 *                     ]}
  1054. 	 *                 >
  1055. 	 *                     {course.title}
  1056. 	 *                 </Animated.Text>
  1057. 	 *             </View>
  1058. 	 *         );
  1059. 	 *     });
  1060. 	 * };
  1062. 	 */
  1063. 	setCourseTitleComponent = (
  1064. 		CourseTitleComponent: React.ComponentType<CourseTitleProps> | null
  1065. 	) => {
  1066. 		this.CourseTitleComponent = CourseTitleComponent;
  1067. 	};
  1069. 	CourseHeaderDetails: React.ComponentType<
  1070. 		CourseHeaderDetailsProps
  1071. 	> | null = null;
  1073. 	/**
  1074. 	 * You can use this hook to customize the Course Status component of the LearnDash course details if a course is not yet in progress.
  1075. 	 * For example, you can use this to change the course's preview video, featured image or the "Course Includes" details.
  1076. 	 * @method
  1077. 	 * @param {React.ComponentType<CourseHeaderDetailsProps>} CourseHeaderDetails
  1078. 	 * @example
  1079. 	 *
  1080. 	 * import Icon from "@src/components/Icon";
  1081. 	 * import AppImageBackground from "@src/components/AppImageBackground";
  1082. 	 * import {CourseVideo} from "@src/components/Course/CourseStatus";
  1083. 	 * import AppAvatar from "@src/components/AppAvatar";
  1084. 	 *
  1085. 	 * export const applyCustomCode = (externalCodeSetup) => {
  1086. 	 *     externalCodeSetup.courseSingleApi.setCourseHeaderDetails(props => {
  1087. 	 *         const {
  1088. 	 *             courseVM,
  1089. 	 *             global,
  1090. 	 *             labels,
  1091. 	 *             colors,
  1092. 	 *             t,
  1093. 	 *             navigation,
  1094. 	 *             shouldShowParticipants,
  1095. 	 *             shouldShowImageBackground,
  1096. 	 *             shouldShowVideo,
  1097. 	 *             shouldShowCourseIncludesTitle,
  1098. 	 *             shouldShowLessonsText,
  1099. 	 *             shouldShowTopicsText,
  1100. 	 *             shouldShowQuizzesText,
  1101. 	 *             shouldShowCertificatesText,
  1102. 	 *             lessonsText,
  1103. 	 *             topicsText,
  1104. 	 *             quizzesText,
  1105. 	 *             enrolledText,
  1106. 	 *             styles
  1107. 	 *         } = props;
  1108. 	 *
  1109. 	 *         const size = 26;
  1110. 	 *
  1111. 	 *         return (
  1112. 	 *             <>
  1113. 	 *                 <View style={styles.mediaContainer}>
  1114. 	 *                     {shouldShowImageBackground && (
  1115. 	 *                         <AppImageBackground
  1116. 	 *                             source={{uri: courseVM.featuredUrl}}
  1117. 	 *                             style={{width: "100%", height: 200}}
  1118. 	 *                         />
  1119. 	 *                     )}
  1120. 	 *                     {shouldShowVideo && (
  1121. 	 *                         <CourseVideo
  1122. 	 *                             url={courseVM.videoUrl}
  1123. 	 *                             feature={courseVM.featuredUrl}
  1124. 	 *                             global={global}
  1125. 	 *                             colors={colors}
  1126. 	 *                             navigation={navigation}
  1127. 	 *                         />
  1128. 	 *                     )}
  1129. 	 *                 </View>
  1130. 	 *
  1131. 	 *                 <View style={styles.container}>
  1132. 	 *                     {shouldShowParticipants && (
  1133. 	 *                         <View style={{...global.row}}>
  1134. 	 *                             {courseVM.members
  1135. 	 *                                 .map(x => x.member_rest?.avatar?.thumb || "")
  1136. 	 *                                 .map((url, index) => (
  1137. 	 *                                     <AppAvatar
  1138. 	 *                                         key={url}
  1139. 	 *                                         style={[
  1140. 	 *                                             styles.avatar,
  1141. 	 *                                             {
  1142. 	 *                                                 left: index === 0 ? 0 : -10 	 *  index,
  1143. 	 *                                                 zIndex: index
  1144. 	 *                                             }
  1145. 	 *                                         ]}
  1146. 	 *                                         borderRadius={size / 2}
  1147. 	 *                                         size={size}
  1148. 	 *                                         source={{
  1149. 	 *                                             uri: url
  1150. 	 *                                         }}
  1151. 	 *                                     />
  1152. 	 *                                 ))}
  1153. 	 *                             <Text style={styles.enrolledText}>{enrolledText}</Text>
  1154. 	 *                         </View>
  1155. 	 *                     )}
  1156. 	 *                     {shouldShowCourseIncludesTitle && (
  1157. 	 *                         <Text style={styles.courseIncludesTitle}>
  1158. 	 *                             {t("course:includesTitle", {label: labels.course})}
  1159. 	 *                         </Text>
  1160. 	 *                     )}
  1161. 	 *                     {shouldShowLessonsText && (
  1162. 	 *                         <View style={{flexDirection: "row", marginBottom: 5}}>
  1163. 	 *                             <Icon
  1164. 	 *                                 size={30}
  1165. 	 *                                 webIcon={"IconAndroidGroup"}
  1166. 	 *                                 tintColor={colors.descLightTextColor}
  1167. 	 *                                 icon={{fontIconName: "book", weight: 400}}
  1168. 	 *                             />
  1169. 	 *                             <Text style={styles.courseIncludesText}>{lessonsText}</Text>
  1170. 	 *                         </View>
  1171. 	 *                     )}
  1172. 	 *                     {shouldShowTopicsText && (
  1173. 	 *                         <View style={{flexDirection: "row", marginBottom: 5, marginLeft: 5}}>
  1174. 	 *                             <Icon
  1175. 	 *                                 size={24}
  1176. 	 *                                 webIcon={"IconAndroidGroup"}
  1177. 	 *                                 tintColor={colors.descLightTextColor}
  1178. 	 *                                 icon={{fontIconName: "text", weight: 500}}
  1179. 	 *                             />
  1180. 	 *                             <Text style={styles.courseIncludesText}>{topicsText}</Text>
  1181. 	 *                         </View>
  1182. 	 *                     )}
  1183. 	 *                     {shouldShowQuizzesText && (
  1184. 	 *                         <View style={{flexDirection: "row", marginLeft: 5, marginBottom: 5}}>
  1185. 	 *                             <Icon
  1186. 	 *                                 size={24}
  1187. 	 *                                 webIcon={"IconAndroidGroup"}
  1188. 	 *                                 tintColor={colors.descLightTextColor}
  1189. 	 *                                 icon={{fontIconName: "question", weight: 100}}
  1190. 	 *                             />
  1191. 	 *                             <Text style={styles.courseIncludesText}>{quizzesText}</Text>
  1192. 	 *                         </View>
  1193. 	 *                     )}
  1194. 	 *                     {shouldShowCertificatesText && (
  1195. 	 *                         <View style={{flexDirection: "row", marginLeft: 5}}>
  1196. 	 *                             <Icon
  1197. 	 *                                 size={26}
  1198. 	 *                                 webIcon={"IconAndroidGroup"}
  1199. 	 *                                 tintColor={colors.descLightTextColor}
  1200. 	 *                                 icon={{fontIconName: "certificate", weight: 400}}
  1201. 	 *                             />
  1202. 	 *                             <Text style={styles.courseIncludesText}>
  1203. 	 *                                 {t("course:certificate", {label: labels.course})} asdfasdf
  1204. 	 *                             </Text>
  1205. 	 *                         </View>
  1206. 	 *                     )}
  1207. 	 *                 </View>
  1208. 	 *             </>
  1209. 	 *         );
  1210. 	 *     });
  1211. 	 * }
  1212. 	 *
  1213. 	 */
  1214. 	setCourseHeaderDetails = (
  1215. 		CourseHeaderDetails: React.ComponentType<CourseHeaderDetailsProps> | null
  1216. 	) => {
  1217. 		this.CourseHeaderDetails = CourseHeaderDetails;
  1218. 	};
  1220. 	HeaderRightComponent: React.ComponentType<
  1221. 		CourseHeaderRightProps
  1222. 	> | null = null;
  1224. 	/**
  1225. 	 * You can use this hook to customize the component on the top right corner of the CourseSingleScreen which the download icon usually occupies.
  1226. 	 * @method
  1227. 	 * @param {React.ComponentType<CourseHeaderRightProps>} HeaderRightComponent
  1228. 	 * @example
  1229. 	 * ...
  1230. 	 *
  1231. 	 * import AuthWrapper from "@src/components/AuthWrapper";
  1232. 	 * import DownloadStatusIndicator from "@src/components/Downloader/DownloadStatusIndicator";
  1233. 	 * import StatusBarWrapper from "@src/utils/StatusBarWrapper";
  1234. 	 * import { DownloadTypes } from "@src/services/enums/downloads";
  1235. 	 *
  1236. 	 * export const applyCustomCode = (externalCodeSetup: any) => {
  1237. 	 *
  1238. 	 *     externalCodeSetup.courseSingleApi.setHeaderRightComponent(({
  1239. 	 *         global,
  1240. 	 *         colors,
  1241. 	 *         t,
  1242. 	 *         courseVM,
  1243. 	 *         isShowingOpenCourseForGuestUser,
  1244. 	 *         contentStyle
  1245. 	 *     }) => (
  1246. 	 *         courseVM.hasAccess &&
  1247. 	 *         !courseVM.offlineDisabled && (
  1248. 	 *             <AuthWrapper
  1249. 	 *                 actionOnGuestLogin={
  1250. 	 *                     isShowingOpenCourseForGuestUser
  1251. 	 *                         ? null
  1252. 	 *                         : "showAuthScreen"
  1253. 	 *                 }
  1254. 	 *             >
  1255. 	 *                 <DownloadStatusIndicator
  1256. 	 *                     lightStyle={
  1257. 	 *                         contentStyle === StatusBarWrapper.lightStyle
  1258. 	 *                     }
  1259. 	 *                     postId={courseVM.id}
  1260. 	 *                     postType={DownloadTypes.course}
  1261. 	 *                     colors={colors}
  1262. 	 *                     global={global}
  1263. 	 *                     size={30}
  1264. 	 *                     t={t}
  1265. 	 *                     iconColor={colors.linkColor}
  1266. 	 *                     containerStyle={{
  1267. 	 *                         marginLeft: 15
  1268. 	 *                     }}
  1269. 	 *                 />
  1270. 	 *             </AuthWrapper>
  1271. 	 *         )
  1272. 	 *
  1273. 	 *     ))
  1274. 	 * }
  1275. 	 */
  1276. 	setHeaderRightComponent = (
  1277. 		HeaderRightComponent: React.ComponentType<CourseHeaderRightProps> | null
  1278. 	) => {
  1279. 		this.HeaderRightComponent = HeaderRightComponent;
  1280. 	};
  1282. 	DownloadProgressComponent: React.ComponentType<
  1283. 		DownloadProgressComponentProps
  1284. 	> | null = null;
  1286. 	/**
  1287. 	 * You can use this hook to customize the DownloadProgressComponent which shows up when the course is currently downloading.
  1288. 	 * @param {React.ComponentType<DownloadProgressComponentProps>} DownloadProgressComponent
  1289. 	 * @method
  1290. 	 * @example
  1291. 	 *
  1292. 	 * ...
  1293. 	 *
  1294. 	 * import ProgressCircle from "react-native-progress/Circle";
  1295. 	 * import {TouchableWithoutFeedback} from "react-native";
  1296. 	 * import Icon from "@src/components/Icon";
  1297. 	 * export const applyCustomCode = (externalCodeSetup) => {
  1298. 	 *
  1299. 	 *     externalCodeSetup.courseSingleApi.setDownloadProgressComponent(({
  1300. 	 *         size,
  1301. 	 *         lightStyle,
  1302. 	 *         colors,
  1303. 	 *         onPress,
  1304. 	 *         hitSlop,
  1305. 	 *         containerStyle,
  1306. 	 *         progress
  1307. 	 *     }) => {
  1308. 	 *         const iconSize = size - 10;
  1309. 	 *         const color = lightStyle ? "#fff" : colors.highlightColor;
  1310. 	 *         const unfilledColor = lightStyle
  1311. 	 *             ? "rgba(255, 255, 255, 0.24)"
  1312. 	 *             : "rgba(0, 0, 0, 0.24)";
  1313. 	 *         return (
  1314. 	 *             <TouchableWithoutFeedback onPress={onPress} hitSlop={hitSlop}>
  1315. 	 *                 <View style={containerStyle}>
  1316. 	 *                     <ProgressCircle
  1317. 	 *                         size={size}
  1318. 	 *                         progress={progress}
  1319. 	 *                         thickness={2}
  1320. 	 *                         unfilledColor={unfilledColor}
  1321. 	 *                         animated={true}
  1322. 	 *                         borderWidth={0}
  1323. 	 *                         color={color}
  1324. 	 *                     />
  1325. 	 *                     <Icon
  1326. 	 *                         icon={{fontIconName: "stop", weight: 300}}
  1327. 	 *                         tintColor={color}
  1328. 	 *                         styles={{height: iconSize, width: iconSize, position: "absolute"}}
  1329. 	 *                     />
  1330. 	 *                 </View>
  1331. 	 *             </TouchableWithoutFeedback>
  1332. 	 *         );
  1333. 	 *     })
  1334. 	 * }
  1335. 	 */
  1336. 	setDownloadProgressComponent = (
  1337. 		DownloadProgressComponent: React.ComponentType<
  1338. 			DownloadProgressComponentProps
  1339. 		> | null
  1340. 	) => {
  1341. 		this.DownloadProgressComponent = DownloadProgressComponent;
  1342. 	};
  1344. 	DownloadIcon: React.ComponentType<DownloadIconProps> | null = null;
  1346. 	/**
  1347. 	 * You can use this hook to customize the DownloadIcon which can be used to download a course, delete a course, or indicate if a course has already been downloaded.
  1348. 	 *
  1349. 	 * @param {React.ComponentType<DownloadIconProps>} DownloadIcon
  1350. 	 * @method
  1351. 	 * @example
  1352. 	 *
  1353. 	 * import React from "react";
  1354. 	 * import Animated from "react-native-reanimated";
  1355. 	 * import AppTouchableWithoutFeedback from "@src/components/AppTouchableWithoutFeedback";
  1356. 	 * import Icon from "@src/components/Icon";
  1357. 	 * export const applyCustomCode = externalCodeSetup => {
  1358. 	 *     externalCodeSetup.courseSingleApi.setDownloadIcon(
  1359. 	 *         ({colors, idleIconColor, lightStyle, start, size, hitSlop}) => {
  1360. 	 *             const iconColor =
  1361. 	 *                 idleIconColor ?? (lightStyle ? "#fff" : colors.linkColor);
  1362. 	 *             const action = start;
  1363. 	 *             return (
  1364. 	 *                 <AppTouchableWithoutFeedback
  1365. 	 *                     onPress={action}
  1366. 	 *                     debounce={500}
  1367. 	 *                     hitSlop={hitSlop}
  1368. 	 *                 >
  1369. 	 *
  1370. 	 *                     <Animated.View>
  1371. 	 *                         <Icon
  1372. 	 *                             icon={{fontIconName: "cloud-download", weight: 400}}
  1373. 	 *                             styles={{height: size, width: size}}
  1374. 	 *                             tintColor={iconColor}
  1375. 	 *                         />
  1376. 	 *                     </Animated.View>
  1377. 	 *                 </AppTouchableWithoutFeedback>
  1378. 	 *             );
  1379. 	 *         }
  1380. 	 *     );
  1381. 	 * };
  1382. 	 *
  1383. 	 */
  1384. 	setDownloadIcon = (
  1385. 		DownloadIcon: React.ComponentType<DownloadIconProps> | null
  1386. 	) => {
  1387. 		this.DownloadIcon = DownloadIcon;
  1388. 	};
  1390. 	CourseStartedHeaderDetails: React.ComponentType<
  1391. 		CourseStartedHeaderDetailsProps
  1392. 	> | null = null;
  1394. 	/**
  1395. 	 * You can use this hook to customize the Course Status component of the LearnDash course details if a course is in progress or is already complete.
  1396. 	 * @param {React.ComponentType<CourseStartedHeaderDetailsProps>} CourseStartedHeaderDetails
  1397. 	 * @method
  1398. 	 * @example
  1399. 	 *
  1400. 	 * ...
  1401. 	 *
  1402. 	 * import Icon from "@src/components/Icon";
  1403. 	 * import Progress from "@src/components/Progress";
  1404. 	 * export const applyCustomCode = (externalCodeSetup) => {
  1405. 	 *
  1406. 	 *     externalCodeSetup.courseSingleApi.setCourseStartedHeaderDetails(({
  1407. 	 *         global,
  1408. 	 *         colors,
  1409. 	 *         t,
  1410. 	 *         courseVM,
  1411. 	 *         styles,
  1412. 	 *         formatDateFunc
  1413. 	 *     }) =>  <View
  1414. 	 *                 style={[
  1415. 	 *                     global.row,
  1416. 	 *                     {
  1417. 	 *                         paddingHorizontal: 20,
  1418. 	 *                         paddingVertical: 16,
  1419. 	 *                         flex: 1
  1420. 	 *                     }
  1421. 	 *                 ]}
  1422. 	 *             >
  1423. 	 *                 <View style={{flex: 1, marginRight: 8}}>
  1424. 	 *                     {courseVM.hasAccess ? (
  1425. 	 *                         <Text style={[global.title, styles.title]}>
  1426. 	 *                             {!!!courseVM.completed
  1427. 	 *                                 ? t("course:inProgress")
  1428. 	 *                                 : t("course:completed")}
  1429. 	 *                         </Text>
  1430. 	 *                     ) : (
  1431. 	 *                         <Text style={[global.title, styles.title]}>
  1432. 	 *                             {t("course:enrolled")}
  1433. 	 *                         </Text>
  1434. 	 *                     )}
  1435. 	 *                     {courseVM.modifiedDate && (
  1436. 	 *                         <Text style={[global.courseDate, {marginTop: 5}]}>
  1437. 	 *                             {`${t("course:lastActivity")} ${formatDateFunc(
  1438. 	 *                                 courseVM.modifiedDate
  1439. 	 *                             )}`}
  1440. 	 *                         </Text>
  1441. 	 *                     )}
  1442. 	 *                 </View>
  1443. 	 *                 <Text style={[global.progressLargeText, styles.progressText]}>
  1444. 	 *                     {courseVM.progression + "%"}
  1445. 	 *                 </Text>
  1446. 	 *                 <Progress
  1447. 	 *                     size={32}
  1448. 	 *                     checkIcon={
  1449. 	 *                         <Icon
  1450. 	 *                             styles={{width: 36, height: 36}}
  1451. 	 *                             icon={{fontIconName: "check", weight: 200}}
  1452. 	 *                             tintColor={colors.successColor}
  1453. 	 *                         />
  1454. 	 *                     }
  1455. 	 *                     isCompleted={!!courseVM.completed}
  1456. 	 *                     progress={courseVM.progression}
  1457. 	 *                     colors={{
  1458. 	 *                         highlightColor: colors.highlightColor,
  1459. 	 *                         bodyBg: "#e7e9ec"
  1460. 	 *                     }}
  1461. 	 *                 />
  1462. 	 *             </View>
  1463. 	 *     );
  1464. 	 * }
  1465. 	 *
  1466. 	 *
  1467. 	 */
  1468. 	setCourseStartedHeaderDetails = (
  1469. 		CourseStartedHeaderDetails: React.ComponentType<
  1470. 			CourseStartedHeaderDetailsProps
  1471. 		> | null
  1472. 	) => {
  1473. 		this.CourseStartedHeaderDetails = CourseStartedHeaderDetails;
  1474. 	};
  1476. 	CourseContentTitle: React.ComponentType<
  1477. 		CourseContentTitleProps
  1478. 	> | null = null;
  1480. 	/**
  1481. 	 * You can use this hook to customize the "Course Content" title and the "Expand All" function.
  1482. 	 * @param {React.ComponentType<CourseContentTitleProps>} CourseContentTitle
  1483. 	 * @method
  1484. 	 * @example
  1485. 	 *
  1486. 	 * ...
  1487. 	 *
  1488. 	 * export const applyCustomCode = (externalCodeSetup) => {
  1489. 	 *   externalCodeSetup.courseSingleApi.setCourseContentTitle(({
  1490. 	 *       global,
  1491. 	 *       labels,
  1492. 	 *       isCollapsable,
  1493. 	 *       expanded,
  1494. 	 *       hideAll,
  1495. 	 *       expand,
  1496. 	 *       t
  1497. 	 *   }) => (
  1498. 	 *       <View
  1499. 	 *           style={[
  1500. 	 *               global.row,
  1501. 	 *               {flex: 1, justifyContent: "space-between", marginBottom: 9}
  1502. 	 *           ]}
  1503. 	 *       >
  1504. 	 *           <Text style={[global.courseRoundBoxTitleAbove, {marginBottom: 0}]}>
  1505. 	 *               {t("course:contentTitle", {label: labels.course})}
  1506. 	 *           </Text>
  1507. 	 *           {isCollapsable && (
  1508. 	 *               <TouchableWithoutFeedback
  1509. 	 *                   hitSlop={{top: 20, right: 20, bottom: 20, left: 20}}
  1510. 	 *                   onPress={() => {
  1511. 	 *                       if (expanded) {
  1512. 	 *                           hideAll();
  1513. 	 *                       } else {
  1514. 	 *                           expand();
  1515. 	 *                       }
  1516. 	 *                   }}
  1517. 	 *               >
  1518. 	 *                   <Text style={[global.link, {fontSize: 17}]}>
  1519. 	 *                       {expanded ? t("courses:collapseAll") : t("courses:expandAll")}
  1520. 	 *                   </Text>
  1521. 	 *               </TouchableWithoutFeedback>
  1522. 	 *           )}
  1523. 	 *       </View>
  1524. 	 *   ));
  1525. 	 * }
  1526. 	 *
  1527. 	 */
  1528. 	setCourseContentTitle = (
  1529. 		CourseContentTitle: React.ComponentType<CourseContentTitleProps> | null
  1530. 	) => {
  1531. 		this.CourseContentTitle = CourseContentTitle;
  1532. 	};
  1534. 	CourseSectionItem: React.ComponentType<CourseSectionItemProps> | null = null;
  1536. 	/**
  1537. 	 * You can use this hook to customize the Item components that are displayed as course content.
  1538. 	 * @param {React.ComponentType<CourseSectionItemProps>} CourseSectionItem
  1539. 	 * @method
  1540. 	 * @example <caption> Use your own icon component instead of the default IconComponent of lessons with children</caption>
  1541. 	 *
  1542. 	 * ...
  1543. 	 *
  1544. 	 * import Icon from "@src/components/Icon";
  1545. 	 * import LearnItem from "@src/components/Course/LearnItem";
  1546. 	 * export const applyCustomCode = (externalCodeSetup) => {
  1547. 	 *
  1548. 	 *     externalCodeSetup.courseSingleApi.setCourseSectionItem(props => {
  1549. 	 *         const {
  1550. 	 *             item,
  1551. 	 *             progression,
  1552. 	 *             global,
  1553. 	 *             colors,
  1554. 	 *             allowNavigation,
  1555. 	 *             onItemPress,
  1556. 	 *             StepsComponent,
  1557. 	 *             IconComponent,
  1558. 	 *             blockType,
  1559. 	 *             toggleExpand,
  1560. 	 *             count,
  1561. 	 *             showAlertMessage
  1562. 	 *         } = props;
  1563. 	 *
  1564. 	 *         let CustomIcon = IconComponent;
  1565. 	 *         if (blockType === "lesson" && count > 0) {
  1566. 	 *             CustomIcon = (
  1567. 	 *                 <TouchableOpacity onPress={toggleExpand}>
  1568. 	 *                     <Icon
  1569. 	 *                         tintColor={colors.descLightTextColor}
  1570. 	 *                         icon={{fontIconName: "heart", weight: 400}}
  1571. 	 *                         styles={{
  1572. 	 *                             opacity: !allowNavigation ? 0.45 : 1,
  1573. 	 *                             marginRight: 10,
  1574. 	 *                             width: 25,
  1575. 	 *                             height: 25
  1576. 	 *                         }}
  1577. 	 *                     />
  1578. 	 *                 </TouchableOpacity>
  1579. 	 *             );
  1580. 	 *         }
  1581. 	 *
  1582. 	 *         return (
  1583. 	 *             <LearnItem
  1584. 	 *                 key={item.id}
  1585. 	 *                 style={{
  1586. 	 *                     paddingLeft: 0
  1587. 	 *                 }}
  1588. 	 *                 item={{
  1589. 	 *                     id: item.id,
  1590. 	 *                     completed: item.completed,
  1591. 	 *                     title: item.title,
  1592. 	 *                     progression
  1593. 	 *                 }}
  1594. 	 *                 global={global}
  1595. 	 *                 colors={colors}
  1596. 	 *                 onPress={() => {
  1597. 	 *                     if (allowNavigation) {
  1598. 	 *                         showAlertMessage();
  1599. 	 *                         return false;
  1600. 	 *                     }
  1601. 	 *                     onItemPress();
  1602. 	 *                 }}
  1603. 	 *                 allowNavigation={allowNavigation}
  1604. 	 *                 beforeProgress={StepsComponent}
  1605. 	 *                 beforeLabel={CustomIcon}
  1606. 	 *             />
  1607. 	 *         );
  1608. 	 *     });
  1609. 	 * }
  1610. 	 */
  1611. 	setCourseSectionItem = (
  1612. 		CourseSectionItem: React.ComponentType<CourseSectionItemProps> | null
  1613. 	) => {
  1614. 		this.CourseSectionItem = CourseSectionItem;
  1615. 	};
  1617. 	QuizSectionTitle: React.ComponentType<QuizSectionTitleProps> | null = null;
  1619. 	/**
  1620. 	 * You can use this hook to customize the component that displays the "Final Quizzes" text.
  1621. 	 * @method
  1622. 	 * @param {React.ComponentType<QuizSectionTitleProps>} QuizSectionTitle
  1623. 	 * @example
  1624. 	 *
  1625. 	 * ...
  1626. 	 *
  1627. 	 * externalCodeSetup.courseSingleApi.setQuizSectionTitle(({global, t}) => (
  1628. 	 *   <Text style={global.courseRoundBoxSectionTitle}>
  1629. 	 *       {t("course:finalQuizzes")}
  1630. 	 *   </Text>
  1631. 	 * ));
  1632. 	 */
  1633. 	setQuizSectionTitle = (
  1634. 		QuizSectionTitle: React.ComponentType<QuizSectionTitleProps> | null
  1635. 	) => {
  1636. 		this.QuizSectionTitle = QuizSectionTitle;
  1637. 	};
  1639. 	CourseDescriptionSectionTitle: React.ComponentType<
  1640. 		CourseDescriptionSectionTitleProps
  1641. 	> | null = null;
  1643. 	/**
  1644. 	 * You can use this hook to customize the component that displays the "Course Description" text.
  1645. 	 * @method
  1646. 	 * @param {React.ComponentType<CourseDescriptionSectionTitleProps>} CourseDescriptionSectionTitle
  1647. 	 * @example
  1648. 	 *
  1649. 	 * ...
  1650. 	 *
  1651. 	 * export const applyCustomCode = (externalCodeSetup) => {
  1652. 	 *     externalCodeSetup.courseSingleApi.setCourseDescriptionSectionTitle(
  1653. 	 *         ({shouldRenderBlocks, courseVM, global, labels, t}) => {
  1654. 	 *             if (shouldRenderBlocks || courseVM.content) {
  1655. 	 *                 return (
  1656. 	 *                     <Text style={[global.courseRoundBoxTitleAbove]}>
  1657. 	 *                         {t("course:descriptionTitle", {
  1658. 	 *                             label: labels.course
  1659. 	 *                         })}
  1660. 	 *                     </Text>
  1661. 	 *                 );
  1662. 	 *             }
  1663. 	 *
  1664. 	 *             return null;
  1665. 	 *         }
  1666. 	 *     );
  1667. 	 * }
  1668. 	 */
  1669. 	setCourseDescriptionSectionTitle = (
  1670. 		CourseDescriptionSectionTitle: React.ComponentType<
  1671. 			CourseDescriptionSectionTitleProps
  1672. 		> | null
  1673. 	) => {
  1674. 		this.CourseDescriptionSectionTitle = CourseDescriptionSectionTitle;
  1675. 	};
  1677. 	CourseMaterialsSectionTitle: React.ComponentType<
  1678. 		CourseMaterialsSectionTitleProps
  1679. 	> | null = null;
  1681. 	/**
  1682. 	 * You can use this hook to customize the component that displays the "Course Materials" text.
  1683. 	 * @method
  1684. 	 * @param {React.ComponentType<CourseMaterialsSectionTitleProps>} CourseMaterialsSectionTitle
  1685. 	 * @example
  1686. 	 *
  1687. 	 * ...
  1688. 	 *
  1689. 	 * export const applyCustomCode = (externalCodeSetup) => {
  1690. 	 *  externalCodeSetup.courseSingleApi.setCourseMaterialsSectionTitle(
  1691. 	 *    ({global, t, labels}) => (
  1692. 	 *        <Text style={[global.courseRoundBoxTitleAbove, {marginBottom: 20}]}>
  1693. 	 *            {t("course:courseMaterials", {label: labels.course})}
  1694. 	 *        </Text>
  1695. 	 *    )
  1696. 	 *  );
  1697. 	 * }
  1698. 	 */
  1699. 	setCourseMaterialsSectionTitle = (
  1700. 		CourseMaterialsSectionTitle: React.ComponentType<
  1701. 			CourseMaterialsSectionTitleProps
  1702. 		> | null
  1703. 	) => {
  1704. 		this.CourseMaterialsSectionTitle = CourseMaterialsSectionTitle;
  1705. 	};
  1707. 	CourseDescriptionReadMoreComponent: React.ComponentType<
  1708. 		CourseDescriptionReadMoreComponentProps
  1709. 	> | null = null;
  1711. 	/**
  1712. 	 * You can use this hook to customize the "Read More" text that shows the course description in a modal when pressed.
  1713. 	 * @method
  1714. 	 * @param {React.ComponentType<CourseDescriptionReadMoreComponentProps>} CourseDescriptionReadMoreComponent
  1715. 	 * @example
  1716. 	 *
  1717. 	 * ...
  1718. 	 * import AppTouchableWithoutFeedback from "@src/components/AppTouchableWithoutFeedback";
  1719. 	 * export const applyCustomCode = (externalCodeSetup) => {
  1720. 	 *     externalCodeSetup.courseSingleApi.setCourseDescriptionReadMoreComponent(({
  1721. 	 *         courseVM,
  1722. 	 *         openDescriptionModal,
  1723. 	 *         global,
  1724. 	 *         t
  1725. 	 *     }) => {
  1726. 	 *         if (courseVM.contentNative.length > 1) {
  1727. 	 *             return <View style={{alignItems: "center"}}>
  1728. 	 *                 <AppTouchableWithoutFeedback
  1729. 	 *                     onPress={openDescriptionModal}
  1730. 	 *                 >
  1731. 	 *                     <Text
  1732. 	 *                         style={[
  1733. 	 *                             global.linkRegular,
  1734. 	 *                             {
  1735. 	 *                                 paddingHorizontal: 20,
  1736. 	 *                                 paddingVertical: 10
  1737. 	 *                             }
  1738. 	 *                         ]}
  1739. 	 *                     >
  1740. 	 *                         {t("courses:readMore")}
  1741. 	 *                     </Text>
  1742. 	 *                 </AppTouchableWithoutFeedback>
  1743. 	 *             </View>
  1744. 	 *         }
  1745. 	 *         return null
  1746. 	 *     })
  1747. 	 * }
  1748. 	 */
  1749. 	setCourseDescriptionReadMoreComponent = (
  1750. 		CourseDescriptionReadMoreComponent: React.ComponentType<
  1751. 			CourseDescriptionReadMoreComponentProps
  1752. 		> | null
  1753. 	) => {
  1754. 		this.CourseDescriptionReadMoreComponent = CourseDescriptionReadMoreComponent;
  1755. 	};
  1757. 	WebViewOfflineComponent: React.ComponentType<
  1758. 		WebViewOfflineComponentProps
  1759. 	> | null = null;
  1761. 	/**
  1762. 	 * You can use this hook to customize the component that displays a "This content is not available offline" message if a webview is used for rendering the course description while the device is offline.
  1763. 	 * @method
  1764. 	 * @param {React.ComponentType<WebViewOfflineComponentProps>} WebViewOfflineComponent
  1765. 	 * @example
  1766. 	 *
  1767. 	 * ...
  1768. 	 *
  1769. 	 * import EmptyList from "@src/components/EmptyList";
  1770. 	 *
  1771. 	 * export const applyCustomCode = (externalCodeSetup) => {
  1772. 	 *     externalCodeSetup.courseSingleApi.setWebViewOfflineComponent(
  1773. 	 *         ({containerStyle, t, global, emptyListStyle}) => (
  1774. 	 *             <View style={containerStyle}>
  1775. 	 *                 <Text>Please connect to an internet network</Text>
  1776. 	 *                 <EmptyList
  1777. 	 *                     emptyText={{
  1778. 	 *                         title: t("common:contentOfflineMessage"),
  1779. 	 *                         icon: {fontIconName: "wifi-slash", weight: 400}
  1780. 	 *                     }}
  1781. 	 *                     global={global}
  1782. 	 *                     style={emptyListStyle}
  1783. 	 *                 />
  1784. 	 *             </View>
  1785. 	 *         )
  1786. 	 *     );
  1787. 	 * }
  1788. 	 */
  1789. 	setWebViewOfflineComponent = (
  1790. 		WebViewOfflineComponent: React.ComponentType<
  1791. 			WebViewOfflineComponentProps
  1792. 		> | null
  1793. 	) => {
  1794. 		this.WebViewOfflineComponent = WebViewOfflineComponent;
  1795. 	};
  1797. 	WebViewDescriptionComponent: React.ComponentType<
  1798. 		WebViewDescriptionComponentProps
  1799. 	> | null = null;
  1801. 	/**
  1802. 	 * You can use this hook to replace the webview being used in the course description.
  1803. 	 * For example, you can choose to replace it with the default react-native webview.
  1804. 	 * @method
  1805. 	 * @param {React.ComponentType<WebViewDescriptionComponentProps>} WebViewDescriptionComponent
  1806. 	 * @example
  1807. 	 *
  1808. 	 * ...
  1809. 	 *
  1810. 	 * import WebViewWithMore from "@src/components/WebViewWithMore";
  1811. 	 * export const applyCustomCode = (externalCodeSetup) => {
  1812. 	 *     externalCodeSetup.courseSingleApi.setWebViewDescriptionComponent(
  1813. 	 *         ({
  1814. 	 *             online,
  1815. 	 *             t,
  1816. 	 *             onShouldStartLoadWithRequest,
  1817. 	 *             heightLimit,
  1818. 	 *             source,
  1819. 	 *             global,
  1820. 	 *             colors,
  1821. 	 *             ModalHeaderComponent
  1822. 	 *         }) => (
  1823. 	 *             <WebViewWithMore
  1824. 	 *                 online={online}
  1825. 	 *                 t={t}
  1826. 	 *                 onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
  1827. 	 *                 disableLoadingPadding={true}
  1828. 	 *                 height={heightLimit}
  1829. 	 *                 source={source}
  1830. 	 *                 global={global}
  1831. 	 *                 colors={colors}
  1832. 	 *                 ModalHeaderComponent={ModalHeaderComponent}
  1833. 	 *             />
  1834. 	 *         )
  1835. 	 *     );
  1836. 	 * }
  1837. 	 */
  1838. 	setWebViewDescriptionComponent = (
  1839. 		WebViewDescriptionComponent: React.ComponentType<
  1840. 			WebViewDescriptionComponentProps
  1841. 		> | null
  1842. 	) => {
  1843. 		this.WebViewDescriptionComponent = WebViewDescriptionComponent;
  1844. 	};
  1846. 	CourseQuizItem: React.ComponentType<CourseQuizItemProps> | null = null;
  1848. 	/**
  1849. 	 * You can use this hook to customize the Item components that are displayed as final quizzes.
  1850. 	 * @param {React.ComponentType<CourseQuizItemProps>} CourseQuizItem
  1851. 	 * @method
  1852. 	 * @example
  1853. 	 *
  1854. 	 * ...
  1855. 	 *
  1856. 	 * import LearnItem from "@src/components/Course/LearnItem";
  1857. 	 *
  1858. 	 * export const applyCustomCode = (externalCodeSetup) => {
  1859. 	 *     externalCodeSetup.courseSingleApi.setCourseQuizItem(
  1860. 	 *         ({
  1861. 	 *             item,
  1862. 	 *             style,
  1863. 	 *             global,
  1864. 	 *             colors,
  1865. 	 *             skipProgress,
  1866. 	 *             onPress,
  1867. 	 *             allowNavigation,
  1868. 	 *             IconComponent
  1869. 	 *         }) => (
  1870. 	 *             <LearnItem
  1871. 	 *                 key={item.id}
  1872. 	 *                 style={style}
  1873. 	 *                 item={item}
  1874. 	 *                 global={global}
  1875. 	 *                 colors={colors}
  1876. 	 *                 skipProgress={skipProgress}
  1877. 	 *                 onPress={onPress}
  1878. 	 *                 allowNavigation={allowNavigation}
  1879. 	 *                 beforeLabel={IconComponent}
  1880. 	 *             />
  1881. 	 *         )
  1882. 	 *     );
  1883. 	 * }
  1884. 	 *
  1885. 	 */
  1886. 	setCourseQuizItem = (
  1887. 		CourseQuizItem: React.ComponentType<CourseQuizItemProps> | null
  1888. 	) => {
  1889. 		this.CourseQuizItem = CourseQuizItem;
  1890. 	};
  1892. 	LessonProgressStepsComponent: React.ComponentType<
  1893. 		LessonProgressStepsProps
  1894. 	> | null = null;
  1895. 	/**
  1896. 	 * You can use this to replace the course lesson progress step component.
  1897. 	 * @method
  1898. 	 * @param {React.ComponentType<LessonProgressStepsProps>} LessonProgressStepsComponent
  1899. 	 * @example <caption>Replace the course lesson progress steps component</caption>
  1900. 	 *
  1901. 	 * export const applyCustomCode = (externalCodeSetup) => {
  1902. 	 *     externalCodeSetup.courseSingleApi.setLessonProgressStepsComponent(props => {
  1903. 	 *         const {count, completedSteps, blockType, global, t} = props;
  1904. 	 *
  1905. 	 *         return (
  1906. 	 *             !!count &&
  1907. 	 *             count > 0 &&
  1908. 	 *             blockType === "lesson" ? (
  1909. 	 *                 <Text style={[global.caption]}>
  1910. 	 *                     {`${t("courses:stepsOutOf", {completedSteps, count})}`}
  1911. 	 *                 </Text>
  1912. 	 *             ) : <></>
  1913. 	 *         );
  1914. 	 *     });
  1915. 	 * }
  1916. 	 */
  1917. 	setLessonProgressStepsComponent = (
  1918. 		LessonProgressStepsComponent: React.ComponentType<
  1919. 			LessonProgressStepsProps
  1920. 		> | null
  1921. 	) => {
  1922. 		this.LessonProgressStepsComponent = LessonProgressStepsComponent;
  1923. 	};
  1924. }