@selfcommunity/react-ui 0.7.50-event.30 → 0.7.50-events.101

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

@@ -1,15 +1,25 @@
 import React from 'react';
-import { BaseItemProps } from '../../shared/BaseItem';
-export interface EventSkeletonProps extends BaseItemProps {
+import { SCEventTemplateType } from '../../types/event';
+import { WidgetProps } from '../Widget';
+export interface EventSkeletonProps extends WidgetProps {
     /**
      * Overrides or extends the styles applied to the component.
      * @default null
      */
     className?: string;
+    /**
+     * Event template type
+     * @default 'preview'
+     */
+    template?: SCEventTemplateType;
+    /**
+     * Disable skeleton animation
+     */
+    skeletonsAnimation?: false | 'wave' | 'pulse';
     /**
      * Prop to pass an action to be rendered next to the skeleton
      */
-    action?: React.ReactNode;
+    actions?: React.ReactNode;
 }
 /**
  * > API documentation for the Community-JS Event Skeleton component. Learn about the available props and the CSS API.

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

@@ -1,19 +1,47 @@
-import React from 'react';
-import { Box, Button, Icon } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AvatarGroup, Box, Button, CardActions, CardContent, Divider, Icon, Stack, useTheme } from '@mui/material';
 import Skeleton from '@mui/material/Skeleton';
-import { PREFIX } from './constants';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
 import BaseItem from '../../shared/BaseItem';
+import { SCEventTemplateType } from '../../types/event';
+import Widget from '../Widget';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-skeleton-root`,
-    image: `${PREFIX}-skeleton-image`,
-    action: `${PREFIX}-skeleton-action`
+    skeletonDetailRoot: `${PREFIX}-skeleton-detail-root`,
+    skeletonPreviewRoot: `${PREFIX}-skeleton-preview-root`,
+    skeletonSnippetRoot: `${PREFIX}-skeleton-snippet-root`,
+    skeletonDetailCalendar: `${PREFIX}-skeleton-detail-calendar`,
+    skeletonDetailContent: `${PREFIX}-skeleton-detail-content`,
+    skeletonDetailActions: `${PREFIX}-skeleton-detail-actions`,
+    skeletonDetailUser: `${PREFIX}-skeleton-detail-user`,
+    skeletonDetailFirstDivider: `${PREFIX}-skeleton-detail-first-divider`,
+    skeletonDetailSecondDivider: `${PREFIX}-skeleton-detail-second-divider`,
+    skeletonPreviewContent: `${PREFIX}-skeleton-preview-content`,
+    skeletonPreviewName: `${PREFIX}-skeleton-preview-name`,
+    skeletonPreviewActions: `${PREFIX}-skeleton-preview-actions`,
+    skeletonSnippetImage: `${PREFIX}-skeleton-snippet-image`,
+    skeletonSnippetAction: `${PREFIX}-skeleton-snippet-action`
 };
-const Root = styled(BaseItem, {
+const Root = styled(Widget, {
     name: PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
+const SkeletonDetailRoot = styled(Box, {
+    name: PREFIX,
+    slot: 'SkeletonDetailRoot'
+})(() => ({}));
+const SkeletonPreviewRoot = styled(Box, {
+    name: PREFIX,
+    slot: 'SkeletonPreviewRoot'
+})(() => ({}));
+const SkeletonSnippetRoot = styled(BaseItem, {
+    name: PREFIX,
+    slot: 'SkeletonSnippetRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Event Skeleton component. Learn about the available props and the CSS API.
 
@@ -37,12 +65,26 @@ const Root = styled(BaseItem, {
  *
  */
 export default function EventSkeleton(inProps) {
-    const { className, action } = inProps;
-    return (React.createElement(Root, { elevation: 0, className: classNames(classes.root, className), image: React.createElement(Box, { className: classes.image },
-            React.createElement(Skeleton, { animation: "wave", variant: "rectangular", width: 100, height: 60 }),
-            " ",
-            React.createElement(Icon, { fontSize: "large" }, "CalendarIcon")), primary: React.createElement(Skeleton, { animation: "wave", variant: "rectangular", height: 10, width: 100, style: { marginBottom: 12 } }), secondary: React.createElement(React.Fragment, null,
-            React.createElement(Skeleton, { animation: "wave", variant: "rectangular", height: 10, width: 160, style: { marginBottom: 10 } }),
-            React.createElement(Skeleton, { animation: "wave", variant: "rectangular", height: 10, width: 90 })), actions: React.createElement(React.Fragment, null, action !== null && action !== void 0 ? action : (React.createElement(Button, { size: "small", variant: "outlined", disabled: true },
-            React.createElement(Skeleton, { animation: "wave", height: 10, width: 30, style: { marginTop: 5, marginBottom: 5 } })))) }));
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, template = SCEventTemplateType.SNIPPET, skeletonsAnimation = 'wave', actions } = props, rest = __rest(props, ["className", "template", "skeletonsAnimation", "actions"]);
+    const theme = useTheme();
+    /**
+     * Renders event object
+     */
+    let contentObj;
+    if (template === SCEventTemplateType.DETAIL) {
+        console.log(actions);
+        contentObj = (_jsxs(SkeletonDetailRoot, Object.assign({ className: classes.skeletonDetailRoot }, { children: [_jsxs(Box, Object.assign({ position: "relative" }, { children: [_jsx(Skeleton, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "170px" }), _jsx(Skeleton, { className: classes.skeletonDetailCalendar, variant: "rounded", animation: skeletonsAnimation, width: "60px", height: "60px" })] })), _jsxs(CardContent, Object.assign({ className: classes.skeletonDetailContent }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "36%", height: "40px" }), _jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "9px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "50%", height: "20px" })] })), _jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "9px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "35%", height: "20px" })] })), _jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "14px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "27%", height: "20px" })] })), _jsxs(Stack, Object.assign({ direction: "row", gap: "8px", className: classes.skeletonDetailUser }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "36px", height: "36px" }), _jsxs(Stack, Object.assign({ gap: "1px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "75px", height: "15px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "86px", height: "16px" })] }))] })), _jsx(Divider, { className: classes.skeletonDetailFirstDivider }), _jsxs(Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center", height: "28px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "68px", height: "20px" }), _jsxs(AvatarGroup, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" })] })] })), _jsx(Divider, { className: classes.skeletonDetailSecondDivider })] })), _jsx(CardActions, Object.assign({ className: classes.skeletonDetailActions }, { children: actions !== undefined ? actions : _jsx(Skeleton, { variant: "rounded", width: 100, height: 30 }) }))] })));
+    }
+    else if (template === SCEventTemplateType.PREVIEW) {
+        contentObj = (_jsxs(SkeletonPreviewRoot, Object.assign({ className: classes.skeletonPreviewRoot }, { children: [_jsx(Box, Object.assign({ position: "relative" }, { children: _jsx(Skeleton, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "80px" }) })), _jsxs(CardContent, Object.assign({ className: classes.skeletonPreviewContent }, { children: [_jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "50%", height: "20px" })] })), _jsx(Skeleton, { animation: skeletonsAnimation, width: "67%", height: "25px", className: classes.skeletonPreviewName }), _jsx(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "2px" }, { children: _jsx(Skeleton, { animation: skeletonsAnimation, width: "27%", height: "18px" }) })), _jsx(Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center" }, { children: _jsxs(AvatarGroup, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` })] }) }))] })), _jsx(CardActions, Object.assign({ className: classes.skeletonPreviewActions }, { children: actions !== undefined ? actions : _jsx(Skeleton, { variant: "rounded", width: 100, height: 30 }) }))] })));
+    }
+    else {
+        contentObj = (_jsx(SkeletonSnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.skeletonSnippetRoot, image: _jsxs(Box, Object.assign({ className: classes.skeletonSnippetImage }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", width: 100, height: 60 }), " ", _jsx(Icon, Object.assign({ fontSize: "large" }, { children: "CalendarIcon" }))] })), primary: _jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "40%", style: { marginBottom: 12 } }), secondary: _jsxs(_Fragment, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "60%", style: { marginBottom: 10, marginRight: 5 } }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "35%" })] }), actions: _jsx(_Fragment, { children: actions !== undefined ? (actions) : (_jsx(Button, Object.assign({ size: "small", variant: "outlined", disabled: true }, { children: _jsx(Skeleton, { animation: skeletonsAnimation, height: 10, width: 30, style: { marginTop: 5, marginBottom: 5 } }) }))) }) }));
+    }
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className, `${PREFIX}-skeleton-${template}`) }, rest, { children: contentObj })));
 }

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

