@selfcommunity/react-ui 0.10.2-courses.101 → 0.10.2-courses.102

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.
Files changed (44) hide show
  1. package/lib/cjs/components/Course/CreatePlaceholder.d.ts +33 -0
  2. package/lib/cjs/components/Course/CreatePlaceholder.js +59 -0
  3. package/lib/cjs/components/CourseCompletedDialog/CourseCompletedDialog.d.ts +9 -0
  4. package/lib/cjs/components/CourseCompletedDialog/CourseCompletedDialog.js +40 -0
  5. package/lib/cjs/components/CourseCompletedDialog/index.d.ts +3 -0
  6. package/lib/cjs/components/CourseCompletedDialog/index.js +5 -0
  7. package/lib/cjs/components/CourseForm/CourseForm.js +23 -11
  8. package/lib/cjs/components/CourseForm/Dialog.d.ts +8 -0
  9. package/lib/cjs/components/CourseForm/Dialog.js +19 -0
  10. package/lib/cjs/components/CourseParticipantsButton/CourseParticipantsButton.js +2 -2
  11. package/lib/cjs/components/Courses/Courses.js +3 -3
  12. package/lib/cjs/components/Courses/Skeleton.js +2 -2
  13. package/lib/cjs/components/LessonObject/LessonObject.js +14 -6
  14. package/lib/cjs/index.d.ts +2 -2
  15. package/lib/cjs/index.js +3 -3
  16. package/lib/esm/components/Course/CreatePlaceholder.d.ts +33 -0
  17. package/lib/esm/components/Course/CreatePlaceholder.js +56 -0
  18. package/lib/esm/components/CourseCompletedDialog/CourseCompletedDialog.d.ts +9 -0
  19. package/lib/esm/components/CourseCompletedDialog/CourseCompletedDialog.js +37 -0
  20. package/lib/esm/components/CourseCompletedDialog/index.d.ts +3 -0
  21. package/lib/esm/components/CourseCompletedDialog/index.js +2 -0
  22. package/lib/esm/components/CourseForm/CourseForm.js +25 -13
  23. package/lib/esm/components/CourseForm/Dialog.d.ts +8 -0
  24. package/lib/esm/components/CourseForm/Dialog.js +16 -0
  25. package/lib/esm/components/CourseParticipantsButton/CourseParticipantsButton.js +2 -2
  26. package/lib/esm/components/Courses/Courses.js +3 -3
  27. package/lib/esm/components/Courses/Skeleton.js +2 -2
  28. package/lib/esm/components/LessonObject/LessonObject.js +15 -7
  29. package/lib/esm/index.d.ts +2 -2
  30. package/lib/esm/index.js +2 -2
  31. package/lib/umd/react-ui.js +1 -1
  32. package/package.json +8 -8
  33. package/lib/cjs/components/Course/Placeholder.d.ts +0 -40
  34. package/lib/cjs/components/Course/Placeholder.js +0 -65
  35. package/lib/cjs/components/LessonCompletedDialog/LessonCompletedDialog.d.ts +0 -8
  36. package/lib/cjs/components/LessonCompletedDialog/LessonCompletedDialog.js +0 -36
  37. package/lib/cjs/components/LessonCompletedDialog/index.d.ts +0 -3
  38. package/lib/cjs/components/LessonCompletedDialog/index.js +0 -5
  39. package/lib/esm/components/Course/Placeholder.d.ts +0 -40
  40. package/lib/esm/components/Course/Placeholder.js +0 -62
  41. package/lib/esm/components/LessonCompletedDialog/LessonCompletedDialog.d.ts +0 -8
  42. package/lib/esm/components/LessonCompletedDialog/LessonCompletedDialog.js +0 -32
  43. package/lib/esm/components/LessonCompletedDialog/index.d.ts +0 -3
  44. package/lib/esm/components/LessonCompletedDialog/index.js +0 -2
