@selfcommunity/react-ui 0.7.50-events.83 → 0.7.50-events.84

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.
Files changed (14) hide show
  1. package/lib/cjs/components/EventParticipantsButton/EventParticipantsButton.d.ts +1 -1
  2. package/lib/cjs/components/EventParticipantsButton/EventParticipantsButton.js +5 -6
  3. package/lib/cjs/components/EventSubscribeButton/EventSubscribeButton.js +7 -7
  4. package/lib/cjs/components/OnBoardingWidget/Steps/Profile/Profile.js +12 -15
  5. package/lib/cjs/components/Skeleton/AvatarGroupSkeleton.d.ts +17 -1
  6. package/lib/cjs/components/Skeleton/AvatarGroupSkeleton.js +9 -3
  7. package/lib/esm/components/EventParticipantsButton/EventParticipantsButton.d.ts +1 -1
  8. package/lib/esm/components/EventParticipantsButton/EventParticipantsButton.js +7 -8
  9. package/lib/esm/components/EventSubscribeButton/EventSubscribeButton.js +8 -8
  10. package/lib/esm/components/OnBoardingWidget/Steps/Profile/Profile.js +13 -16
  11. package/lib/esm/components/Skeleton/AvatarGroupSkeleton.d.ts +17 -1
  12. package/lib/esm/components/Skeleton/AvatarGroupSkeleton.js +9 -3
  13. package/lib/umd/react-ui.js +1 -1
  14. package/package.json +7 -7
package/lib/cjs/components/EventParticipantsButton/EventParticipantsButton.d.ts CHANGED
@@ -8,7 +8,7 @@ export interface EventParticipantsButtonProps extends Pick<ButtonProps, Exclude<
8
8
  */
9
9
  event?: SCEventType;
10
10
  /**
11
- * Id of event object
11
+ * EventId of event object
12
12
  * @default null
13
13
  */
14
14
  eventId?: number;
package/lib/cjs/components/EventParticipantsButton/EventParticipantsButton.js CHANGED
@@ -73,15 +73,14 @@ function EventParticipantsButton(inProps) {
73
73
  const [open, setOpen] = (0, react_1.useState)(false);
74
74
  // HOOKS
75
75
  const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
76
+ const participantsAvailable = (0, react_1.useMemo)(() => scEvent.privacy === types_1.SCEventPrivacyType.PUBLIC ||
77
+ [types_1.SCEventSubscriptionStatusType.SUBSCRIBED, types_1.SCEventSubscriptionStatusType.GOING, types_1.SCEventSubscriptionStatusType.NOT_GOING].indexOf(scEvent.subscription_status) > -1, [scEvent]);
76
78
  // FETCH FIRST FOLLOWERS
77
79
  (0, use_deep_compare_effect_1.useDeepCompareEffectNoCheck)(() => {
78
80
  if (!scEvent) {
79
81
  return;
80
82
  }
81
- if ((scEvent.subscription_status === types_1.SCEventSubscriptionStatusType.GOING ||
82
- scEvent.subscription_status === types_1.SCEventSubscriptionStatusType.NOT_GOING ||
83
- scEvent.subscription_status === types_1.SCEventSubscriptionStatusType.SUBSCRIBED) &&
84
- followers.length === 0) {
83
+ if (!followers.length && participantsAvailable) {
85
84
  api_services_1.EventService.getUsersGoingToEvent(scEvent.id, { limit: 3 }).then((res) => {
86
85
  setFollowers([...res.results]);
87
86
  setOffset(4);
@@ -91,7 +90,7 @@ function EventParticipantsButton(inProps) {
91
90
  else {
92
91
  setOffset(0);
93
92
  }
94
- }, [scEvent]);
93
+ }, [scEvent, participantsAvailable]);
95
94
  (0, react_1.useEffect)(() => {
96
95
  if (open && offset !== null) {
97
96
  setLoading(true);
@@ -128,6 +127,6 @@ function EventParticipantsButton(inProps) {
128
127
  const handleToggleDialogOpen = (0, react_1.useCallback)(() => {
129
128
  setOpen((prev) => !prev);
130
129
  }, [setOpen]);
131
- 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 }, 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" }) }))), loading || !scEvent ? ((0, jsx_runtime_1.jsx)(AvatarGroupSkeleton_1.default, Object.assign({}, rest))) : ((0, jsx_runtime_1.jsx)(material_1.AvatarGroup, Object.assign({ total: scEvent.goings_counter }, { 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))) }) })) })))] }));
130
+ 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 }, 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: scEvent.goings_counter }, { 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))) }) })) })))] }));
132
131
  }
