@selfcommunity/react-ui 0.10.2-alpha.8 → 0.10.2-courses.100

package/lib/cjs/components/CourseForm/UploadCourseCover.d.ts

@@ -0,0 +1,50 @@
+export interface UploadCourseCoverProps {
+    /**
+     * Id of the course. It is optional only for course creation modal.
+     * @default null
+     */
+    courseId?: number;
+    /**
+     * On change function.
+     * @default null
+     */
+    onChange?: (cover: any) => void;
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Prop to handle cover loading in the create course modal.
+     * @default false
+     */
+    isCreationMode?: boolean;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS Change Group Cover component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a button that allows admins to edit the group cover and a popover that specifies format and sizes allowed.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/UploadCourseCover)
+
+ #### Import
+ ```jsx
+ import {UploadCourseCover} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCUploadCourseCover` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCUploadCourseCover-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function UploadCourseCover(inProps: UploadCourseCoverProps): JSX.Element;

package/lib/cjs/components/CourseForm/UploadCourseCover.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
+const react_core_1 = require("@selfcommunity/react-core");
+const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const system_1 = require("@mui/system");
+const constants_1 = require("./constants");
+const lab_1 = require("@mui/lab");
+const Errors_1 = require("../../constants/Errors");
+const api_services_1 = require("@selfcommunity/api-services");
+const utils_1 = require("@selfcommunity/utils");
+const react_intl_1 = require("react-intl");
+const messages = (0, react_intl_1.defineMessages)({
+    errorLoadImage: {
+        id: 'ui.changeGroupCover.button.change.alertErrorImage',
+        defaultMessage: 'ui.changeGroupCover.button.change.alertErrorImage'
+    }
+});
+const classes = {
+    root: `${constants_1.PREFIX}-upload-course-cover-root`
+};
+const Root = (0, styles_1.styled)(lab_1.LoadingButton, {
+    name: constants_1.PREFIX,
+    slot: 'UploadCourseCoverRoot'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS Change Group Cover component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a button that allows admins to edit the group cover and a popover that specifies format and sizes allowed.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/UploadCourseCover)
+
+ #### Import
+ ```jsx
+ import {UploadCourseCover} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCUploadCourseCover` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCUploadCourseCover-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+function UploadCourseCover(inProps) {
+    //PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { courseId, onChange, className = false, isCreationMode = false } = props, rest = tslib_1.__rest(props, ["courseId", "onChange", "className", "isCreationMode"]);
+    //CONTEXT
+    const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
+    //STATE
+    let fileInput = (0, react_1.useRef)(null);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [alert, setAlert] = (0, react_1.useState)(null);
+    // INTL
+    const intl = (0, react_intl_1.useIntl)();
+    // Anonymous
+    if (!scUserContext.user) {
+        return null;
+    }
+    /**
+     * Handles file upload
+     * @param course
+     */
+    const handleUpload = (course) => {
+        fileInput = course.target.files[0];
+        if (fileInput) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                const img = new Image();
+                img.onload = () => {
+                    isCreationMode ? onChange && onChange(fileInput) : handleSave();
+                };
+                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                // @ts-ignore
+                img.src = e.target.result;
+            };
+            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+            // @ts-ignore
+            reader.readAsDataURL(fileInput);
+        }
+    };
+    /**
+     * Handles cover saving after upload action
+     */
+    function handleSave() {
+        setLoading(true);
+        const formData = new FormData();
+        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // @ts-ignore
+        formData.append('image_original', fileInput);
+        api_services_1.CourseService.changeCourseCover(courseId, formData, { headers: { 'Content-Type': 'multipart/form-data' } })
+            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+            // @ts-ignore
+            .then((data) => {
+            onChange && onChange(data.image_medium);
+            setLoading(false);
+        })
+            .catch((error) => {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+            setLoading(false);
+            setAlert(intl.formatMessage(messages.errorLoadImage));
+        });
+    }
+    /**
+     * If there is an error
+     */
+    if (alert) {
+        return ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ color: "error", onClose: () => setAlert(null) }, { children: alert })));
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), (0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), size: "medium", variant: "contained", disabled: loading, onClick: () => fileInput.current.click(), loading: loading }, rest, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "image" }) }))] }));
+}
+exports.default = UploadCourseCover;