@@ -0,0 +1,48 @@
+import { TextFieldProps } from '@mui/material/TextField';
+import { AutocompleteProps } from '@mui/material';
+import { SCEventType } from '@selfcommunity/types/src/index';
+export interface EventAutocompleteProps extends Pick<AutocompleteProps<SCEventType | null, any, any, any>, Exclude<keyof AutocompleteProps<SCEventType | null, any, any, any>, 'open' | 'onOpen' | 'onClose' | 'onChange' | 'filterSelectedOptions' | 'disableCloseOnSelect' | 'options' | 'getOptionLabel' | 'value' | 'selectOnFocus' | 'clearOnBlur' | 'blurOnSelect' | 'handleHomeEndKeys' | 'clearIcon' | 'noOptionsText' | 'isOptionEqualToValue' | 'renderTags' | 'renderOption' | 'renderInput'>> {
+    /**
+     * The maximum number of events that will be visible when not focused.
+     * @default 0
+     */
+    limitCountEvents?: number;
+    /**
+     * If checkbox is selected
+     * @default false
+     */
+    checkboxSelect?: boolean;
+    /**
+     * The props applied to text field
+     * @default {variant: 'outlined, label: events_label}
+     */
+    TextFieldProps?: TextFieldProps;
+    /**
+     * Callback for change event on event object
+     * @param value
+     */
+    onChange?: (value: any) => void;
+}
+/**
+ * > API documentation for the Community-JS Event Autocomplete component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a bar that allows users to search (with autocomplete) for all the events available in the application.
+ *
+ * #### Import
+ *  ```jsx
+ *  import {EventAutocomplete} from '@selfcommunity/react-ui';
+ *  ```
+ *  #### Component Name
+ *  The name `SCEventAutocomplete` can be used when providing style overrides in the theme.
+ *
+ *  #### CSS
+ *
+ *  |Rule Name|Global class|Description|
+ *  |---|---|---|
+ *  |root|.SCEventAutocomplete-root|Styles applied to the root element.|
+ *
+ * @param inProps
+ */
+declare const EventAutocomplete: (inProps: EventAutocompleteProps) => JSX.Element;
+export default EventAutocomplete;

