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

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 (16) 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/cjs/components/SuggestedEventsWidget/SuggestedEventsWidget.js +25 -1
  8. package/lib/esm/components/EventParticipantsButton/EventParticipantsButton.d.ts +1 -1
  9. package/lib/esm/components/EventParticipantsButton/EventParticipantsButton.js +7 -8
  10. package/lib/esm/components/EventSubscribeButton/EventSubscribeButton.js +8 -8
  11. package/lib/esm/components/OnBoardingWidget/Steps/Profile/Profile.js +13 -16
  12. package/lib/esm/components/Skeleton/AvatarGroupSkeleton.d.ts +17 -1
  13. package/lib/esm/components/Skeleton/AvatarGroupSkeleton.js +9 -3
  14. package/lib/esm/components/SuggestedEventsWidget/SuggestedEventsWidget.js +26 -2
  15. package/lib/umd/react-ui.js +1 -1
  16. 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/cjs/components/SuggestedEventsWidget/SuggestedEventsWidget.js CHANGED
@@ -52,8 +52,12 @@ function SuggestedEventsWidget(inProps) {
52
52
  const [loading, setLoading] = (0, react_1.useState)(true);
53
53
  const [showSkeleton, setShowSkeleton] = (0, react_1.useState)(false);
54
54
  const [currentItem, setCurrentItem] = (0, react_1.useState)(0);
55
+ const [hideMarginLeft, setHideMarginLeft] = (0, react_1.useState)(false);
56
+ const [hideMarginRight, setHideMarginRight] = (0, react_1.useState)(true);
55
57
  // CONTEXT
56
58
  const scRoutingContext = (0, react_core_1.useSCRouting)();
59
+ //HOOKS
60
+ const theme = (0, material_1.useTheme)();
57
61
  (0, react_1.useEffect)(() => {
58
62
  api_services_1.SuggestionService.getEventSuggestion(Object.assign({}, endpointQueryParams))
59
63
  .then((payload) => {
@@ -66,6 +70,9 @@ function SuggestedEventsWidget(inProps) {
66
70
  utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
67
71
  });
68
72
  }, []);
73
+ const handleReachBeginning = (0, react_1.useCallback)(() => {
74
+ setHideMarginLeft(false);
75
+ }, []);
69
76
  const handleReachEnd = (0, react_1.useCallback)(() => {
70
77
  if (count > events.length && next) {
71
78
  setShowSkeleton(true);
@@ -84,7 +91,21 @@ function SuggestedEventsWidget(inProps) {
84
91
  utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
85
92
  });
86
93
  }
94
+ else {
95
+ setHideMarginRight(false);
96
+ }
87
97
  }, [count, events, next]);
98
+ const handleChange = (0, react_1.useCallback)((swiper) => {
99
+ setCurrentItem(swiper.snapIndex);
100
+ if (swiper.snapIndex > 0 && swiper.snapIndex < count) {
101
+ if (!hideMarginLeft) {
102
+ setHideMarginLeft(true);
103
+ }
104
+ if (!hideMarginRight) {
105
+ setHideMarginRight(true);
106
+ }
107
+ }
108
+ }, [count, hideMarginLeft, hideMarginRight]);
88
109
  // RENDER
89
110
  if (!events && loading) {
90
111
  return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
@@ -92,6 +113,9 @@ function SuggestedEventsWidget(inProps) {
92
113
  if (!events || count === 0) {
93
114
  return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
94
115
  }
95
- return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.suggestedEventsWidget.title", defaultMessage: "ui.suggestedEventsWidget.title" }) })), (0, jsx_runtime_1.jsxs)(react_2.Swiper, Object.assign({ spaceBetween: 8, slidesPerView: "auto", grabCursor: true, onReachEnd: handleReachEnd, onSlideChange: (swiper) => setCurrentItem(swiper.snapIndex), className: classes.swiper }, { children: [(showSkeleton ? [...events, undefined] : events).map((event, i) => ((0, jsx_runtime_1.jsx)(react_2.SwiperSlide, Object.assign({ className: classes.swiperSlide }, { children: (0, jsx_runtime_1.jsx)(Event_1.default, { event: event, template: event_1.SCEventTemplateType.PREVIEW, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), variant: "outlined", className: classes.event }) }), i))), (0, jsx_runtime_1.jsx)(Arrow_1.default, { className: (0, classnames_1.default)(classes.swiperArrow, classes.swiperPrevArrow), type: "prev", currentItem: currentItem, setCurrentItem: setCurrentItem }), (0, jsx_runtime_1.jsx)(Arrow_1.default, { className: (0, classnames_1.default)(classes.swiperArrow, classes.swiperNextArrow), type: "next", currentItem: currentItem, setCurrentItem: setCurrentItem })] }))] })), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENTS_SUGGESTED_ROUTE_NAME, {}), className: classes.actionButton }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.suggestedEventsWidget.showAll", defaultMessage: "ui.suggestedEventsWidget.showAll" }) })) })) }))] })));
116
+ return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.suggestedEventsWidget.title", defaultMessage: "ui.suggestedEventsWidget.title" }) })), (0, jsx_runtime_1.jsxs)(react_2.Swiper, Object.assign({ spaceBetween: 8, slidesPerView: "auto", grabCursor: true, onReachBeginning: handleReachBeginning, onReachEnd: handleReachEnd, onSlideChange: handleChange, className: classes.swiper, style: {
117
+ marginLeft: hideMarginLeft ? `-${theme.spacing(2)}` : 0,
118
+ marginRight: hideMarginRight ? `-${theme.spacing(2)}` : 0
119
+ } }, { children: [(showSkeleton ? [...events, undefined] : events).map((event, i) => ((0, jsx_runtime_1.jsx)(react_2.SwiperSlide, Object.assign({ className: classes.swiperSlide }, { children: (0, jsx_runtime_1.jsx)(Event_1.default, { event: event, template: event_1.SCEventTemplateType.PREVIEW, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), variant: "outlined", className: classes.event }) }), i))), (0, jsx_runtime_1.jsx)(Arrow_1.default, { className: (0, classnames_1.default)(classes.swiperArrow, classes.swiperPrevArrow), type: "prev", currentItem: currentItem, setCurrentItem: setCurrentItem }), (0, jsx_runtime_1.jsx)(Arrow_1.default, { className: (0, classnames_1.default)(classes.swiperArrow, classes.swiperNextArrow), type: "next", currentItem: currentItem, setCurrentItem: setCurrentItem })] }))] })), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENTS_SUGGESTED_ROUTE_NAME, {}), className: classes.actionButton }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.suggestedEventsWidget.showAll", defaultMessage: "ui.suggestedEventsWidget.showAll" }) })) })) }))] })));
96
120
  }
