@selfcommunity/react-ui/lib/esm/components/CourseForm/Edit.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 { Box, FormControl, FormControlLabel, Icon, Radio, RadioGroup, Typography, styled } from '@mui/material';
import { useThemeProps } from '@mui/system';
import { SCCourseLessonStatusType, SCCoursePrivacyType } from '@selfcommunity/types';
import classNames from 'classnames';
import { FormattedMessage } from 'react-intl';
import { PREFIX } from './constants';
import Widget from '../Widget';
import { useState } from 'react';
const classes = {
    root: `${PREFIX}-edit-root`,
    access: `${PREFIX}-edit-access`,
    card: `${PREFIX}-edit-card`,
    accessInfo: `${PREFIX}-edit-access-info`,
    publish: `${PREFIX}-edit-publish`,
    publishInfo: `${PREFIX}-edit-publish-info`,
    privacyItem: `${PREFIX}-edit-privacy-item`,
    privacyItemInfo: `${PREFIX}-edit-privacy-item-info`,
    disabled: `${PREFIX}-disabled`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'Root'
})(() => ({}));
export default function CourseEdit(inProps) {
    var _a;
    //PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { className, onPrivacyChange, course } = props, rest = __rest(props, ["className", "onPrivacyChange", "course"]);
    // STATE
    const [privacy, setPrivacy] = useState(course.privacy);
    const notPublishable = course.num_lessons === 0 ||
        !((_a = course.sections) === null || _a === void 0 ? void 0 : _a.some((section) => section.lessons.some((lesson) => lesson.status === SCCourseLessonStatusType.PUBLISHED)));
    //HANDLERS
    const handleChange = (event) => {
        setPrivacy(event.target.value);
        onPrivacyChange(event.target.value);
    };
    /**
     * Renders root object
     */
    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [course.privacy === SCCoursePrivacyType.DRAFT && (_jsxs(Box, Object.assign({ className: classes.access }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.access.section.title", defaultMessage: "ui.courseForm.edit.access.section.title" }) })), _jsxs(Widget, Object.assign({ className: classes.card }, { children: [_jsx(Icon, Object.assign({ fontSize: "medium", color: "warning" }, { children: "error" })), _jsxs(Box, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.access.info.title", defaultMessage: "ui.courseForm.edit.access.info.title" }) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.access.info.subtitle", defaultMessage: "ui.courseForm.edit.access.info.subtitle" }) })), _jsxs(Box, Object.assign({ className: classes.accessInfo }, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.access.info.access", defaultMessage: "ui.courseForm.edit.access.info.access", values: { icon: (...chunks) => _jsx(Icon, { children: chunks }) } }) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.access.info.visibility", defaultMessage: "ui.courseForm.edit.access.info.visibility", values: { icon: (...chunks) => _jsx(Icon, { children: chunks }) } }) }))] }))] })] }))] }))), _jsxs(Box, Object.assign({ className: classes.publish }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.publication.title", defaultMessage: "ui.courseForm.edit.publication.title" }) })), notPublishable ? (_jsxs(Widget, Object.assign({ className: classes.card }, { children: [_jsx(Icon, Object.assign({ fontSize: "medium", color: "warning" }, { children: "error" })), _jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.publication.subtitle.info", defaultMessage: "ui.courseForm.edit.publication.subtitle.info" }) })] }))) : (_jsx(Typography, Object.assign({ variant: "body1", className: classes.publishInfo }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.publication.subtitle", defaultMessage: "ui.courseForm.edit.publication.subtitle" }) }))), _jsx(RadioGroup, { children: Object.values(SCCoursePrivacyType)
                            .filter((option) => option !== SCCoursePrivacyType.DRAFT)
                            .map((option, index) => (_jsxs(FormControl, Object.assign({ className: classes.privacyItem, disabled: notPublishable }, { children: [_jsx(FormControlLabel, { control: _jsx(Radio, { size: "small", value: option, checked: option === privacy, onChange: handleChange, disabled: notPublishable }), label: _jsx(FormattedMessage, { id: `ui.courseForm.edit.publication.option.${option}.title`, defaultMessage: `ui.courseForm.edit.publication.option.${option}.title` }) }), _jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body1", className: classNames(classes.privacyItemInfo, { [classes.disabled]: notPublishable }) }, { children: _jsx(FormattedMessage, { id: `ui.courseForm.edit.publication.option.${option}.access`, defaultMessage: `ui.courseForm.edit.publication.option.${option}.access`, values: { icon: (...chunks) => _jsx(Icon, { children: chunks }) } }) })), _jsx(Typography, Object.assign({ variant: "body1", className: classNames(classes.privacyItemInfo, { [classes.disabled]: notPublishable }) }, { children: _jsx(FormattedMessage, { id: `ui.courseForm.edit.publication.option.${option}.visibility`, defaultMessage: `ui.courseForm.edit.publication.option.${option}.visibility`, values: { icon: (...chunks) => _jsx(Icon, { children: chunks }) } }) }))] })] }), index))) })] }))] })));
}