@selfcommunity/react-ui 0.10.2-alpha.0 → 0.10.2-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/CategoryFollowersButton/CategoryFollowersButton.js +7 -4
- package/lib/cjs/components/EventParticipantsButton/EventParticipantsButton.js +5 -2
- package/lib/cjs/components/GroupMembersButton/GroupMembersButton.js +6 -3
- package/lib/cjs/components/Skeleton/AvatarGroupSkeleton.js +4 -4
- package/lib/esm/components/CategoryFollowersButton/CategoryFollowersButton.js +7 -4
- package/lib/esm/components/EventParticipantsButton/EventParticipantsButton.js +5 -2
- package/lib/esm/components/GroupMembersButton/GroupMembersButton.js +6 -3
- package/lib/esm/components/Skeleton/AvatarGroupSkeleton.js +4 -4
- package/lib/umd/react-ui.js +1 -1
- package/package.json +2 -2
|
@@ -28,12 +28,13 @@ const classes = {
|
|
|
28
28
|
const Root = (0, styles_1.styled)(material_1.Button, {
|
|
29
29
|
name: PREFIX,
|
|
30
30
|
slot: 'Root',
|
|
31
|
-
overridesResolver: (
|
|
31
|
+
overridesResolver: (_props, styles) => styles.root,
|
|
32
|
+
shouldForwardProp: (prop) => prop !== 'followers'
|
|
32
33
|
})(() => ({}));
|
|
33
34
|
const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
|
|
34
35
|
name: PREFIX,
|
|
35
|
-
slot: '
|
|
36
|
-
overridesResolver: (
|
|
36
|
+
slot: 'DialogRoot',
|
|
37
|
+
overridesResolver: (_props, styles) => styles.dialogRoot
|
|
37
38
|
})(() => ({}));
|
|
38
39
|
/**
|
|
39
40
|
*> API documentation for the Community-JS Category Followers Button component. Learn about the available props and the CSS API.
|
|
@@ -127,6 +128,8 @@ function CategoryFollowersButton(inProps) {
|
|
|
127
128
|
// RENDER
|
|
128
129
|
const theme = (0, material_1.useTheme)();
|
|
129
130
|
const isMobile = (0, useMediaQuery_1.default)(theme.breakpoints.down('md'));
|
|
130
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scCategory || scCategory.followers_counter === 0
|
|
131
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scCategory || scCategory.followers_counter === 0,
|
|
132
|
+
// @ts-expect-error this is needed to use followers into SCCategoryFollowersButton
|
|
133
|
+
followers: scCategory === null || scCategory === void 0 ? void 0 : scCategory.followers_counter }, rest, { children: loading || !scCategory ? ((0, jsx_runtime_1.jsx)(AvatarGroupSkeleton_1.default, Object.assign({}, rest))) : ((0, jsx_runtime_1.jsx)(material_1.AvatarGroup, Object.assign({ total: scCategory.followers_counter, renderSurplus: renderSurplus }, { children: followers.map((c) => ((0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: c.username, src: c.avatar }, c.id))) }))) })), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.categoryFollowersButton.dialogTitle", id: "ui.categoryFollowersButton.dialogTitle", values: { total: scCategory.followers_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: followers.length, next: fetchFollowers, hasMoreNext: next !== null || loading, loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, { elevation: 0 }), height: isMobile ? '100%' : 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryFollowersButton.noOtherFollowers", defaultMessage: "ui.categoryFollowersButton.noOtherFollowers" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: followers.map((follower) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, user: follower }) }, follower.id))) }) })) })))] }));
|
|
131
134
|
}
|
|
132
135
|
exports.default = CategoryFollowersButton;
|
|
@@ -31,7 +31,8 @@ const classes = {
|
|
|
31
31
|
const Root = (0, styles_1.styled)(material_1.Button, {
|
|
32
32
|
name: PREFIX,
|
|
33
33
|
slot: 'Root',
|
|
34
|
-
overridesResolver: (_props, styles) => styles.root
|
|
34
|
+
overridesResolver: (_props, styles) => styles.root,
|
|
35
|
+
shouldForwardProp: (prop) => prop !== 'followers'
|
|
35
36
|
})(() => ({}));
|
|
36
37
|
const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
|
|
37
38
|
name: PREFIX,
|
|
@@ -133,6 +134,8 @@ function EventParticipantsButton(inProps) {
|
|
|
133
134
|
const handleToggleDialogOpen = (0, react_1.useCallback)(() => {
|
|
134
135
|
setOpen((prev) => !prev);
|
|
135
136
|
}, [setOpen]);
|
|
136
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scEvent || scEvent.goings_counter === 0
|
|
137
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scEvent || scEvent.goings_counter === 0,
|
|
138
|
+
// @ts-expect-error this is needed to use followers into SCEventParticipantsButton
|
|
139
|
+
followers: followers }, rest, { children: [!hideCaption && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.participants, variant: "caption" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.eventParticipantsButton.participants", id: "ui.eventParticipantsButton.participants" }) }))), !followers.length && (loading || !scEvent) ? ((0, jsx_runtime_1.jsx)(AvatarGroupSkeleton_1.default, Object.assign({}, rest, (!participantsAvailable && { skeletonsAnimation: false })))) : ((0, jsx_runtime_1.jsx)(material_1.AvatarGroup, Object.assign({ total: followers.length, renderSurplus: renderSurplus }, { children: followers.map((c) => ((0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: c.username, src: c.avatar, className: classes.avatar }, c.id))) })))] })), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.eventParticipantsButton.dialogTitle", id: "ui.eventParticipantsButton.dialogTitle", values: { total: scEvent.goings_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: followers.length, next: fetchFollowers, hasMoreNext: next !== null || loading, loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, { elevation: 0 }), className: classes.infiniteScroll, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventParticipantsButton.noOtherParticipants", defaultMessage: "ui.eventParticipantsButton.noOtherParticipants" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: followers.map((follower) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, user: follower }) }, follower.id))) }) })) })))] }));
|
|
137
140
|
}
|
|
138
141
|
exports.default = EventParticipantsButton;
|
|
@@ -29,11 +29,12 @@ const classes = {
|
|
|
29
29
|
const Root = (0, styles_1.styled)(material_1.Button, {
|
|
30
30
|
name: PREFIX,
|
|
31
31
|
slot: 'Root',
|
|
32
|
-
overridesResolver: (_props, styles) => styles.root
|
|
32
|
+
overridesResolver: (_props, styles) => styles.root,
|
|
33
|
+
shouldForwardProp: (prop) => prop !== 'subscribers'
|
|
33
34
|
})(() => ({}));
|
|
34
35
|
const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
|
|
35
36
|
name: PREFIX,
|
|
36
|
-
slot: '
|
|
37
|
+
slot: 'DialogRoot',
|
|
37
38
|
overridesResolver: (_props, styles) => styles.dialogRoot
|
|
38
39
|
})(() => ({}));
|
|
39
40
|
/**
|
|
@@ -132,6 +133,8 @@ function GroupMembersButton(inProps) {
|
|
|
132
133
|
// RENDER
|
|
133
134
|
const theme = (0, material_1.useTheme)();
|
|
134
135
|
const isMobile = (0, useMediaQuery_1.default)(theme.breakpoints.down('md'));
|
|
135
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scGroup || scGroup.subscribers_counter === 0
|
|
136
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scGroup || scGroup.subscribers_counter === 0,
|
|
137
|
+
// @ts-expect-error this is needed to use subscribers into SCGroupMembersButton
|
|
138
|
+
subscribers: scGroup.subscribers_counter }, rest, { children: loading || !scGroup ? ((0, jsx_runtime_1.jsx)(AvatarGroupSkeleton_1.default, Object.assign({}, rest))) : ((0, jsx_runtime_1.jsx)(material_1.AvatarGroup, Object.assign({ total: scGroup.subscribers_counter, renderSurplus: renderSurplus }, { children: members.map((c) => ((0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: c.username, src: c.avatar }, c.id))) }))) })), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.groupMembersButton.dialogTitle", id: "ui.groupMembersButton.dialogTitle", values: { total: scGroup.subscribers_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: members.length, next: fetchMembers, hasMoreNext: next !== null || loading, loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, { elevation: 0 }), height: isMobile ? '100%' : 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupMembersButton.noOtherMembers", defaultMessage: "ui.groupMembersButton.noOtherMembers" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: members.map((member) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, user: member, onClick: handleToggleDialogOpen }) }, member.id))) }) })) })))] }));
|
|
136
139
|
}
|
|
137
140
|
exports.default = GroupMembersButton;
|
|
@@ -12,8 +12,8 @@ const classes = {
|
|
|
12
12
|
const Root = (0, styles_1.styled)(material_1.AvatarGroup, {
|
|
13
13
|
name: PREFIX,
|
|
14
14
|
slot: 'Root',
|
|
15
|
-
overridesResolver: (
|
|
16
|
-
})((
|
|
15
|
+
overridesResolver: (_props, styles) => styles.root
|
|
16
|
+
})(() => ({}));
|
|
17
17
|
/**
|
|
18
18
|
* > API documentation for the Community-JS Avatar Group Skeleton component. Learn about the available props and the CSS API.
|
|
19
19
|
|
|
@@ -40,8 +40,8 @@ function AvatarGroupSkeleton(inProps) {
|
|
|
40
40
|
props: inProps,
|
|
41
41
|
name: PREFIX
|
|
42
42
|
});
|
|
43
|
-
const {
|
|
43
|
+
const { skeletonsAnimation = 'wave', count = 3 } = props, rest = tslib_1.__rest(props, ["skeletonsAnimation", "count"]);
|
|
44
44
|
const theme = (0, material_1.useTheme)();
|
|
45
|
-
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, rest, { children: [...Array(count
|
|
45
|
+
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, rest, { children: [...Array(count)].map((_x, i) => ((0, jsx_runtime_1.jsx)(material_1.Avatar, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: theme.selfcommunity.user.avatar.sizeSmall, height: theme.selfcommunity.user.avatar.sizeSmall, animation: skeletonsAnimation }) }, i))) })));
|
|
46
46
|
}
|
|
47
47
|
exports.default = AvatarGroupSkeleton;
|
|
@@ -26,12 +26,13 @@ const classes = {
|
|
|
26
26
|
const Root = styled(Button, {
|
|
27
27
|
name: PREFIX,
|
|
28
28
|
slot: 'Root',
|
|
29
|
-
overridesResolver: (
|
|
29
|
+
overridesResolver: (_props, styles) => styles.root,
|
|
30
|
+
shouldForwardProp: (prop) => prop !== 'followers'
|
|
30
31
|
})(() => ({}));
|
|
31
32
|
const DialogRoot = styled(BaseDialog, {
|
|
32
33
|
name: PREFIX,
|
|
33
|
-
slot: '
|
|
34
|
-
overridesResolver: (
|
|
34
|
+
slot: 'DialogRoot',
|
|
35
|
+
overridesResolver: (_props, styles) => styles.dialogRoot
|
|
35
36
|
})(() => ({}));
|
|
36
37
|
/**
|
|
37
38
|
*> API documentation for the Community-JS Category Followers Button component. Learn about the available props and the CSS API.
|
|
@@ -125,5 +126,7 @@ export default function CategoryFollowersButton(inProps) {
|
|
|
125
126
|
// RENDER
|
|
126
127
|
const theme = useTheme();
|
|
127
128
|
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
|
128
|
-
return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scCategory || scCategory.followers_counter === 0
|
|
129
|
+
return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scCategory || scCategory.followers_counter === 0,
|
|
130
|
+
// @ts-expect-error this is needed to use followers into SCCategoryFollowersButton
|
|
131
|
+
followers: scCategory === null || scCategory === void 0 ? void 0 : scCategory.followers_counter }, rest, { children: loading || !scCategory ? (_jsx(AvatarGroupSkeleton, Object.assign({}, rest))) : (_jsx(AvatarGroup, Object.assign({ total: scCategory.followers_counter, renderSurplus: renderSurplus }, { children: followers.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.categoryFollowersButton.dialogTitle", id: "ui.categoryFollowersButton.dialogTitle", values: { total: scCategory.followers_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: followers.length, next: fetchFollowers, 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.categoryFollowersButton.noOtherFollowers", defaultMessage: "ui.categoryFollowersButton.noOtherFollowers" }) })) }, { children: _jsx(List, { children: followers.map((follower) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: follower }) }, follower.id))) }) })) })))] }));
|
|
129
132
|
}
|
|
@@ -29,7 +29,8 @@ const classes = {
|
|
|
29
29
|
const Root = styled(Button, {
|
|
30
30
|
name: PREFIX,
|
|
31
31
|
slot: 'Root',
|
|
32
|
-
overridesResolver: (_props, styles) => styles.root
|
|
32
|
+
overridesResolver: (_props, styles) => styles.root,
|
|
33
|
+
shouldForwardProp: (prop) => prop !== 'followers'
|
|
33
34
|
})(() => ({}));
|
|
34
35
|
const DialogRoot = styled(BaseDialog, {
|
|
35
36
|
name: PREFIX,
|
|
@@ -131,5 +132,7 @@ export default function EventParticipantsButton(inProps) {
|
|
|
131
132
|
const handleToggleDialogOpen = useCallback(() => {
|
|
132
133
|
setOpen((prev) => !prev);
|
|
133
134
|
}, [setOpen]);
|
|
134
|
-
return (_jsxs(_Fragment, { children: [_jsxs(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scEvent || scEvent.goings_counter === 0
|
|
135
|
+
return (_jsxs(_Fragment, { children: [_jsxs(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scEvent || scEvent.goings_counter === 0,
|
|
136
|
+
// @ts-expect-error this is needed to use followers into SCEventParticipantsButton
|
|
137
|
+
followers: followers }, rest, { children: [!hideCaption && (_jsx(Typography, Object.assign({ className: classes.participants, variant: "caption" }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.eventParticipantsButton.participants", id: "ui.eventParticipantsButton.participants" }) }))), !followers.length && (loading || !scEvent) ? (_jsx(AvatarGroupSkeleton, Object.assign({}, rest, (!participantsAvailable && { skeletonsAnimation: false })))) : (_jsx(AvatarGroup, Object.assign({ total: followers.length, renderSurplus: renderSurplus }, { children: followers.map((c) => (_jsx(Avatar, { alt: c.username, src: c.avatar, className: classes.avatar }, c.id))) })))] })), open && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.eventParticipantsButton.dialogTitle", id: "ui.eventParticipantsButton.dialogTitle", values: { total: scEvent.goings_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: followers.length, next: fetchFollowers, hasMoreNext: next !== null || loading, loaderNext: _jsx(UserSkeleton, { elevation: 0 }), className: classes.infiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.eventParticipantsButton.noOtherParticipants", defaultMessage: "ui.eventParticipantsButton.noOtherParticipants" }) })) }, { children: _jsx(List, { children: followers.map((follower) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: follower }) }, follower.id))) }) })) })))] }));
|
|
135
138
|
}
|
|
@@ -27,11 +27,12 @@ const classes = {
|
|
|
27
27
|
const Root = styled(Button, {
|
|
28
28
|
name: PREFIX,
|
|
29
29
|
slot: 'Root',
|
|
30
|
-
overridesResolver: (_props, styles) => styles.root
|
|
30
|
+
overridesResolver: (_props, styles) => styles.root,
|
|
31
|
+
shouldForwardProp: (prop) => prop !== 'subscribers'
|
|
31
32
|
})(() => ({}));
|
|
32
33
|
const DialogRoot = styled(BaseDialog, {
|
|
33
34
|
name: PREFIX,
|
|
34
|
-
slot: '
|
|
35
|
+
slot: 'DialogRoot',
|
|
35
36
|
overridesResolver: (_props, styles) => styles.dialogRoot
|
|
36
37
|
})(() => ({}));
|
|
37
38
|
/**
|
|
@@ -130,5 +131,7 @@ export default function GroupMembersButton(inProps) {
|
|
|
130
131
|
// RENDER
|
|
131
132
|
const theme = useTheme();
|
|
132
133
|
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
|
133
|
-
return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scGroup || scGroup.subscribers_counter === 0
|
|
134
|
+
return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scGroup || scGroup.subscribers_counter === 0,
|
|
135
|
+
// @ts-expect-error this is needed to use subscribers into SCGroupMembersButton
|
|
136
|
+
subscribers: scGroup.subscribers_counter }, 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))) }) })) })))] }));
|
|
134
137
|
}
|
|
@@ -10,8 +10,8 @@ const classes = {
|
|
|
10
10
|
const Root = styled(AvatarGroup, {
|
|
11
11
|
name: PREFIX,
|
|
12
12
|
slot: 'Root',
|
|
13
|
-
overridesResolver: (
|
|
14
|
-
})((
|
|
13
|
+
overridesResolver: (_props, styles) => styles.root
|
|
14
|
+
})(() => ({}));
|
|
15
15
|
/**
|
|
16
16
|
* > API documentation for the Community-JS Avatar Group Skeleton component. Learn about the available props and the CSS API.
|
|
17
17
|
|
|
@@ -38,7 +38,7 @@ export default function AvatarGroupSkeleton(inProps) {
|
|
|
38
38
|
props: inProps,
|
|
39
39
|
name: PREFIX
|
|
40
40
|
});
|
|
41
|
-
const {
|
|
41
|
+
const { skeletonsAnimation = 'wave', count = 3 } = props, rest = __rest(props, ["skeletonsAnimation", "count"]);
|
|
42
42
|
const theme = useTheme();
|
|
43
|
-
return (_jsx(Root, Object.assign({ className: classes.root }, rest, { children: [...Array(count
|
|
43
|
+
return (_jsx(Root, Object.assign({ className: classes.root }, rest, { children: [...Array(count)].map((_x, i) => (_jsx(Avatar, { children: _jsx(Skeleton, { variant: "circular", width: theme.selfcommunity.user.avatar.sizeSmall, height: theme.selfcommunity.user.avatar.sizeSmall, animation: skeletonsAnimation }) }, i))) })));
|
|
44
44
|
}
|