@selfcommunity/react-ui 0.10.2-courses.126 → 0.10.2-courses.128

package/lib/cjs/components/CourseDashboard/Header.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { SCCourseType } from '@selfcommunity/types';
 interface HeaderCourseDashboardProps {
-    course: SCCourseType | null;
+    course: SCCourseType;
     hasAction?: boolean;
 }
 declare function HeaderCourseDashboard(props: HeaderCourseDashboardProps): JSX.Element;

package/lib/cjs/components/CourseDashboard/Header.js

@@ -7,6 +7,7 @@ const react_intl_1 = require("react-intl");
 const constants_1 = require("./constants");
 const react_1 = require("react");
 const react_core_1 = require("@selfcommunity/react-core");
+const types_2 = require("../../types");
 const classes = {
     header: `${constants_1.PREFIX}-header`,
     img: `${constants_1.PREFIX}-header-img`,
@@ -14,6 +15,13 @@ const classes = {
     innerWrapper: `${constants_1.PREFIX}-header-inner-wrapper`,
     iconWrapper: `${constants_1.PREFIX}-header-icon-wrapper`
 };
+function getUrlEditDashboard(course) {
+    return {
+        id: course.id,
+        slug: course.slug,
+        tab: types_2.SCCourseEditTabType.LESSONS
+    };
+}
 function HeaderCourseDashboard(props) {
     // PROPS
     const { course, hasAction = false } = props;
@@ -22,7 +30,7 @@ function HeaderCourseDashboard(props) {
     // HOOKS
     const intl = (0, react_intl_1.useIntl)();
     const iconData = (0, react_1.useMemo)(() => {
-        const underId = (course === null || course === void 0 ? void 0 : course.privacy) === types_1.SCCoursePrivacyType.DRAFT ? 'draft' : course === null || course === void 0 ? void 0 : course.privacy;
+        const underId = course.privacy === types_1.SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy;
         return [
             {
                 id: 'ui.course.label',
@@ -34,7 +42,7 @@ function HeaderCourseDashboard(props) {
                 id: 'ui.course.type',
                 icon: 'courses',
                 key: 'typeOfCourse',
-                underId: `ui.course.type.${course === null || course === void 0 ? void 0 : course.type}`
+                underId: `ui.course.type.${course.type}`
             }
         ];
     }, [course]);
@@ -43,6 +51,6 @@ function HeaderCourseDashboard(props) {
                                                 id: data.underId,
                                                 defaultMessage: data.underId
                                             })
-                                        } }) }))] }), i))) })), hasAction && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_EDIT_ROUTE_NAME, course), size: "small", color: "primary", variant: "contained" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.btn.label", defaultMessage: "ui.course.dashboard.teacher.btn.label" }) })) })))] }))] })));
+                                        } }) }))] }), i))) })), hasAction && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_EDIT_ROUTE_NAME, getUrlEditDashboard(course)), size: "small", color: "primary", variant: "contained" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.btn.label", defaultMessage: "ui.course.dashboard.teacher.btn.label" }) })) })))] }))] })));
 }
 exports.default = (0, react_1.memo)(HeaderCourseDashboard);

package/lib/cjs/components/EditCourse/Skeleton.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { SCCourseEditTabType } from '../../types';
 interface EditCourseSkeletonProps {
-    tab: SCCourseEditTabType;
+    tab?: SCCourseEditTabType;
 }
 declare function EditCourseSkeleton(props: EditCourseSkeletonProps): JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof EditCourseSkeleton>;

package/lib/cjs/components/EditCourse/hooks.js

@@ -16,7 +16,7 @@ const useDisabled = () => {
         return () => {
             updateDragStatus.current && pubsub_js_1.default.unsubscribe(updateDragStatus.current);
         };
-    }, []);
+    }, [setIsDisabled]);
     return { isDisabled };
 };
 exports.useDisabled = useDisabled;

package/lib/cjs/components/LessonAppbar/LessonAppbar.js

@@ -12,6 +12,8 @@ const react_intl_1 = require("react-intl");
 const lab_1 = require("@mui/lab");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
