@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
98 lines (89 loc) • 4.87 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 styles_1 = require("@mui/material/styles");
const system_1 = require("@mui/system");
const api_1 = require("@react-google-maps/api");
const react_core_1 = require("@selfcommunity/react-core");
const types_1 = require("@selfcommunity/types");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const react_intl_1 = require("react-intl");
const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
const string_1 = require("../../utils/string");
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`,
title: `${constants_1.PREFIX}-title`,
map: `${constants_1.PREFIX}-map`,
locationTitle: `${constants_1.PREFIX}-location-title`,
address: `${constants_1.PREFIX}-address`
};
const Root = (0, styles_1.styled)(Widget_1.default, {
name: constants_1.PREFIX,
slot: 'Root'
})(() => ({}));
/**
* > API documentation for the Community-JS Group Info Widget component. Learn about the available props and the CSS API.
*
*
* This component renders a widget containing the event info.
* Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/EventLocationWidget)
#### Import
```jsx
import {EventLocationWidget} from '@selfcommunity/react-ui';
```
#### Component Name
The name `SCEventLocationWidget` can be used when providing style overrides in the theme.
#### CSS
|Rule Name|Global class|Description|
|---|---|---|
|root|.SCEventLocationWidget-root|Styles applied to the root element.|
|title|.SCEventLocationWidget-title|Styles applied to the title element.|
|map|.SCEventLocationWidget-map|Styles applied to the map element.|
|locationTitle|.SCEventLocationWidget-location-title|Styles applied to the location title element.|
|address|.SCEventLocationWidget-address|Styles applied to the address element.|
*
* @param inProps
*/
function EventLocationWidget(inProps) {
// PROPS
const props = (0, system_1.useThemeProps)({
props: inProps,
name: constants_1.PREFIX
});
const { className, event, eventId } = props, rest = tslib_1.__rest(props, ["className", "event", "eventId"]);
// STATE
const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
// HOOKS
const { isLoaded, geocodingApiKey } = (0, react_core_1.useSCGoogleApiLoader)();
const mapOptions = {
fullscreenControl: false,
mapTypeControl: false,
streetViewControl: false,
zoomControl: false // Disables the zoom control (+/- buttons)
};
if (!geocodingApiKey || (scEvent === null || scEvent === void 0 ? void 0 : scEvent.location) === types_1.SCEventLocationType.ONLINE) {
return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
}
/**
* Loading event
*/
if (!isLoaded || !scEvent) {
return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
}
/**
* Renders root object
*/
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.title, gutterBottom: true }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventLocationWidget.title", defaultMessage: "ui.eventLocationWidget.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.map }, { children: (0, jsx_runtime_1.jsx)(api_1.GoogleMap, Object.assign({ mapContainerClassName: classes.map, center: {
lat: scEvent.geolocation_lat,
lng: scEvent.geolocation_lng
}, options: mapOptions, zoom: 15 }, { children: (0, jsx_runtime_1.jsx)(api_1.MarkerF, { position: {
lat: scEvent.geolocation_lat,
lng: scEvent.geolocation_lng
} }) })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.locationTitle }, { children: (0, string_1.formatEventLocationGeolocation)(scEvent.geolocation, true) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.address }, { children: (0, string_1.formatEventLocationGeolocation)(scEvent.geolocation) }))] }) })));
}
exports.default = EventLocationWidget;