@selfcommunity/react-ui 0.7.50-events.56 → 0.7.50-events.57

package/lib/cjs/components/Event/Event.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
 import { SCEventType } from '@selfcommunity/types';
+import React from 'react';
+import { SCEventTemplateType } from '../../types/event';
 import { WidgetProps } from '../Widget';
 import { EventSkeletonProps } from './Skeleton';
-import { SCEventTemplateType } from '../../types/event';
 export interface EventProps extends WidgetProps {
     /**
      * Event Object

package/lib/cjs/components/Event/Event.js

@@ -2,22 +2,22 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
-const types_1 = require("@selfcommunity/types");
+const styles_1 = require("@mui/material/styles");
+const system_1 = require("@mui/system");
 const react_core_1 = require("@selfcommunity/react-core");
-const react_intl_1 = require("react-intl");
+const types_1 = require("@selfcommunity/types");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const system_1 = require("@mui/system");
+const react_intl_1 = require("react-intl");
 const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
-const Widget_1 = tslib_1.__importDefault(require("../Widget"));
-const constants_1 = require("./constants");
-const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const Calendar_1 = tslib_1.__importDefault(require("../../shared/Calendar"));
 const EventInfoDetails_1 = tslib_1.__importDefault(require("../../shared/EventInfoDetails"));
-const User_1 = tslib_1.__importDefault(require("../User"));
-const EventPartecipantsButton_1 = tslib_1.__importDefault(require("../EventPartecipantsButton"));
 const event_1 = require("../../types/event");
+const EventPartecipantsButton_1 = tslib_1.__importDefault(require("../EventPartecipantsButton"));
+const User_1 = tslib_1.__importDefault(require("../User"));
+const Widget_1 = tslib_1.__importDefault(require("../Widget"));
+const constants_1 = require("./constants");
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     detailRoot: `${constants_1.PREFIX}-detail-root`,
@@ -119,13 +119,13 @@ function Event(inProps) {
      */
     let contentObj;
     if (template === event_1.SCEventTemplateType.DETAIL) {
-        contentObj = ((0, jsx_runtime_1.jsxs)(DetailRoot, Object.assign({ className: classes.detailRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.detailImageWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: scEvent.image_big, alt: scEvent.name, className: classes.detailImage }), (0, jsx_runtime_1.jsx)(Calendar_1.default, { day: new Date(scEvent.start_date).getDate() })] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.detailContent }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.detailNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.detailName }, { children: scEvent.name })) })), (0, jsx_runtime_1.jsx)(EventInfoDetails_1.default, { event: scEvent }), !hideEventPlanner && ((0, jsx_runtime_1.jsx)(User_1.default, { user: scEvent.managed_by, elevation: 0, secondary: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.myEventsWidget.planner", defaultMessage: "ui.myEventsWidget.planner" }) })), actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), className: classes.detailUser })), !hideEventParticipants && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.detailFirstDivider }), (0, jsx_runtime_1.jsx)(EventPartecipantsButton_1.default, { event: scEvent, eventId: scEvent.id })] })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.detailSecondDivider })] })), actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.detailActions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
+        contentObj = ((0, jsx_runtime_1.jsxs)(DetailRoot, Object.assign({ className: classes.detailRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.detailImageWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: scEvent.image_medium, alt: scEvent.name, className: classes.detailImage }), (0, jsx_runtime_1.jsx)(Calendar_1.default, { day: new Date(scEvent.start_date).getDate() })] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.detailContent }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.detailNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.detailName }, { children: scEvent.name })) })), (0, jsx_runtime_1.jsx)(EventInfoDetails_1.default, { event: scEvent }), !hideEventPlanner && ((0, jsx_runtime_1.jsx)(User_1.default, { user: scEvent.managed_by, elevation: 0, secondary: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.myEventsWidget.planner", defaultMessage: "ui.myEventsWidget.planner" }) })), actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), className: classes.detailUser })), !hideEventParticipants && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.detailFirstDivider }), (0, jsx_runtime_1.jsx)(EventPartecipantsButton_1.default, { event: scEvent, eventId: scEvent.id })] })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.detailSecondDivider })] })), actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.detailActions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
     }
     else if (template === event_1.SCEventTemplateType.PREVIEW) {
         contentObj = ((0, jsx_runtime_1.jsxs)(PreviewRoot, Object.assign({ className: classes.previewRoot }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ position: "relative", className: classes.previewImageWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", height: "100px", image: scEvent.image_medium, alt: scEvent.name, className: classes.previewImage }) })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.previewContent }, { children: [(0, jsx_runtime_1.jsx)(EventInfoDetails_1.default, { event: scEvent, hidePrivacyIcon: true, hasLocationInfo: false, beforePrivacyInfo: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.previewNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.previewName }, { children: scEvent.name })) })) }), !hideEventParticipants && (0, jsx_runtime_1.jsx)(EventPartecipantsButton_1.default, { event: scEvent })] })), actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.previewActions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
     }
     else {
-        contentObj = ((0, jsx_runtime_1.jsx)(SnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.snippetRoot, image: (0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "square", alt: scEvent.name, src: scEvent.image_small, className: classes.snippetAvatar }), primary: (0, jsx_runtime_1.jsxs)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.snippetPrimary }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: `${intl.formatDate(scEvent.start_date, {
+        contentObj = ((0, jsx_runtime_1.jsx)(SnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.snippetRoot, image: (0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "square", alt: scEvent.name, src: scEvent.image_medium, className: classes.snippetAvatar }), primary: (0, jsx_runtime_1.jsxs)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.snippetPrimary }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: `${intl.formatDate(scEvent.start_date, {
                             weekday: 'long',
                             month: 'long',
                             day: 'numeric'

package/lib/cjs/components/SuggestedEventsWidget/Arrow.d.ts

@@ -0,0 +1,8 @@
+import { Dispatch, HTMLAttributes, SetStateAction } from 'react';
+export interface ArrowProps {
+    type: 'prev' | 'next';
+    currentItem: number;
+    setCurrentItem: Dispatch<SetStateAction<number>>;
+    className?: HTMLAttributes<HTMLButtonElement>['className'];
+}
+export default function Arrow(props: ArrowProps): JSX.Element;

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_2 = require("swiper/react");
+function Arrow(props) {
+    const { type, currentItem, setCurrentItem, className } = props;
+    // STATE
+    const [itemsLength, setItemsLength] = (0, react_1.useState)(0);
+    // HOOKS
+    const swiper = (0, react_2.useSwiper)();
+    (0, react_1.useEffect)(() => {
+        setItemsLength(swiper.slides.length);
+    }, []);
+    const handleChange = (0, react_1.useCallback)((type) => {
+        if (type === 'prev') {
+            swiper.slidePrev();
+        }
+        else {
+            swiper.slideNext();
+        }
+        setCurrentItem(swiper.snapIndex);
+    }, [type]);
+    if (type === 'prev') {
+        return (currentItem > 0 && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: className, size: "medium", onClick: () => handleChange('prev') }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "chevron_left" }) }))));
+    }
+    return (currentItem < itemsLength - 1 && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: className, size: "medium", onClick: () => handleChange('next') }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "chevron_right" }) }))));
+}
+exports.default = Arrow;

