@selfcommunity/react-ui 0.11.0-alpha.103 → 0.11.0-alpha.105

package/lib/cjs/components/Editor/plugins/MediaPlugin.js

@@ -40,8 +40,12 @@ function MediaPlugin(props) {
     // CONTEXT
     const scContext = (0, react_core_1.useSCContext)();
     const scUserContext = (0, react_core_1.useSCUser)();
+    const { preferences } = (0, react_core_1.useSCPreferences)();
     // HOOKS
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
+    const acceptedMediaMimetypes = (0, react_1.useMemo)(() => preferences &&
+        react_core_1.SCPreferences.CONFIGURATIONS_ACCEPTED_MEDIA_MIMETYPES in preferences &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_ACCEPTED_MEDIA_MIMETYPES].value, [preferences]);
     (0, react_1.useEffect)(() => {
         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
         // @ts-ignore
@@ -63,13 +67,14 @@ function MediaPlugin(props) {
     }, [editor]);
     // HANDLERS
     const handleFileUploadFilter = (file) => {
-        if (file.type.startsWith('image/')) {
+        const type = file.type;
+        if (type.startsWith('image/')) {
             setMediaType('image');
         }
         else {
             setMediaType('file');
         }
-        return file.type.startsWith('image/') || file.type.startsWith('application/');
+        return acceptedMediaMimetypes.includes(type);
     };
     const handleUploadSuccess = (media) => {
         if (media.type === 'image') {
@@ -97,7 +102,7 @@ function MediaPlugin(props) {
         setUploading(Object.assign({}, chunks));
         isUploading && isUploading(Object.keys(chunks).length !== 0);
     };
-    const handleUploadError = (chunk, error) => {
+    const handleUploadError = (_chunk, error) => {
         enqueueSnackbar(error, {
             variant: 'error',
             autoHideDuration: 3000
@@ -112,7 +117,7 @@ function MediaPlugin(props) {
                 url: `${scContext.settings.portal}${api_services_1.Endpoints.ComposerChunkUploadMedia.url()}`,
                 headers: ((_a = scContext.settings.session) === null || _a === void 0 ? void 0 : _a.authToken) ? { Authorization: `Bearer ${scContext.settings.session.authToken.accessToken}` } : {},
                 method: api_services_1.Endpoints.ComposerChunkUploadMedia.method
-            }, chunkSize: 204800, accept: "image/*,application/*", fileFilter: handleFileUploadFilter, multiple: true }, { children: [(0, jsx_runtime_1.jsx)(MediaChunkUploader_1.default, { type: mediaType, onSuccess: handleUploadSuccess, onProgress: handleUploadProgress, onError: handleUploadError }), (0, jsx_runtime_1.jsx)(UploadButton, { className: className, extraProps: {
+            }, chunkSize: 204800, accept: acceptedMediaMimetypes, fileFilter: handleFileUploadFilter, multiple: true }, { children: [(0, jsx_runtime_1.jsx)(MediaChunkUploader_1.default, { type: mediaType, onSuccess: handleUploadSuccess, onProgress: handleUploadProgress, onError: handleUploadError }), (0, jsx_runtime_1.jsx)(UploadButton, { className: className, extraProps: {
                         disabled: Object.keys(uploading).length !== 0,
                         progress: Object.keys(uploading).length !== 0 ? Object.values(uploading)[0].completed : null
                     } })] })) })));

package/lib/cjs/shared/Media/File/DocComponent.js

@@ -5,14 +5,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const constants_1 = require("./constants");
 const react_core_1 = require("@selfcommunity/react-core");
+const types_1 = require("@selfcommunity/types");
 const react_1 = require("react");
-const avi_1 = tslib_1.__importDefault(require("../../../assets/composer/avi"));
-const mp3_1 = tslib_1.__importDefault(require("../../../assets/composer/mp3"));
-const pdf_1 = tslib_1.__importDefault(require("../../../assets/composer/pdf"));
-const ppt_1 = tslib_1.__importDefault(require("../../../assets/composer/ppt"));
-const psd_1 = tslib_1.__importDefault(require("../../../assets/composer/psd"));
 const txt_1 = tslib_1.__importDefault(require("../../../assets/composer/txt"));
+const pdf_1 = tslib_1.__importDefault(require("../../../assets/composer/pdf"));
+const doc_1 = tslib_1.__importDefault(require("../../../assets/composer/doc"));
 const xls_1 = tslib_1.__importDefault(require("../../../assets/composer/xls"));
+const ppt_1 = tslib_1.__importDefault(require("../../../assets/composer/ppt"));
 const fallback_1 = tslib_1.__importDefault(require("../../../assets/composer/fallback"));
 const classes = {
     docRoot: `${constants_1.PREFIX}-doc-root`,
@@ -39,28 +38,39 @@ function formatBytes(bytes, decimals = 2) {
 function DocComponent(props) {
     const { document, index, onDelete, handleDownload, onMediaClick } = props;
     const getImage = (0, react_1.useCallback)(() => {
-        switch (document.type) {
-            case 'avi':
-                return avi_1.default;
-            case 'doc':
-                return pdf_1.default; // TODO - use "doc" instead of "pdf" after api will be updated
-            case 'mp3':
-                return mp3_1.default;
-            case 'pdf':
-                return pdf_1.default;
-            case 'ppt':
-                return ppt_1.default;
-            case 'psd':
-                return psd_1.default;
-            case 'txt':
+        switch (document.mimetype) {
+            case types_1.SCMimeTypes.PLAIN_TEXT:
+            case types_1.SCMimeTypes.CSV:
                 return txt_1.default;
-            case 'xsl':
+            case types_1.SCMimeTypes.PDF:
+                return pdf_1.default;
+            case types_1.SCMimeTypes.DOC:
+            case types_1.SCMimeTypes.DOCX:
+            case types_1.SCMimeTypes.DOTX:
+            case types_1.SCMimeTypes.DOCM:
+            case types_1.SCMimeTypes.DOTM:
+                return doc_1.default;
+            case types_1.SCMimeTypes.XLS:
+            case types_1.SCMimeTypes.XLSX:
+            case types_1.SCMimeTypes.XLTX:
+            case types_1.SCMimeTypes.XLSM:
+            case types_1.SCMimeTypes.XLTM:
+            case types_1.SCMimeTypes.XLAM:
+            case types_1.SCMimeTypes.XLSB:
                 return xls_1.default;
+            case types_1.SCMimeTypes.PPT:
+            case types_1.SCMimeTypes.PPTX:
+            case types_1.SCMimeTypes.POTX:
+            case types_1.SCMimeTypes.PPSX:
+            case types_1.SCMimeTypes.PPAM:
+            case types_1.SCMimeTypes.PPTM:
+            case types_1.SCMimeTypes.POTM:
+            case types_1.SCMimeTypes.PPSM:
+                return ppt_1.default;
             default:
                 return fallback_1.default;
         }
-    }, [document.type]);
-    const imageComponent = (0, jsx_runtime_1.jsx)(material_1.Box, { component: "img", alt: "pdf preview", src: getImage(), sx: { cursor: handleDownload ? 'pointer' : undefined } });
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.docRoot }, { children: [handleDownload ? ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.imageWrapper, component: react_core_1.Link, to: document.url, target: "_blank", onClick: () => onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(document) }, { children: imageComponent }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: imageComponent })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.textWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title }, { children: document.title })), document.size && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.subtitle }, { children: formatBytes(document.size) }))] })), (handleDownload || onDelete) && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actionWrapper }, { children: [onDelete && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.action, onClick: () => onDelete(document.id) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete" }) }))), handleDownload && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.action, component: react_core_1.Link, to: document.url, target: "_blank", onClick: () => onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(document) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "visibility" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.action, onClick: () => handleDownload(index) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "download" }) }))] }))] })))] })));
+    }, [document.mimetype]);
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.docRoot }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { component: "img", alt: document.title, src: getImage() }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.textWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title }, { children: document.title })), document.size && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.subtitle }, { children: formatBytes(document.size) }))] })), (handleDownload || onDelete) && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actionWrapper }, { children: [onDelete && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.action, onClick: () => onDelete(document.id) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete" }) }))), handleDownload && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [document.mimetype === types_1.SCMimeTypes.PDF && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.action, component: react_core_1.Link, to: document.url, target: "_blank", onClick: () => onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(document) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "visibility" }) }))), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.action, onClick: () => handleDownload(index) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "download" }) }))] }))] })))] })));
 }
 exports.default = DocComponent;

package/lib/cjs/shared/Media/File/TriggerButton.js

@@ -32,11 +32,6 @@ const MenuRoot = (0, material_1.styled)(material_1.Menu, {
     name: constants_1.PREFIX,
     slot: 'TriggerMenuRoot'
 })(() => ({}));
-const PhotoUploadListItemButton = (0, asUploadButton_1.default)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: 'image/*', capture: 'camera' });
-const GalleryUploadListItemButton = (0, asUploadButton_1.default)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: 'image/*' });
-const DocumentUploadListItemButton = (0, asUploadButton_1.default)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: 'application/pdf' });
-const GalleryUploadMenuItem = (0, asUploadButton_1.default)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: 'image/*' });
-const DocumentUploadMenuItem = (0, asUploadButton_1.default)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: 'application/pdf' });
 exports.default = (_a) => {
     var { className, onAdd = null } = _a, rest = tslib_1.__rest(_a, ["className", "onAdd"]);
     // STATE
@@ -44,10 +39,31 @@ exports.default = (_a) => {
     const [isUploading, setIsUploading] = (0, react_1.useState)(false);
     // CONTEXT
     const scContext = (0, react_core_1.useSCContext)();
+    const { preferences } = (0, react_core_1.useSCPreferences)();
     // HOOKS
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
     const { enqueueSnackbar, closeSnackbar } = (0, notistack_1.useSnackbar)();
+    const acceptedMediaMimetypes = (0, react_1.useMemo)(() => preferences &&
+        react_core_1.SCPreferences.CONFIGURATIONS_ACCEPTED_MEDIA_MIMETYPES in preferences &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_ACCEPTED_MEDIA_MIMETYPES].value, [preferences]);
+    const mimeTypesArray = (0, react_1.useMemo)(() => acceptedMediaMimetypes.split(','), [acceptedMediaMimetypes]);
+    const { imageMimeTypes, documentMimeTypes } = (0, react_1.useMemo)(() => mimeTypesArray.reduce((acc, type) => {
+        if (type.startsWith('image/')) {
+            acc = Object.assign(Object.assign({}, acc), { imageMimeTypes: acc.imageMimeTypes.concat(`${type},`) });
+        }
+        else {
+            acc = Object.assign(Object.assign({}, acc), { documentMimeTypes: acc.documentMimeTypes.concat(`${type},`) });
+        }
+        return acc;
+    }, { imageMimeTypes: '', documentMimeTypes: '' }), [mimeTypesArray]);
+    const formattedImageMimeTypes = (0, react_1.useMemo)(() => imageMimeTypes.substring(0, imageMimeTypes.length - 1), [imageMimeTypes]);
+    const formattedDocumentMimeTypes = (0, react_1.useMemo)(() => documentMimeTypes.substring(0, documentMimeTypes.length - 1), [documentMimeTypes]);
+    const PhotoUploadListItemButton = (0, asUploadButton_1.default)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: formattedImageMimeTypes, capture: 'camera' });
+    const GalleryUploadListItemButton = (0, asUploadButton_1.default)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: formattedImageMimeTypes });
+    const DocumentUploadListItemButton = (0, asUploadButton_1.default)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: formattedDocumentMimeTypes });
+    const GalleryUploadMenuItem = (0, asUploadButton_1.default)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: formattedImageMimeTypes });
+    const DocumentUploadMenuItem = (0, asUploadButton_1.default)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: formattedDocumentMimeTypes });
     // HANDLERS
     const handleOpen = (0, react_1.useCallback)((event) => {
         setAnchorEl(event.currentTarget);
@@ -56,7 +72,7 @@ exports.default = (_a) => {
         setAnchorEl(null);
     }, []);
     const handleFilterByMime = (0, react_1.useCallback)((file) => {
-        if (file.type.startsWith('image/') || file.type === 'application/pdf') {
+        if (acceptedMediaMimetypes.includes(file.type)) {
             return true;
         }
         const _snackBar = enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.media.file.error", defaultMessage: "ui.composer.media.file.error" }), {
@@ -70,7 +86,7 @@ exports.default = (_a) => {
             }
         });
         return false;
-    }, []);
+    }, [acceptedMediaMimetypes]);
     const handleSuccess = (0, react_1.useCallback)((media) => {
         onAdd && onAdd(media);
     }, [onAdd]);