97
121
  exports.default = SuggestedEventsWidget;
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
  }
package/lib/esm/components/SuggestedEventsWidget/SuggestedEventsWidget.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { __rest } from "tslib";
2
2
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { Button, CardActions, CardContent, Typography, useThemeProps } from '@mui/material';
3
+ import { Button, CardActions, CardContent, Typography, useTheme, useThemeProps } from '@mui/material';
4
4
  import { styled } from '@mui/system';
5
5
  import { Endpoints, http, SuggestionService } from '@selfcommunity/api-services';
6
6
  import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
@@ -50,8 +50,12 @@ export default function SuggestedEventsWidget(inProps) {
50
50
  const [loading, setLoading] = useState(true);
51
51
  const [showSkeleton, setShowSkeleton] = useState(false);
52
52
  const [currentItem, setCurrentItem] = useState(0);
53
+ const [hideMarginLeft, setHideMarginLeft] = useState(false);
54
+ const [hideMarginRight, setHideMarginRight] = useState(true);
53
55
  // CONTEXT
54
56
  const scRoutingContext = useSCRouting();
57
+ //HOOKS
58
+ const theme = useTheme();
55
59
  useEffect(() => {
56
60
  SuggestionService.getEventSuggestion(Object.assign({}, endpointQueryParams))
57
61
  .then((payload) => {
@@ -64,6 +68,9 @@ export default function SuggestedEventsWidget(inProps) {
64
68
  Logger.error(SCOPE_SC_UI, error);
65
69
  });
66
70
  }, []);
71
+ const handleReachBeginning = useCallback(() => {
72
+ setHideMarginLeft(false);
73
+ }, []);
67
74
  const handleReachEnd = useCallback(() => {
68
75
  if (count > events.length && next) {
69
76
  setShowSkeleton(true);
@@ -82,7 +89,21 @@ export default function SuggestedEventsWidget(inProps) {
82
89
  Logger.error(SCOPE_SC_UI, error);
83
90
  });
84
91
  }
92
+ else {
93
+ setHideMarginRight(false);
94
+ }
85
95
  }, [count, events, next]);
96
+ const handleChange = useCallback((swiper) => {
97
+ setCurrentItem(swiper.snapIndex);
98
+ if (swiper.snapIndex > 0 && swiper.snapIndex < count) {
99
+ if (!hideMarginLeft) {
100
+ setHideMarginLeft(true);
101
+ }
102
+ if (!hideMarginRight) {
103
+ setHideMarginRight(true);
104
+ }
105
+ }
106
+ }, [count, hideMarginLeft, hideMarginRight]);
86
107
  // RENDER
87
108
  if (!events && loading) {
88
109
  return _jsx(Skeleton, {});
@@ -90,5 +111,8 @@ export default function SuggestedEventsWidget(inProps) {
90
111
  if (!events || count === 0) {
91
112
  return _jsx(HiddenPlaceholder, {});
92
113
  }
93
- return (_jsxs(Root, Object.assign({ className: classes.root }, rest, { children: [_jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Typography, Object.assign({ variant: "h5", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.suggestedEventsWidget.title", defaultMessage: "ui.suggestedEventsWidget.title" }) })), _jsxs(Swiper, Object.assign({ spaceBetween: 8, slidesPerView: "auto", grabCursor: true, onReachEnd: handleReachEnd, onSlideChange: (swiper) => setCurrentItem(swiper.snapIndex), className: classes.swiper }, { children: [(showSkeleton ? [...events, undefined] : events).map((event, i) => (_jsx(SwiperSlide, Object.assign({ className: classes.swiperSlide }, { children: _jsx(Event, { event: event, template: SCEventTemplateType.PREVIEW, actions: _jsx(_Fragment, {}), variant: "outlined", className: classes.event }) }), i))), _jsx(Arrow, { className: classNames(classes.swiperArrow, classes.swiperPrevArrow), type: "prev", currentItem: currentItem, setCurrentItem: setCurrentItem }), _jsx(Arrow, { className: classNames(classes.swiperArrow, classes.swiperNextArrow), type: "next", currentItem: currentItem, setCurrentItem: setCurrentItem })] }))] })), _jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.EVENTS_SUGGESTED_ROUTE_NAME, {}), className: classes.actionButton }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.suggestedEventsWidget.showAll", defaultMessage: "ui.suggestedEventsWidget.showAll" }) })) })) }))] })));
114
+ return (_jsxs(Root, Object.assign({ className: classes.root }, rest, { children: [_jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Typography, Object.assign({ variant: "h5", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.suggestedEventsWidget.title", defaultMessage: "ui.suggestedEventsWidget.title" }) })), _jsxs(Swiper, Object.assign({ spaceBetween: 8, slidesPerView: "auto", grabCursor: true, onReachBeginning: handleReachBeginning, onReachEnd: handleReachEnd, onSlideChange: handleChange, className: classes.swiper, style: {
115
+ marginLeft: hideMarginLeft ? `-${theme.spacing(2)}` : 0,
116
+ marginRight: hideMarginRight ? `-${theme.spacing(2)}` : 0
117
+ } }, { children: [(showSkeleton ? [...events, undefined] : events).map((event, i) => (_jsx(SwiperSlide, Object.assign({ className: classes.swiperSlide }, { children: _jsx(Event, { event: event, template: SCEventTemplateType.PREVIEW, actions: _jsx(_Fragment, {}), variant: "outlined", className: classes.event }) }), i))), _jsx(Arrow, { className: classNames(classes.swiperArrow, classes.swiperPrevArrow), type: "prev", currentItem: currentItem, setCurrentItem: setCurrentItem }), _jsx(Arrow, { className: classNames(classes.swiperArrow, classes.swiperNextArrow), type: "next", currentItem: currentItem, setCurrentItem: setCurrentItem })] }))] })), _jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.EVENTS_SUGGESTED_ROUTE_NAME, {}), className: classes.actionButton }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.suggestedEventsWidget.showAll", defaultMessage: "ui.suggestedEventsWidget.showAll" }) })) })) }))] })));
94
118
  }