133
132
  exports.default = EventParticipantsButton;
package/lib/cjs/components/EventSubscribeButton/EventSubscribeButton.js CHANGED
@@ -2,17 +2,17 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
- const react_1 = tslib_1.__importStar(require("react"));
5
+ const lab_1 = require("@mui/lab");
6
+ const material_1 = require("@mui/material");
6
7
  const styles_1 = require("@mui/material/styles");
7
- const utils_1 = require("@selfcommunity/utils");
8
+ const system_1 = require("@mui/system");
8
9
  const react_core_1 = require("@selfcommunity/react-core");
9
10
  const types_1 = require("@selfcommunity/types");
10
- const react_intl_1 = require("react-intl");
11
+ const utils_1 = require("@selfcommunity/utils");
11
12
  const classnames_1 = tslib_1.__importDefault(require("classnames"));
12
- const system_1 = require("@mui/system");
13
+ const react_1 = tslib_1.__importStar(require("react"));
14
+ const react_intl_1 = require("react-intl");
13
15
  const Errors_1 = require("../../constants/Errors");
14
- const material_1 = require("@mui/material");
15
- const lab_1 = require("@mui/lab");
16
16
  const PREFIX = 'SCEventSubscribeButton';
17
17
  const classes = {
18
18
  requestRoot: `${PREFIX}-request-root`,
@@ -154,7 +154,7 @@ function EventSubscribeButton(inProps) {
154
154
  }
155
155
  };
156
156
  function renderMenuItems() {
157
- return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: options.map((option) => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item }, { children: [option.label, (0, jsx_runtime_1.jsx)(material_1.Checkbox, { size: "small", checked: status === option.value, value: option.value, onChange: handleToggleAction, name: `${option.value}-option`, inputProps: { 'aria-label': `${option.label}` } })] }), option.value))) }));
157
+ return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: options.map((option) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { label: option.label, control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { size: "small", checked: status === option.value, value: option.value, onChange: handleToggleAction, name: `${option.value}-option`, inputProps: { 'aria-label': `${option.label}` } }), labelPlacement: "start" }) }), option.value))) }));
158
158
  }
