@selfcommunity/react-ui 0.7.35-alpha.1 → 0.7.36-alpha.0

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

@@ -78,8 +78,17 @@ function Group(inProps) {
     // CONST
     const isGroupAdmin = (0, react_1.useMemo)(() => { var _a; return scUserContext.user && ((_a = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _a === void 0 ? void 0 : _a.id) === scUserContext.user.id; }, [scUserContext.user, (_a = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _a === void 0 ? void 0 : _a.id]);
     const [openAlert, setOpenAlert] = (0, react_1.useState)(false);
-    // 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'));
+    // HELPERS
+    const formatGroupName = (name, maxLength) => {
+        if (name.length <= maxLength) {
+            return name;
+        }
+        return name.substring(0, maxLength) + '...';
+    };
     /**
      * Render authenticated actions
      * @return {JSX.Element}
@@ -100,8 +109,8 @@ 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,
-                scGroup.name,
-                " ",
+                isMobile ? formatGroupName(scGroup.name, 15) : formatGroupName(scGroup.name, 20),
+                ' ',
                 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/GroupForm/GroupForm.js

@@ -92,7 +92,7 @@ const Root = (0, styles_1.styled)(BaseDialog_1.default, {
  * @param inProps
  */
 function GroupForm(inProps) {
-    var _a;
+    var _a, _b, _c, _d, _e;
     //PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
@@ -213,7 +213,10 @@ function GroupForm(inProps) {
     /**
      * Renders root object
      */
-    return (react_1.default.createElement(Root, Object.assign({ DialogContentProps: { dividers: false }, title: group ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.title.edit", defaultMessage: "ui.groupForm.title.edit" })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.title", defaultMessage: "ui.groupForm.title" })), open: open, onClose: onClose, className: (0, classnames_1.default)(classes.root, className), actions: react_1.default.createElement(lab_1.LoadingButton, { loading: field.isSubmitting, disabled: !field.name || Object.keys(error).length !== 0, variant: "contained", onClick: handleSubmit, color: "secondary" }, group ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.button.edit", defaultMessage: "ui.groupForm.button.edit" })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.button.create", defaultMessage: "ui.groupForm.button.create" }))) }, rest),
+    return (react_1.default.createElement(Root, Object.assign({ DialogContentProps: { dividers: false }, title: group ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.title.edit", defaultMessage: "ui.groupForm.title.edit" })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.title", defaultMessage: "ui.groupForm.title" })), open: open, onClose: onClose, className: (0, classnames_1.default)(classes.root, className), actions: react_1.default.createElement(lab_1.LoadingButton, { loading: field.isSubmitting, disabled: !field.name ||
+                Object.keys(error).length !== 0 ||
+                field.name.length > Group_1.GROUP_TITLE_MAX_LENGTH ||
+                field.name.description > Group_1.GROUP_DESCRIPTION_MAX_LENGTH, variant: "contained", onClick: handleSubmit, color: "secondary" }, group ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.button.edit", defaultMessage: "ui.groupForm.button.edit" })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.button.create", defaultMessage: "ui.groupForm.button.create" }))) }, rest),
         react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(material_1.Paper, { style: _backgroundCover, classes: { root: classes.cover } },
@@ -226,10 +229,10 @@ function GroupForm(inProps) {
             react_1.default.createElement(material_1.FormGroup, { className: classes.form },
                 react_1.default.createElement(material_1.TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
                         endAdornment: react_1.default.createElement(material_1.Typography, { variant: "body2" }, Group_1.GROUP_TITLE_MAX_LENGTH - field.name.length)
-                    } }),
+                    }, error: Boolean(((_a = field === null || field === void 0 ? void 0 : field.name) === null || _a === void 0 ? void 0 : _a.length) > Group_1.GROUP_TITLE_MAX_LENGTH), helperText: ((_b = field === null || field === void 0 ? void 0 : field.name) === null || _b === void 0 ? void 0 : _b.length) > Group_1.GROUP_TITLE_MAX_LENGTH ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.name.error.maxLength", defaultMessage: "ui.groupForm.name.error.maxLength" })) : null }),
                 react_1.default.createElement(material_1.TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
-                        endAdornment: (react_1.default.createElement(material_1.Typography, { variant: "body2" }, ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? Group_1.GROUP_DESCRIPTION_MAX_LENGTH - field.description.length : Group_1.GROUP_DESCRIPTION_MAX_LENGTH))
-                    } }),
+                        endAdornment: (react_1.default.createElement(material_1.Typography, { variant: "body2" }, ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) ? Group_1.GROUP_DESCRIPTION_MAX_LENGTH - field.description.length : Group_1.GROUP_DESCRIPTION_MAX_LENGTH))
+                    }, error: Boolean(((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > Group_1.GROUP_DESCRIPTION_MAX_LENGTH), helperText: ((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > Group_1.GROUP_DESCRIPTION_MAX_LENGTH ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.description.error.maxLength", defaultMessage: "ui.groupForm.description.error.maxLength" })) : null }),
                 react_1.default.createElement(material_1.Box, { className: classes.privacySection },
                     react_1.default.createElement(material_1.Typography, { variant: "h4" },
                         react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.privacy.title", defaultMessage: "ui.groupForm.privacy.title", values: {

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

@@ -1,2 +1,2 @@
-export declare const GROUP_TITLE_MAX_LENGTH = 50;
+export declare const GROUP_TITLE_MAX_LENGTH = 40;
 export declare const GROUP_DESCRIPTION_MAX_LENGTH = 500;

package/lib/cjs/constants/Group.js

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

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

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import React, { useMemo, useState } from 'react';
 import { styled } from '@mui/material/styles';
-import { Avatar, Button, Icon, Stack } from '@mui/material';
+import { Avatar, Button, Icon, Stack, useMediaQuery, useTheme } from '@mui/material';
 import { SCGroupPrivacyType, SCGroupSubscriptionStatusType } from '@selfcommunity/types';
 import { Link, SCRoutes, useSCFetchGroup, useSCRouting, useSCUser } from '@selfcommunity/react-core';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -76,8 +76,17 @@ export default function Group(inProps) {
     // CONST
     const isGroupAdmin = useMemo(() => { var _a; return scUserContext.user && ((_a = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _a === void 0 ? void 0 : _a.id) === scUserContext.user.id; }, [scUserContext.user, (_a = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _a === void 0 ? void 0 : _a.id]);
     const [openAlert, setOpenAlert] = useState(false);
-    // INTL
+    // HOOKS
     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}
@@ -98,8 +107,8 @@ 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,
-                scGroup.name,
-                " ",
+                isMobile ? formatGroupName(scGroup.name, 15) : formatGroupName(scGroup.name, 20),
+                ' ',
                 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/GroupForm/GroupForm.js

@@ -90,7 +90,7 @@ const Root = styled(BaseDialog, {
  * @param inProps
  */
 export default function GroupForm(inProps) {
-    var _a;
+    var _a, _b, _c, _d, _e;
     //PROPS
     const props = useThemeProps({
         props: inProps,
@@ -211,7 +211,10 @@ export default function GroupForm(inProps) {
     /**
      * Renders root object
      */
-    return (React.createElement(Root, Object.assign({ DialogContentProps: { dividers: false }, title: group ? (React.createElement(FormattedMessage, { id: "ui.groupForm.title.edit", defaultMessage: "ui.groupForm.title.edit" })) : (React.createElement(FormattedMessage, { id: "ui.groupForm.title", defaultMessage: "ui.groupForm.title" })), open: open, onClose: onClose, className: classNames(classes.root, className), actions: React.createElement(LoadingButton, { loading: field.isSubmitting, disabled: !field.name || Object.keys(error).length !== 0, variant: "contained", onClick: handleSubmit, color: "secondary" }, group ? (React.createElement(FormattedMessage, { id: "ui.groupForm.button.edit", defaultMessage: "ui.groupForm.button.edit" })) : (React.createElement(FormattedMessage, { id: "ui.groupForm.button.create", defaultMessage: "ui.groupForm.button.create" }))) }, rest),
+    return (React.createElement(Root, Object.assign({ DialogContentProps: { dividers: false }, title: group ? (React.createElement(FormattedMessage, { id: "ui.groupForm.title.edit", defaultMessage: "ui.groupForm.title.edit" })) : (React.createElement(FormattedMessage, { id: "ui.groupForm.title", defaultMessage: "ui.groupForm.title" })), open: open, onClose: onClose, className: classNames(classes.root, className), actions: React.createElement(LoadingButton, { loading: field.isSubmitting, disabled: !field.name ||
+                Object.keys(error).length !== 0 ||
+                field.name.length > GROUP_TITLE_MAX_LENGTH ||
+                field.name.description > GROUP_DESCRIPTION_MAX_LENGTH, variant: "contained", onClick: handleSubmit, color: "secondary" }, group ? (React.createElement(FormattedMessage, { id: "ui.groupForm.button.edit", defaultMessage: "ui.groupForm.button.edit" })) : (React.createElement(FormattedMessage, { id: "ui.groupForm.button.create", defaultMessage: "ui.groupForm.button.create" }))) }, rest),
         React.createElement(React.Fragment, null,
             React.createElement(React.Fragment, null,
                 React.createElement(Paper, { style: _backgroundCover, classes: { root: classes.cover } },
@@ -224,10 +227,10 @@ export default function GroupForm(inProps) {
             React.createElement(FormGroup, { className: classes.form },
                 React.createElement(TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
                         endAdornment: React.createElement(Typography, { variant: "body2" }, GROUP_TITLE_MAX_LENGTH - field.name.length)
-                    } }),
+                    }, error: Boolean(((_a = field === null || field === void 0 ? void 0 : field.name) === null || _a === void 0 ? void 0 : _a.length) > GROUP_TITLE_MAX_LENGTH), helperText: ((_b = field === null || field === void 0 ? void 0 : field.name) === null || _b === void 0 ? void 0 : _b.length) > GROUP_TITLE_MAX_LENGTH ? (React.createElement(FormattedMessage, { id: "ui.groupForm.name.error.maxLength", defaultMessage: "ui.groupForm.name.error.maxLength" })) : null }),
                 React.createElement(TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
-                        endAdornment: (React.createElement(Typography, { variant: "body2" }, ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? GROUP_DESCRIPTION_MAX_LENGTH - field.description.length : GROUP_DESCRIPTION_MAX_LENGTH))
-                    } }),
+                        endAdornment: (React.createElement(Typography, { variant: "body2" }, ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) ? GROUP_DESCRIPTION_MAX_LENGTH - field.description.length : GROUP_DESCRIPTION_MAX_LENGTH))
+                    }, error: Boolean(((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > GROUP_DESCRIPTION_MAX_LENGTH), helperText: ((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > GROUP_DESCRIPTION_MAX_LENGTH ? (React.createElement(FormattedMessage, { id: "ui.groupForm.description.error.maxLength", defaultMessage: "ui.groupForm.description.error.maxLength" })) : null }),
                 React.createElement(Box, { className: classes.privacySection },
                     React.createElement(Typography, { variant: "h4" },
                         React.createElement(FormattedMessage, { id: "ui.groupForm.privacy.title", defaultMessage: "ui.groupForm.privacy.title", values: {

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

@@ -1,2 +1,2 @@
-export declare const GROUP_TITLE_MAX_LENGTH = 50;
+export declare const GROUP_TITLE_MAX_LENGTH = 40;
 export declare const GROUP_DESCRIPTION_MAX_LENGTH = 500;

package/lib/esm/constants/Group.js

@@ -1,2 +1,2 @@
-export const GROUP_TITLE_MAX_LENGTH = 50;
+export const GROUP_TITLE_MAX_LENGTH = 40;
 export const GROUP_DESCRIPTION_MAX_LENGTH = 500;