@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
76 lines (69 loc) • 6.27 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const system_1 = require("@mui/system");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const course_1 = require("../../types/course");
const Widget_1 = tslib_1.__importDefault(require("../Widget"));
const constants_1 = require("./constants");
const BaseItemButton_1 = tslib_1.__importDefault(require("../../shared/BaseItemButton"));
const classes = {
root: `${constants_1.PREFIX}-skeleton-root`,
skeletonPreviewRoot: `${constants_1.PREFIX}-skeleton-preview-root`,
skeletonSnippetRoot: `${constants_1.PREFIX}-skeleton-snippet-root`,
skeletonPreviewAvatar: `${constants_1.PREFIX}-skeleton-preview-avatar`,
skeletonPreviewContent: `${constants_1.PREFIX}-skeleton-preview-content`,
skeletonPreviewActions: `${constants_1.PREFIX}-skeleton-preview-actions`,
skeletonSnippetImage: `${constants_1.PREFIX}-skeleton-snippet-image`,
skeletonSnippetAction: `${constants_1.PREFIX}-skeleton-snippet-action`
};
const Root = (0, material_1.styled)(Widget_1.default, {
name: constants_1.PREFIX,
slot: 'SkeletonRoot'
})(() => ({}));
const SkeletonPreviewRoot = (0, material_1.styled)(material_1.Box, {
name: constants_1.PREFIX,
slot: 'SkeletonPreviewRoot'
})(() => ({}));
const SkeletonSnippetRoot = (0, material_1.styled)(BaseItemButton_1.default, {
name: constants_1.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.|
*
*/
function CourseSkeleton(inProps) {
// PROPS
const props = (0, system_1.useThemeProps)({
props: inProps,
name: constants_1.PREFIX
});
const { className, template, skeletonsAnimation = 'wave', actions, CourseProps } = props, rest = tslib_1.__rest(props, ["className", "template", "skeletonsAnimation", "actions", "CourseProps"]);
/**
* Renders course object
*/
let contentObj;
if (template === course_1.SCCourseTemplateType.PREVIEW) {
contentObj = ((0, jsx_runtime_1.jsxs)(SkeletonPreviewRoot, Object.assign({ className: classes.skeletonPreviewRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ position: "relative" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "110px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { className: classes.skeletonPreviewAvatar, variant: "rounded", animation: skeletonsAnimation })] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.skeletonPreviewContent }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, width: "20%", height: 14, sx: { marginTop: 1 }, variant: "rectangular" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, width: "40%", height: 14, sx: { marginTop: 1.5 }, variant: "rectangular" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, width: "60%", height: 14, sx: { marginTop: 4.5 }, variant: "rectangular" })] })), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.skeletonPreviewActions }, { children: actions !== undefined ? actions : (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rounded", width: 100, height: 30 }) }))] })));
}
else {
contentObj = ((0, jsx_runtime_1.jsx)(SkeletonSnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.skeletonSnippetRoot, image: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.skeletonSnippetImage }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, variant: "rectangular", width: (CourseProps === null || CourseProps === void 0 ? void 0 : CourseProps.userProfileSnippet) ? 60 : 100, height: 60 }), (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "large" }, { children: "courses" }))] })), primary: (CourseProps === null || CourseProps === void 0 ? void 0 : CourseProps.userProfileSnippet) ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: 120, style: { marginBottom: 10 } })) : ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: 40, style: { marginBottom: 12 } })), secondary: (CourseProps === null || CourseProps === void 0 ? void 0 : CourseProps.userProfileSnippet) ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: 60 })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: 120, style: { marginBottom: 10 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: 60 })] })), actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: actions !== undefined ? (actions) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", disabled: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, height: 15, width: 60 }) }))) }) }));
}
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-skeleton-${template}`) }, rest, { children: contentObj })));
}
exports.default = CourseSkeleton;