@selfcommunity/react-ui 0.7.0-alpha.98 → 0.7.0

package/lib/esm/components/IncubatorDetail/IncubatorDetail.js

@@ -1,23 +1,4 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __awaiter, __rest } from "tslib";
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -37,6 +18,7 @@ import User from '../User';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import Icon from '@mui/material/Icon';
 import { FACEBOOK_SHARE, TWITTER_SHARE, LINKEDIN_SHARE } from '../../constants/SocialShare';
+import UserDeletedSnackBar from '../../shared/UserDeletedSnackBar';
 const messages = defineMessages({
     intro: {
         id: 'ui.incubatorDetail.intro',
@@ -97,15 +79,15 @@ const Root = styled(BaseDialog, {
     },
     [`& .${classes.shareSection}`]: {
         display: 'flex',
-        gap: theme.spacing(1),
-        marginTop: theme.spacing(1),
-        marginBottom: theme.spacing(1)
+        gap: theme.spacing(),
+        marginTop: theme.spacing(),
+        marginBottom: theme.spacing(3)
     },
     [`& .${classes.socialShareButton}`]: {
-        marginRight: theme.spacing(1)
+        marginRight: theme.spacing()
     },
     [`& .${classes.subscribers}`]: {
-        marginTop: theme.spacing(1),
+        marginTop: theme.spacing(),
         '& .MuiAvatar-root': {
             color: theme.palette.common.white,
             border: '2px solid #FFF'
@@ -114,8 +96,8 @@ const Root = styled(BaseDialog, {
 }));
 /**
  * > API documentation for the Community-JS Incubator Detail component. Learn about the available props and the CSS API.
- *
- * #### Import
+
+ #### Import
  ```jsx
  import {IncubatorDetail} from '@selfcommunity/react-ui';
  ```
@@ -154,6 +136,7 @@ export default function IncubatorDetail(inProps) {
     const [total, setTotal] = useState(0);
     const [subscribers, setSubscribers] = useState([]);
     const [openSubscribersDialog, setOpenSubscribersDialog] = useState(false);
+    const [openAlert, setOpenAlert] = useState(false);
     // CONTEXT
     const scUserContext = useSCUser();
     const scContext = useSCContext();
@@ -251,49 +234,49 @@ export default function IncubatorDetail(inProps) {
     /**
      * Renders root element
      */
-    return (React.createElement(Root, Object.assign({ title: React.createElement(React.Fragment, null,
-            React.createElement(Avatar, { className: classes.avatar, alt: scIncubator.user.avatar, src: scIncubator.user.avatar }),
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Root, Object.assign({ title: React.createElement(React.Fragment, null,
+                React.createElement(Avatar, { className: classes.avatar, alt: scIncubator.user.avatar, src: scIncubator.user.avatar }),
+                React.createElement(Box, null,
+                    React.createElement(Typography, { className: classes.title },
+                        `${intl.formatMessage(messages.intro, { name: scIncubator.name })}`,
+                        " "),
+                    React.createElement(Typography, { component: 'span' },
+                        React.createElement(Link, Object.assign({}, (!scIncubator.user.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scIncubator.user) }), { onClick: scIncubator.user.deleted ? () => setOpenAlert(true) : null }),
+                            "@",
+                            scIncubator.user.username)))), open: open, onClose: onClose, className: classNames(classes.root, className) }, rest),
             React.createElement(Box, null,
-                React.createElement(Typography, { className: classes.title },
-                    `${intl.formatMessage(messages.intro, { name: scIncubator.name })}`,
-                    " "),
-                React.createElement(Typography, { component: 'span' },
-                    React.createElement(Link, { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scIncubator.user) },
-                        "@",
-                        scIncubator.user.username)))), open: open, onClose: onClose, className: classNames(classes.root, className) }, rest),
-        React.createElement(Box, null,
-            React.createElement(Incubator, Object.assign({ elevation: 0, incubator: scIncubator, detailView: true, subscribeButtonProps: { onSubscribe: handleUpdates } }, IncubatorProps)),
-            React.createElement(Box, { className: classes.subscribers }, loading && !scIncubator ? (React.createElement(AvatarGroupSkeleton, Object.assign({}, rest))) : (React.createElement(React.Fragment, null, total > 0 ? (React.createElement(Button, { onClick: handleToggleSubscribersDialog, disabled: loading || !scIncubator },
-                React.createElement(AvatarGroup, Object.assign({}, rest),
-                    subscribers.map((u) => (React.createElement(Avatar, { key: u.id, alt: u.username, src: u.avatar }))),
-                    [...Array(Math.max(0, total - subscribers.length))].map((x, i // Add max to 0 to prevent creation of array with negative index during state update
-                    ) => (React.createElement(Avatar, { key: i })))))) : null))),
-            openSubscribersDialog && (React.createElement(BaseDialog, { title: React.createElement(React.Fragment, null,
-                    React.createElement(FormattedMessage, { defaultMessage: "ui.incubatorDetail.subscribersSection.title", id: "ui.incubatorDetail.subscribersSection.title" }),
-                    " (",
-                    total,
-                    ")"), onClose: handleToggleSubscribersDialog, open: openSubscribersDialog }, loading ? (React.createElement(CentralProgress, { size: 50 })) : (React.createElement(InfiniteScroll, { dataLength: total, next: fetchSubscribers, hasMoreNext: next !== null, loaderNext: React.createElement(CentralProgress, { size: 30 }), height: 400, endMessage: React.createElement("p", { style: { textAlign: 'center' } },
-                    React.createElement("b", null,
-                        React.createElement(FormattedMessage, { id: "ui.incubatorDetail.subscribersSection.noMoreSubscribers", defaultMessage: "ui.incubatorDetail.subscribersSection.noMoreSubscribers" }))) },
-                React.createElement(List, null, subscribers.map((s, index) => (React.createElement(ListItem, { key: (s.id, index) },
-                    React.createElement(User, { elevation: 0, user: s, key: index }))))))))),
-            React.createElement(Widget, { elevation: 1, className: classes.shareCard },
-                React.createElement(CardContent, null,
-                    React.createElement(Typography, { variant: 'h6' },
-                        React.createElement(FormattedMessage, { id: "ui.incubatorDetail.shareSection.title", defaultMessage: "ui.incubatorDetail.shareSection.title" })),
-                    React.createElement(Typography, { variant: 'subtitle1' },
-                        React.createElement(FormattedMessage, { id: "ui.incubatorDetail.shareSection.share", defaultMessage: "ui.incubatorDetail.shareSection.share" })),
-                    React.createElement(FormGroup, { className: classes.copyUrlForm },
-                        React.createElement(TextField, { className: classes.copyText, variant: "outlined", value: portal }),
-                        React.createElement(Button, { className: classes.copyButton, variant: "contained", onClick: copy },
-                            React.createElement(FormattedMessage, { id: "ui.incubatorDetail.shareSection.button.copy", defaultMessage: "ui.incubatorDetail.shareSection.button.copy" }))),
-                    alert && (React.createElement(Alert, { onClose: () => setAlert(false) },
-                        React.createElement(FormattedMessage, { id: "ui.incubatorDetail.shareSection.copied", defaultMessage: "ui.incubatorDetail.shareSection.copied" }))),
-                    isSocialShareEnabled && (React.createElement(Typography, { variant: 'subtitle2' },
-                        React.createElement(FormattedMessage, { id: "ui.incubatorDetail.shareSection.invite", defaultMessage: "ui.incubatorDetail.shareSection.invite" }))),
-                    React.createElement(Box, { className: classes.shareSection },
-                        facebookShareEnabled && (React.createElement(Icon, { classes: { root: classes.shareMenuIcon }, fontSize: "small", onClick: () => window.open(FACEBOOK_SHARE + portal, 'facebook-share-dialog', 'width=626,height=436') }, "facebook")),
-                        twitterShareEnabled && (React.createElement(Icon, { classes: { root: classes.shareMenuIcon }, fontSize: "small", onClick: () => window.open(TWITTER_SHARE + portal, 'twitter-share-dialog', 'width=626,height=436') }, "twitter")),
-                        linkedinShareEnabled && (React.createElement(Icon, { classes: { root: classes.shareMenuIcon }, fontSize: "small", onClick: () => window.open(LINKEDIN_SHARE + portal, 'linkedin-share-dialog', 'width=626,height=436') }, "linkedin"))))))));
+                React.createElement(Incubator, Object.assign({ elevation: 0, incubator: scIncubator, detailView: true, subscribeButtonProps: { onSubscribe: handleUpdates } }, IncubatorProps)),
+                React.createElement(Box, { className: classes.subscribers }, loading && !scIncubator ? (React.createElement(AvatarGroupSkeleton, Object.assign({}, rest))) : (React.createElement(React.Fragment, null, total > 0 ? (React.createElement(Button, { onClick: handleToggleSubscribersDialog, disabled: loading || !scIncubator },
+                    React.createElement(AvatarGroup, Object.assign({}, rest),
+                        subscribers.map((u) => (React.createElement(Avatar, { key: u.id, alt: u.username, src: u.avatar }))),
+                        [...Array(Math.max(0, total - subscribers.length))].map((x, i // Add max to 0 to prevent creation of array with negative index during state update
+                        ) => (React.createElement(Avatar, { key: i })))))) : null))),
+                openSubscribersDialog && (React.createElement(BaseDialog, { title: React.createElement(React.Fragment, null,
+                        React.createElement(FormattedMessage, { defaultMessage: "ui.incubatorDetail.subscribersSection.title", id: "ui.incubatorDetail.subscribersSection.title" }),
+                        " (",
+                        total,
+                        ")"), onClose: handleToggleSubscribersDialog, open: openSubscribersDialog }, loading ? (React.createElement(CentralProgress, { size: 50 })) : (React.createElement(InfiniteScroll, { dataLength: total, next: fetchSubscribers, hasMoreNext: next !== null, loaderNext: React.createElement(CentralProgress, { size: 30 }), height: 400, endMessage: React.createElement(Typography, { variant: "body2", align: "center", fontWeight: "bold" },
+                        React.createElement(FormattedMessage, { id: "ui.incubatorDetail.subscribersSection.noMoreSubscribers", defaultMessage: "ui.incubatorDetail.subscribersSection.noMoreSubscribers" })) },
+                    React.createElement(List, null, subscribers.map((s, index) => (React.createElement(ListItem, { key: (s.id, index) },
+                        React.createElement(User, { elevation: 0, user: s, key: index }))))))))),
+                React.createElement(Widget, { elevation: 1, className: classes.shareCard },
+                    React.createElement(CardContent, null,
+                        React.createElement(Typography, { variant: 'h6' },
+                            React.createElement(FormattedMessage, { id: "ui.incubatorDetail.shareSection.title", defaultMessage: "ui.incubatorDetail.shareSection.title" })),
+                        React.createElement(Typography, { variant: 'subtitle1' },
+                            React.createElement(FormattedMessage, { id: "ui.incubatorDetail.shareSection.share", defaultMessage: "ui.incubatorDetail.shareSection.share" })),
+                        React.createElement(FormGroup, { className: classes.copyUrlForm },
+                            React.createElement(TextField, { className: classes.copyText, variant: "outlined", value: portal }),
+                            React.createElement(Button, { className: classes.copyButton, variant: "contained", onClick: copy },
+                                React.createElement(FormattedMessage, { id: "ui.incubatorDetail.shareSection.button.copy", defaultMessage: "ui.incubatorDetail.shareSection.button.copy" }))),
+                        alert && (React.createElement(Alert, { onClose: () => setAlert(false) },
+                            React.createElement(FormattedMessage, { id: "ui.incubatorDetail.shareSection.copied", defaultMessage: "ui.incubatorDetail.shareSection.copied" }))),
+                        isSocialShareEnabled && (React.createElement(Typography, { variant: 'subtitle2' },
+                            React.createElement(FormattedMessage, { id: "ui.incubatorDetail.shareSection.invite", defaultMessage: "ui.incubatorDetail.shareSection.invite" }))),
+                        React.createElement(Box, { className: classes.shareSection },
+                            facebookShareEnabled && (React.createElement(Icon, { classes: { root: classes.shareMenuIcon }, fontSize: "small", onClick: () => window.open(FACEBOOK_SHARE + portal, 'facebook-share-dialog', 'width=626,height=436') }, "facebook")),
+                            twitterShareEnabled && (React.createElement(Icon, { classes: { root: classes.shareMenuIcon }, fontSize: "small", onClick: () => window.open(TWITTER_SHARE + portal, 'twitter-share-dialog', 'width=626,height=436') }, "twitter")),
+                            linkedinShareEnabled && (React.createElement(Icon, { classes: { root: classes.shareMenuIcon }, fontSize: "small", onClick: () => window.open(LINKEDIN_SHARE + portal, 'linkedin-share-dialog', 'width=626,height=436') }, "linkedin"))))))),
+        openAlert && React.createElement(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })));
 }
