@selfcommunity/react-ui/lib/esm/components/CourseContentMenu/CourseContentMenu.js

React UI Components to integrate a Community created with SelfCommunity Platform.

import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useCallback, useState } from 'react';
import { useThemeProps } from '@mui/system';
import classNames from 'classnames';
import { Box, Collapse, Icon, List, ListItemButton, ListItemIcon, ListItemText, styled } from '@mui/material';
import { PREFIX } from './constants';
import { SCCourseJoinStatusType, SCCourseLessonCompletionStatusType } from '@selfcommunity/types';
const classes = {
    root: `${PREFIX}-root`,
    listItem: `${PREFIX}-list-item`,
    listItemIcon: `${PREFIX}-list-item-icon`,
    item: `${PREFIX}-item`,
    itemIcon: `${PREFIX}-item-icon`,
    iconIncomplete: `${PREFIX}-icon-incomplete`,
    iconComplete: `${PREFIX}-icon-complete`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (props, styles) => [styles.root]
})(() => ({}));
export default function CourseContentMenu(inProps) {
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { className = null, lesson, course, onLessonClick, previewMode } = props, rest = __rest(props, ["className", "lesson", "course", "onLessonClick", "previewMode"]);
    //STATE
    const [expandedSections, setExpandedSections] = useState((lesson === null || lesson === void 0 ? void 0 : lesson.section_id) ? [lesson.section_id] : []);
    //HANDLERS
    const handleToggle = useCallback((sectionId) => {
        setExpandedSections((prev) => (prev.includes(sectionId) ? prev.filter((id) => id !== sectionId) : [...prev, sectionId]));
    }, [setExpandedSections]);
    /**
     * Rendering
     */
    if (!course) {
        return null;
    }
    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.id === lesson.id, disabled: _lesson.locked }, { children: [course.join_status !== SCCourseJoinStatusType.CREATOR && !previewMode && (_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))) })));
}