@selfcommunity/react-ui 0.9.1 → 0.10.0-alpha.0

package/lib/esm/components/Events/PastEventsFilter.js

@@ -1,8 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Icon } from '@mui/material';
+import { Icon, useThemeProps } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
-import { useThemeProps } from '@mui/system';
 import { PREFIX } from './constants';
 import { EventsChipRoot } from './Events';
 export default function PastEventsFilter(inProps) {
@@ -15,16 +14,7 @@ export default function PastEventsFilter(inProps) {
     if (autoHide) {
         return null;
     }
-    return (_jsx(EventsChipRoot
-    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-    // @ts-ignore
-    , Object.assign({ 
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-        // @ts-ignore
-        color: showPastEvents ? 'secondary' : 'default', 
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-        // @ts-ignore
-        variant: showPastEvents ? 'filled' : 'outlined', label: _jsx(FormattedMessage, { id: "ui.events.filterByPastEvents", defaultMessage: "ui.events.filterByPastEvents" }), onClick: handleClick, 
+    return (_jsx(EventsChipRoot, Object.assign({ color: showPastEvents ? 'secondary' : 'default', variant: showPastEvents ? 'filled' : 'outlined', label: _jsx(FormattedMessage, { id: "ui.events.filterByPastEvents", defaultMessage: "ui.events.filterByPastEvents" }), onClick: handleClick, 
         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
         // @ts-ignore
         showPastEvents: showPastEvents, deleteIcon: showPastEvents ? _jsx(Icon, { children: "close" }) : null, onDelete: showPastEvents ? handleDeleteClick : undefined }, rest)));

package/lib/esm/components/GroupMembersButton/GroupMembersButton.d.ts

@@ -1,6 +1,6 @@
-import { BaseDialogProps } from '../../shared/BaseDialog';
-import { SCGroupType } from '@selfcommunity/types';
 import { ButtonProps } from '@mui/material/Button/Button';
+import { SCGroupType } from '@selfcommunity/types';
+import { BaseDialogProps } from '../../shared/BaseDialog';
 export interface GroupMembersButtonProps extends Pick<ButtonProps, Exclude<keyof ButtonProps, 'onClick' | 'disabled'>> {
     /**
      * Group Object

package/lib/esm/components/GroupMembersButton/GroupMembersButton.js

@@ -1,22 +1,23 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from 'react';
-import { styled } from '@mui/material/styles';
 import { Avatar, AvatarGroup, Button, List, ListItem, Typography, useTheme } from '@mui/material';
-import BaseDialog from '../../shared/BaseDialog';
-import { FormattedMessage } from 'react-intl';
-import InfiniteScroll from '../../shared/InfiniteScroll';
-import User, { UserSkeleton } from '../User';
+import { styled } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useThemeProps } from '@mui/system';
 import { Endpoints, GroupService, http } from '@selfcommunity/api-services';
 import { useSCFetchGroup } from '@selfcommunity/react-core';
 import { SCGroupPrivacyType, SCGroupSubscriptionStatusType } from '@selfcommunity/types';
-import AvatarGroupSkeleton from '../Skeleton/AvatarGroupSkeleton';
-import classNames from 'classnames';
-import { useThemeProps } from '@mui/system';
-import useMediaQuery from '@mui/material/useMediaQuery';
 import { Logger } from '@selfcommunity/utils';
-import { SCOPE_SC_UI } from '../../constants/Errors';
+import classNames from 'classnames';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { useDeepCompareEffectNoCheck } from 'use-deep-compare-effect';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import BaseDialog from '../../shared/BaseDialog';
+import InfiniteScroll from '../../shared/InfiniteScroll';
+import { numberFormatter } from '../../utils/buttonCounters';
+import AvatarGroupSkeleton from '../Skeleton/AvatarGroupSkeleton';
+import User, { UserSkeleton } from '../User';
 const PREFIX = 'SCGroupMembersButton';
 const classes = {
     root: `${PREFIX}-root`,
@@ -26,12 +27,12 @@ const classes = {
 const Root = styled(Button, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    overridesResolver: (_props, styles) => styles.root
 })(() => ({}));
 const DialogRoot = styled(BaseDialog, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.dialogRoot
+    overridesResolver: (_props, styles) => styles.dialogRoot
 })(() => ({}));
 /**
  *> API documentation for the Community-JS Group Members Button component. Learn about the available props and the CSS API.
@@ -125,8 +126,9 @@ export default function GroupMembersButton(inProps) {
     const handleToggleDialogOpen = useMemo(() => () => {
         setOpen((prev) => !prev);
     }, [setOpen]);
+    const renderSurplus = useCallback(() => numberFormatter(scGroup.subscribers_counter), [scGroup]);
     // RENDER
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
-    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scGroup || scGroup.subscribers_counter === 0 }, rest, { children: loading || !scGroup ? (_jsx(AvatarGroupSkeleton, Object.assign({}, rest))) : (_jsx(AvatarGroup, Object.assign({ total: scGroup.subscribers_counter }, { children: members.map((c) => (_jsx(Avatar, { alt: c.username, src: c.avatar }, c.id))) }))) })), open && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.groupMembersButton.dialogTitle", id: "ui.groupMembersButton.dialogTitle", values: { total: scGroup.subscribers_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: members.length, next: fetchMembers, hasMoreNext: next !== null || loading, loaderNext: _jsx(UserSkeleton, { elevation: 0 }), height: isMobile ? '100%' : 400, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.groupMembersButton.noOtherMembers", defaultMessage: "ui.groupMembersButton.noOtherMembers" }) })) }, { children: _jsx(List, { children: members.map((member) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: member, onClick: handleToggleDialogOpen }) }, member.id))) }) })) })))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scGroup || scGroup.subscribers_counter === 0 }, rest, { children: loading || !scGroup ? (_jsx(AvatarGroupSkeleton, Object.assign({}, rest))) : (_jsx(AvatarGroup, Object.assign({ total: scGroup.subscribers_counter, renderSurplus: renderSurplus }, { children: members.map((c) => (_jsx(Avatar, { alt: c.username, src: c.avatar }, c.id))) }))) })), open && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.groupMembersButton.dialogTitle", id: "ui.groupMembersButton.dialogTitle", values: { total: scGroup.subscribers_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: members.length, next: fetchMembers, hasMoreNext: next !== null || loading, loaderNext: _jsx(UserSkeleton, { elevation: 0 }), height: isMobile ? '100%' : 400, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.groupMembersButton.noOtherMembers", defaultMessage: "ui.groupMembersButton.noOtherMembers" }) })) }, { children: _jsx(List, { children: members.map((member) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: member, onClick: handleToggleDialogOpen }) }, member.id))) }) })) })))] }));
 }

package/lib/esm/components/SuggestedEventsWidget/Arrow.js

@@ -23,5 +23,6 @@ export default function Arrow(props) {
     if (type === 'prev') {
         return (currentItem > 0 && (_jsx(Button, Object.assign({ variant: "contained", className: className, size: "medium", onClick: () => handleChange('prev') }, { children: _jsx(Icon, { children: "chevron_left" }) }))));
     }
-    return (currentItem < itemsLength - 1 && (_jsx(Button, Object.assign({ variant: "contained", className: className, size: "medium", onClick: () => handleChange('next') }, { children: _jsx(Icon, { children: "chevron_right" }) }))));
+    return (itemsLength > 2 &&
+        currentItem < itemsLength - 1 && (_jsx(Button, Object.assign({ variant: "contained", className: className, size: "medium", onClick: () => handleChange('next') }, { children: _jsx(Icon, { children: "chevron_right" }) }))));
 }

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

@@ -0,0 +1 @@
+export declare function numberFormatter(num: number): JSX.Element;

package/lib/esm/utils/buttonCounters.js

@@ -0,0 +1,11 @@
+import { Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export function numberFormatter(num) {
+    const surplus = num - 3;
+    if (surplus > 999999) {
+        return _jsxs(_Fragment, { children: ["+", (Math.abs(surplus) / 1000000).toFixed(1), "M"] });
+    }
+    else if (num > 999) {
+        return _jsxs(_Fragment, { children: ["+", (Math.abs(surplus) / 1000).toFixed(1), "K"] });
+    }
+    return _jsxs(_Fragment, { children: ["+", surplus] });
+}