@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
79 lines (75 loc) • 4.41 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from 'react';
import { styled } from '@mui/material/styles';
import { Box, Paper, Typography } from '@mui/material';
import CategoryFollowButton from '../CategoryFollowButton';
import { FormattedMessage } from 'react-intl';
import { useSCFetchCategory } from '@selfcommunity/react-core';
import classNames from 'classnames';
import { useThemeProps } from '@mui/system';
import CategoryFollowersButton from '../CategoryFollowersButton';
import { PREFIX } from './constants';
const classes = {
root: `${PREFIX}-root`,
cover: `${PREFIX}-cover`,
name: `${PREFIX}-name`,
slogan: `${PREFIX}-slogan`,
info: `${PREFIX}-info`,
followedCounter: `${PREFIX}-followed-counter`,
followed: `${PREFIX}-followed`,
action: `${PREFIX}-action`
};
const Root = styled(Box, {
name: PREFIX,
slot: 'Root'
})(() => ({}));
/**
* > API documentation for the Community-JS Category AppBar component. Learn about the available props and the CSS API.
*
*
* This component renders the top section for category pages.
* Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/CategoryHeader)
*
#### Import
```jsx
import {CategoryHeader} from '@selfcommunity/react-ui';
```
#### Component Name
The name `SCCategoryHeader` can be used when providing style overrides in the theme.
* #### CSS
*
|Rule Name|Global class|Description|
|---|---|---|
|root|.SCCategoryHeader-root|Styles applied to the root element.|
|cover|.SCCategoryHeader-cover|Styles applied to the cover element.|
|name|.SCCategoryHeader-name|Styles applied to the name element.|
|slogan|.SCCategoryHeader-slogan|Styles applied to the slogan element.|
|info|.SCCategoryHeader-info|Styles applied to the info element.|
|followedCounter|.SCCategoryHeader-followed-by-counter|Styles applied to the followers counter element.|
|followed|.SCCategoryHeader-followed|Styles applied to the followers avatars section.|
|action|.SCCategoryHeader-action|Styles applied to the action section.|
* @param inProps
*/
export default function CategoryHeader(inProps) {
// PROPS
const props = useThemeProps({
props: inProps,
name: PREFIX
});
const { className, categoryId, category, CategoryFollowButtonProps = {}, CategoryFollowersButtonProps = {} } = props, rest = __rest(props, ["className", "categoryId", "category", "CategoryFollowButtonProps", "CategoryFollowersButtonProps"]);
// STATE
const { scCategory, setSCCategory } = useSCFetchCategory({ id: categoryId, category });
/**
* Handles callback follow/unfollow category
*/
const handleFollow = (category, follow) => {
setSCCategory(Object.assign(Object.assign({}, category), { followers_counter: category.followers_counter + (follow ? 1 : -1) }));
};
// RENDER
const _backgroundCover = useMemo(() => (Object.assign({}, (scCategory ? { background: `url('${scCategory.emotional_image_original}') center / cover` } : {}))), [scCategory]);
if (!scCategory) {
return null;
}
return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Paper, { style: _backgroundCover, classes: { root: classes.cover } }), _jsxs(Box, Object.assign({ className: classes.info }, { children: [_jsx(Typography, Object.assign({ variant: "h3", className: classes.name, gutterBottom: true }, { children: scCategory.name })), scCategory.slogan && (_jsx(Typography, Object.assign({ variant: "h5", className: classes.slogan }, { children: scCategory.slogan }))), _jsxs(Box, Object.assign({ className: classes.followed }, { children: [_jsx(Typography, Object.assign({ className: classes.followedCounter, component: "div" }, { children: _jsx(FormattedMessage, { id: "ui.categoryHeader.followedBy", defaultMessage: "ui.categoryHeader.followedBy", values: { total: scCategory.followers_counter } }) })), _jsx(CategoryFollowersButton, Object.assign({ category: scCategory, categoryId: scCategory === null || scCategory === void 0 ? void 0 : scCategory.id }, CategoryFollowersButtonProps))] })), _jsx(Box, Object.assign({ className: classes.action }, { children: _jsx(CategoryFollowButton, Object.assign({ category: scCategory, onFollow: handleFollow }, CategoryFollowButtonProps)) }))] }))] })));
}