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

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

import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useCallback } from 'react';
import { useThemeProps } from '@mui/system';
import classNames from 'classnames';
import { Box, Typography, CardContent, styled } from '@mui/material';
import { PREFIX } from './constants';
import { useSCRouting } from '@selfcommunity/react-core';
import { getContributionHtml } from '../../utils/contribution';
import Widget from '../Widget';
import ContentLesson from '../Composer/Content/ContentLesson';
import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
import DisplayComponent from '../../shared/Media/Link/DisplayComponent';
import LessonFilePreview from '../../shared/LessonFilePreview';
import { MediaTypes } from '@selfcommunity/api-services';
const classes = {
    root: `${PREFIX}-root`,
    content: `${PREFIX}-content`,
    contentEdit: `${PREFIX}-content-edit`,
    title: `${PREFIX}-title`,
    text: `${PREFIX}-text`,
    mediasSection: `${PREFIX}-medias-section`,
    files: `${PREFIX}-files`,
    navigation: `${PREFIX}-navigation`,
    editor: `${PREFIX}-editor`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (_props, styles) => [styles.root]
})(() => ({}));
export default function LessonObject(inProps) {
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { className = null, course, lesson, editMode, EditorProps = {}, onContentChange, onMediaChange, isSubmitting } = props, rest = __rest(props, ["className", "course", "lesson", "editMode", "EditorProps", "onContentChange", "onMediaChange", "isSubmitting"]);
    // CONTEXT
    const scRoutingContext = useSCRouting();
    // HANDLERS
    const handleChangeLesson = useCallback((content) => {
        if (onContentChange) {
            onContentChange(content);
        }
    }, [onContentChange]);
    const handleChangeMedia = useCallback((medias) => {
        if (onMediaChange) {
            onMediaChange(medias);
        }
    }, [onMediaChange]);
    // RENDER
    if (!course || !lesson) {
        return _jsx(HiddenPlaceholder, {});
    }
    return (_jsx(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: _jsx(Widget, { children: _jsx(CardContent, Object.assign({ classes: { root: editMode ? classes.contentEdit : classes.content } }, { children: editMode ? (_jsx(ContentLesson, { value: lesson, 
                    //error={{error}}
                    onChange: handleChangeLesson, onMediaChange: handleChangeMedia, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: true }, EditorProps) })) : (_jsxs(_Fragment, { children: [_jsx(Typography, { component: "div", gutterBottom: true, className: classes.text, dangerouslySetInnerHTML: {
                                __html: getContributionHtml(lesson.html, scRoutingContext.url)
                            } }), lesson.medias && lesson.medias.length > 0 && (_jsxs(Box, Object.assign({ className: classes.mediasSection }, { children: [lesson.medias
                                    .filter((media) => media.type === MediaTypes.URL)
                                    .map((media) => (_jsx(DisplayComponent, { medias: [media] }, media.id))), lesson.medias.some((media) => media.type !== MediaTypes.URL) && (_jsx(Box, Object.assign({ className: classes.files }, { children: lesson.medias
                                        .filter((media) => media.type !== MediaTypes.URL)
                                        .map((media) => (_jsx(LessonFilePreview, { media: media }, media.id))) })))] })))] })) })) }) })));
}