@selfcommunity/react-ui 0.10.1 → 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/EventForm/EventAddress.js +1 -1
- package/lib/cjs/components/EventParticipantsButton/EventParticipantsButton.js +5 -2
- package/lib/cjs/components/GroupMembersButton/GroupMembersButton.js +6 -3
- package/lib/cjs/components/SearchAutocomplete/SearchAutocomplete.js +3 -2
- package/lib/cjs/components/Skeleton/AvatarGroupSkeleton.js +4 -4
- package/lib/cjs/utils/string.js +1 -1
- package/lib/esm/components/CategoryFollowersButton/CategoryFollowersButton.js +7 -4
- package/lib/esm/components/EventForm/EventAddress.js +1 -1
- package/lib/esm/components/EventParticipantsButton/EventParticipantsButton.js +5 -2
- package/lib/esm/components/GroupMembersButton/GroupMembersButton.js +6 -3
- package/lib/esm/components/SearchAutocomplete/SearchAutocomplete.js +3 -2
- package/lib/esm/components/Skeleton/AvatarGroupSkeleton.js +4 -4
- package/lib/esm/utils/string.js +1 -1
- package/lib/umd/react-ui.js +1 -1
- package/package.json +7 -7
|
@@ -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;
|
|
@@ -77,7 +77,7 @@ function EventAddress(inProps) {
|
|
|
77
77
|
setGeoLocation(newValue);
|
|
78
78
|
forwardGeolocationData({
|
|
79
79
|
location,
|
|
80
|
-
geolocation: place.formatted_address,
|
|
80
|
+
geolocation: newValue.description.split(',')[0] + '. ' + place.formatted_address,
|
|
81
81
|
lat: place.geometry.location.lat,
|
|
82
82
|
lng: place.geometry.location.lng
|
|
83
83
|
});
|
|
@@ -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;
|
|
@@ -108,11 +108,12 @@ function SearchAutocomplete(inProps) {
|
|
|
108
108
|
});
|
|
109
109
|
}
|
|
110
110
|
const optionLabel = (option) => {
|
|
111
|
+
var _a, _b, _c, _d;
|
|
111
112
|
switch (option.type) {
|
|
112
113
|
case types_1.SuggestionType.CATEGORY:
|
|
113
|
-
return option[option.type]
|
|
114
|
+
return `${((_a = option[option.type]) === null || _a === void 0 ? void 0 : _a.name_synonyms) || ''} ${((_b = option[option.type]) === null || _b === void 0 ? void 0 : _b.name) || ''}`.trim();
|
|
114
115
|
case types_1.SuggestionType.USER:
|
|
115
|
-
return option[option.type]
|
|
116
|
+
return `${((_c = option[option.type]) === null || _c === void 0 ? void 0 : _c.username) || ''} ${((_d = option[option.type]) === null || _d === void 0 ? void 0 : _d.real_name) || ''}`.trim();
|
|
116
117
|
default:
|
|
117
118
|
return option[option.type]['name'];
|
|
118
119
|
}
|
|
@@ -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;
|
package/lib/cjs/utils/string.js
CHANGED
|
@@ -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
|
}
|
|
@@ -75,7 +75,7 @@ export default function EventAddress(inProps) {
|
|
|
75
75
|
setGeoLocation(newValue);
|
|
76
76
|
forwardGeolocationData({
|
|
77
77
|
location,
|
|
78
|
-
geolocation: place.formatted_address,
|
|
78
|
+
geolocation: newValue.description.split(',')[0] + '. ' + place.formatted_address,
|
|
79
79
|
lat: place.geometry.location.lat,
|
|
80
80
|
lng: place.geometry.location.lng
|
|
81
81
|
});
|
|
@@ -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
|
}
|
|
@@ -106,11 +106,12 @@ export default function SearchAutocomplete(inProps) {
|
|
|
106
106
|
});
|
|
107
107
|
}
|
|
108
108
|
const optionLabel = (option) => {
|
|
109
|
+
var _a, _b, _c, _d;
|
|
109
110
|
switch (option.type) {
|
|
110
111
|
case SuggestionType.CATEGORY:
|
|
111
|
-
return option[option.type]
|
|
112
|
+
return `${((_a = option[option.type]) === null || _a === void 0 ? void 0 : _a.name_synonyms) || ''} ${((_b = option[option.type]) === null || _b === void 0 ? void 0 : _b.name) || ''}`.trim();
|
|
112
113
|
case SuggestionType.USER:
|
|
113
|
-
return option[option.type]
|
|
114
|
+
return `${((_c = option[option.type]) === null || _c === void 0 ? void 0 : _c.username) || ''} ${((_d = option[option.type]) === null || _d === void 0 ? void 0 : _d.real_name) || ''}`.trim();
|
|
114
115
|
default:
|
|
115
116
|
return option[option.type]['name'];
|
|
116
117
|
}
|
|
@@ -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
|
}
|
package/lib/esm/utils/string.js
CHANGED