@@ -0,0 +1,33 @@
1
+ import { WidgetProps } from '../Widget';
2
+ export interface CourseSkeletonProps extends WidgetProps {
3
+ /**
4
+ * Overrides or extends the styles applied to the component.
5
+ * @default null
6
+ */
7
+ className?: string;
8
+ }
9
+ /**
10
+ * > API documentation for the Community-JS Course Placeholder component. Learn about the available props and the CSS API.
11
+
12
+ #### Import
13
+
14
+ ```jsx
15
+ import {CourseCreatePlaceholder} from '@selfcommunity/react-ui';
16
+ ```
17
+
18
+ #### Component Name
19
+
20
+ The name `SCCourse-placeholder-root` can be used when providing style overrides in the theme.
21
+
22
+ #### CSS
23
+
24
+ |Rule Name|Global class|Description|
25
+ |---|---|---|
26
+ |root|.SCCourse-create-placeholder-root|Styles applied to the root element.|
27
+ |imageWrapper|.SCCourse-create-placeholder-image|Styles applied to the image wrapper section.|
28
+ |image|.SCCourse-create-placeholder-image|Styles applied to the image element.|
29
+ |icon|.SCCourse-create-placeholder-icon|Styles applied to the course icon element.|
30
+ |actions|.SCCourse-create-placeholder-actions|Styles applied to action section.|
31
+ *
32
+ */
33
+ export default function CourseCreatePlaceholder(inProps: CourseSkeletonProps): JSX.Element;
@@ -0,0 +1,59 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const tslib_1 = require("tslib");
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const material_1 = require("@mui/material");
6
+ const styles_1 = require("@mui/material/styles");
7
+ const system_1 = require("@mui/system");
8
+ const classnames_1 = tslib_1.__importDefault(require("classnames"));
9
+ const Widget_1 = tslib_1.__importDefault(require("../Widget"));
10
+ const constants_1 = require("./constants");
11
+ const react_core_1 = require("@selfcommunity/react-core");
12
+ const CreateCourseButton_1 = tslib_1.__importDefault(require("../CreateCourseButton"));
13
+ const classes = {
14
+ root: `${constants_1.PREFIX}-create-placeholder-root`,
15
+ imageWrapper: `${constants_1.PREFIX}-create-placeholder-image-wrapper`,
16
+ image: `${constants_1.PREFIX}-create-placeholder-image`,
17
+ icon: `${constants_1.PREFIX}-create-placeholder-icon`,
18
+ actions: `${constants_1.PREFIX}-create-placeholder-actions`
19
+ };
20
+ const Root = (0, styles_1.styled)(Widget_1.default, {
21
+ name: constants_1.PREFIX,
22
+ slot: 'CreatePlaceholderRoot'
23
+ })(() => ({}));
24
+ /**
25
+ * > API documentation for the Community-JS Course Placeholder component. Learn about the available props and the CSS API.
26
+
27
+ #### Import
28
+
29
+ ```jsx
30
+ import {CourseCreatePlaceholder} from '@selfcommunity/react-ui';
31
+ ```
32
+
33
+ #### Component Name
34
+
35
+ The name `SCCourse-placeholder-root` can be used when providing style overrides in the theme.
36
+
37
+ #### CSS
38
+
39
+ |Rule Name|Global class|Description|
40
+ |---|---|---|
41
+ |root|.SCCourse-create-placeholder-root|Styles applied to the root element.|
42
+ |imageWrapper|.SCCourse-create-placeholder-image|Styles applied to the image wrapper section.|
43
+ |image|.SCCourse-create-placeholder-image|Styles applied to the image element.|
44
+ |icon|.SCCourse-create-placeholder-icon|Styles applied to the course icon element.|
45
+ |actions|.SCCourse-create-placeholder-actions|Styles applied to action section.|
46
+ *
47
+ */
48
+ function CourseCreatePlaceholder(inProps) {
49
+ // PROPS
50
+ const props = (0, system_1.useThemeProps)({
51
+ props: inProps,
52
+ name: constants_1.PREFIX
53
+ });
54
+ const { className } = props, rest = tslib_1.__rest(props, ["className"]);
55
+ // HOOK
56
+ const { preferences } = (0, react_core_1.useSCPreferences)();
57
+ return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ position: "relative", className: classes.imageWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: `${preferences[react_core_1.SCPreferences.IMAGES_USER_DEFAULT_COVER].value}`, alt: "placeholder image", className: classes.image }), (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.icon, fontSize: "large" }, { children: "courses" }))] })), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(CreateCourseButton_1.default, {}) }))] })));
58
+ }
59
+ exports.default = CourseCreatePlaceholder;
@@ -0,0 +1,9 @@
1
+ /// <reference types="react" />
2
+ import { SCCourseType } from '@selfcommunity/types';
3
+ export interface CourseCompletedDialogProps {
4
+ course: SCCourseType;
5
+ onClose: () => void;
6
+ }
7
+ declare function CourseCompletedDialog(inProps: CourseCompletedDialogProps): JSX.Element;
8
+ declare const _default: import("react").MemoExoticComponent<typeof CourseCompletedDialog>;
9
+ export default _default;
@@ -0,0 +1,40 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const tslib_1 = require("tslib");
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
6
+ const material_1 = require("@mui/material");
7
+ const react_intl_1 = require("react-intl");
8
+ const clapping_1 = require("../../assets/courses/clapping");
9
+ const react_1 = require("react");
10
+ const react_core_1 = require("@selfcommunity/react-core");
11
+ const PREFIX = 'SCCourseCompletedDialog';
12
+ const classes = {
13
+ root: `${PREFIX}-root`,
14
+ wrapper: `${PREFIX}-wrapper`,
15
+ title: `${PREFIX}-title`,
16
+ descriptionPt1: `${PREFIX}-description-pt1`,
17
+ descriptionPt2: `${PREFIX}-description-pt2`
18
+ };
19
+ const Root = (0, material_1.styled)(BaseDialog_1.default, {
20
+ name: PREFIX,
21
+ slot: 'Root',
22
+ overridesResolver: (_props, styles) => styles.root
23
+ })(() => ({}));
24
+ function CourseCompletedDialog(inProps) {
25
+ // PROPS
26
+ const props = (0, material_1.useThemeProps)({
27
+ props: inProps,
28
+ name: PREFIX
29
+ });
30
+ const { course, onClose } = props;
31
+ // CONTEXTS
32
+ const scRoutingContext = (0, react_core_1.useSCRouting)();
33
+ // HOOKS
34
+ const intl = (0, react_intl_1.useIntl)();
35
+ return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, open: true, onClose: onClose, actions: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSES_ROUTE_NAME, {}), size: "medium", variant: "contained" }, { 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.course.completedDialog.btn.label", defaultMessage: "ui.course.completedDialog.btn.label" }) })) })), className: classes.root }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.wrapper }, { children: [(0, jsx_runtime_1.jsx)("img", { src: clapping_1.CLAPPING, alt: intl.formatMessage({ id: 'ui.course.completedDialog.title', defaultMessage: 'ui.course.completedDialog.title' }), width: 100, height: 100 }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h2", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.completedDialog.title", defaultMessage: "ui.course.completedDialog.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.descriptionPt1 }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.completedDialog.description.pt1", defaultMessage: "ui.course.completedDialog.description.pt1" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.descriptionPt2 }, { children: intl.formatMessage({ id: 'ui.course.completedDialog.description.pt2', defaultMessage: 'ui.course.completedDialog.description.pt2' }, {
36
+ courseName: course.name,
37
+ span: (chunks) => ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", variant: "inherit", color: "primary" }, { children: chunks })))
38
+ }) }))] })) })));
39
+ }
40
+ exports.default = (0, react_1.memo)(CourseCompletedDialog);
@@ -0,0 +1,3 @@
1
+ import CourseCompletedDialog, { CourseCompletedDialogProps } from './CourseCompletedDialog';
2
+ export default CourseCompletedDialog;
3
+ export { CourseCompletedDialogProps };
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const tslib_1 = require("tslib");
4
+ const CourseCompletedDialog_1 = tslib_1.__importDefault(require("./CourseCompletedDialog"));
5
+ exports.default = CourseCompletedDialog_1.default;
@@ -22,6 +22,7 @@ const UploadCourseCover_1 = tslib_1.__importDefault(require("./UploadCourseCover
22
22
  const Course_1 = require("../../constants/Course");
23
23
  const CategoryAutocomplete_1 = tslib_1.__importDefault(require("../CategoryAutocomplete"));
24
24
  const Edit_1 = tslib_1.__importDefault(require("./Edit"));
25
+ const Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
25
26
  const messages = (0, react_intl_1.defineMessages)({
26
27
  name: {
27
28
  id: 'ui.courseForm.name.placeholder',
@@ -125,6 +126,7 @@ function CourseForm(inProps) {
125
126
  const [field, setField] = (0, react_1.useState)(initialFieldState);
126
127
  const [_step, setStep] = (0, react_1.useState)(step);
127
128
  const [error, setError] = (0, react_1.useState)({});
129
+ const [openDialog, setOpenDialog] = (0, react_1.useState)(false);
128
130
  // PREFERENCES
129
131
  const scPreferences = (0, react_core_1.useSCPreferences)();
130
132
  const _backgroundCover = Object.assign({}, (field.imageOriginal
@@ -243,19 +245,29 @@ function CourseForm(inProps) {
243
245
  setError(error);
244
246
  }
245
247
  }, [setField, error]);
248
+ /**
249
+ * Handles for closing confirm dialog
250
+ */
251
+ const handleClose = (0, react_1.useCallback)(() => {
252
+ setOpenDialog(false);
253
+ }, [setOpenDialog]);
246
254
  /**
247
255
  * Renders root object
248
256
  */
249
- return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: _step === SCCourseFormStepType.ONE ? classes.stepOne : classes.stepTwo }, { children: [_step === SCCourseFormStepType.ONE && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Object.values(types_1.SCCourseTypologyType).map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.Card, Object.assign({ className: (0, classnames_1.default)(classes.card, { [classes.selected]: option === field.type }) }, { children: (0, jsx_runtime_1.jsx)(material_1.CardActionArea, Object.assign({ onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['type']: option }))) }, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${option}.title`, defaultMessage: `ui.courseForm.${option}.title` }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${option}.info`, defaultMessage: `ui.courseForm.${option}.info` }) }))] }) })) }), index))) })), _step === SCCourseFormStepType.TWO && ((0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.form }, { children: [course && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.edit.title.general", defaultMessage: "ui.courseForm.edit.title.general" }) }))), (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: (0, jsx_runtime_1.jsx)(UploadCourseCover_1.default, { isCreationMode: true, onChange: handleChangeCover }) })), (0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
250
- endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: Course_1.COURSE_TITLE_MAX_LENGTH - field.name.length }))
251
- }, error: Boolean(field.name.length > Course_1.COURSE_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: field.name.length > Course_1.COURSE_TITLE_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.name.error.maxLength", defaultMessage: "ui.courseForm.name.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
252
- endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? Course_1.COURSE_DESCRIPTION_MAX_LENGTH - field.description.length : Course_1.COURSE_DESCRIPTION_MAX_LENGTH })))
253
- }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > Course_1.COURSE_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > Course_1.COURSE_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.description.error.maxLength", defaultMessage: "ui.courseForm.description.error.maxLength" })) : null }), (0, jsx_runtime_1.jsx)(CategoryAutocomplete_1.default, { defaultValue: field.categories, TextFieldProps: { label: intl.formatMessage(Object.keys(field.categories).length ? messages.category : messages.categoryEmpty) }, multiple: true, onChange: handleOnChangeCategory }), course && (0, jsx_runtime_1.jsx)(Edit_1.default, { course: course, onPrivacyChange: (privacy) => setField((prev) => (Object.assign(Object.assign({}, prev), { ['privacy']: privacy }))) })] }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", loading: field.isSubmitting, disabled: _step === SCCourseFormStepType.ONE
254
- ? !field.type || Object.keys(error).length !== 0
255
- : _step === SCCourseFormStepType.TWO &&
256
- (!field.name ||
257
- Object.keys(error).length !== 0 ||
258
- field.name.length > Course_1.COURSE_TITLE_MAX_LENGTH ||
259
- field.description.length > Course_1.COURSE_DESCRIPTION_MAX_LENGTH), variant: "contained", onClick: _step === SCCourseFormStepType.ONE ? () => handleChangeStep(SCCourseFormStepType.TWO) : handleSubmit, color: "primary" }, { children: course ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.edit.action.save", defaultMessage: "ui.courseForm.edit.action.save" })) : _step === SCCourseFormStepType.ONE ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.button.next", defaultMessage: "ui.courseForm.button.next" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.button.create", defaultMessage: "ui.courseForm.button.create" })) })) }))] })) })));
257
+ return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: _step === SCCourseFormStepType.ONE ? classes.stepOne : classes.stepTwo }, { children: [_step === SCCourseFormStepType.ONE && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Object.values(types_1.SCCourseTypologyType).map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.Card, Object.assign({ className: (0, classnames_1.default)(classes.card, { [classes.selected]: option === field.type }) }, { children: (0, jsx_runtime_1.jsx)(material_1.CardActionArea, Object.assign({ onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['type']: option }))) }, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${option}.title`, defaultMessage: `ui.courseForm.${option}.title` }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${option}.info`, defaultMessage: `ui.courseForm.${option}.info` }) }))] }) })) }), index))) })), _step === SCCourseFormStepType.TWO && ((0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.form }, { children: [course && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.edit.title.general", defaultMessage: "ui.courseForm.edit.title.general" }) }))), (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: (0, jsx_runtime_1.jsx)(UploadCourseCover_1.default, { isCreationMode: true, onChange: handleChangeCover }) })), (0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
258
+ endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: Course_1.COURSE_TITLE_MAX_LENGTH - field.name.length }))
259
+ }, error: Boolean(field.name.length > Course_1.COURSE_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: field.name.length > Course_1.COURSE_TITLE_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.name.error.maxLength", defaultMessage: "ui.courseForm.name.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
260
+ endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? Course_1.COURSE_DESCRIPTION_MAX_LENGTH - field.description.length : Course_1.COURSE_DESCRIPTION_MAX_LENGTH })))
261
+ }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > Course_1.COURSE_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > Course_1.COURSE_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.description.error.maxLength", defaultMessage: "ui.courseForm.description.error.maxLength" })) : null }), (0, jsx_runtime_1.jsx)(CategoryAutocomplete_1.default, { defaultValue: field.categories, TextFieldProps: { label: intl.formatMessage(Object.keys(field.categories).length ? messages.category : messages.categoryEmpty) }, multiple: true, onChange: handleOnChangeCategory }), course && (0, jsx_runtime_1.jsx)(Edit_1.default, { course: course, onPrivacyChange: (privacy) => setField((prev) => (Object.assign(Object.assign({}, prev), { ['privacy']: privacy }))) })] }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", loading: field.isSubmitting, disabled: _step === SCCourseFormStepType.ONE
262
+ ? !field.type || Object.keys(error).length !== 0
263
+ : _step === SCCourseFormStepType.TWO &&
264
+ (!field.name ||
265
+ Object.keys(error).length !== 0 ||
266
+ field.name.length > Course_1.COURSE_TITLE_MAX_LENGTH ||
267
+ field.description.length > Course_1.COURSE_DESCRIPTION_MAX_LENGTH), variant: "contained", onClick: _step === SCCourseFormStepType.ONE
268
+ ? () => handleChangeStep(SCCourseFormStepType.TWO)
269
+ : field.privacy !== types_1.SCCoursePrivacyType.DRAFT && course.privacy === types_1.SCCoursePrivacyType.DRAFT
270
+ ? () => setOpenDialog(true)
271
+ : handleSubmit, color: "primary" }, { children: course ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.edit.action.save", defaultMessage: "ui.courseForm.edit.action.save" })) : _step === SCCourseFormStepType.ONE ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.button.next", defaultMessage: "ui.courseForm.button.next" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.button.create", defaultMessage: "ui.courseForm.button.create" })) })) }))] })) })), openDialog && (0, jsx_runtime_1.jsx)(Dialog_1.default, { onSubmit: handleSubmit, onClose: handleClose })] }));
260
272
  }
261
273
  exports.default = CourseForm;
