@selfcommunity/react-ui 1.2.5 → 1.2.6-alpha.3
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/Course/Course.d.ts +2 -2
- package/lib/cjs/components/Course/Course.js +10 -10
- package/lib/cjs/shared/Media/File/DocComponent.js +1 -2
- package/lib/cjs/shared/Media/Link/PreviewComponent.js +4 -1
- package/lib/esm/components/Course/Course.d.ts +2 -2
- package/lib/esm/components/Course/Course.js +10 -10
- package/lib/esm/shared/Media/File/DocComponent.js +1 -2
- package/lib/esm/shared/Media/Link/PreviewComponent.js +4 -1
- package/lib/umd/484.js +1 -1
- package/lib/umd/484.js.LICENSE.txt +1 -1
- package/lib/umd/react-ui.js +1 -1
- package/package.json +8 -8
|
@@ -8,12 +8,12 @@ import { CacheStrategies } from '@selfcommunity/utils';
|
|
|
8
8
|
export interface CourseProps extends WidgetProps {
|
|
9
9
|
/**
|
|
10
10
|
* Course Object
|
|
11
|
-
* @default
|
|
11
|
+
* @default undefined
|
|
12
12
|
*/
|
|
13
13
|
course?: SCCourseType;
|
|
14
14
|
/**
|
|
15
15
|
* Id of the course for filter the feed
|
|
16
|
-
* @default
|
|
16
|
+
* @default undefined
|
|
17
17
|
*/
|
|
18
18
|
courseId?: number;
|
|
19
19
|
/**
|
|
@@ -101,13 +101,13 @@ const SnippetRoot = (0, material_1.styled)(BaseItemButton_1.default, {
|
|
|
101
101
|
* @param inProps
|
|
102
102
|
*/
|
|
103
103
|
function Course(inProps) {
|
|
104
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
104
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
|
105
105
|
// PROPS
|
|
106
106
|
const props = (0, system_1.useThemeProps)({
|
|
107
107
|
props: inProps,
|
|
108
108
|
name: constants_1.PREFIX
|
|
109
109
|
});
|
|
110
|
-
const { id = `course_object_${props.courseId ? props.courseId : props.course ? props.course.id : ''}`, courseId =
|
|
110
|
+
const { id = `course_object_${props.courseId ? props.courseId : props.course ? props.course.id : ''}`, courseId = undefined, course = undefined, className = null, template = course_1.SCCourseTemplateType.PREVIEW, actions, CourseParticipantsButtonComponentProps = {}, CourseSkeletonComponentProps = {}, cacheStrategy, userProfileSnippet } = props, rest = tslib_1.__rest(props, ["id", "courseId", "course", "className", "template", "actions", "CourseParticipantsButtonComponentProps", "CourseSkeletonComponentProps", "cacheStrategy", "userProfileSnippet"]);
|
|
111
111
|
// STATE
|
|
112
112
|
const { scCourse } = (0, react_core_1.useSCFetchCourse)(Object.assign({ id: courseId, course }, (cacheStrategy && { cacheStrategy })));
|
|
113
113
|
const theme = (0, material_1.useTheme)();
|
|
@@ -129,7 +129,7 @@ function Course(inProps) {
|
|
|
129
129
|
return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.previewCompletedStatus }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "success" }, { children: "circle_checked" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.course.completed", id: "ui.course.completed" }) }))] })));
|
|
130
130
|
}
|
|
131
131
|
else if (scCourse.join_status === types_1.SCCourseJoinStatusType.JOINED) {
|
|
132
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.completion.percentage", defaultMessage: "ui.course.completion.percentage", values: { percentage: `${Math.round(scCourse.user_completion_rate)}%` } }) }), (0, jsx_runtime_1.jsx)(material_1.LinearProgress, { className: classes.previewProgressBar, variant: "determinate", color: "primary", value: scCourse.user_completion_rate })] }));
|
|
132
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.completion.percentage", defaultMessage: "ui.course.completion.percentage", values: { percentage: `${Math.round(scCourse.user_completion_rate || 0)}%` } }) }), (0, jsx_runtime_1.jsx)(material_1.LinearProgress, { className: classes.previewProgressBar, variant: "determinate", color: "primary", value: scCourse.user_completion_rate })] }));
|
|
133
133
|
}
|
|
134
134
|
else if (isCourseAdmin) {
|
|
135
135
|
return (0, jsx_runtime_1.jsx)(CourseParticipantsButton_1.default, Object.assign({ course: scCourse }, CourseParticipantsButtonComponentProps));
|
|
@@ -162,10 +162,10 @@ function Course(inProps) {
|
|
|
162
162
|
: scCourse.join_status === types_1.SCCourseJoinStatusType.JOINED
|
|
163
163
|
? 'warning'
|
|
164
164
|
: 'secondary', label: chipLabel, className: classes.chip })), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!((_a = scCourse.created_by) === null || _a === void 0 ? void 0 : _a.deleted) && {
|
|
165
|
-
to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
166
|
-
}), { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !((
|
|
167
|
-
to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
168
|
-
}), { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (
|
|
165
|
+
to: (_b = scRoutingContext.url) === null || _b === void 0 ? void 0 : _b.call(scRoutingContext, react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
166
|
+
}), { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !((_c = scCourse.created_by) === null || _c === void 0 ? void 0 : _c.community_badge), smaller: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scCourse.name, src: (_d = scCourse.created_by) === null || _d === void 0 ? void 0 : _d.avatar, className: classes.previewAvatar }) })) }))] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.previewContent }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ className: classes.previewCreator }, (!((_e = scCourse.created_by) === null || _e === void 0 ? void 0 : _e.deleted) && {
|
|
167
|
+
to: (_f = scRoutingContext.url) === null || _f === void 0 ? void 0 : _f.call(scRoutingContext, react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
168
|
+
}), { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (_g = scCourse.created_by) === null || _g === void 0 ? void 0 : _g.username })) })), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: (_h = scRoutingContext.url) === null || _h === void 0 ? void 0 : _h.call(scRoutingContext, react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse), className: classes.previewNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "h2", variant: "h6", className: classes.previewName, title: scCourse.name }, { children: scCourse.name })) })), (0, jsx_runtime_1.jsx)(material_1.Stack, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.previewInfo }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft', defaultMessage: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft' }), ' - ', (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.course.type.${scCourse.type}`, defaultMessage: `ui.course.type.${scCourse.type}` }), isPaymentsEnabled && ((_j = scCourse.paywalls) === null || _j === void 0 ? void 0 : _j.length) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["\u00A0", (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "pagamenti" })] }))] })) }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.previewCategory }, { children: [(_k = scCourse.categories) === null || _k === void 0 ? void 0 : _k.slice(0, MAX_VISIBLE_CATEGORIES).map((category) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", label: category.name }, category.id))), scCourse.categories && scCourse.categories.length > MAX_VISIBLE_CATEGORIES && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: scCourse.categories.slice(MAX_VISIBLE_CATEGORIES).map((cat) => ((0, jsx_runtime_1.jsx)(material_1.Box, { children: cat.name }, cat.id))) }) }, { children: (0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", label: `+${scCourse.categories.length - MAX_VISIBLE_CATEGORIES}`, sx: { cursor: 'pointer' } }) })))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.previewProgress }, { children: renderProgress() }))] })), actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.previewActions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", size: "small", component: react_core_1.Link, to: (_l = scRoutingContext.url) === null || _l === void 0 ? void 0 : _l.call(scRoutingContext, react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.course.see", id: "ui.course.see" }) })) })))] })));
|
|
169
169
|
}
|
|
170
170
|
else {
|
|
171
171
|
contentObj = ((0, jsx_runtime_1.jsx)(SnippetRoot, { elevation: 0, className: classes.snippetRoot, image: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.snippetImage }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "square", alt: scCourse.name, src: scCourse.image_medium, className: userProfileSnippet ? classes.snippetAvatarUserProfile : classes.snippetAvatar }), !userProfileSnippet &&
|
|
@@ -175,9 +175,9 @@ function Course(inProps) {
|
|
|
175
175
|
? 'default'
|
|
176
176
|
: scCourse.join_status === types_1.SCCourseJoinStatusType.JOINED
|
|
177
177
|
? 'warning'
|
|
178
|
-
: 'secondary', label: chipLabel, className: classes.chip }))] })), primary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!userProfileSnippet && ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!((
|
|
179
|
-
to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
180
|
-
}), { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: (
|
|
178
|
+
: 'secondary', label: chipLabel, className: classes.chip }))] })), primary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!userProfileSnippet && ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!((_m = scCourse.created_by) === null || _m === void 0 ? void 0 : _m.deleted) && {
|
|
179
|
+
to: (_o = scRoutingContext.url) === null || _o === void 0 ? void 0 : _o.call(scRoutingContext, react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
180
|
+
}), { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: (_p = scCourse.created_by) === null || _p === void 0 ? void 0 : _p.username })) }))), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: (_q = scRoutingContext.url) === null || _q === void 0 ? void 0 : _q.call(scRoutingContext, react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: scCourse.name })) }))] }), secondary: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: userProfileSnippet ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !scCourse.hide_member_count && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.userProfileSnippet.students", defaultMessage: "ui.course.userProfileSnippet.students", values: { students: scCourse.member_count } })) })) : ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.snippetPrivacy }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft', defaultMessage: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft' }), ' - ', (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.course.type.${scCourse.type}`, defaultMessage: `ui.course.type.${scCourse.type}` }), isPaymentsEnabled && ((_r = scCourse.paywalls) === null || _r === void 0 ? void 0 : _r.length) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["\u00A0", (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "inherit" }, { children: "pagamenti" }))] }))] }))) }), actions: actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", component: react_core_1.Link, to: (_s = scRoutingContext.url) === null || _s === void 0 ? void 0 : _s.call(scRoutingContext, react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.course.see", id: "ui.course.see" }) }))) }));
|
|
181
181
|
}
|
|
182
182
|
/**
|
|
183
183
|
* Renders root object
|
|
@@ -21,7 +21,6 @@ const classes = {
|
|
|
21
21
|
title: `${constants_1.PREFIX}-title`,
|
|
22
22
|
subtitle: `${constants_1.PREFIX}-subtitle`,
|
|
23
23
|
actionWrapper: `${constants_1.PREFIX}-action-wrapper`,
|
|
24
|
-
action: `${constants_1.PREFIX}-action`,
|
|
25
24
|
contrastColor: `${constants_1.PREFIX}-contrast-color`
|
|
26
25
|
};
|
|
27
26
|
const Root = (0, material_1.styled)(material_1.Stack, {
|
|
@@ -73,6 +72,6 @@ function DocComponent(props) {
|
|
|
73
72
|
return fallback_1.default;
|
|
74
73
|
}
|
|
75
74
|
}, [document.mimetype]);
|
|
76
|
-
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.docRoot, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { component: "img", alt: document.title, src: getImage() }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.textWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.title, classes.contrastColor) }, { children: document.title })), document.size && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.subtitle, classes.contrastColor) }, { children: formatBytes(document.size) }))] })), (handleDownload || onDelete) && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actionWrapper }, { children: [onDelete && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({
|
|
75
|
+
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.docRoot, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { component: "img", alt: document.title, src: getImage() }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.textWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.title, classes.contrastColor) }, { children: document.title })), document.size && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.subtitle, classes.contrastColor) }, { children: formatBytes(document.size) }))] })), (handleDownload || onDelete) && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actionWrapper }, { children: [onDelete && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => onDelete(document.id) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete" }) }))), handleDownload && index && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [document.mimetype === types_1.SCMimeTypes.PDF && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ component: react_core_1.Link, to: document.url, target: "_blank", onClick: () => onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(document) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "visibility" }) }))), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleDownload(index) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "download" }) }))] }))] })))] })));
|
|
77
76
|
}
|
|
78
77
|
exports.default = DocComponent;
|
|
@@ -30,6 +30,9 @@ const PreviewComponent = react_1.default.forwardRef((props, ref) => {
|
|
|
30
30
|
onChange && onChange([...value.filter((media) => medias.findIndex((m) => m.id === media.id) === -1), ...medias]);
|
|
31
31
|
}, [onChange, value]);
|
|
32
32
|
const handleDelete = (0, react_1.useCallback)((id) => () => onChange && onChange(value.filter((media) => media.id !== id)), [onChange, value]);
|
|
33
|
-
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.previewRoot) }, rest, { children: medias.length > 0 && ((0, jsx_runtime_1.jsx)(react_sortablejs_1.ReactSortable, Object.assign({ list: medias, setList: handleSort }, { children: medias.map((media) =>
|
|
33
|
+
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.previewRoot) }, rest, { children: medias.length > 0 && ((0, jsx_runtime_1.jsx)(react_sortablejs_1.ReactSortable, Object.assign({ list: medias, setList: handleSort }, { children: medias.map((media) => {
|
|
34
|
+
var _a;
|
|
35
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: (0, classnames_1.default)(classes.media, { [classes.video]: ((_a = media.embed) === null || _a === void 0 ? void 0 : _a.metadata) && media.embed.metadata.type === Media_1.MEDIA_TYPE_VIDEO }) }, { children: [(0, jsx_runtime_1.jsx)(DisplayComponent_1.default, { medias: [media] }), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.delete, onClick: handleDelete(media.id), size: "small" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete" }) }))] }), media.id));
|
|
36
|
+
}) }))) })));
|
|
34
37
|
});
|
|
35
38
|
exports.default = PreviewComponent;
|
|
@@ -8,12 +8,12 @@ import { CacheStrategies } from '@selfcommunity/utils';
|
|
|
8
8
|
export interface CourseProps extends WidgetProps {
|
|
9
9
|
/**
|
|
10
10
|
* Course Object
|
|
11
|
-
* @default
|
|
11
|
+
* @default undefined
|
|
12
12
|
*/
|
|
13
13
|
course?: SCCourseType;
|
|
14
14
|
/**
|
|
15
15
|
* Id of the course for filter the feed
|
|
16
|
-
* @default
|
|
16
|
+
* @default undefined
|
|
17
17
|
*/
|
|
18
18
|
courseId?: number;
|
|
19
19
|
/**
|
|
@@ -99,13 +99,13 @@ const SnippetRoot = styled(BaseItemButton, {
|
|
|
99
99
|
* @param inProps
|
|
100
100
|
*/
|
|
101
101
|
export default function Course(inProps) {
|
|
102
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
102
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
|
103
103
|
// PROPS
|
|
104
104
|
const props = useThemeProps({
|
|
105
105
|
props: inProps,
|
|
106
106
|
name: PREFIX
|
|
107
107
|
});
|
|
108
|
-
const { id = `course_object_${props.courseId ? props.courseId : props.course ? props.course.id : ''}`, courseId =
|
|
108
|
+
const { id = `course_object_${props.courseId ? props.courseId : props.course ? props.course.id : ''}`, courseId = undefined, course = undefined, className = null, template = SCCourseTemplateType.PREVIEW, actions, CourseParticipantsButtonComponentProps = {}, CourseSkeletonComponentProps = {}, cacheStrategy, userProfileSnippet } = props, rest = __rest(props, ["id", "courseId", "course", "className", "template", "actions", "CourseParticipantsButtonComponentProps", "CourseSkeletonComponentProps", "cacheStrategy", "userProfileSnippet"]);
|
|
109
109
|
// STATE
|
|
110
110
|
const { scCourse } = useSCFetchCourse(Object.assign({ id: courseId, course }, (cacheStrategy && { cacheStrategy })));
|
|
111
111
|
const theme = useTheme();
|
|
@@ -127,7 +127,7 @@ export default function Course(inProps) {
|
|
|
127
127
|
return (_jsxs(Box, Object.assign({ className: classes.previewCompletedStatus }, { children: [_jsx(Icon, Object.assign({ color: "success" }, { children: "circle_checked" })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.course.completed", id: "ui.course.completed" }) }))] })));
|
|
128
128
|
}
|
|
129
129
|
else if (scCourse.join_status === SCCourseJoinStatusType.JOINED) {
|
|
130
|
-
return (_jsxs(_Fragment, { children: [_jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.course.completion.percentage", defaultMessage: "ui.course.completion.percentage", values: { percentage: `${Math.round(scCourse.user_completion_rate)}%` } }) }), _jsx(LinearProgress, { className: classes.previewProgressBar, variant: "determinate", color: "primary", value: scCourse.user_completion_rate })] }));
|
|
130
|
+
return (_jsxs(_Fragment, { children: [_jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.course.completion.percentage", defaultMessage: "ui.course.completion.percentage", values: { percentage: `${Math.round(scCourse.user_completion_rate || 0)}%` } }) }), _jsx(LinearProgress, { className: classes.previewProgressBar, variant: "determinate", color: "primary", value: scCourse.user_completion_rate })] }));
|
|
131
131
|
}
|
|
132
132
|
else if (isCourseAdmin) {
|
|
133
133
|
return _jsx(CourseParticipantsButton, Object.assign({ course: scCourse }, CourseParticipantsButtonComponentProps));
|
|
@@ -160,10 +160,10 @@ export default function Course(inProps) {
|
|
|
160
160
|
: scCourse.join_status === SCCourseJoinStatusType.JOINED
|
|
161
161
|
? 'warning'
|
|
162
162
|
: 'secondary', label: chipLabel, className: classes.chip })), _jsx(Link, Object.assign({}, (!((_a = scCourse.created_by) === null || _a === void 0 ? void 0 : _a.deleted) && {
|
|
163
|
-
to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
164
|
-
}), { children: _jsx(UserAvatar, Object.assign({ hide: !((
|
|
165
|
-
to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
166
|
-
}), { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: (
|
|
163
|
+
to: (_b = scRoutingContext.url) === null || _b === void 0 ? void 0 : _b.call(scRoutingContext, SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
164
|
+
}), { children: _jsx(UserAvatar, Object.assign({ hide: !((_c = scCourse.created_by) === null || _c === void 0 ? void 0 : _c.community_badge), smaller: true }, { children: _jsx(Avatar, { alt: scCourse.name, src: (_d = scCourse.created_by) === null || _d === void 0 ? void 0 : _d.avatar, className: classes.previewAvatar }) })) }))] })), _jsxs(CardContent, Object.assign({ className: classes.previewContent }, { children: [_jsx(Link, Object.assign({ className: classes.previewCreator }, (!((_e = scCourse.created_by) === null || _e === void 0 ? void 0 : _e.deleted) && {
|
|
165
|
+
to: (_f = scRoutingContext.url) === null || _f === void 0 ? void 0 : _f.call(scRoutingContext, SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
166
|
+
}), { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: (_g = scCourse.created_by) === null || _g === void 0 ? void 0 : _g.username })) })), _jsx(Link, Object.assign({ to: (_h = scRoutingContext.url) === null || _h === void 0 ? void 0 : _h.call(scRoutingContext, SCRoutes.COURSE_ROUTE_NAME, scCourse), className: classes.previewNameWrapper }, { children: _jsx(Typography, Object.assign({ component: "h2", variant: "h6", className: classes.previewName, title: scCourse.name }, { children: scCourse.name })) })), _jsx(Stack, { children: _jsxs(Typography, Object.assign({ className: classes.previewInfo }, { children: [_jsx(FormattedMessage, { id: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft', defaultMessage: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft' }), ' - ', _jsx(FormattedMessage, { id: `ui.course.type.${scCourse.type}`, defaultMessage: `ui.course.type.${scCourse.type}` }), isPaymentsEnabled && ((_j = scCourse.paywalls) === null || _j === void 0 ? void 0 : _j.length) && (_jsxs(_Fragment, { children: ["\u00A0", _jsx(Icon, { children: "pagamenti" })] }))] })) }), _jsxs(Box, Object.assign({ className: classes.previewCategory }, { children: [(_k = scCourse.categories) === null || _k === void 0 ? void 0 : _k.slice(0, MAX_VISIBLE_CATEGORIES).map((category) => (_jsx(Chip, { size: "small", label: category.name }, category.id))), scCourse.categories && scCourse.categories.length > MAX_VISIBLE_CATEGORIES && (_jsx(Tooltip, Object.assign({ title: _jsx(_Fragment, { children: scCourse.categories.slice(MAX_VISIBLE_CATEGORIES).map((cat) => (_jsx(Box, { children: cat.name }, cat.id))) }) }, { children: _jsx(Chip, { size: "small", label: `+${scCourse.categories.length - MAX_VISIBLE_CATEGORIES}`, sx: { cursor: 'pointer' } }) })))] })), _jsx(Box, Object.assign({ className: classes.previewProgress }, { children: renderProgress() }))] })), actions !== null && actions !== void 0 ? actions : (_jsx(CardActions, Object.assign({ className: classes.previewActions }, { children: _jsx(Button, Object.assign({ variant: "contained", size: "small", component: Link, to: (_l = scRoutingContext.url) === null || _l === void 0 ? void 0 : _l.call(scRoutingContext, SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.course.see", id: "ui.course.see" }) })) })))] })));
|
|
167
167
|
}
|
|
168
168
|
else {
|
|
169
169
|
contentObj = (_jsx(SnippetRoot, { elevation: 0, className: classes.snippetRoot, image: _jsxs(Box, Object.assign({ className: classes.snippetImage }, { children: [_jsx(Avatar, { variant: "square", alt: scCourse.name, src: scCourse.image_medium, className: userProfileSnippet ? classes.snippetAvatarUserProfile : classes.snippetAvatar }), !userProfileSnippet &&
|
|
@@ -173,9 +173,9 @@ export default function Course(inProps) {
|
|
|
173
173
|
? 'default'
|
|
174
174
|
: scCourse.join_status === SCCourseJoinStatusType.JOINED
|
|
175
175
|
? 'warning'
|
|
176
|
-
: 'secondary', label: chipLabel, className: classes.chip }))] })), primary: _jsxs(_Fragment, { children: [!userProfileSnippet && (_jsx(Link, Object.assign({}, (!((
|
|
177
|
-
to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
178
|
-
}), { children: _jsx(Typography, Object.assign({ component: "span" }, { children: (
|
|
176
|
+
: 'secondary', label: chipLabel, className: classes.chip }))] })), primary: _jsxs(_Fragment, { children: [!userProfileSnippet && (_jsx(Link, Object.assign({}, (!((_m = scCourse.created_by) === null || _m === void 0 ? void 0 : _m.deleted) && {
|
|
177
|
+
to: (_o = scRoutingContext.url) === null || _o === void 0 ? void 0 : _o.call(scRoutingContext, SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
178
|
+
}), { children: _jsx(Typography, Object.assign({ component: "span" }, { children: (_p = scCourse.created_by) === null || _p === void 0 ? void 0 : _p.username })) }))), _jsx(Link, Object.assign({ to: (_q = scRoutingContext.url) === null || _q === void 0 ? void 0 : _q.call(scRoutingContext, SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: scCourse.name })) }))] }), secondary: _jsx(_Fragment, { children: userProfileSnippet ? (_jsx(_Fragment, { children: !scCourse.hide_member_count && (_jsx(FormattedMessage, { id: "ui.course.userProfileSnippet.students", defaultMessage: "ui.course.userProfileSnippet.students", values: { students: scCourse.member_count } })) })) : (_jsxs(Stack, Object.assign({ className: classes.snippetPrivacy }, { children: [_jsx(FormattedMessage, { id: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft', defaultMessage: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft' }), ' - ', _jsx(FormattedMessage, { id: `ui.course.type.${scCourse.type}`, defaultMessage: `ui.course.type.${scCourse.type}` }), isPaymentsEnabled && ((_r = scCourse.paywalls) === null || _r === void 0 ? void 0 : _r.length) && (_jsxs(_Fragment, { children: ["\u00A0", _jsx(Icon, Object.assign({ fontSize: "inherit" }, { children: "pagamenti" }))] }))] }))) }), actions: actions !== null && actions !== void 0 ? actions : (_jsx(Button, Object.assign({ size: "small", variant: "contained", component: Link, to: (_s = scRoutingContext.url) === null || _s === void 0 ? void 0 : _s.call(scRoutingContext, SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.course.see", id: "ui.course.see" }) }))) }));
|
|
179
179
|
}
|
|
180
180
|
/**
|
|
181
181
|
* Renders root object
|
|
@@ -18,7 +18,6 @@ const classes = {
|
|
|
18
18
|
title: `${PREFIX}-title`,
|
|
19
19
|
subtitle: `${PREFIX}-subtitle`,
|
|
20
20
|
actionWrapper: `${PREFIX}-action-wrapper`,
|
|
21
|
-
action: `${PREFIX}-action`,
|
|
22
21
|
contrastColor: `${PREFIX}-contrast-color`
|
|
23
22
|
};
|
|
24
23
|
const Root = styled(Stack, {
|
|
@@ -70,5 +69,5 @@ export default function DocComponent(props) {
|
|
|
70
69
|
return fallback;
|
|
71
70
|
}
|
|
72
71
|
}, [document.mimetype]);
|
|
73
|
-
return (_jsxs(Root, Object.assign({ className: classNames(classes.docRoot, className) }, { children: [_jsx(Box, { component: "img", alt: document.title, src: getImage() }), _jsxs(Stack, Object.assign({ className: classes.textWrapper }, { children: [_jsx(Typography, Object.assign({ className: classNames(classes.title, classes.contrastColor) }, { children: document.title })), document.size && _jsx(Typography, Object.assign({ className: classNames(classes.subtitle, classes.contrastColor) }, { children: formatBytes(document.size) }))] })), (handleDownload || onDelete) && (_jsxs(Stack, Object.assign({ className: classes.actionWrapper }, { children: [onDelete && (_jsx(IconButton, Object.assign({
|
|
72
|
+
return (_jsxs(Root, Object.assign({ className: classNames(classes.docRoot, className) }, { children: [_jsx(Box, { component: "img", alt: document.title, src: getImage() }), _jsxs(Stack, Object.assign({ className: classes.textWrapper }, { children: [_jsx(Typography, Object.assign({ className: classNames(classes.title, classes.contrastColor) }, { children: document.title })), document.size && _jsx(Typography, Object.assign({ className: classNames(classes.subtitle, classes.contrastColor) }, { children: formatBytes(document.size) }))] })), (handleDownload || onDelete) && (_jsxs(Stack, Object.assign({ className: classes.actionWrapper }, { children: [onDelete && (_jsx(IconButton, Object.assign({ onClick: () => onDelete(document.id) }, { children: _jsx(Icon, { children: "delete" }) }))), handleDownload && index && (_jsxs(_Fragment, { children: [document.mimetype === SCMimeTypes.PDF && (_jsx(IconButton, Object.assign({ component: Link, to: document.url, target: "_blank", onClick: () => onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(document) }, { children: _jsx(Icon, { children: "visibility" }) }))), _jsx(IconButton, Object.assign({ onClick: () => handleDownload(index) }, { children: _jsx(Icon, { children: "download" }) }))] }))] })))] })));
|
|
74
73
|
}
|
|
@@ -28,6 +28,9 @@ const PreviewComponent = React.forwardRef((props, ref) => {
|
|
|
28
28
|
onChange && onChange([...value.filter((media) => medias.findIndex((m) => m.id === media.id) === -1), ...medias]);
|
|
29
29
|
}, [onChange, value]);
|
|
30
30
|
const handleDelete = useCallback((id) => () => onChange && onChange(value.filter((media) => media.id !== id)), [onChange, value]);
|
|
31
|
-
return (_jsx(Root, Object.assign({ ref: ref, className: classNames(className, classes.previewRoot) }, rest, { children: medias.length > 0 && (_jsx(ReactSortable, Object.assign({ list: medias, setList: handleSort }, { children: medias.map((media) =>
|
|
31
|
+
return (_jsx(Root, Object.assign({ ref: ref, className: classNames(className, classes.previewRoot) }, rest, { children: medias.length > 0 && (_jsx(ReactSortable, Object.assign({ list: medias, setList: handleSort }, { children: medias.map((media) => {
|
|
32
|
+
var _a;
|
|
33
|
+
return (_jsxs(Box, Object.assign({ className: classNames(classes.media, { [classes.video]: ((_a = media.embed) === null || _a === void 0 ? void 0 : _a.metadata) && media.embed.metadata.type === MEDIA_TYPE_VIDEO }) }, { children: [_jsx(DisplayComponent, { medias: [media] }), _jsx(IconButton, Object.assign({ className: classes.delete, onClick: handleDelete(media.id), size: "small" }, { children: _jsx(Icon, { children: "delete" }) }))] }), media.id));
|
|
34
|
+
}) }))) })));
|
|
32
35
|
});
|
|
33
36
|
export default PreviewComponent;
|