@selfcommunity/react-ui/lib/cjs/components/CategoryHeader/CategoryHeader.js

React UI Components to integrate a Community created with SelfCommunity Platform.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styles_1 = require("@mui/material/styles");
const material_1 = require("@mui/material");
const CategoryFollowButton_1 = tslib_1.__importDefault(require("../CategoryFollowButton"));
const react_intl_1 = require("react-intl");
const react_core_1 = require("@selfcommunity/react-core");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const system_1 = require("@mui/system");
const CategoryFollowersButton_1 = tslib_1.__importDefault(require("../CategoryFollowersButton"));
const constants_1 = require("./constants");
const classes = {
    root: `${constants_1.PREFIX}-root`,
    cover: `${constants_1.PREFIX}-cover`,
    name: `${constants_1.PREFIX}-name`,
    slogan: `${constants_1.PREFIX}-slogan`,
    info: `${constants_1.PREFIX}-info`,
    followedCounter: `${constants_1.PREFIX}-followed-counter`,
    followed: `${constants_1.PREFIX}-followed`,
    action: `${constants_1.PREFIX}-action`
};
const Root = (0, styles_1.styled)(material_1.Box, {
    name: constants_1.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
 */
function CategoryHeader(inProps) {
    // PROPS
    const props = (0, system_1.useThemeProps)({
        props: inProps,
        name: constants_1.PREFIX
    });
    const { className, categoryId, category, CategoryFollowButtonProps = {}, CategoryFollowersButtonProps = {} } = props, rest = tslib_1.__rest(props, ["className", "categoryId", "category", "CategoryFollowButtonProps", "CategoryFollowersButtonProps"]);
    // STATE
    const { scCategory, setSCCategory } = (0, react_core_1.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 = (0, react_1.useMemo)(() => (Object.assign({}, (scCategory ? { background: `url('${scCategory.emotional_image_original}') center / cover` } : {}))), [scCategory]);
    if (!scCategory) {
        return null;
    }
    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Paper, { style: _backgroundCover, classes: { root: classes.cover } }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.info }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.name, gutterBottom: true }, { children: scCategory.name })), scCategory.slogan && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.slogan }, { children: scCategory.slogan }))), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.followed }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.followedCounter, component: "div" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryHeader.followedBy", defaultMessage: "ui.categoryHeader.followedBy", values: { total: scCategory.followers_counter } }) })), (0, jsx_runtime_1.jsx)(CategoryFollowersButton_1.default, Object.assign({ category: scCategory, categoryId: scCategory === null || scCategory === void 0 ? void 0 : scCategory.id }, CategoryFollowersButtonProps))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.action }, { children: (0, jsx_runtime_1.jsx)(CategoryFollowButton_1.default, Object.assign({ category: scCategory, onFollow: handleFollow }, CategoryFollowButtonProps)) }))] }))] })));
}
exports.default = CategoryHeader;