@selfcommunity/react-ui/lib/esm/shared/AccordionLessons/AccordionLessons.js

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

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Accordion, AccordionDetails, AccordionSummary, Box, Button, Icon, Stack, styled, Typography, useMediaQuery, useTheme, useThemeProps } from '@mui/material';
import { FormattedMessage, useIntl } from 'react-intl';
import classNames from 'classnames';
import { Fragment, useCallback, useState } from 'react';
import { SCCourseJoinStatusType, SCCourseLessonCompletionStatusType } from '@selfcommunity/types';
import { SCRoutes, useSCRouting } from '@selfcommunity/react-core';
import { PREFIX } from './constants';
import AccordionLessonSkeleton from './Skeleton';
import { Link } from '@selfcommunity/react-core';
import Bullet from '../Bullet';
import { getUrlLesson } from '../../utils/course';
const classes = {
    root: `${PREFIX}-root`,
    empty: `${PREFIX}-empty`,
    accordion: `${PREFIX}-accordion`,
    summary: `${PREFIX}-summary`,
    nameWrapper: `${PREFIX}-name-wrapper`,
    details: `${PREFIX}-details`,
    circle: `${PREFIX}-circle`,
    link: `${PREFIX}-link`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (_props, styles) => styles.root
})(() => ({}));
export default function AccordionLessons(inProps) {
    var _a;
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { course, viewerJoinStatus, className } = props;
    //STATES
    const [expanded, setExpanded] = useState(false);
    // HOOKS
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
    // CONTEXTS
    const scRoutingContext = useSCRouting();
    // INTL
    const intl = useIntl();
    // HANDLERS
    const handleChange = useCallback((panel) => (_, newExpanded) => {
        setExpanded(newExpanded ? panel : false);
    }, [setExpanded]);
    if (!course) {
        return _jsx(AccordionLessonSkeleton, {});
    }
    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, { children: ((_a = course.sections) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (course.sections.map((section) => (_jsxs(Accordion, Object.assign({ className: classes.accordion, expanded: expanded === section.id, onChange: handleChange(section.id), disableGutters: true, elevation: 0, square: true }, { children: [_jsxs(AccordionSummary, Object.assign({ className: classes.summary, expandIcon: _jsx(Icon, { children: "expand_more" }) }, { children: [_jsxs(Stack, Object.assign({ className: classes.nameWrapper }, { children: [_jsx(Typography, Object.assign({ component: "span", variant: "body1" }, { children: section.name })), viewerJoinStatus !== SCCourseJoinStatusType.CREATOR && viewerJoinStatus !== SCCourseJoinStatusType.MANAGER && section.locked && (_jsxs(Fragment, { children: [_jsx(Bullet, {}), _jsx(Typography, Object.assign({ component: "span", variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.accordionLessons.date", defaultMessage: "ui.course.accordionLessons.date", values: {
                                                    date: intl.formatDate(section.available_date, { day: 'numeric', month: 'numeric', year: 'numeric' }),
                                                    hour: intl.formatDate(section.available_date, { hour: 'numeric', minute: 'numeric' })
                                                } }) }))] }))] })), !isMobile && (_jsx(Typography, Object.assign({ component: "span", variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.table.lessons.title", defaultMessage: "ui.course.table.lessons.title", values: {
                                    lessonsNumber: section.lessons.length
                                } }) })))] })), section.lessons.map((lesson) => (_jsxs(AccordionDetails, Object.assign({ className: classes.details }, { children: [lesson.completion_status === SCCourseLessonCompletionStatusType.COMPLETED ? (_jsx(Icon, Object.assign({ fontSize: "small", color: "primary" }, { children: "circle_checked" }))) : lesson.locked ? (_jsx(Icon, { children: "private" })) : (_jsx(Box, { className: classes.circle })), course.join_status === null ||
                            viewerJoinStatus === SCCourseJoinStatusType.CREATOR ||
                            viewerJoinStatus === SCCourseJoinStatusType.MANAGER ||
                            lesson.locked ? (_jsx(Typography, { children: lesson.name })) : (_jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_LESSON_ROUTE_NAME, getUrlLesson(course, lesson, section)), variant: "text", color: "inherit", className: classes.link }, { children: _jsx(Typography, { children: lesson.name }) })))] }), lesson.id)))] }), section.id)))) : (_jsx(Typography, Object.assign({ variant: "body1", className: classes.empty }, { children: _jsx(FormattedMessage, { id: "ui.course.accordionLessons.empty", defaultMessage: "ui.course.accordionLessons.empty" }) }))) })));
}