@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
47 lines (46 loc) • 3.96 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importStar(require("react"));
const system_1 = require("@mui/system");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const material_1 = require("@mui/material");
const constants_1 = require("./constants");
const types_1 = require("@selfcommunity/types");
const classes = {
root: `${constants_1.PREFIX}-root`,
listItem: `${constants_1.PREFIX}-list-item`,
listItemIcon: `${constants_1.PREFIX}-list-item-icon`,
item: `${constants_1.PREFIX}-item`,
itemIcon: `${constants_1.PREFIX}-item-icon`,
iconIncomplete: `${constants_1.PREFIX}-icon-incomplete`,
iconComplete: `${constants_1.PREFIX}-icon-complete`
};
const Root = (0, material_1.styled)(material_1.Box, {
name: constants_1.PREFIX,
slot: 'Root',
overridesResolver: (props, styles) => [styles.root]
})(() => ({}));
function CourseContentMenu(inProps) {
// PROPS
const props = (0, system_1.useThemeProps)({
props: inProps,
name: constants_1.PREFIX
});
const { className = null, lesson, course, onLessonClick, previewMode } = props, rest = tslib_1.__rest(props, ["className", "lesson", "course", "onLessonClick", "previewMode"]);
//STATE
const [expandedSections, setExpandedSections] = (0, react_1.useState)((lesson === null || lesson === void 0 ? void 0 : lesson.section_id) ? [lesson.section_id] : []);
//HANDLERS
const handleToggle = (0, react_1.useCallback)((sectionId) => {
setExpandedSections((prev) => (prev.includes(sectionId) ? prev.filter((id) => id !== sectionId) : [...prev, sectionId]));
}, [setExpandedSections]);
/**
* Rendering
*/
if (!course) {
return null;
}
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.id === lesson.id, disabled: _lesson.locked }, { children: [course.join_status !== types_1.SCCourseJoinStatusType.CREATOR && !previewMode && ((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))) })));
}
exports.default = CourseContentMenu;