@selfcommunity/react-ui 0.7.0-alpha.60 → 0.7.0-alpha.62

package/lib/esm/components/CommentObject/Reactions/ReactionsDialog/ReactionsDialog.js

@@ -0,0 +1,100 @@
+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, { useEffect, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Box, List, ListItem, Tab, Tabs } from '@mui/material';
+import InfiniteScroll from '../../../../shared/InfiniteScroll';
+import { http, Endpoints } from '@selfcommunity/api-services';
+import { Logger } from '@selfcommunity/utils';
+import { useSCFetchCommentObject } from '@selfcommunity/react-core';
+import { SCCommentTypologyType } from '@selfcommunity/types';
+import { SCOPE_SC_UI } from '../../../../constants/Errors';
+import BaseDialog from '../../../../shared/BaseDialog';
+import CentralProgress from '../../../../shared/CentralProgress';
+import User from '../../../User';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import Icon from '@mui/material/Icon';
+import _ from 'lodash';
+const PREFIX = 'SCCommentObjectReactionsDialog';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})({});
+function TabPanel(props) {
+    const { children, value, index } = props, other = __rest(props, ["children", "value", "index"]);
+    return (React.createElement("div", Object.assign({ hidden: value !== index, id: `tab-panel-${index}` }, other), value === index && React.createElement(React.Fragment, null, children)));
+}
+export default function CommentObjectReactionsDialog(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { commentObjectId, commentObject, open = false, onClose, reactionsList = [] } = props;
+    // RETRIEVE OBJECTS
+    const { obj, setObj } = useSCFetchCommentObject({ id: commentObjectId, commentObject });
+    // STATE
+    const [isLoading, setIsLoading] = useState(true);
+    const [votes, setVotes] = useState([]);
+    const [next, setNext] = useState(null);
+    const [tabIndex, setTabIndex] = useState('all');
+    const filteredVotes = _.groupBy(votes, (v) => v.reaction.label);
+    // HANDLERS
+    const handleChange = (event, newValue) => {
+        setTabIndex(newValue);
+    };
+    useEffect(() => {
+        if (obj) {
+            fetchVotes();
+        }
+    }, [obj.id]);
+    function fetchVotes() {
+        setIsLoading(true);
+        http
+            .request({
+            url: next ? next : `${Endpoints.VotesList.url({ type: SCCommentTypologyType, id: obj.id })}`,
+            method: Endpoints.VotesList.method
+        })
+            .then((res) => {
+            const data = res.data;
+            setVotes([...data.results, ...votes]);
+            setIsLoading(false);
+            setNext(data.next !== null ? data.next : null);
+        })
+            .catch((error) => {
+            Logger.error(SCOPE_SC_UI, error);
+        });
+    }
+    return (React.createElement(BaseDialog, { title: React.createElement(Tabs, { value: tabIndex, onChange: handleChange, variant: "scrollable", scrollButtons: true, allowScrollButtonsMobile: true },
+            React.createElement(Tab, { value: 'all', label: React.createElement(FormattedMessage, { defaultMessage: "ui.commentObjectReactionsDialog.title", id: "ui.commentObjectReactionsDialog.title" }) }),
+            reactionsList.map((r, index) => (React.createElement(Tab, { icon: React.createElement(Icon, null,
+                    React.createElement("img", { alt: r.reaction.label, src: r.reaction.image, width: 20, height: 20 })), iconPosition: "start", label: r.count, key: index, value: r.reaction.label })))), onClose: onClose, open: open }, isLoading ? (React.createElement(CentralProgress, { size: 50 })) : (React.createElement(React.Fragment, null,
+        React.createElement(TabPanel, { value: 'all', index: tabIndex },
+            React.createElement(InfiniteScroll, { dataLength: votes.length, next: fetchVotes, hasMoreNext: Boolean(next), loaderNext: React.createElement(CentralProgress, { size: 30 }), height: 400, endMessage: React.createElement("p", { style: { textAlign: 'center' } },
+                    React.createElement("b", null,
+                        React.createElement(FormattedMessage, { id: "ui.commentObjectReactionsDialog.noOtherLikes", defaultMessage: "ui.commentObjectReactionsDialog.noOtherLikes" }))) },
+                React.createElement(List, null, votes.map((vote, index) => (React.createElement(ListItem, { key: index },
+                    React.createElement(User, { elevation: 0, user: vote.user, key: index, sx: { m: 0 }, showReaction: true, reaction: vote.reaction }))))))),
+        Object.keys(filteredVotes).map((key, index) => (React.createElement(React.Fragment, { key: index },
+            React.createElement(TabPanel, { value: key, index: tabIndex },
+                React.createElement(InfiniteScroll, { dataLength: votes.length, next: fetchVotes, hasMoreNext: Boolean(next), loaderNext: React.createElement(CentralProgress, { size: 30 }), height: 400, endMessage: React.createElement("p", { style: { textAlign: 'center' } },
+                        React.createElement("b", null,
+                            React.createElement(FormattedMessage, { id: "ui.commentObjectReactionsDialog.noOtherLikes", defaultMessage: "ui.commentObjectReactionsDialog.noOtherLikes" }))) },
+                    React.createElement(List, null, filteredVotes[key].map((vote, index) => (React.createElement(ListItem, { key: index },
+                        React.createElement(User, { elevation: 0, user: vote.user, key: index, sx: { m: 0 }, showReaction: true, reaction: vote.reaction }))))))))))))));
+}
+//# sourceMappingURL=ReactionsDialog.js.map

