tycho-components 0.15.6 → 0.15.8

package/dist/AppDropzone/AppDropzoneBody.d.ts

@@ -9,6 +9,8 @@ export type AppDropzoneBodyProps = {
     keepName?: boolean;
     /** When false, the confirm button is hidden (e.g. when used inside modal with its own confirm) */
     showConfirmButton?: boolean;
+    /** When true, image preview is not rendered and filename message is shown instead */
+    disablePreview?: boolean;
 };
 export type AppDropzoneBodyRef = {
     upload: () => Promise<void>;

package/dist/AppDropzone/AppDropzoneBody.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useContext, useEffect, useImperativeHandle, useRef, useState, } from 'react';
 import Dropzone from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
@@ -8,7 +8,7 @@ import { toastLoading } from '../configs/store/actions';
 import { useMessageUtils } from '../configs/useMessageUtils';
 import UploadService from './UploadService';
 import './style.scss';
-function AppDropzoneBodyInner({ folder, onSuccess, onError, accept, onDrop, keepName, showConfirmButton = true, }, ref) {
+function AppDropzoneBodyInner({ folder, onSuccess, onError, accept, onDrop, keepName, showConfirmButton = true, disablePreview = false, }, ref) {
     const { t } = useTranslation('upload');
     const { state, dispatch } = useContext(CommonContext);
     const { dispatchError } = useMessageUtils();
@@ -24,13 +24,13 @@ function AppDropzoneBodyInner({ folder, onSuccess, onError, accept, onDrop, keep
             setPreview(undefined);
             return;
         }
-        if (isImageFile(file)) {
+        if (!disablePreview && isImageFile(file)) {
             const url = URL.createObjectURL(file);
             setPreview(url);
             return () => URL.revokeObjectURL(url);
         }
         setPreview(undefined);
-    }, [file]);
+    }, [file, disablePreview]);
     const upload = async () => {
         const currentFile = fileRef.current;
         if (!currentFile || state.toastLoading)
@@ -61,7 +61,7 @@ function AppDropzoneBodyInner({ folder, onSuccess, onError, accept, onDrop, keep
         setFile(files[0]);
         onDrop?.();
     };
-    return (_jsxs("div", { className: "dropzone-container", children: [!file && (_jsx(Dropzone, { onDrop: (acceptedFiles) => handleDrop(acceptedFiles), accept: accept, maxFiles: 1, children: ({ getRootProps, getInputProps }) => (_jsxs("div", { ...getRootProps(), className: "dropzone", children: [_jsx("input", { ...getInputProps() }), _jsx("span", { children: t('label.dropzone') })] })) })), file && preview && _jsx("img", { className: "preview", src: preview, alt: "" }), file && !preview && (_jsxs("div", { className: "uploaded-message", children: [_jsx("b", { children: t('label.uploaded.file') }), _jsx("span", { children: file.name }), _jsx("b", { children: t('label.confirm') })] })), file && showConfirmButton && (_jsx(Button, { onClick: upload, text: t('common:button.confirm') }))] }));
+    return (_jsxs("div", { className: "dropzone-container", children: [!file && (_jsx(Dropzone, { onDrop: (acceptedFiles) => handleDrop(acceptedFiles), accept: accept, maxFiles: 1, children: ({ getRootProps, getInputProps }) => (_jsxs("div", { ...getRootProps(), className: "dropzone", children: [_jsx("input", { ...getInputProps() }), _jsx("span", { children: t('label.dropzone') })] })) })), file && (_jsxs("div", { className: "uploaded-file", children: [preview && _jsx("img", { className: "preview", src: preview, alt: "" }), !preview && (_jsxs(_Fragment, { children: [_jsx("b", { children: t('label.uploaded.file') }), _jsx("span", { children: file.name })] })), showConfirmButton && (_jsx(Button, { onClick: upload, text: t('label.confirm'), size: "small", mode: "outlined" }))] }))] }));
 }
 const AppDropzoneBody = forwardRef(AppDropzoneBodyInner);
 export default AppDropzoneBody;

package/dist/AppDropzone/style.scss

@@ -22,11 +22,12 @@
     height: 400px;
   }
 
-  .uploaded-message {
+  .uploaded-file {
     display: flex;
     flex-direction: column;
+    align-items: center;
     width: 100%;
-    gap: 16px;
+    gap: 24px;
     text-align: center;
     border: 1px solid var(--border-subtle-3);
     border-radius: var(--radius-100);

package/dist/configs/localization/UploadTexts.js

@@ -2,21 +2,21 @@ export const UploadTexts = {
     en: {
         'label.dropzone': 'Drag and drop or click to upload a file',
         'label.uploaded.file': 'You are uploading the following file',
-        'label.confirm': 'Press confirm to continue',
+        'label.confirm': 'Confirm to upload the file',
         'modal.title': 'Upload a file',
         'error.uploading.image': 'An error occurred while uploading a file. Contact the administrator.',
     },
     'pt-BR': {
         'label.dropzone': 'Arraste e solte ou clique para enviar um arquivo.',
         'label.uploaded.file': 'Você está enviando o seguinte arquivo',
-        'label.confirm': 'Pressione confirmar para continuar',
+        'label.confirm': 'Confirme para enviar o arquivo',
         'modal.title': 'Upload de arquivo',
         'error.uploading.image': 'Ocorreu um erro ao enviar o arquivo. Entre em contato com o administrador.',
     },
     it: {
         'label.dropzone': 'Trascina e rilascia o clicca per caricare un file',
         'label.uploaded.file': 'Stai caricando il seguente file',
-        'label.confirm': 'Premi conferma per continuare',
+        'label.confirm': 'Conferma per caricare il file',
         'modal.title': 'Carica un file',
         'error.uploading.image': "Si è verificato un errore durante il caricamento del file. Contatta l'amministratore.",
     },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.15.6",
+  "version": "0.15.8",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {