@selfcommunity/react-templates 0.4.5-courses.139 → 0.4.5-courses.141
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.
|
@@ -30,19 +30,19 @@ const Container = (0, styles_1.styled)(material_1.Box, {
|
|
|
30
30
|
shouldForwardProp: (prop) => prop !== 'open'
|
|
31
31
|
})(() => ({}));
|
|
32
32
|
function Lesson(inProps) {
|
|
33
|
-
var _a, _b, _c, _d, _e, _f;
|
|
33
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
34
34
|
// PROPS
|
|
35
35
|
const props = (0, system_1.useThemeProps)({
|
|
36
36
|
props: inProps,
|
|
37
37
|
name: constants_1.PREFIX
|
|
38
38
|
});
|
|
39
|
-
const { className = null, course, courseId, sectionId, lesson = null, lessonId, LessonAppbarProps = {}, LessonDrawerProps = {}, editMode = false, onEditModeClose = null, onLessonChange = null, onActivePanelChange = null } = props, rest = tslib_1.__rest(props, ["className", "course", "courseId", "sectionId", "lesson", "lessonId", "LessonAppbarProps", "LessonDrawerProps", "editMode", "onEditModeClose", "onLessonChange", "onActivePanelChange"]);
|
|
39
|
+
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"]);
|
|
40
40
|
// HOOKS
|
|
41
41
|
const theme = (0, material_1.useTheme)();
|
|
42
42
|
const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
|
|
43
43
|
const [_lessonId, setLessonId] = (0, react_1.useState)(lessonId);
|
|
44
44
|
const [_sectionId, setSectionId] = (0, react_1.useState)(sectionId);
|
|
45
|
-
const { scCourse } = (0, react_core_1.useSCFetchCourse)({ id: courseId, course, params: { view:
|
|
45
|
+
const { scCourse } = (0, react_core_1.useSCFetchCourse)({ id: courseId, course, params: { view: isEditor ? api_services_1.CourseInfoViewType.EDIT : api_services_1.CourseInfoViewType.USER } });
|
|
46
46
|
const { scLesson, setSCLesson } = (0, react_core_1.useSCFetchLesson)({ id: _lessonId, lesson, courseId, sectionId: _sectionId });
|
|
47
47
|
// STATE
|
|
48
48
|
const [activePanel, setActivePanel] = (0, react_1.useState)(null);
|
|
@@ -50,7 +50,6 @@ function Lesson(inProps) {
|
|
|
50
50
|
const [updating, setUpdating] = (0, react_1.useState)(false);
|
|
51
51
|
const [lessonContent, setLessonContent] = (0, react_1.useState)('');
|
|
52
52
|
const [lessonMedias, setLessonMedias] = (0, react_1.useState)((_a = scLesson === null || scLesson === void 0 ? void 0 : scLesson.medias) !== null && _a !== void 0 ? _a : []);
|
|
53
|
-
const isEditMode = (0, react_1.useMemo)(() => editMode && activePanel === react_ui_1.SCLessonActionsType.SETTINGS, [editMode, activePanel]);
|
|
54
53
|
// HANDLERS
|
|
55
54
|
/**
|
|
56
55
|
* Handles lesson settings change
|
|
@@ -136,10 +135,12 @@ function Lesson(inProps) {
|
|
|
136
135
|
const isPrevDisabled = !(scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) || (currentSectionIndex === 0 && currentLessonIndex === 0);
|
|
137
136
|
const isNextDisabled = !(scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) ||
|
|
138
137
|
(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) ||
|
|
139
|
-
(
|
|
138
|
+
(currentLessonIndex < ((_d = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _d === void 0 ? void 0 : _d.length) - 1
|
|
139
|
+
? (_e = currentSection.lessons[currentLessonIndex + 1]) === null || _e === void 0 ? void 0 : _e.locked
|
|
140
|
+
: (_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);
|
|
140
141
|
if (!scLesson || !scCourse) {
|
|
141
142
|
return (0, jsx_runtime_1.jsx)(react_ui_1.HiddenPlaceholder, {});
|
|
142
143
|
}
|
|
143
|
-
return ((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:
|
|
144
|
+
return ((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 })] })), (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))] })));
|
|
144
145
|
}
|
|
145
146
|
exports.default = Lesson;
|
|
@@ -28,19 +28,19 @@ const Container = styled(Box, {
|
|
|
28
28
|
shouldForwardProp: (prop) => prop !== 'open'
|
|
29
29
|
})(() => ({}));
|
|
30
30
|
export default function Lesson(inProps) {
|
|
31
|
-
var _a, _b, _c, _d, _e, _f;
|
|
31
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
32
32
|
// PROPS
|
|
33
33
|
const props = useThemeProps({
|
|
34
34
|
props: inProps,
|
|
35
35
|
name: PREFIX
|
|
36
36
|
});
|
|
37
|
-
const { className = null, course, courseId, sectionId, lesson = null, lessonId, LessonAppbarProps = {}, LessonDrawerProps = {}, editMode = false, onEditModeClose = null, onLessonChange = null, onActivePanelChange = null } = props, rest = __rest(props, ["className", "course", "courseId", "sectionId", "lesson", "lessonId", "LessonAppbarProps", "LessonDrawerProps", "editMode", "onEditModeClose", "onLessonChange", "onActivePanelChange"]);
|
|
37
|
+
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"]);
|
|
38
38
|
// HOOKS
|
|
39
39
|
const theme = useTheme();
|
|
40
40
|
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
|
41
41
|
const [_lessonId, setLessonId] = useState(lessonId);
|
|
42
42
|
const [_sectionId, setSectionId] = useState(sectionId);
|
|
43
|
-
const { scCourse } = useSCFetchCourse({ id: courseId, course, params: { view:
|
|
43
|
+
const { scCourse } = useSCFetchCourse({ id: courseId, course, params: { view: isEditor ? CourseInfoViewType.EDIT : CourseInfoViewType.USER } });
|
|
44
44
|
const { scLesson, setSCLesson } = useSCFetchLesson({ id: _lessonId, lesson, courseId, sectionId: _sectionId });
|
|
45
45
|
// STATE
|
|
46
46
|
const [activePanel, setActivePanel] = useState(null);
|
|
@@ -48,7 +48,6 @@ export default function Lesson(inProps) {
|
|
|
48
48
|
const [updating, setUpdating] = useState(false);
|
|
49
49
|
const [lessonContent, setLessonContent] = useState('');
|
|
50
50
|
const [lessonMedias, setLessonMedias] = useState((_a = scLesson === null || scLesson === void 0 ? void 0 : scLesson.medias) !== null && _a !== void 0 ? _a : []);
|
|
51
|
-
const isEditMode = useMemo(() => editMode && activePanel === SCLessonActionsType.SETTINGS, [editMode, activePanel]);
|
|
52
51
|
// HANDLERS
|
|
53
52
|
/**
|
|
54
53
|
* Handles lesson settings change
|
|
@@ -134,9 +133,11 @@ export default function Lesson(inProps) {
|
|
|
134
133
|
const isPrevDisabled = !(scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) || (currentSectionIndex === 0 && currentLessonIndex === 0);
|
|
135
134
|
const isNextDisabled = !(scCourse === null || scCourse === void 0 ? void 0 : scCourse.sections) ||
|
|
136
135
|
(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) ||
|
|
137
|
-
(
|
|
136
|
+
(currentLessonIndex < ((_d = currentSection === null || currentSection === void 0 ? void 0 : currentSection.lessons) === null || _d === void 0 ? void 0 : _d.length) - 1
|
|
137
|
+
? (_e = currentSection.lessons[currentLessonIndex + 1]) === null || _e === void 0 ? void 0 : _e.locked
|
|
138
|
+
: (_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);
|
|
138
139
|
if (!scLesson || !scCourse) {
|
|
139
140
|
return _jsx(HiddenPlaceholder, {});
|
|
140
141
|
}
|
|
141
|
-
return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(LessonAppbar, Object.assign({ showComments: scLesson.comments_enabled, editMode:
|
|
142
|
+
return (_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 })] })), _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))] })));
|
|
142
143
|
}
|