package/lib/esm/components/Editor/plugins/MediaPlugin.js

@@ -1,13 +1,13 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useState } from 'react';
+import { forwardRef, useEffect, useMemo, useState } from 'react';
 import { COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical';
 import { $insertNodeToNearestRoot } from '@lexical/utils';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { Box, CircularProgress, Icon, IconButton, styled } from '@mui/material';
 import ChunkedUploady from '@rpldy/chunked-uploady';
 import { Endpoints } from '@selfcommunity/api-services';
-import { useSCContext, useSCUser } from '@selfcommunity/react-core';
+import { SCPreferences, useSCContext, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 import MediaChunkUploader from '../../../shared/MediaChunkUploader';
 import { asUploadButton } from '@rpldy/upload-button';
 import { useSnackbar } from 'notistack';
@@ -37,8 +37,12 @@ export default function MediaPlugin(props) {
     // CONTEXT
     const scContext = useSCContext();
     const scUserContext = useSCUser();
+    const { preferences } = useSCPreferences();
     // HOOKS
     const { enqueueSnackbar } = useSnackbar();
+    const acceptedMediaMimetypes = useMemo(() => preferences &&
+        SCPreferences.CONFIGURATIONS_ACCEPTED_MEDIA_MIMETYPES in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_ACCEPTED_MEDIA_MIMETYPES].value, [preferences]);
     useEffect(() => {
         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
         // @ts-ignore
@@ -60,13 +64,14 @@ export default function MediaPlugin(props) {
     }, [editor]);
     // HANDLERS
     const handleFileUploadFilter = (file) => {
-        if (file.type.startsWith('image/')) {
+        const type = file.type;
+        if (type.startsWith('image/')) {
             setMediaType('image');
         }
         else {
             setMediaType('file');
         }
-        return file.type.startsWith('image/') || file.type.startsWith('application/');
+        return acceptedMediaMimetypes.includes(type);
     };
     const handleUploadSuccess = (media) => {
         if (media.type === 'image') {
@@ -94,7 +99,7 @@ export default function MediaPlugin(props) {
         setUploading(Object.assign({}, chunks));
         isUploading && isUploading(Object.keys(chunks).length !== 0);
     };
-    const handleUploadError = (chunk, error) => {
+    const handleUploadError = (_chunk, error) => {
         enqueueSnackbar(error, {
             variant: 'error',
             autoHideDuration: 3000
@@ -109,7 +114,7 @@ export default function MediaPlugin(props) {
                 url: `${scContext.settings.portal}${Endpoints.ComposerChunkUploadMedia.url()}`,
                 headers: ((_a = scContext.settings.session) === null || _a === void 0 ? void 0 : _a.authToken) ? { Authorization: `Bearer ${scContext.settings.session.authToken.accessToken}` } : {},
                 method: Endpoints.ComposerChunkUploadMedia.method
-            }, chunkSize: 204800, accept: "image/*,application/*", fileFilter: handleFileUploadFilter, multiple: true }, { children: [_jsx(MediaChunkUploader, { type: mediaType, onSuccess: handleUploadSuccess, onProgress: handleUploadProgress, onError: handleUploadError }), _jsx(UploadButton, { className: className, extraProps: {
+            }, chunkSize: 204800, accept: acceptedMediaMimetypes, fileFilter: handleFileUploadFilter, multiple: true }, { children: [_jsx(MediaChunkUploader, { type: mediaType, onSuccess: handleUploadSuccess, onProgress: handleUploadProgress, onError: handleUploadError }), _jsx(UploadButton, { className: className, extraProps: {
                         disabled: Object.keys(uploading).length !== 0,
                         progress: Object.keys(uploading).length !== 0 ? Object.values(uploading)[0].completed : null
                     } })] })) })));

package/lib/esm/shared/Media/File/DocComponent.js

@@ -1,15 +1,14 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Button, Icon, IconButton, Stack, styled, Typography } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Icon, IconButton, Stack, styled, Typography } from '@mui/material';
 import { PREFIX } from './constants';
 import { Link } from '@selfcommunity/react-core';
+import { SCMimeTypes } from '@selfcommunity/types';
 import { useCallback } from 'react';
-import avi from '../../../assets/composer/avi';
-import mp3 from '../../../assets/composer/mp3';
-import pdf from '../../../assets/composer/pdf';
-import ppt from '../../../assets/composer/ppt';
-import psd from '../../../assets/composer/psd';
 import txt from '../../../assets/composer/txt';
+import pdf from '../../../assets/composer/pdf';
+import doc from '../../../assets/composer/doc';
 import xls from '../../../assets/composer/xls';
+import ppt from '../../../assets/composer/ppt';
 import fallback from '../../../assets/composer/fallback';
 const classes = {
     docRoot: `${PREFIX}-doc-root`,
@@ -36,27 +35,38 @@ function formatBytes(bytes, decimals = 2) {
 export default function DocComponent(props) {
     const { document, index, onDelete, handleDownload, onMediaClick } = props;
     const getImage = useCallback(() => {
-        switch (document.type) {
-            case 'avi':
-                return avi;
-            case 'doc':
-                return pdf; // TODO - use "doc" instead of "pdf" after api will be updated
-            case 'mp3':
-                return mp3;
-            case 'pdf':
-                return pdf;
-            case 'ppt':
-                return ppt;
-            case 'psd':
-                return psd;
-            case 'txt':
+        switch (document.mimetype) {
+            case SCMimeTypes.PLAIN_TEXT:
+            case SCMimeTypes.CSV:
                 return txt;
-            case 'xsl':
+            case SCMimeTypes.PDF:
+                return pdf;
+            case SCMimeTypes.DOC:
+            case SCMimeTypes.DOCX:
+            case SCMimeTypes.DOTX:
+            case SCMimeTypes.DOCM:
+            case SCMimeTypes.DOTM:
+                return doc;
+            case SCMimeTypes.XLS:
+            case SCMimeTypes.XLSX:
+            case SCMimeTypes.XLTX:
+            case SCMimeTypes.XLSM:
+            case SCMimeTypes.XLTM:
+            case SCMimeTypes.XLAM:
+            case SCMimeTypes.XLSB:
                 return xls;
+            case SCMimeTypes.PPT:
+            case SCMimeTypes.PPTX:
+            case SCMimeTypes.POTX:
+            case SCMimeTypes.PPSX:
+            case SCMimeTypes.PPAM:
+            case SCMimeTypes.PPTM:
+            case SCMimeTypes.POTM:
+            case SCMimeTypes.PPSM:
+                return ppt;
             default:
                 return fallback;
         }
-    }, [document.type]);
-    const imageComponent = _jsx(Box, { component: "img", alt: "pdf preview", src: getImage(), sx: { cursor: handleDownload ? 'pointer' : undefined } });
-    return (_jsxs(Root, Object.assign({ className: classes.docRoot }, { children: [handleDownload ? (_jsx(Button, Object.assign({ className: classes.imageWrapper, component: Link, to: document.url, target: "_blank", onClick: () => onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(document) }, { children: imageComponent }))) : (_jsx(_Fragment, { children: imageComponent })), _jsxs(Stack, Object.assign({ className: classes.textWrapper }, { children: [_jsx(Typography, Object.assign({ className: classes.title }, { children: document.title })), document.size && _jsx(Typography, Object.assign({ className: classes.subtitle }, { children: formatBytes(document.size) }))] })), (handleDownload || onDelete) && (_jsxs(Stack, Object.assign({ className: classes.actionWrapper }, { children: [onDelete && (_jsx(IconButton, Object.assign({ className: classes.action, onClick: () => onDelete(document.id) }, { children: _jsx(Icon, { children: "delete" }) }))), handleDownload && (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ className: classes.action, component: Link, to: document.url, target: "_blank", onClick: () => onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(document) }, { children: _jsx(Icon, { children: "visibility" }) })), _jsx(IconButton, Object.assign({ className: classes.action, onClick: () => handleDownload(index) }, { children: _jsx(Icon, { children: "download" }) }))] }))] })))] })));
+    }, [document.mimetype]);
+    return (_jsxs(Root, Object.assign({ className: classes.docRoot }, { children: [_jsx(Box, { component: "img", alt: document.title, src: getImage() }), _jsxs(Stack, Object.assign({ className: classes.textWrapper }, { children: [_jsx(Typography, Object.assign({ className: classes.title }, { children: document.title })), document.size && _jsx(Typography, Object.assign({ className: classes.subtitle }, { children: formatBytes(document.size) }))] })), (handleDownload || onDelete) && (_jsxs(Stack, Object.assign({ className: classes.actionWrapper }, { children: [onDelete && (_jsx(IconButton, Object.assign({ className: classes.action, onClick: () => onDelete(document.id) }, { children: _jsx(Icon, { children: "delete" }) }))), handleDownload && (_jsxs(_Fragment, { children: [document.mimetype === SCMimeTypes.PDF && (_jsx(IconButton, Object.assign({ className: classes.action, component: Link, to: document.url, target: "_blank", onClick: () => onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(document) }, { children: _jsx(Icon, { children: "visibility" }) }))), _jsx(IconButton, Object.assign({ className: classes.action, onClick: () => handleDownload(index) }, { children: _jsx(Icon, { children: "download" }) }))] }))] })))] })));
 }