159
159
  /**
160
160
  * Get current translated status
package/lib/cjs/components/OnBoardingWidget/Steps/Profile/Profile.js CHANGED
@@ -2,7 +2,7 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
- const react_1 = tslib_1.__importStar(require("react"));
5
+ const react_1 = require("react");
6
6
  const styles_1 = require("@mui/material/styles");
7
7
  const Box_1 = tslib_1.__importDefault(require("@mui/material/Box"));
8
8
  const system_1 = require("@mui/system");
@@ -20,23 +20,20 @@ const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
20
20
  const classes = {
21
21
  root: `${constants_1.PREFIX}-profile-root`,
22
22
  title: `${constants_1.PREFIX}-profile-title`,
23
- header: `${constants_1.PREFIX}-profile-header`,
23
+ icon: `${constants_1.PREFIX}-profile-icon`,
24
24
  cover: `${constants_1.PREFIX}-profile-cover`,
25
25
  avatar: `${constants_1.PREFIX}-profile-avatar`,
26
26
  changePicture: `${constants_1.PREFIX}-profile-change-picture`,
27
27
  changeCover: `${constants_1.PREFIX}-profile-change-cover`,
28
28
  publicInfo: `${constants_1.PREFIX}-profile-public-info`
29
29
  };
30
- const Transition = react_1.default.forwardRef(function Transition(props, ref) {
31
- return (0, jsx_runtime_1.jsx)(material_1.Slide, Object.assign({ direction: "up", ref: ref }, props));
32
- });
33
30
  const Root = (0, styles_1.styled)(Box_1.default, {
34
31
  name: constants_1.PREFIX,
35
32
  slot: 'ProfileRoot'
36
33
  })(() => ({}));
37
- const DialogRoot = (0, styles_1.styled)(material_1.Dialog, {
34
+ const DrawerRoot = (0, styles_1.styled)(material_1.Drawer, {
38
35
  name: constants_1.PREFIX,
39
- slot: 'ProfileDialogRoot'
36
+ slot: 'ProfileDrawerRoot'
40
37
  })(() => ({}));
41
38
  function Profile(inProps) {
42
39
  var _a;
@@ -47,7 +44,7 @@ function Profile(inProps) {
47
44
  });
48
45
  const { className, fields = [...UserProfile_1.DEFAULT_FIELDS], user = null, onCompleteAction } = props, rest = tslib_1.__rest(props, ["className", "fields", "user", "onCompleteAction"]);
49
46
  // STATE
50
- const [open, setOpen] = (0, react_1.useState)(false);
47
+ const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
51
48
  // PREFERENCES
52
49
  const scPreferences = (0, react_core_1.useSCPreferences)();
53
50
  // CONTEXT
@@ -57,12 +54,12 @@ function Profile(inProps) {
57
54
  const { scUser, setSCUser } = (0, react_core_1.useSCFetchUser)({ id: (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id, user });
58
55
  const hasBadge = scUser && scUser.community_badge;
59
56
  // HANDLERS
60
- const handleClickOpen = () => {
61
- setOpen(true);
62
- };
63
- const handleClose = () => {
64
- setOpen(false);
65
- };
57
+ const handleOpen = (0, react_1.useCallback)((event) => {
58
+ setAnchorEl(event.currentTarget);
59
+ }, []);
60
+ const handleClose = (0, react_1.useCallback)(() => {
61
+ setAnchorEl(null);
62
+ }, []);
66
63
  /**
67
64
  * Handles Change Avatar
68
65
  * If avatar === null reset the avatar with auto-generated image
@@ -89,6 +86,6 @@ function Profile(inProps) {
89
86
  setSCUser(Object.assign({}, scUser, { cover: cover }));
90
87
  onCompleteAction();
91
88
  }
92
- return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.title, alignSelf: "self-start" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.profile", defaultMessage: "ui.onBoardingWidget.profile" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ alignSelf: "self-start" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.profile.summary", defaultMessage: "ui.onBoardingWidget.step.profile.summary" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", color: "primary", onClick: handleClickOpen }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.profile.button", defaultMessage: "ui.onBoardingWidget.step.profile.button" }) })), (0, jsx_runtime_1.jsxs)(DialogRoot, Object.assign({ fullScreen: true }, rest, { open: open, onClose: handleClose, TransitionComponent: Transition }, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogActions, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleClose }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "close" }) })) }), (0, jsx_runtime_1.jsxs)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [(0, jsx_runtime_1.jsx)(Box_1.default, Object.assign({ className: classes.avatar }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !hasBadge }, { children: (0, jsx_runtime_1.jsx)("img", { src: (scUser === null || scUser === void 0 ? void 0 : scUser.avatar) ? scUser.avatar : '' }) })) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ChangePicture_1.default, { iconButton: true, onChange: handleChangeAvatar, className: classes.changePicture }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.changeCover }, { children: (0, jsx_runtime_1.jsx)(ChangeCover_1.default, { onChange: handleChangeCover }) }))] })] })), (0, jsx_runtime_1.jsx)(Box_1.default, Object.assign({ className: classes.publicInfo }, { children: (0, jsx_runtime_1.jsx)(PublicInfo_1.default, { fields: fields, onEditSuccess: onCompleteAction }) }))] }))] })));
89
+ return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.title, alignSelf: "self-start" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.profile", defaultMessage: "ui.onBoardingWidget.profile" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ alignSelf: "self-start" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.profile.summary", defaultMessage: "ui.onBoardingWidget.step.profile.summary" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", color: "primary", onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.profile.button", defaultMessage: "ui.onBoardingWidget.step.profile.button" }) })), (0, jsx_runtime_1.jsxs)(DrawerRoot, Object.assign({ anchor: "right", open: Boolean(anchorEl), onClose: handleClose }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.icon, onClick: handleClose }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "close" }) })), (0, jsx_runtime_1.jsxs)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [(0, jsx_runtime_1.jsx)(Box_1.default, Object.assign({ className: classes.avatar }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !hasBadge }, { children: (0, jsx_runtime_1.jsx)("img", { src: (scUser === null || scUser === void 0 ? void 0 : scUser.avatar) ? scUser.avatar : '' }) })) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ChangePicture_1.default, { iconButton: true, onChange: handleChangeAvatar, className: classes.changePicture }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.changeCover }, { children: (0, jsx_runtime_1.jsx)(ChangeCover_1.default, { onChange: handleChangeCover }) }))] })] })), (0, jsx_runtime_1.jsx)(Box_1.default, Object.assign({ className: classes.publicInfo }, { children: (0, jsx_runtime_1.jsx)(PublicInfo_1.default, { fields: fields, onEditSuccess: onCompleteAction }) }))] }))] })));
93
90
  }
94
91
  exports.default = Profile;
package/lib/cjs/components/Skeleton/AvatarGroupSkeleton.d.ts CHANGED
@@ -1,3 +1,19 @@
1
+ import { AvatarGroupProps } from '@mui/material';
2
+ export interface AvatarGroupSkeletonProps extends AvatarGroupProps {
3
+ /**
4
+ * Overrides or extends the styles applied to the component.
5
+ * @default null
6
+ */
7
+ className?: string;
8
+ /**
9
+ * Number of visible avatars
10
+ */
11
+ count?: number;
12
+ /**
13
+ * Disable skeleton animation
14
+ */
15
+ skeletonsAnimation?: false | 'wave' | 'pulse';
16
+ }
1
17
  /**
2
18
  * > API documentation for the Community-JS Avatar Group Skeleton component. Learn about the available props and the CSS API.
3
19
 
@@ -18,4 +34,4 @@
18
34
  |root|.SCAvatarGroupSkeleton-root|Styles applied to the root element.|
19
35
  *
20
36
  */