-//# sourceMappingURL=IncubatorDetail.js.map

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

@@ -1,4 +1,3 @@
 import IncubatorDetail, { IncubatorDetailProps } from './IncubatorDetail';
 export default IncubatorDetail;
 export { IncubatorDetailProps };
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,3 +1,2 @@
 import IncubatorDetail from './IncubatorDetail';
 export default IncubatorDetail;
-//# sourceMappingURL=index.js.map

package/lib/esm/components/IncubatorListWidget/CreateIncubatorDialog/CreateIncubatorDialog.d.ts

@@ -0,0 +1,18 @@
+export interface CreateIncubatorDialogProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Opens dialog
+     * @default false
+     */
+    open: boolean;
+    /**
+     * On dialog close callback function
+     * @default null
+     */
+    onClose?: () => void;
+}
+export default function CreateIncubatorDialog(props: CreateIncubatorDialogProps): JSX.Element;

package/lib/esm/components/IncubatorListWidget/CreateIncubatorDialog/CreateIncubatorDialog.js

@@ -0,0 +1,92 @@
+import { __rest } from "tslib";
+import React, { useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { TextField, Typography, FormGroup } from '@mui/material';
+import { http, Endpoints } from '@selfcommunity/api-services';
+import { Logger } from '@selfcommunity/utils';
+import { useSCUser } from '@selfcommunity/react-core';
+import BaseDialog from '../../../shared/BaseDialog';
+import classNames from 'classnames';
+import { SCOPE_SC_UI } from '../../../constants/Errors';
+import { LoadingButton } from '@mui/lab';
+import { PREFIX } from '../constants';
+const messages = defineMessages({
+    name: {
+        id: 'ui.incubatorListWidget.createIncubatorDialog.formPlaceholder.name',
+        defaultMessage: 'ui.incubatorListWidget.createIncubatorDialog.formPlaceholder.name'
+    },
+    slogan: {
+        id: 'ui.incubatorListWidget.createIncubatorDialog.formPlaceholder.slogan',
+        defaultMessage: 'ui.incubatorListWidget.createIncubatorDialog.formPlaceholder.slogan'
+    }
+});
+const classes = {
+    root: `${PREFIX}-create-dialog-root`,
+    form: `${PREFIX}-form`,
+    name: `${PREFIX}-name`,
+    slogan: `${PREFIX}-slogan`,
+    intro: `${PREFIX}-intro`,
+    submittedMessage: `${PREFIX}-submitted-message`
+};
+const Root = styled(BaseDialog, {
+    name: PREFIX,
+    slot: 'CreateDialogRoot'
+})(() => ({}));
+export default function CreateIncubatorDialog(props) {
+    // PROPS
+    const { className, open, onClose } = props, rest = __rest(props, ["className", "open", "onClose"]);
+    // CONTEXT
+    const scUserContext = useSCUser();
+    // INTL
+    const intl = useIntl();
+    // STATE
+    const [name, setName] = useState('');
+    const [slogan, setSlogan] = useState('');
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [submitted, setSubmitted] = useState(false);
+    const [error, setError] = useState('');
+    // HANDLERS
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        setIsSubmitting(true);
+        http
+            .request({
+            url: Endpoints.CreateAnIncubator.url(),
+            method: Endpoints.CreateAnIncubator.method,
+            data: {
+                name: name,
+                slogan: slogan
+            }
+        })
+            .then((res) => {
+            setIsSubmitting(false);
+            setSubmitted(true);
+        })
+            .catch((error) => {
+            setError(error);
+            setIsSubmitting(false);
+            Logger.error(SCOPE_SC_UI, error);
+        });
+    };
+    if (!scUserContext.user) {
+        return null;
+    }
+    let dialogContent;
+    if (submitted) {
+        dialogContent = (React.createElement(Typography, { variant: 'subtitle2', className: classes.submittedMessage },
+            React.createElement(FormattedMessage, { id: "ui.incubatorListWidget.createIncubatorDialog.propose.success", defaultMessage: "ui.incubatorListWidget.createIncubatorDialog.propose.success" })));
+    }
+    else {
+        dialogContent = (React.createElement(React.Fragment, null,
+            React.createElement(Typography, { component: 'span', className: classes.intro },
+                React.createElement(FormattedMessage, { id: "ui.incubatorsListDialog.createIncubatorDialog.intro", defaultMessage: "ui.incubatorsListDialog.createIncubatorDialog.intro" })),
+            React.createElement(FormGroup, { className: classes.form },
+                React.createElement(TextField, { required: true, error: Boolean(error), className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: name, onChange: (event) => setName(event.target.value) }),
+                React.createElement(TextField, { multiline: true, error: Boolean(error), className: classes.slogan, placeholder: `${intl.formatMessage(messages.slogan)}`, margin: "normal", value: slogan, onChange: (event) => setSlogan(event.target.value) })),
+            React.createElement(LoadingButton, { loading: isSubmitting, disabled: !name || Boolean(error), variant: "contained", onClick: handleSubmit },
+                React.createElement(FormattedMessage, { id: "ui.incubatorListWidget.createIncubatorDialog.button", defaultMessage: "ui.incubatorListWidget.createIncubatorDialog.button" }))));
+    }
+    // RENDER
+    return (React.createElement(Root, Object.assign({ title: React.createElement(FormattedMessage, { id: "ui.incubatorListWidget.createIncubatorDialog.title", defaultMessage: "ui.incubatorListWidget.createIncubatorDialog.title" }), open: open, onClose: onClose, className: classNames(classes.root, className) }, rest), dialogContent));
+}