package/lib/esm/components/CommentObject/Reactions/ReactionsDialog/ReactionsDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionsDialog.js","sourceRoot":"","sources":["../../../../../../src/components/CommentObject/Reactions/ReactionsDialog/ReactionsDialog.tsx"],"names":[],"mappings":"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"}

package/lib/esm/components/CommentObject/Reactions/ReactionsDialog/index.d.ts

@@ -0,0 +1,4 @@
+import CommentObjectReactionsDialog, { CommentObjectReactionsDialogProps } from './ReactionsDialog';
+export default CommentObjectReactionsDialog;
+export { CommentObjectReactionsDialogProps };
+//# sourceMappingURL=index.d.ts.map

package/lib/esm/components/CommentObject/Reactions/ReactionsDialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CommentObject/Reactions/ReactionsDialog/index.tsx"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,EAAE,EAAC,iCAAiC,EAAC,MAAM,mBAAmB,CAAC;AAClG,eAAe,4BAA4B,CAAC;AAC5C,OAAO,EAAC,iCAAiC,EAAC,CAAC"}

package/lib/esm/components/CommentObject/Reactions/ReactionsDialog/index.js

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

package/lib/esm/components/CommentObject/Reactions/ReactionsDialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/CommentObject/Reactions/ReactionsDialog/index.tsx"],"names":[],"mappings":"AAAA,OAAO,4BAAiE,MAAM,mBAAmB,CAAC;AAClG,eAAe,4BAA4B,CAAC"}

package/lib/esm/components/CommentObject/Reactions/index.d.ts

@@ -0,0 +1,4 @@
+import Reactions, { ReactionsProps } from './Reactions';
+export default Reactions;
+export { ReactionsProps };
+//# sourceMappingURL=index.d.ts.map

package/lib/esm/components/CommentObject/Reactions/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/CommentObject/Reactions/index.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,EAAE,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AACtD,eAAe,SAAS,CAAC;AACzB,OAAO,EAAC,cAAc,EAAC,CAAC"}

package/lib/esm/components/CommentObject/Reactions/index.js

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

package/lib/esm/components/CommentObject/Reactions/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/CommentObject/Reactions/index.tsx"],"names":[],"mappings":"AAAA,OAAO,SAA2B,MAAM,aAAa,CAAC;AACtD,eAAe,SAAS,CAAC"}

package/lib/esm/components/CommentObject/Skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/CommentObject/Skeleton.tsx"],"names":[],"mappings":"AA+BA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,KAAK,KAAA,GAAG,GAAG,CAAC,OAAO,CAoBhE"}
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/CommentObject/Skeleton.tsx"],"names":[],"mappings":"AAoCA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,KAAK,KAAA,GAAG,GAAG,CAAC,OAAO,CA8BhE"}

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

