@selfcommunity/react-ui 0.10.2-courses.188 → 0.10.2-courses.190
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/EditCourse/Lessons.js +3 -2
- package/lib/cjs/components/LessonObject/LessonObject.js +6 -1
- package/lib/esm/components/EditCourse/Lessons.js +4 -3
- package/lib/esm/components/LessonObject/LessonObject.js +7 -2
- package/lib/umd/578.js +2 -0
- package/lib/umd/react-ui.js +1 -1
- package/package.json +11 -11
- package/lib/umd/689.js +0 -2
- /package/lib/umd/{689.js.LICENSE.txt → 578.js.LICENSE.txt} +0 -0
|
@@ -23,6 +23,7 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
|
|
|
23
23
|
const classes = {
|
|
24
24
|
lessonTitle: `${constants_1.PREFIX}-lesson-title`,
|
|
25
25
|
lessonInfoWrapper: `${constants_1.PREFIX}-lesson-info-wrapper`,
|
|
26
|
+
lessonsInnerWrapper: `${constants_1.PREFIX}-lessons-inner-wrapper`,
|
|
26
27
|
lessonsSectionsWrapper: `${constants_1.PREFIX}-lessons-sections-wrapper`,
|
|
27
28
|
lessonsSections: `${constants_1.PREFIX}-lessons-sections`,
|
|
28
29
|
circle: `${constants_1.PREFIX}-circle`,
|
|
@@ -181,10 +182,10 @@ function Lessons(props) {
|
|
|
181
182
|
}
|
|
182
183
|
handleOpenDialog(null);
|
|
183
184
|
}, [dialog, handleOpenDialog]);
|
|
184
|
-
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.jsx)(CourseTypePopover_1.default, { course: course }), (0, jsx_runtime_1.jsx)(Status_1.default, { course: course, handleTabChange: handleTabChange })] })), sections.length === 0 && ((0, jsx_runtime_1.jsx)(EmptyStatus_1.default, { icon: "courses", title: "ui.editCourse.tab.lessons.table.empty.title", description: "ui.editCourse.tab.lessons.table.empty.description", actions: (0, jsx_runtime_1.jsx)(AddButton_1.default, { className: classes.emptyStatusButton, label: "ui.editCourse.tab.lessons.table.section", handleAddRow: handleAddTempSection, color: "inherit", variant: "outlined" }), className: classes.lessonEmptyStatus })), sections.length > 0 && ((0, jsx_runtime_1.jsxs)(
|
|
185
|
+
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.jsx)(CourseTypePopover_1.default, { course: course }), (0, jsx_runtime_1.jsx)(Status_1.default, { course: course, handleTabChange: handleTabChange })] })), sections.length === 0 && ((0, jsx_runtime_1.jsx)(EmptyStatus_1.default, { icon: "courses", title: "ui.editCourse.tab.lessons.table.empty.title", description: "ui.editCourse.tab.lessons.table.empty.description", actions: (0, jsx_runtime_1.jsx)(AddButton_1.default, { className: classes.emptyStatusButton, label: "ui.editCourse.tab.lessons.table.section", handleAddRow: handleAddTempSection, color: "inherit", variant: "outlined" }), className: classes.lessonEmptyStatus })), sections.length > 0 && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.lessonsInnerWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.lessonsSectionsWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.lessonsSections }, { children: [(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.sections.title", defaultMessage: "ui.course.table.sections.title", values: {
|
|
185
186
|
sectionsNumber: course.num_sections
|
|
186
187
|
} }) })), (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: {
|
|
187
188
|
lessonsNumber: course.num_lessons
|
|
188
|
-
} }) }))] })), (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: classes.tableContainer }, { 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 })] }))] }));
|
|
189
|
+
} }) }))] })), (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: classes.tableContainer }, { 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 })] })))] }));
|
|
189
190
|
}
|
|
190
191
|
exports.default = (0, react_1.memo)(Lessons);
|
|
@@ -24,6 +24,7 @@ const classes = {
|
|
|
24
24
|
title: `${constants_1.PREFIX}-title`,
|
|
25
25
|
text: `${constants_1.PREFIX}-text`,
|
|
26
26
|
mediasSection: `${constants_1.PREFIX}-medias-section`,
|
|
27
|
+
files: `${constants_1.PREFIX}-files`,
|
|
27
28
|
navigation: `${constants_1.PREFIX}-navigation`,
|
|
28
29
|
editor: `${constants_1.PREFIX}-editor`
|
|
29
30
|
};
|
|
@@ -60,6 +61,10 @@ function LessonObject(inProps) {
|
|
|
60
61
|
//error={{error}}
|
|
61
62
|
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: {
|
|
62
63
|
__html: (0, contribution_1.getContributionHtml)(lesson.html, scRoutingContext.url)
|
|
63
|
-
} }), lesson.medias && lesson.medias.length > 0 && ((0, jsx_runtime_1.
|
|
64
|
+
} }), lesson.medias && lesson.medias.length > 0 && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.mediasSection }, { children: [lesson.medias
|
|
65
|
+
.filter((media) => media.type === api_services_1.MediaTypes.URL)
|
|
66
|
+
.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
|
|
67
|
+
.filter((media) => media.type !== api_services_1.MediaTypes.URL)
|
|
68
|
+
.map((media) => ((0, jsx_runtime_1.jsx)(LessonFilePreview_1.default, { media: media }, media.id))) })))] })))] })) })) }) })));
|
|
64
69
|
}
|
|
65
70
|
exports.default = LessonObject;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { FormattedMessage, useIntl } from 'react-intl';
|
|
3
3
|
import { PREFIX } from './constants';
|
|
4
|
-
import {
|
|
4
|
+
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
5
5
|
import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
|
|
6
6
|
import { CourseService } from '@selfcommunity/api-services';
|
|
7
7
|
import { Logger } from '@selfcommunity/utils';
|
|
@@ -20,6 +20,7 @@ import classNames from 'classnames';
|
|
|
20
20
|
const classes = {
|
|
21
21
|
lessonTitle: `${PREFIX}-lesson-title`,
|
|
22
22
|
lessonInfoWrapper: `${PREFIX}-lesson-info-wrapper`,
|
|
23
|
+
lessonsInnerWrapper: `${PREFIX}-lessons-inner-wrapper`,
|
|
23
24
|
lessonsSectionsWrapper: `${PREFIX}-lessons-sections-wrapper`,
|
|
24
25
|
lessonsSections: `${PREFIX}-lessons-sections`,
|
|
25
26
|
circle: `${PREFIX}-circle`,
|
|
@@ -178,10 +179,10 @@ function Lessons(props) {
|
|
|
178
179
|
}
|
|
179
180
|
handleOpenDialog(null);
|
|
180
181
|
}, [dialog, handleOpenDialog]);
|
|
181
|
-
return (_jsxs(Box, { children: [_jsx(Typography, Object.assign({ className: classNames(classes.lessonTitle, classes.contrastColor), variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons", defaultMessage: "ui.editCourse.tab.lessons" }) })), _jsxs(Stack, Object.assign({ className: classes.lessonInfoWrapper }, { children: [_jsx(CourseTypePopover, { course: course }), _jsx(Status, { course: course, handleTabChange: handleTabChange })] })), sections.length === 0 && (_jsx(EmptyStatus, { icon: "courses", title: "ui.editCourse.tab.lessons.table.empty.title", description: "ui.editCourse.tab.lessons.table.empty.description", actions: _jsx(AddButton, { className: classes.emptyStatusButton, label: "ui.editCourse.tab.lessons.table.section", handleAddRow: handleAddTempSection, color: "inherit", variant: "outlined" }), className: classes.lessonEmptyStatus })), sections.length > 0 && (_jsxs(
|
|
182
|
+
return (_jsxs(Box, { children: [_jsx(Typography, Object.assign({ className: classNames(classes.lessonTitle, classes.contrastColor), variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons", defaultMessage: "ui.editCourse.tab.lessons" }) })), _jsxs(Stack, Object.assign({ className: classes.lessonInfoWrapper }, { children: [_jsx(CourseTypePopover, { course: course }), _jsx(Status, { course: course, handleTabChange: handleTabChange })] })), sections.length === 0 && (_jsx(EmptyStatus, { icon: "courses", title: "ui.editCourse.tab.lessons.table.empty.title", description: "ui.editCourse.tab.lessons.table.empty.description", actions: _jsx(AddButton, { className: classes.emptyStatusButton, label: "ui.editCourse.tab.lessons.table.section", handleAddRow: handleAddTempSection, color: "inherit", variant: "outlined" }), className: classes.lessonEmptyStatus })), sections.length > 0 && (_jsxs(Box, Object.assign({ className: classes.lessonsInnerWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.lessonsSectionsWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.lessonsSections }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.course.table.sections.title", defaultMessage: "ui.course.table.sections.title", values: {
|
|
182
183
|
sectionsNumber: course.num_sections
|
|
183
184
|
} }) })), _jsx(Box, { className: classes.circle }), _jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.course.table.lessons.title", defaultMessage: "ui.course.table.lessons.title", values: {
|
|
184
185
|
lessonsNumber: course.num_lessons
|
|
185
|
-
} }) }))] })), _jsx(AddButton, { label: "ui.editCourse.tab.lessons.table.section", handleAddRow: handleAddTempSection, color: "primary", variant: "contained", disabled: isDisabled })] })), _jsx(DragDropContext, Object.assign({ onDragEnd: handleDragEnd }, { children: _jsx(TableContainer, Object.assign({ className: classes.tableContainer }, { children: _jsxs(Table, Object.assign({ className: classes.table }, { children: [_jsx(TableHead, Object.assign({ className: classes.tableHeader }, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.cellWidth }), headerCells.map((cell, i) => (_jsx(TableCell, Object.assign({ className: cell.className }, { children: _jsx(Typography, Object.assign({ className: classes.tableHeaderTypography, variant: "overline" }, { children: _jsx(FormattedMessage, { id: cell.id, defaultMessage: cell.id }) })) }), i)))] }) })), _jsx(Droppable, Object.assign({ droppableId: "droppable-1" }, { children: (outerProvider) => (_jsxs(TableBody, Object.assign({ ref: outerProvider.innerRef }, outerProvider.droppableProps, { className: classes.tableBody }, { children: [sections.map((section, i, array) => (_jsx(Draggable, Object.assign({ draggableId: i.toString(), index: i, isDragDisabled: isDisabled }, { children: (innerProvider) => (_jsx(SectionRow, { course: course, provider: innerProvider, section: section, isNewRow: isNewRow && i + 1 === array.length, handleManageSection: handleManageSection, handleOpenDialog: handleOpenDialog, ref: ref }, i)) }), i))), outerProvider.placeholder] }))) }))] })) })) })), dialog && _jsx(ConfirmDialog, { open: true, onClose: () => handleOpenDialog(null), onConfirm: handleDeleteRow })] }))] }));
|
|
186
|
+
} }) }))] })), _jsx(AddButton, { label: "ui.editCourse.tab.lessons.table.section", handleAddRow: handleAddTempSection, color: "primary", variant: "contained", disabled: isDisabled })] })), _jsx(DragDropContext, Object.assign({ onDragEnd: handleDragEnd }, { children: _jsx(TableContainer, Object.assign({ className: classes.tableContainer }, { children: _jsxs(Table, Object.assign({ className: classes.table }, { children: [_jsx(TableHead, Object.assign({ className: classes.tableHeader }, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.cellWidth }), headerCells.map((cell, i) => (_jsx(TableCell, Object.assign({ className: cell.className }, { children: _jsx(Typography, Object.assign({ className: classes.tableHeaderTypography, variant: "overline" }, { children: _jsx(FormattedMessage, { id: cell.id, defaultMessage: cell.id }) })) }), i)))] }) })), _jsx(Droppable, Object.assign({ droppableId: "droppable-1" }, { children: (outerProvider) => (_jsxs(TableBody, Object.assign({ ref: outerProvider.innerRef }, outerProvider.droppableProps, { className: classes.tableBody }, { children: [sections.map((section, i, array) => (_jsx(Draggable, Object.assign({ draggableId: i.toString(), index: i, isDragDisabled: isDisabled }, { children: (innerProvider) => (_jsx(SectionRow, { course: course, provider: innerProvider, section: section, isNewRow: isNewRow && i + 1 === array.length, handleManageSection: handleManageSection, handleOpenDialog: handleOpenDialog, ref: ref }, i)) }), i))), outerProvider.placeholder] }))) }))] })) })) })), dialog && _jsx(ConfirmDialog, { open: true, onClose: () => handleOpenDialog(null), onConfirm: handleDeleteRow })] })))] }));
|
|
186
187
|
}
|
|
187
188
|
export default memo(Lessons);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __rest } from "tslib";
|
|
2
|
-
import { jsx as _jsx,
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { useCallback } from 'react';
|
|
4
4
|
import { styled } from '@mui/material/styles';
|
|
5
5
|
import { useThemeProps } from '@mui/system';
|
|
@@ -22,6 +22,7 @@ const classes = {
|
|
|
22
22
|
title: `${PREFIX}-title`,
|
|
23
23
|
text: `${PREFIX}-text`,
|
|
24
24
|
mediasSection: `${PREFIX}-medias-section`,
|
|
25
|
+
files: `${PREFIX}-files`,
|
|
25
26
|
navigation: `${PREFIX}-navigation`,
|
|
26
27
|
editor: `${PREFIX}-editor`
|
|
27
28
|
};
|
|
@@ -58,5 +59,9 @@ export default function LessonObject(inProps) {
|
|
|
58
59
|
//error={{error}}
|
|
59
60
|
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: {
|
|
60
61
|
__html: getContributionHtml(lesson.html, scRoutingContext.url)
|
|
61
|
-
} }), lesson.medias && lesson.medias.length > 0 && (
|
|
62
|
+
} }), lesson.medias && lesson.medias.length > 0 && (_jsxs(Box, Object.assign({ className: classes.mediasSection }, { children: [lesson.medias
|
|
63
|
+
.filter((media) => media.type === MediaTypes.URL)
|
|
64
|
+
.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
|
|
65
|
+
.filter((media) => media.type !== MediaTypes.URL)
|
|
66
|
+
.map((media) => (_jsx(LessonFilePreview, { media: media }, media.id))) })))] })))] })) })) }) })));
|
|
62
67
|
}
|