package/lib/esm/components/IncubatorListWidget/CreateIncubatorDialog/index.d.ts

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

package/lib/esm/components/IncubatorListWidget/CreateIncubatorDialog/index.js

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

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

@@ -0,0 +1,73 @@
+import { CacheStrategies } from '@selfcommunity/utils';
+import { BaseDialogProps } from '../../shared/BaseDialog';
+import { IncubatorProps } from '../Incubator';
+import { VirtualScrollerItemProps } from '../../types/virtualScroller';
+export interface IncubatorListWidgetProps extends VirtualScrollerItemProps {
+    /**
+     * Hides this component
+     * @default false
+     */
+    autoHide?: boolean;
+    /**
+     * Limit the number of incubators to show
+     * @default false
+     */
+    limit?: number;
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Props to spread to single incubator object
+     * @default {}
+     */
+    IncubatorProps?: IncubatorProps;
+    /**
+     * Caching strategies
+     * @default CacheStrategies.CACHE_FIRST
+     */
+    cacheStrategy?: CacheStrategies;
+    /**
+     * Props to spread to users suggestion dialog
+     * @default {}
+     */
+    DialogProps?: BaseDialogProps;
+    /**
+     * Other props
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS Incubator List Widget component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a list of incubators.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/IncubatorsList)
+
+ #### Import
+ ```jsx
+ import {IncubatorListWidget} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `IncubatorListWidget` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCIncubatorListWidget-root|Styles applied to the root element.|
+ |header|.SCIncubatorListWidget-header|Styles applied to the header element.|
+ |title|.SCIncubatorListWidget-title|Styles applied to the title element.|
+ |noResults|.SCIncubatorListWidget-no-results|Styles applied to the no results section.|
+ |showMore|.SCIncubatorListWidget-show-more|Styles applied to the show more button element.|
+ |actions|.SCIncubatorListWidget-actions|Styles applied to the actions section.|
+ |helpPopover|.SCIncubatorListWidget-help-popover|Styles applied to the help popover element.|
+ |dialogRoot|.SCIncubatorListWidget-dialog-root|Styles applied to the root dialog element.|
+ |endMessage|.SCIncubatorListWidget-end-message|Styles applied to the end message element.|
+ |createDialog|.SCIncubatorListWidget-create-dialog|Styles applied to the create dialog element.|
+
+ * @param inProps
+ */
+export default function IncubatorListWidget(inProps: IncubatorListWidgetProps): JSX.Element;

package/lib/esm/components/IncubatorListWidget/IncubatorListWidget.js

@@ -0,0 +1,253 @@
+import { __rest } from "tslib";
+import React, { useContext, useEffect, useMemo, useReducer, useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { Button, List, Typography, Box, IconButton, ListItem, useTheme, useMediaQuery } from '@mui/material';
+import CardContent from '@mui/material/CardContent';
+import { http, Endpoints, IncubatorService } from '@selfcommunity/api-services';
+import { CacheStrategies, Logger } from '@selfcommunity/utils';
+import Skeleton from './Skeleton';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import { FormattedMessage } from 'react-intl';
+import classNames from 'classnames';
+import BaseDialog from '../../shared/BaseDialog';
+import InfiniteScroll from '../../shared/InfiniteScroll';
+import Incubator, { IncubatorSkeleton } from '../Incubator';
+import Popover from '@mui/material/Popover';
+import Icon from '@mui/material/Icon';
+import { useThemeProps } from '@mui/system';
+import Widget from '../Widget';
+import CreateIncubatorDialog from './CreateIncubatorDialog';
+import IncubatorDetail from '../IncubatorDetail';
+import { actionWidgetTypes, dataWidgetReducer, stateWidgetInitializer } from '../../utils/widget';
+import { SCCache, SCPreferences, SCPreferencesContext, SCUserContext } from '@selfcommunity/react-core';
+import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
+import { PREFIX } from './constants';
+const classes = {
+    root: `${PREFIX}-root`,
+    header: `${PREFIX}-header`,
+    title: `${PREFIX}-title`,
+    noResults: `${PREFIX}-no-results`,
+    showMore: `${PREFIX}-show-more`,
+    actions: `${PREFIX}-actions`,
+    helpPopover: `${PREFIX}-help-popover`,
+    dialogRoot: `${PREFIX}-dialog-root`,
+    endMessage: `${PREFIX}-end-message`,
+    createDialog: `${PREFIX}-create-dialog`
+};
+const Root = styled(Widget, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({}));
+const DialogRoot = styled(BaseDialog, {
+    name: PREFIX,
+    slot: 'DialogRoot'
+})(({ theme }) => ({}));
+/**
+ * > API documentation for the Community-JS Incubator List Widget component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a list of incubators.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/IncubatorsList)
+
+ #### Import
+ ```jsx
+ import {IncubatorListWidget} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `IncubatorListWidget` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCIncubatorListWidget-root|Styles applied to the root element.|
+ |header|.SCIncubatorListWidget-header|Styles applied to the header element.|
+ |title|.SCIncubatorListWidget-title|Styles applied to the title element.|
+ |noResults|.SCIncubatorListWidget-no-results|Styles applied to the no results section.|
+ |showMore|.SCIncubatorListWidget-show-more|Styles applied to the show more button element.|
+ |actions|.SCIncubatorListWidget-actions|Styles applied to the actions section.|
+ |helpPopover|.SCIncubatorListWidget-help-popover|Styles applied to the help popover element.|
+ |dialogRoot|.SCIncubatorListWidget-dialog-root|Styles applied to the root dialog element.|
+ |endMessage|.SCIncubatorListWidget-end-message|Styles applied to the end message element.|
+ |createDialog|.SCIncubatorListWidget-create-dialog|Styles applied to the create dialog element.|
+
+ * @param inProps
+ */
+export default function IncubatorListWidget(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { autoHide = true, limit = 3, className, IncubatorProps = {}, cacheStrategy = CacheStrategies.CACHE_FIRST, onHeightChange, onStateChange, DialogProps = {} } = props, rest = __rest(props, ["autoHide", "limit", "className", "IncubatorProps", "cacheStrategy", "onHeightChange", "onStateChange", "DialogProps"]);
+    // CONTEXT
+    const scUserContext = useContext(SCUserContext);
+    const scPreferencesContext = useContext(SCPreferencesContext);
+    const contentAvailability = SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY in scPreferencesContext.preferences &&
+        scPreferencesContext.preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;
+    // STATE
+    const [state, dispatch] = useReducer(dataWidgetReducer, {
+        isLoadingNext: false,
+        next: null,
+        cacheKey: SCCache.getWidgetStateCacheKey(SCCache.INCUBATOR_LIST_TOOLS_STATE_CACHE_PREFIX_KEY),
+        cacheStrategy,
+        visibleItems: limit
+    }, stateWidgetInitializer);
+    const [openDialog, setOpenDialog] = useState(false);
+    const [openCreateIncubatorDialog, setOpenCreateIncubatorDialog] = useState(false);
+    const [openIncubatorDetailDialog, setOpenIncubatorDetailDialog] = useState(false);
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const isOpen = Boolean(anchorEl);
+    const [detailObj, setDetailObj] = useState(null);
+    // HOOKS
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    /**
+     * Initialize component
+     * Fetch data only if the component is not initialized and it is not loading data
+     */
+    const _initComponent = useMemo(() => () => {
+        if (!state.initialized && !state.isLoadingNext) {
+            dispatch({ type: actionWidgetTypes.LOADING_NEXT });
+            IncubatorService.getAllIncubators({ limit })
+                .then((payload) => {
+                dispatch({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: Object.assign(Object.assign({}, payload), { initialized: true }) });
+            })
+                .catch((error) => {
+                dispatch({ type: actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
+                Logger.error(SCOPE_SC_UI, error);
+            });
+        }
+    }, [state.isLoadingNext, state.initialized, limit, dispatch]);
+    //EFFECTS
+    useEffect(() => {
+        let _t;
+        if (scUserContext.user !== undefined) {
+            _t = setTimeout(_initComponent);
+            return () => {
+                _t && clearTimeout(_t);
+            };
+        }
+    }, [scUserContext.user]);
+    useEffect(() => {
+        if (openDialog && state.next && state.initialized && state.results.length === limit) {
+            dispatch({ type: actionWidgetTypes.LOADING_NEXT });
+            IncubatorService.getAllIncubators({ offset: limit, limit: 10 })
+                .then((payload) => {
+                dispatch({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: payload });
+            })
+                .catch((error) => {
+                dispatch({ type: actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
+                Logger.error(SCOPE_SC_UI, error);
+            });
+        }
+    }, [openDialog, state.next, state.initialized, state.results.length, limit]);
+    /**
+     * Virtual feed update
+     */
+    useEffect(() => {
+        onHeightChange && onHeightChange();
+    }, [state.results]);
+    useEffect(() => {
+        if (!contentAvailability && !scUserContext.user) {
+            return;
+        }
+        else if (cacheStrategy === CacheStrategies.NETWORK_ONLY) {
+            onStateChange && onStateChange({ cacheStrategy: CacheStrategies.CACHE_FIRST });
+        }
+    }, [contentAvailability, scUserContext.user]);
+    // HANDLERS
+    const handleClickHelpButton = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handlePopoverClose = useMemo(() => () => {
+        setAnchorEl(null);
+    }, [setAnchorEl]);
+    const handleCreateIncubatorDialogClose = useMemo(() => () => {
+        setOpenCreateIncubatorDialog(false);
+    }, [setOpenCreateIncubatorDialog]);
+    const handleIncubatorDetailDialogOpening = useMemo(() => (incubator) => {
+        setOpenIncubatorDetailDialog(true);
+        setOpenDialog(false);
+        setDetailObj(incubator);
+    }, [setOpenIncubatorDetailDialog, setOpenDialog, setDetailObj]);
+    const handleIncubatorDetailDialogClose = useMemo(() => () => {
+        setOpenIncubatorDetailDialog(false);
+    }, [setOpenIncubatorDetailDialog]);
+    const handleToggleDialogOpen = useMemo(() => () => {
+        setOpenDialog((prev) => !prev);
+    }, [setOpenDialog]);
+    /**
+     * Handles subscriptions counter update on subscribe/unsubscribe action.
+     * @param incubator
+     */
+    const handleSubscriptionsUpdate = (incubator) => {
+        const newIncubators = [...state.results];
+        const index = newIncubators.findIndex((i) => i.id === incubator.id);
+        if (index !== -1) {
+            if (incubator.subscribed) {
+                newIncubators[index].subscribers_count = incubator.subscribers_count - 1;
+                newIncubators[index].subscribed = !incubator.subscribed;
+            }
+            else {
+                newIncubators[index].subscribers_count = incubator.subscribers_count + 1;
+                newIncubators[index].subscribed = !incubator.subscribed;
+            }
+            console.log(newIncubators);
+            dispatch({ type: actionWidgetTypes.SET_RESULTS, payload: { results: newIncubators } });
+        }
+    };
+    /**
+     * Handle pagination
+     */
+    const handleNext = useMemo(() => () => {
+        dispatch({ type: actionWidgetTypes.LOADING_NEXT });
+        http
+            .request({
+            url: state.next,
+            method: Endpoints.GetAllIncubators.method
+        })
+            .then((res) => {
+            dispatch({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: res.data });
+        });
+    }, [dispatch, state.next, state.isLoadingNext, state.initialized]);
+    // RENDER
+    if ((!contentAvailability && !scUserContext.user) || (state.initialized && autoHide && !state.count)) {
+        return React.createElement(HiddenPlaceholder, null);
+    }
+    if (!state.initialized) {
+        return React.createElement(Skeleton, null);
+    }
+    const content = (React.createElement(CardContent, null,
+        React.createElement(Box, { className: classes.header },
+            React.createElement(Typography, { className: classes.title, variant: 'h5' },
+                React.createElement(FormattedMessage, { id: "ui.incubatorListWidget.title", defaultMessage: "ui.incubatorListWidget.title" })),
+            React.createElement(IconButton, { className: classes.helpPopover, color: "primary", "aria-label": "info", component: "span", onClick: handleClickHelpButton },
+                React.createElement(Icon, { fontSize: "small" }, "help_outline")),
+            isOpen && (React.createElement(Popover, { open: isOpen, anchorEl: anchorEl, onClose: handlePopoverClose, anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'right'
+                } },
+                React.createElement(Box, { sx: { p: '10px' } },
+                    React.createElement(Typography, { component: 'span', sx: { whiteSpace: 'pre-line' } },
+                        React.createElement(FormattedMessage, { id: "ui.incubatorListWidget.popover", defaultMessage: "ui.incubatorListWidget.popover" })))))),
+        !state.count ? (React.createElement(Typography, { className: classes.noResults, variant: "body2" },
+            React.createElement(FormattedMessage, { id: "ui.incubatorListWidget.noResults", defaultMessage: "ui.incubatorListWidget.noResults" }))) : (React.createElement(React.Fragment, null,
+            React.createElement(List, null, state.results.slice(0, state.visibleItems).map((incubator) => (React.createElement(ListItem, { key: incubator.id },
+                React.createElement(Incubator, Object.assign({ elevation: 0, incubator: incubator, subscribeButtonProps: { onSubscribe: handleSubscriptionsUpdate }, ButtonProps: { onClick: () => handleIncubatorDetailDialogOpening(incubator) } }, IncubatorProps)))))),
+            React.createElement(Box, { className: classes.actions },
+                state.count > state.visibleItems && (React.createElement(Button, { className: classes.showMore, onClick: handleToggleDialogOpen },
+                    React.createElement(FormattedMessage, { id: "ui.incubatorListWidget.ShowAll", defaultMessage: "ui.incubatorListWidget.ShowAll" }))),
+                React.createElement(Button, { size: "small", onClick: () => setOpenCreateIncubatorDialog(true) },
+                    React.createElement(FormattedMessage, { id: "ui.incubatorListWidget.SuggestNewTopic", defaultMessage: "ui.incubatorListWidget.SuggestNewTopic" }))))),
+        openDialog && (React.createElement(DialogRoot, Object.assign({ className: classes.dialogRoot, title: React.createElement(FormattedMessage, { id: "ui.incubatorListWidget.title", defaultMessage: "ui.incubatorListWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps),
+            React.createElement(InfiniteScroll, { dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: React.createElement(IncubatorSkeleton, Object.assign({ elevation: 0 }, IncubatorProps)), height: isMobile ? '100vh' : 400, endMessage: React.createElement(Typography, { className: classes.endMessage },
+                    React.createElement(FormattedMessage, { id: "ui.incubatorListWidget.noMoreIncubators", defaultMessage: "ui.incubatorListWidget.noMoreIncubators" })) },
+                React.createElement(List, null, state.results.map((incubator) => (React.createElement(ListItem, { key: incubator.id },
+                    React.createElement(Incubator, Object.assign({ elevation: 0, incubator: incubator, subscribeButtonProps: { onSubscribe: handleSubscriptionsUpdate }, ButtonProps: { onClick: () => handleIncubatorDetailDialogOpening(incubator) } }, IncubatorProps))))))))),
+        openCreateIncubatorDialog && (React.createElement(CreateIncubatorDialog, { className: classes.createDialog, open: openCreateIncubatorDialog, onClose: handleCreateIncubatorDialogClose })),
+        openIncubatorDetailDialog && (React.createElement(IncubatorDetail, { open: openIncubatorDetailDialog, onClose: handleIncubatorDetailDialogClose, incubator: detailObj, onSubscriptionsUpdate: handleSubscriptionsUpdate }))));
+    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest), content));
+}