package/lib/cjs/components/SuggestedEventsWidget/Skeleton.js

@@ -6,15 +6,15 @@ const material_1 = require("@mui/material");
 const system_1 = require("@mui/system");
 require("swiper/css");
 const react_1 = require("swiper/react");
+const event_1 = require("../../types/event");
+const Event_1 = require("../Event");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const constants_1 = require("./constants");
-const Event_1 = require("../Event");
-const event_1 = require("../../types/event");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`,
     content: `${constants_1.PREFIX}-content`,
     title: `${constants_1.PREFIX}-title`,
-    swiper: `${constants_1.PREFIX}-swiper`,
+    swiperSlide: `${constants_1.PREFIX}-swiper-slide`,
     actions: `${constants_1.PREFIX}-actions`
 };
 const Root = (0, system_1.styled)(Widget_1.default, {
@@ -23,6 +23,6 @@ const Root = (0, system_1.styled)(Widget_1.default, {
     overridesResolver: (_props, styles) => styles.skeletonRoot
 })(() => ({}));
 function SuggestedEventsWidgetSkeleton() {
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { className: classes.title, animation: "wave", width: "141px", height: "23px" }), (0, jsx_runtime_1.jsx)(react_1.Swiper, Object.assign({ spaceBetween: 8, slidesPerView: "auto" }, { children: [1, 2, 3, 4, 5, 6, 7].map((_element, i) => ((0, jsx_runtime_1.jsx)(react_1.SwiperSlide, Object.assign({ className: classes.swiper }, { children: (0, jsx_runtime_1.jsx)(Event_1.EventSkeleton, { template: event_1.SCEventTemplateType.PREVIEW, variant: "outlined", actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) }) }), i))) }))] })), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", width: "52px", height: "20px" }) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { className: classes.title, animation: "wave", width: "141px", height: "23px" }), (0, jsx_runtime_1.jsx)(react_1.Swiper, Object.assign({ spaceBetween: 8, slidesPerView: "auto" }, { children: [1, 2, 3, 4, 5, 6, 7].map((_element, i) => ((0, jsx_runtime_1.jsx)(react_1.SwiperSlide, Object.assign({ className: classes.swiperSlide }, { children: (0, jsx_runtime_1.jsx)(Event_1.EventSkeleton, { template: event_1.SCEventTemplateType.PREVIEW, variant: "outlined", actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) }) }), i))) }))] })), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", width: "52px", height: "20px" }) }))] })));
 }
 exports.default = SuggestedEventsWidgetSkeleton;

package/lib/cjs/components/SuggestedEventsWidget/SuggestedEventsWidget.d.ts

@@ -1,4 +1,3 @@
-import 'swiper/css';
 import { WidgetProps } from '../Widget';
 export interface SuggestedEventsWidgetProps extends WidgetProps {
     /**

package/lib/cjs/components/SuggestedEventsWidget/SuggestedEventsWidget.js

@@ -9,21 +9,25 @@ const react_core_1 = require("@selfcommunity/react-core");
 const utils_1 = require("@selfcommunity/utils");
 const react_1 = require("react");
 const react_intl_1 = require("react-intl");
-require("swiper/css");
+const modules_1 = require("swiper/modules");
 const react_2 = require("swiper/react");
 const Errors_1 = require("../../constants/Errors");
 const Pagination_1 = require("../../constants/Pagination");
 const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
+const event_1 = require("../../types/event");
+const Event_1 = tslib_1.__importDefault(require("../Event"));
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
+const Arrow_1 = tslib_1.__importDefault(require("./Arrow"));
 const constants_1 = require("./constants");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
-const event_1 = require("../../types/event");
-const Event_1 = tslib_1.__importDefault(require("../Event"));
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     content: `${constants_1.PREFIX}-content`,
     title: `${constants_1.PREFIX}-title`,
     swiper: `${constants_1.PREFIX}-swiper`,
+    swiperSlide: `${constants_1.PREFIX}-swiper-slide`,
+    swiperPrevArrow: `${constants_1.PREFIX}-swiper-prev-arrow`,
+    swiperNextArrow: `${constants_1.PREFIX}-swiper-next-arrow`,
     event: `${constants_1.PREFIX}-event`,
     actions: `${constants_1.PREFIX}-actions`,
     actionButton: `${constants_1.PREFIX}-action-button`
@@ -43,6 +47,8 @@ function SuggestedEventsWidget(inProps) {
     // STATE
     const [eventsData, setEventsData] = (0, react_1.useState)(null);
     const [loading, setLoading] = (0, react_1.useState)(true);
+    const [showSkeleton, setShowSkeleton] = (0, react_1.useState)(false);
+    const [currentItem, setCurrentItem] = (0, react_1.useState)(0);
     // CONTEXT
     const scRoutingContext = (0, react_core_1.useSCRouting)();
     (0, react_1.useEffect)(() => {
@@ -56,13 +62,17 @@ function SuggestedEventsWidget(inProps) {
         });
     }, []);
     const handleReachEnd = (0, react_1.useCallback)(() => {
-        if (eventsData.count > eventsData.results.length) {
+        if (eventsData.count > eventsData.results.length && eventsData.next) {
+            setShowSkeleton(true);
             api_services_1.http
                 .request({
                 url: eventsData.next,
                 method: api_services_1.Endpoints.GetEventSuggestedUsers.method
             })
-                .then((res) => console.log('*** res ***', res))
+                .then((res) => {
+                setEventsData(res.data);
+                setShowSkeleton(false);
+            })
                 .catch((error) => {
                 utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
             });
@@ -75,6 +85,6 @@ function SuggestedEventsWidget(inProps) {
     if (!eventsData) {
         return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
     }
-    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.jsx)(react_2.Swiper, Object.assign({ spaceBetween: 8, slidesPerView: "auto", onReachEnd: handleReachEnd }, { children: eventsData === null || eventsData === void 0 ? void 0 : eventsData.results.map((event, i) => ((0, jsx_runtime_1.jsx)(react_2.SwiperSlide, Object.assign({ className: classes.swiper }, { 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)(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.EVENT_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" }) })) })) }))] })));
+    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, modules: [modules_1.Navigation], onReachEnd: handleReachEnd, className: classes.swiper }, { children: [(showSkeleton ? [...eventsData.results, undefined] : eventsData.results).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: classes.swiperPrevArrow, type: "prev", currentItem: currentItem, setCurrentItem: setCurrentItem }), (0, jsx_runtime_1.jsx)(Arrow_1.default, { className: 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" }) })) })) }))] })));
 }
 exports.default = SuggestedEventsWidget;

package/lib/cjs/components/SuggestedEventsWidget/index.d.ts

@@ -1,4 +1,5 @@
+import Arrow, { ArrowProps } from './Arrow';
 import SuggestedEventsWidgetSkeleton from './Skeleton';
 import SuggestedEventsWidget, { SuggestedEventsWidgetProps } from './SuggestedEventsWidget';
 export default SuggestedEventsWidget;
-export { SuggestedEventsWidgetSkeleton, type SuggestedEventsWidgetProps };
+export { Arrow, SuggestedEventsWidgetSkeleton, type ArrowProps, type SuggestedEventsWidgetProps };

package/lib/cjs/components/SuggestedEventsWidget/index.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SuggestedEventsWidgetSkeleton = void 0;
+exports.SuggestedEventsWidgetSkeleton = exports.Arrow = void 0;
 const tslib_1 = require("tslib");
+const Arrow_1 = tslib_1.__importDefault(require("./Arrow"));
+exports.Arrow = Arrow_1.default;
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 exports.SuggestedEventsWidgetSkeleton = Skeleton_1.default;
 const SuggestedEventsWidget_1 = tslib_1.__importDefault(require("./SuggestedEventsWidget"));

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

@@ -1,8 +1,8 @@
-import React from 'react';
 import { SCEventType } from '@selfcommunity/types';
+import React from 'react';
+import { SCEventTemplateType } from '../../types/event';
 import { WidgetProps } from '../Widget';
 import { EventSkeletonProps } from './Skeleton';
-import { SCEventTemplateType } from '../../types/event';
 export interface EventProps extends WidgetProps {
     /**
      * Event Object

package/lib/esm/components/Event/Event.js

@@ -1,21 +1,21 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
 import { Avatar, Box, Button, CardActions, CardContent, CardMedia, Divider, Typography } from '@mui/material';
-import { SCEventLocationType } from '@selfcommunity/types';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
 import { Link, SCRoutes, useSCFetchEvent, useSCRouting } from '@selfcommunity/react-core';
-import { FormattedMessage, useIntl } from 'react-intl';
+import { SCEventLocationType } from '@selfcommunity/types';
 import classNames from 'classnames';
-import { useThemeProps } from '@mui/system';
+import { FormattedMessage, useIntl } from 'react-intl';
 import BaseItem from '../../shared/BaseItem';
-import Widget from '../Widget';
-import { PREFIX } from './constants';
-import EventSkeleton from './Skeleton';
 import Calendar from '../../shared/Calendar';
 import EventInfoDetails from '../../shared/EventInfoDetails';
-import User from '../User';
-import EventPartecipantsButton from '../EventPartecipantsButton';
 import { SCEventTemplateType } from '../../types/event';
+import EventPartecipantsButton from '../EventPartecipantsButton';
+import User from '../User';
+import Widget from '../Widget';
+import { PREFIX } from './constants';
+import EventSkeleton from './Skeleton';
 const classes = {
     root: `${PREFIX}-root`,
     detailRoot: `${PREFIX}-detail-root`,
@@ -117,13 +117,13 @@ export default function Event(inProps) {
      */
     let contentObj;
     if (template === SCEventTemplateType.DETAIL) {
-        contentObj = (_jsxs(DetailRoot, Object.assign({ className: classes.detailRoot }, { children: [_jsxs(Box, Object.assign({ className: classes.detailImageWrapper }, { children: [_jsx(CardMedia, { component: "img", image: scEvent.image_big, alt: scEvent.name, className: classes.detailImage }), _jsx(Calendar, { day: new Date(scEvent.start_date).getDate() })] })), _jsxs(CardContent, Object.assign({ className: classes.detailContent }, { children: [_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.detailNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h3", className: classes.detailName }, { children: scEvent.name })) })), _jsx(EventInfoDetails, { event: scEvent }), !hideEventPlanner && (_jsx(User, { user: scEvent.managed_by, elevation: 0, secondary: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.myEventsWidget.planner", defaultMessage: "ui.myEventsWidget.planner" }) })), actions: _jsx(_Fragment, {}), className: classes.detailUser })), !hideEventParticipants && (_jsxs(_Fragment, { children: [_jsx(Divider, { className: classes.detailFirstDivider }), _jsx(EventPartecipantsButton, { event: scEvent, eventId: scEvent.id })] })), _jsx(Divider, { className: classes.detailSecondDivider })] })), actions !== null && actions !== void 0 ? actions : (_jsx(CardActions, Object.assign({ className: classes.detailActions }, { children: _jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
+        contentObj = (_jsxs(DetailRoot, Object.assign({ className: classes.detailRoot }, { children: [_jsxs(Box, Object.assign({ className: classes.detailImageWrapper }, { children: [_jsx(CardMedia, { component: "img", image: scEvent.image_medium, alt: scEvent.name, className: classes.detailImage }), _jsx(Calendar, { day: new Date(scEvent.start_date).getDate() })] })), _jsxs(CardContent, Object.assign({ className: classes.detailContent }, { children: [_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.detailNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h3", className: classes.detailName }, { children: scEvent.name })) })), _jsx(EventInfoDetails, { event: scEvent }), !hideEventPlanner && (_jsx(User, { user: scEvent.managed_by, elevation: 0, secondary: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.myEventsWidget.planner", defaultMessage: "ui.myEventsWidget.planner" }) })), actions: _jsx(_Fragment, {}), className: classes.detailUser })), !hideEventParticipants && (_jsxs(_Fragment, { children: [_jsx(Divider, { className: classes.detailFirstDivider }), _jsx(EventPartecipantsButton, { event: scEvent, eventId: scEvent.id })] })), _jsx(Divider, { className: classes.detailSecondDivider })] })), actions !== null && actions !== void 0 ? actions : (_jsx(CardActions, Object.assign({ className: classes.detailActions }, { children: _jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
     }
     else if (template === SCEventTemplateType.PREVIEW) {
         contentObj = (_jsxs(PreviewRoot, Object.assign({ className: classes.previewRoot }, { children: [_jsx(Box, Object.assign({ position: "relative", className: classes.previewImageWrapper }, { children: _jsx(CardMedia, { component: "img", height: "100px", image: scEvent.image_medium, alt: scEvent.name, className: classes.previewImage }) })), _jsxs(CardContent, Object.assign({ className: classes.previewContent }, { children: [_jsx(EventInfoDetails, { event: scEvent, hidePrivacyIcon: true, hasLocationInfo: false, beforePrivacyInfo: _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.previewNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h5", className: classes.previewName }, { children: scEvent.name })) })) }), !hideEventParticipants && _jsx(EventPartecipantsButton, { event: scEvent })] })), actions !== null && actions !== void 0 ? actions : (_jsx(CardActions, Object.assign({ className: classes.previewActions }, { children: _jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
     }
     else {
-        contentObj = (_jsx(SnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.snippetRoot, image: _jsx(Avatar, { variant: "square", alt: scEvent.name, src: scEvent.image_small, className: classes.snippetAvatar }), primary: _jsxs(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.snippetPrimary }, { children: [_jsx(Typography, Object.assign({ component: "span" }, { children: `${intl.formatDate(scEvent.start_date, {
+        contentObj = (_jsx(SnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.snippetRoot, image: _jsx(Avatar, { variant: "square", alt: scEvent.name, src: scEvent.image_medium, className: classes.snippetAvatar }), primary: _jsxs(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.snippetPrimary }, { children: [_jsx(Typography, Object.assign({ component: "span" }, { children: `${intl.formatDate(scEvent.start_date, {
                             weekday: 'long',
                             month: 'long',
                             day: 'numeric'

package/lib/esm/components/SuggestedEventsWidget/Arrow.d.ts

@@ -0,0 +1,8 @@
+import { Dispatch, HTMLAttributes, SetStateAction } from 'react';
+export interface ArrowProps {
+    type: 'prev' | 'next';
+    currentItem: number;
+    setCurrentItem: Dispatch<SetStateAction<number>>;
+    className?: HTMLAttributes<HTMLButtonElement>['className'];
+}
+export default function Arrow(props: ArrowProps): JSX.Element;

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon, IconButton } from '@mui/material';
+import { useCallback, useEffect, useState } from 'react';
+import { useSwiper } from 'swiper/react';
+export default function Arrow(props) {
+    const { type, currentItem, setCurrentItem, className } = props;
+    // STATE
+    const [itemsLength, setItemsLength] = useState(0);
+    // HOOKS
+    const swiper = useSwiper();
+    useEffect(() => {
+        setItemsLength(swiper.slides.length);
+    }, []);
+    const handleChange = useCallback((type) => {
+        if (type === 'prev') {
+            swiper.slidePrev();
+        }
+        else {
+            swiper.slideNext();
+        }
+        setCurrentItem(swiper.snapIndex);
+    }, [type]);
+    if (type === 'prev') {
+        return (currentItem > 0 && (_jsx(IconButton, Object.assign({ className: className, size: "medium", onClick: () => handleChange('prev') }, { children: _jsx(Icon, { children: "chevron_left" }) }))));
+    }
+    return (currentItem < itemsLength - 1 && (_jsx(IconButton, Object.assign({ className: className, size: "medium", onClick: () => handleChange('next') }, { children: _jsx(Icon, { children: "chevron_right" }) }))));
+}

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

@@ -3,15 +3,15 @@ import { CardActions, CardContent, Skeleton } from '@mui/material';
 import { styled } from '@mui/system';
 import 'swiper/css';
 import { Swiper, SwiperSlide } from 'swiper/react';
+import { SCEventTemplateType } from '../../types/event';
+import { EventSkeleton } from '../Event';
 import Widget from '../Widget';
 import { PREFIX } from './constants';
-import { EventSkeleton } from '../Event';
-import { SCEventTemplateType } from '../../types/event';
 const classes = {
     root: `${PREFIX}-skeleton-root`,
     content: `${PREFIX}-content`,
     title: `${PREFIX}-title`,
-    swiper: `${PREFIX}-swiper`,
+    swiperSlide: `${PREFIX}-swiper-slide`,
     actions: `${PREFIX}-actions`
 };
 const Root = styled(Widget, {
@@ -20,5 +20,5 @@ const Root = styled(Widget, {
     overridesResolver: (_props, styles) => styles.skeletonRoot
 })(() => ({}));
 export default function SuggestedEventsWidgetSkeleton() {
-    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Skeleton, { className: classes.title, animation: "wave", width: "141px", height: "23px" }), _jsx(Swiper, Object.assign({ spaceBetween: 8, slidesPerView: "auto" }, { children: [1, 2, 3, 4, 5, 6, 7].map((_element, i) => (_jsx(SwiperSlide, Object.assign({ className: classes.swiper }, { children: _jsx(EventSkeleton, { template: SCEventTemplateType.PREVIEW, variant: "outlined", actions: _jsx(_Fragment, {}) }) }), i))) }))] })), _jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(Skeleton, { animation: "wave", width: "52px", height: "20px" }) }))] })));
+    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Skeleton, { className: classes.title, animation: "wave", width: "141px", height: "23px" }), _jsx(Swiper, Object.assign({ spaceBetween: 8, slidesPerView: "auto" }, { children: [1, 2, 3, 4, 5, 6, 7].map((_element, i) => (_jsx(SwiperSlide, Object.assign({ className: classes.swiperSlide }, { children: _jsx(EventSkeleton, { template: SCEventTemplateType.PREVIEW, variant: "outlined", actions: _jsx(_Fragment, {}) }) }), i))) }))] })), _jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(Skeleton, { animation: "wave", width: "52px", height: "20px" }) }))] })));
 }

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

@@ -1,4 +1,3 @@
-import 'swiper/css';
 import { WidgetProps } from '../Widget';
 export interface SuggestedEventsWidgetProps extends WidgetProps {
     /**

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

@@ -7,21 +7,25 @@ import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
 import { Logger } from '@selfcommunity/utils';
 import { useCallback, useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import 'swiper/css';
+import { Navigation } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { DEFAULT_PAGINATION_LIMIT, DEFAULT_PAGINATION_OFFSET } from '../../constants/Pagination';
 import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
+import { SCEventTemplateType } from '../../types/event';
+import Event from '../Event';
 import Widget from '../Widget';
+import Arrow from './Arrow';
 import { PREFIX } from './constants';
 import Skeleton from './Skeleton';
-import { SCEventTemplateType } from '../../types/event';
-import Event from '../Event';
 const classes = {
     root: `${PREFIX}-root`,
     content: `${PREFIX}-content`,
     title: `${PREFIX}-title`,
     swiper: `${PREFIX}-swiper`,
+    swiperSlide: `${PREFIX}-swiper-slide`,
+    swiperPrevArrow: `${PREFIX}-swiper-prev-arrow`,
+    swiperNextArrow: `${PREFIX}-swiper-next-arrow`,
     event: `${PREFIX}-event`,
     actions: `${PREFIX}-actions`,
     actionButton: `${PREFIX}-action-button`
@@ -41,6 +45,8 @@ export default function SuggestedEventsWidget(inProps) {
     // STATE
     const [eventsData, setEventsData] = useState(null);
     const [loading, setLoading] = useState(true);
+    const [showSkeleton, setShowSkeleton] = useState(false);
+    const [currentItem, setCurrentItem] = useState(0);
     // CONTEXT
     const scRoutingContext = useSCRouting();
     useEffect(() => {
@@ -54,13 +60,17 @@ export default function SuggestedEventsWidget(inProps) {
         });
     }, []);
     const handleReachEnd = useCallback(() => {
-        if (eventsData.count > eventsData.results.length) {
+        if (eventsData.count > eventsData.results.length && eventsData.next) {
+            setShowSkeleton(true);
             http
                 .request({
                 url: eventsData.next,
                 method: Endpoints.GetEventSuggestedUsers.method
             })
-                .then((res) => console.log('*** res ***', res))
+                .then((res) => {
+                setEventsData(res.data);
+                setShowSkeleton(false);
+            })
                 .catch((error) => {
                 Logger.error(SCOPE_SC_UI, error);
             });
@@ -73,5 +83,5 @@ export default function SuggestedEventsWidget(inProps) {
     if (!eventsData) {
         return _jsx(HiddenPlaceholder, {});
     }
-    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" }) })), _jsx(Swiper, Object.assign({ spaceBetween: 8, slidesPerView: "auto", onReachEnd: handleReachEnd }, { children: eventsData === null || eventsData === void 0 ? void 0 : eventsData.results.map((event, i) => (_jsx(SwiperSlide, Object.assign({ className: classes.swiper }, { children: _jsx(Event, { event: event, template: SCEventTemplateType.PREVIEW, actions: _jsx(_Fragment, {}), variant: "outlined", className: classes.event }) }), i))) }))] })), _jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, {}), className: classes.actionButton }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.suggestedEventsWidget.showAll", defaultMessage: "ui.suggestedEventsWidget.showAll" }) })) })) }))] })));
+    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, modules: [Navigation], onReachEnd: handleReachEnd, className: classes.swiper }, { children: [(showSkeleton ? [...eventsData.results, undefined] : eventsData.results).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: classes.swiperPrevArrow, type: "prev", currentItem: currentItem, setCurrentItem: setCurrentItem }), _jsx(Arrow, { className: 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" }) })) })) }))] })));
 }

package/lib/esm/components/SuggestedEventsWidget/index.d.ts

@@ -1,4 +1,5 @@
+import Arrow, { ArrowProps } from './Arrow';
 import SuggestedEventsWidgetSkeleton from './Skeleton';
 import SuggestedEventsWidget, { SuggestedEventsWidgetProps } from './SuggestedEventsWidget';
 export default SuggestedEventsWidget;
-export { SuggestedEventsWidgetSkeleton, type SuggestedEventsWidgetProps };
+export { Arrow, SuggestedEventsWidgetSkeleton, type ArrowProps, type SuggestedEventsWidgetProps };

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

@@ -1,4 +1,5 @@
+import Arrow from './Arrow';
 import SuggestedEventsWidgetSkeleton from './Skeleton';
 import SuggestedEventsWidget from './SuggestedEventsWidget';
 export default SuggestedEventsWidget;
-export { SuggestedEventsWidgetSkeleton };
+export { Arrow, SuggestedEventsWidgetSkeleton };