@selfcommunity/react-ui 0.10.2-courses.184 → 0.10.2-courses.186

package/lib/cjs/components/BottomNavigation/BottomNavigation.d.ts

@@ -1,5 +1,5 @@
 import { BottomNavigationProps as MuiBottomNavigationProps } from '@mui/material';
-export declare type BottomNavigationProps = MuiBottomNavigationProps;
+export type BottomNavigationProps = MuiBottomNavigationProps;
 /**
  * > API documentation for the Community-JS Bottom Navigation component. Learn about the available props and the CSS API.
  *

package/lib/cjs/components/CourseDashboard/Header.js

@@ -16,6 +16,7 @@ const classes = {
     outerWrapper: `${constants_1.PREFIX}-header-outer-wrapper`,
     innerWrapper: `${constants_1.PREFIX}-header-inner-wrapper`,
     iconWrapper: `${constants_1.PREFIX}-header-icon-wrapper`,
+    buttonPopover: `${constants_1.PREFIX}-header-button-popover`,
     contrastColor: `${constants_1.PREFIX}-contrast-color`
 };
 function getUrlEditDashboard(course) {
@@ -28,32 +29,36 @@ function getUrlEditDashboard(course) {
 function HeaderCourseDashboard(props) {
     // PROPS
     const { course, hasAction = false } = props;
+    // STATES
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+    const open = Boolean(anchorEl);
     // CONTEXTS
     const scRoutingContext = (0, react_core_1.useSCRouting)();
-    // HOOKS
+    // INTL
     const intl = (0, react_intl_1.useIntl)();
-    const iconData = (0, react_1.useMemo)(() => {
-        const underId = course.privacy === types_1.SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy;
-        return [
-            {
-                id: 'ui.course.label',
-                icon: 'public',
-                key: 'privacy',
-                underId: `ui.course.privacy.${underId}`
-            },
-            {
-                id: 'ui.course.type',
-                icon: 'courses',
-                key: 'typeOfCourse',
-                underId: `ui.course.type.${course.type}`
-            }
-        ];
-    }, [course]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.header }, { children: [(0, jsx_runtime_1.jsx)("img", { src: course.image_bigger, alt: course.image_bigger, className: classes.img }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.contrastColor }, { children: course.name })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.outerWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.innerWrapper }, { children: iconData.map((data, i) => ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: (0, classnames_1.default)(classes.iconWrapper, classes.contrastColor) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: data.icon })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: data.id, defaultMessage: data.id, values: {
-                                            [`${data.key}`]: intl.formatMessage({
-                                                id: data.underId,
-                                                defaultMessage: data.underId
-                                            })
-                                        } }) }))] }), i))) })), hasAction && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_EDIT_ROUTE_NAME, getUrlEditDashboard(course)), size: "small", color: "primary", variant: "contained" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.btn.label", defaultMessage: "ui.course.dashboard.teacher.btn.label" }) })) })))] }))] })));
+    // HANDLERS
+    const handleOpenPopover = (0, react_1.useCallback)((e) => {
+        setAnchorEl(e.currentTarget);
+    }, [setAnchorEl]);
+    const handlePopoverClose = (0, react_1.useCallback)(() => {
+        setAnchorEl(null);
+    }, [setAnchorEl]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.header }, { children: [(0, jsx_runtime_1.jsx)("img", { src: course.image_bigger, alt: course.image_bigger, className: classes.img }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.contrastColor }, { children: course.name })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.outerWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.innerWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: (0, classnames_1.default)(classes.iconWrapper, classes.contrastColor) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "public" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.label", defaultMessage: "ui.course.label", values: {
+                                                privacy: intl.formatMessage({
+                                                    id: `ui.course.privacy.${course.privacy === types_1.SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`,
+                                                    defaultMessage: `ui.course.privacy.${course.privacy === types_1.SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`
+                                                })
+                                            } }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: (0, classnames_1.default)(classes.iconWrapper, classes.contrastColor) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "courses" })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", color: "inherit", size: "small", className: classes.buttonPopover, onClick: handleOpenPopover }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.type", defaultMessage: "ui.course.type", values: {
+                                                    typeOfCourse: intl.formatMessage({
+                                                        id: `ui.course.type.${course.type}`,
+                                                        defaultMessage: `ui.course.type.${course.type}`
+                                                    })
+                                                } }) })) })), open && ((0, jsx_runtime_1.jsx)(material_1.Popover, Object.assign({ open: true, anchorEl: anchorEl, anchorOrigin: {
+                                            vertical: 'bottom',
+                                            horizontal: 'left'
+                                        }, transformOrigin: {
+                                            vertical: 'top',
+                                            horizontal: 'left'
+                                        }, onClose: handlePopoverClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { padding: '10px' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", variant: "body2", sx: { whiteSpace: 'pre-line' } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${course.type}.info`, defaultMessage: `ui.courseForm.${course.type}.info` }) })) })) })))] }))] })), hasAction && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_EDIT_ROUTE_NAME, getUrlEditDashboard(course)), size: "small", color: "primary", variant: "contained" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.btn.label", defaultMessage: "ui.course.dashboard.teacher.btn.label" }) })) })))] }))] })));
 }
 exports.default = (0, react_1.memo)(HeaderCourseDashboard);

package/lib/cjs/components/EditCourse/Lessons/LessonRow.d.ts

@@ -1,15 +1,15 @@
 /// <reference types="react" />
 import { DraggableProvided } from '@hello-pangea/dnd';
 import { SCCourseLessonType, SCCourseSectionType, SCCourseType } from '@selfcommunity/types';
-import { ActionLessonType } from '../types';
+import { ActionLessonType, DeleteRowRef } from '../types';
 interface LessonRowProps {
     provider: DraggableProvided;
-    course: SCCourseType | null;
+    course: SCCourseType;
     section: SCCourseSectionType;
     lesson: SCCourseLessonType;
     isNewRow: boolean;
     handleManageLesson: (lesson: SCCourseLessonType, type: ActionLessonType, newRow?: boolean) => void;
+    handleOpenDialog: () => void;
 }
-declare function LessonRow(props: LessonRowProps): JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof LessonRow>;
+declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<LessonRowProps & import("react").RefAttributes<DeleteRowRef>>>;
 export default _default;

package/lib/cjs/components/EditCourse/Lessons/LessonRow.js

@@ -16,7 +16,6 @@ const notistack_1 = require("notistack");
 const react_core_1 = require("@selfcommunity/react-core");
 const Errors_1 = require("../../../constants/Errors");
 const types_1 = require("../types");
-const ConfirmDialog_1 = tslib_1.__importDefault(require("../../../shared/ConfirmDialog/ConfirmDialog"));
 const hooks_1 = require("../hooks");
 const classes = {
     cellWidth: `${constants_1.PREFIX}-cell-width`,
@@ -33,12 +32,11 @@ function getUrlLesson(course, section, lesson) {
         lesson_id: lesson.id
     };
 }
-function LessonRow(props) {
+function LessonRow(props, ref) {
     // PROPS
-    const { provider, course, section, lesson, isNewRow, handleManageLesson } = props;
+    const { provider, course, section, lesson, isNewRow, handleManageLesson, handleOpenDialog } = props;
     // STATES
     const [editMode, setEditMode] = (0, react_1.useState)(false);
-    const [open, setOpen] = (0, react_1.useState)(false);
     // CONTEXTS
     const scRoutingContext = (0, react_core_1.useSCRouting)();
     // HOOKS
@@ -47,10 +45,10 @@ function LessonRow(props) {
     // HANDLERS
     const handleAbleEditMode = (0, react_1.useCallback)(() => setTimeout(() => setEditMode(true)), [setEditMode]);
     const handleDisableEditMode = (0, react_1.useCallback)(() => setEditMode(false), [setEditMode]);
-    const handleDeleteLesson = (0, react_1.useCallback)(() => {
-        api_services_1.CourseService.deleteCourseLesson(course.id, section.id, lesson.id)
+    const handleDeleteLesson = (0, react_1.useCallback)((deleteSection, deleteLesson) => {
+        api_services_1.CourseService.deleteCourseLesson(course.id, deleteSection.id, deleteLesson.id)
             .then(() => {
-            handleManageLesson(lesson, types_1.ActionLessonType.DELETE);
+            handleManageLesson(deleteLesson, types_1.ActionLessonType.DELETE);
             enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons.table.snackbar.delete", defaultMessage: "ui.editCourse.tab.lessons.table.snackbar.delete" }), {
                 variant: 'success',
                 autoHideDuration: 3000
@@ -63,15 +61,15 @@ function LessonRow(props) {
                 autoHideDuration: 3000
             });
         });
-    }, [course, section, lesson, handleManageLesson]);
-    const handleOpenDialog = (0, react_1.useCallback)(() => {
-        setOpen((prev) => !prev);
-    }, [setOpen]);
+    }, [course, handleManageLesson]);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        handleDeleteLesson: (deleteSection, deleteLesson) => handleDeleteLesson(deleteSection, deleteLesson)
+    }), [handleDeleteLesson]);
     return ((0, jsx_runtime_1.jsxs)(material_1.TableRow, Object.assign({}, provider.draggableProps, { ref: provider.innerRef }, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { width: "4%" }), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, provider.dragHandleProps, { className: (0, classnames_1.default)(classes.cellWidth, classes.cellPadding) }, { children: (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.tableBodyIconWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "disabled" }, { children: "drag" })) })) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(FieldName_1.default, { endpoint: {
                         url: () => isNewRow
                             ? api_services_1.Endpoints.CreateCourseLesson.url({ id: course.id, section_id: section.id })
                             : api_services_1.Endpoints.PatchCourseLesson.url({ id: course.id, section_id: section.id, lesson_id: lesson.id }),
                         method: isNewRow ? api_services_1.Endpoints.CreateCourseLesson.method : api_services_1.Endpoints.PatchCourseLesson.method
-                    }, row: lesson, isNewRow: isNewRow, handleManageRow: handleManageLesson, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, {}), (0, jsx_runtime_1.jsxs)(material_1.TableCell, Object.assign({ className: classes.cellAlignRight }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actionsWrapper }, { children: [(0, jsx_runtime_1.jsx)(ChangeLessonStatus_1.default, { course: course, section: section, lesson: lesson, disabled: isDisabled }), (0, jsx_runtime_1.jsxs)(MenuRow_1.default, Object.assign({ disabled: isDisabled }, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_LESSON_EDIT_ROUTE_NAME, getUrlLesson(course, section, lesson)) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.edit", defaultMessage: "ui.editCourse.tab.lessons.table.menu.edit" }) })) })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_LESSON_PREVIEW_ROUTE_NAME, getUrlLesson(course, section, lesson)) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.preview", defaultMessage: "ui.editCourse.tab.lessons.table.menu.preview" }) })) })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: handleAbleEditMode }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.rename", defaultMessage: "ui.editCourse.tab.lessons.table.menu.rename" }) })) })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: handleOpenDialog }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.delete", defaultMessage: "ui.editCourse.tab.lessons.table.menu.delete" }) })) }))] }))] })), open && (0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: true, onClose: handleOpenDialog, onConfirm: handleDeleteLesson })] }))] })));
+                    }, row: lesson, isNewRow: isNewRow, handleManageRow: handleManageLesson, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, {}), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: classes.cellAlignRight }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actionsWrapper }, { children: [(0, jsx_runtime_1.jsx)(ChangeLessonStatus_1.default, { course: course, section: section, lesson: lesson, disabled: isDisabled }), (0, jsx_runtime_1.jsxs)(MenuRow_1.default, Object.assign({ disabled: isDisabled }, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_LESSON_EDIT_ROUTE_NAME, getUrlLesson(course, section, lesson)) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.edit", defaultMessage: "ui.editCourse.tab.lessons.table.menu.edit" }) })) })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_LESSON_PREVIEW_ROUTE_NAME, getUrlLesson(course, section, lesson)) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.preview", defaultMessage: "ui.editCourse.tab.lessons.table.menu.preview" }) })) })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: handleAbleEditMode }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.rename", defaultMessage: "ui.editCourse.tab.lessons.table.menu.rename" }) })) })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: handleOpenDialog }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.delete", defaultMessage: "ui.editCourse.tab.lessons.table.menu.delete" }) })) }))] }))] })) }))] })));
 }
-exports.default = (0, react_1.memo)(LessonRow);
+exports.default = (0, react_1.memo)((0, react_1.forwardRef)(LessonRow));

package/lib/cjs/components/EditCourse/Lessons/SectionRow.d.ts

@@ -1,14 +1,14 @@
 /// <reference types="react" />
 import { DraggableProvided } from '@hello-pangea/dnd';
 import { SCCourseSectionType, SCCourseType } from '@selfcommunity/types';
-import { ActionLessonType } from '../types';
+import { ActionLessonType, DeleteRowProps, DeleteRowRef } from '../types';
 interface SectionRowProps {
-    course: SCCourseType | null;
+    course: SCCourseType;
     provider: DraggableProvided;
     section: SCCourseSectionType;
     isNewRow: boolean;
     handleManageSection: (section: SCCourseSectionType, type: ActionLessonType, newRow?: boolean) => void;
+    handleOpenDialog: (row: DeleteRowProps) => void;
 }
-declare function SectionRow(props: SectionRowProps): JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof SectionRow>;
+declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<SectionRowProps & import("react").RefAttributes<DeleteRowRef>>>;
 export default _default;

package/lib/cjs/components/EditCourse/Lessons/SectionRow.js

@@ -20,7 +20,6 @@ const types_1 = require("@selfcommunity/types");
 const api_services_1 = require("@selfcommunity/api-services");
 const types_2 = require("../types");
 const hooks_1 = require("../hooks");
-const ConfirmDialog_1 = tslib_1.__importDefault(require("../../../shared/ConfirmDialog/ConfirmDialog"));
 const classes = {
     tableBodyIconWrapper: `${constants_1.PREFIX}-table-body-icon-wrapper`,
     tableBodyAccordion: `${constants_1.PREFIX}-table-body-accordion`,
@@ -31,14 +30,15 @@ const classes = {
     cellAlignCenter: `${constants_1.PREFIX}-cell-align-center`,
     cellPadding: `${constants_1.PREFIX}-cell-padding`
 };
-function SectionRow(props) {
+function SectionRow(props, ref) {
     // PROPS
-    const { course, provider, section, isNewRow, handleManageSection } = props;
+    const { course, provider, section, isNewRow, handleManageSection, handleOpenDialog } = props;
     // STATES
     const [expand, setExpand] = (0, react_1.useState)(true);
-    const [open, setOpen] = (0, react_1.useState)(false);
     const [editMode, setEditMode] = (0, react_1.useState)(false);
     const [lessons, setLessons] = (0, react_1.useState)([]);
+    // REFS
+    const innerRef = (0, react_1.useRef)(null);
     // HOOKS
     const { isDisabled } = (0, hooks_1.useIsDisabled)();
     const intl = (0, react_intl_1.useIntl)();
@@ -59,10 +59,6 @@ function SectionRow(props) {
             name: intl.formatMessage({ id: 'ui.editCourse.tab.lessons.table.newLesson', defaultMessage: 'ui.editCourse.tab.lessons.table.newLesson' }, { num: id })
         };
     }, []);
-    // HANDLERS
-    const handleOpenDialog = (0, react_1.useCallback)(() => {
-        setOpen((prev) => !prev);
-    }, [setOpen]);
     const handleExpandAccordion = (0, react_1.useCallback)(() => setExpand((prev) => !prev), [setExpand]);
     const handleDragEnd = (0, react_1.useCallback)((e) => {
         if (!e.destination || e.destination.index === e.source.index) {
@@ -96,13 +92,12 @@ function SectionRow(props) {
     }, [setLessons, getLesson]);
     const handleAbleEditMode = (0, react_1.useCallback)(() => setTimeout(() => setEditMode(true)), [setEditMode]);
     const handleDisableEditMode = (0, react_1.useCallback)(() => setEditMode(false), [setEditMode]);
-    const handleDeleteSection = (0, react_1.useCallback)(() => {
-        api_services_1.CourseService.deleteCourseSection(course.id, section.id)
+    const handleDeleteSection = (0, react_1.useCallback)((deleteSection) => {
+        api_services_1.CourseService.deleteCourseSection(course.id, deleteSection.id)
             .then(() => {
             var _a;
-            const tempSection = Object.assign(Object.assign({}, section), { num_lessons: ((_a = section.lessons) === null || _a === void 0 ? void 0 : _a.length) || 0 });
+            const tempSection = Object.assign(Object.assign({}, deleteSection), { num_lessons: ((_a = deleteSection.lessons) === null || _a === void 0 ? void 0 : _a.length) || 0 });
             handleManageSection(tempSection, types_2.ActionLessonType.DELETE);
-            handleOpenDialog();
             enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons.table.snackbar.delete", defaultMessage: "ui.editCourse.tab.lessons.table.snackbar.delete" }), {
                 variant: 'success',
                 autoHideDuration: 3000
@@ -115,7 +110,7 @@ function SectionRow(props) {
                 autoHideDuration: 3000
             });
         });
-    }, [course, section, handleManageSection, handleOpenDialog]);
+    }, [course, handleManageSection]);
     const handleManageLesson = (0, react_1.useCallback)((lesson, type, newRow) => {
         switch (type) {
             case types_2.ActionLessonType.ADD: {
@@ -139,11 +134,15 @@ function SectionRow(props) {
             }
         }
     }, [section, handleManageSection]);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        handleDeleteSection: (deleteSection) => handleDeleteSection(deleteSection),
+        handleDeleteLesson: (deleteSection, deleteLesson) => innerRef.current.handleDeleteLesson(deleteSection, deleteLesson)
+    }), [handleDeleteSection]);
     return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.TableRow, Object.assign({}, provider.draggableProps, { ref: provider.innerRef, className: classes.tableBodyAccordion }, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, provider.dragHandleProps, { className: (0, classnames_1.default)(classes.cellWidth, classes.cellPadding) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.tableBodyIconWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ "aria-label": "expand row", size: "small", onClick: handleExpandAccordion }, { children: expand ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_less" }) : (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_more" }) })), (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "disabled" }, { children: "drag" }))] })) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(FieldName_1.default, { endpoint: {
                                 url: () => isNewRow
                                     ? api_services_1.Endpoints.CreateCourseSection.url({ id: course.id })
                                     : api_services_1.Endpoints.PatchCourseSection.url({ id: course.id, section_id: section.id }),
                                 method: isNewRow ? api_services_1.Endpoints.CreateCourseSection.method : api_services_1.Endpoints.PatchCourseSection.method
-                            }, row: section, isNewRow: isNewRow, handleManageRow: handleManageSection, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: classes.cellAlignCenter }, { children: (0, jsx_runtime_1.jsx)(LessonReleaseMenu_1.default, { course: course, section: section }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: classes.cellAlignRight }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actionsWrapper }, { children: [(0, jsx_runtime_1.jsx)(AddButton_1.default, { label: "ui.editCourse.tab.lessons.table.lesson", handleAddRow: handleAddTempLesson, color: "primary", variant: "outlined", disabled: isDisabled }), (0, jsx_runtime_1.jsxs)(MenuRow_1.default, Object.assign({ disabled: isDisabled }, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: handleAbleEditMode }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.rename", defaultMessage: "ui.editCourse.tab.lessons.table.menu.rename" }) })) })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: handleOpenDialog }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.delete", defaultMessage: "ui.editCourse.tab.lessons.table.menu.delete" }) })) }))] }))] })) }))] })), (0, jsx_runtime_1.jsx)(material_1.TableRow, { children: (0, jsx_runtime_1.jsxs)(material_1.TableCell, Object.assign({ className: classes.tableBodyCollapseWrapper, colSpan: 4 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ in: expand, timeout: "auto", unmountOnExit: true }, { children: (0, jsx_runtime_1.jsx)(dnd_1.DragDropContext, Object.assign({ onDragEnd: handleDragEnd }, { children: (0, jsx_runtime_1.jsx)(material_1.Table, { children: (0, jsx_runtime_1.jsx)(dnd_1.Droppable, Object.assign({ droppableId: "droppable-2" }, { children: (outerProvider) => ((0, jsx_runtime_1.jsxs)(material_1.TableBody, Object.assign({ ref: outerProvider.innerRef }, outerProvider.droppableProps, { children: [lessons.map((lesson, i, array) => ((0, jsx_runtime_1.jsx)(dnd_1.Draggable, Object.assign({ draggableId: i.toString(), index: i, isDragDisabled: isDisabled }, { children: (innerProvider) => ((0, jsx_runtime_1.jsx)(LessonRow_1.default, { provider: innerProvider, course: course, section: section, lesson: lesson, isNewRow: isNewLocalRow && i + 1 === array.length, handleManageLesson: handleManageLesson }, i)) }), i))), outerProvider.placeholder] }))) })) }) })) })), open && (0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: true, onClose: handleOpenDialog, onConfirm: handleDeleteSection })] })) })] }));
+                            }, row: section, isNewRow: isNewRow, handleManageRow: handleManageSection, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: classes.cellAlignCenter }, { children: (0, jsx_runtime_1.jsx)(LessonReleaseMenu_1.default, { course: course, section: section }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: classes.cellAlignRight }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actionsWrapper }, { children: [(0, jsx_runtime_1.jsx)(AddButton_1.default, { label: "ui.editCourse.tab.lessons.table.lesson", handleAddRow: handleAddTempLesson, color: "primary", variant: "outlined", disabled: isDisabled }), (0, jsx_runtime_1.jsxs)(MenuRow_1.default, Object.assign({ disabled: isDisabled }, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: handleAbleEditMode }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.rename", defaultMessage: "ui.editCourse.tab.lessons.table.menu.rename" }) })) })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: () => handleOpenDialog({ row: types_2.RowType.SECTION, section }) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.delete", defaultMessage: "ui.editCourse.tab.lessons.table.menu.delete" }) })) }))] }))] })) }))] })), (0, jsx_runtime_1.jsx)(material_1.TableRow, { children: (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: classes.tableBodyCollapseWrapper, colSpan: 4 }, { children: (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ in: expand, timeout: "auto", unmountOnExit: true }, { children: (0, jsx_runtime_1.jsx)(dnd_1.DragDropContext, Object.assign({ onDragEnd: handleDragEnd }, { children: (0, jsx_runtime_1.jsx)(material_1.Table, { children: (0, jsx_runtime_1.jsx)(dnd_1.Droppable, Object.assign({ droppableId: "droppable-2" }, { children: (outerProvider) => ((0, jsx_runtime_1.jsxs)(material_1.TableBody, Object.assign({ ref: outerProvider.innerRef }, outerProvider.droppableProps, { children: [lessons.map((lesson, i, array) => ((0, jsx_runtime_1.jsx)(dnd_1.Draggable, Object.assign({ draggableId: i.toString(), index: i, isDragDisabled: isDisabled }, { children: (innerProvider) => ((0, jsx_runtime_1.jsx)(LessonRow_1.default, { provider: innerProvider, course: course, section: section, lesson: lesson, isNewRow: isNewLocalRow && i + 1 === array.length, handleManageLesson: handleManageLesson, handleOpenDialog: () => handleOpenDialog({ row: types_2.RowType.LESSON, section, lesson }), ref: innerRef }, i)) }), i))), outerProvider.placeholder] }))) })) }) })) })) })) })] }));
 }
-exports.default = (0, react_1.memo)(SectionRow);
+exports.default = (0, react_1.memo)((0, react_1.forwardRef)(SectionRow));

package/lib/cjs/components/EditCourse/Lessons.js

@@ -18,6 +18,7 @@ const SectionRow_1 = tslib_1.__importDefault(require("./Lessons/SectionRow"));
 const types_1 = require("./types");
 const hooks_1 = require("./hooks");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const ConfirmDialog_1 = tslib_1.__importDefault(require("../../shared/ConfirmDialog/ConfirmDialog"));
 const classes = {
     lessonTitle: `${constants_1.PREFIX}-lesson-title`,
     lessonInfoWrapper: `${constants_1.PREFIX}-lesson-info-wrapper`,
@@ -57,6 +58,9 @@ function Lessons(props) {
     const { course, setCourse } = props;
     // STATES
     const [sections, setSections] = (0, react_1.useState)([]);
+    const [dialog, setDialog] = (0, react_1.useState)(null);
+    // REFS
+    const ref = (0, react_1.useRef)(null);
     // HOOKS
     const { isDisabled } = (0, hooks_1.useIsDisabled)();
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
@@ -165,6 +169,19 @@ function Lessons(props) {
             }
         }
     }, [course]);
+    const handleOpenDialog = (0, react_1.useCallback)((row) => {
+        setDialog(row);
+    }, [setDialog]);
+    const handleDeleteRow = (0, react_1.useCallback)(() => {
+        switch (dialog.row) {
+            case types_1.RowType.SECTION:
+                ref.current.handleDeleteSection(dialog.section);
+                break;
+            case types_1.RowType.LESSON:
+                ref.current.handleDeleteLesson(dialog.section, dialog.lesson);
+        }
+        handleOpenDialog(null);
+    }, [dialog, handleOpenDialog]);
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.lessonTitle, classes.contrastColor), variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.lessons", defaultMessage: "ui.editCourse.tab.lessons" }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.lessonInfoWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.lessonInfo }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.contrastColor }, { children: "courses" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.contrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.type", defaultMessage: "ui.course.type", values: {
                                         typeOfCourse: intl.formatMessage({
                                             id: `ui.course.type.${course.type}`,
@@ -174,6 +191,6 @@ function Lessons(props) {
                                                 sectionsNumber: course.num_sections
                                             } }) })), (0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.circle }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.table.lessons.title", defaultMessage: "ui.course.table.lessons.title", values: {
                                                 lessonsNumber: course.num_lessons
-                                            } }) }))] })), (0, jsx_runtime_1.jsx)(AddButton_1.default, { label: "ui.editCourse.tab.lessons.table.section", handleAddRow: handleAddTempSection, color: "primary", variant: "contained", disabled: isDisabled })] })), (0, jsx_runtime_1.jsx)(dnd_1.DragDropContext, Object.assign({ onDragEnd: handleDragEnd }, { children: (0, jsx_runtime_1.jsx)(material_1.TableContainer, Object.assign({ className: (0, classnames_1.default)(classes.tableContainer, classes.contrastBgColor) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Table, Object.assign({ className: classes.table }, { children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, Object.assign({ className: classes.tableHeader }, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { className: classes.cellWidth }), headerCells.map((cell, i) => ((0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: cell.className }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.tableHeaderTypography, variant: "overline" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: cell.id, defaultMessage: cell.id }) })) }), i)))] }) })), (0, jsx_runtime_1.jsx)(dnd_1.Droppable, Object.assign({ droppableId: "droppable-1" }, { children: (outerProvider) => ((0, jsx_runtime_1.jsxs)(material_1.TableBody, Object.assign({ ref: outerProvider.innerRef }, outerProvider.droppableProps, { className: classes.tableBody }, { children: [sections.map((section, i, array) => ((0, jsx_runtime_1.jsx)(dnd_1.Draggable, Object.assign({ draggableId: i.toString(), index: i, isDragDisabled: isDisabled }, { children: (innerProvider) => ((0, jsx_runtime_1.jsx)(SectionRow_1.default, { course: course, provider: innerProvider, section: section, isNewRow: isNewRow && i + 1 === array.length, handleManageSection: handleManageSection }, i)) }), i))), outerProvider.placeholder] }))) }))] })) })) }))] }))] }));
+                                            } }) }))] })), (0, jsx_runtime_1.jsx)(AddButton_1.default, { label: "ui.editCourse.tab.lessons.table.section", handleAddRow: handleAddTempSection, color: "primary", variant: "contained", disabled: isDisabled })] })), (0, jsx_runtime_1.jsx)(dnd_1.DragDropContext, Object.assign({ onDragEnd: handleDragEnd }, { children: (0, jsx_runtime_1.jsx)(material_1.TableContainer, Object.assign({ className: (0, classnames_1.default)(classes.tableContainer, classes.contrastBgColor) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Table, Object.assign({ className: classes.table }, { children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, Object.assign({ className: classes.tableHeader }, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { className: classes.cellWidth }), headerCells.map((cell, i) => ((0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ className: cell.className }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.tableHeaderTypography, variant: "overline" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: cell.id, defaultMessage: cell.id }) })) }), i)))] }) })), (0, jsx_runtime_1.jsx)(dnd_1.Droppable, Object.assign({ droppableId: "droppable-1" }, { children: (outerProvider) => ((0, jsx_runtime_1.jsxs)(material_1.TableBody, Object.assign({ ref: outerProvider.innerRef }, outerProvider.droppableProps, { className: classes.tableBody }, { children: [sections.map((section, i, array) => ((0, jsx_runtime_1.jsx)(dnd_1.Draggable, Object.assign({ draggableId: i.toString(), index: i, isDragDisabled: isDisabled }, { children: (innerProvider) => ((0, jsx_runtime_1.jsx)(SectionRow_1.default, { course: course, provider: innerProvider, section: section, isNewRow: isNewRow && i + 1 === array.length, handleManageSection: handleManageSection, handleOpenDialog: handleOpenDialog, ref: ref }, i)) }), i))), outerProvider.placeholder] }))) }))] })) })) })), dialog && (0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: true, onClose: () => handleOpenDialog(null), onConfirm: handleDeleteRow })] }))] }));
 }
 exports.default = (0, react_1.memo)(Lessons);

package/lib/cjs/components/EditCourse/types.d.ts

@@ -1,3 +1,4 @@
+import { SCCourseLessonType, SCCourseSectionType } from '@selfcommunity/types';
 export declare enum ActionLessonType {
     ADD = "add",
     RENAME = "rename",
@@ -12,3 +13,16 @@ export interface OptionsData {
     new_comment_notification_enabled: boolean;
     hide_member_count: boolean;
 }
+export declare enum RowType {
+    SECTION = "section",
+    LESSON = "lesson"
+}
+export interface DeleteRowProps {
+    row: RowType;
+    section: SCCourseSectionType;
+    lesson?: SCCourseLessonType;
+}
+export interface DeleteRowRef {
+    handleDeleteSection?: (section: SCCourseSectionType) => void;
+    handleDeleteLesson: (section: SCCourseSectionType, lesson: SCCourseLessonType) => void;
+}

package/lib/cjs/components/EditCourse/types.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionLessonType = void 0;
+exports.RowType = exports.ActionLessonType = void 0;
 var ActionLessonType;
 (function (ActionLessonType) {
     ActionLessonType["ADD"] = "add";
@@ -11,3 +11,8 @@ var ActionLessonType;
     ActionLessonType["RENAME_UPDATE"] = "rename_update";
     ActionLessonType["DELETE_UPDATE"] = "delete_update";
 })(ActionLessonType = exports.ActionLessonType || (exports.ActionLessonType = {}));
+var RowType;
+(function (RowType) {
+    RowType["SECTION"] = "section";
+    RowType["LESSON"] = "lesson";
+})(RowType = exports.RowType || (exports.RowType = {}));

package/lib/cjs/components/Editor/Editor.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { ToolbarPluginProps } from './plugins/ToolbarPlugin';
 import { MediaPluginProps } from './plugins';
 import { SCMediaType } from '@selfcommunity/types';
-export declare type EditorRef = {
+export type EditorRef = {
     focus: () => void;
 };
 export interface EditorProps {

package/lib/cjs/components/Editor/Editor.js

@@ -15,10 +15,10 @@ const ToolbarPlugin_1 = tslib_1.__importDefault(require("./plugins/ToolbarPlugin
 const constants_1 = require("./constants");
 const HorizontalRulePlugin_1 = require("./plugins/HorizontalRulePlugin");
 const LexicalRichTextPlugin_1 = require("./plugins/LexicalRichTextPlugin");
-const LexicalErrorBoundary_1 = require("@lexical/react/LexicalErrorBoundary");
 const plugins_1 = require("./plugins");
 const OnBlurPlugin_1 = tslib_1.__importDefault(require("./plugins/OnBlurPlugin"));
 const OnFocusPlugin_1 = tslib_1.__importDefault(require("./plugins/OnFocusPlugin"));
+const LexicalErrorBoundary_1 = require("@lexical/react/LexicalErrorBoundary");
 const LexicalLinkPlugin_1 = require("@lexical/react/LexicalLinkPlugin");
 const FloatingLinkPlugin_1 = tslib_1.__importDefault(require("./plugins/FloatingLinkPlugin"));
 const ApiPlugin_1 = tslib_1.__importDefault(require("./plugins/ApiPlugin"));

package/lib/cjs/components/Editor/nodes/HashtagNode.d.ts

@@ -1,7 +1,7 @@
 import { DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedTextNode, Spread, TextNode } from 'lexical';
 import { SCCategoryType } from '@selfcommunity/types';
 import { DOMConversionMap } from 'lexical/LexicalNode';
-export declare type SerializedHashtagNode = Spread<{
+export type SerializedHashtagNode = Spread<{
     category: SCCategoryType;
     type: 'hashtag';
     version: 1;

package/lib/cjs/components/Editor/nodes/HashtagNode.js

@@ -12,16 +12,16 @@ function convertHashtagElement(domNode) {
     };
 }
 class HashtagNode extends lexical_1.TextNode {
-    constructor(category, text, key) {
-        super(text !== null && text !== void 0 ? text : `#${category.name}`, key);
-        this.__category = category;
-    }
     static getType() {
         return 'hashtag';
     }
     static clone(node) {
         return new HashtagNode(node.__category, node.__text, node.__key);
     }
+    constructor(category, text, key) {
+        super(text !== null && text !== void 0 ? text : `#${category.name}`, key);
+        this.__category = category;
+    }
     createDOM(config) {
         const tag = 'hashtag';
         const dom = document.createElement(tag);
@@ -36,6 +36,8 @@ class HashtagNode extends lexical_1.TextNode {
         if (inner === null) {
             return true;
         }
+        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // @ts-ignore
         super.updateDOM(prevNode, inner, config);
         return false;
     }

package/lib/cjs/components/Editor/nodes/ImageNode.d.ts

@@ -12,7 +12,7 @@ export interface ImagePayload {
 declare function convertImageElement(domNode: any): {
     node: ImageNode;
 };
-export declare type SerializedImageNode = Spread<{
+export type SerializedImageNode = Spread<{
     altText: string;
     maxWidth: number | string;
     src: string;

package/lib/cjs/components/Editor/nodes/ImageNode.js

@@ -107,18 +107,18 @@ function convertImageElement(domNode) {
 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
 // @ts-ignore
 class ImageNode extends lexical_1.DecoratorNode {
-    constructor(src, altText, maxWidth, key) {
-        super(key);
-        this.__src = src;
-        this.__altText = altText;
-        this.__maxWidth = maxWidth;
-    }
     static getType() {
         return 'image';
     }
     static clone(node) {
         return new ImageNode(node.__src, node.__altText, node.__maxWidth, node.__key);
     }
+    constructor(src, altText, maxWidth, key) {
+        super(key);
+        this.__src = src;
+        this.__altText = altText;
+        this.__maxWidth = maxWidth;
+    }
     setWidthAndHeight(width, height) {
         const writable = this.getWritable();
         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore

package/lib/cjs/components/Editor/nodes/MentionNode.d.ts

@@ -1,7 +1,7 @@
 import { DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedTextNode, Spread, TextNode } from 'lexical';
 import { SCUserType } from '@selfcommunity/types';
 import { DOMConversionMap } from 'lexical/LexicalNode';
-export declare type SerializedMentionNode = Spread<{
+export type SerializedMentionNode = Spread<{
     user: SCUserType;
     type: 'mention';
     version: 1;

package/lib/cjs/components/Editor/nodes/MentionNode.js

@@ -25,16 +25,16 @@ function convertMentionElement(domNode) {
     };
 }
 class MentionNode extends lexical_1.TextNode {
-    constructor(user, text, key) {
-        super(text !== null && text !== void 0 ? text : `@${user.username}`, key);
-        this.__user = user;
-    }
     static getType() {
         return 'mention';
     }
     static clone(node) {
         return new MentionNode(node.__user, node.__text, node.__key);
     }
+    constructor(user, text, key) {
+        super(text !== null && text !== void 0 ? text : `@${user.username}`, key);
+        this.__user = user;
+    }
     createDOM(config) {
         const tag = 'mention';
         const dom = document.createElement(tag);
@@ -50,6 +50,8 @@ class MentionNode extends lexical_1.TextNode {
         if (inner === null) {
             return true;
         }
+        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // @ts-ignore
         super.updateDOM(prevNode, inner, config);
         return false;
     }

package/lib/cjs/components/Editor/plugins/ApiPlugin.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type ApiRef = {
+export type ApiRef = {
     focus: () => void;
 };
 declare const _default: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<ApiRef>>;

package/lib/cjs/components/Editor/plugins/MentionsPlugin.d.ts

@@ -1,9 +1,9 @@
-declare type MentionMatch = {
+type MentionMatch = {
     leadOffset: number;
     matchingString: string;
     replaceableString: string;
 };
-declare type Resolution = {
+type Resolution = {
     match: MentionMatch;
     range: Range;
 };

package/lib/cjs/components/Editor/shared/useDecorators.d.ts

@@ -7,10 +7,10 @@
  */
 import type { LexicalEditor } from 'lexical';
 import * as React from 'react';
