@selfcommunity/react-ui 0.10.2-courses.131 → 0.10.2-courses.133
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.
- package/lib/cjs/components/CourseContentMenu/CourseContentMenu.js +2 -2
- package/lib/cjs/components/LessonDrawer/LessonDrawer.js +1 -1
- package/lib/esm/components/CourseContentMenu/CourseContentMenu.js +2 -2
- package/lib/esm/components/LessonDrawer/LessonDrawer.js +1 -1
- package/lib/umd/react-ui.js +1 -1
- package/package.json +8 -8
|
@@ -31,7 +31,7 @@ function CourseContentMenu(inProps) {
|
|
|
31
31
|
});
|
|
32
32
|
const { className = null, lesson, course, onLessonClick } = props, rest = tslib_1.__rest(props, ["className", "lesson", "course", "onLessonClick"]);
|
|
33
33
|
//STATE
|
|
34
|
-
const [expandedSections, setExpandedSections] = (0, react_1.useState)((lesson === null || lesson === void 0 ? void 0 : lesson.
|
|
34
|
+
const [expandedSections, setExpandedSections] = (0, react_1.useState)((lesson === null || lesson === void 0 ? void 0 : lesson.section_id) ? [lesson.section_id] : []);
|
|
35
35
|
//HANDLERS
|
|
36
36
|
const handleToggle = (0, react_1.useCallback)((sectionId) => {
|
|
37
37
|
setExpandedSections((prev) => (prev.includes(sectionId) ? prev.filter((id) => id !== sectionId) : [...prev, sectionId]));
|
|
@@ -42,6 +42,6 @@ function CourseContentMenu(inProps) {
|
|
|
42
42
|
if (!course) {
|
|
43
43
|
return null;
|
|
44
44
|
}
|
|
45
|
-
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: course.sections.map((section) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ onClick: () => handleToggle(section.id), className: classes.listItem, disableRipple: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, Object.assign({ className: classes.listItemIcon }, { children: expandedSections.includes(section.id) ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_less" }) : (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_more" }) })), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: section.name })] })), (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ in: expandedSections.includes(section.id), timeout: "auto", unmountOnExit: true }, { children: (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ component: "div", disablePadding: true }, { children: section.lessons.map((_lesson) => ((0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ className: classes.item, onClick: () => onLessonClick(_lesson, section), selected: _lesson.name === lesson.name }, { children: [course.join_status !== types_1.SCCourseJoinStatusType.MANAGER && ((0, jsx_runtime_1.jsx)(material_1.ListItemIcon, Object.assign({ className: classes.itemIcon }, { children: _lesson.completion_status === types_1.SCCourseLessonCompletionStatusType.COMPLETED ? ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.iconComplete }, { children: "circle_checked" }))) : ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.iconIncomplete }, { children: "fiber_manual_record" }))) }))), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: _lesson.name })] }), _lesson.id))) })) }))] }, section.id))) })));
|
|
45
|
+
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: course.sections.map((section) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ onClick: () => handleToggle(section.id), className: classes.listItem, disableRipple: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, Object.assign({ className: classes.listItemIcon }, { children: expandedSections.includes(section.id) ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_less" }) : (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_more" }) })), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: section.name })] })), (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ in: expandedSections.includes(section.id), timeout: "auto", unmountOnExit: true }, { children: (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ component: "div", disablePadding: true }, { children: section.lessons.map((_lesson) => ((0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ className: classes.item, onClick: () => onLessonClick(_lesson, section), selected: _lesson.name === lesson.name, disabled: _lesson.locked }, { children: [course.join_status !== types_1.SCCourseJoinStatusType.MANAGER && ((0, jsx_runtime_1.jsx)(material_1.ListItemIcon, Object.assign({ className: classes.itemIcon }, { children: _lesson.completion_status === types_1.SCCourseLessonCompletionStatusType.COMPLETED ? ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.iconComplete }, { children: "circle_checked" }))) : _lesson.locked ? ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" })) : ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.iconIncomplete }, { children: "fiber_manual_record" }))) }))), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: _lesson.name })] }), _lesson.id))) })) }))] }, section.id))) })));
|
|
46
46
|
}
|
|
47
47
|
exports.default = CourseContentMenu;
|
|
@@ -32,6 +32,6 @@ function LessonDrawer(inProps) {
|
|
|
32
32
|
name: constants_1.PREFIX
|
|
33
33
|
});
|
|
34
34
|
const { className = null, lesson, course, editMode = false, activePanel = null, LessonCommentObjectsProps = {}, LessonEditFormProps, handleClose, handleChangeLesson } = props, rest = tslib_1.__rest(props, ["className", "lesson", "course", "editMode", "activePanel", "LessonCommentObjectsProps", "LessonEditFormProps", "handleClose", "handleChangeLesson"]);
|
|
35
|
-
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), anchor: "right", open: Boolean(activePanel) || editMode, variant: "persistent" }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: (0, classnames_1.default)(classes.header, { [classes.headerEdit]: editMode }) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.headerContent }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", textAlign: "center" }, { children: editMode ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonDrawer.settings", defaultMessage: "ui.lessonDrawer.settings" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.lessonDrawer.${activePanel}`, defaultMessage: `ui.lessonDrawer.${activePanel}` })) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.headerAction, onClick: handleClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] })) })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), editMode ? ((0, jsx_runtime_1.jsx)(LessonEditForm_1.default, Object.assign({}, LessonEditFormProps))) : activePanel === types_1.SCLessonActionsType.COMMENTS ? ((0, jsx_runtime_1.jsx)(LessonCommentObjects_1.default, Object.assign({ lessonObject: lesson }, LessonCommentObjectsProps))) : ((0, jsx_runtime_1.jsx)(ScrollContainer_1.default, { children: (0, jsx_runtime_1.jsx)(CourseContentMenu_1.default, { course: course, lesson:
|
|
35
|
+
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), anchor: "right", open: Boolean(activePanel) || editMode, variant: "persistent" }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: (0, classnames_1.default)(classes.header, { [classes.headerEdit]: editMode }) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.headerContent }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", textAlign: "center" }, { children: editMode ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonDrawer.settings", defaultMessage: "ui.lessonDrawer.settings" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.lessonDrawer.${activePanel}`, defaultMessage: `ui.lessonDrawer.${activePanel}` })) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.headerAction, onClick: handleClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] })) })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), editMode ? ((0, jsx_runtime_1.jsx)(LessonEditForm_1.default, Object.assign({}, LessonEditFormProps))) : activePanel === types_1.SCLessonActionsType.COMMENTS ? ((0, jsx_runtime_1.jsx)(LessonCommentObjects_1.default, Object.assign({ lessonObject: lesson }, LessonCommentObjectsProps))) : ((0, jsx_runtime_1.jsx)(ScrollContainer_1.default, { children: (0, jsx_runtime_1.jsx)(CourseContentMenu_1.default, { course: course, lesson: lesson, onLessonClick: handleChangeLesson }) }))] })));
|
|
36
36
|
}
|
|
37
37
|
exports.default = LessonDrawer;
|
|
@@ -29,7 +29,7 @@ export default function CourseContentMenu(inProps) {
|
|
|
29
29
|
});
|
|
30
30
|
const { className = null, lesson, course, onLessonClick } = props, rest = __rest(props, ["className", "lesson", "course", "onLessonClick"]);
|
|
31
31
|
//STATE
|
|
32
|
-
const [expandedSections, setExpandedSections] = useState((lesson === null || lesson === void 0 ? void 0 : lesson.
|
|
32
|
+
const [expandedSections, setExpandedSections] = useState((lesson === null || lesson === void 0 ? void 0 : lesson.section_id) ? [lesson.section_id] : []);
|
|
33
33
|
//HANDLERS
|
|
34
34
|
const handleToggle = useCallback((sectionId) => {
|
|
35
35
|
setExpandedSections((prev) => (prev.includes(sectionId) ? prev.filter((id) => id !== sectionId) : [...prev, sectionId]));
|
|
@@ -40,5 +40,5 @@ export default function CourseContentMenu(inProps) {
|
|
|
40
40
|
if (!course) {
|
|
41
41
|
return null;
|
|
42
42
|
}
|
|
43
|
-
return (_jsx(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: course.sections.map((section) => (_jsxs(React.Fragment, { children: [_jsxs(ListItemButton, Object.assign({ onClick: () => handleToggle(section.id), className: classes.listItem, disableRipple: true }, { children: [_jsx(ListItemIcon, Object.assign({ className: classes.listItemIcon }, { children: expandedSections.includes(section.id) ? _jsx(Icon, { children: "expand_less" }) : _jsx(Icon, { children: "expand_more" }) })), _jsx(ListItemText, { primary: section.name })] })), _jsx(Collapse, Object.assign({ in: expandedSections.includes(section.id), timeout: "auto", unmountOnExit: true }, { children: _jsx(List, Object.assign({ component: "div", disablePadding: true }, { children: section.lessons.map((_lesson) => (_jsxs(ListItemButton, Object.assign({ className: classes.item, onClick: () => onLessonClick(_lesson, section), selected: _lesson.name === lesson.name }, { children: [course.join_status !== SCCourseJoinStatusType.MANAGER && (_jsx(ListItemIcon, Object.assign({ className: classes.itemIcon }, { children: _lesson.completion_status === SCCourseLessonCompletionStatusType.COMPLETED ? (_jsx(Icon, Object.assign({ className: classes.iconComplete }, { children: "circle_checked" }))) : (_jsx(Icon, Object.assign({ className: classes.iconIncomplete }, { children: "fiber_manual_record" }))) }))), _jsx(ListItemText, { primary: _lesson.name })] }), _lesson.id))) })) }))] }, section.id))) })));
|
|
43
|
+
return (_jsx(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: course.sections.map((section) => (_jsxs(React.Fragment, { children: [_jsxs(ListItemButton, Object.assign({ onClick: () => handleToggle(section.id), className: classes.listItem, disableRipple: true }, { children: [_jsx(ListItemIcon, Object.assign({ className: classes.listItemIcon }, { children: expandedSections.includes(section.id) ? _jsx(Icon, { children: "expand_less" }) : _jsx(Icon, { children: "expand_more" }) })), _jsx(ListItemText, { primary: section.name })] })), _jsx(Collapse, Object.assign({ in: expandedSections.includes(section.id), timeout: "auto", unmountOnExit: true }, { children: _jsx(List, Object.assign({ component: "div", disablePadding: true }, { children: section.lessons.map((_lesson) => (_jsxs(ListItemButton, Object.assign({ className: classes.item, onClick: () => onLessonClick(_lesson, section), selected: _lesson.name === lesson.name, disabled: _lesson.locked }, { children: [course.join_status !== SCCourseJoinStatusType.MANAGER && (_jsx(ListItemIcon, Object.assign({ className: classes.itemIcon }, { children: _lesson.completion_status === SCCourseLessonCompletionStatusType.COMPLETED ? (_jsx(Icon, Object.assign({ className: classes.iconComplete }, { children: "circle_checked" }))) : _lesson.locked ? (_jsx(Icon, { children: "private" })) : (_jsx(Icon, Object.assign({ className: classes.iconIncomplete }, { children: "fiber_manual_record" }))) }))), _jsx(ListItemText, { primary: _lesson.name })] }), _lesson.id))) })) }))] }, section.id))) })));
|
|
44
44
|
}
|
|
@@ -30,5 +30,5 @@ export default function LessonDrawer(inProps) {
|
|
|
30
30
|
name: PREFIX
|
|
31
31
|
});
|
|
32
32
|
const { className = null, lesson, course, editMode = false, activePanel = null, LessonCommentObjectsProps = {}, LessonEditFormProps, handleClose, handleChangeLesson } = props, rest = __rest(props, ["className", "lesson", "course", "editMode", "activePanel", "LessonCommentObjectsProps", "LessonEditFormProps", "handleClose", "handleChangeLesson"]);
|
|
33
|
-
return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className), anchor: "right", open: Boolean(activePanel) || editMode, variant: "persistent" }, rest, { children: [_jsx(Box, Object.assign({ className: classNames(classes.header, { [classes.headerEdit]: editMode }) }, { children: _jsxs(Box, Object.assign({ className: classes.headerContent }, { children: [_jsx(Typography, Object.assign({ variant: "h4", textAlign: "center" }, { children: editMode ? (_jsx(FormattedMessage, { id: "ui.lessonDrawer.settings", defaultMessage: "ui.lessonDrawer.settings" })) : (_jsx(FormattedMessage, { id: `ui.lessonDrawer.${activePanel}`, defaultMessage: `ui.lessonDrawer.${activePanel}` })) })), _jsx(IconButton, Object.assign({ className: classes.headerAction, onClick: handleClose }, { children: _jsx(Icon, { children: "close" }) }))] })) })), _jsx(Divider, {}), editMode ? (_jsx(LessonEditForm, Object.assign({}, LessonEditFormProps))) : activePanel === SCLessonActionsType.COMMENTS ? (_jsx(LessonCommentObjects, Object.assign({ lessonObject: lesson }, LessonCommentObjectsProps))) : (_jsx(ScrollContainer, { children: _jsx(CourseContentMenu, { course: course, lesson:
|
|
33
|
+
return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className), anchor: "right", open: Boolean(activePanel) || editMode, variant: "persistent" }, rest, { children: [_jsx(Box, Object.assign({ className: classNames(classes.header, { [classes.headerEdit]: editMode }) }, { children: _jsxs(Box, Object.assign({ className: classes.headerContent }, { children: [_jsx(Typography, Object.assign({ variant: "h4", textAlign: "center" }, { children: editMode ? (_jsx(FormattedMessage, { id: "ui.lessonDrawer.settings", defaultMessage: "ui.lessonDrawer.settings" })) : (_jsx(FormattedMessage, { id: `ui.lessonDrawer.${activePanel}`, defaultMessage: `ui.lessonDrawer.${activePanel}` })) })), _jsx(IconButton, Object.assign({ className: classes.headerAction, onClick: handleClose }, { children: _jsx(Icon, { children: "close" }) }))] })) })), _jsx(Divider, {}), editMode ? (_jsx(LessonEditForm, Object.assign({}, LessonEditFormProps))) : activePanel === SCLessonActionsType.COMMENTS ? (_jsx(LessonCommentObjects, Object.assign({ lessonObject: lesson }, LessonCommentObjectsProps))) : (_jsx(ScrollContainer, { children: _jsx(CourseContentMenu, { course: course, lesson: lesson, onLessonClick: handleChangeLesson }) }))] })));
|
|
34
34
|
}
|