package/lib/esm/components/EventAutocomplete/EventAutocomplete.js

@@ -0,0 +1,95 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+import CircularProgress from '@mui/material/CircularProgress';
+import parse from 'autosuggest-highlight/parse';
+import match from 'autosuggest-highlight/match';
+import { Avatar, Box, Typography } from '@mui/material';
+import { useSCFetchEvents } from '@selfcommunity/react-core';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+const PREFIX = 'SCEventAutocomplete';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = styled(Autocomplete, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS Event Autocomplete component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a bar that allows users to search (with autocomplete) for all the events available in the application.
+ *
+ * #### Import
+ *  ```jsx
+ *  import {EventAutocomplete} from '@selfcommunity/react-ui';
+ *  ```
+ *  #### Component Name
+ *  The name `SCEventAutocomplete` can be used when providing style overrides in the theme.
+ *
+ *  #### CSS
+ *
+ *  |Rule Name|Global class|Description|
+ *  |---|---|---|
+ *  |root|.SCEventAutocomplete-root|Styles applied to the root element.|
+ *
+ * @param inProps
+ */
+const EventAutocomplete = (inProps) => {
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    // Props
+    const { onChange, defaultValue = null, disabled = false, TextFieldProps = {
+        variant: 'outlined',
+        label: _jsx(FormattedMessage, { id: "ui.eventAutocomplete.label", defaultMessage: "ui.eventAutocomplete.label" })
+    } } = props, rest = __rest(props, ["onChange", "defaultValue", "disabled", "TextFieldProps"]);
+    // State
+    const [open, setOpen] = useState(false);
+    const [value, setValue] = useState(typeof defaultValue === 'string' ? null : defaultValue);
+    // HOOKS
+    const { events, isLoading } = useSCFetchEvents();
+    useEffect(() => {
+        if (value === null) {
+            return;
+        }
+        onChange && onChange(value);
+    }, [value]);
+    useEffect(() => {
+        if (!isLoading && typeof defaultValue === 'string') {
+            setValue(events.find((e) => e.id === Number(defaultValue)));
+        }
+    }, [isLoading]);
+    // Handlers
+    const handleOpen = () => {
+        setOpen(true);
+    };
+    const handleClose = () => {
+        setOpen(false);
+    };
+    const handleChange = (e, value) => {
+        setValue(value);
+    };
+    // Render
+    return (_jsx(Root, Object.assign({ className: classes.root, open: open, onOpen: handleOpen, onClose: handleClose, options: events || [], getOptionLabel: (option) => option.name || '', value: value, selectOnFocus: true, clearOnBlur: true, blurOnSelect: true, handleHomeEndKeys: true, clearIcon: null, disabled: disabled || isLoading, noOptionsText: _jsx(FormattedMessage, { id: "ui.eventAutocomplete.empty", defaultMessage: "ui.eventAutocomplete.empty" }), onChange: handleChange, isOptionEqualToValue: (option, value) => value.id === option.id, 
+        // renderTags={(value, getTagProps) => {
+        //   return value.map((option: any, index) => (
+        //     <Chip key={option.id} id={option.id} label={option.name} color={option.color} {...getTagProps({index})} />
+        //   ));
+        // }}
+        renderOption: (props, option, { inputValue }) => {
+            const matches = match(option.name, inputValue);
+            const parts = parse(option.name, matches);
+            return (_jsxs(Box, Object.assign({ component: "li" }, props, { children: [_jsx(Avatar, { alt: option.name, src: option.image_small, sx: { marginRight: 1 } }), _jsx(React.Fragment, { children: parts.map((part, index) => (_jsx(Typography, Object.assign({ sx: { fontWeight: part.highlight ? 700 : 400, marginRight: 0.2 } }, { children: part.text }), index))) })] })));
+        }, renderInput: (params) => {
+            return (_jsx(TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'events', endAdornment: (_jsxs(React.Fragment, { children: [isLoading ? _jsx(CircularProgress, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })) }) })));
+        } }, rest)));
+};
+export default EventAutocomplete;

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

