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

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

import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { useThemeProps } from '@mui/system';
import classNames from 'classnames';
import { Box, Checkbox, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, styled } from '@mui/material';
import { PREFIX } from './constants';
import { FormattedMessage } from 'react-intl';
import { SCCourseLessonStatusType } from '@selfcommunity/types';
import { LoadingButton } from '@mui/lab';
const classes = {
    root: `${PREFIX}-root`,
    form: `${PREFIX}-form`,
    settings: `${PREFIX}-settings`,
    button: `${PREFIX}-button`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (props, styles) => [styles.root]
})(() => ({}));
export default function LessonEditForm(inProps) {
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { className = null, lesson, onSettingsChange, onSave, updating } = props, rest = __rest(props, ["className", "lesson", "onSettingsChange", "onSave", "updating"]);
    //STATE
    const [settings, setSettings] = useState({ comments_enabled: lesson.comments_enabled, status: lesson.status });
    // HANDLERS
    const handleChange = (field, value) => {
        const updatedSettings = Object.assign(Object.assign({}, settings), { [field]: value });
        setSettings(updatedSettings);
        onSettingsChange(updatedSettings);
    };
    /**
     * Rendering
     */
    return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsxs(Box, Object.assign({ className: classes.form }, { children: [_jsxs(FormControl, { children: [_jsx(FormLabel, Object.assign({ id: "status" }, { children: _jsx(FormattedMessage, { id: "ui.lessonEditForm.status.title", defaultMessage: "ui.lessonEditForm.status.title" }) })), _jsxs(RadioGroup, Object.assign({ "aria-labelledby": "course-status-radio-buttons-group", name: "course-status-radio-buttons-group", value: settings.status, onChange: (e) => handleChange('status', e.target.value) }, { children: [_jsx(FormControlLabel, { value: SCCourseLessonStatusType.DRAFT, control: _jsx(Radio, {}), label: _jsx(FormattedMessage, { id: "ui.lessonEditForm.status.draft", defaultMessage: "ui.lessonEditForm.status.draft" }) }), _jsx(FormControlLabel, { value: SCCourseLessonStatusType.PUBLISHED, control: _jsx(Radio, {}), label: _jsx(FormattedMessage, { id: "ui.lessonEditForm.status.published", defaultMessage: "ui.lessonEditForm.status.published" }) })] }))] }), _jsxs(FormControl, Object.assign({ className: classes.settings }, { children: [_jsx(FormLabel, Object.assign({ id: "settings" }, { children: _jsx(FormattedMessage, { id: "ui.lessonEditForm.settings.title", defaultMessage: "ui.lessonEditForm.settings.title" }) })), _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: settings.comments_enabled, onChange: (e) => handleChange('comments_enabled', e.target.checked) }), label: _jsx(FormattedMessage, { id: "ui.lessonEditForm.settings.enableComments", defaultMessage: "ui.lessonEditForm.settings.enableComments" }) })] }))] })), _jsx(LoadingButton, Object.assign({ className: classes.button, variant: "contained", size: "small", onClick: onSave, loading: updating }, { children: _jsx(FormattedMessage, { id: "ui.lessonEditForm.button.save", defaultMessage: "ui.lessonEditForm.button.save" }) }))] })));
}