@@ -0,0 +1,8 @@
1
+ /// <reference types="react" />
2
+ interface CoursePublicationDialogProps {
3
+ onSubmit: () => void;
4
+ onClose: () => void;
5
+ }
6
+ declare function CoursePublicationDialog(props: CoursePublicationDialogProps): JSX.Element;
7
+ declare const _default: import("react").MemoExoticComponent<typeof CoursePublicationDialog>;
8
+ export default _default;
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const tslib_1 = require("tslib");
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const material_1 = require("@mui/material");
6
+ const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
7
+ const react_intl_1 = require("react-intl");
8
+ const react_1 = require("react");
9
+ function CoursePublicationDialog(props) {
10
+ // PROPS
11
+ const { onSubmit, onClose } = props;
12
+ // HANDLERS
13
+ const handleSubmit = (0, react_1.useCallback)(() => {
14
+ onSubmit();
15
+ onClose();
16
+ }, [onSubmit, onClose]);
17
+ return ((0, jsx_runtime_1.jsx)(BaseDialog_1.default, Object.assign({ open: true, DialogContentProps: { dividers: false }, onClose: onClose, title: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.edit.dialog.title", defaultMessage: "ui.courseForm.edit.dialog.title" }) })), actions: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: "primary", variant: "contained", onClick: handleSubmit }, { 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.courseForm.edit.dialog.btn", defaultMessage: "ui.courseForm.edit.dialog.btn" }) })) })) }, { 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.courseForm.edit.dialog.description", defaultMessage: "ui.courseForm.edit.dialog.description" }) })) })));
18
+ }
19
+ exports.default = (0, react_1.memo)(CoursePublicationDialog);
@@ -82,7 +82,7 @@ function CourseParticipantsButton(inProps) {
82
82
  setEnrolled([]);
83
83
  setLoading(true);
84
84
  }, [scCourse]);
85
- // FETCH FIRST FOLLOWERS
85
+ // FETCH FIRST ENROLLED
86
86
  (0, use_deep_compare_effect_1.useDeepCompareEffectNoCheck)(() => {
87
87
  if (!scCourse) {
88
88
  return;
@@ -138,7 +138,7 @@ function CourseParticipantsButton(inProps) {
138
138
  /**
139
139
  * Rendering
140
140
  */
141
- if (!participantsAvailable) {
141
+ if (!participantsAvailable || !scCourse.privacy) {
142
142
  return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
143
143
  }
144
144
  return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scCourse || enrolled.length === 0,
@@ -19,7 +19,7 @@ const Skeleton_1 = tslib_1.__importDefault(require("../Courses/Skeleton"));
19
19
  const constants_1 = require("./constants");
20
20
  const course_1 = require("../../types/course");
21
21
  const CategoryAutocomplete_1 = tslib_1.__importDefault(require("../CategoryAutocomplete"));
22
- const Placeholder_1 = tslib_1.__importDefault(require("../Course/Placeholder"));
22
+ const CreatePlaceholder_1 = tslib_1.__importDefault(require("../Course/CreatePlaceholder"));
23
23
  const classes = {
24
24
  root: `${constants_1.PREFIX}-root`,
25
25
  category: `${constants_1.PREFIX}-category`,
@@ -222,9 +222,9 @@ function Courses(inProps) {
222
222
  endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => fetchCourses(), disabled: loading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchCourses(), endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }), disabled: loading })) })))
223
223
  } }) })), ((onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled) && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.CoursesChipRoot, { color: showMyCourses ? 'primary' : 'default', variant: showMyCourses ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.filterByCreatedByMe", defaultMessage: "ui.courses.filterByCreatedByMe" }), onClick: () => setShowMyCourses(!showMyCourses),
224
224
  // @ts-expect-error this is needed to use showForMe into SCCourses
225
- showForMe: showMyCourses, deleteIcon: showMyCourses ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showMyCourses ? () => setShowMyCourses(false) : null, disabled: loading }) }))), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: "auto" }, { children: (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(CategoryAutocomplete_1.default, { onChange: handleOnChangeCategory, className: classes.category, size: "small", multiple: true }) })) })), authUserId && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.CoursesChipRoot, { color: showForMe ? 'primary' : 'default', variant: showForMe ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.filterByCoursesForMe", defaultMessage: "ui.courses.filterByCoursesForMe" }), onClick: handleChipClick,
225
+ showForMe: showMyCourses, deleteIcon: showMyCourses ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showMyCourses ? () => setShowMyCourses(false) : null, disabled: loading || showForMe }) }))), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: "auto" }, { children: (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(CategoryAutocomplete_1.default, { onChange: handleOnChangeCategory, className: classes.category, size: "small", multiple: true }) })) })), authUserId && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.CoursesChipRoot, { color: showForMe ? 'primary' : 'default', variant: showForMe ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.filterByCoursesForMe", defaultMessage: "ui.courses.filterByCoursesForMe" }), onClick: handleChipClick,
226
226
  // @ts-expect-error this is needed to use showForMe into SCCourses
227
- showForMe: showForMe, deleteIcon: showForMe ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showForMe ? handleDeleteClick : null, disabled: loading }) })))] })) }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({}, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !courses.length ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.noResults }, { children: !canCreateCourse && onlyStaffEnabled ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.studentEmptyView }, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.emptyBox }, { children: (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.emptyRotatedBox }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.emptyIcon, color: "disabled", fontSize: "large" }, { children: "courses" })) })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", textAlign: "center" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.empty.title", defaultMessage: "ui.courses.empty.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.empty.info", defaultMessage: "ui.courses.empty.info" }) })), (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ coursesNumber: 4 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps, GridItemComponentProps: { md: 2 } }))] }))) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.teacherEmptyView }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ teacherView: (onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled, coursesNumber: 4 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps, GridItemComponentProps: { md: 2 } })) }))) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.courses }, GridContainerComponentProps, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [courses.map((course) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.item }, GridItemComponentProps, { children: (0, jsx_runtime_1.jsx)(Course_1.default, Object.assign({ courseId: course.id }, CourseComponentProps)) }), course.id))), authUserId && courses.length % 2 !== 0 && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.itemPlaceholder }, GridItemComponentProps, { children: (0, jsx_runtime_1.jsx)(Placeholder_1.default, { actionCreate: true }) }), 'placeholder-item'))] }) })), Boolean(next) && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "secondary", variant: "text", onClick: handleNext, className: classes.showMore }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.button.seeMore", defaultMessage: "ui.courses.button.seeMore" }) })))] })) })) })] }));
227
+ showForMe: showForMe, deleteIcon: showForMe ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showForMe ? handleDeleteClick : null, disabled: loading || showMyCourses }) })))] })) }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({}, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !courses.length ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.noResults }, { children: !canCreateCourse && onlyStaffEnabled ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.studentEmptyView }, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.emptyBox }, { children: (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.emptyRotatedBox }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.emptyIcon, color: "disabled", fontSize: "large" }, { children: "courses" })) })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", textAlign: "center" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.empty.title", defaultMessage: "ui.courses.empty.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.empty.info", defaultMessage: "ui.courses.empty.info" }) })), (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ coursesNumber: 4 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }))] }))) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.teacherEmptyView }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ teacherView: (onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled, coursesNumber: 1 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps })) }))) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.courses }, GridContainerComponentProps, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [courses.map((course) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.item }, GridItemComponentProps, { children: (0, jsx_runtime_1.jsx)(Course_1.default, Object.assign({ courseId: course.id }, CourseComponentProps)) }), course.id))), authUserId && courses.length % 2 !== 0 && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.itemPlaceholder }, GridItemComponentProps, { children: (0, jsx_runtime_1.jsx)(CreatePlaceholder_1.default, {}) }), 'placeholder-item'))] }) })), Boolean(next) && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "secondary", variant: "text", onClick: handleNext, className: classes.showMore }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.button.seeMore", defaultMessage: "ui.courses.button.seeMore" }) })))] })) })) })] }));
228
228
  /**
229
229
  * Renders root object (if content availability community option is false and user is anonymous, component is hidden)
230
230
  */
@@ -7,7 +7,7 @@ const constants_1 = require("./constants");
7
7
  const material_1 = require("@mui/material");
8
8
  const classnames_1 = tslib_1.__importDefault(require("classnames"));
9
9
  const Course_1 = require("../Course");
10
- const Placeholder_1 = tslib_1.__importDefault(require("../Course/Placeholder"));
10
+ const CreatePlaceholder_1 = tslib_1.__importDefault(require("../Course/CreatePlaceholder"));
11
11
  const classes = {
12
12
  root: `${constants_1.PREFIX}-skeleton-root`,
13
13
  courses: `${constants_1.PREFIX}-skeleton-courses`,
@@ -40,6 +40,6 @@ const Root = (0, styles_1.styled)(material_1.Box, {
40
40
  */
41
41
  function CoursesSkeleton(inProps) {
42
42
  const { className, CourseSkeletonProps = {}, coursesNumber = 8, GridContainerComponentProps = {}, GridItemComponentProps = {}, teacherView = false } = inProps, rest = tslib_1.__rest(inProps, ["className", "CourseSkeletonProps", "coursesNumber", "GridContainerComponentProps", "GridItemComponentProps", "teacherView"]);
43
- return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.courses }, GridContainerComponentProps, { children: [...Array(coursesNumber)].map((course, index) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3 }, GridItemComponentProps, { className: classes.item }, { children: teacherView ? (0, jsx_runtime_1.jsx)(Placeholder_1.default, { itemNumber: index + 1, actionCreate: index === 3 }) : (0, jsx_runtime_1.jsx)(Course_1.CourseSkeleton, Object.assign({}, CourseSkeletonProps)) }), index))) })) })));
43
+ return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.courses }, GridContainerComponentProps, { children: [...Array(coursesNumber)].map((course, index) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3 }, GridItemComponentProps, { className: classes.item }, { children: teacherView ? (0, jsx_runtime_1.jsx)(CreatePlaceholder_1.default, {}) : (0, jsx_runtime_1.jsx)(Course_1.CourseSkeleton, Object.assign({}, CourseSkeletonProps)) }), index))) })) })));
44
44
  }
45
45
  exports.default = CoursesSkeleton;
@@ -18,6 +18,7 @@ const react_intl_1 = require("react-intl");
18
18
  const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
19
19
  const api_services_1 = require("@selfcommunity/api-services");
20
20
  const lab_1 = require("@mui/lab");
