@selfcommunity/react-ui 0.7.56-alpha.0 → 0.8.0-alpha.0

package/lib/cjs/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/cjs/components/EventAutocomplete/EventAutocomplete.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_intl_1 = require("react-intl");
+const Autocomplete_1 = tslib_1.__importDefault(require("@mui/material/Autocomplete"));
+const TextField_1 = tslib_1.__importDefault(require("@mui/material/TextField"));
+const CircularProgress_1 = tslib_1.__importDefault(require("@mui/material/CircularProgress"));
+const parse_1 = tslib_1.__importDefault(require("autosuggest-highlight/parse"));
+const match_1 = tslib_1.__importDefault(require("autosuggest-highlight/match"));
+const material_1 = require("@mui/material");
+const react_core_1 = require("@selfcommunity/react-core");
+const styles_1 = require("@mui/material/styles");
+const system_1 = require("@mui/system");
+const PREFIX = 'SCEventAutocomplete';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = (0, styles_1.styled)(Autocomplete_1.default, {
+    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 = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    // Props
+    const { onChange, defaultValue = null, disabled = false, TextFieldProps = {
+        variant: 'outlined',
+        label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventAutocomplete.label", defaultMessage: "ui.eventAutocomplete.label" })
+    } } = props, rest = tslib_1.__rest(props, ["onChange", "defaultValue", "disabled", "TextFieldProps"]);
+    // State
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [value, setValue] = (0, react_1.useState)(typeof defaultValue === 'string' ? null : defaultValue);
+    // HOOKS
+    const { events, isLoading } = (0, react_core_1.useSCFetchEvents)();
+    (0, react_1.useEffect)(() => {
+        if (value === null) {
+            return;
+        }
+        onChange && onChange(value);
+    }, [value]);
+    (0, react_1.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 ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(react_intl_1.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 = (0, match_1.default)(option.name, inputValue);
+            const parts = (0, parse_1.default)(option.name, matches);
+            return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "li" }, props, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: option.name, src: option.image_small, sx: { marginRight: 1 } }), (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: parts.map((part, index) => ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ sx: { fontWeight: part.highlight ? 700 : 400, marginRight: 0.2 } }, { children: part.text }), index))) })] })));
+        }, renderInput: (params) => {
+            return ((0, jsx_runtime_1.jsx)(TextField_1.default, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'events', endAdornment: ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [isLoading ? (0, jsx_runtime_1.jsx)(CircularProgress_1.default, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })) }) })));
+        } }, rest)));
+};
+exports.default = EventAutocomplete;

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

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

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const EventAutocomplete_1 = tslib_1.__importDefault(require("./EventAutocomplete"));
+exports.default = EventAutocomplete_1.default;

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

