tycho-components 0.12.0 → 0.12.2

package/dist/AppDropzone/AppDropzone.d.ts

@@ -1,4 +1,4 @@
-import { UploadedFile } from './UploadedFile';
+import type { UploadedFile } from './UploadedFile';
 type Props = {
     folder: string;
     onClose: () => void;

package/dist/AppDropzone/AppDropzone.js

@@ -1,36 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useState } from 'react';
+import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import AppModal from '../AppModal';
-import CommonContext from '../configs/CommonContext';
-import { toastLoading } from '../configs/store/actions';
-import { useMessageUtils } from '../configs/useMessageUtils';
 import AppDropzoneBody from './AppDropzoneBody';
-import UploadService from './UploadService';
 export default function AppDropzone({ folder, onClose, onSuccess, onError, accept, onDrop, keepName, title, alternativeButton, }) {
     const { t } = useTranslation('upload');
-    const { state, dispatch } = useContext(CommonContext);
-    const { dispatchError } = useMessageUtils();
-    const [file, setFile] = useState();
-    const upload = async () => {
-        if (!file || state.toastLoading)
-            return;
-        dispatch(toastLoading(true));
-        const data = new FormData();
-        data.append('file', file);
-        data.append('folder', folder);
-        keepName && data.append('keepOriginalName', 'true');
-        UploadService.execute(data)
-            .then((r) => {
-            onSuccess(r.data);
-        })
-            .catch((err) => {
-            dispatchError({ err: 'error.uploading.image', t, key: 'upload' });
-            onError && onError(err);
-        })
-            .finally(() => {
-            dispatch(toastLoading(false));
-        });
+    const bodyRef = useRef(null);
+    const handleConfirm = () => {
+        bodyRef.current?.upload();
     };
-    return (_jsx(AppModal, { title: title || t('modal.title'), className: "modal-upload", close: onClose, confirm: upload, alternativeButton: alternativeButton, children: _jsx(AppDropzoneBody, { accept: accept, file: file, onFileChange: setFile, onDrop: onDrop }) }));
+    return (_jsx(AppModal, { title: title || t('modal.title'), className: "modal-upload", close: onClose, confirm: handleConfirm, alternativeButton: alternativeButton, children: _jsx(AppDropzoneBody, { ref: bodyRef, folder: folder, onSuccess: onSuccess, onError: onError, accept: accept, onDrop: onDrop, keepName: keepName, showConfirmButton: false }) }));
 }

package/dist/AppDropzone/AppDropzoneBody.d.ts

@@ -1,9 +1,17 @@
+import { UploadedFile } from './UploadedFile';
 import './style.scss';
-type Props = {
+export type AppDropzoneBodyProps = {
+    folder: string;
+    onSuccess: (response: UploadedFile) => void;
+    onError?: (err: any) => void;
     accept: Record<string, string[]>;
-    file?: File;
-    onFileChange: (file: File | undefined) => void;
     onDrop?: () => void;
+    keepName?: boolean;
+    /** When false, the confirm button is hidden (e.g. when used inside modal with its own confirm) */
+    showConfirmButton?: boolean;
 };
-export default function AppDropzoneBody({ accept, file, onFileChange, onDrop, }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+export type AppDropzoneBodyRef = {
+    upload: () => Promise<void>;
+};
+declare const AppDropzoneBody: import("react").ForwardRefExoticComponent<AppDropzoneBodyProps & import("react").RefAttributes<AppDropzoneBodyRef>>;
+export default AppDropzoneBody;

package/dist/AppDropzone/AppDropzoneBody.js

@@ -1,11 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { forwardRef, useContext, useEffect, useImperativeHandle, useRef, useState, } from 'react';
 import Dropzone from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
+import { Button } from 'tycho-storybook';
+import CommonContext from '../configs/CommonContext';
+import { toastLoading } from '../configs/store/actions';
+import { useMessageUtils } from '../configs/useMessageUtils';
+import UploadService from './UploadService';
 import './style.scss';
-export default function AppDropzoneBody({ accept, file, onFileChange, onDrop, }) {
+function AppDropzoneBodyInner({ folder, onSuccess, onError, accept, onDrop, keepName, showConfirmButton = true, }, ref) {
     const { t } = useTranslation('upload');
+    const { state, dispatch } = useContext(CommonContext);
+    const { dispatchError } = useMessageUtils();
+    const [file, setFile] = useState();
     const [preview, setPreview] = useState();
+    const fileRef = useRef();
+    fileRef.current = file;
     const isImageFile = (f) => {
         return f.type?.startsWith('image/') ?? false;
     };
@@ -21,12 +31,37 @@ export default function AppDropzoneBody({ accept, file, onFileChange, onDrop, })
         }
         setPreview(undefined);
     }, [file]);
+    const upload = async () => {
+        const currentFile = fileRef.current;
+        if (!currentFile || state.toastLoading)
+            return;
+        dispatch(toastLoading(true));
+        const data = new FormData();
+        data.append('file', currentFile);
+        data.append('folder', folder);
+        keepName && data.append('keepOriginalName', 'true');
+        UploadService.execute(data)
+            .then((r) => {
+            onSuccess(r.data);
+        })
+            .catch((err) => {
+            dispatchError({ err: 'error.uploading.image', t, key: 'upload' });
+            onError?.(err);
+        })
+            .finally(() => {
+            dispatch(toastLoading(false));
+        });
+    };
+    useImperativeHandle(ref, () => ({
+        upload,
+    }));
     const handleDrop = (files) => {
         if (files.length === 0)
             return;
-        const droppedFile = files[0];
-        onFileChange(droppedFile);
+        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') })] }))] }));
+    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') }))] }));
 }
+const AppDropzoneBody = forwardRef(AppDropzoneBodyInner);
+export default AppDropzoneBody;

package/dist/AppDropzone/index.d.ts

@@ -1,4 +1,4 @@
 import AppDropzone from './AppDropzone';
-import AppDropzoneBody from './AppDropzoneBody';
+import AppDropzoneBody, { type AppDropzoneBodyProps, type AppDropzoneBodyRef } from './AppDropzoneBody';
 export default AppDropzone;
-export { AppDropzoneBody };
+export { AppDropzoneBody, type AppDropzoneBodyProps, type AppDropzoneBodyRef };

package/dist/AppForm/AppForm.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { CheckboxField, DatePickerField, SelectField, SwitchField, TextField } from 'tycho-storybook';
+import { CheckboxField, DatePickerField, SelectField, SwitchField, TextField, } from 'tycho-storybook';
 import './style.scss';
 const convertList = (values, labelAttr, valueAttr) => {
     if (!values)
@@ -23,7 +23,7 @@ export default function AppForm({ fields, form, prefix, onChangeFunctions = {},
             const handleChange = getOnChangeFn(field.attr);
             if (field.type === 'select') {
                 const selectOptions = getOptions(field.attr) || field.options || [];
-                return (_jsx(SelectField, { attr: name, label: field.name, createdForm: form, options: selectOptions, disabled: field.disabled, required: field.required, onChange: (value) => handleChange?.(value) }, name));
+                return (_jsx(SelectField, { attr: name, label: field.name, createdForm: form, options: selectOptions, disabled: field.disabled, required: field.required, onChange: (value) => handleChange?.(value), multiple: field.multiple }, name));
             }
             if (field.type === 'check') {
                 return (_jsx(CheckboxField, { attr: name, label: field.name, createdForm: form, disabled: field.disabled }, name));

package/dist/AppForm/AppFormField.d.ts

@@ -10,6 +10,7 @@ export type AppFormField = {
     disabled?: boolean;
     options?: SelectItem[];
     tooltip?: boolean;
+    multiple?: boolean;
     default?: string | boolean | number;
     role?: string;
     fn?: (value: any) => string | number;

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { default as AppAnalytics } from './AppAnalytics';
 export { default as AppCard } from './AppCard/AppCard';
 export { default as AppClipboard } from './AppClipboard';
 export { default as AppColorpicker } from './AppColorpicker';
-export { default as AppDropzone, AppDropzoneBody } from './AppDropzone';
+export { default as AppDropzone, AppDropzoneBody, type AppDropzoneBodyProps, type AppDropzoneBodyRef, } from './AppDropzone';
 export type { UploadedFile } from './AppDropzone/UploadedFile';
 export { default as AppEditable } from './AppEditable';
 export type { AppEditableField } from './AppEditable/AppEditableField';

package/dist/index.js

@@ -2,7 +2,7 @@ export { default as AppAnalytics } from './AppAnalytics';
 export { default as AppCard } from './AppCard/AppCard';
 export { default as AppClipboard } from './AppClipboard';
 export { default as AppColorpicker } from './AppColorpicker';
-export { default as AppDropzone, AppDropzoneBody } from './AppDropzone';
+export { default as AppDropzone, AppDropzoneBody, } from './AppDropzone';
 export { default as AppEditable } from './AppEditable';
 export { validateFormField } from './AppEditable/FormField';
 export { default as AppForm } from './AppForm/AppForm';

package/package.json

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