@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
101 lines (95 loc) • 4.1 kB
TypeScript
import { GridProps } from '@mui/material';
import React from 'react';
import { CourseProps, CourseSkeletonProps } from '../Course';
import { CoursesSkeletonProps } from '../Courses/Skeleton';
import { CreateCourseButtonProps } from '../CreateCourseButton';
export declare const CoursesChipRoot: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
}, "avatar" | "className" | "style" | "classes" | "label" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "size" | "icon" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
export interface CoursesProps {
/**
* Overrides or extends the styles applied to the component.
* @default null
*/
className?: string;
/**
* Feed API Query Params
* @default [{'limit': 20, 'offset': 0}]
*/
endpointQueryParams?: Record<string, string | number>;
/**
* Props to spread to single course object
* @default {}
*/
CourseComponentProps?: CourseProps;
/**
* Props to spread to single course skeleton object
* @default {}
*/
CourseSkeletonComponentProps?: CourseSkeletonProps;
/**
* Props to spread to courses skeleton object
* @default {}
*/
CoursesSkeletonComponentProps?: CoursesSkeletonProps;
/**
* Props to spread to CreateCourseButton component
* @default {}
*/
CreateCourseButtonComponentProps?: CreateCourseButtonProps;
/**
* Props spread to grid container
* @default {}
*/
GridContainerComponentProps?: Pick<GridProps, Exclude<keyof GridProps, 'container' | 'component' | 'children' | 'item' | 'classes'>>;
/**
* Props spread to single grid item
* @default {}
*/
GridItemComponentProps?: Pick<GridProps, Exclude<keyof GridProps, 'container' | 'component' | 'children' | 'item' | 'classes'>>;
/**
* Show/Hide filters
* @default true
*/
showFilters?: boolean;
/**
* Filters component
* @param props
*/
filters?: JSX.Element;
/**
* Other props
*/
[p: string]: any;
}
/**
* > API documentation for the Community-JS Courses component. Learn about the available props and the CSS API.
*
*
* The Courses component renders the list of all available courses.
* Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Courses)
#### Import
```jsx
import {Courses} from '@selfcommunity/react-ui';
```
#### Component Name
The name `SCCourses` can be used when providing style overrides in the theme.
#### CSS
|Rule Name|Global class|Description|
|---|---|---|
|root|.SCCourses-root|Styles applied to the root element.|
|category|.SCCourses-category|Styles applied to the category autocomplete element.|
|courses|.SCCourses-courses|Styles applied to the courses section.|
|emptyBox|.SCCourses-empty-box|Styles applied to the empty box element.|
|emptyIcon|.SCCourses-empty-icon|Styles applied to the empty icon element.|
|emptyRotatedBox|.SCCourses-empty-rotated-box|Styles applied to the rotated empty box element.|
|filters|.SCCourses-filters|Styles applied to the filters section.|
|item|.SCCourses-item|Styles applied to an individual item.|
|itemPlaceholder|.SCCourses-item-placeholder|Styles applied to the placeholder for an item.|
|noResults|.SCCourses-no-results|Styles applied when there are no results.|
|search|.SCCourses-search|Styles applied to the search element.|
|studentEmptyView|.SCCourses-student-empty-view|Styles applied to the student empty view.|
|teacherEmptyView|.SCCourses-teacher-empty-view|Styles applied to the teacher empty view.|
* @param inProps
*/
export default function Courses(inProps: CoursesProps): JSX.Element;