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

package/lib/esm/components/Composer/Composer.js

@@ -1,236 +1,64 @@
-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 React, { forwardRef, useContext, useEffect, useMemo, useReducer, useState } from 'react';
-import { Endpoints, formatHttpError, http } from '@selfcommunity/api-services';
-import { SCFeatures, SCPreferences, SCPreferencesContext, SCUserContext, UserUtils, useSCFetchAddressingTagList } from '@selfcommunity/react-core';
+import { __rest } from "tslib";
+import React, { forwardRef, useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import { SCContributionType, SCFeatureName } from '@selfcommunity/types';
+import { Endpoints, formatHttpErrorCode, http } from '@selfcommunity/api-services';
+import { SCPreferences, UserUtils, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 import { FormattedMessage } from 'react-intl';
 import Icon from '@mui/material/Icon';
-import { Alert, AlertTitle, Avatar, Badge, Box, Chip, Dialog, DialogActions, DialogContent, DialogTitle, Fade, FormControl, hexToRgb, IconButton, InputBase, MenuItem, Select, Stack, TextField, ToggleButton, ToggleButtonGroup, Tooltip, Typography, useMediaQuery } from '@mui/material';
+import { Alert, AlertTitle, Box, Dialog, DialogActions, DialogContent, DialogTitle, Fade, IconButton, Slide, useMediaQuery } from '@mui/material';
 import { styled, useTheme } from '@mui/material/styles';
-import { COMPOSER_POLL_MIN_CHOICES, COMPOSER_TITLE_MAX_LENGTH, COMPOSER_TYPE_DISCUSSION, COMPOSER_TYPE_POST } from '../../constants/Composer';
+import { COMPOSER_POLL_MIN_CHOICES, COMPOSER_TITLE_MAX_LENGTH, COMPOSER_TYPE_POLL } from '../../constants/Composer';
 import { MEDIA_TYPE_SHARE } from '../../constants/Media';
 import LoadingButton from '@mui/lab/LoadingButton';
-import Audience from './Audience';
-import Categories from './Categories';
-import { random, stripHtml } from '@selfcommunity/utils';
+import AudienceLayer from './Layer/AudienceLayer';
+import { iOS, random, stripHtml } from '@selfcommunity/utils';
 import classNames from 'classnames';
-import PollPreview from '../FeedObject/Poll';
-import Editor from '../Editor';
-import { Document, Image, Link, Share } from '../../shared/Media';
-import MediasPreview from '../../shared/MediasPreview';
-import Poll from './Poll';
-import Location from './Location';
-import TagChip from '../../shared/TagChip';
-import { ComposerSkeleton } from './index';
+import ContentPoll from './Content/ContentPoll';
 import { useSnackbar } from 'notistack';
 import { useThemeProps } from '@mui/system';
+import { extractHashtags } from '../../utils/editor';
+import TypeSwitchButtonGroup from './TypeSwitchButtonGroup';
+import ContentPost from './Content/ContentPost';
+import CategoryLayer from './Layer/CategoryLayer';
+import LocationLayer from './Layer/LocationLayer';
+import ContentDiscussion from './Content/ContentDiscussion';
+import { File, Link, Share } from '../../shared/Media';
+import Attributes from './Attributes';
+import { PREFIX } from './constants';
+import ComposerSkeleton from './Skeleton';
+import CloseLayer from './Layer/CloseLayer';
 const DialogTransition = forwardRef(function Transition(props, ref) {
     return React.createElement(Fade, Object.assign({ ref: ref }, props));
 });
-const TypeInput = styled(InputBase, {
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    '&.Mui-InputBase-root': {
-        'label + &': {
-            marginTop: theme.spacing(3)
-        }
-    },
-    '& .Mui-InputBase-input': {
-        position: 'relative',
-        backgroundColor: theme.palette.background.paper,
-        border: 0,
-        padding: '10px 26px 10px 12px'
-    }
-}));
-const PREFIX = 'SCComposer';
 const classes = {
     root: `${PREFIX}-root`,
+    ios: `${PREFIX}-ios`,
     title: `${PREFIX}-title`,
     types: `${PREFIX}-types`,
-    avatar: `${PREFIX}-avatar`,
     content: `${PREFIX}-content`,
-    mediaContent: `${PREFIX}-mediaContent`,
-    audienceContent: `${PREFIX}-audienceContent`,
-    locationContent: `${PREFIX}-locationContent`,
-    block: `${PREFIX}-block`,
-    editor: `${PREFIX}-editor`,
-    divider: `${PREFIX}-divider`,
+    attributes: `${PREFIX}-attributes`,
     medias: `${PREFIX}-medias`,
-    location: `${PREFIX}-location`,
-    audience: `${PREFIX}-audience`,
-    mediasActions: `${PREFIX}-mediasActions`,
-    mediasActionsTitle: `${PREFIX}-mediasActionsTitle`,
-    mediasActionsActions: `${PREFIX}-mediasActionsActions`,
-    sortableMedia: `${PREFIX}-sortableMedia`,
-    sortableMediaCover: `${PREFIX}-sortableMediaCover`,
-    links: `${PREFIX}-links`,
     actions: `${PREFIX}-actions`,
-    actionInput: `${PREFIX}-actionInput`,
-    badgeError: `${PREFIX}-badgeError`
+    layerTransitionRoot: `${PREFIX}-layer-transition-root`
 };
 const Root = styled(Dialog, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => {
-    let mediaActionBackground = theme.palette.getContrastText(theme.palette.primary.main);
-    if (mediaActionBackground.startsWith('#')) {
-        mediaActionBackground = hexToRgb(mediaActionBackground).replace(')', ', .5)');
-    }
-    return {
-        [`& .${classes.title}`]: {
-            borderBottom: '1px solid #D1D1D1',
-            padding: theme.spacing(),
-            paddingLeft: theme.spacing(2),
-            paddingRight: theme.spacing(2),
-            display: 'flex',
-            flexDirection: 'row',
-            flexWrap: 'nowrap',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            '& > div': {
-                flex: 1,
-                textAlign: 'center'
-            },
-            '& > div:first-of-type': {
-                textAlign: 'left'
-            },
-            '& > div:last-of-type': {
-                textAlign: 'right',
-                display: 'block'
-            }
-        },
-        [`& .${classes.types}`]: {
-            flexDirection: 'row',
-            alignItems: 'center'
-        },
-        [`& .${classes.avatar}`]: {
-            width: theme.selfcommunity.user.avatar.sizeMedium,
-            height: theme.selfcommunity.user.avatar.sizeMedium,
-            display: 'inline-block'
-        },
-        [`& .${classes.content}`]: {
-            paddingLeft: 0,
-            paddingRight: 0,
-            paddingBottom: 0,
-            position: 'relative',
-            overflowY: 'visible'
-        },
-        [`& .${classes.mediaContent}, & .${classes.audienceContent}, & .${classes.locationContent}`]: {
-            minHeight: 300
-        },
-        [`& .${classes.block}`]: {
-            padding: theme.spacing(2)
-        },
-        [`& .${classes.editor}`]: {
-            minHeight: 200,
-            '& .SCEditor-placeholder': {
-                top: theme.spacing(2),
-                left: theme.spacing(2)
-            }
-        },
-        [`& .${classes.divider}`]: {
-            borderTop: '1px solid #D1D1D1'
-        },
-        [`& .${classes.medias}`]: {
-            margin: '0 23px'
-        },
-        [`& .${classes.location}, & .${classes.audience}`]: {
-            padding: theme.spacing(2),
-            paddingBottom: 0
-        },
-        [`& .${classes.mediasActions}`]: {
-            position: 'absolute',
-            left: 0,
-            right: 0,
-            background: mediaActionBackground,
-            padding: theme.spacing(),
-            zIndex: 1,
-            display: 'flex',
-            flexWrap: 'nowrap',
-            justifyContent: 'space-between',
-            [`& .${classes.mediasActionsActions}`]: {
-                textAlign: 'right'
-            }
-        },
-        [`& .${classes.sortableMedia}`]: {
-            position: 'relative'
-        },
-        [`& .${classes.sortableMediaCover}`]: {
-            backgroundSize: 'cover !important',
-            backgroundPosition: 'center !important',
-            backgroundRepeat: 'no-repeat !important',
-            border: '2px solid white',
-            borderRadius: 6,
-            height: 300
-        },
-        [`& .${classes.links}`]: {
-            padding: theme.spacing(2)
-        },
-        [`& .${classes.actions}`]: {
-            margin: 0,
-            borderTop: '1px solid #D1D1D1',
-            padding: theme.spacing(1),
-            display: 'block',
-            '& .MuiTypography-alignLeft': {
-                float: 'left'
-            },
-            '& .MuiTypography-alignRight': {
-                float: 'right'
-            },
-            [theme.breakpoints.up('md')]: {
-                display: 'flex',
-                flexDirection: 'row',
-                flexWrap: 'nowrap',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                '& .MuiTypography-alignLeft, & .MuiTypography-alignRight': {
-                    float: 'none'
-                }
-            }
-        },
-        [`& .${classes.actionInput}`]: {
-            display: 'none !important'
-        },
-        [`& .${classes.badgeError} .MuiBadge-badge`]: {
-            padding: 0
-        }
-    };
-});
-export const MAIN_VIEW = 'main';
-export const AUDIENCE_VIEW = 'audience';
-export const POLL_VIEW = 'poll';
-export const LOCATION_VIEW = 'location';
-const AUDIENCE_ALL = 'all';
-const AUDIENCE_TAG = 'tag';
-const PREFERENCES = [
-    SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED,
-    SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED,
-    SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED,
-    SCPreferences.ADDONS_POLLS_ENABLED,
-    SCPreferences.ADDONS_VIDEO_UPLOAD_ENABLED
-];
+    slot: 'Root'
+})(() => ({}));
+const LayerTransitionRoot = styled(Slide, {
+    name: PREFIX,
+    slot: 'LayerTransitionRoot'
+})(({ theme }) => ({}));
 const COMPOSER_INITIAL_STATE = {
     id: null,
     type: null,
     title: '',
     titleError: null,
-    text: '',
-    textError: null,
+    html: '',
+    htmlError: null,
     categories: [],
     categoriesError: null,
-    audience: AUDIENCE_ALL,
-    addressing: [],
+    addressing: null,
     addressingError: null,
     medias: [],
     poll: null,
@@ -248,9 +76,19 @@ const reducer = (state, action) => {
     }
 };
 /**
- > API documentation for the Community-JS Composer component. Learn about the available props and the CSS API.
- > The Composer component contains the logic around the creation of [Post](https://developers.selfcommunity.com/docs/apireference/v2/post/create_a_post) and [Discussion](https://developers.selfcommunity.com/docs/apireference/v2/discussion/create_a_discussion) objects.
+ * > API documentation for the Community-JS Composer component. Learn about the available props and the CSS API.
+ *
+ *
+ * The Composer component contains the logic around the creation of [Post](https://developers.selfcommunity.com/docs/apireference/v2/post/create_a_post) and [Discussion](https://developers.selfcommunity.com/docs/apireference/v2/discussion/create_a_discussion) objects.
  *
+ *
+ :::info
+ To prevent the editor toolbar and action botton bar being hidden underneath the Virtual Keyboard you need to set the `interactive-widget=resizes-content` on meta viewport.
+ This works on chrome for android.
+ For iOS devices there is a lack of support of this meta so we force the blur event when the user start dragging.
+ [More information](https://bram.us/2021/09/13/prevent-items-from-being-hidden-underneath-the-virtual-keyboard-by-means-of-the-virtualkeyboard-api/)
+ :::
+
  #### Import
  ```jsx
  import {Composer} from '@selfcommunity/react-ui';
@@ -263,26 +101,14 @@ const reducer = (state, action) => {
  |Rule Name|Global class|Description|
  |---|---|---|
  |root|.SCComposer-root|Styles applied to the root element.|
+ |ios|.SCComposer-ios|Styles applied to the root element when the device is ios.|
  |title|.SCComposer-title|Styles applied to the title element.|
  |types|.SCComposer-types|Styles applied to the types element.|
- |avatar|.SCComposer-avatar|Styles applied to the avatar element.|
  |content|.SCComposer-content|Styles applied to the content.|
- |mediaContent|.SCComposer-mediaContent|Styles applied to the media content.|
- |audienceContent|.SCComposer-audienceContent|Styles applied to the audience content.|
- |locationContent|.SCComposer-locationContent|Styles applied to the location content.|
- |block|.SCComposer-block|Styles applied to the block element.|
- |editor|.SCComposer-editor|Styles applied to the editor element.|
- |divider|.SCComposer-divider|Styles applied to the divider element.|
+ |attributes|.SCComposer-attributes|Styles applied to the attributes.|
  |medias|.SCComposer-medias|Styles applied to the medias.|
- |location|.SCComposer-location|Styles applied to the location element.|
- |audience|.SCComposer-audience|Styles applied to the audience element.|
- |mediasActions|.SCComposer-mediasActions|Styles applied to the medias actions section.|
- |sortableMedia|.SCComposer-sortableMedia|Styles applied to the sortable media element.|
- |sortableMediaCover|.SCComposer-sortableMediaCover|Styles applied to the sortable media cover element.|
- |links|.SCComposer-links|Styles applied to the links element.|
  |actions|.SCComposer-actions|Styles applied to the actions section.|
- |actionInput|.SCComposer-actionInput|Styles applied to the action input element.|
- |badgeError|.SCComposer-badgeError|Styles applied to the badge error element.|
+ |layerTransitionRoot|.SCComposer-layer-transition-root|Styles applied to the overlay layers (eg. location).|
 
 
  * @param inProps
@@ -293,43 +119,38 @@ export default function Composer(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { feedObjectId = null, feedObjectType = null, feedObject = null, defaultValue = {}, view = MAIN_VIEW, mediaObjectTypes = [Image, Document, Link, Share], onClose = null, onSuccess = null } = props, rest = __rest(props, ["feedObjectId", "feedObjectType", "feedObject", "defaultValue", "view", "mediaObjectTypes", "onClose", "onSuccess"]);
+    const { feedObjectId = null, feedObjectType = null, feedObject = null, defaultValue = {}, mediaObjectTypes = [File, Link, Share], EditorProps = {}, onClose = null, onSuccess = null, maxWidth } = props, rest = __rest(props, ["feedObjectId", "feedObjectType", "feedObject", "defaultValue", "mediaObjectTypes", "EditorProps", "onClose", "onSuccess", "maxWidth"]);
     // Context
-    const scPrefernces = useContext(SCPreferencesContext);
-    const scAuthContext = useContext(SCUserContext);
+    const { preferences, features } = useSCPreferences();
+    const scUserContext = useSCUser();
     const { enqueueSnackbar } = useSnackbar();
     // HOOKS
-    const { scAddressingTags } = useSCFetchAddressingTagList({ fetch: rest.open });
+    const theme = useTheme();
+    const fullScreen = useMediaQuery(theme.breakpoints.down('md'), { noSsr: typeof window !== 'undefined' });
     // State variables
     const [isSubmitting, setIsSubmitting] = useState(false);
-    const [_view, setView] = useState(view);
-    const [composerTypes, setComposerTypes] = useState([]);
-    const [mediaChunks, setMediaChunks] = useState([]);
-    const [state, dispatch] = useReducer(reducer, Object.assign(Object.assign(Object.assign({}, COMPOSER_INITIAL_STATE), defaultValue), { view, key: random() }));
-    const { key, id, type, title, titleError, text, categories, addressing, audience, medias, poll, pollError, location, error } = state;
-    const addMedia = (media) => {
-        dispatch({ type: 'medias', value: [...medias, media] });
-    };
+    const [layer, setLayer] = useState();
+    const [state, dispatch] = useReducer(reducer, Object.assign(Object.assign(Object.assign({}, COMPOSER_INITIAL_STATE), defaultValue), { key: random() }));
+    const { key, id, type, title, titleError, html, categories, addressing, audience, medias, poll, pollError, location, error } = state;
     const destructureFeedObject = (_feedObject) => {
-        if (_feedObject.type === COMPOSER_TYPE_POST) {
+        if (_feedObject.type === SCContributionType.POST) {
             _feedObject = _feedObject;
         }
-        else if (_feedObject.type === COMPOSER_TYPE_DISCUSSION) {
+        else if (_feedObject.type === SCContributionType.DISCUSSION) {
             _feedObject = _feedObject;
         }
         else {
             _feedObject = _feedObject;
         }
-        if (feedObject.author.id === scAuthContext.user.id) {
+        if (feedObject.author.id === scUserContext.user.id) {
             dispatch({
                 type: 'multiple',
                 value: {
                     id: _feedObject.id,
-                    type: _feedObject.type,
+                    type: _feedObject.poll ? COMPOSER_TYPE_POLL : feedObject.type,
                     title: _feedObject.title,
-                    text: _feedObject.html,
+                    html: _feedObject.html,
                     categories: _feedObject.categories,
-                    audience: _feedObject.addressing ? AUDIENCE_TAG : AUDIENCE_ALL,
                     addressing: _feedObject.addressing,
                     medias: _feedObject.medias,
                     poll: _feedObject.poll,
@@ -343,41 +164,26 @@ export default function Composer(inProps) {
         }
     };
     // Edit state variables
-    const editMode = Boolean((feedObjectId && feedObjectType) || feedObject);
+    const editMode = useMemo(() => Boolean((feedObjectId && feedObjectType) || feedObject), [feedObjectId, feedObjectType, feedObject]);
     const [isLoading, setIsLoading] = useState(editMode);
     const [loadError, setLoadError] = useState(false);
     // REFS
-    const unloadRef = React.useRef(false);
-    // Create a ref for medias becaouse of state update error on chunk upload
-    const mediasRef = React.useRef({ medias, mediaChunks, addMedia, setMediaChunks });
-    mediasRef.current = { medias, mediaChunks, addMedia, setMediaChunks };
-    /*
-     * Compute preferences
-     */
-    const preferences = useMemo(() => {
-        const _preferences = {};
-        PREFERENCES.map((p) => (_preferences[p] = p in scPrefernces.preferences ? scPrefernces.preferences[p].value : null));
-        return _preferences;
-    }, [scPrefernces.preferences]);
-    /*
-     * Compose the enabled types of posts that can be created based on preferences
-     */
-    const setEnabledComposerTypes = () => {
-        const types = [];
-        if (preferences[SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED]) {
-            types.push(COMPOSER_TYPE_POST);
-        }
-        if (preferences[SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED]) {
-            types.push(COMPOSER_TYPE_DISCUSSION);
-        }
-        if (!type) {
-            dispatch({ type: 'type', value: preferences[SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED] ? COMPOSER_TYPE_POST : COMPOSER_TYPE_DISCUSSION });
-        }
-        if (JSON.stringify(composerTypes) !== JSON.stringify(types)) {
-            setComposerTypes(types);
-        }
-    };
-    setEnabledComposerTypes();
+    const dialogRef = useRef();
+    const unloadRef = useRef(false);
+    // Create a ref for medias because of state update error on chunk upload
+    const mediasRef = useRef({ medias });
+    mediasRef.current = { medias };
+    // MEMO
+    const hasPoll = useMemo(() => {
+        return poll && poll.title.length > 0 && poll.title.length < COMPOSER_TITLE_MAX_LENGTH && poll.choices.length >= COMPOSER_POLL_MIN_CHOICES;
+    }, [poll]);
+    const canSubmit = useMemo(() => {
+        return (!isLoading &&
+            ((type === SCContributionType.DISCUSSION && title.length > 0 && title.length < COMPOSER_TITLE_MAX_LENGTH) ||
+                (type === SCContributionType.POST && (stripHtml(html).length > 0 || medias.length > 0 || hasPoll)) ||
+                (type === COMPOSER_TYPE_POLL && hasPoll)));
+    }, [isLoading, type, title, html, medias, hasPoll]);
+    const isIOS = useMemo(() => iOS(), []);
     // Load feed object
     useEffect(() => {
         if (!editMode) {
@@ -401,11 +207,9 @@ export default function Composer(inProps) {
         })
             .then(() => setIsLoading(false));
     }, [editMode]);