21
+ const CourseCompletedDialog_1 = tslib_1.__importDefault(require("../CourseCompletedDialog"));
21
22
  const classes = {
22
23
  root: `${constants_1.PREFIX}-root`,
23
24
  content: `${constants_1.PREFIX}-content`,
@@ -31,7 +32,7 @@ const classes = {
31
32
  const Root = (0, styles_1.styled)(material_1.Box, {
32
33
  name: constants_1.PREFIX,
33
34
  slot: 'Root',
34
- overridesResolver: (props, styles) => [styles.root]
35
+ overridesResolver: (_props, styles) => [styles.root]
35
36
  })(() => ({}));
36
37
  function LessonObject(inProps) {
37
38
  // PROPS
@@ -42,6 +43,7 @@ function LessonObject(inProps) {
42
43
  const { className = null, course, lesson, editMode, EditorProps = {}, onContentChange, onMediaChange, isSubmitting } = props, rest = tslib_1.__rest(props, ["className", "course", "lesson", "editMode", "EditorProps", "onContentChange", "onMediaChange", "isSubmitting"]);
43
44
  const [loading, setLoading] = (0, react_1.useState)(false);
44
45
  const [completed, setCompleted] = (0, react_1.useState)(lesson.completion_status === types_1.SCCourseLessonCompletionStatusType.COMPLETED);
46
+ const [openDialog, setOpenDialog] = (0, react_1.useState)(false);
45
47
  // CONTEXT
46
48
  const scRoutingContext = (0, react_core_1.useSCRouting)();
47
49
  //HOOKS
@@ -66,20 +68,26 @@ function LessonObject(inProps) {
66
68
  .then(() => {
67
69
  setCompleted(!completed);
68
70
  setLoading(false);
71
+ if (course.avg_completion_rate === 100) {
72
+ setOpenDialog(true);
73
+ }
69
74
  })
70
75
  .catch((error) => {
71
76
  setLoading(false);
72
77
  console.log(error);
73
78
  });
74
79
  }
80
+ const handleCloseDialog = (0, react_1.useCallback)(() => {
81
+ setOpenDialog(false);
82
+ }, [setOpenDialog]);
75
83
  // RENDER
76
84
  if (!course || !lesson) {
77
85
  return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
78
86
  }
79
- return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsx)(Widget_1.default, { children: (0, jsx_runtime_1.jsx)(CardContent_1.default, Object.assign({ classes: { root: editMode ? classes.contentEdit : classes.content } }, { children: editMode ? ((0, jsx_runtime_1.jsx)(ContentLesson_1.default, { value: lesson,
80
- //error={{error}}
81
- onChange: handleChangeLesson, onMediaChange: handleChangeMedia, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: true, uploadImage: false, uploadFile: true }, EditorProps) })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { component: "div", gutterBottom: true, className: classes.text, dangerouslySetInnerHTML: {
82
- __html: (0, contribution_1.getContributionHtml)(lesson.html, scRoutingContext.url)
83
- } })) })) }), !isCourseAdmin && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ className: classes.button, loading: loading, size: "small", variant: completed ? 'outlined' : 'contained', startIcon: !completed && (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_next" }), endIcon: completed && (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "circle_checked" }), onClick: () => toggleLessonCompletion(completed) }, { children: completed ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonObject.button.completed", defaultMessage: "ui.lessonObject.button.completed" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonObject.button.complete", defaultMessage: "ui.lessonObject.button.complete" })) })))] })));
87
+ return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsx)(Widget_1.default, { children: (0, jsx_runtime_1.jsx)(CardContent_1.default, Object.assign({ classes: { root: editMode ? classes.contentEdit : classes.content } }, { children: editMode ? ((0, jsx_runtime_1.jsx)(ContentLesson_1.default, { value: lesson,
88
+ //error={{error}}
89
+ onChange: handleChangeLesson, onMediaChange: handleChangeMedia, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: true, uploadImage: false, uploadFile: true }, EditorProps) })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { component: "div", gutterBottom: true, className: classes.text, dangerouslySetInnerHTML: {
90
+ __html: (0, contribution_1.getContributionHtml)(lesson.html, scRoutingContext.url)
91
+ } })) })) }), !isCourseAdmin && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ className: classes.button, loading: loading, size: "small", variant: completed ? 'outlined' : 'contained', startIcon: !completed && (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_next" }), endIcon: completed && (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "circle_checked" }), onClick: () => toggleLessonCompletion(completed) }, { children: completed ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonObject.button.completed", defaultMessage: "ui.lessonObject.button.completed" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonObject.button.complete", defaultMessage: "ui.lessonObject.button.complete" })) })))] })), openDialog && (0, jsx_runtime_1.jsx)(CourseCompletedDialog_1.default, { course: course, onClose: handleCloseDialog })] }));
84
92
  }
85
93
  exports.default = LessonObject;
@@ -68,7 +68,7 @@ import Footer, { FooterProps, FooterSkeleton } from './components/Footer';
68
68
  import FriendshipUserButton, { FriendshipButtonProps } from './components/FriendshipUserButton';
69
69
  import Group, { GroupProps, GroupSkeleton } from './components/Group';
70
70
  import GroupActionsMenu, { GroupActionsMenuProps } from './components/GroupActionsMenu';
71
- import LessonCompletedDialog, { LessonCompletedDialogProps } from './components/LessonCompletedDialog';
71
+ import CourseCompletedDialog, { CourseCompletedDialogProps } from './components/CourseCompletedDialog';
72
72
  import GroupForm, { GroupFormProps } from './components/GroupForm';
73
73
  import GroupHeader, { GroupHeaderProps, GroupHeaderSkeleton } from './components/GroupHeader';
74
74
  import GroupInfoWidget, { GroupInfoWidgetProps, GroupInfoWidgetSkeleton } from './components/GroupInfoWidget';
@@ -208,4 +208,4 @@ import DefaultCoverSelfCommunity from './assets/deafultCover';
208
208
  /**
209
209
  * List all exports
210
210
  */
