@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
66 lines (65 loc) • 5.92 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const react_intl_1 = require("react-intl");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const react_1 = require("react");
const types_1 = require("@selfcommunity/types");
const react_core_1 = require("@selfcommunity/react-core");
const constants_1 = require("./constants");
const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
const react_core_2 = require("@selfcommunity/react-core");
const Bullet_1 = tslib_1.__importDefault(require("../Bullet"));
const course_1 = require("../../utils/course");
const classes = {
root: `${constants_1.PREFIX}-root`,
empty: `${constants_1.PREFIX}-empty`,
accordion: `${constants_1.PREFIX}-accordion`,
summary: `${constants_1.PREFIX}-summary`,
nameWrapper: `${constants_1.PREFIX}-name-wrapper`,
details: `${constants_1.PREFIX}-details`,
circle: `${constants_1.PREFIX}-circle`,
link: `${constants_1.PREFIX}-link`
};
const Root = (0, material_1.styled)(material_1.Box, {
name: constants_1.PREFIX,
slot: 'Root',
overridesResolver: (_props, styles) => styles.root
})(() => ({}));
function AccordionLessons(inProps) {
var _a;
// PROPS
const props = (0, material_1.useThemeProps)({
props: inProps,
name: constants_1.PREFIX
});
const { course, viewerJoinStatus, className } = props;
//STATES
const [expanded, setExpanded] = (0, react_1.useState)(false);
// HOOKS
const theme = (0, material_1.useTheme)();
const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('sm'));
// CONTEXTS
const scRoutingContext = (0, react_core_1.useSCRouting)();
// INTL
const intl = (0, react_intl_1.useIntl)();
// HANDLERS
const handleChange = (0, react_1.useCallback)((panel) => (_, newExpanded) => {
setExpanded(newExpanded ? panel : false);
}, [setExpanded]);
if (!course) {
return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
}
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: ((_a = course.sections) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (course.sections.map((section) => ((0, jsx_runtime_1.jsxs)(material_1.Accordion, Object.assign({ className: classes.accordion, expanded: expanded === section.id, onChange: handleChange(section.id), disableGutters: true, elevation: 0, square: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.AccordionSummary, Object.assign({ className: classes.summary, expandIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_more" }) }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.nameWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", variant: "body1" }, { children: section.name })), viewerJoinStatus !== types_1.SCCourseJoinStatusType.CREATOR && viewerJoinStatus !== types_1.SCCourseJoinStatusType.MANAGER && section.locked && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.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 && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.table.lessons.title", defaultMessage: "ui.course.table.lessons.title", values: {
lessonsNumber: section.lessons.length
} }) })))] })), section.lessons.map((lesson) => ((0, jsx_runtime_1.jsxs)(material_1.AccordionDetails, Object.assign({ className: classes.details }, { children: [lesson.completion_status === types_1.SCCourseLessonCompletionStatusType.COMPLETED ? ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small", color: "primary" }, { children: "circle_checked" }))) : lesson.locked ? ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.circle })), course.join_status === null ||
viewerJoinStatus === types_1.SCCourseJoinStatusType.CREATOR ||
viewerJoinStatus === types_1.SCCourseJoinStatusType.MANAGER ||
lesson.locked ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { children: lesson.name })) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_2.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_LESSON_ROUTE_NAME, (0, course_1.getUrlLesson)(course, lesson, section)), variant: "text", color: "inherit", className: classes.link }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: lesson.name }) })))] }), lesson.id)))] }), section.id)))) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.empty }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.accordionLessons.empty", defaultMessage: "ui.course.accordionLessons.empty" }) }))) })));
}
exports.default = AccordionLessons;