package/lib/esm/shared/Media/File/TriggerButton.js

@@ -4,7 +4,7 @@ import { forwardRef, useCallback, useMemo, useState } from 'react';
 import { CircularProgress, IconButton, List, ListItem, ListItemButton, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme, Icon, styled } from '@mui/material';
 import { PREFIX } from './constants';
 import classNames from 'classnames';
-import { useSCContext } from '@selfcommunity/react-core';
+import { SCPreferences, useSCContext, useSCPreferences } from '@selfcommunity/react-core';
 import { FormattedMessage } from 'react-intl';
 import MediaChunkUploader from '../../MediaChunkUploader';
 import ChunkedUploady from '@rpldy/chunked-uploady';
@@ -30,11 +30,6 @@ const MenuRoot = styled(Menu, {
     name: PREFIX,
     slot: 'TriggerMenuRoot'
 })(() => ({}));
-const PhotoUploadListItemButton = asUploadButton(forwardRef((props, ref) => _jsx(ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: 'image/*', capture: 'camera' });
-const GalleryUploadListItemButton = asUploadButton(forwardRef((props, ref) => _jsx(ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: 'image/*' });
-const DocumentUploadListItemButton = asUploadButton(forwardRef((props, ref) => _jsx(ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: 'application/pdf' });
-const GalleryUploadMenuItem = asUploadButton(forwardRef((props, ref) => _jsx(MenuItem, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: 'image/*' });
-const DocumentUploadMenuItem = asUploadButton(forwardRef((props, ref) => _jsx(MenuItem, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: 'application/pdf' });
 export default (_a) => {
     var { className, onAdd = null } = _a, rest = __rest(_a, ["className", "onAdd"]);
     // STATE
@@ -42,10 +37,31 @@ export default (_a) => {
     const [isUploading, setIsUploading] = useState(false);
     // CONTEXT
     const scContext = useSCContext();
+    const { preferences } = useSCPreferences();
     // HOOKS
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
     const { enqueueSnackbar, closeSnackbar } = useSnackbar();
+    const acceptedMediaMimetypes = useMemo(() => preferences &&
+        SCPreferences.CONFIGURATIONS_ACCEPTED_MEDIA_MIMETYPES in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_ACCEPTED_MEDIA_MIMETYPES].value, [preferences]);
+    const mimeTypesArray = useMemo(() => acceptedMediaMimetypes.split(','), [acceptedMediaMimetypes]);
+    const { imageMimeTypes, documentMimeTypes } = useMemo(() => mimeTypesArray.reduce((acc, type) => {
+        if (type.startsWith('image/')) {
+            acc = Object.assign(Object.assign({}, acc), { imageMimeTypes: acc.imageMimeTypes.concat(`${type},`) });
+        }
+        else {
+            acc = Object.assign(Object.assign({}, acc), { documentMimeTypes: acc.documentMimeTypes.concat(`${type},`) });
+        }
+        return acc;
+    }, { imageMimeTypes: '', documentMimeTypes: '' }), [mimeTypesArray]);
+    const formattedImageMimeTypes = useMemo(() => imageMimeTypes.substring(0, imageMimeTypes.length - 1), [imageMimeTypes]);
+    const formattedDocumentMimeTypes = useMemo(() => documentMimeTypes.substring(0, documentMimeTypes.length - 1), [documentMimeTypes]);
+    const PhotoUploadListItemButton = asUploadButton(forwardRef((props, ref) => _jsx(ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: formattedImageMimeTypes, capture: 'camera' });
+    const GalleryUploadListItemButton = asUploadButton(forwardRef((props, ref) => _jsx(ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: formattedImageMimeTypes });
+    const DocumentUploadListItemButton = asUploadButton(forwardRef((props, ref) => _jsx(ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: formattedDocumentMimeTypes });
+    const GalleryUploadMenuItem = asUploadButton(forwardRef((props, ref) => _jsx(MenuItem, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: formattedImageMimeTypes });
+    const DocumentUploadMenuItem = asUploadButton(forwardRef((props, ref) => _jsx(MenuItem, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: formattedDocumentMimeTypes });
     // HANDLERS
     const handleOpen = useCallback((event) => {
         setAnchorEl(event.currentTarget);
@@ -54,7 +70,7 @@ export default (_a) => {
         setAnchorEl(null);
     }, []);
     const handleFilterByMime = useCallback((file) => {
-        if (file.type.startsWith('image/') || file.type === 'application/pdf') {
+        if (acceptedMediaMimetypes.includes(file.type)) {
             return true;
         }
         const _snackBar = enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.composer.media.file.error", defaultMessage: "ui.composer.media.file.error" }), {
@@ -68,7 +84,7 @@ export default (_a) => {
             }
         });
         return false;
-    }, []);
+    }, [acceptedMediaMimetypes]);
     const handleSuccess = useCallback((media) => {
         onAdd && onAdd(media);
     }, [onAdd]);