211
- export { AcceptRequestUserEventButton, AcceptRequestUserEventButtonProps, AccountChangeMailValidation, AccountChangeMailValidationProps, AccountDataPortability, AccountDataPortabilityButton, AccountDataPortabilityButtonProps, AccountDataPortabilityProps, AccountDelete, AccountDeleteButton, AccountDeleteButtonProps, AccountDeleteProps, AccountRecover, AccountRecoverProps, AccountReset, AccountResetProps, AccountVerify, AccountVerifyProps, AvatarGroupSkeleton, BaseDialog, BaseDialogProps, BaseItem, BaseItemProps, BaseLightbox, BaseLightboxProps, BottomNavigation, BottomNavigationProps, BroadcastMessages, BroadcastMessagesProps, BroadcastMessagesSkeleton, bytesToSize, generateRoomId, randomString, decodePassphrase, encodePassphrase, getCurrentSectionAndLessonIndex, Calendar, CalendarProps, Categories, CategoriesPopularWidget, CategoriesPopularWidgetSkeleton, CategoriesProps, CategoriesSkeleton, CategoriesSkeletonProps, CategoriesSuggestionWidget, CategoriesSuggestionWidgetProps, CategoriesSuggestionWidgetSkeleton, Category, CategoryAutocomplete, CategoryAutocompleteProps, CategoryFollowButton, CategoryFollowButtonProps, CategoryFollowersButton, CategoryFollowersButtonProps, CategoryHeader, CategoryHeaderProps, CategoryHeaderSkeleton, CategoryProps, CategorySkeleton, CategoryTrendingFeedWidget, CategoryTrendingFeedWidgetProps, CategoryTrendingFeedWidgetSkeleton, CategoryTrendingPeopleWidgetSkeleton, CategoryTrendingUsersWidget, CategoryTrendingUsersWidgetProps, CentralProgress, ChangeCover, ChangeCoverProps, ChangeGroupCover, ChangeGroupCoverProps, ChangeGroupPicture, ChangeGroupPictureProps, ChangePicture, ChangePictureProps, CommentObject, CommentObjectProps, CommentObjectReply, CommentObjectReplyProps, CommentObjectSkeleton, CommentsFeedObject, CommentsFeedObjectProps, CommentsFeedObjectSkeleton, CommentsObject, CommentsObjectProps, CommentsObjectSkeleton, Composer, ComposerIconButton, ComposerIconButtonProps, ComposerProps, ConfirmDialog, ConnectionUserButton, ConsentSolution, ConsentSolutionButton, ConsentSolutionButtonProps, ConsentSolutionProps, ConsentSolutionSkeleton, ContributionUtils, Course, CourseProps, CourseSkeleton, CourseSkeletonProps, CourseJoinButton, CourseJoinButtonProps, Courses, CreateCourseButton, CreateCourseButtonProps, CoursesProps, CoursesSkeleton, CoursesSkeletonProps, CourseContentMenu, CourseContentMenuProps, CourseDashboard, TeacherCourseDashboardProps, StudentCourseDashboardProps, CreateEventButton, CreateEventButtonProps, CreateEventWidget, CreateEventWidgetProps, CreateEventWidgetSkeleton, CreateGroupButton, EventForm, EventFormProps, EventFormDialog, EventFormDialogProps, CreateGroupButtonProps, CustomAdv, CustomAdvProps, CustomAdvSkeleton, DEFAULT_FIELDS, DEFAULT_PAGINATION_LIMIT, DEFAULT_PAGINATION_OFFSET, DEFAULT_PAGINATION_QUERY_PARAM_NAME, DEFAULT_PRELOAD_OFFSET_VIEWPORT, DEFAULT_WIDGETS_NUMBER, DefaultDrawerContent, DefaultDrawerContentProps, DefaultHeaderContent, DefaultHeaderContentProps, DefaultDrawerSkeleton, DefaultDrawerSkeletonProps, EditEventButton, EditEventButtonProps, EditGroupButton, EditGroupButtonProps, EditMediaProps, Editor, EditorProps, EditorSkeleton, EmailTextField, EditCourse, EditCourseProps, Event, EventActionsMenu, EventActionsMenuProps, EventHeader, EventHeaderProps, EventHeaderSkeleton, EventInfoDetails, EventInfoDetailsProps, EventInfoWidget, EventInfoWidgetProps, EventInviteButton, EventInviteButtonProps, EventLocationWidget, EventLocationWidgetProps, EventLocationWidgetSkeleton, EventMediaWidget, EventMediaWidgetProps, EventMediaWidgetSkeleton, EventMembersWidget, EventMembersWidgetProps, EventMembersWidgetSkeleton, EventParticipantsButton, EventParticipantsButtonProps, EventProps, Events, EventSkeleton, EventSkeletonProps, EventsProps, EventsSkeleton, EventsSkeletonProps, FACEBOOK_SHARE, Feed, FeedObject, FeedObjectMediaPreview, FeedObjectMediaPreviewProps, FeedObjectProps, FeedObjectSkeleton, FeedProps, FeedRef, FeedSidebarProps, FeedSkeleton, FeedUpdatesWidget, FeedUpdatesWidgetProps, FeedUpdatesWidgetSkeleton, File, FollowUserButton, FollowUserButtonProps, Footer, FooterProps, FooterSkeleton, FriendshipButtonProps, FriendshipUserButton, GenericSkeleton, getRelativeTime, getUnseenNotification, getUnseenNotificationCounter, Group, GroupActionsMenu, GroupActionsMenuProps, GroupForm, GroupFormProps, GroupHeader, GroupHeaderProps, GroupHeaderSkeleton, GroupInfoWidget, GroupInfoWidgetProps, GroupInfoWidgetSkeleton, GroupInviteButton, GroupInviteButtonProps, GroupInvitedWidget, GroupInvitedWidgetProps, GroupInvitedWidgetSkeleton, GroupMembersButton, GroupMembersButtonProps, GroupMembersWidget, GroupMembersWidgetProps, GroupMembersWidgetSkeleton, GroupProps, GroupRequestsWidget, GroupRequestsWidgetProps, GroupRequestsWidgetSkeleton, Groups, GroupSettingsIconButton, GroupSettingsIconButtonProps, GroupSkeleton, GroupsProps, GroupsSkeleton, GroupSubscribeButton, GroupSubscribeButtonProps, AccordionLessons, AccordionLessonsProps, AddUsersButton, AddUsersButtonProps, CourseUsersTable, CourseUsersTableProps, CourseUsersTableSkeleton, EmptyStatus, EmptyStatusProps, HiddenPlaceholder, Incubator, IncubatorDetail, IncubatorDetailProps, IncubatorListWidget, IncubatorListWidgetProps, IncubatorProps, IncubatorSubscribeButton, IncubatorSubscribeButtonProps, IncubatorSuggestionWidget, IncubatorSuggestionWidgetProps, InfiniteScroll, ScrollContainer, InlineComposerWidget, InlineComposerWidgetProps, InlineComposerWidgetSkeleton, InviteUserEventButton, LessonAppbar, LessonAppbarProps, LessonDrawer, LessonDrawerProps, LessonEditForm, LessonEditFormProps, LessonObject, LessonObjectProps, InviteUserEventButtonProps, LanguageSwitcher, LEGAL_POLICIES, LessonCompletedDialog, LessonCompletedDialogProps, Lightbox, LightboxProps, Link, LINKEDIN_SHARE, LocationAutocomplete, LocationAutocompleteProps, LogoSelfCommunity, DefaultCoverSelfCommunity, LoyaltyProgramWidget, LoyaltyProgramWidgetProps, LoyaltyProgramWidgetSkeleton, MAX_PRELOAD_OFFSET_VIEWPORT, MEDIA_EMBED_SC_LINK_TYPE, MEDIA_EMBED_SC_SHARED_EVENT, MEDIA_EMBED_SC_SHARED_OBJECT, MEDIA_TYPE_DOCUMENT, MEDIA_TYPE_EMBED, MEDIA_TYPE_EVENT, MEDIA_TYPE_IMAGE, MEDIA_TYPE_LINK, MEDIA_TYPE_SHARE, MEDIA_TYPE_URL, MEDIA_TYPE_VIDEO, MediaChunkUploader, MediaChunkUploaderProps, MessageUploaderUtils, MetadataField, MetadataFieldProps, MIN_PRELOAD_OFFSET_VIEWPORT, MyEventsWidget, MyEventsWidgetProps, MyEventsWidgetSkeleton, NavigationMenuContent, NavigationMenuDrawer, NavigationMenuDrawerProps, NavigationMenuHeader, NavigationMenuIconButton, NavigationMenuIconButtonProps, NavigationSettingsIconButton, NavigationSettingsIconButtonProps, NavigationSettingsItem, NavigationToolbar, NavigationToolbarMobile, NavigationToolbarMobileProps, NavigationToolbarMobileSkeleton, NavigationToolbarProps, NavigationToolbarSkeleton, Notification, NotificationProps, NotificationSkeleton, OnBoardingWidget, OnBoardingWidgetProps, OnBoardingWidgetSkeleton, PasswordTextField, PhoneTextField, PlatformWidget, PlatformWidgetActionType, PlatformWidgetProps, PlatformWidgetSkeleton, PollSuggestionWidget, PollSuggestionWidgetProps, PrivateMessageComponent, PrivateMessageComponentProps, PrivateMessageComponentSkeleton, PrivateMessageEditor, PrivateMessageEditorProps, PrivateMessageEditorSkeleton, PrivateMessageSettingsIconButton, PrivateMessageSettingsIconButtonProps, PrivateMessageSnippetItem, PrivateMessageSnippetItemProps, PrivateMessageSnippetItemSkeleton, PrivateMessageSnippets, PrivateMessageSnippetsProps, PrivateMessageSnippetsSkeleton, PrivateMessageThread, PrivateMessageThreadItem, PrivateMessageThreadItemProps, PrivateMessageThreadItemSkeleton, PrivateMessageThreadProps, PrivateMessageThreadSkeleton, ProgressBar, ProgressBarProps, RelatedEventsWidget, RelatedEventsWidgetProps, RelatedEventsWidgetSkeleton, RelatedFeedObjectsWidget, RelatedFeedObjectsWidgetSkeleton, RelatedFeedObjectWidgetProps, ReplyComment, SCBroadcastMessageTemplateType, SCCommentsOrderBy, SCEventMembersEventType, SCEventTemplateType, SCFeedObjectActivitiesType, SCFeedObjectTemplateType, SCFeedWidgetType, SCGroupMembersEventType, SCMediaChunkType, SCMediaObjectType, SCNotificationObjectTemplateType, SCUserProfileFields, SCUserProfileSettings, SCUserSocialAssociations, SearchAutocomplete, SearchAutocompleteProps, SearchDialog, SearchDialogProps, Share, SnippetNotifications, SnippetNotificationsProps, SnippetNotificationsSkeleton, StickyBox, StickyBoxComponent, StickyBoxProps, SuggestedEventsWidget, TagAutocomplete, TagAutocompleteProps, SuggestedEventsWidgetProps, SuggestedEventsWidgetSkeleton, TagChip, TagChipProps, ToastNotifications, ToastNotificationsProps, ToastNotificationsSkeleton, UrlTextField, User, UserActionIconButton, UserActionIconButtonProps, UserAvatar, UserAvatarProps, UserConnectionsRequestsSentWidget, UserConnectionsRequestsSentWidgetProps, UserConnectionsRequestsSentWidgetSkeleton, UserConnectionsRequestsWidget, UserConnectionsRequestsWidgetProps, UserConnectionsRequestsWidgetSkeleton, UserConnectionsWidget, UserConnectionsWidgetProps, UserConnectionsWidgetSkeleton, UserCounters, UserCountersProps, UserDeletedSnackBar, UserDeletedSnackBarProps, UserFollowedCategoriesWidget, UserFollowedCategoriesWidgetProps, UserFollowedCategoriesWidgetSkeleton, UserFollowedUsersWidget, UserFollowedUsersWidgetProps, UserFollowedUsersWidgetSkeleton, UserFollowersWidget, UserFollowersWidgetProps, UserFollowersWidgetSkeleton, UserInfo, UserInfoDialog, UserInfoDialogProps, UserInfoProps, UserInfoSkeleton, UsernameTextField, UserProfileBlocked, UserProfileBlockedProps, UserProfileEdit, UserProfileEditProps, UserProfileEditSectionAccount, UserProfileEditSectionAccountProps, UserProfileEditSectionPublicInfo, UserProfileEditSectionPublicInfoProps, UserProfileEditSectionSettings, UserProfileEditSectionSettingsProps, UserProfileEditSkeleton, UserProfileHeader, UserProfileHeaderProps, UserProfileHeaderSkeleton, UserProps, UserSkeleton, UserSocialAssociation, UserSocialAssociationProps, UserSubscribedGroupsWidget, UserSubscribedGroupsWidgetProps, UserSubscribedGroupsWidgetSkeleton, UserSuggestionWidget, UserSuggestionWidgetProps, UserSuggestionWidgetSkeleton, UserLiveStreamWidget, UserLiveStreamWidgetProps, UserLiveStreamWidgetSkeleton, useStickyBox, UseStickyBoxProps, LiveStream, LiveStreamProps, LiveStreamSkeletonProps, LiveStreamSkeleton, LiveStreamInfoDetails, LiveStreamInfoDetailsProps, UpScalingTierBadge, UpScalingTierProps, CreateLiveStreamDialog, CreateLiveStreamDialogProps, CreateLiveStreamButton, CreateLiveStreamButtonProps, LiveStreamForm, LiveStreamFormProps, LiveStreamRoom, LiveStreamRoomProps, LiveStreamVideoConference, LiveStreamVideoConferenceProps, VirtualScrollerItemProps, SCCourseTemplateType, SCLessonActionsType, SCLessonModeType, Widget, WidgetProps, X_SHARE, PROVIDER_ICONS_CONTAINED, PROVIDER_ICONS_OUTLINED };
211
+ export { AcceptRequestUserEventButton, AcceptRequestUserEventButtonProps, AccountChangeMailValidation, AccountChangeMailValidationProps, AccountDataPortability, AccountDataPortabilityButton, AccountDataPortabilityButtonProps, AccountDataPortabilityProps, AccountDelete, AccountDeleteButton, AccountDeleteButtonProps, AccountDeleteProps, AccountRecover, AccountRecoverProps, AccountReset, AccountResetProps, AccountVerify, AccountVerifyProps, AvatarGroupSkeleton, BaseDialog, BaseDialogProps, BaseItem, BaseItemProps, BaseLightbox, BaseLightboxProps, BottomNavigation, BottomNavigationProps, BroadcastMessages, BroadcastMessagesProps, BroadcastMessagesSkeleton, bytesToSize, generateRoomId, randomString, decodePassphrase, encodePassphrase, getCurrentSectionAndLessonIndex, Calendar, CalendarProps, Categories, CategoriesPopularWidget, CategoriesPopularWidgetSkeleton, CategoriesProps, CategoriesSkeleton, CategoriesSkeletonProps, CategoriesSuggestionWidget, CategoriesSuggestionWidgetProps, CategoriesSuggestionWidgetSkeleton, Category, CategoryAutocomplete, CategoryAutocompleteProps, CategoryFollowButton, CategoryFollowButtonProps, CategoryFollowersButton, CategoryFollowersButtonProps, CategoryHeader, CategoryHeaderProps, CategoryHeaderSkeleton, CategoryProps, CategorySkeleton, CategoryTrendingFeedWidget, CategoryTrendingFeedWidgetProps, CategoryTrendingFeedWidgetSkeleton, CategoryTrendingPeopleWidgetSkeleton, CategoryTrendingUsersWidget, CategoryTrendingUsersWidgetProps, CentralProgress, ChangeCover, ChangeCoverProps, ChangeGroupCover, ChangeGroupCoverProps, ChangeGroupPicture, ChangeGroupPictureProps, ChangePicture, ChangePictureProps, CommentObject, CommentObjectProps, CommentObjectReply, CommentObjectReplyProps, CommentObjectSkeleton, CommentsFeedObject, CommentsFeedObjectProps, CommentsFeedObjectSkeleton, CommentsObject, CommentsObjectProps, CommentsObjectSkeleton, Composer, ComposerIconButton, ComposerIconButtonProps, ComposerProps, ConfirmDialog, ConnectionUserButton, ConsentSolution, ConsentSolutionButton, ConsentSolutionButtonProps, ConsentSolutionProps, ConsentSolutionSkeleton, ContributionUtils, Course, CourseProps, CourseSkeleton, CourseSkeletonProps, CourseJoinButton, CourseJoinButtonProps, Courses, CreateCourseButton, CreateCourseButtonProps, CoursesProps, CoursesSkeleton, CoursesSkeletonProps, CourseContentMenu, CourseContentMenuProps, CourseDashboard, TeacherCourseDashboardProps, StudentCourseDashboardProps, CreateEventButton, CreateEventButtonProps, CreateEventWidget, CreateEventWidgetProps, CreateEventWidgetSkeleton, CreateGroupButton, EventForm, EventFormProps, EventFormDialog, EventFormDialogProps, CreateGroupButtonProps, CustomAdv, CustomAdvProps, CustomAdvSkeleton, DEFAULT_FIELDS, DEFAULT_PAGINATION_LIMIT, DEFAULT_PAGINATION_OFFSET, DEFAULT_PAGINATION_QUERY_PARAM_NAME, DEFAULT_PRELOAD_OFFSET_VIEWPORT, DEFAULT_WIDGETS_NUMBER, DefaultDrawerContent, DefaultDrawerContentProps, DefaultHeaderContent, DefaultHeaderContentProps, DefaultDrawerSkeleton, DefaultDrawerSkeletonProps, EditEventButton, EditEventButtonProps, EditGroupButton, EditGroupButtonProps, EditMediaProps, Editor, EditorProps, EditorSkeleton, EmailTextField, EditCourse, EditCourseProps, Event, EventActionsMenu, EventActionsMenuProps, EventHeader, EventHeaderProps, EventHeaderSkeleton, EventInfoDetails, EventInfoDetailsProps, EventInfoWidget, EventInfoWidgetProps, EventInviteButton, EventInviteButtonProps, EventLocationWidget, EventLocationWidgetProps, EventLocationWidgetSkeleton, EventMediaWidget, EventMediaWidgetProps, EventMediaWidgetSkeleton, EventMembersWidget, EventMembersWidgetProps, EventMembersWidgetSkeleton, EventParticipantsButton, EventParticipantsButtonProps, EventProps, Events, EventSkeleton, EventSkeletonProps, EventsProps, EventsSkeleton, EventsSkeletonProps, FACEBOOK_SHARE, Feed, FeedObject, FeedObjectMediaPreview, FeedObjectMediaPreviewProps, FeedObjectProps, FeedObjectSkeleton, FeedProps, FeedRef, FeedSidebarProps, FeedSkeleton, FeedUpdatesWidget, FeedUpdatesWidgetProps, FeedUpdatesWidgetSkeleton, File, FollowUserButton, FollowUserButtonProps, Footer, FooterProps, FooterSkeleton, FriendshipButtonProps, FriendshipUserButton, GenericSkeleton, getRelativeTime, getUnseenNotification, getUnseenNotificationCounter, Group, GroupActionsMenu, GroupActionsMenuProps, GroupForm, GroupFormProps, GroupHeader, GroupHeaderProps, GroupHeaderSkeleton, GroupInfoWidget, GroupInfoWidgetProps, GroupInfoWidgetSkeleton, GroupInviteButton, GroupInviteButtonProps, GroupInvitedWidget, GroupInvitedWidgetProps, GroupInvitedWidgetSkeleton, GroupMembersButton, GroupMembersButtonProps, GroupMembersWidget, GroupMembersWidgetProps, GroupMembersWidgetSkeleton, GroupProps, GroupRequestsWidget, GroupRequestsWidgetProps, GroupRequestsWidgetSkeleton, Groups, GroupSettingsIconButton, GroupSettingsIconButtonProps, GroupSkeleton, GroupsProps, GroupsSkeleton, GroupSubscribeButton, GroupSubscribeButtonProps, AccordionLessons, AccordionLessonsProps, AddUsersButton, AddUsersButtonProps, CourseUsersTable, CourseUsersTableProps, CourseUsersTableSkeleton, EmptyStatus, EmptyStatusProps, HiddenPlaceholder, Incubator, IncubatorDetail, IncubatorDetailProps, IncubatorListWidget, IncubatorListWidgetProps, IncubatorProps, IncubatorSubscribeButton, IncubatorSubscribeButtonProps, IncubatorSuggestionWidget, IncubatorSuggestionWidgetProps, InfiniteScroll, ScrollContainer, InlineComposerWidget, InlineComposerWidgetProps, InlineComposerWidgetSkeleton, InviteUserEventButton, LessonAppbar, LessonAppbarProps, LessonDrawer, LessonDrawerProps, LessonEditForm, LessonEditFormProps, LessonObject, LessonObjectProps, InviteUserEventButtonProps, LanguageSwitcher, LEGAL_POLICIES, CourseCompletedDialog, CourseCompletedDialogProps, Lightbox, LightboxProps, Link, LINKEDIN_SHARE, LocationAutocomplete, LocationAutocompleteProps, LogoSelfCommunity, DefaultCoverSelfCommunity, LoyaltyProgramWidget, LoyaltyProgramWidgetProps, LoyaltyProgramWidgetSkeleton, MAX_PRELOAD_OFFSET_VIEWPORT, MEDIA_EMBED_SC_LINK_TYPE, MEDIA_EMBED_SC_SHARED_EVENT, MEDIA_EMBED_SC_SHARED_OBJECT, MEDIA_TYPE_DOCUMENT, MEDIA_TYPE_EMBED, MEDIA_TYPE_EVENT, MEDIA_TYPE_IMAGE, MEDIA_TYPE_LINK, MEDIA_TYPE_SHARE, MEDIA_TYPE_URL, MEDIA_TYPE_VIDEO, MediaChunkUploader, MediaChunkUploaderProps, MessageUploaderUtils, MetadataField, MetadataFieldProps, MIN_PRELOAD_OFFSET_VIEWPORT, MyEventsWidget, MyEventsWidgetProps, MyEventsWidgetSkeleton, NavigationMenuContent, NavigationMenuDrawer, NavigationMenuDrawerProps, NavigationMenuHeader, NavigationMenuIconButton, NavigationMenuIconButtonProps, NavigationSettingsIconButton, NavigationSettingsIconButtonProps, NavigationSettingsItem, NavigationToolbar, NavigationToolbarMobile, NavigationToolbarMobileProps, NavigationToolbarMobileSkeleton, NavigationToolbarProps, NavigationToolbarSkeleton, Notification, NotificationProps, NotificationSkeleton, OnBoardingWidget, OnBoardingWidgetProps, OnBoardingWidgetSkeleton, PasswordTextField, PhoneTextField, PlatformWidget, PlatformWidgetActionType, PlatformWidgetProps, PlatformWidgetSkeleton, PollSuggestionWidget, PollSuggestionWidgetProps, PrivateMessageComponent, PrivateMessageComponentProps, PrivateMessageComponentSkeleton, PrivateMessageEditor, PrivateMessageEditorProps, PrivateMessageEditorSkeleton, PrivateMessageSettingsIconButton, PrivateMessageSettingsIconButtonProps, PrivateMessageSnippetItem, PrivateMessageSnippetItemProps, PrivateMessageSnippetItemSkeleton, PrivateMessageSnippets, PrivateMessageSnippetsProps, PrivateMessageSnippetsSkeleton, PrivateMessageThread, PrivateMessageThreadItem, PrivateMessageThreadItemProps, PrivateMessageThreadItemSkeleton, PrivateMessageThreadProps, PrivateMessageThreadSkeleton, ProgressBar, ProgressBarProps, RelatedEventsWidget, RelatedEventsWidgetProps, RelatedEventsWidgetSkeleton, RelatedFeedObjectsWidget, RelatedFeedObjectsWidgetSkeleton, RelatedFeedObjectWidgetProps, ReplyComment, SCBroadcastMessageTemplateType, SCCommentsOrderBy, SCEventMembersEventType, SCEventTemplateType, SCFeedObjectActivitiesType, SCFeedObjectTemplateType, SCFeedWidgetType, SCGroupMembersEventType, SCMediaChunkType, SCMediaObjectType, SCNotificationObjectTemplateType, SCUserProfileFields, SCUserProfileSettings, SCUserSocialAssociations, SearchAutocomplete, SearchAutocompleteProps, SearchDialog, SearchDialogProps, Share, SnippetNotifications, SnippetNotificationsProps, SnippetNotificationsSkeleton, StickyBox, StickyBoxComponent, StickyBoxProps, SuggestedEventsWidget, TagAutocomplete, TagAutocompleteProps, SuggestedEventsWidgetProps, SuggestedEventsWidgetSkeleton, TagChip, TagChipProps, ToastNotifications, ToastNotificationsProps, ToastNotificationsSkeleton, UrlTextField, User, UserActionIconButton, UserActionIconButtonProps, UserAvatar, UserAvatarProps, UserConnectionsRequestsSentWidget, UserConnectionsRequestsSentWidgetProps, UserConnectionsRequestsSentWidgetSkeleton, UserConnectionsRequestsWidget, UserConnectionsRequestsWidgetProps, UserConnectionsRequestsWidgetSkeleton, UserConnectionsWidget, UserConnectionsWidgetProps, UserConnectionsWidgetSkeleton, UserCounters, UserCountersProps, UserDeletedSnackBar, UserDeletedSnackBarProps, UserFollowedCategoriesWidget, UserFollowedCategoriesWidgetProps, UserFollowedCategoriesWidgetSkeleton, UserFollowedUsersWidget, UserFollowedUsersWidgetProps, UserFollowedUsersWidgetSkeleton, UserFollowersWidget, UserFollowersWidgetProps, UserFollowersWidgetSkeleton, UserInfo, UserInfoDialog, UserInfoDialogProps, UserInfoProps, UserInfoSkeleton, UsernameTextField, UserProfileBlocked, UserProfileBlockedProps, UserProfileEdit, UserProfileEditProps, UserProfileEditSectionAccount, UserProfileEditSectionAccountProps, UserProfileEditSectionPublicInfo, UserProfileEditSectionPublicInfoProps, UserProfileEditSectionSettings, UserProfileEditSectionSettingsProps, UserProfileEditSkeleton, UserProfileHeader, UserProfileHeaderProps, UserProfileHeaderSkeleton, UserProps, UserSkeleton, UserSocialAssociation, UserSocialAssociationProps, UserSubscribedGroupsWidget, UserSubscribedGroupsWidgetProps, UserSubscribedGroupsWidgetSkeleton, UserSuggestionWidget, UserSuggestionWidgetProps, UserSuggestionWidgetSkeleton, UserLiveStreamWidget, UserLiveStreamWidgetProps, UserLiveStreamWidgetSkeleton, useStickyBox, UseStickyBoxProps, LiveStream, LiveStreamProps, LiveStreamSkeletonProps, LiveStreamSkeleton, LiveStreamInfoDetails, LiveStreamInfoDetailsProps, UpScalingTierBadge, UpScalingTierProps, CreateLiveStreamDialog, CreateLiveStreamDialogProps, CreateLiveStreamButton, CreateLiveStreamButtonProps, LiveStreamForm, LiveStreamFormProps, LiveStreamRoom, LiveStreamRoomProps, LiveStreamVideoConference, LiveStreamVideoConferenceProps, VirtualScrollerItemProps, SCCourseTemplateType, SCLessonActionsType, SCLessonModeType, Widget, WidgetProps, X_SHARE, PROVIDER_ICONS_CONTAINED, PROVIDER_ICONS_OUTLINED };
package/lib/cjs/index.js CHANGED
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.CommentsFeedObjectSkeleton = exports.CommentsFeedObject = exports.CommentObjectSkeleton = exports.CommentObjectReply = exports.CommentObject = exports.ChangePicture = exports.ChangeGroupPicture = exports.ChangeGroupCover = exports.ChangeCover = exports.CentralProgress = exports.CategoryTrendingUsersWidget = exports.CategoryTrendingPeopleWidgetSkeleton = exports.CategoryTrendingFeedWidgetSkeleton = exports.CategoryTrendingFeedWidget = exports.CategorySkeleton = exports.CategoryHeaderSkeleton = exports.CategoryHeader = exports.CategoryFollowersButton = exports.CategoryFollowButton = exports.CategoryAutocomplete = exports.Category = exports.CategoriesSuggestionWidgetSkeleton = exports.CategoriesSuggestionWidget = exports.CategoriesSkeleton = exports.CategoriesPopularWidgetSkeleton = exports.CategoriesPopularWidget = exports.Categories = exports.Calendar = exports.getCurrentSectionAndLessonIndex = exports.encodePassphrase = exports.decodePassphrase = exports.randomString = exports.generateRoomId = exports.bytesToSize = exports.BroadcastMessagesSkeleton = exports.BroadcastMessages = exports.BottomNavigation = exports.BaseLightbox = exports.BaseItem = exports.BaseDialog = exports.AvatarGroupSkeleton = exports.AccountVerify = exports.AccountReset = exports.AccountRecover = exports.AccountDeleteButton = exports.AccountDelete = exports.AccountDataPortabilityButton = exports.AccountDataPortability = exports.AccountChangeMailValidation = exports.AcceptRequestUserEventButton = void 0;
4
4
  exports.EventLocationWidgetSkeleton = exports.EventLocationWidget = exports.EventInviteButton = exports.EventInfoWidget = exports.EventInfoDetails = exports.EventHeaderSkeleton = exports.EventHeader = exports.EventActionsMenu = exports.Event = exports.EditCourse = exports.EmailTextField = exports.EditorSkeleton = exports.Editor = exports.EditGroupButton = exports.EditEventButton = exports.DefaultDrawerSkeleton = exports.DefaultHeaderContent = exports.DefaultDrawerContent = exports.DEFAULT_WIDGETS_NUMBER = exports.DEFAULT_PRELOAD_OFFSET_VIEWPORT = exports.DEFAULT_PAGINATION_QUERY_PARAM_NAME = exports.DEFAULT_PAGINATION_OFFSET = exports.DEFAULT_PAGINATION_LIMIT = exports.DEFAULT_FIELDS = exports.CustomAdvSkeleton = exports.CustomAdv = exports.EventFormDialog = exports.EventForm = exports.CreateGroupButton = exports.CreateEventWidgetSkeleton = exports.CreateEventWidget = exports.CreateEventButton = exports.CourseDashboard = exports.CourseContentMenu = exports.CoursesSkeleton = exports.CreateCourseButton = exports.Courses = exports.CourseJoinButton = exports.CourseSkeleton = exports.Course = exports.ContributionUtils = exports.ConsentSolutionSkeleton = exports.ConsentSolutionButton = exports.ConsentSolution = exports.ConnectionUserButton = exports.ConfirmDialog = exports.ComposerIconButton = exports.Composer = exports.CommentsObjectSkeleton = exports.CommentsObject = void 0;
