@selfcommunity/react-ui 0.7.0-alpha.32 → 0.7.0-alpha.320

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

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

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

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

package/lib/esm/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/esm/shared/MarkRead/MarkRead.js

@@ -4,15 +4,30 @@ import LazyLoad from 'react-lazyload';
 import { MIN_PRELOAD_OFFSET_VIEWPORT } from '../../constants/LazyLoad';
 const MarkRead = (props) => {
     // PROPS
-    const { endpoint, params = {}, data = null } = props;
-    useEffect(() => {
+    const { endpoint, params = {}, callback, data = null } = props;
+    /**
+     * Perform request
+     */
+    const performRequest = () => {
         http
             .request({
             url: endpoint.url(params),
             method: endpoint.method,
             data
+        })
+            .then((res) => {
+            callback && callback(res);
         })
             .catch(() => null);
+    };
+    useEffect(() => {
+        let _t;
+        if (endpoint) {
+            _t = setTimeout(performRequest);
+            return () => {
+                _t && clearTimeout(_t);
+            };
+        }
     }, []);
     return null;
 };
@@ -20,4 +35,3 @@ export default (props) => {
     return (React.createElement(LazyLoad, { once: true, offset: MIN_PRELOAD_OFFSET_VIEWPORT },
         React.createElement(MarkRead, Object.assign({}, props))));
 };
-//# sourceMappingURL=MarkRead.js.map

package/lib/esm/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/esm/shared/MarkRead/index.js

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

package/lib/esm/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/esm/shared/Media/Document/EditButton.js

@@ -5,4 +5,3 @@ export default (props) => {
     return (React.createElement(MUIIconButton, Object.assign({}, props, { "aria-label": "upload document" }),
         React.createElement(Icon, null, "picture_as_pdf")));
 };
-//# sourceMappingURL=EditButton.js.map

package/lib/esm/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/esm/shared/Media/Document/EditComponent.js

@@ -1,16 +1,6 @@
-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 { __rest } from "tslib";
 import { asUploadButton } from '@rpldy/upload-button';
-import React, { forwardRef, useContext, useState } from 'react';
+import React, { forwardRef, useCallback, useContext, useState } from 'react';
 import { Alert, AlertTitle, Box, Button as MuiButton, Fade, IconButton, ImageList, ImageListItem, ImageListItemBar, Typography } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import { ReactSortable } from 'react-sortablejs';
@@ -20,9 +10,14 @@ import { SCContext } from '@selfcommunity/react-core';
 import { styled } from '@mui/material/styles';
 import MediaChunkUploader from '../../MediaChunkUploader';
 import Icon from '@mui/material/Icon';
+import UploadDropZone from '@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 = styled(Box, {
     name: PREFIX,
@@ -34,6 +29,9 @@ const Root = styled(Box, {
         backgroundColor: theme.palette.background.default,
         height: 200,
         position: 'relative'
+    },
+    [`& .${classes.upload}`]: {
+        textAlign: 'center'
     }
 }));
 const UploadButton = asUploadButton(forwardRef((props, ref) => (React.createElement(MuiButton, Object.assign({}, props, { "aria-label": "upload document", ref: ref, variant: "outlined", color: "inherit" }),
@@ -52,6 +50,11 @@ export default (props) => {
     const [errors, setErrors] = useState({});
     // CONTEXT
     const scContext = useContext(SCContext);
+    // FILTER
+    const filterByMime = useCallback((file) => {
+        //filter out files larger than 5MB
+        return file.type === 'application/pdf';
+    }, []);
     // HANDLERS
     const handleSuccess = (media) => {
         onSuccess(media);
@@ -72,28 +75,27 @@ export default (props) => {
     /**
      * Renders root object
      */
-    return (React.createElement(Root, null,
-        React.createElement(Typography, { gutterBottom: true, component: "div" },
+    return (React.createElement(Root, { className: classes.root },
+        (medias.length > 0 || Object.values(uploading).length > 0) && (React.createElement(Typography, { gutterBottom: true, component: "div" },
             React.createElement(ReactSortable, { list: [...medias, ...Object.values(uploading)], setList: (newSort) => onSort(newSort.filter((s) => s.upload_id === undefined)), tag: SortableComponent },
                 medias.map((media) => (React.createElement(ImageListItem, { key: media.id },
                     React.createElement(Box, { className: classes.preview, sx: { backgroundImage: `url(${media.image})` } }),
-                    React.createElement(ImageListItemBar, { position: "top", actionIcon: React.createElement(IconButton, { onClick: onDelete(media.id), size: "small", sx: { color: 'rgba(255, 255, 255, 0.54)' } },
+                    React.createElement(ImageListItemBar, { title: media.title, actionIcon: React.createElement(IconButton, { onClick: onDelete(media.id), size: "small", sx: { color: 'rgba(255, 255, 255, 0.54)' } },
                             React.createElement(Icon, null, "delete")) })))),
                 Object.values(uploading).map((media) => (React.createElement(ImageListItem, { key: media.id, className: 'ignore-elements' },
                     React.createElement(Box, { className: classes.preview, sx: { backgroundImage: `url(${media.image})` } },
                         React.createElement(Icon, { sx: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%' } }, "picture_as_pdf")),
-                    React.createElement(ImageListItemBar, { title: React.createElement(Typography, { align: "center" }, `${Math.round(media.completed)}%`), position: "top" })))))),
+                    React.createElement(ImageListItemBar, { title: React.createElement(Typography, { align: "center" }, `${Math.round(media.completed)}%`) }))))))),
         React.createElement(Box, null, Object.keys(errors).map((id) => (React.createElement(Fade, { in: true, key: id },
             React.createElement(Alert, { severity: "error", onClose: handleRemoveErrors(id) },
                 React.createElement(AlertTitle, null, errors[id].name),
                 errors[id].error))))),
-        React.createElement(Typography, { align: "center", gutterBottom: true },
-            React.createElement(ChunkedUploady, { destination: {
-                    url: `${scContext.settings.portal}${Endpoints.ComposerChunkUploadMedia.url()}`,
-                    headers: { Authorization: `Bearer ${scContext.settings.session.authToken.accessToken}` },
-                    method: Endpoints.ComposerChunkUploadMedia.method
-                }, chunkSize: 204800, multiple: true, accept: "application/pdf" },
-                React.createElement(MediaChunkUploader, { onSuccess: handleSuccess, onProgress: handleProgress, onError: handleError }),
-                React.createElement(UploadButton, { inputFieldName: "document" })))));
+        React.createElement(ChunkedUploady, { destination: {
+                url: `${scContext.settings.portal}${Endpoints.ComposerChunkUploadMedia.url()}`,
+                headers: { Authorization: `Bearer ${scContext.settings.session.authToken.accessToken}` },
+                method: Endpoints.ComposerChunkUploadMedia.method
+            }, chunkSize: 204800, multiple: true, accept: "application/pdf", fileFilter: filterByMime },
+            React.createElement(MediaChunkUploader, { onSuccess: handleSuccess, onProgress: handleProgress, onError: handleError }),
+            React.createElement(UploadDropZone, { onDragOverClassName: classes.dragOver, inputFieldName: "document", className: classes.upload },
+                React.createElement(UploadButton, { inputFieldName: "document", className: classes.uploadBtn })))));
 };
-//# sourceMappingURL=EditComponent.js.map

package/lib/esm/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/esm/shared/Media/Document/PreviewComponent.js

@@ -1,19 +1,12 @@
-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 { __rest } from "tslib";
 import React from 'react';
 import { styled } from '@mui/material/styles';
 import ImagePreview from '../Image/PreviewComponent';
 import { MAX_GRID_IMAGES } from '../../../constants/Media';
 const PREFIX = 'SCPreviewMediaDocument';
+const classes = {
+    root: `${PREFIX}-root`
+};
 const Root = styled(ImagePreview, {
     name: PREFIX,
     slot: 'Root',
@@ -42,8 +35,7 @@ export default (props) => {
      * Renders document preview
      */
     if (medias.length > 0) {
-        return React.createElement(Root, Object.assign({ medias: medias }, rest, { onClick: handleClickOnPdf }));
+        return React.createElement(Root, Object.assign({ className: classes.root, medias: medias }, rest, { onClick: handleClickOnPdf }));
     }
     return null;
 };
-//# sourceMappingURL=PreviewComponent.js.map

package/lib/esm/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/esm/shared/Media/Document/index.js

@@ -11,4 +11,3 @@ const Document = {
     filter: (media) => media.type === MEDIA_TYPE_DOCUMENT
 };
 export default Document;
-//# sourceMappingURL=index.js.map

package/lib/esm/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/esm/shared/Media/Image/EditButton.js

@@ -5,4 +5,3 @@ export default (props) => {
     return (React.createElement(MUIIconButton, Object.assign({}, props, { "aria-label": "upload image" }),
         React.createElement(Icon, null, "image")));
 };
-//# sourceMappingURL=EditButton.js.map

package/lib/esm/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/esm/shared/Media/Image/EditComponent.js

@@ -1,16 +1,6 @@
-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 { __rest } from "tslib";
 import { asUploadButton } from '@rpldy/upload-button';
-import React, { forwardRef, useContext, useState } from 'react';
+import React, { forwardRef, useCallback, useContext, useState } from 'react';
 import { Alert, AlertTitle, Box, Button as MuiButton, Fade, IconButton, ImageList, ImageListItem, ImageListItemBar, Typography } from '@mui/material';
 import Icon from '@mui/material/Icon';
 import { FormattedMessage } from 'react-intl';
@@ -20,10 +10,14 @@ import { Endpoints } from '@selfcommunity/api-services';
 import { SCContext } from '@selfcommunity/react-core';
 import { styled } from '@mui/material/styles';
 import MediaChunkUploader from '../../MediaChunkUploader';
+import UploadDropZone from '@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 = styled(Box, {
     name: PREFIX,
@@ -38,19 +32,8 @@ const Root = styled(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 = asUploadButton(forwardRef((props, ref) => (React.createElement(MuiButton, Object.assign({}, props, { "aria-label": "upload image", ref: ref, variant: "outlined", color: "inherit" }),
@@ -69,6 +52,10 @@ export default (props) => {
     const [errors, setErrors] = useState({});
     // CONTEXT
     const scContext = useContext(SCContext);
+    // FILTER
+    const filterByMime = useCallback((file) => {
+        return file.type.startsWith('image/');
+    }, []);
     // HANDLERS
     const handleSuccess = (media) => {
         onSuccess(media);
@@ -89,27 +76,25 @@ export default (props) => {
     /**
      * Renders root object
      */
-    return (React.createElement(Root, null,
-        React.createElement(Typography, { gutterBottom: true, component: "div" },
+    return (React.createElement(Root, { className: classes.root },
+        (medias.length > 0 || Object.values(uploading).length > 0) && (React.createElement(Typography, { gutterBottom: true, component: "div" },
             React.createElement(ReactSortable, { list: [...medias, ...Object.values(uploading)], setList: (newSort) => onSort(newSort.filter((s) => s.upload_id === undefined)), tag: SortableComponent },
                 medias.map((media) => (React.createElement(ImageListItem, { key: media.id },
                     React.createElement(Box, { className: classes.preview, sx: { backgroundImage: `url(${media.image})` } }),
-                    React.createElement(ImageListItemBar, { position: "top", actionIcon: React.createElement(IconButton, { onClick: onDelete(media.id), size: "small", sx: { color: 'rgba(255, 255, 255, 0.54)' } },
+                    React.createElement(ImageListItemBar, { actionIcon: React.createElement(IconButton, { onClick: onDelete(media.id), size: "small", sx: { color: 'rgba(255, 255, 255, 0.54)' } },
                             React.createElement(Icon, null, "delete")) })))),
                 Object.values(uploading).map((media) => (React.createElement(ImageListItem, { key: media.id, className: 'ignore-elements' },
                     React.createElement(Box, { className: classes.preview, sx: { backgroundImage: `url(${media.image})` } }),
-                    React.createElement(ImageListItemBar, { title: React.createElement(Typography, { align: "center" }, `${Math.round(media.completed)}%`), position: "top" })))))),
+                    React.createElement(ImageListItemBar, { title: React.createElement(Typography, { align: "center" }, `${Math.round(media.completed)}%`) }))))))),
         React.createElement(Box, null, Object.keys(errors).map((id) => (React.createElement(Fade, { in: true, key: id },
             React.createElement(Alert, { severity: "error", onClose: handleRemoveErrors(id) },
                 React.createElement(AlertTitle, null, errors[id].name),
                 errors[id].error))))),
-        React.createElement(Typography, { align: "center", gutterBottom: true },
-            React.createElement(ChunkedUploady, { destination: {
-                    url: `${scContext.settings.portal}${Endpoints.ComposerChunkUploadMedia.url()}`,
-                    headers: { Authorization: `Bearer ${scContext.settings.session.authToken.accessToken}` },
-                    method: Endpoints.ComposerChunkUploadMedia.method
-                }, chunkSize: 204800, multiple: true, accept: "image/*" },
-                React.createElement(MediaChunkUploader, { onSuccess: handleSuccess, onProgress: handleProgress, onError: handleError }),
-                React.createElement(UploadButton, { inputFieldName: "image" })))));
+        React.createElement(ChunkedUploady, { destination: {
+                url: `${scContext.settings.portal}${Endpoints.ComposerChunkUploadMedia.url()}`,
+                method: Endpoints.ComposerChunkUploadMedia.method
+            }, fileFilter: filterByMime, chunkSize: 204800, multiple: true, accept: "image/*;capture=camera" },
+            React.createElement(MediaChunkUploader, { onSuccess: handleSuccess, onProgress: handleProgress, onError: handleError }),
+            React.createElement(UploadDropZone, { onDragOverClassName: classes.dragOver, inputFieldName: "image", className: classes.upload },
+                React.createElement(UploadButton, { inputFieldName: "image", className: classes.uploadBtn })))));
 };
-//# sourceMappingURL=EditComponent.js.map

package/lib/esm/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

package/lib/esm/shared/Media/Image/PreviewComponent.js

@@ -4,9 +4,12 @@ import PreviewImage from './PreviewImage';
 import { Grid, Typography, Box } from '@mui/material';
 import classNames from 'classnames';
 import Icon from '@mui/material/Icon';
+import { useInView } from 'react-intersection-observer';
 const PREFIX = 'SCPreviewMediaImage';
 const classes = {
+    root: `${PREFIX}-root`,
     background: `${PREFIX}-background`,
+    backgroundPortrait: `${PREFIX}-backgroundPortrait`,
     heightOne: `${PREFIX}-heightOne`,
     heightHalfOne: `${PREFIX}-heightHalfOne`,
     heightTwo: `${PREFIX}-heightTwo`,
@@ -28,7 +31,6 @@ const Root = styled(Box, {
     margin: 'auto',
     width: '100%',
     position: 'relative',
-    minHeight: 400,
     [theme.breakpoints.down('md')]: {
         minHeight: 170
     },
@@ -37,9 +39,14 @@ const Root = styled(Box, {
         backgroundPosition: 'center !important',
         backgroundRepeat: 'no-repeat !important'
     },
+    [`& .${classes.backgroundPortrait}`]: {
+        backgroundSize: 'contain !important',
+        backgroundPosition: 'center !important',
+        backgroundRepeat: 'no-repeat !important'
+    },
     [`& .${classes.heightOne}`]: {
         width: '100%',
-        paddingTop: '100%'
+        paddingTop: '99%'
     },
     [`& .${classes.heightHalfOne}`]: {
         paddingTop: '50%'
@@ -59,8 +66,7 @@ const Root = styled(Box, {
         right: 0,
         top: 0,
         left: 0,
-        bottom: 0,
-        borderRadius: 6
+        bottom: 0
     },
     [`& .${classes.coverText}`]: {
         right: 0,
@@ -83,21 +89,19 @@ const Root = styled(Box, {
     [`& .${classes.slide}`]: {
         height: 0,
         bottom: '100%',
-        transition: '.5s ease',
         overflow: 'hidden',
         fontSize: '3%',
         color: '#FFF'
     },
     [`& .${classes.border}`]: {
         position: 'relative',
-        border: '2px solid white',
-        borderRadius: 6,
+        border: '2px solid #FFF',
         '&:hover > div': {
             bottom: 0,
             height: 'auto'
         },
         '&:hover > div.animate-text': {
-            top: '62%'
+            top: '66%'
         }
     },
     [`& .${classes.gallery}`]: {
@@ -116,18 +120,19 @@ const Root = styled(Box, {
 }));
 export default (props) => {
     // PROPS
-    const { medias = [], gallery = true, adornment = null, onClick = null, onMediaClick = null } = props;
+    const { className = '', medias = [], maxVisible = 5, gallery = true, adornment = null, onClick = null, onMediaClick = null } = props;
     // STATE
     const [preview, setPreview] = useState(-1);
-    const [from, setFrom] = useState(0);
+    const { ref, inView } = useInView({ triggerOnce: false });
     // HANDLERS
     const handleClose = () => {
         setPreview(-1);
     };
     // UTILS
-    const getImageUrl = (image) => {
+    const getImageUrl = (image, original = false) => {
         if (typeof image === 'object') {
-            return image.image ? image.image : '/static/frontend_v2/images/image.svg';
+            const _image = image.image_thumbnail ? image.image_thumbnail.url : image.image ? image.image : '/static/frontend_v2/images/image.svg';
+            return original && image.image ? image.image : _image;
         }
         return image;
     };
@@ -165,20 +170,19 @@ export default (props) => {
                 o.title)))));
     };
     const renderOne = () => {
-        const overlay = medias.length > from && from == 1 ? renderCountOverlay(true) : renderOverlay(0);
-        return (React.createElement(Grid, { container: true },
-            React.createElement(Grid, { item: true, xs: 12, classes: {
-                    root: classNames(classes.border, classes.heightOne, classes.background, {
-                        [classes.gallery]: gallery,
-                        [classes.heightHalfOne]: medias.length > 1
-                    })
-                }, onClick: () => openPreviewImage(0), style: { background: `url(${getImageUrl(medias[0])})` } },
+        const overlay = medias.length > maxVisible && maxVisible == 1 ? renderCountOverlay(true) : renderOverlay(0);
+        const isGif = medias[0].image_mimetype ? medias[0].image_mimetype.includes('image/gif') : false;
+        const isLandscape = medias[0].image_height < medias[0].image_width;
+        return (React.createElement(Grid, { container: true, style: Object.assign({}, (medias[0].image_thumbnail && medias[0].image_thumbnail.color ? { backgroundColor: medias[0].image_thumbnail.color } : {})) },
+            React.createElement(Grid, { item: true, ref: ref, xs: 12, classes: {
+                    root: classNames(classes.border, classes.heightOne, Object.assign(Object.assign({}, (isGif || isLandscape ? { [classes.background]: true } : { [classes.backgroundPortrait]: true })), { [classes.gallery]: gallery, [classes.heightHalfOne]: medias.length > 1 }))
+                }, onClick: () => openPreviewImage(0), style: Object.assign({ background: `url(${getImageUrl(medias[0], inView && isGif)})` }, (isLandscape ? { paddingTop: `${(100 * medias[0].image_height) / medias[0].image_width}%` } : {})) },
                 overlay,
                 renderTitle(medias[0]))));
     };
     const renderTwo = () => {
-        const overlay = medias.length > from && [2, 3].includes(+from) ? renderCountOverlay(true) : renderOverlay(1);
-        const conditionalRender = [3, 4].includes(medias.length) || (medias.length > +from && [3, 4].includes(+from));
+        const overlay = medias.length > maxVisible && [2, 3].includes(+maxVisible) ? renderCountOverlay(true) : renderOverlay(1);
+        const conditionalRender = [3, 4].includes(medias.length) || (medias.length > +maxVisible && [3, 4].includes(+maxVisible));
         return (React.createElement(Grid, { container: true },
             React.createElement(Grid, { item: true, xs: 6, classes: { root: classNames(classes.border, classes.heightTwo, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 1 : 0), style: { background: `url(${getImageUrl(conditionalRender ? medias[1] : medias[0])})` } },
                 renderOverlay(conditionalRender ? 1 : 0),
@@ -188,8 +192,10 @@ export default (props) => {
                 renderTitle(medias[1]))));
     };
     const renderThree = () => {
-        const conditionalRender = medias.length == 4 || (medias.length > +from && +from == 4);
-        const overlay = !from || from > 5 || (medias.length > from && [4, 5].includes(+from)) ? renderCountOverlay(true) : renderOverlay(conditionalRender ? 3 : 4);
+        const conditionalRender = medias.length == 4 || (medias.length > +maxVisible && +maxVisible == 4);
+        const overlay = !maxVisible || maxVisible > 5 || (medias.length > maxVisible && [4, 5].includes(+maxVisible))
+            ? renderCountOverlay(true)
+            : renderOverlay(conditionalRender ? 3 : 4);
         return (React.createElement(Grid, { container: true },
             React.createElement(Grid, { item: true, xs: 4, md: 4, classes: { root: classNames(classes.border, classes.heightThree, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 1 : 2), style: { background: `url(${getImageUrl(conditionalRender ? medias[1] : medias[2])})` } },
                 renderOverlay(conditionalRender ? 1 : 2),
@@ -212,7 +218,7 @@ export default (props) => {
         ];
     };
     const renderCountOverlay = (more) => {
-        const extra = medias.length - (from && from > 5 ? 5 : from);
+        const extra = medias.length - (maxVisible && maxVisible > 5 ? 5 : maxVisible);
         return [
             more && React.createElement("div", { key: "count", className: classes.cover }),
             more && (React.createElement("div", { key: "count-sub", className: classes.coverText, style: { fontSize: '200%' } },
@@ -222,14 +228,13 @@ export default (props) => {
         ];
     };
     const imagesToShow = [...medias];
-    if (from && medias.length > from) {
-        imagesToShow.length = from;
+    if (maxVisible && medias.length > maxVisible) {
+        imagesToShow.length = maxVisible;
     }
-    return (React.createElement(React.Fragment, null, medias.length > 0 && (React.createElement(Root, null,
+    return (React.createElement(React.Fragment, null, medias.length > 0 && (React.createElement(Root, { className: classNames(classes.root, className) },
         adornment,
         [1, 3, 4].includes(imagesToShow.length) && renderOne(),
         imagesToShow.length >= 2 && imagesToShow.length != 4 && renderTwo(),
         imagesToShow.length >= 4 && renderThree(),
         preview !== -1 && React.createElement(PreviewImage, { onClose: handleClose, index: preview, images: medias })))));
 };
-//# sourceMappingURL=PreviewComponent.js.map

package/lib/esm/shared/Media/Image/PreviewImage/index.d.ts

@@ -14,10 +14,14 @@ export interface PreviewImageProps {
      * @default null
      */
     onClose: () => void;
+    /**
+     * Handles on index change
+     * @default null
+     */
+    onIndexChange?: (index: number) => void;
     /**
      * Any other properties
      */
     [p: string]: any;
 }
 export default function PreviewImage(props: PreviewImageProps): JSX.Element;
-//# sourceMappingURL=index.d.ts.map

package/lib/esm/shared/Media/Image/PreviewImage/index.js

@@ -1,18 +1,11 @@
-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, { useState } from 'react';
-import Lightbox from '../../../Lightbox';
+import { __rest } from "tslib";
+import React from 'react';
 import { styled } from '@mui/material/styles';
+import Lightbox from '../../../Lightbox';
 const PREFIX = 'SCPreviewImage';
+const classes = {
+    root: `${PREFIX}-root`
+};
 const Root = styled(Lightbox, {
     name: PREFIX,
     slot: 'Root',
@@ -20,22 +13,7 @@ const Root = styled(Lightbox, {
 })(() => ({}));
 export default function PreviewImage(props) {
     // PROPS
-    const { images = [], index = null, onClose = null } = props, rest = __rest(props, ["images", "index", "onClose"]);
-    // STATE
-    const [currentImages, setCurrentImages] = useState(images || []);
-    const [currentImageIndex, setCurrentImageIndex] = useState(index);
-    /**
-     * Handles Prev image
-     */
-    function onMovePrevRequest() {
-        setCurrentImageIndex((currentImageIndex + currentImages.length - 1) % currentImages.length);
-    }
-    /**
-     * Handles next image
-     */
-    function onMoveNextRequest() {
-        setCurrentImageIndex((currentImageIndex + 1) % currentImages.length);
-    }
+    const { images = [], index = 0, onClose, onIndexChange } = props, rest = __rest(props, ["images", "index", "onClose", "onIndexChange"]);
     /**
      * Gets image url
      * @param image
@@ -46,9 +24,15 @@ export default function PreviewImage(props) {
         }
         return image;
     }
+    /**
+     * Gets image key identifier
+     * @param image
+     */
+    function getImageId(image) {
+        return image.id;
+    }
     /**
      * Renders root object
      */
-    return (React.createElement(Root, Object.assign({}, rest, { mainSrc: getImageUrl(images[currentImageIndex]), nextSrc: getImageUrl(images[(currentImageIndex + 1) % currentImages.length]), prevSrc: getImageUrl(images[(currentImageIndex + currentImages.length - 1) % currentImages.length]), onCloseRequest: onClose, onMovePrevRequest: onMovePrevRequest, onMoveNextRequest: onMoveNextRequest })));
+    return (React.createElement(Root, Object.assign({}, rest, { className: classes.root, images: images.map((item, index) => ({ src: getImageUrl(item), key: index })), visible: index !== -1, onClose: onClose, index: index, onIndexChange: onIndexChange })));
 }
-//# sourceMappingURL=index.js.map