@selfcommunity/react-ui 0.7.50-events.84 → 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.
|
@@ -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:
|
|
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;
|
|
@@ -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:
|
|
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
|
}
|