5
5
  exports.EmptyStatus = exports.CourseUsersTableSkeleton = exports.CourseUsersTable = exports.AddUsersButton = exports.AccordionLessons = exports.GroupSubscribeButton = exports.GroupsSkeleton = exports.GroupSkeleton = exports.GroupSettingsIconButton = exports.Groups = exports.GroupRequestsWidgetSkeleton = exports.GroupRequestsWidget = exports.GroupMembersWidgetSkeleton = exports.GroupMembersWidget = exports.GroupMembersButton = exports.GroupInvitedWidgetSkeleton = exports.GroupInvitedWidget = exports.GroupInviteButton = exports.GroupInfoWidgetSkeleton = exports.GroupInfoWidget = exports.GroupHeaderSkeleton = exports.GroupHeader = exports.GroupForm = exports.GroupActionsMenu = exports.Group = exports.getUnseenNotificationCounter = exports.getUnseenNotification = exports.getRelativeTime = exports.GenericSkeleton = exports.FriendshipUserButton = exports.FooterSkeleton = exports.Footer = exports.FollowUserButton = exports.File = exports.FeedUpdatesWidgetSkeleton = exports.FeedUpdatesWidget = exports.FeedSkeleton = exports.FeedObjectSkeleton = exports.FeedObjectMediaPreview = exports.FeedObject = exports.Feed = exports.FACEBOOK_SHARE = exports.EventsSkeleton = exports.EventSkeleton = exports.Events = exports.EventParticipantsButton = exports.EventMembersWidgetSkeleton = exports.EventMembersWidget = exports.EventMediaWidgetSkeleton = exports.EventMediaWidget = void 0;