+    startItems: `${constants_1.PREFIX}-start-items`,
+    endItems: `${constants_1.PREFIX}-end-items`,
     title: `${constants_1.PREFIX}-title`
 };
 const Root = (0, styles_1.styled)(material_1.AppBar, {
@@ -27,6 +29,6 @@ function LessonAppbar(inProps) {
         name: constants_1.PREFIX
     });
     const { className = null, title = '', showComments, activePanel = null, handleOpen, onSave, editMode, onArrowBackClick, updating } = props, rest = tslib_1.__rest(props, ["className", "title", "showComments", "activePanel", "handleOpen", "onSave", "editMode", "onArrowBackClick", "updating"]);
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ position: "fixed", open: Boolean(activePanel), className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Toolbar, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ edge: "start", onClick: onArrowBackClick }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: classes.title }, { children: title })), editMode ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleOpen(types_1.SCLessonActionsType.SETTINGS), color: "primary" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "settings" }) })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: "contained", size: "small", onClick: onSave, loading: updating }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonAppbar.button.save", defaultMessage: "ui.lessonAppbar.button.save" }) }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showComments && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleOpen(types_1.SCLessonActionsType.COMMENTS) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "chat_bubble_outline" }) }))), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleOpen(types_1.SCLessonActionsType.LESSONS) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "courses" }) }))] }))] }) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ position: "fixed", open: Boolean(activePanel), className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Toolbar, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.startItems }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ edge: "start", onClick: onArrowBackClick }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: classes.title }, { children: title }))] })), editMode ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleOpen(types_1.SCLessonActionsType.SETTINGS), color: "primary" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "settings" }) })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: "contained", size: "small", onClick: onSave, loading: updating }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonAppbar.button.save", defaultMessage: "ui.lessonAppbar.button.save" }) }))] })) : ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.endItems }, { children: [showComments && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleOpen(types_1.SCLessonActionsType.COMMENTS) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "chat_bubble_outline" }) }))), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleOpen(types_1.SCLessonActionsType.LESSONS) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "courses" }) }))] })))] }) })));
 }
 exports.default = LessonAppbar;

package/lib/esm/components/CourseDashboard/Header.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { SCCourseType } from '@selfcommunity/types';
 interface HeaderCourseDashboardProps {
-    course: SCCourseType | null;
+    course: SCCourseType;
     hasAction?: boolean;
 }
 declare function HeaderCourseDashboard(props: HeaderCourseDashboardProps): JSX.Element;

package/lib/esm/components/CourseDashboard/Header.js

@@ -5,6 +5,7 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import { PREFIX } from './constants';
 import { memo, useMemo } from 'react';
 import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
+import { SCCourseEditTabType } from '../../types';
 const classes = {
     header: `${PREFIX}-header`,
     img: `${PREFIX}-header-img`,
@@ -12,6 +13,13 @@ const classes = {
     innerWrapper: `${PREFIX}-header-inner-wrapper`,
     iconWrapper: `${PREFIX}-header-icon-wrapper`
 };
+function getUrlEditDashboard(course) {
+    return {
+        id: course.id,
+        slug: course.slug,
+        tab: SCCourseEditTabType.LESSONS
+    };
+}
 function HeaderCourseDashboard(props) {
     // PROPS
     const { course, hasAction = false } = props;
@@ -20,7 +28,7 @@ function HeaderCourseDashboard(props) {
     // HOOKS
     const intl = useIntl();
     const iconData = useMemo(() => {
-        const underId = (course === null || course === void 0 ? void 0 : course.privacy) === SCCoursePrivacyType.DRAFT ? 'draft' : course === null || course === void 0 ? void 0 : course.privacy;
+        const underId = course.privacy === SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy;
         return [
             {
                 id: 'ui.course.label',
@@ -32,7 +40,7 @@ function HeaderCourseDashboard(props) {
                 id: 'ui.course.type',
                 icon: 'courses',
                 key: 'typeOfCourse',
-                underId: `ui.course.type.${course === null || course === void 0 ? void 0 : course.type}`
+                underId: `ui.course.type.${course.type}`
             }
         ];
     }, [course]);
@@ -41,6 +49,6 @@ function HeaderCourseDashboard(props) {
                                                 id: data.underId,
                                                 defaultMessage: data.underId
                                             })
-                                        } }) }))] }), i))) })), hasAction && (_jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_EDIT_ROUTE_NAME, course), size: "small", color: "primary", variant: "contained" }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.btn.label", defaultMessage: "ui.course.dashboard.teacher.btn.label" }) })) })))] }))] })));
+                                        } }) }))] }), i))) })), hasAction && (_jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_EDIT_ROUTE_NAME, getUrlEditDashboard(course)), size: "small", color: "primary", variant: "contained" }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.btn.label", defaultMessage: "ui.course.dashboard.teacher.btn.label" }) })) })))] }))] })));
 }
 export default memo(HeaderCourseDashboard);

