@macive/ui 0.0.23 → 0.0.25

package/dist/src/components/Upload/components/FileViewer/FileViewer.js

@@ -12,6 +12,7 @@ const Image_1 = require("../../../Image");
 const FileViewer_classnames_1 = __importDefault(require("./FileViewer.classnames"));
 const VideoPlayer_1 = require("./VideoPlayer");
 const FileViewer = (props) => {
+    var _a, _b;
     const [imageSource, setImageSource] = (0, react_1.useState)();
     const { file, disabled, previewable, legacyImage, unAcceptedType, className } = props;
     const { type: fileType } = file || {};
@@ -22,19 +23,53 @@ const FileViewer = (props) => {
         return (0, jsx_runtime_1.jsx)(VideoPlayer_1.VideoPlayer, { file: file, disabled: unAcceptedType });
     }
     if (fileType === 'archive') {
-        return ((0, jsx_runtime_1.jsxs)(FileTypeDisplay, { disabled: unAcceptedType, previewable: previewable, file: file, children: ["zip", (0, jsx_runtime_1.jsx)(FileTypeDisplayTitle, { file: file })] }));
+        return ((0, jsx_runtime_1.jsxs)(FileTypeDisplay, { disabled: unAcceptedType, previewable: previewable, file: file, children: [(_a = file === null || file === void 0 ? void 0 : file.extension) !== null && _a !== void 0 ? _a : 'zip', (0, jsx_runtime_1.jsx)(FileTypeDisplayTitle, { file: file })] }));
     }
     if (fileType === 'document') {
-        return ((0, jsx_runtime_1.jsxs)(FileTypeDisplay, { disabled: unAcceptedType, previewable: previewable, file: file, children: ["pdf", (0, jsx_runtime_1.jsx)(FileTypeDisplayTitle, { file: file })] }));
+        return ((0, jsx_runtime_1.jsxs)(FileTypeDisplay, { disabled: unAcceptedType, previewable: previewable, file: file, children: [(_b = file === null || file === void 0 ? void 0 : file.extension) !== null && _b !== void 0 ? _b : 'pdf', (0, jsx_runtime_1.jsx)(FileTypeDisplayTitle, { file: file })] }));
     }
     return ((0, jsx_runtime_1.jsx)(FileTypeDisplay, { disabled: unAcceptedType, previewable: previewable, file: file, children: "media" }));
 };
 exports.FileViewer = FileViewer;
 const FileTypeDisplayTitle = ({ file, children }) => {
-    function truncateString(str = 'file') {
-        return str.length > 9 ? str.substring(0, 1) + '...' + str.substring(str.length - 10) : str;
-    }
-    return ((0, jsx_runtime_1.jsx)("div", { className: FileViewer_classnames_1.default['file-type-title'], children: children || truncateString(file === null || file === void 0 ? void 0 : file.fileName) }));
+    // Extract file name from URL or use provided fileName
+    const getFileName = (file) => {
+        if (!file)
+            return 'file';
+        // Use fileName if provided
+        if (file.fileName)
+            return file.fileName;
+        // Extract file name from src URL
+        if (file.src) {
+            try {
+                const url = new URL(file.src);
+                const pathSegments = url.pathname.split('/');
+                const extractedName = pathSegments[pathSegments.length - 1];
+                return extractedName || 'file';
+            }
+            catch {
+                return 'file';
+            }
+        }
+        return 'file';
+    };
+    const truncateString = (str) => {
+        // If string is empty or not a string, return 'file'
+        if (!str || typeof str !== 'string')
+            return 'file';
+        // Adjust truncation to show more meaningful part of the file name
+        const maxLength = 20; // Increased to show more characters
+        if (str.length <= maxLength)
+            return str;
+        const extension = str.includes('.') ? str.split('.').pop() : '';
+        const nameWithoutExt = str.replace(`.${extension}`, '');
+        const truncatePoint = maxLength - (extension ? extension.length + 1 : 0) - 3; // Account for '...' and extension
+        if (truncatePoint <= 0)
+            return str; // Avoid negative or zero truncation point
+        return `${nameWithoutExt.substring(0, truncatePoint)}...${extension ? `.${extension}` : ''}`;
+    };
+    const displayName = truncateString(getFileName(file));
+    return (0, jsx_runtime_1.jsx)("div", { className: FileViewer_classnames_1.default['file-type-title'], children: children !== null && children !== void 0 ? children : displayName });
 };
 const FileTypeDisplay = ({ disabled, file, children, className }) => {
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(FileViewer_classnames_1.default['file-type-display'], disabled && FileViewer_classnames_1.default.disabled, className), children: children || `${file === null || file === void 0 ? void 0 : file.extension} File` }));

