@selfcommunity/react-ui/lib/esm/components/LiveStream/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 { AvatarGroup, Box, Button, CardActions, CardContent, Divider, Icon, Stack, useTheme } from '@mui/material';
import Skeleton from '@mui/material/Skeleton';
import { styled } from '@mui/material/styles';
import { useThemeProps } from '@mui/system';
import classNames from 'classnames';
import BaseItem from '../../shared/BaseItem';
import { SCLiveStreamTemplateType } from '../../types/liveStream';
import Widget from '../Widget';
import { PREFIX } from './constants';
const classes = {
    root: `${PREFIX}-skeleton-root`,
    skeletonDetailRoot: `${PREFIX}-skeleton-detail-root`,
    skeletonPreviewRoot: `${PREFIX}-skeleton-preview-root`,
    skeletonSnippetRoot: `${PREFIX}-skeleton-snippet-root`,
    skeletonDetailCalendar: `${PREFIX}-skeleton-detail-calendar`,
    skeletonDetailContent: `${PREFIX}-skeleton-detail-content`,
    skeletonDetailActions: `${PREFIX}-skeleton-detail-actions`,
    skeletonDetailUser: `${PREFIX}-skeleton-detail-user`,
    skeletonDetailFirstDivider: `${PREFIX}-skeleton-detail-first-divider`,
    skeletonDetailSecondDivider: `${PREFIX}-skeleton-detail-second-divider`,
    skeletonPreviewContent: `${PREFIX}-skeleton-preview-content`,
    skeletonPreviewName: `${PREFIX}-skeleton-preview-name`,
    skeletonPreviewActions: `${PREFIX}-skeleton-preview-actions`,
    skeletonSnippetImage: `${PREFIX}-skeleton-snippet-image`,
    skeletonSnippetAction: `${PREFIX}-skeleton-snippet-action`
};
const Root = styled(Widget, {
    name: PREFIX,
    slot: 'SkeletonRoot'
})(() => ({}));
const SkeletonDetailRoot = styled(Box, {
    name: PREFIX,
    slot: 'SkeletonDetailRoot'
})(() => ({}));
const SkeletonPreviewRoot = styled(Box, {
    name: PREFIX,
    slot: 'SkeletonPreviewRoot'
})(() => ({}));
const SkeletonSnippetRoot = styled(BaseItem, {
    name: PREFIX,
    slot: 'SkeletonSnippetRoot'
})(() => ({}));
/**
 * > API documentation for the Community-JS LiveStream Skeleton component. Learn about the available props and the CSS API.

 #### Import

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

 #### Component Name

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

 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCLiveStream-skeleton-root|Styles applied to the root element.|
 |image|.SCLiveStream-skeleton-image|Styles applied to the image element.|
 |action|.SCLiveStream-skeleton-action|Styles applied to action section.|
 *
 */
export default function LiveStreamSkeleton(inProps) {
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { className, template = SCLiveStreamTemplateType.SNIPPET, skeletonsAnimation = 'wave', actions } = props, rest = __rest(props, ["className", "template", "skeletonsAnimation", "actions"]);
    const theme = useTheme();
    /**
     * Renders liveStream object
     */
    let contentObj;
    if (template === SCLiveStreamTemplateType.DETAIL) {
        contentObj = (_jsxs(SkeletonDetailRoot, Object.assign({ className: classes.skeletonDetailRoot }, { children: [_jsxs(Box, Object.assign({ position: "relative" }, { children: [_jsx(Skeleton, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "170px" }), _jsx(Skeleton, { className: classes.skeletonDetailCalendar, variant: "rounded", animation: skeletonsAnimation, width: "60px", height: "60px" })] })), _jsxs(CardContent, Object.assign({ className: classes.skeletonDetailContent }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "36%", height: "40px" }), _jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "9px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "50%", height: "20px" })] })), _jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "9px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "35%", height: "20px" })] })), _jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "14px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "27%", height: "20px" })] })), _jsxs(Stack, Object.assign({ direction: "row", gap: "8px", className: classes.skeletonDetailUser }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "36px", height: "36px" }), _jsxs(Stack, Object.assign({ gap: "1px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "75px", height: "15px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "86px", height: "16px" })] }))] })), _jsx(Divider, { className: classes.skeletonDetailFirstDivider }), _jsxs(Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center", height: "28px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "68px", height: "20px" }), _jsxs(AvatarGroup, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" })] })] })), _jsx(Divider, { className: classes.skeletonDetailSecondDivider })] })), _jsx(CardActions, Object.assign({ className: classes.skeletonDetailActions }, { children: actions !== undefined ? actions : _jsx(Skeleton, { variant: "rounded", width: 100, height: 30 }) }))] })));
    }
    else if (template === SCLiveStreamTemplateType.PREVIEW) {
        contentObj = (_jsxs(SkeletonPreviewRoot, Object.assign({ className: classes.skeletonPreviewRoot }, { children: [_jsx(Box, Object.assign({ position: "relative" }, { children: _jsx(Skeleton, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "80px" }) })), _jsxs(CardContent, Object.assign({ className: classes.skeletonPreviewContent }, { children: [_jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "50%", height: "20px" })] })), _jsx(Skeleton, { animation: skeletonsAnimation, width: "67%", height: "25px", className: classes.skeletonPreviewName }), _jsx(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "2px" }, { children: _jsx(Skeleton, { animation: skeletonsAnimation, width: "27%", height: "18px" }) })), _jsx(Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center" }, { children: _jsxs(AvatarGroup, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` })] }) }))] })), _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: 100, height: 60 }), " ", _jsx(Icon, Object.assign({ fontSize: "large" }, { children: "CalendarIcon" }))] })), primary: _jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "40%", style: { marginBottom: 12 } }), secondary: _jsxs(_Fragment, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "60%", style: { marginBottom: 10, marginRight: 5 } }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "35%" })] }), actions: _jsx(_Fragment, { children: actions !== undefined ? (actions) : (_jsx(Button, Object.assign({ size: "small", variant: "outlined", disabled: true }, { children: _jsx(Skeleton, { animation: skeletonsAnimation, height: 10, width: 30, style: { marginTop: 5, marginBottom: 5 } }) }))) }) }));
    }
    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className, `${PREFIX}-skeleton-${template}`) }, rest, { children: contentObj })));
}