@selfcommunity/react-ui/lib/cjs/components/LessonObject/LessonObject.js

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

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = 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 react_core_1 = require("@selfcommunity/react-core");
const contribution_1 = require("../../utils/contribution");
const Widget_1 = tslib_1.__importDefault(require("../Widget"));
const ContentLesson_1 = tslib_1.__importDefault(require("../Composer/Content/ContentLesson"));
const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
const DisplayComponent_1 = tslib_1.__importDefault(require("../../shared/Media/Link/DisplayComponent"));
const LessonFilePreview_1 = tslib_1.__importDefault(require("../../shared/LessonFilePreview"));
const api_services_1 = require("@selfcommunity/api-services");
const classes = {
    root: `${constants_1.PREFIX}-root`,
    content: `${constants_1.PREFIX}-content`,
    contentEdit: `${constants_1.PREFIX}-content-edit`,
    title: `${constants_1.PREFIX}-title`,
    text: `${constants_1.PREFIX}-text`,
    mediasSection: `${constants_1.PREFIX}-medias-section`,
    files: `${constants_1.PREFIX}-files`,
    navigation: `${constants_1.PREFIX}-navigation`,
    editor: `${constants_1.PREFIX}-editor`
};
const Root = (0, material_1.styled)(material_1.Box, {
    name: constants_1.PREFIX,
    slot: 'Root',
    overridesResolver: (_props, styles) => [styles.root]
})(() => ({}));
function LessonObject(inProps) {
    // PROPS
    const props = (0, system_1.useThemeProps)({
        props: inProps,
        name: constants_1.PREFIX
    });
    const { className = null, course, lesson, editMode, EditorProps = {}, onContentChange, onMediaChange, isSubmitting } = props, rest = tslib_1.__rest(props, ["className", "course", "lesson", "editMode", "EditorProps", "onContentChange", "onMediaChange", "isSubmitting"]);
    // CONTEXT
    const scRoutingContext = (0, react_core_1.useSCRouting)();
    // HANDLERS
    const handleChangeLesson = (0, react_1.useCallback)((content) => {
        if (onContentChange) {
            onContentChange(content);
        }
    }, [onContentChange]);
    const handleChangeMedia = (0, react_1.useCallback)((medias) => {
        if (onMediaChange) {
            onMediaChange(medias);
        }
    }, [onMediaChange]);
    // RENDER
    if (!course || !lesson) {
        return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
    }
    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: (0, jsx_runtime_1.jsx)(Widget_1.default, { children: (0, jsx_runtime_1.jsx)(material_1.CardContent, Object.assign({ classes: { root: editMode ? classes.contentEdit : classes.content } }, { children: editMode ? ((0, jsx_runtime_1.jsx)(ContentLesson_1.default, { value: lesson, 
                    //error={{error}}
                    onChange: handleChangeLesson, onMediaChange: handleChangeMedia, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: true }, EditorProps) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { component: "div", gutterBottom: true, className: classes.text, dangerouslySetInnerHTML: {
                                __html: (0, contribution_1.getContributionHtml)(lesson.html, scRoutingContext.url)
                            } }), lesson.medias && lesson.medias.length > 0 && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.mediasSection }, { children: [lesson.medias
                                    .filter((media) => media.type === api_services_1.MediaTypes.URL)
                                    .map((media) => ((0, jsx_runtime_1.jsx)(DisplayComponent_1.default, { medias: [media] }, media.id))), lesson.medias.some((media) => media.type !== api_services_1.MediaTypes.URL) && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.files }, { children: lesson.medias
                                        .filter((media) => media.type !== api_services_1.MediaTypes.URL)
                                        .map((media) => ((0, jsx_runtime_1.jsx)(LessonFilePreview_1.default, { media: media }, media.id))) })))] })))] })) })) }) })));
}
exports.default = LessonObject;