package/dist/src/components/Upload/components/Modal/UploadModalFileItem.js

@@ -36,7 +36,7 @@ const UploadModalFileItem = ({ selectedAttachments = [], file, onClick, allowedF
             setIcon((0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaError }));
         }
     };
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { borderRadius: '3', borderWidth: '1', borderBlockEndWidth: '5', borderColor: 'border', children: (0, jsx_runtime_1.jsx)("div", { className: UploadModalFileItem_classnames_1.default['upload-modal-file-item'], children: (0, jsx_runtime_1.jsxs)("div", { className: UploadModalFileItem_classnames_1.default['file-item-container'], onClick: !disabled ? onClick : undefined, children: [(0, jsx_runtime_1.jsx)("div", { className: UploadModalFileItem_classnames_1.default.fileActionsCard, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { borderRadius: '2', padding: '1', children: (0, jsx_runtime_1.jsx)(HorizontalStack_1.HorizontalStack, { gap: '1', align: 'space-between', blockAlign: 'center', children: (0, jsx_runtime_1.jsxs)("div", { className: UploadModalFileItem_classnames_1.default['file-actions'], children: [(0, jsx_runtime_1.jsxs)(HorizontalStack_1.HorizontalStack, { gap: '1', blockAlign: 'center', wrap: false, children: [(0, jsx_runtime_1.jsx)(ActionButton, { onClick: () => handleCopyClick(file.url), icon: icon }), (0, jsx_runtime_1.jsx)(ActionButton, { onClick: () => window.open(file.url, '_blank'), icon: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaEyes }) })] }), (0, jsx_runtime_1.jsx)(FileCheckbox, { checked: isSelected, disabled: disabled })] }) }) }) }), (0, jsx_runtime_1.jsx)(FileViewer_1.FileViewer, { file: file, disabled: disabled, unAcceptedType: unAcceptedType }), (0, jsx_runtime_1.jsx)(CheckedOverlay, { checked: isSelected, checkedNumber: checkedNumber, maxAttachments: maxAttachments })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { borderRadius: '3', borderWidth: '1', borderBlockEndWidth: '5', borderColor: 'border', children: (0, jsx_runtime_1.jsx)("div", { className: UploadModalFileItem_classnames_1.default['upload-modal-file-item'], style: { height: '100%' }, children: (0, jsx_runtime_1.jsxs)("div", { className: UploadModalFileItem_classnames_1.default['file-item-container'], style: { height: '100%' }, onClick: !disabled ? onClick : undefined, children: [(0, jsx_runtime_1.jsx)("div", { className: UploadModalFileItem_classnames_1.default.fileActionsCard, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { borderRadius: '2', padding: '1', children: (0, jsx_runtime_1.jsx)(HorizontalStack_1.HorizontalStack, { gap: '1', align: 'space-between', blockAlign: 'center', children: (0, jsx_runtime_1.jsxs)("div", { className: UploadModalFileItem_classnames_1.default['file-actions'], children: [(0, jsx_runtime_1.jsxs)(HorizontalStack_1.HorizontalStack, { gap: '1', blockAlign: 'center', wrap: false, children: [(0, jsx_runtime_1.jsx)(ActionButton, { onClick: () => handleCopyClick(file.url), icon: icon }), (0, jsx_runtime_1.jsx)(ActionButton, { onClick: () => window.open(file.url, '_blank'), icon: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaEyes }) })] }), (0, jsx_runtime_1.jsx)(FileCheckbox, { checked: isSelected, disabled: disabled })] }) }) }) }), (0, jsx_runtime_1.jsx)(FileViewer_1.FileViewer, { file: file, disabled: disabled, unAcceptedType: unAcceptedType }), (0, jsx_runtime_1.jsx)(CheckedOverlay, { checked: isSelected, checkedNumber: checkedNumber, maxAttachments: maxAttachments })] }) }) }));
 };
 const ActionButton = ({ onClick, icon }) => ((0, jsx_runtime_1.jsx)(Button_1.Button, { plain: true, size: 'slim', monochrome: true, icon: icon, onClick: onClick }));
 const FileCheckbox = ({ checked, disabled }) => ((0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { label: 'checkbox', labelHidden: true, checked: checked, readOnly: true, disabled: disabled }));