@selfcommunity/react-ui/lib/esm/components/Course/Skeleton.js

React UI Components to integrate a Community created with SelfCommunity Platform.

import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Box, Button, CardActions, CardContent, Icon, styled, Skeleton } from '@mui/material';
import { useThemeProps } from '@mui/system';
import classNames from 'classnames';
import { SCCourseTemplateType } from '../../types/course';
import Widget from '../Widget';
import { PREFIX } from './constants';
import BaseItemButton from '../../shared/BaseItemButton';
const classes = {
    root: `${PREFIX}-skeleton-root`,
    skeletonPreviewRoot: `${PREFIX}-skeleton-preview-root`,
    skeletonSnippetRoot: `${PREFIX}-skeleton-snippet-root`,
    skeletonPreviewAvatar: `${PREFIX}-skeleton-preview-avatar`,
    skeletonPreviewContent: `${PREFIX}-skeleton-preview-content`,
    skeletonPreviewActions: `${PREFIX}-skeleton-preview-actions`,
    skeletonSnippetImage: `${PREFIX}-skeleton-snippet-image`,
    skeletonSnippetAction: `${PREFIX}-skeleton-snippet-action`
};
const Root = styled(Widget, {
    name: PREFIX,
    slot: 'SkeletonRoot'
})(() => ({}));
const SkeletonPreviewRoot = styled(Box, {
    name: PREFIX,
    slot: 'SkeletonPreviewRoot'
})(() => ({}));
const SkeletonSnippetRoot = styled(BaseItemButton, {
    name: PREFIX,
    slot: 'SkeletonSnippetRoot'
})(() => ({}));
/**
 * > API documentation for the Community-JS Course Skeleton component. Learn about the available props and the CSS API.

 #### Import

 ```jsx
 import {CourseSkeleton} from '@selfcommunity/react-ui';
 ```

 #### Component Name

 The name `SCCourse-skeleton-root` can be used when providing style overrides in the theme.

 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCCourse-skeleton-root|Styles applied to the root element.|
 |image|.SCCourse-skeleton-image|Styles applied to the image element.|
 |action|.SCCourse-skeleton-action|Styles applied to action section.|
 *
 */
export default function CourseSkeleton(inProps) {
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { className, template, skeletonsAnimation = 'wave', actions, CourseProps } = props, rest = __rest(props, ["className", "template", "skeletonsAnimation", "actions", "CourseProps"]);
    /**
     * Renders course object
     */
    let contentObj;
    if (template === SCCourseTemplateType.PREVIEW) {
        contentObj = (_jsxs(SkeletonPreviewRoot, Object.assign({ className: classes.skeletonPreviewRoot }, { children: [_jsxs(Box, Object.assign({ position: "relative" }, { children: [_jsx(Skeleton, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "110px" }), _jsx(Skeleton, { className: classes.skeletonPreviewAvatar, variant: "rounded", animation: skeletonsAnimation })] })), _jsxs(CardContent, Object.assign({ className: classes.skeletonPreviewContent }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "20%", height: 14, sx: { marginTop: 1 }, variant: "rectangular" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "40%", height: 14, sx: { marginTop: 1.5 }, variant: "rectangular" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "60%", height: 14, sx: { marginTop: 4.5 }, variant: "rectangular" })] })), _jsx(CardActions, Object.assign({ className: classes.skeletonPreviewActions }, { children: actions !== undefined ? actions : _jsx(Skeleton, { variant: "rounded", width: 100, height: 30 }) }))] })));
    }
    else {
        contentObj = (_jsx(SkeletonSnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.skeletonSnippetRoot, image: _jsxs(Box, Object.assign({ className: classes.skeletonSnippetImage }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", width: (CourseProps === null || CourseProps === void 0 ? void 0 : CourseProps.userProfileSnippet) ? 60 : 100, height: 60 }), _jsx(Icon, Object.assign({ fontSize: "large" }, { children: "courses" }))] })), primary: (CourseProps === null || CourseProps === void 0 ? void 0 : CourseProps.userProfileSnippet) ? (_jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: 120, style: { marginBottom: 10 } })) : (_jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: 40, style: { marginBottom: 12 } })), secondary: (CourseProps === null || CourseProps === void 0 ? void 0 : CourseProps.userProfileSnippet) ? (_jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: 60 })) : (_jsxs(_Fragment, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: 120, style: { marginBottom: 10 } }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: 60 })] })), actions: _jsx(_Fragment, { children: actions !== undefined ? (actions) : (_jsx(Button, Object.assign({ size: "small", variant: "outlined", disabled: true }, { children: _jsx(Skeleton, { animation: skeletonsAnimation, height: 15, width: 60 }) }))) }) }));
    }
    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className, `${PREFIX}-skeleton-${template}`) }, rest, { children: contentObj })));
}