@selfcommunity/react-templates 0.4.5-courses.146 → 0.4.5-courses.148

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,3 @@
1
- import { SCCourseLessonType, SCCourseType } from '@selfcommunity/types';
2
1
  import { LessonAppbarProps, LessonDrawerProps } from '@selfcommunity/react-ui';
3
2
  export interface LessonProps {
4
3
  /**
@@ -6,27 +5,18 @@ export interface LessonProps {
6
5
  * @default null
7
6
  */
8
7
  className?: string;
9
- /**
10
- * The course object
11
- */
12
- course?: SCCourseType;
13
8
  /**
14
9
  * The course id
15
10
  */
16
- courseId?: string | number;
11
+ courseId: string | number;
17
12
  /**
18
13
  * The section id
19
14
  */
20
15
  sectionId: string | number;
21
- /**
22
- * The lesson object
23
- * @default null
24
- */
25
- lesson?: SCCourseLessonType;
26
16
  /**
27
17
  * The lesson id
28
18
  */
29
- lessonId?: string | number;
19
+ lessonId: string | number;
30
20
  /**
31
21
  * Props to spread to LessonAppbar Component
32
22
  * @default {}
@@ -33,24 +33,20 @@ const Container = (0, styles_1.styled)(material_1.Box, {
33
33
  shouldForwardProp: (prop) => prop !== 'open'
34
34
  })(() => ({}));
35
35
  function Lesson(inProps) {
36
- var _a, _b, _c, _d, _e, _f, _g, _h;
36
+ var _a, _b, _c, _d, _e, _f, _g;
37
37
  // PROPS
38
38
  const props = (0, system_1.useThemeProps)({
39
39
  props: inProps,
40
40
  name: constants_1.PREFIX
41
41
  });
42
- const { className = null, course, courseId, sectionId, lesson = null, lessonId, LessonAppbarProps = {}, LessonDrawerProps = {}, isEditor = false, editMode = false, onEditModeClose = null, onLessonChange = null, onActivePanelChange = null } = props, rest = tslib_1.__rest(props, ["className", "course", "courseId", "sectionId", "lesson", "lessonId", "LessonAppbarProps", "LessonDrawerProps", "isEditor", "editMode", "onEditModeClose", "onLessonChange", "onActivePanelChange"]);
42
+ const { className = null, courseId, sectionId, lessonId, LessonAppbarProps = {}, LessonDrawerProps = {}, isEditor = false, editMode = false, onEditModeClose = null, onLessonChange = null, onActivePanelChange = null } = props, rest = tslib_1.__rest(props, ["className", "courseId", "sectionId", "lessonId", "LessonAppbarProps", "LessonDrawerProps", "isEditor", "editMode", "onEditModeClose", "onLessonChange", "onActivePanelChange"]);
43
43
  // HOOKS
44
44
  const theme = (0, material_1.useTheme)();
45
45
  const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
46
46
  const [_lessonId, setLessonId] = (0, react_1.useState)(lessonId);
47
47
  const [_sectionId, setSectionId] = (0, react_1.useState)(sectionId);
48
- const { scLesson, setSCLesson } = (0, react_core_1.useSCFetchLesson)({ id: _lessonId, lesson, courseId: courseId !== null && courseId !== void 0 ? courseId : lesson.course_id, sectionId: _sectionId });
49
- const { scCourse, setSCCourse } = (0, react_core_1.useSCFetchCourse)({
50
- id: courseId !== null && courseId !== void 0 ? courseId : lesson.course_id,
51
- course,
52
- params: { view: isEditor ? api_services_1.CourseInfoViewType.EDIT : api_services_1.CourseInfoViewType.USER }
53
- });
48
+ const { scLesson, setSCLesson } = (0, react_core_1.useSCFetchLesson)({ id: _lessonId, courseId, sectionId: _sectionId });
49
+ const { scCourse, setSCCourse } = (0, react_core_1.useSCFetchCourse)({ id: courseId, params: { view: isEditor ? api_services_1.CourseInfoViewType.EDIT : api_services_1.CourseInfoViewType.USER } });
54
50
  // STATE
55
51
  const [activePanel, setActivePanel] = (0, react_1.useState)(null);
56
52
  const [settings, setSettings] = (0, react_1.useState)(null);
@@ -62,18 +58,23 @@ function Lesson(inProps) {
62
58
  const currentData = (0, react_1.useMemo)(() => {
63
59
  if (!scCourse || !scLesson)
64
60
  return null;
65
- return (0, react_ui_1.getCurrentSectionAndLessonIndex)(scCourse, scLesson.section_id, scLesson.id);
66
- }, [scCourse, scLesson]);
61
+ return (0, react_ui_1.getCurrentSectionAndLessonIndex)(scCourse, sectionId, lessonId);
62
+ }, [scCourse, sectionId, lessonId]);
67
63
  const [currentSectionIndex, setCurrentSectionIndex] = (0, react_1.useState)((currentData === null || currentData === void 0 ? void 0 : currentData.currentSectionIndex) || 0);
68
64
  const [currentLessonIndex, setCurrentLessonIndex] = (0, react_1.useState)((currentData === null || currentData === void 0 ? void 0 : currentData.currentLessonIndex) || 0);
69
- const [currentSection, setCurrentSection] = (0, react_1.useState)(((_b = scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) === null || _b === void 0 ? void 0 : _b[currentSectionIndex]) || null);
65
+ const [currentSection, setCurrentSection] = (0, react_1.useState)(null);
70
66
  const isPrevDisabled = !(scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) || (currentSectionIndex === 0 && currentLessonIndex === 0);
71
67
  const isNextDisabled = !(scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) ||
72
- (currentSectionIndex === (scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections.length) - 1 && currentLessonIndex === ((_c = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _c === void 0 ? void 0 : _c.length) - 1) ||
73
- (currentLessonIndex < ((_d = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _d === void 0 ? void 0 : _d.length) - 1
74
- ? (_e = currentSection.lessons[currentLessonIndex + 1]) === null || _e === void 0 ? void 0 : _e.locked
75
- : (_g = (_f = scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections[currentSectionIndex + 1]) === null || _f === void 0 ? void 0 : _f.lessons[0]) === null || _g === void 0 ? void 0 : _g.locked);
68
+ (currentSectionIndex === (scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections.length) - 1 && currentLessonIndex === ((_b = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _b === void 0 ? void 0 : _b.length) - 1) ||
69
+ (currentLessonIndex < ((_c = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _c === void 0 ? void 0 : _c.length) - 1
70
+ ? (_d = currentSection.lessons[currentLessonIndex + 1]) === null || _d === void 0 ? void 0 : _d.locked
71
+ : (_f = (_e = scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections[currentSectionIndex + 1]) === null || _e === void 0 ? void 0 : _e.lessons[0]) === null || _f === void 0 ? void 0 : _f.locked);
76
72
  const [openDialog, setOpenDialog] = (0, react_1.useState)(false);
73
+ (0, react_1.useEffect)(() => {
74
+ if ((scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) && currentData) {
75
+ setCurrentSection(scCourse.sections[currentData.currentSectionIndex] || null);
76
+ }
77
+ }, [scCourse, currentData]);
77
78
  // HANDLERS
78
79
  /**
79
80
  * Handles lesson settings change
@@ -190,6 +191,6 @@ function Lesson(inProps) {
190
191
  if (!scLesson || !scCourse) {
191
192
  return (0, jsx_runtime_1.jsx)(react_ui_1.HiddenPlaceholder, {});
192
193
  }
193
- return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.LessonAppbar, Object.assign({ showComments: scLesson.comments_enabled, editMode: editMode, activePanel: activePanel, title: scCourse.name, handleOpen: handleOpenDrawer, onSave: handleLessonUpdate, updating: updating }, LessonAppbarProps)), (0, jsx_runtime_1.jsxs)(Container, Object.assign({ open: Boolean(activePanel) || editMode, className: classes.containerRoot }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.navigation }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "text.secondary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.lesson.number", defaultMessage: "templates.lesson.number", values: { from: currentLessonIndex + 1, to: (_h = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _h === void 0 ? void 0 : _h.length } }) })) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.navigationTitle }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: scLesson.name })), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handlePrev, disabled: isPrevDisabled }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleNext, disabled: isNextDisabled }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_next" }) }))] })] })), (0, jsx_runtime_1.jsx)(react_ui_1.LessonObject, { course: scCourse, lesson: scLesson, editMode: editMode, onContentChange: handleLessonContentEdit, onMediaChange: handleLessonMediaEdit }), !isEditor && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ className: classes.button, loading: loading, size: "small", variant: completed ? 'outlined' : 'contained', startIcon: !completed && (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_next" }), endIcon: completed && (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "circle_checked" }), onClick: () => toggleLessonCompletion(completed) }, { children: completed ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.lesson.button.completed", defaultMessage: "templates.lesson.button.completed" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.lesson.button.complete", defaultMessage: "templates.lesson.button.complete" })) })))] })), (0, jsx_runtime_1.jsx)(react_ui_1.LessonDrawer, Object.assign({ course: scCourse, lesson: scLesson, editMode: isMobile ? activePanel === react_ui_1.SCLessonActionsType.SETTINGS : editMode, activePanel: activePanel, handleClose: handleCloseDrawer, handleChangeLesson: handleChangeLesson, LessonEditFormProps: { lesson: scLesson, onSave: handleLessonUpdate, updating: updating, onSettingsChange: handleSettingsChange } }, LessonDrawerProps))] })), openDialog && (0, jsx_runtime_1.jsx)(react_ui_1.CourseCompletedDialog, { course: course, onClose: handleCloseDialog })] }));
194
+ return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.LessonAppbar, Object.assign({ showComments: scLesson.comments_enabled, editMode: editMode, activePanel: activePanel, title: scCourse.name, handleOpen: handleOpenDrawer, onSave: handleLessonUpdate, updating: updating }, LessonAppbarProps)), (0, jsx_runtime_1.jsxs)(Container, Object.assign({ open: Boolean(activePanel) || editMode, className: classes.containerRoot }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.navigation }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "text.secondary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.lesson.number", defaultMessage: "templates.lesson.number", values: { from: currentLessonIndex + 1, to: (_g = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _g === void 0 ? void 0 : _g.length } }) })) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.navigationTitle }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: scLesson.name })), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handlePrev, disabled: isPrevDisabled }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleNext, disabled: isNextDisabled }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_next" }) }))] })] })), (0, jsx_runtime_1.jsx)(react_ui_1.LessonObject, { course: scCourse, lesson: scLesson, editMode: editMode, onContentChange: handleLessonContentEdit, onMediaChange: handleLessonMediaEdit }), !isEditor && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ className: classes.button, loading: loading, size: "small", variant: completed ? 'outlined' : 'contained', startIcon: !completed && (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_next" }), endIcon: completed && (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "circle_checked" }), onClick: () => toggleLessonCompletion(completed) }, { children: completed ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.lesson.button.completed", defaultMessage: "templates.lesson.button.completed" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.lesson.button.complete", defaultMessage: "templates.lesson.button.complete" })) })))] })), (0, jsx_runtime_1.jsx)(react_ui_1.LessonDrawer, Object.assign({ course: scCourse, lesson: scLesson, editMode: isMobile ? activePanel === react_ui_1.SCLessonActionsType.SETTINGS : editMode, activePanel: activePanel, handleClose: handleCloseDrawer, handleChangeLesson: handleChangeLesson, LessonEditFormProps: { lesson: scLesson, onSave: handleLessonUpdate, updating: updating, onSettingsChange: handleSettingsChange } }, LessonDrawerProps))] })), openDialog && (0, jsx_runtime_1.jsx)(react_ui_1.CourseCompletedDialog, { course: scCourse, onClose: handleCloseDialog })] }));
194
195
  }
195
196
  exports.default = Lesson;
@@ -1,4 +1,3 @@
1
- import { SCCourseLessonType, SCCourseType } from '@selfcommunity/types';
2
1
  import { LessonAppbarProps, LessonDrawerProps } from '@selfcommunity/react-ui';
3
2
  export interface LessonProps {
4
3
  /**
@@ -6,27 +5,18 @@ export interface LessonProps {
6
5
  * @default null
7
6
  */
8
7
  className?: string;
9
- /**
10
- * The course object
11
- */
12
- course?: SCCourseType;
13
8
  /**
14
9
  * The course id
15
10
  */
16
- courseId?: string | number;
11
+ courseId: string | number;
17
12
  /**
18
13
  * The section id
19
14
  */
20
15
  sectionId: string | number;
21
- /**
22
- * The lesson object
23
- * @default null
24
- */
25
- lesson?: SCCourseLessonType;
26
16
  /**
27
17
  * The lesson id
28
18
  */
29
- lessonId?: string | number;
19
+ lessonId: string | number;
30
20
  /**
31
21
  * Props to spread to LessonAppbar Component
32
22
  * @default {}
@@ -1,6 +1,6 @@
1
1
  import { __rest } from "tslib";
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { Fragment, useCallback, useMemo, useState } from 'react';
3
+ import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
4
4
  import { styled } from '@mui/material/styles';
5
5
  import { useThemeProps } from '@mui/system';
6
6
  import { Box, Icon, IconButton, Typography, useMediaQuery, useTheme } from '@mui/material';
@@ -31,24 +31,20 @@ const Container = styled(Box, {
31
31
  shouldForwardProp: (prop) => prop !== 'open'
32
32
  })(() => ({}));
33
33
  export default function Lesson(inProps) {
34
- var _a, _b, _c, _d, _e, _f, _g, _h;
34
+ var _a, _b, _c, _d, _e, _f, _g;
35
35
  // PROPS
36
36
  const props = useThemeProps({
37
37
  props: inProps,
38
38
  name: PREFIX
39
39
  });
40
- const { className = null, course, courseId, sectionId, lesson = null, lessonId, LessonAppbarProps = {}, LessonDrawerProps = {}, isEditor = false, editMode = false, onEditModeClose = null, onLessonChange = null, onActivePanelChange = null } = props, rest = __rest(props, ["className", "course", "courseId", "sectionId", "lesson", "lessonId", "LessonAppbarProps", "LessonDrawerProps", "isEditor", "editMode", "onEditModeClose", "onLessonChange", "onActivePanelChange"]);
40
+ const { className = null, courseId, sectionId, lessonId, LessonAppbarProps = {}, LessonDrawerProps = {}, isEditor = false, editMode = false, onEditModeClose = null, onLessonChange = null, onActivePanelChange = null } = props, rest = __rest(props, ["className", "courseId", "sectionId", "lessonId", "LessonAppbarProps", "LessonDrawerProps", "isEditor", "editMode", "onEditModeClose", "onLessonChange", "onActivePanelChange"]);
41
41
  // HOOKS
42
42
  const theme = useTheme();
43
43
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
44
44
  const [_lessonId, setLessonId] = useState(lessonId);
45
45
  const [_sectionId, setSectionId] = useState(sectionId);
46
- const { scLesson, setSCLesson } = useSCFetchLesson({ id: _lessonId, lesson, courseId: courseId !== null && courseId !== void 0 ? courseId : lesson.course_id, sectionId: _sectionId });
47
- const { scCourse, setSCCourse } = useSCFetchCourse({
48
- id: courseId !== null && courseId !== void 0 ? courseId : lesson.course_id,
49
- course,
50
- params: { view: isEditor ? CourseInfoViewType.EDIT : CourseInfoViewType.USER }
51
- });
46
+ const { scLesson, setSCLesson } = useSCFetchLesson({ id: _lessonId, courseId, sectionId: _sectionId });
47
+ const { scCourse, setSCCourse } = useSCFetchCourse({ id: courseId, params: { view: isEditor ? CourseInfoViewType.EDIT : CourseInfoViewType.USER } });
52
48
  // STATE
53
49
  const [activePanel, setActivePanel] = useState(null);
54
50
  const [settings, setSettings] = useState(null);
@@ -60,18 +56,23 @@ export default function Lesson(inProps) {
60
56
  const currentData = useMemo(() => {
61
57
  if (!scCourse || !scLesson)
62
58
  return null;
63
- return getCurrentSectionAndLessonIndex(scCourse, scLesson.section_id, scLesson.id);
64
- }, [scCourse, scLesson]);
59
+ return getCurrentSectionAndLessonIndex(scCourse, sectionId, lessonId);
60
+ }, [scCourse, sectionId, lessonId]);
65
61
  const [currentSectionIndex, setCurrentSectionIndex] = useState((currentData === null || currentData === void 0 ? void 0 : currentData.currentSectionIndex) || 0);
66
62
  const [currentLessonIndex, setCurrentLessonIndex] = useState((currentData === null || currentData === void 0 ? void 0 : currentData.currentLessonIndex) || 0);
67
- const [currentSection, setCurrentSection] = useState(((_b = scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) === null || _b === void 0 ? void 0 : _b[currentSectionIndex]) || null);
63
+ const [currentSection, setCurrentSection] = useState(null);
68
64
  const isPrevDisabled = !(scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) || (currentSectionIndex === 0 && currentLessonIndex === 0);
69
65
  const isNextDisabled = !(scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) ||
70
- (currentSectionIndex === (scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections.length) - 1 && currentLessonIndex === ((_c = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _c === void 0 ? void 0 : _c.length) - 1) ||
71
- (currentLessonIndex < ((_d = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _d === void 0 ? void 0 : _d.length) - 1
72
- ? (_e = currentSection.lessons[currentLessonIndex + 1]) === null || _e === void 0 ? void 0 : _e.locked
73
- : (_g = (_f = scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections[currentSectionIndex + 1]) === null || _f === void 0 ? void 0 : _f.lessons[0]) === null || _g === void 0 ? void 0 : _g.locked);
66
+ (currentSectionIndex === (scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections.length) - 1 && currentLessonIndex === ((_b = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _b === void 0 ? void 0 : _b.length) - 1) ||
67
+ (currentLessonIndex < ((_c = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _c === void 0 ? void 0 : _c.length) - 1
68
+ ? (_d = currentSection.lessons[currentLessonIndex + 1]) === null || _d === void 0 ? void 0 : _d.locked
69
+ : (_f = (_e = scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections[currentSectionIndex + 1]) === null || _e === void 0 ? void 0 : _e.lessons[0]) === null || _f === void 0 ? void 0 : _f.locked);
74
70
  const [openDialog, setOpenDialog] = useState(false);
71
+ useEffect(() => {
72
+ if ((scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) && currentData) {
73
+ setCurrentSection(scCourse.sections[currentData.currentSectionIndex] || null);
74
+ }
75
+ }, [scCourse, currentData]);
75
76
  // HANDLERS
76
77
  /**
77
78
  * Handles lesson settings change
@@ -188,5 +189,5 @@ export default function Lesson(inProps) {
188
189
  if (!scLesson || !scCourse) {
189
190
  return _jsx(HiddenPlaceholder, {});
190
191
  }
191
- return (_jsxs(Fragment, { children: [_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(LessonAppbar, Object.assign({ showComments: scLesson.comments_enabled, editMode: editMode, activePanel: activePanel, title: scCourse.name, handleOpen: handleOpenDrawer, onSave: handleLessonUpdate, updating: updating }, LessonAppbarProps)), _jsxs(Container, Object.assign({ open: Boolean(activePanel) || editMode, className: classes.containerRoot }, { children: [_jsx(Box, Object.assign({ className: classes.navigation }, { children: _jsx(Typography, Object.assign({ variant: "body2", color: "text.secondary" }, { children: _jsx(FormattedMessage, { id: "templates.lesson.number", defaultMessage: "templates.lesson.number", values: { from: currentLessonIndex + 1, to: (_h = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _h === void 0 ? void 0 : _h.length } }) })) })), _jsxs(Box, Object.assign({ className: classes.navigationTitle }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: scLesson.name })), _jsxs(Box, { children: [_jsx(IconButton, Object.assign({ onClick: handlePrev, disabled: isPrevDisabled }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(IconButton, Object.assign({ onClick: handleNext, disabled: isNextDisabled }, { children: _jsx(Icon, { children: "arrow_next" }) }))] })] })), _jsx(LessonObject, { course: scCourse, lesson: scLesson, editMode: editMode, onContentChange: handleLessonContentEdit, onMediaChange: handleLessonMediaEdit }), !isEditor && (_jsx(LoadingButton, Object.assign({ className: classes.button, loading: loading, size: "small", variant: completed ? 'outlined' : 'contained', startIcon: !completed && _jsx(Icon, { children: "arrow_next" }), endIcon: completed && _jsx(Icon, { children: "circle_checked" }), onClick: () => toggleLessonCompletion(completed) }, { children: completed ? (_jsx(FormattedMessage, { id: "templates.lesson.button.completed", defaultMessage: "templates.lesson.button.completed" })) : (_jsx(FormattedMessage, { id: "templates.lesson.button.complete", defaultMessage: "templates.lesson.button.complete" })) })))] })), _jsx(LessonDrawer, Object.assign({ course: scCourse, lesson: scLesson, editMode: isMobile ? activePanel === SCLessonActionsType.SETTINGS : editMode, activePanel: activePanel, handleClose: handleCloseDrawer, handleChangeLesson: handleChangeLesson, LessonEditFormProps: { lesson: scLesson, onSave: handleLessonUpdate, updating: updating, onSettingsChange: handleSettingsChange } }, LessonDrawerProps))] })), openDialog && _jsx(CourseCompletedDialog, { course: course, onClose: handleCloseDialog })] }));
192
+ return (_jsxs(Fragment, { children: [_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(LessonAppbar, Object.assign({ showComments: scLesson.comments_enabled, editMode: editMode, activePanel: activePanel, title: scCourse.name, handleOpen: handleOpenDrawer, onSave: handleLessonUpdate, updating: updating }, LessonAppbarProps)), _jsxs(Container, Object.assign({ open: Boolean(activePanel) || editMode, className: classes.containerRoot }, { children: [_jsx(Box, Object.assign({ className: classes.navigation }, { children: _jsx(Typography, Object.assign({ variant: "body2", color: "text.secondary" }, { children: _jsx(FormattedMessage, { id: "templates.lesson.number", defaultMessage: "templates.lesson.number", values: { from: currentLessonIndex + 1, to: (_g = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _g === void 0 ? void 0 : _g.length } }) })) })), _jsxs(Box, Object.assign({ className: classes.navigationTitle }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: scLesson.name })), _jsxs(Box, { children: [_jsx(IconButton, Object.assign({ onClick: handlePrev, disabled: isPrevDisabled }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(IconButton, Object.assign({ onClick: handleNext, disabled: isNextDisabled }, { children: _jsx(Icon, { children: "arrow_next" }) }))] })] })), _jsx(LessonObject, { course: scCourse, lesson: scLesson, editMode: editMode, onContentChange: handleLessonContentEdit, onMediaChange: handleLessonMediaEdit }), !isEditor && (_jsx(LoadingButton, Object.assign({ className: classes.button, loading: loading, size: "small", variant: completed ? 'outlined' : 'contained', startIcon: !completed && _jsx(Icon, { children: "arrow_next" }), endIcon: completed && _jsx(Icon, { children: "circle_checked" }), onClick: () => toggleLessonCompletion(completed) }, { children: completed ? (_jsx(FormattedMessage, { id: "templates.lesson.button.completed", defaultMessage: "templates.lesson.button.completed" })) : (_jsx(FormattedMessage, { id: "templates.lesson.button.complete", defaultMessage: "templates.lesson.button.complete" })) })))] })), _jsx(LessonDrawer, Object.assign({ course: scCourse, lesson: scLesson, editMode: isMobile ? activePanel === SCLessonActionsType.SETTINGS : editMode, activePanel: activePanel, handleClose: handleCloseDrawer, handleChangeLesson: handleChangeLesson, LessonEditFormProps: { lesson: scLesson, onSave: handleLessonUpdate, updating: updating, onSettingsChange: handleSettingsChange } }, LessonDrawerProps))] })), openDialog && _jsx(CourseCompletedDialog, { course: scCourse, onClose: handleCloseDialog })] }));
192
193
  }