-    // Props update
-    useEffect(() => setView(view), [view]);
     // Prevent unload
     useEffect(() => {
-        if (!unloadRef.current && canSubmit()) {
+        if (!unloadRef.current && canSubmit) {
             unloadRef.current = true;
             const onUnload = (event) => {
                 event.preventDefault();
@@ -413,103 +217,139 @@ export default function Composer(inProps) {
             };
             window.onbeforeunload = onUnload;
         }
-        else if (unloadRef.current && !canSubmit()) {
+        else if (unloadRef.current && !canSubmit) {
             unloadRef.current = false;
             window.onbeforeunload = null;
         }
-    }, [state]);
-    // CHECKS
-    const hasPoll = () => {
-        return poll && poll.title.length > 0 && poll.choices.length >= COMPOSER_POLL_MIN_CHOICES;
-    };
-    const canSubmit = () => {
-        return ((type === COMPOSER_TYPE_DISCUSSION && title.length > 0) ||
-            (type === COMPOSER_TYPE_POST && (stripHtml(text).length > 0 || medias.length > 0 || hasPoll())));
-    };
-    /* Handlers */
-    const handleChangeView = (view) => {
-        return (event) => {
-            setView(view);
+    }, [state, canSubmit]);
+    useEffect(() => {
+        if (!dialogRef.current || !isIOS) {
+            return;
+        }
+        const handleBlur = () => {
+            dialogRef.current.focus();
         };
-    };
-    const handleChangeType = (event, child) => {
-        const target = event.target;
-        dispatch({ type: 'type', value: target.value });
-    };
-    const handleChangeText = (value) => {
-        dispatch({ type: 'text', value });
-    };
-    const handleChangePoll = (poll) => {
-        dispatch({ type: 'poll', value: poll });
-    };
-    const handleChange = (prop) => (event, data) => {
-        let target = null;
-        switch (prop) {
-            case 'title':
-                target = event.target;
-                dispatch({
-                    type: 'multiple',
-                    value: {
-                        title: target.value,
-                        titleError: target.value.length > COMPOSER_TITLE_MAX_LENGTH ? (React.createElement(FormattedMessage, { id: "ui.composer.title.error.maxlength", defaultMessage: "ui.composer.title.error.maxlength" })) : null
-                    }
-                });
-                break;
-            case 'categories':
-            case 'addressing':
-            case 'location':
-                dispatch({ type: prop, value: event });
-                break;
-            case 'audience':
-                data !== null && dispatch({ type: 'multiple', value: { audience: data, addressing: audience === AUDIENCE_ALL ? [] : audience } });
-                break;
-            default:
-                target = event.target;
-                dispatch({ type: prop, value: target.value });
-                break;
+        dialogRef.current.addEventListener('touchstart', handleBlur);
+        return () => { var _a; return (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('touchstart', handleBlur); };
+    }, [dialogRef.current, isIOS]);
+    /* Handlers */
+    const handleAddLayer = useCallback((layer) => setLayer(layer), []);
+    const handleRemoveLayer = useCallback(() => setLayer(null), []);
+    const handleChangeType = useCallback((value) => {
+        dispatch({ type: 'type', value });
+    }, []);
+    const handleChangePoll = useCallback((content) => {
+        dispatch({
+            type: 'multiple',
+            value: Object.assign(Object.assign({}, content), { pollError: content.poll.title.length > COMPOSER_TITLE_MAX_LENGTH
+                    ? { titleError: React.createElement(FormattedMessage, { id: "ui.composer.title.error.maxlength", defaultMessage: "ui.composer.title.error.maxlength" }) }
+                    : null })
+        });
+    }, []);
+    const handleChangeDiscussion = useCallback((content) => {
+        dispatch({
+            type: 'multiple',
+            value: Object.assign(Object.assign({}, content), { titleError: content.title.length > COMPOSER_TITLE_MAX_LENGTH ? (React.createElement(FormattedMessage, { id: "ui.composer.title.error.maxlength", defaultMessage: "ui.composer.title.error.maxlength" })) : null })
+        });
+    }, []);
+    const handleChangePost = useCallback((content) => {
+        dispatch({
+            type: 'multiple',
+            value: Object.assign({}, content)
+        });
+    }, []);
+    const handleChangeCategories = useCallback((value) => {
+        dispatch({ type: 'categories', value });
+        setLayer(null);
+    }, []);
+    const handleAddCategoryLayer = useCallback(() => handleAddLayer({
+        name: 'category',
+        Component: CategoryLayer,
+        ComponentProps: {
+            onClose: handleRemoveLayer,
+            onSave: handleChangeCategories,
+            defaultValue: categories
         }
-    };
-    const handleClose = (event) => {
-        if (unloadRef.current) {
-            window.onbeforeunload = null;
+    }), [handleAddLayer, handleRemoveLayer, handleChangeCategories, categories]);
+    const handleChangeAudience = useCallback((value) => {
+        dispatch({ type: 'addressing', value });
+        setLayer(null);
+    }, []);
+    const handleAddAudienceLayer = useCallback(() => handleAddLayer({
+        name: 'audience',
+        Component: AudienceLayer,
+        ComponentProps: {
+            onClose: handleRemoveLayer,
+            onSave: handleChangeAudience,
+            defaultValue: addressing
         }
-        onClose && onClose(event);
-    };
-    const handleDeletePoll = (event) => {
-        dispatch({ type: 'poll', value: null });
-        setView(MAIN_VIEW);
-    };
-    const handleDeleteLocation = (event) => {
-        dispatch({ type: 'location', value: null });
-    };
-    const handleDeleteTag = (id) => (event) => {
-        const _addressing = addressing.filter((t) => t.id !== id);
-        dispatch({ type: 'multiple', value: { audience: _addressing.length === 0 ? AUDIENCE_ALL : AUDIENCE_TAG, addressing: _addressing } });
-    };
-    const handleDeleteMedia = (id, mediaObjectType) => {
-        return (event) => {
-            if (id) {
-                dispatch({ type: 'medias', value: medias.filter((m) => m.id != id) });
-            }
-            else if (mediaObjectType) {
-                dispatch({ type: 'medias', value: medias.filter((m) => !mediaObjectType.filter(m)) });
-            }
-        };
-    };
-    const handleMediaProgress = (chunks) => {
-        mediasRef.current.setMediaChunks(chunks);
-    };
-    const handleAddMedia = (media) => {
-        mediasRef.current.addMedia(media);
-    };
-    const handleSortMedia = (newSort) => {
+    }), [handleAddLayer, handleRemoveLayer, handleChangeAudience, addressing]);
+    const handleChangeLocation = useCallback((value) => {
+        dispatch({ type: 'location', value });
+        setLayer(null);
+    }, []);
+    const handleAddLocationLayer = useCallback(() => handleAddLayer({
+        name: 'location',
+        Component: LocationLayer,
+        ComponentProps: {
+            onClose: handleRemoveLayer,
+            onSave: handleChangeLocation,
+            defaultValue: location
+        }
+    }), [handleAddLayer, handleRemoveLayer, handleChangeLocation, location]);
+    const handleChangeMedias = useCallback((value) => {
+        const _medias = [...value];
         dispatch({
             type: 'medias',
-            value: [...medias.filter((media) => newSort.findIndex((m) => m.id === media.id) === -1), ...newSort]
+            value: [...value]
         });
-    };
-    const handleSubmit = (event) => {
-        if (UserUtils.isBlocked(scAuthContext.user)) {
+        mediasRef.current.medias = _medias;
+        setLayer(null);
+    }, []);
+    const handleAddMedia = useCallback((media) => {
+        const _medias = [...mediasRef.current.medias, media];
+        dispatch({
+            type: 'medias',
+            value: _medias
+        });
+        mediasRef.current.medias = _medias;
+    }, []);
+    const handleMediaTriggerClick = useCallback((mediaObjectType) => (event) => {
+        if (mediaObjectType.layerComponent) {
+            handleAddLayer({
+                name: mediaObjectType.name,
+                Component: mediaObjectType.layerComponent,
+                ComponentProps: {
+                    onClose: handleRemoveLayer,
+                    onSave: handleChangeMedias,
+                    defaultValue: medias
+                }
+            });
+        }
+    }, [handleAddLayer, handleRemoveLayer, handleChangeMedias, medias]);
+    const handleChangeAttributes = useCallback((content) => {
+        dispatch({
+            type: 'multiple',
+            value: Object.assign({}, content)
+        });
+    }, []);
+    const handleClickAttributes = useCallback((attr) => {
+        switch (attr) {
+            case 'categories':
+                handleAddCategoryLayer();
+                break;
+            case 'addressing':
+                handleAddAudienceLayer();
+                break;
+            case 'location':
+                handleAddLocationLayer();
+                break;
+        }
+    }, [handleAddCategoryLayer, handleAddAudienceLayer, handleAddLocationLayer]);
+    const handleSubmit = useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (UserUtils.isBlocked(scUserContext.user)) {
             // deny submit action if authenticated user is blocked
             enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
                 variant: 'warning',
@@ -517,31 +357,30 @@ export default function Composer(inProps) {
             });
             return;
         }
+        // Extract hashtags and add to categories
+        const _categories = [...categories.map((c) => c.id), ...extractHashtags(html)];
         const data = {
             title,
-            text,
+            text: html,
             medias: medias.map((m) => m.id),
-            categories: categories.map((c) => c.id)
+            categories: _categories.filter((item, index) => _categories.indexOf(item) === index)
         };
-        if (preferences[SCPreferences.ADDONS_POLLS_ENABLED] && hasPoll()) {
+        if ((preferences[SCPreferences.ADDONS_POLLS_ENABLED].value || UserUtils.isStaff(scUserContext.user)) && hasPoll) {
             data.poll = poll;
         }
-        if (preferences[SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED] && location) {
-            data.location = {
-                location: location.full_address,
-                lat: location.lat,
-                lng: location.lng
-            };
+        if (preferences[SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED].value && location) {
+            data.location = location;
         }
-        if (scPrefernces.features.includes(SCFeatures.USER_TAGGING) && audience === AUDIENCE_TAG) {
+        if (features.includes(SCFeatureName.TAGGING) && addressing !== null) {
             data.addressing = addressing.map((t) => t.id);
         }
         setIsSubmitting(true);
         // Finding right url
-        let url = Endpoints.Composer.url({ type });
+        const _type = type === COMPOSER_TYPE_POLL ? SCContributionType.POST : type;
+        let url = Endpoints.Composer.url({ type: _type });
         let method = Endpoints.Composer.method;
         if (editMode) {
-            url = Endpoints.ComposerEdit.url({ type, id });
+            url = Endpoints.ComposerEdit.url({ type: feedObjectType ? feedObjectType : _type, id });
             method = Endpoints.ComposerEdit.method;
         }
         // Perform request
@@ -559,187 +398,105 @@ export default function Composer(inProps) {
             dispatch({ type: 'reset' });
         })
             .catch((error) => {
-            dispatch({ type: 'multiple', value: formatHttpError(error) });
+            dispatch({ type: 'multiple', value: formatHttpErrorCode(error) });
         })
             .then(() => setIsSubmitting(false));
-    };
+    }, [scUserContext.user, feedObjectType, id, type, title, html, categories, addressing, audience, medias, poll, location, hasPoll]);
+    //edited here
+    const handleClose = useCallback((event, reason) => {
+        if (unloadRef.current) {
+            window.onbeforeunload = null;
+        }
+        if (reason && canSubmit) {
+            handleAddLayer({
+                name: 'close',
+                Component: CloseLayer,
+                ComponentProps: {
+                    onClose: handleRemoveLayer,
+                    onSave: () => {
+                        onClose && onClose(event);
+                        setLayer(null);
+                        dispatch({ type: 'reset' });
+                    }
+                }
+            });
+        }
+        else {
+            onClose && onClose(event);
+            setLayer(null);
+            dispatch({ type: 'reset' });
+        }
+    }, [onClose, canSubmit, handleRemoveLayer]);
+    const handleClosePrompt = useCallback((event) => {
+        if (canSubmit) {
+            handleAddLayer({
+                name: 'close',
+                Component: CloseLayer,
+                ComponentProps: {
+                    onClose: handleRemoveLayer,
+                    onSave: handleClose
+                }
+            });
+        }
+        else {
+            handleClose(event);
+        }
+    }, [canSubmit, handleAddLayer, handleRemoveLayer, handleClose]);
     // RENDER
-    const theme = useTheme();
-    const fullScreen = useMediaQuery(theme.breakpoints.down('md'), { noSsr: typeof window !== 'undefined' });
     const hasMediaShare = useMemo(() => medias.findIndex((m) => m.type === MEDIA_TYPE_SHARE) !== -1, [medias]);
-    const renderMediaAdornment = (mediaObjectType) => {
-        return (React.createElement(Box, { className: classes.mediasActions },
-            React.createElement(Typography, { className: classes.mediasActionsTitle },
-                React.createElement(FormattedMessage, { id: `ui.composer.media.${mediaObjectType.name}.edit`, defaultMessage: `ui.composer.media.${mediaObjectType.name}.edit` })),
-            React.createElement(Typography, { className: classes.mediasActionsActions },
-                React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: "ui.composer.edit", defaultMessage: "ui.composer.edit" }) },
-                    React.createElement(IconButton, { onClick: handleChangeView(mediaObjectType.name), color: "inherit" },
-                        React.createElement(Icon, null, "edit"))),
-                React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: "ui.composer.delete", defaultMessage: "ui.composer.delete" }) },
-                    React.createElement(IconButton, { onClick: handleDeleteMedia(null, mediaObjectType), color: "inherit" },
-                        React.createElement(Icon, null, "delete"))))));
-    };
-    const renderAudienceView = () => {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(DialogTitle, { className: classes.title },
-                React.createElement(Typography, { component: "div" },
-                    React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW) },
-                        React.createElement(Icon, null, "arrow_back"))),
-                React.createElement(Box, null,
-                    React.createElement(FormattedMessage, { id: "ui.composer.audience.title", defaultMessage: "ui.composer.audience.title" })),
-                React.createElement(Box, null,
-                    React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: "ui.composer.done", defaultMessage: "ui.composer.done" }) },
-                        React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW), color: "inherit" },
-                            React.createElement(Icon, null, "check"))))),
-            React.createElement(DialogContent, { className: classes.audienceContent },
-                React.createElement(Box, { sx: { textAlign: 'center' }, className: classes.block },
-                    React.createElement(ToggleButtonGroup, { value: audience, exclusive: true, onChange: handleChange('audience') },
-                        React.createElement(ToggleButton, { value: AUDIENCE_ALL, size: "small" },
-                            React.createElement(Icon, null, "public"),
-                            React.createElement(FormattedMessage, { id: "ui.composer.audience.all", defaultMessage: "ui.composer.audience.all" })),
-                        React.createElement(ToggleButton, { value: AUDIENCE_TAG, size: "small" },
-                            React.createElement(Icon, null, "label"),
-                            " ",
-                            React.createElement(FormattedMessage, { id: "ui.composer.audience.tag", defaultMessage: "ui.composer.audience.tag" })))),
-                React.createElement(Typography, { align: "center", className: classes.block, gutterBottom: true },
-                    audience === AUDIENCE_ALL && (React.createElement(FormattedMessage, { id: "ui.composer.audience.all.message", defaultMessage: "ui.composer.audience.all.message" })),
-                    audience === AUDIENCE_TAG && (React.createElement(FormattedMessage, { id: "ui.composer.audience.tag.message", defaultMessage: "ui.composer.audience.tag.message" }))),
-                audience === AUDIENCE_TAG && (React.createElement(Box, { className: classes.divider },
-                    React.createElement(Box, { className: classes.block, sx: { textAlign: 'center' } },
-                        React.createElement(Audience, { onChange: handleChange('addressing'), defaultValue: addressing, tags: scAddressingTags })))))));
-    };
-    const renderMediaView = (mediaObjectType) => {
-        return () => {
-            return (React.createElement(React.Fragment, null,
-                React.createElement(DialogTitle, { className: classes.title },
-                    React.createElement(Typography, { component: "div" },
-                        React.createElement("span", null,
-                            React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW), disabled: mediasRef.current.mediaChunks.length > 0 },
-                                React.createElement(Icon, null, "arrow_back")))),
-                    React.createElement(Box, null,
-                        React.createElement(FormattedMessage, { id: `ui.composer.media.${mediaObjectType.name}.edit`, defaultMessage: `ui.composer.media.${mediaObjectType.name}.edit` })),
-                    React.createElement(Box, null,
-                        React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: "ui.composer.done", defaultMessage: "ui.composer.done" }) },
-                            React.createElement("span", null,
-                                React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW), color: "inherit", disabled: mediasRef.current.mediaChunks.length > 0 },
-                                    React.createElement(Icon, null, "check")))))),
-                React.createElement(DialogContent, { className: classNames(classes.content, classes.mediaContent) }, React.createElement(mediaObjectType.editComponent, { medias: medias.filter(mediaObjectType.filter), onProgress: handleMediaProgress, onSuccess: handleAddMedia, onSort: handleSortMedia, onDelete: handleDeleteMedia }))));
-        };
-    };
-    const renderPollView = () => {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(DialogTitle, { className: classes.title },
-                React.createElement(Typography, { component: "div" },
-                    React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW) },
-                        React.createElement(Icon, null, "arrow_back"))),
-                React.createElement(Box, null,
-                    React.createElement(FormattedMessage, { id: "ui.composer.poll", defaultMessage: "ui.composer.poll" })),
-                React.createElement(Stack, { spacing: 2, direction: "row" },
-                    React.createElement(React.Fragment, null,
-                        React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: "ui.composer.delete", defaultMessage: "ui.composer.delete" }) },
-                            React.createElement("span", null,
-                                React.createElement(IconButton, { onClick: handleDeletePoll, color: "inherit", disabled: !hasPoll() },
-                                    React.createElement(Icon, null, "delete")))),
-                        React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: "ui.composer.done", defaultMessage: "ui.composer.done" }) },
-                            React.createElement("span", null,
-                                React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW), color: "inherit", disabled: !hasPoll() },
-                                    React.createElement(Icon, null, "check"))))))),
-            React.createElement(DialogContent, { className: classes.content },
-                React.createElement(Poll, { onChange: handleChangePoll, value: poll, error: pollError }))));
-    };
-    const renderLocationView = () => {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(DialogTitle, { className: classes.title },
-                React.createElement(Typography, { component: "div" },
-                    React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW) },
-                        React.createElement(Icon, null, "arrow_back"))),
-                React.createElement(Box, null,
-                    React.createElement(FormattedMessage, { id: "ui.composer.location.title", defaultMessage: "ui.composer.location.title" })),
-                React.createElement(Box, null,
-                    React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: "ui.composer.done", defaultMessage: "ui.composer.done" }) },
-                        React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW), color: "inherit" },
-                            React.createElement(Icon, null, "check"))))),
-            React.createElement(DialogContent, { className: classes.locationContent },
-                React.createElement(Location, { onChange: handleChange('location'), defaultValue: location }))));
-    };
-    const renderMainView = () => {
-        return (React.createElement(React.Fragment, null,
+    const content = useMemo(() => {
+        if (editMode && isLoading) {
+            return React.createElement(ComposerSkeleton, null);
+        }
+        else if (editMode && loadError) {
+            return (React.createElement(Alert, { severity: "error", onClose: handleClose },
+                React.createElement(AlertTitle, null,
+                    React.createElement(FormattedMessage, { id: "ui.composer.edit.error.title", defaultMessage: "ui.composer.edit.error.title" })),
+                React.createElement(FormattedMessage, { id: "ui.composer.edit.error.content", defaultMessage: "ui.composer.edit.error.content" })));
+        }
+        switch (type) {
+            case COMPOSER_TYPE_POLL:
+                return (React.createElement(ContentPoll, { key: key, onChange: handleChangePoll, value: { html, categories, addressing, medias, poll, location }, error: pollError, disabled: isSubmitting }));
+            case SCContributionType.DISCUSSION:
+                return (React.createElement(ContentDiscussion, { key: key, value: { title, html, categories, addressing, medias, poll, location }, error: { titleError, error }, onChange: handleChangeDiscussion, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: true, uploadImage: true }, EditorProps) }));
+            default:
+                return (React.createElement(ContentPost, { key: key, value: { html, categories, addressing, medias, poll, location }, error: { error }, onChange: handleChangePost, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: false, uploadImage: false }, EditorProps) }));
+        }
+    }, [key, type, title, html, categories, addressing, medias, poll, pollError, location, error, handleChangePoll, handleChangePost, isSubmitting]);
+    if (!scUserContext.user && !(scUserContext.loading && open)) {
+        return null;
+    }
+    return (React.createElement(Root, Object.assign({ ref: dialogRef, TransitionComponent: DialogTransition, keepMounted: true, onClose: handleClose }, rest, { className: classNames(classes.root, { [classes.ios]: isIOS }), scroll: "body", fullScreen: fullScreen, tabIndex: -1 }),
+        React.createElement("form", { onSubmit: handleSubmit, method: "post" },
             React.createElement(DialogTitle, { className: classes.title },
-                React.createElement(Box, null,
-                    React.createElement(FormControl, { className: classes.types },
-                        React.createElement(Select, { value: type, onChange: handleChangeType, input: React.createElement(TypeInput, null), disabled: editMode }, composerTypes.map((t) => (React.createElement(MenuItem, { value: t, key: t }, t === 'post' ? (React.createElement(FormattedMessage, { id: 'ui.composer.type.post', defaultMessage: 'ui.composer.type.post' })) : (React.createElement(FormattedMessage, { id: 'ui.composer.type.discussion', defaultMessage: 'ui.composer.type.discussion' })))))))),
-                React.createElement(Box, null, !scAuthContext.user ? React.createElement(Avatar, { className: classes.avatar }) : React.createElement(Avatar, { className: classes.avatar, src: scAuthContext.user.avatar })),
-                React.createElement(Box, null,
-                    React.createElement(IconButton, { onClick: handleClose },
-                        React.createElement(Icon, null, "close")))),
+                React.createElement(IconButton, { onClick: handleClosePrompt },
+                    React.createElement(Icon, null, "close")),
+                React.createElement(LoadingButton, { size: "small", type: "submit", color: "secondary", variant: "contained", disabled: !canSubmit, loading: isSubmitting },
+                    React.createElement(FormattedMessage, { id: "ui.composer.submit", defaultMessage: "ui.composer.submit" }))),
             React.createElement(DialogContent, { className: classes.content },
-                type === COMPOSER_TYPE_DISCUSSION && (React.createElement("div", { className: classes.block },
-                    React.createElement(TextField, { label: React.createElement(FormattedMessage, { id: "ui.composer.title.label", defaultMessage: "ui.composer.title.label" }), fullWidth: true, variant: "outlined", value: title, multiline: true, onChange: handleChange('title'), InputProps: {
-                            endAdornment: React.createElement(Typography, { variant: "body2" }, COMPOSER_TITLE_MAX_LENGTH - title.length)
-                        }, error: Boolean(titleError), helperText: titleError, disabled: isSubmitting }))),
-                React.createElement(Editor, { key: `${key}-editor`, className: classNames(classes.block, classes.editor), onChange: handleChangeText, defaultValue: text, editable: !isSubmitting }),
-                React.createElement(Box, { className: classes.medias },
-                    React.createElement(MediasPreview, { medias: medias, mediaObjectTypes: mediaObjectTypes.map((mediaObjectType) => {
-                            return Object.assign(Object.assign({}, mediaObjectType), { previewProps: { adornment: mediaObjectType.editButton !== null ? renderMediaAdornment(mediaObjectType) : null, gallery: false } });
-                        }) })),
-                poll && React.createElement(PollPreview, { pollObject: poll }),
-                React.createElement(Stack, { spacing: 2, className: classes.audience, direction: "row" },
-                    location && (React.createElement(Chip, { icon: React.createElement(Icon, null, "add_location_alt"), label: location.full_address, onDelete: handleDeleteLocation, onClick: handleChangeView(LOCATION_VIEW) })),
-                    audience === AUDIENCE_TAG &&
-                        addressing &&
-                        addressing.map((t) => (React.createElement(TagChip, { key: t.id, tag: t, onDelete: handleDeleteTag(t.id), icon: React.createElement(Icon, null, "label"), onClick: handleChangeView(AUDIENCE_VIEW) })))),
-                React.createElement("div", { className: classes.block },
-                    React.createElement(Categories, { key: `${key}-categories`, onChange: handleChange('categories'), defaultValue: categories, disabled: isSubmitting })),
-                error && (React.createElement(Typography, { className: classes.block, color: "error" }, error))),
+                React.createElement(Attributes, { value: { categories, addressing, location }, className: classes.attributes, onChange: handleChangeAttributes, onClick: handleClickAttributes }),
+                content,
+                medias && medias.length > 0 && (React.createElement(Box, { className: classes.medias }, mediaObjectTypes.map((mediaObjectType) => {
+                    if (mediaObjectType.previewComponent) {
+                        return React.createElement(mediaObjectType.previewComponent, { key: mediaObjectType.name, value: medias, onChange: handleChangeMedias });
+                    }
+                    else if (mediaObjectType.displayComponent) {
+                        return React.createElement(mediaObjectType.displayComponent, { key: mediaObjectType.name, medias: medias });
+                    }
+                })))),
+            !canSubmit && !editMode && React.createElement(TypeSwitchButtonGroup, { className: classes.types, onChange: handleChangeType, size: "small", value: type }),
             React.createElement(DialogActions, { className: classes.actions },
-                React.createElement(Typography, { align: "left" },
-                    mediaObjectTypes
-                        .filter((mediaObjectType) => mediaObjectType.editButton !== null)
-                        .map((mediaObjectType) => (React.createElement(mediaObjectType.editButton, { key: mediaObjectType.name, onClick: handleChangeView(mediaObjectType.name), disabled: isSubmitting || hasMediaShare, color: medias.filter(mediaObjectType.filter).length > 0 ? 'primary' : 'default' }))),
-                    (preferences[SCPreferences.ADDONS_POLLS_ENABLED] || UserUtils.isStaff(scAuthContext.user)) && (React.createElement(IconButton, { "aria-label": "add poll", color: poll ? 'primary' : 'default', disabled: isSubmitting, onClick: handleChangeView(POLL_VIEW) },
-                        React.createElement(Badge, { className: classes.badgeError, badgeContent: pollError ? ' ' : null, color: "error" },
-                            React.createElement(Icon, null, "bar_chart"))))),
-                React.createElement(Typography, { align: "right" },
-                    preferences[SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED] && (React.createElement(IconButton, { disabled: isSubmitting, onClick: handleChangeView(LOCATION_VIEW), color: location !== null ? 'primary' : 'default' },
-                        React.createElement(Icon, null, "add_location_alt"))),
-                    scPrefernces.features.includes(SCFeatures.USER_TAGGING) && scAddressingTags.length > 0 && (React.createElement(IconButton, { disabled: isSubmitting, onClick: handleChangeView(AUDIENCE_VIEW) }, audience === AUDIENCE_TAG ? React.createElement(Icon, null, "label") : React.createElement(Icon, null, "public"))),
-                    !fullScreen && (React.createElement(LoadingButton, { onClick: handleSubmit, color: "primary", variant: "contained", disabled: !canSubmit(), loading: isSubmitting },
-                        React.createElement(FormattedMessage, { id: "ui.composer.submit", defaultMessage: "ui.composer.submit" })))),
-                fullScreen && (React.createElement(LoadingButton, { onClick: handleSubmit, color: "primary", variant: "contained", disabled: !canSubmit(), loading: isSubmitting, fullWidth: true },
-                    React.createElement(FormattedMessage, { id: "ui.composer.submit", defaultMessage: "ui.composer.submit" }))))));
-    };
-    let child = null;
-    switch (_view) {
-        case MAIN_VIEW:
-            child = renderMainView;
-            break;
-        case POLL_VIEW:
-            child = renderPollView;
-            break;
-        case AUDIENCE_VIEW:
-            child = renderAudienceView;
-            break;
-        case LOCATION_VIEW:
-            child = renderLocationView;
-            break;
-        default:
-            const media = mediaObjectTypes
-                .filter((mediaObjectType) => mediaObjectType.editComponent !== null)
-                .find((mv) => mv.name === _view);
-            child = media ? renderMediaView(media) : renderMainView;
-    }
-    if (editMode && isLoading) {
-        child = () => React.createElement(ComposerSkeleton, null);
-    }
-    else if (editMode && loadError) {
-        child = () => (React.createElement(Alert, { severity: "error", onClose: handleClose },
-            React.createElement(AlertTitle, null,
-                React.createElement(FormattedMessage, { id: "ui.composer.edit.error.title", defaultMessage: "ui.composer.edit.error.title" })),
-            React.createElement(FormattedMessage, { id: "ui.composer.edit.error.content", defaultMessage: "ui.composer.edit.error.content" })));
-    }
-    if (!scAuthContext.user) {
-        return null;
-    }
-    return (React.createElement(Root, Object.assign({ TransitionComponent: DialogTransition, keepMounted: true, onClose: handleClose }, rest, { className: classes.root, fullScreen: fullScreen }), child()));
+                mediaObjectTypes
+                    .filter((mediaObjectType) => mediaObjectType.triggerButton !== null)
+                    .map((mediaObjectType) => {
+                    const props = mediaObjectType.layerComponent ? { onClick: handleMediaTriggerClick(mediaObjectType) } : { onAdd: handleAddMedia };
+                    return (React.createElement(mediaObjectType.triggerButton, Object.assign({ key: mediaObjectType.name, disabled: isSubmitting || hasMediaShare, color: medias.filter(mediaObjectType.filter).length > 0 ? 'primary' : 'default' }, props)));
+                }),
+                React.createElement(IconButton, { disabled: isSubmitting, onClick: handleAddCategoryLayer },
+                    React.createElement(Icon, null, "category")),
+                React.createElement(IconButton, { disabled: isSubmitting || !features.includes(SCFeatureName.TAGGING), onClick: handleAddAudienceLayer }, addressing === null || addressing.length === 0 ? React.createElement(Icon, null, "public") : React.createElement(Icon, null, "label")),
+                preferences[SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED].value && (React.createElement(IconButton, { disabled: isSubmitting, onClick: handleAddLocationLayer, color: location !== null ? 'primary' : 'default' },
+                    React.createElement(Icon, null, "add_location_alt"))))),
+        layer && (React.createElement(LayerTransitionRoot, { className: classes.layerTransitionRoot, in: true, container: dialogRef.current, direction: "left" },
+            React.createElement(layer.Component, Object.assign({}, layer.ComponentProps))))));
 }
-//# sourceMappingURL=Composer.js.map