@selfcommunity/react-ui 0.7.0-alpha.33 → 0.7.0-alpha.330

package/lib/cjs/shared/Lightbox/index.d.ts

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

package/lib/cjs/shared/Lightbox/index.js

@@ -1,8 +1,5 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const Lightbox_1 = __importDefault(require("./Lightbox"));
+const tslib_1 = require("tslib");
+const Lightbox_1 = tslib_1.__importDefault(require("./Lightbox"));
 exports.default = Lightbox_1.default;
-//# sourceMappingURL=index.js.map

package/lib/cjs/shared/MarkRead/MarkRead.d.ts

@@ -14,7 +14,11 @@ export interface MarkReadProps {
      * @default null
      */
     data?: any;
+    /**
+     * Callback
+     * @default null
+     */
+    callback?: any;
 }
 declare const _default: (props: MarkReadProps) => JSX.Element;
 export default _default;
-//# sourceMappingURL=MarkRead.d.ts.map

package/lib/cjs/shared/MarkRead/MarkRead.js

@@ -1,46 +1,36 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
 const api_services_1 = require("@selfcommunity/api-services");
-const react_lazyload_1 = __importDefault(require("react-lazyload"));
+const react_lazyload_1 = tslib_1.__importDefault(require("react-lazyload"));
 const LazyLoad_1 = require("../../constants/LazyLoad");
 const MarkRead = (props) => {
     // PROPS
-    const { endpoint, params = {}, data = null } = props;
-    (0, react_1.useEffect)(() => {
+    const { endpoint, params = {}, callback, data = null } = props;
+    /**
+     * Perform request
+     */
+    const performRequest = () => {
         api_services_1.http
             .request({
             url: endpoint.url(params),
             method: endpoint.method,
             data
+        })
+            .then((res) => {
+            callback && callback(res);
         })
             .catch(() => null);
+    };
+    (0, react_1.useEffect)(() => {
+        let _t;
+        if (endpoint) {
+            _t = setTimeout(performRequest);
+            return () => {
+                _t && clearTimeout(_t);
+            };
+        }
     }, []);
     return null;
 };
@@ -48,4 +38,3 @@ exports.default = (props) => {
     return (react_1.default.createElement(react_lazyload_1.default, { once: true, offset: LazyLoad_1.MIN_PRELOAD_OFFSET_VIEWPORT },
         react_1.default.createElement(MarkRead, Object.assign({}, props))));
 };
-//# sourceMappingURL=MarkRead.js.map

package/lib/cjs/shared/MarkRead/index.d.ts

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

package/lib/cjs/shared/MarkRead/index.js

@@ -1,8 +1,5 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const MarkRead_1 = __importDefault(require("./MarkRead"));
+const tslib_1 = require("tslib");
+const MarkRead_1 = tslib_1.__importDefault(require("./MarkRead"));
 exports.default = MarkRead_1.default;
-//# sourceMappingURL=index.js.map

package/lib/cjs/shared/Media/Document/EditButton.d.ts

@@ -1,3 +1,2 @@
 declare const _default: (props: any) => JSX.Element;
 export default _default;
-//# sourceMappingURL=EditButton.d.ts.map

package/lib/cjs/shared/Media/Document/EditButton.js

@@ -1,13 +1,10 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 const material_1 = require("@mui/material");
-const Icon_1 = __importDefault(require("@mui/material/Icon"));
+const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 exports.default = (props) => {
     return (react_1.default.createElement(material_1.IconButton, Object.assign({}, props, { "aria-label": "upload document" }),
         react_1.default.createElement(Icon_1.default, null, "picture_as_pdf")));
 };
-//# sourceMappingURL=EditButton.js.map

package/lib/cjs/shared/Media/Document/EditComponent.d.ts

@@ -1,4 +1,3 @@
 import { EditMediaProps } from '../types';
 declare const _default: (props: EditMediaProps) => JSX.Element;
 export default _default;
-//# sourceMappingURL=EditComponent.d.ts.map

package/lib/cjs/shared/Media/Document/EditComponent.js

@@ -1,56 +1,25 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
 const upload_button_1 = require("@rpldy/upload-button");
-const react_1 = __importStar(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const material_1 = require("@mui/material");
 const react_intl_1 = require("react-intl");
 const react_sortablejs_1 = require("react-sortablejs");
-const chunked_uploady_1 = __importDefault(require("@rpldy/chunked-uploady"));
+const chunked_uploady_1 = tslib_1.__importDefault(require("@rpldy/chunked-uploady"));
 const api_services_1 = require("@selfcommunity/api-services");
 const react_core_1 = require("@selfcommunity/react-core");
 const styles_1 = require("@mui/material/styles");
-const MediaChunkUploader_1 = __importDefault(require("../../MediaChunkUploader"));
-const Icon_1 = __importDefault(require("@mui/material/Icon"));
+const MediaChunkUploader_1 = tslib_1.__importDefault(require("../../MediaChunkUploader"));
+const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
+const upload_drop_zone_1 = tslib_1.__importDefault(require("@rpldy/upload-drop-zone"));
 const PREFIX = 'SCMediaActionDocument';
 const classes = {
-    preview: `${PREFIX}-preview`
+    root: `${PREFIX}-root`,
+    preview: `${PREFIX}-preview`,
+    upload: `${PREFIX}-upload`,
+    dragOver: `${PREFIX}-dragOver`,
+    uploadBtn: `${PREFIX}-uploadBtn`
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
     name: PREFIX,
@@ -62,6 +31,9 @@ const Root = (0, styles_1.styled)(material_1.Box, {
         backgroundColor: theme.palette.background.default,
         height: 200,
         position: 'relative'
+    },
+    [`& .${classes.upload}`]: {
+        textAlign: 'center'
     }
 }));
 const UploadButton = (0, upload_button_1.asUploadButton)((0, react_1.forwardRef)((props, ref) => (react_1.default.createElement(material_1.Button, Object.assign({}, props, { "aria-label": "upload document", ref: ref, variant: "outlined", color: "inherit" }),
@@ -69,7 +41,7 @@ const UploadButton = (0, upload_button_1.asUploadButton)((0, react_1.forwardRef)
     " ",
     react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.media.document.add", defaultMessage: "ui.composer.media.document.add" })))));
 const SortableComponent = (0, react_1.forwardRef)((_a, ref) => {
-    var { children } = _a, props = __rest(_a, ["children"]);
+    var { children } = _a, props = tslib_1.__rest(_a, ["children"]);
     return (react_1.default.createElement(material_1.ImageList, Object.assign({ ref: ref, cols: 3 }, props), children));
 });
 exports.default = (props) => {
@@ -80,6 +52,11 @@ exports.default = (props) => {
     const [errors, setErrors] = (0, react_1.useState)({});
     // CONTEXT
     const scContext = (0, react_1.useContext)(react_core_1.SCContext);
+    // FILTER
+    const filterByMime = (0, react_1.useCallback)((file) => {
+        //filter out files larger than 5MB
+        return file.type === 'application/pdf';
+    }, []);
     // HANDLERS
     const handleSuccess = (media) => {
         onSuccess(media);
@@ -100,28 +77,27 @@ exports.default = (props) => {
     /**
      * Renders root object
      */
-    return (react_1.default.createElement(Root, null,
-        react_1.default.createElement(material_1.Typography, { gutterBottom: true, component: "div" },
+    return (react_1.default.createElement(Root, { className: classes.root },
+        (medias.length > 0 || Object.values(uploading).length > 0) && (react_1.default.createElement(material_1.Typography, { gutterBottom: true, component: "div" },
             react_1.default.createElement(react_sortablejs_1.ReactSortable, { list: [...medias, ...Object.values(uploading)], setList: (newSort) => onSort(newSort.filter((s) => s.upload_id === undefined)), tag: SortableComponent },
                 medias.map((media) => (react_1.default.createElement(material_1.ImageListItem, { key: media.id },
                     react_1.default.createElement(material_1.Box, { className: classes.preview, sx: { backgroundImage: `url(${media.image})` } }),
-                    react_1.default.createElement(material_1.ImageListItemBar, { position: "top", actionIcon: react_1.default.createElement(material_1.IconButton, { onClick: onDelete(media.id), size: "small", sx: { color: 'rgba(255, 255, 255, 0.54)' } },
+                    react_1.default.createElement(material_1.ImageListItemBar, { title: media.title, actionIcon: react_1.default.createElement(material_1.IconButton, { onClick: onDelete(media.id), size: "small", sx: { color: 'rgba(255, 255, 255, 0.54)' } },
                             react_1.default.createElement(Icon_1.default, null, "delete")) })))),
                 Object.values(uploading).map((media) => (react_1.default.createElement(material_1.ImageListItem, { key: media.id, className: 'ignore-elements' },
                     react_1.default.createElement(material_1.Box, { className: classes.preview, sx: { backgroundImage: `url(${media.image})` } },
                         react_1.default.createElement(Icon_1.default, { sx: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%' } }, "picture_as_pdf")),
-                    react_1.default.createElement(material_1.ImageListItemBar, { title: react_1.default.createElement(material_1.Typography, { align: "center" }, `${Math.round(media.completed)}%`), position: "top" })))))),
+                    react_1.default.createElement(material_1.ImageListItemBar, { title: react_1.default.createElement(material_1.Typography, { align: "center" }, `${Math.round(media.completed)}%`) }))))))),
         react_1.default.createElement(material_1.Box, null, Object.keys(errors).map((id) => (react_1.default.createElement(material_1.Fade, { in: true, key: id },
             react_1.default.createElement(material_1.Alert, { severity: "error", onClose: handleRemoveErrors(id) },
                 react_1.default.createElement(material_1.AlertTitle, null, errors[id].name),
                 errors[id].error))))),
-        react_1.default.createElement(material_1.Typography, { align: "center", gutterBottom: true },
-            react_1.default.createElement(chunked_uploady_1.default, { destination: {
-                    url: `${scContext.settings.portal}${api_services_1.Endpoints.ComposerChunkUploadMedia.url()}`,
-                    headers: { Authorization: `Bearer ${scContext.settings.session.authToken.accessToken}` },
-                    method: api_services_1.Endpoints.ComposerChunkUploadMedia.method
-                }, chunkSize: 204800, multiple: true, accept: "application/pdf" },
-                react_1.default.createElement(MediaChunkUploader_1.default, { onSuccess: handleSuccess, onProgress: handleProgress, onError: handleError }),
-                react_1.default.createElement(UploadButton, { inputFieldName: "document" })))));
+        react_1.default.createElement(chunked_uploady_1.default, { destination: {
+                url: `${scContext.settings.portal}${api_services_1.Endpoints.ComposerChunkUploadMedia.url()}`,
+                headers: { Authorization: `Bearer ${scContext.settings.session.authToken.accessToken}` },
+                method: api_services_1.Endpoints.ComposerChunkUploadMedia.method
+            }, chunkSize: 204800, multiple: true, accept: "application/pdf", fileFilter: filterByMime },
+            react_1.default.createElement(MediaChunkUploader_1.default, { onSuccess: handleSuccess, onProgress: handleProgress, onError: handleError }),
+            react_1.default.createElement(upload_drop_zone_1.default, { onDragOverClassName: classes.dragOver, inputFieldName: "document", className: classes.upload },
+                react_1.default.createElement(UploadButton, { inputFieldName: "document", className: classes.uploadBtn })))));
 };
-//# sourceMappingURL=EditComponent.js.map

package/lib/cjs/shared/Media/Document/PreviewComponent.d.ts

@@ -1,4 +1,3 @@
 import { ImagePreviewComponentProps } from '../Image/PreviewComponent';
 declare const _default: (props: ImagePreviewComponentProps) => JSX.Element;
 export default _default;
-//# sourceMappingURL=PreviewComponent.d.ts.map

package/lib/cjs/shared/Media/Document/PreviewComponent.js

@@ -1,24 +1,14 @@
 "use strict";
-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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 const styles_1 = require("@mui/material/styles");
-const PreviewComponent_1 = __importDefault(require("../Image/PreviewComponent"));
+const PreviewComponent_1 = tslib_1.__importDefault(require("../Image/PreviewComponent"));
 const Media_1 = require("../../../constants/Media");
 const PREFIX = 'SCPreviewMediaDocument';
+const classes = {
+    root: `${PREFIX}-root`
+};
 const Root = (0, styles_1.styled)(PreviewComponent_1.default, {
     name: PREFIX,
     slot: 'Root',
@@ -26,7 +16,7 @@ const Root = (0, styles_1.styled)(PreviewComponent_1.default, {
 })(({ theme }) => ({}));
 exports.default = (props) => {
     // PROPS
-    const { medias = [], onMediaClick } = props, rest = __rest(props, ["medias", "onMediaClick"]);
+    const { medias = [], onMediaClick } = props, rest = tslib_1.__rest(props, ["medias", "onMediaClick"]);
     /**
      * Handles click on pdf
      * @param doc
@@ -47,8 +37,7 @@ exports.default = (props) => {
      * Renders document preview
      */
     if (medias.length > 0) {
-        return react_1.default.createElement(Root, Object.assign({ medias: medias }, rest, { onClick: handleClickOnPdf }));
+        return react_1.default.createElement(Root, Object.assign({ className: classes.root, medias: medias }, rest, { onClick: handleClickOnPdf }));
     }
     return null;
 };
-//# sourceMappingURL=PreviewComponent.js.map

package/lib/cjs/shared/Media/Document/index.d.ts

@@ -1,4 +1,3 @@
 import { SCMediaObjectType } from '../../../types/media';
 declare const Document: SCMediaObjectType;
 export default Document;
-//# sourceMappingURL=index.d.ts.map

package/lib/cjs/shared/Media/Document/index.js

@@ -1,12 +1,10 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const PreviewComponent_1 = __importDefault(require("./PreviewComponent"));
-const EditButton_1 = __importDefault(require("./EditButton"));
-const EditComponent_1 = __importDefault(require("./EditComponent"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const PreviewComponent_1 = tslib_1.__importDefault(require("./PreviewComponent"));
+const EditButton_1 = tslib_1.__importDefault(require("./EditButton"));
+const EditComponent_1 = tslib_1.__importDefault(require("./EditComponent"));
 const Media_1 = require("../../../constants/Media");
 const Document = {
     name: 'document',
@@ -16,4 +14,3 @@ const Document = {
     filter: (media) => media.type === Media_1.MEDIA_TYPE_DOCUMENT
 };
 exports.default = Document;
-//# sourceMappingURL=index.js.map

package/lib/cjs/shared/Media/Image/EditButton.d.ts

@@ -1,3 +1,2 @@
 declare const _default: (props: any) => JSX.Element;
 export default _default;
-//# sourceMappingURL=EditButton.d.ts.map

package/lib/cjs/shared/Media/Image/EditButton.js

@@ -1,13 +1,10 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 const material_1 = require("@mui/material");
-const Icon_1 = __importDefault(require("@mui/material/Icon"));
+const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 exports.default = (props) => {
     return (react_1.default.createElement(material_1.IconButton, Object.assign({}, props, { "aria-label": "upload image" }),
         react_1.default.createElement(Icon_1.default, null, "image")));
 };
-//# sourceMappingURL=EditButton.js.map

package/lib/cjs/shared/Media/Image/EditComponent.d.ts

@@ -1,4 +1,3 @@
 import { EditMediaProps } from '../types';
 declare const _default: (props: EditMediaProps) => JSX.Element;
 export default _default;
-//# sourceMappingURL=EditComponent.d.ts.map

package/lib/cjs/shared/Media/Image/EditComponent.js

@@ -1,57 +1,25 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
 const upload_button_1 = require("@rpldy/upload-button");
-const react_1 = __importStar(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const material_1 = require("@mui/material");
-const Icon_1 = __importDefault(require("@mui/material/Icon"));
+const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const react_intl_1 = require("react-intl");
 const react_sortablejs_1 = require("react-sortablejs");
-const chunked_uploady_1 = __importDefault(require("@rpldy/chunked-uploady"));
+const chunked_uploady_1 = tslib_1.__importDefault(require("@rpldy/chunked-uploady"));
 const api_services_1 = require("@selfcommunity/api-services");
 const react_core_1 = require("@selfcommunity/react-core");
 const styles_1 = require("@mui/material/styles");
-const MediaChunkUploader_1 = __importDefault(require("../../MediaChunkUploader"));
+const MediaChunkUploader_1 = tslib_1.__importDefault(require("../../MediaChunkUploader"));
+const upload_drop_zone_1 = tslib_1.__importDefault(require("@rpldy/upload-drop-zone"));
 const PREFIX = 'SCMediaActionImage';
 const classes = {
+    root: `${PREFIX}-root`,
     preview: `${PREFIX}-preview`,
-    loadingText: `${PREFIX}-loadingText`
+    upload: `${PREFIX}-upload`,
+    dragOver: `${PREFIX}-dragOver`,
+    uploadBtn: `${PREFIX}-uploadBtn`
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
     name: PREFIX,
@@ -66,19 +34,8 @@ const Root = (0, styles_1.styled)(material_1.Box, {
         height: 200,
         position: 'relative'
     },
-    [`& .${PREFIX}-loadingText`]: {
-        top: 0,
-        left: 0,
-        bottom: 0,
-        right: 0,
-        position: 'absolute',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: 'rgba(0,0,0,.8)',
-        '& > *': {
-            color: theme.palette.text.primary
-        }
+    [`& .${classes.upload}`]: {
+        textAlign: 'center'
     }
 }));
 const UploadButton = (0, upload_button_1.asUploadButton)((0, react_1.forwardRef)((props, ref) => (react_1.default.createElement(material_1.Button, Object.assign({}, props, { "aria-label": "upload image", ref: ref, variant: "outlined", color: "inherit" }),
@@ -86,7 +43,7 @@ const UploadButton = (0, upload_button_1.asUploadButton)((0, react_1.forwardRef)
     " ",
     react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.media.image.add", defaultMessage: "ui.composer.media.image.add" })))));
 const SortableComponent = (0, react_1.forwardRef)((_a, ref) => {
-    var { children } = _a, props = __rest(_a, ["children"]);
+    var { children } = _a, props = tslib_1.__rest(_a, ["children"]);
     return (react_1.default.createElement(material_1.ImageList, Object.assign({ ref: ref, cols: 3 }, props), children));
 });
 exports.default = (props) => {
@@ -97,6 +54,10 @@ exports.default = (props) => {
     const [errors, setErrors] = (0, react_1.useState)({});
     // CONTEXT
     const scContext = (0, react_1.useContext)(react_core_1.SCContext);
+    // FILTER
+    const filterByMime = (0, react_1.useCallback)((file) => {
+        return file.type.startsWith('image/');
+    }, []);
     // HANDLERS
     const handleSuccess = (media) => {
         onSuccess(media);
@@ -117,27 +78,25 @@ exports.default = (props) => {
     /**
      * Renders root object
      */
-    return (react_1.default.createElement(Root, null,
-        react_1.default.createElement(material_1.Typography, { gutterBottom: true, component: "div" },
+    return (react_1.default.createElement(Root, { className: classes.root },
+        (medias.length > 0 || Object.values(uploading).length > 0) && (react_1.default.createElement(material_1.Typography, { gutterBottom: true, component: "div" },
             react_1.default.createElement(react_sortablejs_1.ReactSortable, { list: [...medias, ...Object.values(uploading)], setList: (newSort) => onSort(newSort.filter((s) => s.upload_id === undefined)), tag: SortableComponent },
                 medias.map((media) => (react_1.default.createElement(material_1.ImageListItem, { key: media.id },
                     react_1.default.createElement(material_1.Box, { className: classes.preview, sx: { backgroundImage: `url(${media.image})` } }),
-                    react_1.default.createElement(material_1.ImageListItemBar, { position: "top", actionIcon: react_1.default.createElement(material_1.IconButton, { onClick: onDelete(media.id), size: "small", sx: { color: 'rgba(255, 255, 255, 0.54)' } },
+                    react_1.default.createElement(material_1.ImageListItemBar, { actionIcon: react_1.default.createElement(material_1.IconButton, { onClick: onDelete(media.id), size: "small", sx: { color: 'rgba(255, 255, 255, 0.54)' } },
                             react_1.default.createElement(Icon_1.default, null, "delete")) })))),
                 Object.values(uploading).map((media) => (react_1.default.createElement(material_1.ImageListItem, { key: media.id, className: 'ignore-elements' },
                     react_1.default.createElement(material_1.Box, { className: classes.preview, sx: { backgroundImage: `url(${media.image})` } }),
-                    react_1.default.createElement(material_1.ImageListItemBar, { title: react_1.default.createElement(material_1.Typography, { align: "center" }, `${Math.round(media.completed)}%`), position: "top" })))))),
+                    react_1.default.createElement(material_1.ImageListItemBar, { title: react_1.default.createElement(material_1.Typography, { align: "center" }, `${Math.round(media.completed)}%`) }))))))),
         react_1.default.createElement(material_1.Box, null, Object.keys(errors).map((id) => (react_1.default.createElement(material_1.Fade, { in: true, key: id },
             react_1.default.createElement(material_1.Alert, { severity: "error", onClose: handleRemoveErrors(id) },
                 react_1.default.createElement(material_1.AlertTitle, null, errors[id].name),
                 errors[id].error))))),
-        react_1.default.createElement(material_1.Typography, { align: "center", gutterBottom: true },
-            react_1.default.createElement(chunked_uploady_1.default, { destination: {
-                    url: `${scContext.settings.portal}${api_services_1.Endpoints.ComposerChunkUploadMedia.url()}`,
-                    headers: { Authorization: `Bearer ${scContext.settings.session.authToken.accessToken}` },
-                    method: api_services_1.Endpoints.ComposerChunkUploadMedia.method
-                }, chunkSize: 204800, multiple: true, accept: "image/*" },
-                react_1.default.createElement(MediaChunkUploader_1.default, { onSuccess: handleSuccess, onProgress: handleProgress, onError: handleError }),
-                react_1.default.createElement(UploadButton, { inputFieldName: "image" })))));
+        react_1.default.createElement(chunked_uploady_1.default, { destination: {
+                url: `${scContext.settings.portal}${api_services_1.Endpoints.ComposerChunkUploadMedia.url()}`,
+                method: api_services_1.Endpoints.ComposerChunkUploadMedia.method
+            }, fileFilter: filterByMime, chunkSize: 204800, multiple: true, accept: "image/*;capture=camera" },
+            react_1.default.createElement(MediaChunkUploader_1.default, { onSuccess: handleSuccess, onProgress: handleProgress, onError: handleError }),
+            react_1.default.createElement(upload_drop_zone_1.default, { onDragOverClassName: classes.dragOver, inputFieldName: "image", className: classes.upload },
+                react_1.default.createElement(UploadButton, { inputFieldName: "image", className: classes.uploadBtn })))));
 };
-//# sourceMappingURL=EditComponent.js.map

package/lib/cjs/shared/Media/Image/PreviewComponent.d.ts

@@ -1,10 +1,20 @@
 import React from 'react';
 export interface ImagePreviewComponentProps {
+    /**
+     * Class name to apply to the root object
+     * @default empty string
+     */
+    className: string;
     /**
      * Medias objs
      * @default []
      */
     medias: Array<any>;
+    /**
+     * Maximum number of visible media
+     * @default 5
+     */
+    maxVisible?: number;
     /**
      * Gallery view
      * @default true
@@ -26,4 +36,3 @@ export interface ImagePreviewComponentProps {
 }
 declare const _default: (props: ImagePreviewComponentProps) => JSX.Element;
 export default _default;
-//# sourceMappingURL=PreviewComponent.d.ts.map