@selfcommunity/react-ui 0.7.50-event.29 → 0.7.50-events.28

package/lib/esm/components/Events/Events.js

@@ -0,0 +1,227 @@
+import { __rest } from "tslib";
+import React, { useContext, useEffect, useMemo, useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { Box, Button, Chip, FormControl, Grid, Icon, InputLabel, MenuItem, Radio, Select, TextField, Typography } from '@mui/material';
+import { Endpoints, EventService, http } from '@selfcommunity/api-services';
+import { SCPreferences, SCPreferencesContext, SCUserContext, UserUtils } from '@selfcommunity/react-core';
+import { SCEventDateFilterType } from '@selfcommunity/types';
+import Event, { EventSkeleton } from '../Event';
+import { FormattedMessage } from 'react-intl';
+import classNames from 'classnames';
+import { useThemeProps } from '@mui/system';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import { Logger, sortByAttr } from '@selfcommunity/utils';
+import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
+import { PREFIX } from './constants';
+import Skeleton from '../Events/Skeleton';
+import { DEFAULT_PAGINATION_OFFSET } from '../../constants/Pagination';
+import CreateEventButton from '../CreateEventButton';
+const classes = {
+    root: `${PREFIX}-root`,
+    filters: `${PREFIX}-filters`,
+    events: `${PREFIX}-events`,
+    item: `${PREFIX}-item`,
+    itemSkeleton: `${PREFIX}-item-skeleton`,
+    noResults: `${PREFIX}-no-results`,
+    showMore: `${PREFIX}-show-more`
+};
+const options = [
+    { value: SCEventDateFilterType.ANY, label: React.createElement(FormattedMessage, { id: "ui.events.select.any", defaultMessage: "ui.events.select.any" }) },
+    { value: SCEventDateFilterType.TODAY, label: React.createElement(FormattedMessage, { id: "ui.events.select.today", defaultMessage: "ui.events.select.today" }) },
+    { value: SCEventDateFilterType.TOMORROW, label: React.createElement(FormattedMessage, { id: "ui.events.select.tomorrow", defaultMessage: "ui.events.select.tomorrow" }) },
+    { value: SCEventDateFilterType.THIS_WEEK, label: React.createElement(FormattedMessage, { id: "ui.events.select.thisWeek", defaultMessage: "ui.events.select.thisWeek" }) },
+    { value: SCEventDateFilterType.NEXT_WEEK, label: React.createElement(FormattedMessage, { id: "ui.events.select.nextWeek", defaultMessage: "ui.events.select.nextWeek" }) },
+    { value: SCEventDateFilterType.THIS_MONTH, label: React.createElement(FormattedMessage, { id: "ui.events.select.thisMonth", defaultMessage: "ui.events.select.thisMonth" }) }
+];
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'Root'
+})(() => ({}));
+const ChipRoot = styled(Chip, {
+    name: PREFIX,
+    slot: 'ChipRoot'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS Events component. Learn about the available props and the CSS API.
+ *
+ *
+ * The Events component renders the list of all available events.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Events)
+
+ #### Import
+ ```jsx
+ import {Events} from '@selfcommunity/react-ui';
+ ```
+ #### Component Name
+ The name `SCEvents` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCEvents-root|Styles applied to the root element.|
+ |filters|.SCEvents-filters|Styles applied to the title element.|
+ |events|.SCEvents-events|Styles applied to the title element.|
+ |item|.SCEvents-item|Styles applied to the title element.|
+ |noResults|.SCEvents-no-results|Styles applied to no results section.|
+ |showMore|.SCEvents-show-more|Styles applied to show more button element.|
+
+ * @param inProps
+ */
+export default function Events(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { endpointQueryParams = { limit: 8, offset: DEFAULT_PAGINATION_OFFSET }, className, EventComponentProps = {}, showFilters = false, filters, general = true } = props, rest = __rest(props, ["endpointQueryParams", "className", "EventComponentProps", "showFilters", "filters", "general"]);
+    // STATE
+    const [events, setEvents] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [next, setNext] = useState(null);
+    const [search, setSearch] = useState('');
+    const [dateSearch, setDateSearch] = useState(options[0].value);
+    const [selected, setSelected] = useState(false);
+    // CONTEXT
+    const scUserContext = useContext(SCUserContext);
+    const scPreferencesContext = useContext(SCPreferencesContext);
+    const onlyStaffEnabled = useMemo(() => scPreferencesContext.preferences[SCPreferences.CONFIGURATIONS_EVENTS_ONLY_STAFF_ENABLED].value, [scPreferencesContext.preferences]);
+    // MEMO
+    const contentAvailability = SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY in scPreferencesContext.preferences &&
+        scPreferencesContext.preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;
+    // CONST
+    const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    // HANDLERS
+    const handleChipClick = () => {
+        setSelected(!selected);
+    };
+    const handleDeleteClick = () => {
+        setSelected(false);
+    };
+    /**
+     * Fetches events list
+     */
+    const fetchEvents = () => {
+        let eventService;
+        if (general) {
+            eventService = EventService.searchEvents(Object.assign(Object.assign(Object.assign(Object.assign({}, endpointQueryParams), (search !== '' && { search: search })), (dateSearch !== SCEventDateFilterType.ANY && { date_filter: dateSearch })), (selected && { follows: selected })));
+        }
+        else {
+            eventService = EventService.getUserEvents(Object.assign(Object.assign({}, endpointQueryParams), (search !== '' && { search: search })));
+        }
+        eventService
+            .then((res) => {
+            setEvents(res.results);
+            setNext(res.next);
+            setLoading(false);
+        })
+            .catch((error) => {
+            Logger.error(SCOPE_SC_UI, error);
+        });
+    };
+    /**
+     * On mount, fetches events list
+     */
+    useEffect(() => {
+        if (!contentAvailability && !authUserId) {
+            return;
+        }
+        else {
+            fetchEvents();
+        }
+    }, [contentAvailability, authUserId, search, dateSearch, selected]);
+    const handleNext = useMemo(() => () => {
+        if (!next) {
+            return;
+        }
+        return http
+            .request({
+            url: next,
+            method: general ? Endpoints.SearchEvents.method : Endpoints.GetUserEvents.method
+        })
+            .then((res) => {
+            setEvents([...events, ...res.data.results]);
+            setNext(res.data.next);
+        })
+            .catch((error) => console.log(error))
+            .then(() => setLoading(false));
+    }, [next]);
+    /**
+     * Get events filtered
+     */
+    const getFilteredEvents = () => {
+        if (search) {
+            return events.filter((g) => g.name.toLowerCase().includes(search.toLowerCase()));
+        }
+        return events;
+    };
+    /**
+     * Handle change filter name
+     * @param event
+     */
+    const handleOnChangeFilterName = (event) => {
+        setSearch(event.target.value);
+    };
+    /**
+     * Handle change time frame
+     * @param event
+     */
+    const handleOnChangeTimeFrame = (event) => {
+        setDateSearch(event.target.value);
+    };
+    /**
+     * Renders events list
+     */
+    const filteredEvents = sortByAttr(getFilteredEvents(), 'order');
+    const c = (React.createElement(React.Fragment, null,
+        showFilters && (React.createElement(Grid, { container: true, className: classes.filters, gap: 2 }, filters ? (filters) : (React.createElement(React.Fragment, null,
+            React.createElement(Grid, { item: true, xs: 12, md: 4 },
+                React.createElement(TextField, { size: 'small', fullWidth: true, value: search, label: React.createElement(FormattedMessage, { id: "ui.events.filterByName", defaultMessage: "ui.events.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading })),
+            React.createElement(Grid, { item: true, xs: 12, md: 2 },
+                React.createElement(FormControl, { fullWidth: true },
+                    React.createElement(InputLabel, null,
+                        React.createElement(FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" })),
+                    React.createElement(Select, { size: 'small', label: React.createElement(FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }), value: dateSearch, onChange: handleOnChangeTimeFrame, renderValue: (selected) => options.find((option) => option.value === selected).label }, options.map((option) => (React.createElement(MenuItem, { key: option.value, value: option.value },
+                        React.createElement(Radio, { checked: dateSearch === option.value, value: option.value, name: "radio-button-select", inputProps: { 'aria-label': option.label } }),
+                        option.label)))))),
+            React.createElement(Grid, { item: true, xs: 12, md: 2 },
+                React.createElement(ChipRoot
+                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                // @ts-ignore
+                , { 
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                    // @ts-ignore
+                    color: selected ? 'secondary' : 'default', 
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                    // @ts-ignore
+                    variant: selected ? 'filled' : 'outlined', label: React.createElement(FormattedMessage, { id: "ui.events.filterByFollowedInterest", defaultMessage: "ui.events.filterByFollowedInterest" }), onClick: handleChipClick, 
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                    // @ts-ignore
+                    selected: selected, deleteIcon: selected ? React.createElement(Icon, null, "close") : null, onDelete: selected ? handleDeleteClick : null })))))),
+        React.createElement(React.Fragment, null, !events.length ? (React.createElement(Box, { className: classes.noResults }, (onlyStaffEnabled && !UserUtils.isStaff(scUserContext.user)) ||
+            (onlyStaffEnabled && UserUtils.isStaff(scUserContext.user) && general) ? (React.createElement(React.Fragment, null,
+            React.createElement(EventSkeleton, null),
+            React.createElement(Typography, { variant: "body1" },
+                React.createElement(FormattedMessage, { id: "ui.events.noEvents.title", defaultMessage: "ui.events.noEvents.title" })))) : (React.createElement(React.Fragment, null,
+            React.createElement(EventSkeleton, { action: React.createElement(CreateEventButton, null) }),
+            React.createElement(Typography, { variant: "body1" },
+                React.createElement(FormattedMessage, { id: "ui.events.noEvents.title.onlyStaff", defaultMessage: "ui.events.noEvents.title.onlyStaff" })))))) : (React.createElement(React.Fragment, null,
+            React.createElement(Grid, { container: true, spacing: { xs: 2 }, className: classes.events },
+                React.createElement(React.Fragment, null,
+                    filteredEvents.map((event) => (React.createElement(Grid, { item: true, xs: 12, sm: 8, md: 6, key: event.id, className: classes.item },
+                        React.createElement(Event, Object.assign({ event: event, eventId: event.id }, EventComponentProps))))),
+                    filteredEvents.length <= 3 && (React.createElement(Grid, { item: true, xs: 12, sm: 8, md: 6, key: 'skeleton-item', className: classes.itemSkeleton },
+                        React.createElement(EventSkeleton, { action: React.createElement(CreateEventButton, null) }))))),
+            Boolean(next) && (React.createElement(Button, { color: "secondary", variant: "text", onClick: handleNext, className: classes.showMore },
+                React.createElement(FormattedMessage, { id: "ui.events.button.seeMore", defaultMessage: "ui.events.button.seeMore" }))))))));
+    /**
+     * Renders root object (if content availability community option is false and user is anonymous, component is hidden)
+     */
+    if (!contentAvailability && !scUserContext.user) {
+        return React.createElement(HiddenPlaceholder, null);
+    }
+    if (loading) {
+        return React.createElement(Skeleton, null);
+    }
+    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest), c));
+}

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

@@ -0,0 +1,38 @@
+export interface EventsSkeletonProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    EventSkeletonProps?: any;
+    /**
+     * @default 20
+     */
+    eventsNumber?: number;
+}
+/**
+ * > API documentation for the Community-JS Groups Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {EventsSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCEvents-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCEvents-skeleton-root|Styles applied to the root element.|
+ |events|.SCEvents-skeleton-events|Styles applied to the group elements.|
+ *
+ */
+export default function EventsSkeleton(inProps: EventsSkeletonProps): JSX.Element;

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

@@ -0,0 +1,42 @@
+import { __rest } from "tslib";
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import { PREFIX } from './constants';
+import { Box, Grid } from '@mui/material';
+import classNames from 'classnames';
+import { EventSkeleton } from '../Event';
+const classes = {
+    root: `${PREFIX}-skeleton-root`,
+    events: `${PREFIX}-events`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS Groups Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {EventsSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCEvents-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCEvents-skeleton-root|Styles applied to the root element.|
+ |events|.SCEvents-skeleton-events|Styles applied to the group elements.|
+ *
+ */
+export default function EventsSkeleton(inProps) {
+    const { className, EventSkeletonProps = {}, eventsNumber = 8 } = inProps, rest = __rest(inProps, ["className", "EventSkeletonProps", "eventsNumber"]);
+    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest),
+        React.createElement(Grid, { container: true, spacing: { xs: 3 }, className: classes.events }, [...Array(eventsNumber)].map((event, index) => (React.createElement(Grid, { item: true, xs: 12, sm: 8, md: 6, key: index },
+            React.createElement(EventSkeleton, Object.assign({}, EventSkeletonProps))))))));
+}

package/lib/esm/components/Events/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCEvents";

package/lib/esm/components/Events/constants.js

@@ -0,0 +1 @@
+export const PREFIX = 'SCEvents';

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

@@ -0,0 +1,4 @@
+import Events, { EventsProps } from './Events';
+import EventsSkeleton, { EventsSkeletonProps } from './Skeleton';
+export default Events;
+export { EventsProps, EventsSkeleton, EventsSkeletonProps };

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

@@ -0,0 +1,4 @@
+import Events from './Events';
+import EventsSkeleton from './Skeleton';
+export default Events;
+export { EventsSkeleton };

package/lib/esm/components/Events/prefetchedEvents.d.ts

@@ -0,0 +1,271 @@
+export declare const prefetchedEvents: ({
+    id: number;
+    name: string;
+    description: string;
+    slug: string;
+    color: string;
+    privacy: string;
+    visible: boolean;
+    active: boolean;
+    show_on_feed: boolean;
+    subscription_status: any;
+    image_bigger: string;
+    image_big: string;
+    image_medium: string;
+    image_small: string;
+    subscribers_counter: number;
+    goings_counter: number;
+    start_date: string;
+    end_date: string;
+    recurring: string;
+    location: string;
+    geolocation: any;
+    geolocation_lat: any;
+    geolocation_lng: any;
+    link: string;
+    created_at: string;
+    created_by: {
+        id: number;
+        username: string;
+        real_name: string;
+        avatar: string;
+        ext_id: any;
+        deleted: boolean;
+        followings_counter: number;
+        followers_counter: number;
+        posts_counter: number;
+        discussions_counter: number;
+        polls_counter: number;
+        categories_counter: number;
+        date_joined: string;
+        bio: string;
+        location: string;
+        location_lat_lng: any;
+        position_lat_lng: any;
+        date_of_birth: any;
+        description: string;
+        gender: string;
+        website: string;
+        cover: any;
+        tags: any[];
+        reputation: number;
+        language: string;
+        community_badge: boolean;
+        reg_approved: boolean;
+        job: string;
+        store: string;
+        brand: string;
+    };
+    managed_by: {
+        id: number;
+        username: string;
+        real_name: string;
+        avatar: string;
+        ext_id: any;
+        deleted: boolean;
+        followings_counter: number;
+        followers_counter: number;
+        posts_counter: number;
+        discussions_counter: number;
+        polls_counter: number;
+        categories_counter: number;
+        date_joined: string;
+        bio: string;
+        location: string;
+        location_lat_lng: any;
+        position_lat_lng: any;
+        date_of_birth: any;
+        description: string;
+        gender: string;
+        website: string;
+        cover: any;
+        tags: any[];
+        reputation: number;
+        language: string;
+        community_badge: boolean;
+        reg_approved: boolean;
+        job: string;
+        store: string;
+        brand: string;
+    };
+} | {
+    id: number;
+    name: string;
+    description: string;
+    slug: string;
+    color: string;
+    privacy: string;
+    visible: boolean;
+    active: boolean;
+    show_on_feed: boolean;
+    subscription_status: any;
+    image_bigger: string;
+    image_big: string;
+    image_medium: string;
+    image_small: string;
+    subscribers_counter: number;
+    goings_counter: number;
+    start_date: string;
+    end_date: any;
+    recurring: string;
+    location: string;
+    geolocation: string;
+    geolocation_lat: number;
+    geolocation_lng: number;
+    link: any;
+    created_at: string;
+    created_by: {
+        id: number;
+        username: string;
+        real_name: string;
+        avatar: string;
+        ext_id: any;
+        deleted: boolean;
+        followings_counter: number;
+        followers_counter: number;
+        posts_counter: number;
+        discussions_counter: number;
+        polls_counter: number;
+        categories_counter: number;
+        date_joined: string;
+        bio: string;
+        location: string;
+        location_lat_lng: any;
+        position_lat_lng: any;
+        date_of_birth: any;
+        description: string;
+        gender: string;
+        website: string;
+        cover: any;
+        tags: any[];
+        reputation: number;
+        language: string;
+        community_badge: boolean;
+        reg_approved: boolean;
+        job: string;
+        store: string;
+        brand: string;
+    };
+    managed_by: {
+        id: number;
+        username: string;
+        real_name: string;
+        avatar: string;
+        ext_id: any;
+        deleted: boolean;
+        followings_counter: number;
+        followers_counter: number;
+        posts_counter: number;
+        discussions_counter: number;
+        polls_counter: number;
+        categories_counter: number;
+        date_joined: string;
+        bio: string;
+        location: string;
+        location_lat_lng: any;
+        position_lat_lng: any;
+        date_of_birth: any;
+        description: string;
+        gender: string;
+        website: string;
+        cover: any;
+        tags: any[];
+        reputation: number;
+        language: string;
+        community_badge: boolean;
+        reg_approved: boolean;
+        job: string;
+        store: string;
+        brand: string;
+    };
+} | {
+    id: number;
+    name: string;
+    description: string;
+    slug: string;
+    color: string;
+    privacy: string;
+    visible: boolean;
+    active: boolean;
+    show_on_feed: boolean;
+    subscription_status: string;
+    image_bigger: string;
+    image_big: string;
+    image_medium: string;
+    image_small: string;
+    subscribers_counter: number;
+    goings_counter: number;
+    start_date: string;
+    end_date: any;
+    recurring: string;
+    location: string;
+    geolocation: string;
+    geolocation_lat: number;
+    geolocation_lng: number;
+    link: any;
+    created_at: string;
+    created_by: {
+        id: number;
+        username: string;
+        real_name: string;
+        avatar: string;
+        ext_id: any;
+        deleted: boolean;
+        followings_counter: number;
+        followers_counter: number;
+        posts_counter: number;
+        discussions_counter: number;
+        polls_counter: number;
+        categories_counter: number;
+        date_joined: string;
+        bio: string;
+        location: string;
+        location_lat_lng: any;
+        position_lat_lng: any;
+        date_of_birth: any;
+        description: string;
+        gender: string;
+        website: string;
+        cover: any;
+        tags: any[];
+        reputation: number;
+        language: string;
+        community_badge: boolean;
+        reg_approved: boolean;
+        job: any;
+        store: string;
+        brand: any;
+    };
+    managed_by: {
+        id: number;
+        username: string;
+        real_name: string;
+        avatar: string;
+        ext_id: any;
+        deleted: boolean;
+        followings_counter: number;
+        followers_counter: number;
+        posts_counter: number;
+        discussions_counter: number;
+        polls_counter: number;
+        categories_counter: number;
+        date_joined: string;
+        bio: string;
+        location: string;
+        location_lat_lng: any;
+        position_lat_lng: any;
+        date_of_birth: any;
+        description: string;
+        gender: string;
+        website: string;
+        cover: any;
+        tags: any[];
+        reputation: number;
+        language: string;
+        community_badge: boolean;
+        reg_approved: boolean;
+        job: any;
+        store: string;
+        brand: any;
+    };
+})[];