@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
108 lines (107 loc) • 5.2 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Icon, IconButton, Stack, styled, Tab, Typography, useMediaQuery, useTheme, useThemeProps } from '@mui/material';
import { PREFIX } from './constants';
import { useCallback, useMemo, useState } from 'react';
import classNames from 'classnames';
import { TabContext, TabList, TabPanel } from '@mui/lab';
import { FormattedMessage } from 'react-intl';
import Lessons from './Lessons';
import Customize from './Customize';
import Users from './Users';
import Options from './Options';
import { SCRoutes, useSCFetchCourse, useSCRouting } from '@selfcommunity/react-core';
import { CourseInfoViewType } from '@selfcommunity/api-services';
import Requests from './Requests';
import { SCCourseEditTabType } from '../../types/course';
import EditCourseSkeleton from './Skeleton';
const classes = {
root: `${PREFIX}-root`,
header: `${PREFIX}-header`,
tabList: `${PREFIX}-tab-list`,
tab: `${PREFIX}-tab`,
tabPanel: `${PREFIX}-tab-panel`,
contrastColor: `${PREFIX}-contrast-color`
};
const TAB_DATA = [
{
label: 'ui.editCourse.tab.lessons',
value: SCCourseEditTabType.LESSONS
},
{
label: 'ui.editCourse.tab.customize',
value: SCCourseEditTabType.CUSTOMIZE
},
{
label: 'ui.editCourse.tab.users',
value: SCCourseEditTabType.USERS
},
{
label: 'ui.editCourse.tab.requests',
value: SCCourseEditTabType.REQUESTS
},
{
label: 'ui.editCourse.tab.options',
value: SCCourseEditTabType.OPTIONS
}
];
const Root = styled(Box, {
name: PREFIX,
slot: 'Root',
overridesResolver: (_props, styles) => styles.root
})(() => ({}));
export default function EditCourse(inProps) {
// PROPS
const props = useThemeProps({
props: inProps,
name: PREFIX
});
const { courseId, course, tab = SCCourseEditTabType.LESSONS, onTabChange, onTabSelect, className } = props, rest = __rest(props, ["courseId", "course", "tab", "onTabChange", "onTabSelect", "className"]);
// STATES
const [tabValue, setTabValue] = useState(tab);
// CONTEXTS
const scRoutingContext = useSCRouting();
// HOOKS
const { scCourse, setSCCourse } = useSCFetchCourse({ id: courseId, course, params: { view: CourseInfoViewType.EDIT } });
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
// HANDLERS
const handleTabChange = 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 = useMemo(() => {
return [
{
value: SCCourseEditTabType.LESSONS,
children: _jsx(Lessons, { course: scCourse, setCourse: setSCCourse, handleTabChange: handleTabChange })
},
{
value: SCCourseEditTabType.CUSTOMIZE,
children: _jsx(Customize, { course: scCourse, setCourse: setSCCourse })
},
{
value: SCCourseEditTabType.USERS,
children: _jsx(Users, { course: scCourse, handleTabChange: handleTabChange })
},
{
value: SCCourseEditTabType.REQUESTS,
children: _jsx(Requests, { course: scCourse, handleTabChange: handleTabChange })
},
{
value: SCCourseEditTabType.OPTIONS,
children: _jsx(Options, { course: scCourse, setCourse: setSCCourse })
}
];
}, [scCourse, handleTabChange]);
if (!scCourse) {
return _jsx(EditCourseSkeleton, { tab: tab });
}
return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsxs(Stack, Object.assign({ className: classes.header }, { children: [_jsx(IconButton, Object.assign({ href: scRoutingContext.url(SCRoutes.COURSE_DASHBOARD_ROUTE_NAME, scCourse), size: "small" }, { children: _jsx(Icon, Object.assign({ className: classes.contrastColor }, { children: "arrow_back" })) })), _jsx(Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: scCourse.name }))] })), _jsxs(TabContext, Object.assign({ value: tabValue }, { children: [_jsx(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) => (_jsx(Tab, { label: _jsx(Typography, Object.assign({ variant: "h6" }, { children: _jsx(FormattedMessage, { id: data.label, defaultMessage: data.label }) })), value: data.value, className: classNames(classes.tab, classes.contrastColor) }, i))) })), panelData.map((data, i) => (_jsx(TabPanel, Object.assign({ className: classes.tabPanel, value: data.value }, { children: data.children }), i)))] }))] })));
}