6
- exports.NavigationToolbar = exports.NavigationSettingsIconButton = exports.NavigationMenuIconButton = exports.NavigationMenuHeader = exports.NavigationMenuDrawer = exports.NavigationMenuContent = exports.MyEventsWidgetSkeleton = exports.MyEventsWidget = exports.MIN_PRELOAD_OFFSET_VIEWPORT = exports.MetadataField = exports.MessageUploaderUtils = exports.MediaChunkUploader = exports.MEDIA_TYPE_VIDEO = exports.MEDIA_TYPE_URL = exports.MEDIA_TYPE_SHARE = exports.MEDIA_TYPE_LINK = exports.MEDIA_TYPE_IMAGE = exports.MEDIA_TYPE_EVENT = exports.MEDIA_TYPE_EMBED = exports.MEDIA_TYPE_DOCUMENT = exports.MEDIA_EMBED_SC_SHARED_OBJECT = exports.MEDIA_EMBED_SC_SHARED_EVENT = exports.MEDIA_EMBED_SC_LINK_TYPE = exports.MAX_PRELOAD_OFFSET_VIEWPORT = exports.LoyaltyProgramWidgetSkeleton = exports.LoyaltyProgramWidget = exports.DefaultCoverSelfCommunity = exports.LogoSelfCommunity = exports.LocationAutocomplete = exports.LINKEDIN_SHARE = exports.Link = exports.Lightbox = exports.LessonCompletedDialog = exports.LEGAL_POLICIES = exports.LanguageSwitcher = exports.LessonObject = exports.LessonEditForm = exports.LessonDrawer = exports.LessonAppbar = exports.InviteUserEventButton = exports.InlineComposerWidgetSkeleton = exports.InlineComposerWidget = exports.ScrollContainer = exports.InfiniteScroll = exports.IncubatorSuggestionWidget = exports.IncubatorSubscribeButton = exports.IncubatorListWidget = exports.IncubatorDetail = exports.Incubator = exports.HiddenPlaceholder = void 0;
6
+ exports.NavigationToolbar = exports.NavigationSettingsIconButton = exports.NavigationMenuIconButton = exports.NavigationMenuHeader = exports.NavigationMenuDrawer = exports.NavigationMenuContent = exports.MyEventsWidgetSkeleton = exports.MyEventsWidget = exports.MIN_PRELOAD_OFFSET_VIEWPORT = exports.MetadataField = exports.MessageUploaderUtils = exports.MediaChunkUploader = exports.MEDIA_TYPE_VIDEO = exports.MEDIA_TYPE_URL = exports.MEDIA_TYPE_SHARE = exports.MEDIA_TYPE_LINK = exports.MEDIA_TYPE_IMAGE = exports.MEDIA_TYPE_EVENT = exports.MEDIA_TYPE_EMBED = exports.MEDIA_TYPE_DOCUMENT = exports.MEDIA_EMBED_SC_SHARED_OBJECT = exports.MEDIA_EMBED_SC_SHARED_EVENT = exports.MEDIA_EMBED_SC_LINK_TYPE = exports.MAX_PRELOAD_OFFSET_VIEWPORT = exports.LoyaltyProgramWidgetSkeleton = exports.LoyaltyProgramWidget = exports.DefaultCoverSelfCommunity = exports.LogoSelfCommunity = exports.LocationAutocomplete = exports.LINKEDIN_SHARE = exports.Link = exports.Lightbox = exports.CourseCompletedDialog = exports.LEGAL_POLICIES = exports.LanguageSwitcher = exports.LessonObject = exports.LessonEditForm = exports.LessonDrawer = exports.LessonAppbar = exports.InviteUserEventButton = exports.InlineComposerWidgetSkeleton = exports.InlineComposerWidget = exports.ScrollContainer = exports.InfiniteScroll = exports.IncubatorSuggestionWidget = exports.IncubatorSubscribeButton = exports.IncubatorListWidget = exports.IncubatorDetail = exports.Incubator = exports.HiddenPlaceholder = void 0;
7
7
  exports.TagChip = exports.SuggestedEventsWidgetSkeleton = exports.TagAutocomplete = exports.SuggestedEventsWidget = exports.StickyBox = exports.SnippetNotificationsSkeleton = exports.SnippetNotifications = exports.Share = exports.SearchDialog = exports.SearchAutocomplete = exports.SCUserSocialAssociations = exports.SCUserProfileSettings = exports.SCUserProfileFields = exports.SCNotificationObjectTemplateType = exports.SCFeedObjectTemplateType = exports.SCFeedObjectActivitiesType = exports.SCEventTemplateType = exports.SCCommentsOrderBy = exports.SCBroadcastMessageTemplateType = exports.ReplyComment = exports.RelatedFeedObjectsWidgetSkeleton = exports.RelatedFeedObjectsWidget = exports.RelatedEventsWidgetSkeleton = exports.RelatedEventsWidget = exports.ProgressBar = exports.PrivateMessageThreadSkeleton = exports.PrivateMessageThreadItemSkeleton = exports.PrivateMessageThreadItem = exports.PrivateMessageThread = exports.PrivateMessageSnippetsSkeleton = exports.PrivateMessageSnippets = exports.PrivateMessageSnippetItemSkeleton = exports.PrivateMessageSnippetItem = exports.PrivateMessageSettingsIconButton = exports.PrivateMessageEditorSkeleton = exports.PrivateMessageEditor = exports.PrivateMessageComponentSkeleton = exports.PrivateMessageComponent = exports.PollSuggestionWidget = exports.PlatformWidgetSkeleton = exports.PlatformWidget = exports.PhoneTextField = exports.PasswordTextField = exports.OnBoardingWidgetSkeleton = exports.OnBoardingWidget = exports.NotificationSkeleton = exports.Notification = exports.NavigationToolbarSkeleton = exports.NavigationToolbarMobileSkeleton = exports.NavigationToolbarMobile = void 0;
