@selfcommunity/react-ui 0.11.0-mui7.24 → 0.11.0-mui7.27

package/lib/esm/shared/Media/File/DocComponent.d.ts

@@ -1,10 +1,12 @@
 import { SCMediaType } from '@selfcommunity/types';
+import { HTMLAttributes } from 'react';
 interface DocComponentProps {
     document: SCMediaType;
     index?: number;
     onDelete?: (id: number) => void;
     handleDownload?: (id: number) => void;
     onMediaClick?: (media: SCMediaType) => void;
+    className?: HTMLAttributes<HTMLDivElement>['className'];
 }
 export default function DocComponent(props: DocComponentProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -4,6 +4,7 @@ import { PREFIX } from './constants';
 import { Link } from '@selfcommunity/react-core';
 import { SCMimeTypes } from '@selfcommunity/types';
 import { useCallback } from 'react';
+import classNames from 'classnames';
 import txt from '../../../assets/composer/txt';
 import pdf from '../../../assets/composer/pdf';
 import doc from '../../../assets/composer/doc';
@@ -33,7 +34,7 @@ function formatBytes(bytes, decimals = 2) {
     return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 }
 export default function DocComponent(props) {
-    const { document, index, onDelete, handleDownload, onMediaClick } = props;
+    const { document, index, onDelete, handleDownload, onMediaClick, className } = props;
     const getImage = useCallback(() => {
         switch (document.mimetype) {
             case SCMimeTypes.PLAIN_TEXT:
@@ -68,5 +69,5 @@ export default function DocComponent(props) {
                 return fallback;
         }
     }, [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" }) }))] }))] })))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.docRoot, className) }, { 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/PreviewComponent.js

@@ -12,7 +12,8 @@ const classes = {
     media: `${PREFIX}-media`,
     delete: `${PREFIX}-delete`,
     title: `${PREFIX}-title`,
-    docsWrapper: `${PREFIX}-docs-wrapper`
+    docsWrapper: `${PREFIX}-docs-wrapper`,
+    doc: `${PREFIX}-doc`
 };
 const Root = styled(Box, {
     name: PREFIX,
@@ -41,7 +42,7 @@ const PreviewComponent = forwardRef((props, ref) => {
     const handleDelete = useCallback((id) => onChange && onChange(value.filter((media) => media.id !== id)), [onChange, value]);
     // RENDER
     const imageElements = useMemo(() => images.map((media) => (_jsxs(Box, Object.assign({ className: classes.media, sx: { backgroundImage: `url(${(media === null || media === void 0 ? void 0 : media.image_thumbnail) ? media.image_thumbnail.url : media.image})` } }, { children: [_jsx(IconButton, Object.assign({ className: classes.delete, onClick: () => handleDelete(media.id), size: "small" }, { children: _jsx(Icon, { children: "delete" }) })), media.title && _jsx(Typography, Object.assign({ className: classes.title }, { children: media.title }))] }), media.id))), [images]);
-    const docElements = useMemo(() => docs.map((doc) => _jsx(DocComponent, { document: doc, onDelete: handleDelete }, doc.id)), [docs]);
-    return (_jsx(Root, Object.assign({ ref: ref, className: classNames(className, classes.previewRoot) }, rest, { children: mediasLength > 0 && (_jsxs(_Fragment, { children: [_jsx(ReactSortable, Object.assign({ list: images, setList: handleSort, scroll: true, animation: 200, scrollSensitivity: 50 }, { children: imageElements })), _jsx(ReactSortable, Object.assign({ list: docs, setList: handleSort, animation: 200, direction: "vertical", className: classes.docsWrapper }, { children: docElements }))] })) })));
+    const docElements = useMemo(() => docs.map((doc) => _jsx(DocComponent, { document: doc, onDelete: handleDelete, className: classes.doc }, doc.id)), [docs]);
+    return (_jsx(Root, Object.assign({ ref: ref, className: classNames(classes.previewRoot, className) }, rest, { children: mediasLength > 0 && (_jsxs(_Fragment, { children: [_jsx(ReactSortable, Object.assign({ list: images, setList: handleSort, scroll: true, animation: 200, scrollSensitivity: 50 }, { children: imageElements })), _jsx(ReactSortable, Object.assign({ list: docs, setList: handleSort, animation: 200, direction: "vertical", className: classes.docsWrapper }, { children: docElements }))] })) })));
 });
 export default PreviewComponent;