@selfcommunity/react-ui 0.10.2-courses.201 → 0.10.2-courses.202
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.
|
@@ -110,6 +110,9 @@ function Course(inProps) {
|
|
|
110
110
|
const { id = `course_object_${props.courseId ? props.courseId : props.course ? props.course.id : ''}`, courseId = null, course = null, className = null, template = course_1.SCCourseTemplateType.PREVIEW, actions, CourseParticipantsButtonComponentProps = {}, CourseSkeletonComponentProps = {}, userProfileSnippet } = props, rest = tslib_1.__rest(props, ["id", "courseId", "course", "className", "template", "actions", "CourseParticipantsButtonComponentProps", "CourseSkeletonComponentProps", "userProfileSnippet"]);
|
|
111
111
|
// STATE
|
|
112
112
|
const { scCourse } = (0, react_core_1.useSCFetchCourse)({ id: courseId, course });
|
|
113
|
+
const theme = (0, material_1.useTheme)();
|
|
114
|
+
const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.between('xs', 'md'));
|
|
115
|
+
const MAX_VISIBLE_CATEGORIES = isMobile ? 3 : 1;
|
|
113
116
|
// CONTEXT
|
|
114
117
|
const scRoutingContext = (0, react_core_1.useSCRouting)();
|
|
115
118
|
const isCourseAdmin = (0, react_1.useMemo)(() => scCourse && (scCourse.join_status === types_1.SCCourseJoinStatusType.CREATOR || scCourse.join_status === types_1.SCCourseJoinStatusType.MANAGER), [scCourse]);
|
|
@@ -160,7 +163,7 @@ function Course(inProps) {
|
|
|
160
163
|
to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
161
164
|
}), { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !((_b = scCourse.created_by) === null || _b === void 0 ? void 0 : _b.community_badge), smaller: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scCourse.name, src: (_c = scCourse.created_by) === null || _c === void 0 ? void 0 : _c.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 }, (!((_d = scCourse.created_by) === null || _d === void 0 ? void 0 : _d.deleted) && {
|
|
162
165
|
to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
163
|
-
}), { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (_e = scCourse.created_by) === null || _e === void 0 ? void 0 : _e.username })) })), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse), className: classes.previewNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: classes.previewName }, { children: scCourse.name })) })), (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}` })] })), (0, jsx_runtime_1.
|
|
166
|
+
}), { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (_e = scCourse.created_by) === null || _e === void 0 ? void 0 : _e.username })) })), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse), className: classes.previewNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: classes.previewName }, { children: scCourse.name })) })), (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}` })] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.previewCategory }, { children: [scCourse.categories.slice(0, MAX_VISIBLE_CATEGORIES).map((category) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", label: category.name }, category.id))), 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: "outlined", size: "small", component: react_core_1.Link, to: scRoutingContext.url(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" }) })) })))] })));
|
|
164
167
|
}
|
|
165
168
|
else {
|
|
166
169
|
contentObj = ((0, jsx_runtime_1.jsx)(SnippetRoot, { ButtonBaseProps: { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse) }, 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 &&
|
|
@@ -222,7 +222,7 @@ function Courses(inProps) {
|
|
|
222
222
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
223
223
|
// @ts-ignore
|
|
224
224
|
button: (chunk) => ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "secondary", variant: "text", onClick: handleScrollUp }, { children: chunk })))
|
|
225
|
-
} }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs:
|
|
225
|
+
} }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 3 }, 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 && ((onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled) && 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, { CreateCourseButtonComponentProps: CreateCourseButtonComponentProps }) }), "placeholder-item"))] }) })) }))) })] }));
|
|
226
226
|
/**
|
|
227
227
|
* Renders root object (if content availability community option is false and user is anonymous, component is hidden)
|
|
228
228
|
*/
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __rest } from "tslib";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
-
import { Avatar, Box, Button, CardActions, CardContent, CardMedia, Chip, Icon, LinearProgress, Typography } from '@mui/material';
|
|
3
|
+
import { Avatar, Box, Button, CardActions, CardContent, CardMedia, Chip, Icon, LinearProgress, Tooltip, Typography, useMediaQuery, useTheme } from '@mui/material';
|
|
4
4
|
import { styled } from '@mui/material/styles';
|
|
5
5
|
import { useThemeProps } from '@mui/system';
|
|
6
6
|
import { Link, SCRoutes, useSCFetchCourse, useSCRouting } from '@selfcommunity/react-core';
|
|
@@ -108,6 +108,9 @@ export default function Course(inProps) {
|
|
|
108
108
|
const { id = `course_object_${props.courseId ? props.courseId : props.course ? props.course.id : ''}`, courseId = null, course = null, className = null, template = SCCourseTemplateType.PREVIEW, actions, CourseParticipantsButtonComponentProps = {}, CourseSkeletonComponentProps = {}, userProfileSnippet } = props, rest = __rest(props, ["id", "courseId", "course", "className", "template", "actions", "CourseParticipantsButtonComponentProps", "CourseSkeletonComponentProps", "userProfileSnippet"]);
|
|
109
109
|
// STATE
|
|
110
110
|
const { scCourse } = useSCFetchCourse({ id: courseId, course });
|
|
111
|
+
const theme = useTheme();
|
|
112
|
+
const isMobile = useMediaQuery(theme.breakpoints.between('xs', 'md'));
|
|
113
|
+
const MAX_VISIBLE_CATEGORIES = isMobile ? 3 : 1;
|
|
111
114
|
// CONTEXT
|
|
112
115
|
const scRoutingContext = useSCRouting();
|
|
113
116
|
const isCourseAdmin = useMemo(() => scCourse && (scCourse.join_status === SCCourseJoinStatusType.CREATOR || scCourse.join_status === SCCourseJoinStatusType.MANAGER), [scCourse]);
|
|
@@ -158,7 +161,7 @@ export default function Course(inProps) {
|
|
|
158
161
|
to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
159
162
|
}), { children: _jsx(UserAvatar, Object.assign({ hide: !((_b = scCourse.created_by) === null || _b === void 0 ? void 0 : _b.community_badge), smaller: true }, { children: _jsx(Avatar, { alt: scCourse.name, src: (_c = scCourse.created_by) === null || _c === void 0 ? void 0 : _c.avatar, className: classes.previewAvatar }) })) }))] })), _jsxs(CardContent, Object.assign({ className: classes.previewContent }, { children: [_jsx(Link, Object.assign({ className: classes.previewCreator }, (!((_d = scCourse.created_by) === null || _d === void 0 ? void 0 : _d.deleted) && {
|
|
160
163
|
to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
|
|
161
|
-
}), { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: (_e = scCourse.created_by) === null || _e === void 0 ? void 0 : _e.username })) })), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, scCourse), className: classes.previewNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h6", className: classes.previewName }, { children: scCourse.name })) })), _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}` })] })),
|
|
164
|
+
}), { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: (_e = scCourse.created_by) === null || _e === void 0 ? void 0 : _e.username })) })), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, scCourse), className: classes.previewNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h6", className: classes.previewName }, { children: scCourse.name })) })), _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}` })] })), _jsxs(Box, Object.assign({ className: classes.previewCategory }, { children: [scCourse.categories.slice(0, MAX_VISIBLE_CATEGORIES).map((category) => (_jsx(Chip, { size: "small", label: category.name }, category.id))), 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: "outlined", size: "small", component: Link, to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.course.see", id: "ui.course.see" }) })) })))] })));
|
|
162
165
|
}
|
|
163
166
|
else {
|
|
164
167
|
contentObj = (_jsx(SnippetRoot, { ButtonBaseProps: { component: Link, to: scRoutingContext.url(SCRoutes.COURSE_ROUTE_NAME, scCourse) }, 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 &&
|
|
@@ -219,7 +219,7 @@ export default function Courses(inProps) {
|
|
|
219
219
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
220
220
|
// @ts-ignore
|
|
221
221
|
button: (chunk) => (_jsx(Button, Object.assign({ color: "secondary", variant: "text", onClick: handleScrollUp }, { children: chunk })))
|
|
222
|
-
} }) })) }, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs:
|
|
222
|
+
} }) })) }, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.courses }, GridContainerComponentProps, { children: _jsxs(_Fragment, { children: [courses.map((course) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.item }, GridItemComponentProps, { children: _jsx(Course, Object.assign({ courseId: course.id }, CourseComponentProps)) }), course.id))), authUserId && ((onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled) && courses.length % 2 !== 0 && (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.itemPlaceholder }, GridItemComponentProps, { children: _jsx(CourseCreatePlaceholder, { CreateCourseButtonComponentProps: CreateCourseButtonComponentProps }) }), "placeholder-item"))] }) })) }))) })] }));
|
|
223
223
|
/**
|
|
224
224
|
* Renders root object (if content availability community option is false and user is anonymous, component is hidden)
|
|
225
225
|
*/
|