@@ -0,0 +1,3 @@
+import EventAutocomplete, { EventAutocompleteProps } from './EventAutocomplete';
+export default EventAutocomplete;
+export { EventAutocompleteProps };

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

@@ -0,0 +1,2 @@
+import EventAutocomplete from './EventAutocomplete';
+export default EventAutocomplete;

package/lib/esm/components/EventForm/EventAddress.d.ts

@@ -1,5 +1,6 @@
-import { SCEventLocationType } from '@selfcommunity/types';
+import { SCEventLocationType, SCEventType } from '@selfcommunity/types';
 export interface EventAddressProps {
+    event?: SCEventType;
     forwardGeolocationData: (data: {
         location: SCEventLocationType;
         geolocation?: string;

package/lib/esm/components/EventForm/EventAddress.js

@@ -1,5 +1,6 @@
 import { __awaiter } from "tslib";
-import React, { useEffect, useMemo, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Autocomplete, Box, InputAdornment, Tab, Tabs, TextField } from '@mui/material';
 import Icon from '@mui/material/Icon';
@@ -38,10 +39,10 @@ export default function EventAddress(inProps) {
     // INTL
     const intl = useIntl();
     // PROPS
-    const { className, forwardGeolocationData } = props;
+    const { className, forwardGeolocationData, event } = props;
     // STATE
-    const [location, setLocation] = useState(SCEventLocationType.PERSON);
-    const [geolocation, setGeoLocation] = useState(null);
+    const [location, setLocation] = useState(event ? event.location : SCEventLocationType.PERSON);
+    const [geolocation, setGeoLocation] = useState(event ? event.geolocation : null);
     const [inputValue, setInputValue] = useState('');
     const [suggestions, setSuggestions] = useState([]);
     const [timeoutId, setTimeoutId] = useState(null);
@@ -109,18 +110,9 @@ export default function EventAddress(inProps) {
         }
     }, [inputValue]);
     if (!geocodingApiKey && !isLoaded) {
-        return React.createElement(HiddenPlaceholder, null);
+        return _jsx(HiddenPlaceholder, {});
     }
-    return (React.createElement(Root, { className: classNames(classes.root, className) },
-        React.createElement(Tabs, { className: classes.tabs, value: location, onChange: handleChange, indicatorColor: "secondary", textColor: "secondary", variant: "fullWidth" },
-            React.createElement(Tab, { value: SCEventLocationType.PERSON, classes: { root: classes.tab }, icon: React.createElement(Icon, null, "add_location_alt"), iconPosition: "start", label: React.createElement(FormattedMessage, { id: "ui.eventForm.address.live.label", defaultMessage: "ui.eventForm.address.live.label" }) }),
-            React.createElement(Tab, { value: SCEventLocationType.ONLINE, classes: { root: classes.tab }, icon: React.createElement(Icon, null, "play_circle_outline"), iconPosition: "start", label: React.createElement(FormattedMessage, { id: "ui.eventForm.address.online.label", defaultMessage: "ui.eventForm.address.online.label" }) })),
-        React.createElement(Box, { className: classes.tabContent },
-            location === SCEventLocationType.PERSON && (React.createElement(Autocomplete, { freeSolo: true, size: "small", value: geolocation, onChange: handleSelection, inputValue: inputValue, onInputChange: handleLocationChange, options: suggestions, getOptionLabel: (option) => option.description, noOptionsText: React.createElement(FormattedMessage, { id: "ui.eventForm.address.live.noResults", defaultMessage: "ui.eventForm.address.live.noResults" }), renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { label: React.createElement(FormattedMessage, { id: "ui.eventForm.address.live.placeholder", defaultMessage: "ui.eventForm.address.live.placeholder" }), variant: "outlined", fullWidth: true, InputProps: Object.assign(Object.assign({}, params.InputProps), { endAdornment: (React.createElement(React.Fragment, null,
-                            React.createElement(InputAdornment, { position: "start" },
-                                React.createElement(Icon, null, "add_location_alt")),
-                            params.InputProps.endAdornment)) }) }))) })),
-            location === SCEventLocationType.ONLINE && (React.createElement(UrlTextField, { size: "small", fullWidth: true, type: "url", placeholder: `${intl.formatMessage(messages.virtualPlaceholder)}`, helperText: React.createElement(FormattedMessage, { id: "ui.eventForm.address.online.help", defaultMessage: "ui.eventForm.address.online.help" }), InputProps: {
-                    endAdornment: React.createElement(Icon, null, "play_circle_outline")
-                }, onChange: handleLinkChange })))));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsxs(Tabs, Object.assign({ className: classes.tabs, value: location, onChange: handleChange, indicatorColor: "secondary", textColor: "secondary", variant: "fullWidth" }, { children: [_jsx(Tab, { value: SCEventLocationType.PERSON, classes: { root: classes.tab }, icon: _jsx(Icon, { children: "add_location_alt" }), iconPosition: "start", label: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.label", defaultMessage: "ui.eventForm.address.live.label" }) }), _jsx(Tab, { value: SCEventLocationType.ONLINE, classes: { root: classes.tab }, icon: _jsx(Icon, { children: "play_circle_outline" }), iconPosition: "start", label: _jsx(FormattedMessage, { id: "ui.eventForm.address.online.label", defaultMessage: "ui.eventForm.address.online.label" }) })] })), _jsxs(Box, Object.assign({ className: classes.tabContent }, { children: [location === SCEventLocationType.PERSON && (_jsx(Autocomplete, { freeSolo: true, size: "small", value: geolocation, onChange: handleSelection, inputValue: inputValue, onInputChange: handleLocationChange, options: suggestions, getOptionLabel: (option) => option.description || geolocation, noOptionsText: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.noResults", defaultMessage: "ui.eventForm.address.live.noResults" }), renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { label: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.placeholder", defaultMessage: "ui.eventForm.address.live.placeholder" }), variant: "outlined", fullWidth: true, InputProps: Object.assign(Object.assign({}, params.InputProps), { endAdornment: (_jsxs(_Fragment, { children: [_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "add_location_alt" }) })), params.InputProps.endAdornment] })) }) }))) })), location === SCEventLocationType.ONLINE && (_jsx(UrlTextField, { size: "small", fullWidth: true, type: "url", placeholder: `${intl.formatMessage(messages.virtualPlaceholder)}`, helperText: _jsx(FormattedMessage, { id: "ui.eventForm.address.online.help", defaultMessage: "ui.eventForm.address.online.help" }), InputProps: {
+                            endAdornment: _jsx(Icon, { children: "play_circle_outline" })
+                        }, onChange: handleLinkChange }))] }))] })));
 }

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

@@ -1,3 +1,4 @@
+import { SCEventType } from '@selfcommunity/types';
 import { BaseDialogProps } from '../../shared/BaseDialog';
 export interface EventFormProps extends BaseDialogProps {
     /**
@@ -15,6 +16,11 @@ export interface EventFormProps extends BaseDialogProps {
      * @default null
      */
     onClose?: () => void;
+    /**
+     * Event Object
+     * @default null
+     */
+    event?: SCEventType;
     /**
      * On success callback function
      * @default null