@@ -13,7 +13,7 @@ import React from 'react';
 import Widget from '../Widget';
 import { styled } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
-import { CardContent } from '@mui/material';
+import { CardContent, useTheme } from '@mui/material';
 import BaseItem from '../../shared/BaseItem';
 const PREFIX = 'SCCommentObjectSkeleton';
 const classes = {
@@ -21,7 +21,11 @@ const classes = {
     avatar: `${PREFIX}-avatar`,
     primaryContent: `${PREFIX}-primary-content`
 };
-const Root = styled(BaseItem)(({ theme }) => ({
+const Root = styled(BaseItem, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({
     [`&.${classes.root}`]: {
         paddingBottom: theme.spacing(),
         overflow: 'visible',
@@ -58,7 +62,8 @@ const Root = styled(BaseItem)(({ theme }) => ({
  */
 export default function CommentObjectSkeleton(props) {
     const { WidgetProps } = props, rest = __rest(props, ["WidgetProps"]);
-    return (React.createElement(Root, Object.assign({ className: classes.root, disableTypography: true }, rest, { image: React.createElement(Skeleton, { animation: "wave", variant: "circular", width: 40, height: 40, className: classes.avatar }), secondary: React.createElement(React.Fragment, null,
+    const theme = useTheme();
+    return (React.createElement(Root, Object.assign({ className: classes.root, disableTypography: true }, rest, { image: React.createElement(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium, className: classes.avatar }), secondary: React.createElement(React.Fragment, null,
             React.createElement(Widget, Object.assign({}, WidgetProps),
                 React.createElement(CardContent, null,
                     React.createElement(Skeleton, { animation: "wave", height: 10, width: "80%", className: classes.primaryContent }),

package/lib/esm/components/CommentObject/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../src/components/CommentObject/Skeleton.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAC,MAAM,EAAC,MAAM,sBAAsB,CAAC;AAC5C,OAAO,QAAQ,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAE7C,MAAM,MAAM,GAAG,yBAAyB,CAAC;AAEzC,MAAM,OAAO,GAAG;IACd,IAAI,EAAE,GAAG,MAAM,OAAO;IACtB,MAAM,EAAE,GAAG,MAAM,SAAS;IAC1B,cAAc,EAAE,GAAG,MAAM,kBAAkB;CAC5C,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAC,KAAK,EAAC,EAAE,EAAE,CAAC,CAAC;IAC1C,CAAC,KAAK,OAAO,CAAC,IAAI,EAAE,CAAC,EAAE;QACrB,aAAa,EAAE,KAAK,CAAC,OAAO,EAAE;QAC9B,QAAQ,EAAE,SAAS;QACnB,SAAS,EAAE;YACT,UAAU,EAAE,YAAY;SACzB;KACF;IACD,CAAC,MAAM,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE;QACxB,GAAG,EAAE,KAAK,CAAC,OAAO,EAAE;KACrB;IACD,CAAC,MAAM,OAAO,CAAC,cAAc,EAAE,CAAC,EAAE;QAChC,YAAY,EAAE,KAAK,CAAC,OAAO,EAAE;KAC9B;CACF,CAAC,CAAC,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,KAAK;IACjD,MAAM,EAAC,WAAW,KAAa,KAAK,EAAb,IAAI,UAAI,KAAK,EAA9B,eAAsB,CAAQ,CAAC;IACrC,OAAO,CACL,oBAAC,IAAI,kBACH,SAAS,EAAE,OAAO,CAAC,IAAI,EACvB,iBAAiB,UACb,IAAI,IACR,KAAK,EAAE,oBAAC,QAAQ,IAAC,SAAS,EAAC,MAAM,EAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,SAAS,EAAE,OAAO,CAAC,MAAM,GAAI,EACzG,SAAS,EACP;YACE,oBAAC,MAAM,oBAAK,WAAW;gBACrB,oBAAC,WAAW;oBACV,oBAAC,QAAQ,IAAC,SAAS,EAAC,MAAM,EAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAC,KAAK,EAAC,SAAS,EAAE,OAAO,CAAC,cAAc,GAAI;oBACxF,oBAAC,QAAQ,IAAC,SAAS,EAAC,MAAM,EAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAC,KAAK,GAAG,CACzC,CACP,CACR,IAEL,CACH,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../src/components/CommentObject/Skeleton.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAC,MAAM,EAAC,MAAM,sBAAsB,CAAC;AAC5C,OAAO,QAAQ,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAC,WAAW,EAAE,QAAQ,EAAC,MAAM,eAAe,CAAC;AACpD,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAG7C,MAAM,MAAM,GAAG,yBAAyB,CAAC;AAEzC,MAAM,OAAO,GAAG;IACd,IAAI,EAAE,GAAG,MAAM,OAAO;IACtB,MAAM,EAAE,GAAG,MAAM,SAAS;IAC1B,cAAc,EAAE,GAAG,MAAM,kBAAkB;CAC5C,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,EAAE;IAC5B,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI;CAClD,CAAC,CAAC,CAAC,EAAC,KAAK,EAAC,EAAE,EAAE,CAAC,CAAC;IACf,CAAC,KAAK,OAAO,CAAC,IAAI,EAAE,CAAC,EAAE;QACrB,aAAa,EAAE,KAAK,CAAC,OAAO,EAAE;QAC9B,QAAQ,EAAE,SAAS;QACnB,SAAS,EAAE;YACT,UAAU,EAAE,YAAY;SACzB;KACF;IACD,CAAC,MAAM,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE;QACxB,GAAG,EAAE,KAAK,CAAC,OAAO,EAAE;KACrB;IACD,CAAC,MAAM,OAAO,CAAC,cAAc,EAAE,CAAC,EAAE;QAChC,YAAY,EAAE,KAAK,CAAC,OAAO,EAAE;KAC9B;CACF,CAAC,CAAC,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,KAAK;IACjD,MAAM,EAAC,WAAW,KAAa,KAAK,EAAb,IAAI,UAAI,KAAK,EAA9B,eAAsB,CAAQ,CAAC;IACrC,MAAM,KAAK,GAAG,QAAQ,EAAe,CAAC;IAEtC,OAAO,CACL,oBAAC,IAAI,kBACH,SAAS,EAAE,OAAO,CAAC,IAAI,EACvB,iBAAiB,UACb,IAAI,IACR,KAAK,EACH,oBAAC,QAAQ,IACP,SAAS,EAAC,MAAM,EAChB,OAAO,EAAC,UAAU,EAClB,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,EACjD,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,EAClD,SAAS,EAAE,OAAO,CAAC,MAAM,GACzB,EAEJ,SAAS,EACP;YACE,oBAAC,MAAM,oBAAK,WAAW;gBACrB,oBAAC,WAAW;oBACV,oBAAC,QAAQ,IAAC,SAAS,EAAC,MAAM,EAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAC,KAAK,EAAC,SAAS,EAAE,OAAO,CAAC,cAAc,GAAI;oBACxF,oBAAC,QAAQ,IAAC,SAAS,EAAC,MAAM,EAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAC,KAAK,GAAG,CACzC,CACP,CACR,IAEL,CACH,CAAC;AACJ,CAAC"}

package/lib/esm/components/CommentObject/Votes/Votes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Votes.d.ts","sourceRoot":"","sources":["../../../../../src/components/CommentObject/Votes/Votes.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAC;AA2BnD,MAAM,WAAW,UAAU;IACzB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;OAEG;IACH,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,OAAO,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CAsD9D"}
+{"version":3,"file":"Votes.d.ts","sourceRoot":"","sources":["../../../../../src/components/CommentObject/Votes/Votes.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAC;AA4BnD,MAAM,WAAW,UAAU;IACzB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;OAEG;IACH,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,OAAO,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CA0D9D"}

package/lib/esm/components/CommentObject/Votes/Votes.js

@@ -16,6 +16,7 @@ import { styled } from '@mui/material/styles';
 import Icon from '@mui/material/Icon';
 import CommentObjectVotesDialog from './VotesDialog';
 import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
 const PREFIX = 'SCCommentObjectVotes';
 const classes = {
     root: `${PREFIX}-root`,
@@ -40,7 +41,7 @@ export default function Votes(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { commentObjectId, commentObject } = props, rest = __rest(props, ["commentObjectId", "commentObject"]);
+    const { className = '', commentObjectId, commentObject } = props, rest = __rest(props, ["className", "commentObjectId", "commentObject"]);
     // RETRIEVE OBJECTS
     const { obj, setObj } = useSCFetchCommentObject({ id: commentObjectId, commentObject });
     // STATE
@@ -65,6 +66,6 @@ export default function Votes(inProps) {
                 React.createElement(Typography, { variant: 'body2', sx: { marginLeft: '5px' } }, obj.vote_count)),
             openVotesDialog && obj.vote_count > 0 && (React.createElement(CommentObjectVotesDialog, { commentObject: obj, open: openVotesDialog, onClose: handleToggleSharesDialog }))));
     }
-    return React.createElement(Root, Object.assign({}, rest), renderVotes());
+    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest), renderVotes()));
 }
 //# sourceMappingURL=Votes.js.map

package/lib/esm/components/CommentObject/Votes/Votes.js.map

@@ -1 +1 @@
-{"version":3,"file":"Votes.js","sourceRoot":"","sources":["../../../../../src/components/CommentObject/Votes/Votes.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Votes.js","sourceRoot":"","sources":["../../../../../src/components/CommentObject/Votes/Votes.tsx"],"names":[],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import React, { SyntheticEvent } from 'react';
-import { SCFeedDiscussionType, SCFeedObjectTypologyType, SCFeedPostType, SCFeedStatusType, SCMediaType, SCPollType, SCCategoryType, SCTagType } from '@selfcommunity/types';
+import { SCCategoryType, SCFeedDiscussionType, SCFeedObjectTypologyType, SCFeedPostType, SCFeedStatusType, SCMediaType, SCPollType, SCTagType } from '@selfcommunity/types';
 import { DialogProps } from '@mui/material';
 import { SCMediaObjectType } from '../../types/media';
 import { DistributiveOmit } from '@mui/types';

package/lib/esm/components/Composer/Composer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Composer.d.ts","sourceRoot":"","sources":["../../../../src/components/Composer/Composer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAwB,cAAc,EAAuD,MAAM,OAAO,CAAC;AACzH,OAAO,EACL,oBAAoB,EACpB,wBAAwB,EACxB,cAAc,EACd,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,cAAc,EACd,SAAS,EACV,MAAM,sBAAsB,CAAC;AAc9B,OAAO,EAWL,WAAW,EAiBZ,MAAM,eAAe,CAAC;AAYvB,OAAO,EAAmB,iBAAiB,EAAC,MAAM,mBAAmB,CAAC;AAMtE,OAAO,EAAC,gBAAgB,EAAC,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAC,aAAa,EAAC,MAAM,oCAAoC,CAAC;AAwLjE,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK;IAC1E,KAAK,EAAE,CAAC,GACN,gBAAgB,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG;QAC9C;;;WAGG;QACH,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB;;;WAGG;QACH,cAAc,CAAC,EAAE,wBAAwB,CAAC;QAC1C;;;WAGG;QACH,UAAU,CAAC,EAAE,oBAAoB,GAAG,cAAc,GAAG,gBAAgB,GAAG,IAAI,CAAC;QAC7E;;;WAGG;QACH,YAAY,CAAC,EAAE;YACb,KAAK,CAAC,EAAE,MAAM,CAAC;YACf,IAAI,CAAC,EAAE,MAAM,CAAC;YACd,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC;YAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;YAClB,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;YACzB,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;YACvB,IAAI,CAAC,EAAE,UAAU,CAAC;YAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;SACnB,CAAC;QACF;;;WAGG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;;WAGG;QACH,gBAAgB,CAAC,EAAE,iBAAiB,EAAE,CAAC;QACvC;;;WAGG;QACH,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;QAC/B;;;WAGG;QACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;KAC3C,CAAC;IACJ,gBAAgB,EAAE,CAAC,CAAC;CACrB;AAED,oBAAY,aAAa,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,eAAe,CAAC,kBAAkB,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,aAAa,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAE/I,eAAO,MAAM,SAAS,SAAS,CAAC;AAChC,eAAO,MAAM,aAAa,aAAa,CAAC;AACxC,eAAO,MAAM,SAAS,SAAS,CAAC;AAChC,eAAO,MAAM,aAAa,aAAa,CAAC;AAyCxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,OAAO,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAmtBpE"}
+{"version":3,"file":"Composer.d.ts","sourceRoot":"","sources":["../../../../src/components/Composer/Composer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAwB,cAAc,EAAuD,MAAM,OAAO,CAAC;AACzH,OAAO,EACL,cAAc,EACd,oBAAoB,EACpB,wBAAwB,EACxB,cAAc,EACd,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,SAAS,EACV,MAAM,sBAAsB,CAAC;AAe9B,OAAO,EAWL,WAAW,EAkBZ,MAAM,eAAe,CAAC;AAYvB,OAAO,EAAmB,iBAAiB,EAAC,MAAM,mBAAmB,CAAC;AAMtE,OAAO,EAAC,gBAAgB,EAAC,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAC,aAAa,EAAC,MAAM,oCAAoC,CAAC;AA6LjE,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK;IAC1E,KAAK,EAAE,CAAC,GACN,gBAAgB,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG;QAC9C;;;WAGG;QACH,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB;;;WAGG;QACH,cAAc,CAAC,EAAE,wBAAwB,CAAC;QAC1C;;;WAGG;QACH,UAAU,CAAC,EAAE,oBAAoB,GAAG,cAAc,GAAG,gBAAgB,GAAG,IAAI,CAAC;QAC7E;;;WAGG;QACH,YAAY,CAAC,EAAE;YACb,KAAK,CAAC,EAAE,MAAM,CAAC;YACf,IAAI,CAAC,EAAE,MAAM,CAAC;YACd,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC;YAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;YAClB,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;YACzB,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;YACvB,IAAI,CAAC,EAAE,UAAU,CAAC;YAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;SACnB,CAAC;QACF;;;WAGG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;;WAGG;QACH,gBAAgB,CAAC,EAAE,iBAAiB,EAAE,CAAC;QACvC;;;WAGG;QACH,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;QAC/B;;;WAGG;QACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;KAC3C,CAAC;IACJ,gBAAgB,EAAE,CAAC,CAAC;CACrB;AAED,oBAAY,aAAa,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,eAAe,CAAC,kBAAkB,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,aAAa,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAE/I,eAAO,MAAM,SAAS,SAAS,CAAC;AAChC,eAAO,MAAM,aAAa,aAAa,CAAC;AACxC,eAAO,MAAM,SAAS,SAAS,CAAC;AAChC,eAAO,MAAM,aAAa,aAAa,CAAC;AAyCxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,OAAO,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAyrBpE"}

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

@@ -10,11 +10,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef, useContext, useEffect, useMemo, useReducer, useState } from 'react';
-import { http, Endpoints, formatHttpError } from '@selfcommunity/api-services';
+import { Endpoints, formatHttpError, http } from '@selfcommunity/api-services';
 import { SCFeatures, SCPreferences, SCPreferencesContext, SCUserContext, UserUtils, useSCFetchAddressingTagList } from '@selfcommunity/react-core';
 import { FormattedMessage } from 'react-intl';
 import Icon from '@mui/material/Icon';
-import { Alert, AlertTitle, Avatar, Badge, Box, Button, Chip, Dialog, DialogActions, DialogContent, DialogTitle, Fade, FormControl, hexToRgb, IconButton, InputBase, MenuItem, Select, Stack, TextField, ToggleButton, ToggleButtonGroup, Typography, useMediaQuery } from '@mui/material';
+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 { 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 { MEDIA_TYPE_SHARE } from '../../constants/Media';
@@ -69,6 +69,8 @@ const classes = {
     location: `${PREFIX}-location`,
     audience: `${PREFIX}-audience`,
     mediasActions: `${PREFIX}-mediasActions`,
+    mediasActionsTitle: `${PREFIX}-mediasActionsTitle`,
+    mediasActionsActions: `${PREFIX}-mediasActionsActions`,
     sortableMedia: `${PREFIX}-sortableMedia`,
     sortableMediaCover: `${PREFIX}-sortableMediaCover`,
     links: `${PREFIX}-links`,
@@ -113,8 +115,8 @@ const Root = styled(Dialog, {
             alignItems: 'center'
         },
         [`& .${classes.avatar}`]: {
-            width: theme.spacing(4),
-            height: theme.spacing(4),
+            width: theme.selfcommunity.user.avatar.sizeMedium,
+            height: theme.selfcommunity.user.avatar.sizeMedium,
             display: 'inline-block'
         },
         [`& .${classes.content}`]: {
@@ -156,7 +158,10 @@ const Root = styled(Dialog, {
             zIndex: 1,
             display: 'flex',
             flexWrap: 'nowrap',
-            justifyContent: 'space-between'
+            justifyContent: 'space-between',
+            [`& .${classes.mediasActionsActions}`]: {
+                textAlign: 'right'
+            }
         },
         [`& .${classes.sortableMedia}`]: {
             position: 'relative'
@@ -296,7 +301,6 @@ export default function Composer(inProps) {
     // HOOKS
     const { scAddressingTags } = useSCFetchAddressingTagList({ fetch: rest.open });
     // State variables
-    const [fades, setFades] = useState({});
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [_view, setView] = useState(view);
     const [composerTypes, setComposerTypes] = useState([]);
@@ -482,12 +486,6 @@ export default function Composer(inProps) {
         const _addressing = addressing.filter((t) => t.id !== id);
         dispatch({ type: 'multiple', value: { audience: _addressing.length === 0 ? AUDIENCE_ALL : AUDIENCE_TAG, addressing: _addressing } });
     };
-    const handleFadeIn = (obj) => {
-        return (event) => setFades(Object.assign(Object.assign({}, fades), { [obj]: true }));
-    };
-    const handleFadeOut = (obj) => {
-        return (event) => setFades(Object.assign(Object.assign({}, fades), { [obj]: false }));
-    };
     const handleDeleteMedia = (id, mediaObjectType) => {
         return (event) => {
             if (id) {
@@ -567,31 +565,32 @@ export default function Composer(inProps) {
     };
     // RENDER
     const theme = useTheme();
-    const smDown = useMediaQuery(theme.breakpoints.down('sm'), { noSsr: typeof window !== 'undefined' });
     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, onMouseEnter: handleFadeIn(mediaObjectType.name), onMouseLeave: handleFadeOut(mediaObjectType.name) },
-            React.createElement(Fade, { in: Boolean(fades[mediaObjectType.name]) },
-                React.createElement(Typography, { align: "left" },
-                    React.createElement(Button, { onClick: handleChangeView(mediaObjectType.name), variant: "text", size: "small" },
-                        React.createElement(FormattedMessage, { id: `ui.composer.media.${mediaObjectType.name}.edit`, defaultMessage: `ui.composer.media.${mediaObjectType.name}.edit` })))),
-            React.createElement(Typography, { align: "right" },
-                React.createElement(IconButton, { onClick: handleDeleteMedia(null, mediaObjectType), size: "small", color: "primary" },
-                    React.createElement(Icon, null, "delete")))));
+        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), size: "small" },
-                        React.createElement(Icon, null, "arrow_back")),
+                    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(Avatar, { className: classes.avatar, src: scAuthContext.user.avatar })),
-                React.createElement(Box, null, smDown ? (React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW), color: "inherit" },
-                    React.createElement(Icon, null, "check"))) : (React.createElement(Button, { onClick: handleChangeView(MAIN_VIEW), variant: "text", color: "inherit" },
-                    React.createElement(FormattedMessage, { id: "ui.composer.done", defaultMessage: "ui.composer.done" }))))),
+                    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') },
@@ -614,14 +613,16 @@ export default function Composer(inProps) {
             return (React.createElement(React.Fragment, null,
                 React.createElement(DialogTitle, { className: classes.title },
                     React.createElement(Typography, { component: "div" },
-                        React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW), size: "small", disabled: mediasRef.current.mediaChunks.length > 0 },
-                            React.createElement(Icon, null, "arrow_back")),
+                        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(Avatar, { className: classes.avatar, src: scAuthContext.user.avatar })),
-                    React.createElement(Box, null, smDown ? (React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW), color: "inherit", disabled: mediasRef.current.mediaChunks.length > 0 },
-                        React.createElement(Icon, null, "check"))) : (React.createElement(Button, { onClick: handleChangeView(MAIN_VIEW), variant: "text", color: "inherit", disabled: mediasRef.current.mediaChunks.length > 0 },
-                        React.createElement(FormattedMessage, { id: "ui.composer.done", defaultMessage: "ui.composer.done" }))))),
+                        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 }))));
         };
     };
@@ -629,20 +630,20 @@ export default function Composer(inProps) {
         return (React.createElement(React.Fragment, null,
             React.createElement(DialogTitle, { className: classes.title },
                 React.createElement(Typography, { component: "div" },
-                    React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW), size: "small" },
-                        React.createElement(Icon, null, "arrow_back")),
-                    React.createElement(FormattedMessage, { id: "ui.composer.poll", defaultMessage: "ui.composer.poll" })),
+                    React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW) },
+                        React.createElement(Icon, null, "arrow_back"))),
                 React.createElement(Box, null,
-                    React.createElement(Avatar, { className: classes.avatar, src: scAuthContext.user.avatar })),
-                React.createElement(Stack, { spacing: 2, direction: "row" }, smDown ? (React.createElement(React.Fragment, null,
-                    React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW), color: "inherit", disabled: !hasPoll() },
-                        React.createElement(Icon, null, "check")),
-                    React.createElement(IconButton, { onClick: handleDeletePoll, color: "inherit", disabled: !hasPoll() },
-                        React.createElement(Icon, null, "delete")))) : (React.createElement(React.Fragment, null,
-                    React.createElement(Button, { onClick: handleDeletePoll, variant: "text", color: "inherit" },
-                        React.createElement(FormattedMessage, { id: "ui.composer.delete", defaultMessage: "ui.composer.delete" })),
-                    React.createElement(Button, { onClick: handleChangeView(MAIN_VIEW), variant: "text", color: "inherit", disabled: !hasPoll() },
-                        React.createElement(FormattedMessage, { id: "ui.composer.done", defaultMessage: "ui.composer.done" })))))),
+                    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 }))));
     };
@@ -650,14 +651,14 @@ export default function Composer(inProps) {
         return (React.createElement(React.Fragment, null,
             React.createElement(DialogTitle, { className: classes.title },
                 React.createElement(Typography, { component: "div" },
-                    React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW), size: "small" },
-                        React.createElement(Icon, null, "arrow_back")),
+                    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(Avatar, { className: classes.avatar, src: scAuthContext.user.avatar })),
-                React.createElement(Box, null, smDown ? (React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW), color: "inherit" },
-                    React.createElement(Icon, null, "check"))) : (React.createElement(Button, { onClick: handleChangeView(MAIN_VIEW), variant: "text", color: "inherit" },
-                    React.createElement(FormattedMessage, { id: "ui.composer.done", defaultMessage: "ui.composer.done" }))))),
+                    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 }))));
     };
@@ -666,7 +667,6 @@ export default function Composer(inProps) {
             React.createElement(DialogTitle, { className: classes.title },
                 React.createElement(Box, null,
                     React.createElement(FormControl, { className: classes.types },
-                        React.createElement(Icon, null, "create"),
                         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,