@selfcommunity/react-ui 0.7.36-alpha.0 → 0.7.36-alpha.2

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

@@ -12,6 +12,8 @@ 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',
@@ -66,14 +68,18 @@ function Category(inProps) {
     const { scCategory, setSCCategory } = (0, react_core_1.useSCFetchCategory)({ id: categoryId, category });
     // MEMO
     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]);
-    // INTL
+    // 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: 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 (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
+                ? (0, string_1.formatCroppedName)(scCategory.name, Category_1.CATEGORY_NAME_MAX_LENGTH_MOBILE)
+                : (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 null;
 }

package/lib/cjs/components/Group/Group.js

@@ -14,6 +14,8 @@ const UserDeletedSnackBar_1 = tslib_1.__importDefault(require("../../shared/User
 const constants_1 = require("./constants");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const GroupSubscribeButton_1 = tslib_1.__importDefault(require("../GroupSubscribeButton"));
+const string_1 = require("../../utils/string");
+const Group_1 = require("../../constants/Group");
 const messages = (0, react_intl_1.defineMessages)({
     groupMembers: {
         id: 'ui.group.members',
@@ -82,13 +84,6 @@ function Group(inProps) {
     const intl = (0, react_intl_1.useIntl)();
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
-    // HELPERS
-    const formatGroupName = (name, maxLength) => {
-        if (name.length <= maxLength) {
-            return name;
-        }
-        return name.substring(0, maxLength) + '...';
-    };
     /**
      * Render authenticated actions
      * @return {JSX.Element}
@@ -109,7 +104,9 @@ function Group(inProps) {
      */
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(Root, Object.assign({ elevation: elevation }, rest, { className: (0, classnames_1.default)(classes.root, className), ButtonBaseProps: { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, scGroup) }, image: react_1.default.createElement(material_1.Avatar, { alt: scGroup.name, src: scGroup.image_medium, className: classes.avatar }), primary: react_1.default.createElement(react_1.default.Fragment, null,
-                isMobile ? formatGroupName(scGroup.name, 15) : formatGroupName(scGroup.name, 20),
+                isMobile
+                    ? (0, string_1.formatCroppedName)(scGroup.name, Group_1.GROUP_NAME_MAX_LENGTH_MOBILE)
+                    : (0, string_1.formatCroppedName)(scGroup.name, Group_1.GROUP_NAME_MAX_LENGTH_DESKTOP),
                 ' ',
                 react_1.default.createElement(material_1.Icon, { className: classes.icon }, (group === null || group === void 0 ? void 0 : group.privacy) === types_1.SCGroupPrivacyType.PRIVATE ? 'private' : 'public')), secondary: `${intl.formatMessage(messages.groupMembers, { total: scGroup.subscribers_counter })}`, actions: hideActions ? null : renderAuthenticatedActions() })),
         openAlert && react_1.default.createElement(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })));

package/lib/cjs/components/SearchAutocomplete/SearchAutocomplete.js

@@ -106,17 +106,26 @@ function SearchAutocomplete(inProps) {
             console.log(error);
         });
     }
