@selfcommunity/react-ui 0.8.1-alpha.3 → 0.9.0-alpha.0

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

@@ -0,0 +1,33 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CircularProgress } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useCallback, useState } from 'react';
+import { PhotoSlider } from 'react-photo-view';
+import { PREFIX } from './constants';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = styled(PhotoSlider, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
+const BaseLightbox = (props) => {
+    const { images = [], index, onClose, visible = true, afterClose, onIndexChange, toolbarRender, toolbarButtons } = props, rest = __rest(props, ["images", "index", "onClose", "visible", "afterClose", "onIndexChange", "toolbarRender", "toolbarButtons"]);
+    // STATE
+    const [currentImageIndex, setCurrentImageIndex] = useState(index || 0);
+    const handleIndexChange = useCallback((index) => {
+        onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(index);
+        setCurrentImageIndex(index);
+    }, [onIndexChange, setCurrentImageIndex]);
+    /**
+     * Renders root object
+     */
+    return (_jsx(Root, Object.assign({}, rest, { className: classes.root, images: images, visible: visible && index !== -1, index: currentImageIndex, onIndexChange: handleIndexChange, onClose: onClose, afterClose: afterClose, loadingElement: _jsx(CircularProgress, { color: 'primary' }), toolbarRender: toolbarRender
+            ? toolbarRender
+            : () => {
+                return toolbarButtons;
+            } })));
+};
+export default BaseLightbox;

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

@@ -1,19 +1,33 @@
-import React from 'react';
-import { DataType } from '../../types/lightbox';
-import { PhotoProviderBase } from 'react-photo-view/dist/types';
-/**
- * Overrides/extends the styles applied to the component.
- * @default null
- */
-export interface ReactImageLightboxProps extends PhotoProviderBase {
-    className?: string;
-    images: DataType[];
-    index?: number;
+import { SCMediaType } from '@selfcommunity/types/src/types';
+export interface LightboxProps {
+    /**
+     * Images objs
+     * @default []
+     */
+    medias: SCMediaType[];
+    /**
+     * Obj index
+     * @default 0
+     */
+    index: number;
+    /**
+     * Toolbar
+     * @default undefined
+     */
+    toolbarButtons?: JSX.Element;
+    /**
+     * Handles on close
+     * @default () => void
+     */
+    onClose: () => void;
+    /**
+     * Handles on index change
+     * @default undefined
+     */
     onIndexChange?: (index: number) => void;
-    visible?: boolean;
-    onClose?: (evt?: React.MouseEvent | React.TouchEvent) => void;
-    afterClose?: () => void;
-    toolbarButtons?: React.ReactNode[];
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
 }
-declare const ReactImageLightbox: (props: ReactImageLightboxProps) => JSX.Element;
-export default ReactImageLightbox;
+export default function Lightbox(props: LightboxProps): JSX.Element;

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

@@ -1,28 +1,24 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
-import { PhotoSlider } from 'react-photo-view';
-import { CircularProgress } from '@mui/material';
-const PREFIX = 'SCLightbox';
+import { useCallback } from 'react';
+import BaseLightbox from './BaseLightbox';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${PREFIX}-lightbox-root`
 };
-const Root = styled(PhotoSlider, {
+const Root = styled(BaseLightbox, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    slot: 'LightboxRoot'
 })(() => ({}));
-const ReactImageLightbox = (props) => {
-    const { images = [], index, onClose, visible = true, afterClose, onIndexChange, toolbarRender, toolbarButtons = [] } = props, rest = __rest(props, ["images", "index", "onClose", "visible", "afterClose", "onIndexChange", "toolbarRender", "toolbarButtons"]);
-    // STATE
-    const [currentImages] = useState(images || []);
-    const [currentImageIndex, setCurrentImageIndex] = useState(index || 0);
+export default function Lightbox(props) {
+    // PROPS
+    const { medias = [], index = 0, toolbarButtons, onClose, onIndexChange } = props, rest = __rest(props, ["medias", "index", "toolbarButtons", "onClose", "onIndexChange"]);
+    const mediaToDataTypeMap = useCallback((media, index) => {
+        return { src: media.image, width: media.image_width, height: media.image_height, key: index };
+    }, []);
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({}, rest, { className: classes.root, images: currentImages, visible: visible && index !== -1, index: currentImageIndex, onIndexChange: setCurrentImageIndex, onClose: onClose, afterClose: afterClose, loadingElement: _jsx(CircularProgress, { color: 'primary' }), toolbarRender: toolbarRender ? toolbarRender : () => {
-            return _jsx(_Fragment, { children: toolbarButtons });
-        } })));
-};
-export default ReactImageLightbox;
+    return (_jsx(Root, Object.assign({}, rest, { className: classes.root, images: medias.map(mediaToDataTypeMap), visible: index !== -1, onClose: onClose, index: index, onIndexChange: onIndexChange, toolbarButtons: toolbarButtons })));
+}

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

@@ -0,0 +1 @@
+export declare const PREFIX = "SCLightbox";

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

@@ -0,0 +1 @@
+export const PREFIX = 'SCLightbox';

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

@@ -1,2 +1,4 @@
-import Lightbox from './Lightbox';
-export default Lightbox;
+import BaseLightbox, { BaseLightboxProps } from './BaseLightbox';
+import Lightbox, { LightboxProps } from './Lightbox';
+export default BaseLightbox;
+export { BaseLightboxProps, Lightbox, LightboxProps };

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

@@ -1,2 +1,4 @@
+import BaseLightbox from './BaseLightbox';
 import Lightbox from './Lightbox';
-export default Lightbox;
+export default BaseLightbox;
+export { Lightbox };

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

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useMemo, useState } from 'react';
+import { Box, Grid, IconButton, Typography } from '@mui/material';
+import Icon from '@mui/material/Icon';
 import { styled } from '@mui/material/styles';
-import Lightbox from './Lightbox';
-import { Box, Grid, Typography } from '@mui/material';
+import { Link } from '@selfcommunity/react-core';
 import classNames from 'classnames';
-import Icon from '@mui/material/Icon';
+import { MEDIA_TYPE_DOCUMENT } from '../../../constants/Media';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
+import { Lightbox } from '../../Lightbox';
 import { PREFIX } from './constants';
 import filter from './filter';
 const classes = {
@@ -27,18 +29,20 @@ const classes = {
 const Root = styled(Box, {
     name: PREFIX,
     slot: 'DisplayRoot'
-})(({ theme }) => ({}));
+})(({}) => ({}));
 export default (props) => {
     // PROPS
     const { className = '', medias = [], maxVisible = 5, gallery = true, onMediaClick = null } = props;
     // STATE
     const [preview, setPreview] = useState(-1);
+    const [toolbarButtons, setToolbarButtons] = useState(undefined);
     const { ref, inView } = useInView({ triggerOnce: false });
     // MEMO
     const _medias = useMemo(() => medias.filter(filter), [medias]);
     // HANDLERS
     const handleClose = () => {
         setPreview(-1);
+        setToolbarButtons(undefined);
     };
     // UTILS
     const getImageUrl = (image, original = false) => {
@@ -110,6 +114,19 @@ export default (props) => {
             more && (_jsx("div", Object.assign({ className: classes.coverText, style: { fontSize: '200%' } }, { children: _jsxs("p", { children: ["+", extra] }) }), "count-sub"))
         ];
     };
+    const handleIndexChange = useCallback((index) => {
+        if (_medias[index].type === MEDIA_TYPE_DOCUMENT) {
+            setToolbarButtons(_jsx(IconButton, Object.assign({ component: Link, to: medias[index].url, target: "_blank", color: "inherit" }, { children: _jsx(Icon, { children: "download" }) })));
+        }
+        else {
+            setToolbarButtons(undefined);
+        }
+    }, [_medias, setToolbarButtons]);
+    useEffect(() => {
+        if (preview !== -1) {
+            handleIndexChange(preview);
+        }
+    }, [preview]);
     const imagesToShow = [..._medias];
     if (maxVisible && _medias.length > maxVisible) {
         imagesToShow.length = maxVisible;
@@ -117,5 +134,5 @@ export default (props) => {
     if (_medias.length === 0) {
         return null;
     }
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.displayRoot, className) }, { children: [[1, 3, 4].includes(imagesToShow.length) && renderOne(), imagesToShow.length >= 2 && imagesToShow.length != 4 && renderTwo(), imagesToShow.length >= 4 && renderThree(), preview !== -1 && _jsx(Lightbox, { onClose: handleClose, index: preview, medias: _medias })] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.displayRoot, className) }, { children: [[1, 3, 4].includes(imagesToShow.length) && renderOne(), imagesToShow.length >= 2 && imagesToShow.length != 4 && renderTwo(), imagesToShow.length >= 4 && renderThree(), preview !== -1 && (_jsx(Lightbox, { onClose: handleClose, index: preview, medias: _medias, toolbarButtons: toolbarButtons, onIndexChange: handleIndexChange }))] })));
 };

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

@@ -1,14 +1,14 @@
 import { __awaiter } from "tslib";
-import { useChunkFinishListener, useChunkStartListener, useItemErrorListener, useItemFinishListener, useRequestPreSend, } from '@rpldy/chunked-uploady';
+import { useChunkFinishListener, useChunkStartListener, useItemErrorListener, useItemFinishListener, useRequestPreSend } from '@rpldy/chunked-uploady';
+import { useItemProgressListener, useItemStartListener } from '@rpldy/uploady';
 import { Endpoints, http } from '@selfcommunity/api-services';
 import { useSCContext, useSCUser } from '@selfcommunity/react-core';
-import { useItemProgressListener, useItemStartListener } from '@rpldy/uploady';
-import { md5 } from '../../utils/hash';
+import { Logger, resizeImage } from '@selfcommunity/utils';
 import React, { useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
-import messages from '../../messages/common';
-import { Logger, resizeImage } from '@selfcommunity/utils';
 import { SCOPE_SC_UI } from '../../constants/Errors';
+import messages from '../../messages/common';
+import { md5 } from '../../utils/hash';
 export default (props) => {
     // PROPS
     const { type = null, onSuccess = null, onProgress = null, onError = null } = props;
@@ -53,7 +53,7 @@ export default (props) => {
             // @ts-ignore
             reader.readAsDataURL(item.file);
         }
-        chunkStateRef.current.setChunk({ id: item.id, [`upload_id`]: null, completed: 0, name: item.file.name });
+        chunkStateRef.current.setChunk({ id: item.id, ['upload_id']: null, completed: 0, name: item.file.name });
     });
     useItemProgressListener((item) => {
         chunkStateRef.current.setChunk({ id: item.id, completed: item.completed });
@@ -100,7 +100,7 @@ export default (props) => {
             sendOptions: {
                 paramName: 'image',
                 method: Endpoints.ComposerChunkUploadMedia.method,
-                formatServerResponse: (response, status, headers) => __awaiter(void 0, void 0, void 0, function* () {
+                formatServerResponse: (response, status, _headers) => __awaiter(void 0, void 0, void 0, function* () {
                     if (status === 401) {
                         yield refreshSession();
                     }
@@ -109,7 +109,7 @@ export default (props) => {
             }
         };
         if (chunkStateRef.current.chunks[data.item.id].upload_id) {
-            res.sendOptions.params = { [`upload_id`]: chunkStateRef.current.chunks[data.item.id].upload_id };
+            res.sendOptions.params = { ['upload_id']: chunkStateRef.current.chunks[data.item.id].upload_id };
         }
         else {
             chunkStateRef.current.setChunk({ id: data.item.id, type: type || data.sendOptions.paramName });
@@ -118,12 +118,14 @@ export default (props) => {
     });
     useChunkFinishListener((data) => __awaiter(void 0, void 0, void 0, function* () {
         const _data = yield data.uploadData.response.data;
-        chunkStateRef.current.setChunk({ id: data.item.id, [`upload_id`]: _data.upload_id });
+        chunkStateRef.current.setChunk({ id: data.item.id, ['upload_id']: _data.upload_id });
     }));
     useRequestPreSend(({ items, options }) => __awaiter(void 0, void 0, void 0, function* () {
-        const destination = ['JWT', 'OAuth'].includes(scContext.settings.session.type) ? {
-            headers: { Authorization: `Bearer ${scContext.settings.session.authToken.accessToken}` }
-        } : {};
+        const destination = ['JWT', 'OAuth'].includes(scContext.settings.session.type)
+            ? {
+                headers: { Authorization: `Bearer ${scContext.settings.session.authToken.accessToken}` }
+            }
+            : {};
         if (items.length == 0) {
             return Promise.resolve({ options, destination });
         }

package/lib/esm/utils/hash.d.ts

@@ -1 +1,2 @@
-export declare const md5: (file: any, chunkSize: any, callback: any) => void;
+import { BatchFile } from '@rpldy/shared';
+export declare const md5: (file: BatchFile['file'], chunkSize: number, callback: (arg: any) => void) => void;