package/lib/esm/components/EditCourse/Skeleton.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { SCCourseEditTabType } from '../../types';
 interface EditCourseSkeletonProps {
-    tab: SCCourseEditTabType;
+    tab?: SCCourseEditTabType;
 }
 declare function EditCourseSkeleton(props: EditCourseSkeletonProps): JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof EditCourseSkeleton>;

package/lib/esm/components/EditCourse/hooks.js

@@ -12,6 +12,6 @@ export const useDisabled = () => {
         return () => {
             updateDragStatus.current && PubSub.unsubscribe(updateDragStatus.current);
         };
-    }, []);
+    }, [setIsDisabled]);
     return { isDisabled };
 };

package/lib/esm/components/LessonAppbar/LessonAppbar.js

@@ -1,15 +1,17 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
-import { AppBar, Icon, IconButton, Toolbar, Typography } from '@mui/material';
+import { AppBar, Icon, IconButton, Toolbar, Typography, Box } from '@mui/material';
 import { PREFIX } from './constants';
 import { SCLessonActionsType } from '../../types';
 import { FormattedMessage } from 'react-intl';
 import { LoadingButton } from '@mui/lab';
 const classes = {
     root: `${PREFIX}-root`,
+    startItems: `${PREFIX}-start-items`,
+    endItems: `${PREFIX}-end-items`,
     title: `${PREFIX}-title`
 };
 const Root = styled(AppBar, {
@@ -25,5 +27,5 @@ export default function LessonAppbar(inProps) {
         name: PREFIX
     });
     const { className = null, title = '', showComments, activePanel = null, handleOpen, onSave, editMode, onArrowBackClick, updating } = props, rest = __rest(props, ["className", "title", "showComments", "activePanel", "handleOpen", "onSave", "editMode", "onArrowBackClick", "updating"]);
-    return (_jsx(Root, Object.assign({ position: "fixed", open: Boolean(activePanel), className: classNames(classes.root, className) }, rest, { children: _jsxs(Toolbar, { children: [_jsx(IconButton, Object.assign({ edge: "start", onClick: onArrowBackClick }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(Typography, Object.assign({ variant: "h6", className: classes.title }, { children: title })), editMode ? (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ onClick: () => handleOpen(SCLessonActionsType.SETTINGS), color: "primary" }, { children: _jsx(Icon, { children: "settings" }) })), _jsx(LoadingButton, Object.assign({ variant: "contained", size: "small", onClick: onSave, loading: updating }, { children: _jsx(FormattedMessage, { id: "ui.lessonAppbar.button.save", defaultMessage: "ui.lessonAppbar.button.save" }) }))] })) : (_jsxs(_Fragment, { children: [showComments && (_jsx(IconButton, Object.assign({ onClick: () => handleOpen(SCLessonActionsType.COMMENTS) }, { children: _jsx(Icon, { children: "chat_bubble_outline" }) }))), _jsx(IconButton, Object.assign({ onClick: () => handleOpen(SCLessonActionsType.LESSONS) }, { children: _jsx(Icon, { children: "courses" }) }))] }))] }) })));
+    return (_jsx(Root, Object.assign({ position: "fixed", open: Boolean(activePanel), className: classNames(classes.root, className) }, rest, { children: _jsxs(Toolbar, { children: [_jsxs(Box, Object.assign({ className: classes.startItems }, { children: [_jsx(IconButton, Object.assign({ edge: "start", onClick: onArrowBackClick }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(Typography, Object.assign({ variant: "h6", className: classes.title }, { children: title }))] })), editMode ? (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ onClick: () => handleOpen(SCLessonActionsType.SETTINGS), color: "primary" }, { children: _jsx(Icon, { children: "settings" }) })), _jsx(LoadingButton, Object.assign({ variant: "contained", size: "small", onClick: onSave, loading: updating }, { children: _jsx(FormattedMessage, { id: "ui.lessonAppbar.button.save", defaultMessage: "ui.lessonAppbar.button.save" }) }))] })) : (_jsxs(Box, Object.assign({ className: classes.endItems }, { children: [showComments && (_jsx(IconButton, Object.assign({ onClick: () => handleOpen(SCLessonActionsType.COMMENTS) }, { children: _jsx(Icon, { children: "chat_bubble_outline" }) }))), _jsx(IconButton, Object.assign({ onClick: () => handleOpen(SCLessonActionsType.LESSONS) }, { children: _jsx(Icon, { children: "courses" }) }))] })))] }) })));
 }