@selfcommunity/react-ui/lib/esm/components/Category/Category.js

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

import { __rest } from "tslib";
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { useMemo } from 'react';
import { styled } from '@mui/material/styles';
import { Avatar, Tooltip, Typography } from '@mui/material';
import { Link, SCRoutes, useSCFetchCategory, useSCRouting } from '@selfcommunity/react-core';
import { SCCategoryAutoFollowType } from '@selfcommunity/types';
import CategorySkeleton from './Skeleton';
import CategoryFollowButton from '../CategoryFollowButton';
import { defineMessages, useIntl } from 'react-intl';
import classNames from 'classnames';
import { useThemeProps } from '@mui/system';
import BaseItemButton from '../../shared/BaseItemButton';
import { PREFIX } from './constants';
const messages = defineMessages({
    categoryFollowers: {
        id: 'ui.category.categoryFollowers',
        defaultMessage: 'ui.category.categoryFollowers'
    }
});
const classes = {
    root: `${PREFIX}-root`,
    categoryImage: `${PREFIX}-category-image`,
    primary: `${PREFIX}-primary`,
    secondary: `${PREFIX}-secondary`,
    title: `${PREFIX}-title`,
    followed: `${PREFIX}-followed`,
    autoFollowed: `${PREFIX}-auto-followed`,
    actions: `${PREFIX}-actions`
};
const Root = styled(BaseItemButton, {
    name: PREFIX,
    slot: 'Root'
})(() => ({}));
/**
 * > API documentation for the Community-JS Category component. Learn about the available props and the CSS API.
 *
 *
 * This component renders a category item.
 * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Category)

 #### Import
 ```jsx
 import {Category} from '@selfcommunity/react-ui';
 ```
 #### Component Name
 The name `SCCategory` can be used when providing style overrides in the theme.

 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCCategory-root|Styles applied to the root element.|
 |categoryImage|.SCCategory-category-image|Styles applied to category image element.|
 |title|.SCCategory-title|Styles applied to the title element.|
 |actions|.SCCategory-actions|Styles applied to action section.|
 |primary|.SCCategory-primary|Styles applied to category primary section (when showTooltip prop is set to true)|
 |secondary|.SCCategory-secondary|Styles applied to category secondary section (when showTooltip prop is set to true)|
 |followed|.SCCategory-followed|Styles applied to a category item when it is followed|
 |autoFollowed|.SCCategory-auto-followed|Styles applied to a category item when auto followed is set to true|

 * @param inProps
 */
export default function Category(inProps) {
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { categoryId = null, category = null, className = null, elevation, autoHide = false, categoryFollowButtonProps = {}, showFollowers = true, showTooltip = false, ButtonBaseProps = null } = props, rest = __rest(props, ["categoryId", "category", "className", "elevation", "autoHide", "categoryFollowButtonProps", "showFollowers", "showTooltip", "ButtonBaseProps"]);
    // CONTEXT
    const scRoutingContext = useSCRouting();
    // STATE
    const { scCategory, setSCCategory } = useSCFetchCategory({ id: categoryId, category });
    // MEMO
    const _ButtonBaseProps = useMemo(() => (ButtonBaseProps ? ButtonBaseProps : { component: Link, to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, scCategory) }), [ButtonBaseProps, scRoutingContext, scCategory]);
    // HOOKS
    const intl = useIntl();
    if (!scCategory) {
        return _jsx(CategorySkeleton, { elevation: elevation });
    }
    // RENDER
    if (!autoHide) {
        return (_jsx(Root, Object.assign({ disableTypography: showTooltip, elevation: elevation, className: classNames(classes.root, className, { [classes.followed]: scCategory.followed }, { [classes.autoFollowed]: scCategory.auto_follow === SCCategoryAutoFollowType.FORCED }), ButtonBaseProps: _ButtonBaseProps, image: _jsx(Avatar, { alt: scCategory.name, src: scCategory.image_medium, variant: "square", className: classes.categoryImage }), primary: _jsx(_Fragment, { children: showTooltip ? (_jsx(Tooltip, Object.assign({ title: scCategory.name }, { children: _jsx(Typography, Object.assign({ className: classes.primary, component: "span", variant: "body1" }, { children: scCategory.name })) }))) : (scCategory.name) }), secondary: _jsx(_Fragment, { children: showTooltip ? (_jsx(Typography, Object.assign({ className: classes.secondary, component: "p", variant: "body2" }, { children: showFollowers ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan }))) : (_jsx(_Fragment, { children: showFollowers ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan })) }), actions: _jsx(CategoryFollowButton, Object.assign({ category: scCategory }, categoryFollowButtonProps)) }, rest)));
    }
    return null;
}