@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
105 lines (104 loc) • 6.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const react_core_1 = require("@selfcommunity/react-core");
const types_1 = require("@selfcommunity/types");
const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
const react_1 = require("react");
const react_intl_1 = require("react-intl");
const PubSub_1 = require("../../constants/PubSub");
const EventInfoDetails_1 = tslib_1.__importDefault(require("../../shared/EventInfoDetails"));
const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
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`,
content: `${constants_1.PREFIX}-content`,
titleWrapper: `${constants_1.PREFIX}-title-wrapper`,
textWrapper: `${constants_1.PREFIX}-text-wrapper`,
showMore: `${constants_1.PREFIX}-show-more`
};
const Root = (0, material_1.styled)(Widget_1.default, {
name: constants_1.PREFIX,
slot: 'Root',
overridesResolver: (_props, styles) => styles.root
})(() => ({}));
function isTextLongerThanLimit(text, limit = 125) {
return text.length > limit;
}
function getTruncatedText(text, limit = 125) {
if (!text) {
return '';
}
return isTextLongerThanLimit(text, limit) ? text.substring(0, limit).concat('...') : text;
}
function EventInfoWidget(inProps) {
// PROPS
const props = (0, material_1.useThemeProps)({
props: inProps,
name: constants_1.PREFIX
});
const { event, eventId, summaryExpanded = false } = props, rest = tslib_1.__rest(props, ["event", "eventId", "summaryExpanded"]);
// STATE
const [expanded, setExpanded] = (0, react_1.useState)(summaryExpanded);
const [showButton, setShowButton] = (0, react_1.useState)(!summaryExpanded);
const [loading, setLoading] = (0, react_1.useState)(true);
// HOOKS
const { scEvent, setSCEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
// REFS
const updatesSubscription = (0, react_1.useRef)(null);
(0, react_1.useEffect)(() => {
setLoading(false);
}, []);
(0, react_1.useEffect)(() => {
if (!scEvent) {
return;
}
const _showButton = isTextLongerThanLimit(scEvent.description, 220);
if (_showButton !== !summaryExpanded) {
setShowButton(_showButton);
}
}, [scEvent]);
/**
* Handle toggle summary
*/
const handleToggleSummary = (0, react_1.useCallback)(() => {
setExpanded(!expanded);
}, [expanded]);
const hasGeolocationOrLink = (0, react_1.useMemo)(() => Boolean((scEvent === null || scEvent === void 0 ? void 0 : scEvent.geolocation) || (scEvent === null || scEvent === void 0 ? void 0 : scEvent.link) || (scEvent === null || scEvent === void 0 ? void 0 : scEvent.live_stream)), [scEvent]);
const showInfo = (0, react_1.useMemo)(() => ((scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) === types_1.SCEventPrivacyType.PUBLIC && hasGeolocationOrLink) ||
([types_1.SCEventSubscriptionStatusType.SUBSCRIBED, types_1.SCEventSubscriptionStatusType.GOING, types_1.SCEventSubscriptionStatusType.NOT_GOING].indexOf(scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) > -1 &&
hasGeolocationOrLink), [scEvent]);
const description = (0, react_1.useMemo)(() => (expanded ? scEvent === null || scEvent === void 0 ? void 0 : scEvent.description : getTruncatedText(scEvent === null || scEvent === void 0 ? void 0 : scEvent.description, 220)), [expanded, scEvent]);
/**
* Subscriber for pubsub callback
*/
const onChangeGroupHandler = (0, react_1.useCallback)((_msg, data) => {
if (data && scEvent.id === data.id) {
setSCEvent(data);
}
}, [scEvent, setSCEvent]);
/**
* On mount, subscribe to receive groups updates (only edit)
*/
(0, react_1.useEffect)(() => {
if (scEvent) {
updatesSubscription.current = pubsub_js_1.default.subscribe(`${PubSub_1.SCTopicType.EVENT}.${PubSub_1.SCGroupEventType.EDIT}`, onChangeGroupHandler);
}
return () => {
updatesSubscription.current && pubsub_js_1.default.unsubscribe(updatesSubscription.current);
};
}, [scEvent]);
// RENDER
if (!scEvent && loading) {
return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
}
if (!scEvent) {
return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
}
return ((0, jsx_runtime_1.jsx)(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.jsxs)(material_1.Stack, Object.assign({ className: classes.titleWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "info" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.infoEventWidget.title", defaultMessage: "ui.infoEventWidget.title" }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.textWrapper }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: "span", variant: "body1" }, { children: [description, showButton && !expanded && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "text", className: classes.showMore, onClick: handleToggleSummary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.infoEventWidget.showMore", defaultMessage: "ui.infoEventWidget.showMore" }) })))] })) })), (0, jsx_runtime_1.jsx)(EventInfoDetails_1.default, { event: scEvent, hasRecurringInfo: true, hasCreatedInfo: true, hasLocationInfo: showInfo })] })) })));
}
exports.default = EventInfoWidget;