@selfcommunity/react-ui 0.7.42-alpha.0 → 0.7.42-alpha.1

package/lib/cjs/components/Category/Category.js

@@ -5,6 +5,7 @@ const react_1 = tslib_1.__importStar(require("react"));
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_core_1 = require("@selfcommunity/react-core");
+const types_1 = require("@selfcommunity/types");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const CategoryFollowButton_1 = tslib_1.__importDefault(require("../CategoryFollowButton"));
 const react_intl_1 = require("react-intl");
@@ -12,8 +13,6 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
 const BaseItemButton_1 = tslib_1.__importDefault(require("../../shared/BaseItemButton"));
 const constants_1 = require("./constants");
-const string_1 = require("../../utils/string");
-const Category_1 = require("../../constants/Category");
 const messages = (0, react_intl_1.defineMessages)({
     categoryFollowers: {
         id: 'ui.category.categoryFollowers',
@@ -24,6 +23,8 @@ const classes = {
     root: `${constants_1.PREFIX}-root`,
     categoryImage: `${constants_1.PREFIX}-category-image`,
     title: `${constants_1.PREFIX}-title`,
+    followed: `${constants_1.PREFIX}-followed`,
+    autoFollowed: `${constants_1.PREFIX}-auto-followed`,
     actions: `${constants_1.PREFIX}-actions`
 };
 const Root = (0, styles_1.styled)(BaseItemButton_1.default, {
@@ -70,14 +71,12 @@ function Category(inProps) {
     const _ButtonBaseProps = (0, react_1.useMemo)(() => (ButtonBaseProps ? ButtonBaseProps : { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.CATEGORY_ROUTE_NAME, scCategory) }), [ButtonBaseProps, scRoutingContext, scCategory]);
     // HOOKS
     const intl = (0, react_intl_1.useIntl)();
-    const theme = (0, material_1.useTheme)();
-    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
     if (!scCategory) {
         return react_1.default.createElement(Skeleton_1.default, { elevation: elevation });
     }
     // RENDER
     if (!autoHide) {
-        return (react_1.default.createElement(Root, Object.assign({ elevation: elevation, className: (0, classnames_1.default)(classes.root, className), ButtonBaseProps: _ButtonBaseProps, image: react_1.default.createElement(material_1.Avatar, { alt: scCategory.name, src: scCategory.image_medium, variant: "square", className: classes.categoryImage }), primary: isMobile ? scCategory.name : (0, string_1.formatCroppedName)(scCategory.name, Category_1.CATEGORY_NAME_MAX_LENGTH_DESKTOP), secondary: showFollowers ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan, actions: react_1.default.createElement(CategoryFollowButton_1.default, Object.assign({ category: scCategory }, categoryFollowButtonProps)) }, rest)));
+        return (react_1.default.createElement(Root, Object.assign({ elevation: elevation, className: (0, classnames_1.default)(classes.root, className, { [classes.followed]: scCategory.followed }, { [classes.autoFollowed]: scCategory.auto_follow === types_1.SCCategoryAutoFollowType.FORCED }), ButtonBaseProps: _ButtonBaseProps, image: react_1.default.createElement(material_1.Avatar, { alt: scCategory.name, src: scCategory.image_medium, variant: "square", className: classes.categoryImage }), primary: scCategory.name, secondary: showFollowers ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan, actions: react_1.default.createElement(CategoryFollowButton_1.default, Object.assign({ category: scCategory }, categoryFollowButtonProps)) }, rest)));
     }
     return null;
 }

package/lib/esm/components/Category/Category.js

@@ -1,8 +1,9 @@
 import { __rest } from "tslib";
 import React, { useMemo } from 'react';
 import { styled } from '@mui/material/styles';
-import { Avatar, useMediaQuery, useTheme } from '@mui/material';
+import { Avatar } 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';
@@ -10,8 +11,6 @@ import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 import BaseItemButton from '../../shared/BaseItemButton';
 import { PREFIX } from './constants';
-import { formatCroppedName } from '../../utils/string';
-import { CATEGORY_NAME_MAX_LENGTH_DESKTOP } from '../../constants/Category';
 const messages = defineMessages({
     categoryFollowers: {
         id: 'ui.category.categoryFollowers',
@@ -22,6 +21,8 @@ const classes = {
     root: `${PREFIX}-root`,
     categoryImage: `${PREFIX}-category-image`,
     title: `${PREFIX}-title`,
+    followed: `${PREFIX}-followed`,
+    autoFollowed: `${PREFIX}-auto-followed`,
     actions: `${PREFIX}-actions`
 };
 const Root = styled(BaseItemButton, {
@@ -68,14 +69,12 @@ export default function Category(inProps) {
     const _ButtonBaseProps = useMemo(() => (ButtonBaseProps ? ButtonBaseProps : { component: Link, to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, scCategory) }), [ButtonBaseProps, scRoutingContext, scCategory]);
     // HOOKS
     const intl = useIntl();
-    const theme = useTheme();
-    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
     if (!scCategory) {
         return React.createElement(CategorySkeleton, { elevation: elevation });
     }
     // RENDER
     if (!autoHide) {
-        return (React.createElement(Root, Object.assign({ elevation: elevation, className: classNames(classes.root, className), ButtonBaseProps: _ButtonBaseProps, image: React.createElement(Avatar, { alt: scCategory.name, src: scCategory.image_medium, variant: "square", className: classes.categoryImage }), primary: isMobile ? scCategory.name : formatCroppedName(scCategory.name, CATEGORY_NAME_MAX_LENGTH_DESKTOP), secondary: showFollowers ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan, actions: React.createElement(CategoryFollowButton, Object.assign({ category: scCategory }, categoryFollowButtonProps)) }, rest)));
+        return (React.createElement(Root, Object.assign({ elevation: elevation, className: classNames(classes.root, className, { [classes.followed]: scCategory.followed }, { [classes.autoFollowed]: scCategory.auto_follow === SCCategoryAutoFollowType.FORCED }), ButtonBaseProps: _ButtonBaseProps, image: React.createElement(Avatar, { alt: scCategory.name, src: scCategory.image_medium, variant: "square", className: classes.categoryImage }), primary: scCategory.name, secondary: showFollowers ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan, actions: React.createElement(CategoryFollowButton, Object.assign({ category: scCategory }, categoryFollowButtonProps)) }, rest)));
     }
     return null;
 }