@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
111 lines (110 loc) • 6.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const constants_1 = require("./constants");
const react_1 = require("react");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const lab_1 = require("@mui/lab");
const react_intl_1 = require("react-intl");
const Lessons_1 = tslib_1.__importDefault(require("./Lessons"));
const Customize_1 = tslib_1.__importDefault(require("./Customize"));
const Users_1 = tslib_1.__importDefault(require("./Users"));
const Options_1 = tslib_1.__importDefault(require("./Options"));
const react_core_1 = require("@selfcommunity/react-core");
const api_services_1 = require("@selfcommunity/api-services");
const Requests_1 = tslib_1.__importDefault(require("./Requests"));
const course_1 = require("../../types/course");
const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
const classes = {
root: `${constants_1.PREFIX}-root`,
header: `${constants_1.PREFIX}-header`,
tabList: `${constants_1.PREFIX}-tab-list`,
tab: `${constants_1.PREFIX}-tab`,
tabPanel: `${constants_1.PREFIX}-tab-panel`,
contrastColor: `${constants_1.PREFIX}-contrast-color`
};
const TAB_DATA = [
{
label: 'ui.editCourse.tab.lessons',
value: course_1.SCCourseEditTabType.LESSONS
},
{
label: 'ui.editCourse.tab.customize',
value: course_1.SCCourseEditTabType.CUSTOMIZE
},
{
label: 'ui.editCourse.tab.users',
value: course_1.SCCourseEditTabType.USERS
},
{
label: 'ui.editCourse.tab.requests',
value: course_1.SCCourseEditTabType.REQUESTS
},
{
label: 'ui.editCourse.tab.options',
value: course_1.SCCourseEditTabType.OPTIONS
}
];
const Root = (0, material_1.styled)(material_1.Box, {
name: constants_1.PREFIX,
slot: 'Root',
overridesResolver: (_props, styles) => styles.root
})(() => ({}));
function EditCourse(inProps) {
// PROPS
const props = (0, material_1.useThemeProps)({
props: inProps,
name: constants_1.PREFIX
});
const { courseId, course, tab = course_1.SCCourseEditTabType.LESSONS, onTabChange, onTabSelect, className } = props, rest = tslib_1.__rest(props, ["courseId", "course", "tab", "onTabChange", "onTabSelect", "className"]);
// STATES
const [tabValue, setTabValue] = (0, react_1.useState)(tab);
// CONTEXTS
const scRoutingContext = (0, react_core_1.useSCRouting)();
// HOOKS
const { scCourse, setSCCourse } = (0, react_core_1.useSCFetchCourse)({ id: courseId, course, params: { view: api_services_1.CourseInfoViewType.EDIT } });
const theme = (0, material_1.useTheme)();
const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
// HANDLERS
const handleTabChange = (0, react_1.useCallback)((_e, newTabValue) => {
if (onTabSelect) {
onTabSelect(newTabValue);
}
else {
setTabValue(newTabValue);
onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(newTabValue);
}
}, [setTabValue, onTabChange, onTabSelect]);
// MEMOS
const panelData = (0, react_1.useMemo)(() => {
return [
{
value: course_1.SCCourseEditTabType.LESSONS,
children: (0, jsx_runtime_1.jsx)(Lessons_1.default, { course: scCourse, setCourse: setSCCourse, handleTabChange: handleTabChange })
},
{
value: course_1.SCCourseEditTabType.CUSTOMIZE,
children: (0, jsx_runtime_1.jsx)(Customize_1.default, { course: scCourse, setCourse: setSCCourse })
},
{
value: course_1.SCCourseEditTabType.USERS,
children: (0, jsx_runtime_1.jsx)(Users_1.default, { course: scCourse, handleTabChange: handleTabChange })
},
{
value: course_1.SCCourseEditTabType.REQUESTS,
children: (0, jsx_runtime_1.jsx)(Requests_1.default, { course: scCourse, handleTabChange: handleTabChange })
},
{
value: course_1.SCCourseEditTabType.OPTIONS,
children: (0, jsx_runtime_1.jsx)(Options_1.default, { course: scCourse, setCourse: setSCCourse })
}
];
}, [scCourse, handleTabChange]);
if (!scCourse) {
return (0, jsx_runtime_1.jsx)(Skeleton_1.default, { tab: tab });
}
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.Stack, Object.assign({ className: classes.header }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ href: scRoutingContext.url(react_core_1.SCRoutes.COURSE_DASHBOARD_ROUTE_NAME, scCourse), size: "small" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.contrastColor }, { children: "arrow_back" })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: scCourse.name }))] })), (0, jsx_runtime_1.jsxs)(lab_1.TabContext, Object.assign({ value: tabValue }, { children: [(0, jsx_runtime_1.jsx)(lab_1.TabList, Object.assign({ className: classes.tabList, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: isMobile ? 'scrollable' : 'standard', scrollButtons: isMobile, centered: !isMobile }, { children: TAB_DATA.map((data, i) => ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: data.label, defaultMessage: data.label }) })), value: data.value, className: (0, classnames_1.default)(classes.tab, classes.contrastColor) }, i))) })), panelData.map((data, i) => ((0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ className: classes.tabPanel, value: data.value }, { children: data.children }), i)))] }))] })));
}
exports.default = EditCourse;