+    const optionLabel = (option) => {
+        switch (option.type) {
+            case types_1.SuggestionType.CATEGORY:
+                return option[option.type]['name_synonyms'];
+            case types_1.SuggestionType.USER:
+                return option[option.type]['username'];
+            default:
+                return option[option.type]['name'];
+        }
+    };
     (0, react_1.useEffect)(() => {
         if (value) {
             fetchResults();
         }
     }, [value]);
     return (react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className), blurOnSelect: blurOnSelect, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, freeSolo: true, autoComplete: true, disableClearable: true, loading: isLoading, loadingText: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.searchAutocomplete.loading", defaultMessage: "ui.searchAutocomplete.loading" }), noOptionsText: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.searchAutocomplete.noOptions", defaultMessage: "ui.searchAutocomplete.noOptions" }), options: options, getOptionLabel: (option) => {
-            var _a;
             if (typeof option === 'string') {
                 return option;
             }
-            return (_a = option[option.type]['username']) !== null && _a !== void 0 ? _a : option[option.type]['name'];
+            return optionLabel(option);
         }, renderOption: (props, option) => (react_1.default.createElement(material_1.Box, Object.assign({ component: "li" }, props),
             react_1.default.createElement(material_1.Avatar, { alt: getOptionData(option).name, src: getOptionData(option).image, variant: getOptionData(option).variant }),
             react_1.default.createElement(material_1.Typography, { ml: 1 }, getOptionData(option).name))), renderInput: (params) => (react_1.default.createElement(material_1.TextField, Object.assign({}, params, { placeholder: `${intl.formatMessage(messages.placeholder, {

package/lib/cjs/constants/Category.d.ts

@@ -0,0 +1,2 @@
+export declare const CATEGORY_NAME_MAX_LENGTH_MOBILE = 15;
+export declare const CATEGORY_NAME_MAX_LENGTH_DESKTOP = 20;

package/lib/cjs/constants/Category.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CATEGORY_NAME_MAX_LENGTH_DESKTOP = exports.CATEGORY_NAME_MAX_LENGTH_MOBILE = void 0;
+exports.CATEGORY_NAME_MAX_LENGTH_MOBILE = 15;
+exports.CATEGORY_NAME_MAX_LENGTH_DESKTOP = 20;

package/lib/cjs/constants/Group.d.ts

@@ -1,2 +1,4 @@
 export declare const GROUP_TITLE_MAX_LENGTH = 40;
 export declare const GROUP_DESCRIPTION_MAX_LENGTH = 500;
+export declare const GROUP_NAME_MAX_LENGTH_MOBILE = 15;
+export declare const GROUP_NAME_MAX_LENGTH_DESKTOP = 20;

package/lib/cjs/constants/Group.js

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.GROUP_DESCRIPTION_MAX_LENGTH = exports.GROUP_TITLE_MAX_LENGTH = void 0;
+exports.GROUP_NAME_MAX_LENGTH_DESKTOP = exports.GROUP_NAME_MAX_LENGTH_MOBILE = exports.GROUP_DESCRIPTION_MAX_LENGTH = exports.GROUP_TITLE_MAX_LENGTH = void 0;
 exports.GROUP_TITLE_MAX_LENGTH = 40;
 exports.GROUP_DESCRIPTION_MAX_LENGTH = 500;
+exports.GROUP_NAME_MAX_LENGTH_MOBILE = 15;
+exports.GROUP_NAME_MAX_LENGTH_DESKTOP = 20;

package/lib/cjs/utils/string.d.ts

@@ -0,0 +1 @@
+export declare const formatCroppedName: (name: any, maxLength: any) => any;

package/lib/cjs/utils/string.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatCroppedName = void 0;
+const formatCroppedName = (name, maxLength) => {
+    if (name.length <= maxLength) {
+        return name;
+    }
+    return name.substring(0, maxLength) + '...';
+};
+exports.formatCroppedName = formatCroppedName;

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

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import React, { useMemo } from 'react';
 import { styled } from '@mui/material/styles';
-import { Avatar } from '@mui/material';
+import { Avatar, useMediaQuery, useTheme } from '@mui/material';
 import { Link, SCRoutes, useSCFetchCategory, useSCRouting } from '@selfcommunity/react-core';
 import CategorySkeleton from './Skeleton';
 import CategoryFollowButton from '../CategoryFollowButton';
@@ -10,6 +10,8 @@ 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, CATEGORY_NAME_MAX_LENGTH_MOBILE } from '../../constants/Category';
 const messages = defineMessages({
     categoryFollowers: {
         id: 'ui.category.categoryFollowers',
@@ -64,14 +66,18 @@ export default function Category(inProps) {
     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]);
-    // INTL
+    // 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: 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 (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
+                ? formatCroppedName(scCategory.name, CATEGORY_NAME_MAX_LENGTH_MOBILE)
+                : 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 null;
 }

package/lib/esm/components/Group/Group.js

@@ -12,6 +12,8 @@ import UserDeletedSnackBar from '../../shared/UserDeletedSnackBar';
 import { PREFIX } from './constants';
 import GroupSkeleton from './Skeleton';
 import GroupSubscribeButton from '../GroupSubscribeButton';
+import { formatCroppedName } from '../../utils/string';
+import { GROUP_NAME_MAX_LENGTH_DESKTOP, GROUP_NAME_MAX_LENGTH_MOBILE } from '../../constants/Group';
 const messages = defineMessages({
     groupMembers: {
         id: 'ui.group.members',
@@ -80,13 +82,6 @@ export default function Group(inProps) {
     const intl = useIntl();
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
-    // HELPERS
-    const formatGroupName = (name, maxLength) => {
-        if (name.length <= maxLength) {
-            return name;
-        }
-        return name.substring(0, maxLength) + '...';
-    };
     /**
      * Render authenticated actions
      * @return {JSX.Element}
@@ -107,7 +102,9 @@ export default function Group(inProps) {
      */
     return (React.createElement(React.Fragment, null,
         React.createElement(Root, Object.assign({ elevation: elevation }, rest, { className: classNames(classes.root, className), ButtonBaseProps: { component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, scGroup) }, image: React.createElement(Avatar, { alt: scGroup.name, src: scGroup.image_medium, className: classes.avatar }), primary: React.createElement(React.Fragment, null,
-                isMobile ? formatGroupName(scGroup.name, 15) : formatGroupName(scGroup.name, 20),
+                isMobile
+                    ? formatCroppedName(scGroup.name, GROUP_NAME_MAX_LENGTH_MOBILE)
+                    : formatCroppedName(scGroup.name, GROUP_NAME_MAX_LENGTH_DESKTOP),
                 ' ',
                 React.createElement(Icon, { className: classes.icon }, (group === null || group === void 0 ? void 0 : group.privacy) === SCGroupPrivacyType.PRIVATE ? 'private' : 'public')), secondary: `${intl.formatMessage(messages.groupMembers, { total: scGroup.subscribers_counter })}`, actions: hideActions ? null : renderAuthenticatedActions() })),
         openAlert && React.createElement(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })));

package/lib/esm/components/SearchAutocomplete/SearchAutocomplete.js

@@ -104,17 +104,26 @@ export default function SearchAutocomplete(inProps) {
             console.log(error);
         });
     }
+    const optionLabel = (option) => {
+        switch (option.type) {
+            case SuggestionType.CATEGORY:
+                return option[option.type]['name_synonyms'];
+            case SuggestionType.USER:
+                return option[option.type]['username'];
+            default:
+                return option[option.type]['name'];
+        }
+    };
     useEffect(() => {
         if (value) {
             fetchResults();
         }
     }, [value]);
     return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className), blurOnSelect: blurOnSelect, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, freeSolo: true, autoComplete: true, disableClearable: true, loading: isLoading, loadingText: React.createElement(FormattedMessage, { id: "ui.searchAutocomplete.loading", defaultMessage: "ui.searchAutocomplete.loading" }), noOptionsText: React.createElement(FormattedMessage, { id: "ui.searchAutocomplete.noOptions", defaultMessage: "ui.searchAutocomplete.noOptions" }), options: options, getOptionLabel: (option) => {
-            var _a;
             if (typeof option === 'string') {
                 return option;
             }
-            return (_a = option[option.type]['username']) !== null && _a !== void 0 ? _a : option[option.type]['name'];
+            return optionLabel(option);
         }, renderOption: (props, option) => (React.createElement(Box, Object.assign({ component: "li" }, props),
             React.createElement(Avatar, { alt: getOptionData(option).name, src: getOptionData(option).image, variant: getOptionData(option).variant }),
             React.createElement(Typography, { ml: 1 }, getOptionData(option).name))), renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { placeholder: `${intl.formatMessage(messages.placeholder, {

package/lib/esm/constants/Category.d.ts

@@ -0,0 +1,2 @@
+export declare const CATEGORY_NAME_MAX_LENGTH_MOBILE = 15;
+export declare const CATEGORY_NAME_MAX_LENGTH_DESKTOP = 20;

package/lib/esm/constants/Category.js

@@ -0,0 +1,2 @@
+export const CATEGORY_NAME_MAX_LENGTH_MOBILE = 15;
+export const CATEGORY_NAME_MAX_LENGTH_DESKTOP = 20;

package/lib/esm/constants/Group.d.ts

@@ -1,2 +1,4 @@
 export declare const GROUP_TITLE_MAX_LENGTH = 40;
 export declare const GROUP_DESCRIPTION_MAX_LENGTH = 500;
+export declare const GROUP_NAME_MAX_LENGTH_MOBILE = 15;
+export declare const GROUP_NAME_MAX_LENGTH_DESKTOP = 20;

package/lib/esm/constants/Group.js

@@ -1,2 +1,4 @@
 export const GROUP_TITLE_MAX_LENGTH = 40;
 export const GROUP_DESCRIPTION_MAX_LENGTH = 500;
+export const GROUP_NAME_MAX_LENGTH_MOBILE = 15;
+export const GROUP_NAME_MAX_LENGTH_DESKTOP = 20;

package/lib/esm/utils/string.d.ts

@@ -0,0 +1 @@
+export declare const formatCroppedName: (name: any, maxLength: any) => any;

package/lib/esm/utils/string.js

@@ -0,0 +1,6 @@
+export const formatCroppedName = (name, maxLength) => {
+    if (name.length <= maxLength) {
+        return name;
+    }
+    return name.substring(0, maxLength) + '...';
+};