@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
96 lines (87 loc) • 3.11 kB
TypeScript
import React from 'react';
import { TypographyProps } from '@mui/material';
import { WidgetProps } from '../../components/Widget';
import { SCNotificationObjectTemplateType } from '../../types/notification';
export interface NotificationItemProps extends Pick<WidgetProps, Exclude<keyof WidgetProps, 'id'>> {
/**
* Id of user object
* @default null
*/
id?: string;
/**
* Notification Object template type
* @default 'detail'
*/
template?: SCNotificationObjectTemplateType;
/**
* Image to insert into the item
* @default null
*/
image?: React.ReactNode;
/**
* If true, the children won't be wrapped by a Typography component.
* This can be useful to render an alternative Typography variant by wrapping the children (or primary) text, and optional secondary text with the Typography component.
* @default false
*/
disableTypography?: boolean;
/**
* The main content element
*/
primary?: React.ReactNode;
/**
* Props to spread to Primary Typography
* @default {component: 'span', variant: 'body1'}
*/
primaryTypographyProps?: TypographyProps;
/**
* The secondary content element.
*/
secondary?: React.ReactNode;
/**
* Props to spread to Secondary Typography
* @default {component: 'p', variant: 'body2'}
*/
secondaryTypographyProps?: TypographyProps;
/**
* The actions of the item
*/
actions?: React.ReactNode;
/**
* The footer of the item
*/
footer?: React.ReactNode;
/**
* If notification is new
*/
isNew?: boolean;
/**
* Any other properties
*/
[p: string]: any;
}
/**
* > API documentation for the Community-JS BaseItem component. Learn about the available props and the CSS API.
#### Import
```jsx
import {NotificationItem} from '@selfcommunity/react-ui';
```
#### Component Name
The name `NotificationItem` can be used when providing style overrides in the theme.
#### CSS
|Rule Name|Global class|Description|
|---|---|---|
|root|.SCBaseItem-root|Styles applied to the root element.|
|new|.SCBaseItem-new-snippet|Styles applied to the root element when notification is marked as new.|
|content|.SCBaseItem-content|Styles applied to the content element.|
|header|.SCBaseItem-header|Styles applied to the header element.|
|image|.SCBaseItem-image|Styles applied to image section.|
|snippetImage|.SCBaseItem-snippet-image|Styles applied to image section when a snippet notification is rendered.|
|title|.SCBaseItem-text|Styles applied to title section.|
|primary|.SCBaseItem-primary|Styles applied to primary section.|
|secondary|.SCBaseItem-secondary|Styles applied to secondary section.|
|actions|.SCBaseItem-actions|Styles applied to actions section.|
|footer|.SCBaseItem-footer|Styles applied to footer section.|
|newChip|.SCBaseItem-new-chip|Styles applied to the new chip element when notification is marked as new.|
* @param inProps
*/
export default function NotificationItem(inProps: NotificationItemProps): JSX.Element;