-declare type ErrorBoundaryProps = {
+type ErrorBoundaryProps = {
     children: JSX.Element;
     onError: (error: Error) => void;
 };
-export declare type ErrorBoundaryType = React.ComponentClass<ErrorBoundaryProps> | React.FC<ErrorBoundaryProps>;
+export type ErrorBoundaryType = React.ComponentClass<ErrorBoundaryProps> | React.FC<ErrorBoundaryProps>;
 export declare function useDecorators(editor: LexicalEditor, ErrorBoundary: ErrorBoundaryType): Array<JSX.Element>;
 export {};

package/lib/cjs/components/Event/Event.js

@@ -19,6 +19,7 @@ const User_1 = tslib_1.__importDefault(require("../User"));
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const constants_1 = require("./constants");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+const events_1 = require("../../utils/events");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     detailRoot: `${constants_1.PREFIX}-detail-root`,
@@ -46,7 +47,8 @@ const classes = {
     snippetInProgress: `${constants_1.PREFIX}-snippet-in-progress`,
     snippetPrimary: `${constants_1.PREFIX}-snippet-primary`,
     snippetSecondary: `${constants_1.PREFIX}-snippet-secondary`,
-    snippetActions: `${constants_1.PREFIX}-snippet-actions`
+    snippetActions: `${constants_1.PREFIX}-snippet-actions`,
+    finishedChip: `${constants_1.PREFIX}-finished-chip`
 };
 const Root = (0, styles_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
@@ -110,6 +112,7 @@ function Event(inProps) {
     // STATE
     const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event, autoSubscribe: false });
     const inProgress = (0, react_1.useMemo)(() => scEvent && scEvent.active && scEvent.running, [scEvent]);
+    const isEventFinished = (0, react_1.useMemo)(() => (0, events_1.checkEventFinished)(scEvent), [scEvent]);
     // CONTEXT
     const scRoutingContext = (0, react_core_1.useSCRouting)();
     // HOOKS
@@ -128,10 +131,10 @@ function Event(inProps) {
         contentObj = ((0, jsx_runtime_1.jsxs)(DetailRoot, Object.assign({ className: classes.detailRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.detailImageWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: scEvent.image_medium, alt: scEvent.name, className: classes.detailImage }), !hideInProgress && inProgress && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.event.inProgress", defaultMessage: "ui.event.inProgress" }), className: classes.detailInProgress })), (0, jsx_runtime_1.jsx)(Calendar_1.default, { day: new Date(scEvent.start_date).getDate() })] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.detailContent }, { children: [scEvent.active ? ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.detailNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.detailName }, { children: scEvent.name })) }))) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.detailNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.detailName }, { children: scEvent.name })) }))), (0, jsx_runtime_1.jsx)(EventInfoDetails_1.default, { event: scEvent }), !hideEventPlanner && ((0, jsx_runtime_1.jsx)(User_1.default, { user: scEvent.managed_by, elevation: 0, secondary: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.myEventsWidget.planner", defaultMessage: "ui.myEventsWidget.planner" }) })), actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), className: classes.detailUser })), !hideEventParticipants && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.detailFirstDivider }), (0, jsx_runtime_1.jsx)(EventParticipantsButton_1.default, Object.assign({ event: scEvent }, EventParticipantsButtonComponentProps))] })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.detailSecondDivider })] })), actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.detailActions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
     }
     else if (template === event_1.SCEventTemplateType.PREVIEW) {
-        contentObj = ((0, jsx_runtime_1.jsxs)(PreviewRoot, Object.assign({ className: classes.previewRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ position: "relative", className: classes.previewImageWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: scEvent.image_medium, alt: scEvent.name, className: classes.previewImage }), !hideInProgress && inProgress && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.event.inProgress", defaultMessage: "ui.event.inProgress" }), className: classes.previewInProgress }))] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.previewContent }, { children: [(0, jsx_runtime_1.jsx)(EventInfoDetails_1.default, { event: scEvent, hidePrivacyIcon: true, hasLocationInfo: false, beforePrivacyInfo: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.previewNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.previewName }, { children: scEvent.name })) })) }), !hideEventParticipants && (0, jsx_runtime_1.jsx)(EventParticipantsButton_1.default, Object.assign({ event: scEvent, hideCaption: true }, EventParticipantsButtonComponentProps))] })), actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.previewActions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
+        contentObj = ((0, jsx_runtime_1.jsxs)(PreviewRoot, Object.assign({ className: classes.previewRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ position: "relative", className: classes.previewImageWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: scEvent.image_medium, alt: scEvent.name, className: classes.previewImage }), !hideInProgress && inProgress && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.event.inProgress", defaultMessage: "ui.event.inProgress" }), className: classes.previewInProgress })), isEventFinished && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.event.finished", defaultMessage: "ui.event.finished" }), className: classes.finishedChip }))] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.previewContent }, { children: [(0, jsx_runtime_1.jsx)(EventInfoDetails_1.default, { event: scEvent, hidePrivacyIcon: true, hasLocationInfo: false, beforePrivacyInfo: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.previewNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.previewName }, { children: scEvent.name })) })) }), !hideEventParticipants && (0, jsx_runtime_1.jsx)(EventParticipantsButton_1.default, Object.assign({ event: scEvent, hideCaption: true }, EventParticipantsButtonComponentProps))] })), actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.previewActions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
     }
     else {
-        contentObj = ((0, jsx_runtime_1.jsx)(SnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.snippetRoot, image: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.snippetImage }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "square", alt: scEvent.name, src: scEvent.image_medium, className: classes.snippetAvatar }), ' ', !hideInProgress && inProgress && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.event.inProgress", defaultMessage: "ui.event.inProgress" }), className: classes.snippetInProgress }))] })), primary: (0, jsx_runtime_1.jsxs)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.snippetPrimary }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: `${intl.formatDate(scEvent.start_date, {
+        contentObj = ((0, jsx_runtime_1.jsx)(SnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.snippetRoot, image: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.snippetImage }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "square", alt: scEvent.name, src: scEvent.image_medium, className: classes.snippetAvatar }), ' ', !hideInProgress && inProgress && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.event.inProgress", defaultMessage: "ui.event.inProgress" }), className: classes.snippetInProgress })), isEventFinished && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.event.finished", defaultMessage: "ui.event.finished" }), className: classes.finishedChip }))] })), primary: (0, jsx_runtime_1.jsxs)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.snippetPrimary }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: `${intl.formatDate(scEvent.start_date, {
                             weekday: 'long',
                             month: 'long',
                             day: 'numeric'