21
- export default function AvatarGroupSkeleton(props: any): JSX.Element;
37
+ export default function AvatarGroupSkeleton(inProps: any): JSX.Element;
package/lib/cjs/components/Skeleton/AvatarGroupSkeleton.js CHANGED
@@ -4,6 +4,7 @@ const tslib_1 = require("tslib");
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const styles_1 = require("@mui/material/styles");
6
6
  const material_1 = require("@mui/material");
7
+ const system_1 = require("@mui/system");
7
8
  const PREFIX = 'SCAvatarGroupSkeleton';
8
9
  const classes = {
9
10
  root: `${PREFIX}-root`
@@ -33,9 +34,14 @@ const Root = (0, styles_1.styled)(material_1.AvatarGroup, {
33
34
  |root|.SCAvatarGroupSkeleton-root|Styles applied to the root element.|
34
35
  *
35
36
  */
36
- function AvatarGroupSkeleton(props) {
37
- const { count = 2 } = props, rest = tslib_1.__rest(props, ["count"]);
37
+ function AvatarGroupSkeleton(inProps) {
38
+ // PROPS
39
+ const props = (0, system_1.useThemeProps)({
40
+ props: inProps,
41
+ name: PREFIX
42
+ });
43
+ const { className, skeletonsAnimation = 'wave', count = 2 } = props, rest = tslib_1.__rest(props, ["className", "skeletonsAnimation", "count"]);
38
44
  const theme = (0, material_1.useTheme)();
39
- return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, rest, { children: [...Array(count + 1)].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 }) }, i))) })));
45
+ return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, rest, { children: [...Array(count + 1)].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))) })));
40
46
  }
41
47
  exports.default = AvatarGroupSkeleton;
package/lib/esm/components/EventParticipantsButton/EventParticipantsButton.d.ts CHANGED
@@ -8,7 +8,7 @@ export interface EventParticipantsButtonProps extends Pick<ButtonProps, Exclude<
8
8
  */
9
9
  event?: SCEventType;
10
10
  /**
11
- * Id of event object
11
+ * EventId of event object
12
12
  * @default null
13
13
  */