8
8
  exports.LiveStreamVideoConference = exports.LiveStreamRoom = exports.LiveStreamForm = exports.CreateLiveStreamButton = exports.CreateLiveStreamDialog = exports.UpScalingTierBadge = exports.LiveStreamInfoDetails = exports.LiveStreamSkeleton = exports.LiveStream = exports.useStickyBox = exports.UserLiveStreamWidgetSkeleton = exports.UserLiveStreamWidget = exports.UserSuggestionWidgetSkeleton = exports.UserSuggestionWidget = exports.UserSubscribedGroupsWidgetSkeleton = exports.UserSubscribedGroupsWidget = exports.UserSocialAssociation = exports.UserSkeleton = exports.UserProfileHeaderSkeleton = exports.UserProfileHeader = exports.UserProfileEditSkeleton = exports.UserProfileEditSectionSettings = exports.UserProfileEditSectionPublicInfo = exports.UserProfileEditSectionAccount = exports.UserProfileEdit = exports.UserProfileBlocked = exports.UsernameTextField = exports.UserInfoSkeleton = exports.UserInfoDialog = exports.UserInfo = exports.UserFollowersWidgetSkeleton = exports.UserFollowersWidget = exports.UserFollowedUsersWidgetSkeleton = exports.UserFollowedUsersWidget = exports.UserFollowedCategoriesWidgetSkeleton = exports.UserFollowedCategoriesWidget = exports.UserDeletedSnackBar = exports.UserCounters = exports.UserConnectionsWidgetSkeleton = exports.UserConnectionsWidget = exports.UserConnectionsRequestsWidgetSkeleton = exports.UserConnectionsRequestsWidget = exports.UserConnectionsRequestsSentWidgetSkeleton = exports.UserConnectionsRequestsSentWidget = exports.UserAvatar = exports.UserActionIconButton = exports.User = exports.UrlTextField = exports.ToastNotificationsSkeleton = exports.ToastNotifications = void 0;
9
9
  exports.PROVIDER_ICONS_OUTLINED = exports.PROVIDER_ICONS_CONTAINED = exports.X_SHARE = exports.Widget = exports.SCLessonModeType = exports.SCLessonActionsType = exports.SCCourseTemplateType = void 0;
@@ -174,8 +174,8 @@ exports.Group = Group_1.default;
174
174
  Object.defineProperty(exports, "GroupSkeleton", { enumerable: true, get: function () { return Group_1.GroupSkeleton; } });
175
175
  const GroupActionsMenu_1 = tslib_1.__importDefault(require("./components/GroupActionsMenu"));
176
176
  exports.GroupActionsMenu = GroupActionsMenu_1.default;
177
- const LessonCompletedDialog_1 = tslib_1.__importDefault(require("./components/LessonCompletedDialog"));
178
- exports.LessonCompletedDialog = LessonCompletedDialog_1.default;
177
+ const CourseCompletedDialog_1 = tslib_1.__importDefault(require("./components/CourseCompletedDialog"));
178
+ exports.CourseCompletedDialog = CourseCompletedDialog_1.default;
179
179
  const GroupForm_1 = tslib_1.__importDefault(require("./components/GroupForm"));
180
180
  exports.GroupForm = GroupForm_1.default;
181
181
  const GroupHeader_1 = tslib_1.__importStar(require("./components/GroupHeader"));
@@ -0,0 +1,33 @@
1
+ import { WidgetProps } from '../Widget';
2
+ export interface CourseSkeletonProps extends WidgetProps {
3
+ /**
4
+ * Overrides or extends the styles applied to the component.
5
+ * @default null
6
+ */
7
+ className?: string;
8
+ }
9
+ /**
10
+ * > API documentation for the Community-JS Course Placeholder component. Learn about the available props and the CSS API.
11
+
12
+ #### Import
13
+
14
+ ```jsx
15
+ import {CourseCreatePlaceholder} from '@selfcommunity/react-ui';
16
+ ```
17
+
18
+ #### Component Name
19
+
20
+ The name `SCCourse-placeholder-root` can be used when providing style overrides in the theme.
21
+
22
+ #### CSS
23
+
24
+ |Rule Name|Global class|Description|
25
+ |---|---|---|
26
+ |root|.SCCourse-create-placeholder-root|Styles applied to the root element.|
27
+ |imageWrapper|.SCCourse-create-placeholder-image|Styles applied to the image wrapper section.|
28
+ |image|.SCCourse-create-placeholder-image|Styles applied to the image element.|
29
+ |icon|.SCCourse-create-placeholder-icon|Styles applied to the course icon element.|
30
+ |actions|.SCCourse-create-placeholder-actions|Styles applied to action section.|
31
+ *
32
+ */
33
+ export default function CourseCreatePlaceholder(inProps: CourseSkeletonProps): JSX.Element;
@@ -0,0 +1,56 @@
1
+ import { __rest } from "tslib";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import { Box, CardActions, CardMedia, Icon } from '@mui/material';
4
+ import { styled } from '@mui/material/styles';
5
+ import { useThemeProps } from '@mui/system';
6
+ import classNames from 'classnames';
7
+ import Widget from '../Widget';
8
+ import { PREFIX } from './constants';
9
+ import { SCPreferences, useSCPreferences } from '@selfcommunity/react-core';
10
+ import CreateCourseButton from '../CreateCourseButton';
11
+ const classes = {
12
+ root: `${PREFIX}-create-placeholder-root`,
13
+ imageWrapper: `${PREFIX}-create-placeholder-image-wrapper`,
14
+ image: `${PREFIX}-create-placeholder-image`,
15
+ icon: `${PREFIX}-create-placeholder-icon`,
16
+ actions: `${PREFIX}-create-placeholder-actions`
17
+ };
18
+ const Root = styled(Widget, {
19
+ name: PREFIX,
20
+ slot: 'CreatePlaceholderRoot'
21
+ })(() => ({}));
22
+ /**
23
+ * > API documentation for the Community-JS Course Placeholder component. Learn about the available props and the CSS API.
24
+
25
+ #### Import
26
+
27
+ ```jsx
28
+ import {CourseCreatePlaceholder} from '@selfcommunity/react-ui';
29
+ ```
30
+
31
+ #### Component Name
32
+
33
+ The name `SCCourse-placeholder-root` can be used when providing style overrides in the theme.
34
+
35
+ #### CSS
36
+
37
+ |Rule Name|Global class|Description|
38
+ |---|---|---|
39
+ |root|.SCCourse-create-placeholder-root|Styles applied to the root element.|
40
+ |imageWrapper|.SCCourse-create-placeholder-image|Styles applied to the image wrapper section.|
41
+ |image|.SCCourse-create-placeholder-image|Styles applied to the image element.|
42
+ |icon|.SCCourse-create-placeholder-icon|Styles applied to the course icon element.|
43
+ |actions|.SCCourse-create-placeholder-actions|Styles applied to action section.|
44
+ *
45
+ */
46
+ export default function CourseCreatePlaceholder(inProps) {
47
+ // PROPS
48
+ const props = useThemeProps({
49
+ props: inProps,
50
+ name: PREFIX
51
+ });
52
+ const { className } = props, rest = __rest(props, ["className"]);
53
+ // HOOK
54
+ const { preferences } = useSCPreferences();
55
+ return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsxs(Box, Object.assign({ position: "relative", className: classes.imageWrapper }, { children: [_jsx(CardMedia, { component: "img", image: `${preferences[SCPreferences.IMAGES_USER_DEFAULT_COVER].value}`, alt: "placeholder image", className: classes.image }), _jsx(Icon, Object.assign({ className: classes.icon, fontSize: "large" }, { children: "courses" }))] })), _jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(CreateCourseButton, {}) }))] })));
56
+ }