package/lib/cjs/components/CourseForm/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCCourseForm";

package/lib/cjs/components/CourseForm/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCCourseForm';

package/lib/cjs/components/CourseForm/index.d.ts

@@ -0,0 +1,4 @@
+import CourseForm, { CourseFormProps } from './CourseForm';
+import Skeleton from './Skeleton';
+export default CourseForm;
+export { CourseFormProps, Skeleton };

package/lib/cjs/components/CourseForm/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Skeleton = void 0;
+const tslib_1 = require("tslib");
+const CourseForm_1 = tslib_1.__importDefault(require("./CourseForm"));
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+exports.Skeleton = Skeleton_1.default;
+exports.default = CourseForm_1.default;

package/lib/cjs/components/CourseFormDialog/CourseFormDialog.d.ts

@@ -0,0 +1,48 @@
+import { BaseDialogProps } from '../../shared/BaseDialog';
+import { CourseFormProps } from '../CourseForm';
+export interface CourseFormDialogProps extends BaseDialogProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Open dialog
+     * @default true
+     */
+    open?: boolean;
+    /**
+     * On dialog close callback function
+     * @default null
+     */
+    onClose?: () => void;
+    /**
+     * Props to spread to CourseForm component
+     * @default {}
+     */
+    CourseFormComponentProps?: CourseFormProps;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *> API documentation for the Community-JS CourseFormDialog component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CourseFormDialog} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCCourseFormDialog` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCourseFormDialog-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function CourseFormDialog(inProps: CourseFormDialogProps): JSX.Element;

package/lib/cjs/components/CourseFormDialog/CourseFormDialog.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_1 = require("@mui/material/styles");
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_intl_1 = require("react-intl");
+const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
+const constants_1 = require("./constants");
+const CourseForm_1 = tslib_1.__importDefault(require("../CourseForm"));
+const react_1 = require("react");
+const CourseForm_2 = require("../CourseForm/CourseForm");
+const classes = {
+    root: `${constants_1.PREFIX}-root`
+};
+const Root = (0, styles_1.styled)(BaseDialog_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
+/**
+ *> API documentation for the Community-JS CourseFormDialog component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CourseFormDialog} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCCourseFormDialog` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCourseFormDialog-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+function CourseFormDialog(inProps) {
+    //PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className, open = true, onClose, CourseFormComponentProps = { step: CourseForm_2.SCCourseFormStepType.ONE } } = props, rest = tslib_1.__rest(props, ["className", "open", "onClose", "CourseFormComponentProps"]);
+    const handleSuccess = (0, react_1.useCallback)((course) => {
+        var _a;
+        (_a = CourseFormComponentProps.onSuccess) === null || _a === void 0 ? void 0 : _a.call(CourseFormComponentProps, course);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [onClose, CourseFormComponentProps]);
+    /**
+     * Renders root object
+     */
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, title: (CourseFormComponentProps === null || CourseFormComponentProps === void 0 ? void 0 : CourseFormComponentProps.course) ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.title.edit", defaultMessage: "ui.courseForm.title.edit" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.title.${CourseFormComponentProps.step}`, defaultMessage: `ui.courseForm.title.${CourseFormComponentProps.step}` })), open: open, onClose: onClose, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(CourseForm_1.default, Object.assign({}, CourseFormComponentProps, { onSuccess: handleSuccess })) })));
+}
+exports.default = CourseFormDialog;

package/lib/cjs/components/CourseFormDialog/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCCourseFormDialog";

package/lib/cjs/components/CourseFormDialog/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCCourseFormDialog';

package/lib/cjs/components/CourseFormDialog/index.d.ts

@@ -0,0 +1,3 @@
+import CourseFormDialog, { CourseFormDialogProps } from './CourseFormDialog';
+export default CourseFormDialog;
+export { CourseFormDialogProps };

package/lib/cjs/components/CourseFormDialog/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const CourseFormDialog_1 = tslib_1.__importDefault(require("./CourseFormDialog"));
+exports.default = CourseFormDialog_1.default;

package/lib/cjs/components/CourseJoinButton/CourseJoinButton.d.ts

@@ -0,0 +1,56 @@
+import { SCCourseType, SCUserType } from '@selfcommunity/types';
+export interface CourseJoinButtonProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Course Object
+     * @default null
+     */
+    course?: SCCourseType;
+    /**
+     * Id of the course
+     * @default null
+     */
+    courseId?: number;
+    /**
+     * The user to be accepted into the course
+     * @default null
+     */
+    user?: SCUserType;
+    /**
+     * onJoin callback
+     * @param user
+     * @param joined
+     */
+    onJoin?: (course: SCCourseType, status: string | null) => any;
+    /**
+     * Others properties
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS Course Subscribe Button component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {CourseJoinButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCCourseJoinButton` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCourseJoinButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function CourseJoinButton(inProps: CourseJoinButtonProps): JSX.Element;

package/lib/cjs/components/CourseJoinButton/CourseJoinButton.js

@@ -0,0 +1,148 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styles_1 = require("@mui/material/styles");
+const utils_1 = require("@selfcommunity/utils");
+const react_core_1 = require("@selfcommunity/react-core");
+const types_1 = require("@selfcommunity/types");
+const lab_1 = require("@mui/lab");
+const react_intl_1 = require("react-intl");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const system_1 = require("@mui/system");
+const Errors_1 = require("../../constants/Errors");
+const PubSub_1 = require("../../constants/PubSub");
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
+const PREFIX = 'SCCourseJoinButton';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = (0, styles_1.styled)(lab_1.LoadingButton, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({}));
+/**
+ * > API documentation for the Community-JS Course Subscribe Button component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {CourseJoinButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCCourseJoinButton` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCourseJoinButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+function CourseJoinButton(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, courseId, course, user, onJoin } = props, rest = tslib_1.__rest(props, ["className", "courseId", "course", "user", "onJoin"]);
+    // STATE
+    const [status, setStatus] = (0, react_1.useState)(null);
+    // CONTEXT
+    const scContext = (0, react_core_1.useSCContext)();
+    const scUserContext = (0, react_core_1.useSCUser)();
+    const scCoursesManager = scUserContext.managers.courses;
+    // CONST
+    const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    const { scCourse } = (0, react_core_1.useSCFetchCourse)({
+        id: courseId,
+        course,
+        cacheStrategy: authUserId ? utils_1.CacheStrategies.CACHE_FIRST : utils_1.CacheStrategies.STALE_WHILE_REVALIDATE
+    });
+    const isCourseAdmin = (0, react_1.useMemo)(() => scCourse && (scCourse.join_status === types_1.SCCourseJoinStatusType.CREATOR || scCourse.join_status === types_1.SCCourseJoinStatusType.MANAGER), [scCourse]);
+    (0, react_1.useEffect)(() => {
+        /**
+         * Call scCoursesManager.joinStatus inside an effect
+         * to avoid warning rendering child during update parent state
+         */
+        if (authUserId) {
+            setStatus(scCoursesManager.joinStatus(scCourse));
+        }
+    }, [authUserId, scCoursesManager.joinStatus, scCourse]);
+    /**
+     * Notify UI when a member is added to a course
+     * @param course
+     * @param user
+     */
+    function notifyChanges(course, user) {
+        if (course && user) {
+            pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.GROUP}.${PubSub_1.SCCourseEventType.ADD_MEMBER}`, { course, user });
+        }
+    }
+    const join = (user) => {
+        scCoursesManager
+            .join(scCourse, user === null || user === void 0 ? void 0 : user.id)
+            .then(() => {
+            const _status = scCourse.privacy === types_1.SCCoursePrivacyType.PRIVATE && scCourse.join_status !== types_1.SCCourseJoinStatusType.INVITED
+                ? types_1.SCCourseJoinStatusType.REQUESTED
+                : types_1.SCCourseJoinStatusType.JOINED;
+            notifyChanges(scCourse, user);
+            onJoin && onJoin(scCourse, _status);
+        })
+            .catch((e) => {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
+        });
+    };
+    const leave = () => {
+        scCoursesManager
+            .leave(scCourse)
+            .then(() => {
+            onJoin && onJoin(scCourse, null);
+        })
+            .catch((e) => {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
+        });
+    };
+    const handleClick = () => {
+        if (!scUserContext.user) {
+            scContext.settings.handleAnonymousAction();
+        }
+        else {
+            status === types_1.SCCourseJoinStatusType.JOINED && !(user === null || user === void 0 ? void 0 : user.id) ? leave() : (user === null || user === void 0 ? void 0 : user.id) ? join(user) : join();
+        }
+    };
+    /**
+     * Get current translated status
+     */
+    const getStatus = (0, react_1.useMemo)(() => {
+        let _status;
+        switch (status) {
+            case types_1.SCCourseJoinStatusType.REQUESTED:
+                _status = (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.courseJoinButton.waitingApproval", id: "ui.courseJoinButton.waitingApproval" });
+                break;
+            case types_1.SCCourseJoinStatusType.JOINED:
+                _status = (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.courseJoinButton.leave", id: "ui.courseJoinButton.leave" });
+                break;
+            case types_1.SCCourseJoinStatusType.INVITED:
+                _status = (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.courseJoinButton.accept", id: "ui.courseJoinButton.accept" });
+                break;
+            default:
+                scCourse.privacy === types_1.SCCoursePrivacyType.OPEN
+                    ? (_status = (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.courseJoinButton.join", id: "ui.courseJoinButton.join" }))
+                    : (_status = (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.courseJoinButton.requestAccess", id: "ui.courseJoinButton.requestAccess" }));
+                break;
+        }
+        return _status;
+    }, [status, scCourse]);
+    if (!scCourse || (isCourseAdmin && (user === null || user === void 0 ? void 0 : user.id) === scUserContext.user.id) || (isCourseAdmin && !(user === null || user === void 0 ? void 0 : user.id))) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ size: "small", variant: "outlined", onClick: handleClick, loading: scUserContext.user ? scCoursesManager.isLoading(scCourse) : null, disabled: status === types_1.SCCourseJoinStatusType.REQUESTED, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: isCourseAdmin ? (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.courseJoinButton.accept", id: "ui.courseJoinButton.accept" }) : getStatus })));
+}
+exports.default = CourseJoinButton;

package/lib/cjs/components/CourseJoinButton/index.d.ts

@@ -0,0 +1,3 @@
+import CourseJoinButton, { CourseJoinButtonProps } from './CourseJoinButton';
+export default CourseJoinButton;
+export { CourseJoinButtonProps };

package/lib/cjs/components/CourseJoinButton/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const CourseJoinButton_1 = tslib_1.__importDefault(require("./CourseJoinButton"));
+exports.default = CourseJoinButton_1.default;

package/lib/cjs/components/CourseParticipantsButton/CourseParticipantsButton.d.ts

@@ -0,0 +1,53 @@
+import { ButtonProps } from '@mui/material/Button/Button';
+import { SCCourseType } from '@selfcommunity/types';
+import { BaseDialogProps } from '../../shared/BaseDialog';
+export interface CourseParticipantsButtonProps extends Pick<ButtonProps, Exclude<keyof ButtonProps, 'onClick' | 'disabled'>> {
+    /**
+     * Course Object
+     * @default null
+     */
+    course?: SCCourseType;
+    /**
+     * CourseId of course object
+     * @default null
+     */
+    courseId?: number;
+    /**
+     * Hide button label
+     * @default false
+     */
+    hideCaption?: boolean;
+    /**
+     * Props to spread to followedBy dialog
+     * @default {}
+     */
+    DialogProps?: BaseDialogProps;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *> API documentation for the Community-JS Course Participants Button component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CourseParticipantsButton} from '@selfcommunity/react-ui';
+ ```
+ #### Component Name
+
+ The name `SCCourseParticipantsButton` can be used when providing style overrides in the theme.
+
+ * #### CSS
+ *
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCourseParticipantsButton-root|Styles applied to the root element.|
+ |dialogRoot|.SCCourseParticipantsButton-dialog-root|Styles applied to the dialog root element.|
+ |endMessage|.SCCourseParticipantsButton-end-message|Styles applied to the end message element.|
+ |infiniteScroll|.SCCourseParticipantsButton-infinite-scroll|Styles applied to the infinite scroll element.|
+ |participants|.SCCourseParticipantsButton-participants|Styles applied to the participants section.|
+ 
+ * @param inProps
+ */
+export default function CourseParticipantsButton(inProps: CourseParticipantsButtonProps): JSX.Element;