14
14
  eventId?: number;
package/lib/esm/components/EventParticipantsButton/EventParticipantsButton.js CHANGED
@@ -5,10 +5,10 @@ import { styled } from '@mui/material/styles';
5
5
  import { useThemeProps } from '@mui/system';
6
6
  import { Endpoints, EventService, http } from '@selfcommunity/api-services';
7
7
  import { useSCFetchEvent } from '@selfcommunity/react-core';
8
- import { SCEventSubscriptionStatusType } from '@selfcommunity/types';
8
+ import { SCEventPrivacyType, SCEventSubscriptionStatusType } from '@selfcommunity/types';
9
9
  import { Logger } from '@selfcommunity/utils';
10
10
  import classNames from 'classnames';
11
- import { useCallback, useEffect, useState } from 'react';
11
+ import { useCallback, useEffect, useMemo, useState } from 'react';
12
12
  import { FormattedMessage } from 'react-intl';
13
13
  import { useDeepCompareEffectNoCheck } from 'use-deep-compare-effect';
14
14
  import { SCOPE_SC_UI } from '../../constants/Errors';
@@ -71,15 +71,14 @@ export default function EventParticipantsButton(inProps) {
71
71
  const [open, setOpen] = useState(false);
72
72
  // HOOKS
73
73
  const { scEvent } = useSCFetchEvent({ id: eventId, event });
74
+ const participantsAvailable = useMemo(() => scEvent.privacy === SCEventPrivacyType.PUBLIC ||
75
+ [SCEventSubscriptionStatusType.SUBSCRIBED, SCEventSubscriptionStatusType.GOING, SCEventSubscriptionStatusType.NOT_GOING].indexOf(scEvent.subscription_status) > -1, [scEvent]);
74
76
  // FETCH FIRST FOLLOWERS
75
77
  useDeepCompareEffectNoCheck(() => {
76
78
  if (!scEvent) {
77
79
  return;
78
80
  }
79
- if ((scEvent.subscription_status === SCEventSubscriptionStatusType.GOING ||
80
- scEvent.subscription_status === SCEventSubscriptionStatusType.NOT_GOING ||
81
- scEvent.subscription_status === SCEventSubscriptionStatusType.SUBSCRIBED) &&
82
- followers.length === 0) {
81
+ if (!followers.length && participantsAvailable) {
83
82
  EventService.getUsersGoingToEvent(scEvent.id, { limit: 3 }).then((res) => {
84
83
  setFollowers([...res.results]);
85
84
  setOffset(4);
@@ -89,7 +88,7 @@ export default function EventParticipantsButton(inProps) {
89
88
  else {
90
89
  setOffset(0);
91
90
  }
92
- }, [scEvent]);
91
+ }, [scEvent, participantsAvailable]);
93
92
  useEffect(() => {
94
93
  if (open && offset !== null) {
95
94
  setLoading(true);
@@ -126,5 +125,5 @@ export default function EventParticipantsButton(inProps) {
126
125
  const handleToggleDialogOpen = useCallback(() => {
127
126
  setOpen((prev) => !prev);
128
127
  }, [setOpen]);
129
- return (_jsxs(_Fragment, { children: [_jsxs(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scEvent || scEvent.goings_counter === 0 }, rest, { children: [!hideCaption && (_jsx(Typography, Object.assign({ className: classes.participants, variant: "caption" }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.eventParticipantsButton.participants", id: "ui.eventParticipantsButton.participants" }) }))), loading || !scEvent ? (_jsx(AvatarGroupSkeleton, Object.assign({}, rest))) : (_jsx(AvatarGroup, Object.assign({ total: scEvent.goings_counter }, { 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))) }) })) })))] }));
128
+ return (_jsxs(_Fragment, { children: [_jsxs(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scEvent || scEvent.goings_counter === 0 }, 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: scEvent.goings_counter }, { 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))) }) })) })))] }));
130
129
  }
package/lib/esm/components/EventSubscribeButton/EventSubscribeButton.js CHANGED
@@ -1,16 +1,16 @@
1
1
  import { __rest } from "tslib";
2
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
- import React, { useEffect, useMemo, useState } from 'react';
2
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import { LoadingButton } from '@mui/lab';
4
+ import { Box, Button, Checkbox, FormControlLabel, Icon, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme } from '@mui/material';
4
5
  import { styled } from '@mui/material/styles';
5
- import { CacheStrategies, Logger } from '@selfcommunity/utils';
6
+ import { useThemeProps } from '@mui/system';
6
7
  import { useSCContext, useSCFetchEvent, useSCUser } from '@selfcommunity/react-core';
7
8
  import { SCEventPrivacyType, SCEventSubscriptionStatusType } from '@selfcommunity/types';
8
- import { FormattedMessage } from 'react-intl';
9
+ import { CacheStrategies, Logger } from '@selfcommunity/utils';
9
10
  import classNames from 'classnames';
10
- import { useThemeProps } from '@mui/system';
11
+ import React, { useEffect, useMemo, useState } from 'react';
12
+ import { FormattedMessage } from 'react-intl';
11
13
  import { SCOPE_SC_UI } from '../../constants/Errors';
12
- import { Box, Button, Checkbox, Icon, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme } from '@mui/material';
13
- import { LoadingButton } from '@mui/lab';
14
14
  const PREFIX = 'SCEventSubscribeButton';
15
15
  const classes = {
16
16
  requestRoot: `${PREFIX}-request-root`,
@@ -152,7 +152,7 @@ export default function EventSubscribeButton(inProps) {
152
152
  }
153
153
  };
154
154
  function renderMenuItems() {
155
- return (_jsx(Box, { children: options.map((option) => (_jsxs(MenuItem, Object.assign({ className: classes.item }, { children: [option.label, _jsx(Checkbox, { size: "small", checked: status === option.value, value: option.value, onChange: handleToggleAction, name: `${option.value}-option`, inputProps: { 'aria-label': `${option.label}` } })] }), option.value))) }));
155
+ return (_jsx(Box, { children: options.map((option) => (_jsx(MenuItem, Object.assign({ className: classes.item }, { children: _jsx(FormControlLabel, { label: option.label, control: _jsx(Checkbox, { size: "small", checked: status === option.value, value: option.value, onChange: handleToggleAction, name: `${option.value}-option`, inputProps: { 'aria-label': `${option.label}` } }), labelPlacement: "start" }) }), option.value))) }));
156
156
  }
157
157
  /**
158
158
  * Get current translated status
package/lib/esm/components/OnBoardingWidget/Steps/Profile/Profile.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import { __rest } from "tslib";
2
2
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
3
- import React, { useState } from 'react';
3
+ import { useCallback, useState } from 'react';
4
4
  import { styled } from '@mui/material/styles';
5
5
  import Box from '@mui/material/Box';
6
6
  import { useThemeProps } from '@mui/system';
7
7
  import classNames from 'classnames';
8
8
  import { PREFIX } from '../../constants';
9
- import { Button, Dialog, DialogActions, IconButton, Paper, Slide, Typography } from '@mui/material';
9
+ import { Button, Drawer, IconButton, Paper, Typography } from '@mui/material';
10
10
  import { FormattedMessage } from 'react-intl';
11
11
  import PublicInfo from '../../../UserProfileEdit/Section/PublicInfo';
12
12
  import { SCPreferences, useSCContext, useSCFetchUser, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
@@ -18,23 +18,20 @@ import Icon from '@mui/material/Icon';
18
18
  const classes = {
19
19
  root: `${PREFIX}-profile-root`,
20
20
  title: `${PREFIX}-profile-title`,
21
- header: `${PREFIX}-profile-header`,
21
+ icon: `${PREFIX}-profile-icon`,
22
22
  cover: `${PREFIX}-profile-cover`,
23
23
  avatar: `${PREFIX}-profile-avatar`,
24
24
  changePicture: `${PREFIX}-profile-change-picture`,
25
25
  changeCover: `${PREFIX}-profile-change-cover`,
26
26
  publicInfo: `${PREFIX}-profile-public-info`
27
27
  };
28
- const Transition = React.forwardRef(function Transition(props, ref) {
29
- return _jsx(Slide, Object.assign({ direction: "up", ref: ref }, props));
30
- });
31
28
  const Root = styled(Box, {
32
29
  name: PREFIX,
33
30
  slot: 'ProfileRoot'
34
31
  })(() => ({}));
35
- const DialogRoot = styled(Dialog, {
32
+ const DrawerRoot = styled(Drawer, {
36
33
  name: PREFIX,
37
- slot: 'ProfileDialogRoot'
34
+ slot: 'ProfileDrawerRoot'
38
35
  })(() => ({}));
39
36
  export default function Profile(inProps) {
40
37
  var _a;
@@ -45,7 +42,7 @@ export default function Profile(inProps) {
45
42
  });
46
43
  const { className, fields = [...DEFAULT_FIELDS], user = null, onCompleteAction } = props, rest = __rest(props, ["className", "fields", "user", "onCompleteAction"]);
47
44
  // STATE
48
- const [open, setOpen] = useState(false);
45
+ const [anchorEl, setAnchorEl] = useState(null);
49
46
  // PREFERENCES
50
47
  const scPreferences = useSCPreferences();
51
48
  // CONTEXT
@@ -55,12 +52,12 @@ export default function Profile(inProps) {
55
52
  const { scUser, setSCUser } = useSCFetchUser({ id: (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id, user });
56
53
  const hasBadge = scUser && scUser.community_badge;
57
54
  // HANDLERS
58
- const handleClickOpen = () => {
59
- setOpen(true);
60
- };
61
- const handleClose = () => {
62
- setOpen(false);
63
- };
55
+ const handleOpen = useCallback((event) => {
56
+ setAnchorEl(event.currentTarget);
57
+ }, []);
58
+ const handleClose = useCallback(() => {
59
+ setAnchorEl(null);
60
+ }, []);
64
61
  /**
65
62
  * Handles Change Avatar
66
63
  * If avatar === null reset the avatar with auto-generated image
@@ -87,5 +84,5 @@ export default function Profile(inProps) {
87
84
  setSCUser(Object.assign({}, scUser, { cover: cover }));
88
85
  onCompleteAction();
89
86
  }
90
- return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title, alignSelf: "self-start" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.profile", defaultMessage: "ui.onBoardingWidget.profile" }) })), _jsx(Typography, Object.assign({ alignSelf: "self-start" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.profile.summary", defaultMessage: "ui.onBoardingWidget.step.profile.summary" }) })), _jsx(Button, Object.assign({ variant: "outlined", size: "small", color: "primary", onClick: handleClickOpen }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.profile.button", defaultMessage: "ui.onBoardingWidget.step.profile.button" }) })), _jsxs(DialogRoot, Object.assign({ fullScreen: true }, rest, { open: open, onClose: handleClose, TransitionComponent: Transition }, { children: [_jsx(DialogActions, { children: _jsx(IconButton, Object.assign({ onClick: handleClose }, { children: _jsx(Icon, { children: "close" }) })) }), _jsxs(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [_jsx(Box, Object.assign({ className: classes.avatar }, { children: _jsx(UserAvatar, Object.assign({ hide: !hasBadge }, { children: _jsx("img", { src: (scUser === null || scUser === void 0 ? void 0 : scUser.avatar) ? scUser.avatar : '' }) })) })), _jsxs(_Fragment, { children: [_jsx(ChangePicture, { iconButton: true, onChange: handleChangeAvatar, className: classes.changePicture }), _jsx("div", Object.assign({ className: classes.changeCover }, { children: _jsx(ChangeCover, { onChange: handleChangeCover }) }))] })] })), _jsx(Box, Object.assign({ className: classes.publicInfo }, { children: _jsx(PublicInfo, { fields: fields, onEditSuccess: onCompleteAction }) }))] }))] })));
87
+ return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title, alignSelf: "self-start" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.profile", defaultMessage: "ui.onBoardingWidget.profile" }) })), _jsx(Typography, Object.assign({ alignSelf: "self-start" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.profile.summary", defaultMessage: "ui.onBoardingWidget.step.profile.summary" }) })), _jsx(Button, Object.assign({ variant: "outlined", size: "small", color: "primary", onClick: handleOpen }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.profile.button", defaultMessage: "ui.onBoardingWidget.step.profile.button" }) })), _jsxs(DrawerRoot, Object.assign({ anchor: "right", open: Boolean(anchorEl), onClose: handleClose }, { children: [_jsx(IconButton, Object.assign({ className: classes.icon, onClick: handleClose }, { children: _jsx(Icon, { children: "close" }) })), _jsxs(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [_jsx(Box, Object.assign({ className: classes.avatar }, { children: _jsx(UserAvatar, Object.assign({ hide: !hasBadge }, { children: _jsx("img", { src: (scUser === null || scUser === void 0 ? void 0 : scUser.avatar) ? scUser.avatar : '' }) })) })), _jsxs(_Fragment, { children: [_jsx(ChangePicture, { iconButton: true, onChange: handleChangeAvatar, className: classes.changePicture }), _jsx("div", Object.assign({ className: classes.changeCover }, { children: _jsx(ChangeCover, { onChange: handleChangeCover }) }))] })] })), _jsx(Box, Object.assign({ className: classes.publicInfo }, { children: _jsx(PublicInfo, { fields: fields, onEditSuccess: onCompleteAction }) }))] }))] })));
91
88
  }
package/lib/esm/components/Skeleton/AvatarGroupSkeleton.d.ts CHANGED
@@ -1,3 +1,19 @@
1
+ import { AvatarGroupProps } from '@mui/material';
2
+ export interface AvatarGroupSkeletonProps extends AvatarGroupProps {
3
+ /**
4
+ * Overrides or extends the styles applied to the component.
5
+ * @default null
6
+ */
7
+ className?: string;
8
+ /**
9
+ * Number of visible avatars
10
+ */
11
+ count?: number;
12
+ /**
13
+ * Disable skeleton animation
14
+ */
15
+ skeletonsAnimation?: false | 'wave' | 'pulse';
16
+ }
1
17
  /**
2
18
  * > API documentation for the Community-JS Avatar Group Skeleton component. Learn about the available props and the CSS API.
3
19
 
@@ -18,4 +34,4 @@
18
34
  |root|.SCAvatarGroupSkeleton-root|Styles applied to the root element.|
19
35
  *
20
36
  */
21
- export default function AvatarGroupSkeleton(props: any): JSX.Element;
37
+ export default function AvatarGroupSkeleton(inProps: any): JSX.Element;
package/lib/esm/components/Skeleton/AvatarGroupSkeleton.js CHANGED
@@ -2,6 +2,7 @@ import { __rest } from "tslib";
2
2
  import { jsx as _jsx } from "react/jsx-runtime";
3
3
  import { styled } from '@mui/material/styles';
4
4
  import { Avatar, AvatarGroup, Skeleton, useTheme } from '@mui/material';
5
+ import { useThemeProps } from '@mui/system';
5
6
  const PREFIX = 'SCAvatarGroupSkeleton';
6
7
  const classes = {
7
8
  root: `${PREFIX}-root`
@@ -31,8 +32,13 @@ const Root = styled(AvatarGroup, {
31
32
  |root|.SCAvatarGroupSkeleton-root|Styles applied to the root element.|
32
33
  *
33
34
  */
34
- export default function AvatarGroupSkeleton(props) {
35
- const { count = 2 } = props, rest = __rest(props, ["count"]);
35
+ export default function AvatarGroupSkeleton(inProps) {
36
+ // PROPS
37
+ const props = useThemeProps({
38
+ props: inProps,
39
+ name: PREFIX
40
+ });
41
+ const { className, skeletonsAnimation = 'wave', count = 2 } = props, rest = __rest(props, ["className", "skeletonsAnimation", "count"]);
36
42
  const theme = useTheme();
37
- return (_jsx(Root, Object.assign({ className: classes.root }, rest, { children: [...Array(count + 1)].map((x, i) => (_jsx(Avatar, { children: _jsx(Skeleton, { variant: "circular", width: theme.selfcommunity.user.avatar.sizeSmall, height: theme.selfcommunity.user.avatar.sizeSmall }) }, i))) })));
43
+ return (_jsx(Root, Object.assign({ className: classes.root }, rest, { children: [...Array(count + 1)].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))) })));
38
44
  }