@@ -0,0 +1,13 @@
+import { SCEventLocationType, SCEventType } from '@selfcommunity/types';
+export interface EventAddressProps {
+    event?: SCEventType;
+    forwardGeolocationData: (data: {
+        location: SCEventLocationType;
+        geolocation?: string;
+        lat?: number;
+        lng?: number;
+        link?: string;
+    }) => void;
+    className?: string;
+}
+export default function EventAddress(inProps: EventAddressProps): JSX.Element;

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

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
+const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const system_1 = require("@mui/system");
+const constants_1 = require("./constants");
+const react_intl_1 = require("react-intl");
+const UrlTextField_1 = tslib_1.__importDefault(require("../../shared/UrlTextField"));
+const axios_1 = tslib_1.__importDefault(require("axios"));
+const react_core_1 = require("@selfcommunity/react-core");
+const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
+const types_1 = require("@selfcommunity/types");
+const api_1 = require("@react-google-maps/api");
+const messages = (0, react_intl_1.defineMessages)({
+    virtualPlaceholder: {
+        id: 'ui.eventForm.address.online.placeholder',
+        defaultMessage: 'ui.eventForm.address.online.placeholder'
+    }
+});
+const classes = {
+    root: `${constants_1.PREFIX}-event-address-root`,
+    tabs: `${constants_1.PREFIX}-event-address-tabs`,
+    tab: `${constants_1.PREFIX}-event-address-tab`,
+    tabContent: `${constants_1.PREFIX}-event-address-tab-content`
+};
+const Root = (0, styles_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'EventAddressRoot'
+})(() => ({}));
+function EventAddress(inProps) {
+    //PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    // INTL
+    const intl = (0, react_intl_1.useIntl)();
+    // PROPS
+    const { className, forwardGeolocationData, event } = props;
+    // STATE
+    const [location, setLocation] = (0, react_1.useState)(event ? event.location : types_1.SCEventLocationType.PERSON);
+    const [geolocation, setGeoLocation] = (0, react_1.useState)(event ? event.geolocation : null);
+    const [inputValue, setInputValue] = (0, react_1.useState)('');
+    const [suggestions, setSuggestions] = (0, react_1.useState)([]);
+    const [timeoutId, setTimeoutId] = (0, react_1.useState)(null);
+    // CONTEXT
+    const scContext = (0, react_core_1.useSCContext)();
+    const geocodingApiKey = (0, react_1.useMemo)(() => scContext.settings.integrations && scContext.settings.integrations.geocoding.apiKey, [scContext.settings.integrations]);
+    const { isLoaded } = (0, api_1.useLoadScript)({
+        googleMapsApiKey: scContext.settings.integrations.geocoding.apiKey,
+        libraries: ['places', 'geocoding']
+    });
+    // HANDLERS
+    const handleChange = (event, newValue) => {
+        setLocation(newValue);
+    };
+    const handleSelection = (event, newValue) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+        if (newValue) {
+            try {
+                const response = yield axios_1.default.get(`https://maps.googleapis.com/maps/api/geocode/json`, {
+                    params: {
+                        place_id: newValue.place_id,
+                        key: geocodingApiKey
+                    }
+                });
+                const place = response.data.results[0];
+                setGeoLocation(newValue);
+                forwardGeolocationData({
+                    location: location,
+                    geolocation: place.formatted_address,
+                    lat: place.geometry.location.lat,
+                    lng: place.geometry.location.lng
+                });
+            }
+            catch (error) {
+                console.error('Error fetching place details:', error);
+            }
+        }
+    });
+    const handleLocationChange = (event, newInputValue) => {
+        setInputValue(newInputValue);
+    };
+    const handleLinkChange = (event) => {
+        forwardGeolocationData({ location: location, link: event.target.value });
+    };
+    (0, react_1.useEffect)(() => {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+        if (inputValue === '') {
+            setSuggestions([]);
+            return;
+        }
+        if (inputValue.length >= 3) {
+            const newTimeoutId = window.setTimeout(() => {
+                const autocompleteService = new window.google.maps.places.AutocompleteService();
+                autocompleteService.getPlacePredictions({ input: inputValue }, (predictions, status) => {
+                    if (status === window.google.maps.places.PlacesServiceStatus.OK && predictions) {
+                        setSuggestions(predictions.map((prediction) => ({
+                            description: prediction.description,
+                            place_id: prediction.place_id
+                        })));
+                    }
+                });
+            }, 300);
+            setTimeoutId(newTimeoutId);
+        }
+    }, [inputValue]);
+    if (!geocodingApiKey && !isLoaded) {
+        return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
+    }
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Tabs, Object.assign({ className: classes.tabs, value: location, onChange: handleChange, indicatorColor: "secondary", textColor: "secondary", variant: "fullWidth" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { value: types_1.SCEventLocationType.PERSON, classes: { root: classes.tab }, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "add_location_alt" }), iconPosition: "start", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.live.label", defaultMessage: "ui.eventForm.address.live.label" }) }), (0, jsx_runtime_1.jsx)(material_1.Tab, { value: types_1.SCEventLocationType.ONLINE, classes: { root: classes.tab }, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "play_circle_outline" }), iconPosition: "start", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.online.label", defaultMessage: "ui.eventForm.address.online.label" }) })] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.tabContent }, { children: [location === types_1.SCEventLocationType.PERSON && ((0, jsx_runtime_1.jsx)(material_1.Autocomplete, { freeSolo: true, size: "small", value: geolocation, onChange: handleSelection, inputValue: inputValue, onInputChange: handleLocationChange, options: suggestions, getOptionLabel: (option) => option.description || geolocation, noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.live.noResults", defaultMessage: "ui.eventForm.address.live.noResults" }), renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { label: (0, jsx_runtime_1.jsx)(react_intl_1.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: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "add_location_alt" }) })), params.InputProps.endAdornment] })) }) }))) })), location === types_1.SCEventLocationType.ONLINE && ((0, jsx_runtime_1.jsx)(UrlTextField_1.default, { size: "small", fullWidth: true, type: "url", placeholder: `${intl.formatMessage(messages.virtualPlaceholder)}`, helperText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.online.help", defaultMessage: "ui.eventForm.address.online.help" }), InputProps: {
+                            endAdornment: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "play_circle_outline" })
+                        }, onChange: handleLinkChange }))] }))] })));
+}
+exports.default = EventAddress;

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

@@ -0,0 +1,65 @@
+import { SCEventType } from '@selfcommunity/types';
+import { BaseDialogProps } from '../../shared/BaseDialog';
+export interface EventFormProps extends BaseDialogProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Open dialog
+     * @default true
+     */
+    open?: boolean;
+    /**
+     * On dialog close callback function
+     * @default null
+     */
+    onClose?: () => void;
+    /**
+     * Event Object
+     * @default null
+     */
+    event?: SCEventType;
+    /**
+     * On success callback function
+     * @default null
+     */
+    onSuccess?: (data: any) => void;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *> API documentation for the Community-JS  Event Form component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {EventForm} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCEventForm` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCEventForm-root|Styles applied to the root element.|
+ |active|.SCEventForm-active|Styles applied to the  active element.|
+ |title|.SCEventForm-title|Styles applied to the title element.|
+ |cover|.SCEventForm-cover|Styles applied to the cover field.|
+ |form|.SCEventForm-form|Styles applied to the form element.|
+ |switch|.SCEventForm-switch|Styles applied to the switch element.|
+ |switchLabel|.SCEventForm-switch-label|Styles applied to the switchLabel element.|
+ |name|.SCEventForm-name|Styles applied to the name field.|
+ |description|.SCEventForm-description|Styles applied to the description field.|
+ |content|.SCEventForm-content|Styles applied to the  element.|
+ |privacySection|.SCEventForm-privacy-section|Styles applied to the privacy section.|
+ |privacySectionInfo|.SCEventForm-privacy-section-info|Styles applied to the privacy info section.|
+ |error|.SCEventForm-error|Styles applied to the error elements.|
+
+ * @param inProps
+ */
+export default function EventForm(inProps: EventFormProps): JSX.Element;