tp-react-elements-dev 1.12.32 → 1.12.34

package/dist/components/FormComponents/FileUpload/MultiFileWithPreview.esm.js

@@ -0,0 +1,211 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Box, Button, IconButton, Modal, Typography } from '@mui/material';
+import { useRef, useState, useEffect } from 'react';
+import { useWatch } from 'react-hook-form';
+import 'dayjs';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
+import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import CloseIcon from '@mui/icons-material/Close';
+import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
+import NavigateNextIcon from '@mui/icons-material/NavigateNext';
+import DeleteIcon from '@mui/icons-material/Delete';
+import UploadFileIcon from '@mui/icons-material/UploadFile';
+import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
+import TableChartIcon from '@mui/icons-material/TableChart';
+import DescriptionIcon from '@mui/icons-material/Description';
+
+const MultiFileWithPreview = ({ props, variant, }) => {
+    const inputRef = useRef(null);
+    const watched = useWatch({ control: props.control, name: props.item.name });
+    const [open, setOpen] = useState(false);
+    const [selectedFiles, setSelectedFiles] = useState([]);
+    const [currentFileIndex, setCurrentFileIndex] = useState(0);
+    // Determine if this is single or multiple file mode
+    const isSingleFileMode = props.item.maxLength === 1;
+    useEffect(() => {
+        if (watched === null || watched === undefined) {
+            if (inputRef.current)
+                inputRef.current.value = '';
+        }
+        // Handle preloaded files from backend (array of URLs)
+        if (Array.isArray(watched) && typeof watched[0] === 'string') {
+            setSelectedFiles(watched);
+        }
+    }, [watched]);
+    const isError = !!props.errors?.[props.item.name];
+    const handleFileChange = (event) => {
+        const files = event.target.files;
+        if (!files)
+            return;
+        const fileArray = Array.from(files);
+        const allowedExtensions = {
+            excel: ['xls', 'xlsx'],
+            pdf: ['pdf'],
+            image: ['jpg', 'jpeg', 'png'],
+            all: ['pdf', 'jpg', 'jpeg', 'png', 'xls', 'xlsx', 'doc', 'docx', 'zip']};
+        const validExtensions = props.item.fileType === 'excel'
+            ? allowedExtensions.excel
+            : props.item.fileType === 'pdf'
+                ? allowedExtensions.pdf
+                : props.item.fileType === 'image'
+                    ? allowedExtensions.image
+                    : allowedExtensions.all;
+        const invalidFile = fileArray.find((file) => {
+            const ext = file.name.split('.').pop()?.toLowerCase();
+            return !ext || !validExtensions.includes(ext);
+        });
+        if (invalidFile) {
+            props.item?.handleFileError?.(`Please upload ${validExtensions.join(', ')} files only`);
+            event.target.value = '';
+            props.setValue(props.item.name, null);
+            props.setValue(props.item.name + 'File', []);
+            return;
+        }
+        const largeFile = fileArray.find((file) => file.size > 20000000);
+        if (largeFile) {
+            props.item?.handleFileError?.('File size should be less than 20MB');
+            event.target.value = '';
+            props.setValue(props.item.name, null);
+            props.setValue(props.item.name + 'File', []);
+            return;
+        }
+        // Handle single vs multiple file mode
+        let combinedFiles;
+        if (isSingleFileMode) {
+            // In single file mode, replace the existing file
+            combinedFiles = fileArray;
+        }
+        else {
+            // In multiple file mode, combine with existing files
+            combinedFiles = [...selectedFiles, ...fileArray];
+            // Check if maxLength is exceeded
+            if (props.item.maxLength && combinedFiles.length > props.item.maxLength) {
+                props.item?.handleFileError?.(`You can only upload up to ${props.item.maxLength} files`);
+                event.target.value = '';
+                return;
+            }
+        }
+        const combinedFileNames = combinedFiles
+            .map((f) => (f instanceof File ? f.name : f.split('/').pop()))
+            .join(',');
+        props.setValue(props.item.name, combinedFileNames);
+        props.setValue(props.item.name + 'File', combinedFiles);
+        setSelectedFiles(combinedFiles);
+        props.item.onChangeSetFileFn?.(combinedFiles);
+    };
+    const handlePreviewClick = () => {
+        setCurrentFileIndex(0);
+        setOpen(true);
+    };
+    const handleClose = () => setOpen(false);
+    const handlePrevious = () => {
+        setCurrentFileIndex((prev) => prev > 0 ? prev - 1 : selectedFiles.length - 1);
+    };
+    const handleNext = () => {
+        setCurrentFileIndex((prev) => prev < selectedFiles.length - 1 ? prev + 1 : 0);
+    };
+    const handleDeleteFile = (indexToDelete) => {
+        const updatedFiles = selectedFiles.filter((_, index) => index !== indexToDelete);
+        setSelectedFiles(updatedFiles);
+        if (inputRef.current) {
+            inputRef.current.value = '';
+        }
+        if (updatedFiles.length === 0) {
+            props.setValue(props.item.name, null);
+            props.setValue(props.item.name + 'File', []);
+        }
+        else {
+            const fileNames = updatedFiles
+                .map((f) => (f instanceof File ? f.name : f.split('/').pop()))
+                .join(',');
+            props.setValue(props.item.name, fileNames);
+            props.setValue(props.item.name + 'File', updatedFiles);
+        }
+        if (currentFileIndex >= updatedFiles.length) {
+            setCurrentFileIndex(Math.max(0, updatedFiles.length - 1));
+        }
+        props.item.onChangeSetFileFn &&
+            props.item.onChangeSetFileFn(updatedFiles);
+        if (updatedFiles.length === 0) {
+            setOpen(false);
+        }
+    };
+    const isImageFile = (file) => {
+        const ext = typeof file === 'string'
+            ? file.split('.').pop()?.toLowerCase()
+            : file.name.split('.').pop()?.toLowerCase();
+        return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext || '');
+    };
+    const isPdfFile = (file) => {
+        const name = typeof file === 'string' ? file : file.name;
+        return name.toLowerCase().endsWith('.pdf');
+    };
+    const isExcelFile = (file) => {
+        const name = typeof file === 'string' ? file : file.name;
+        return /\.xlsx?$/.test(name.toLowerCase());
+    };
+    const isWordFile = (file) => {
+        const name = typeof file === 'string' ? file : file.name;
+        return /\.(doc|docx)$/.test(name.toLowerCase());
+    };
+    const getObjectUrl = (file) => typeof file === 'string' ? file : URL.createObjectURL(file);
+    return (jsxs(Fragment, { children: [jsxs(Box, { paddingLeft: "4px", sx: { ...props.item.sx, position: 'relative' }, children: [props.item?.label && (jsx(Box, { sx: { fontSize: '10px' }, children: renderLabel(variant, props, true) })), jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [jsxs(Button, { variant: "outlined", component: "label", startIcon: jsx(UploadFileIcon, {}), sx: { flex: 1, textTransform: 'none' }, color: isError ? 'error' : 'primary', children: [selectedFiles.length > 0
+                                        ? isSingleFileMode
+                                            ? '1 file selected'
+                                            : `${selectedFiles.length} file(s) selected`
+                                        : isSingleFileMode
+                                            ? 'Upload File'
+                                            : 'Upload Files', jsx("input", { type: "file", hidden: true, multiple: !isSingleFileMode, accept: props.item.fileType === 'excel'
+                                            ? '.xls,.xlsx'
+                                            : props.item.fileType === 'pdf'
+                                                ? '.pdf'
+                                                : props.item.fileType === 'image'
+                                                    ? '.jpg,.jpeg,.png'
+                                                    : props.item.fileType === 'all'
+                                                        ? '.pdf,.jpg,.jpeg,.png,.xls,.xlsx,.doc,.docx'
+                                                        : '', ref: inputRef, onChange: handleFileChange })] }), jsx(Box, { sx: { width: 36, display: 'flex', justifyContent: 'center' }, children: props.item.showFileCarousel && selectedFiles.length > 0 ? (jsx(IconButton, { onClick: handlePreviewClick, color: "primary", size: "small", "aria-label": "preview selected files", children: jsx(VisibilityIcon, {}) })) : null })] })] }), jsx(FormBottomField, { ...props }), jsx(Modal, { open: open, onClose: handleClose, children: jsxs(Box, { sx: {
+                        position: 'absolute',
+                        top: '50%',
+                        left: '50%',
+                        transform: 'translate(-50%, -50%)',
+                        width: 600,
+                        bgcolor: 'background.paper',
+                        borderRadius: 2,
+                        boxShadow: 24,
+                        p: 3,
+                    }, children: [jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [jsx(Typography, { variant: "h6", children: "File Preview" }), jsxs(Box, { display: "flex", gap: 1, children: [jsx(IconButton, { onClick: () => handleDeleteFile(currentFileIndex), color: "error", title: "Delete current file", children: jsx(DeleteIcon, {}) }), jsx(IconButton, { onClick: handleClose, children: jsx(CloseIcon, {}) })] })] }), jsx(Box, { mt: 2, children: selectedFiles.length > 0 && (jsxs(Fragment, { children: [jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", gap: 2, children: [selectedFiles.length > 1 && !isSingleFileMode ? (jsx(IconButton, { onClick: handlePrevious, children: jsx(NavigateBeforeIcon, {}) })) : null, jsx(Box, { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", sx: { p: 2, minHeight: '400px', width: '100%' }, children: (() => {
+                                                    const currentFile = selectedFiles[currentFileIndex];
+                                                    const fileName = typeof currentFile === 'string'
+                                                        ? currentFile.split('/').pop() || currentFile
+                                                        : currentFile.name;
+                                                    // Images
+                                                    if (isImageFile(currentFile)) {
+                                                        return (jsx("img", { alt: "Preview", src: getObjectUrl(currentFile), style: {
+                                                                maxHeight: '400px',
+                                                                maxWidth: '100%',
+                                                                objectFit: 'contain',
+                                                                borderRadius: 8,
+                                                            } }));
+                                                    }
+                                                    // PDF inline viewer
+                                                    if (isPdfFile(currentFile)) {
+                                                        const url = getObjectUrl(currentFile);
+                                                        return (jsx(Box, { width: "100%", height: 420, children: jsx("object", { data: url, type: "application/pdf", width: "100%", height: "100%", children: jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 1, children: [jsx(PictureAsPdfIcon, { color: "error" }), jsx(Typography, { variant: "body2", children: "Preview not available. " }), jsx(Button, { size: "small", variant: "outlined", href: url, target: "_blank", rel: "noreferrer", children: "Open PDF" })] }) }) }));
+                                                    }
+                                                    // Excel preview placeholder with actions
+                                                    if (isExcelFile(currentFile)) {
+                                                        const url = getObjectUrl(currentFile);
+                                                        return (jsxs(Box, { textAlign: "center", children: [jsx(TableChartIcon, { color: "primary", sx: { fontSize: 64, mb: 1 } }), jsx(Typography, { variant: "body1", gutterBottom: true, children: fileName }), jsx(Button, { size: "small", variant: "outlined", href: url, target: "_blank", rel: "noreferrer", children: "Open" })] }));
+                                                    }
+                                                    // Word preview placeholder with actions
+                                                    if (isWordFile(currentFile)) {
+                                                        const url = getObjectUrl(currentFile);
+                                                        return (jsxs(Box, { textAlign: "center", children: [jsx(DescriptionIcon, { color: "primary", sx: { fontSize: 64, mb: 1 } }), jsx(Typography, { variant: "body1", gutterBottom: true, children: fileName }), jsx(Button, { size: "small", variant: "outlined", href: url, target: "_blank", rel: "noreferrer", children: "Open" })] }));
+                                                    }
+                                                    // Fallback: show name
+                                                    return jsx(Typography, { variant: "body1", children: fileName });
+                                                })() }), selectedFiles.length > 1 && !isSingleFileMode ? (jsx(IconButton, { onClick: handleNext, children: jsx(NavigateNextIcon, {}) })) : null] }), selectedFiles.length > 1 && !isSingleFileMode && (jsx(Box, { display: "flex", justifyContent: "center", mt: 2, children: jsxs(Typography, { variant: "body2", color: "text.secondary", children: [currentFileIndex + 1, " of ", selectedFiles.length] }) }))] })) })] }) })] }));
+};
+
+export { MultiFileWithPreview as default };

package/dist/components/FormComponents/FileUpload/index.d.ts

@@ -0,0 +1,3 @@
+export { default as FormRenderFileUpload } from './FormRenderFileUpload';
+export { default as FormRenderMultiFileUpload } from './FormRenderMultiFileUpload';
+export { default as MultiFileWithPreview } from './MultiFileWithPreview';

package/dist/components/FormComponents/FileUpload/index.esm.js

@@ -0,0 +1,3 @@
+export { default as FormRenderFileUpload } from './FormRenderFileUpload.esm.js';
+export { default as FormRenderMultiFileUpload } from './FormRenderMultiFileUpload.esm.js';
+export { default as MultiFileWithPreview } from './MultiFileWithPreview.esm.js';

package/dist/components/FormComponents/index.esm.js

@@ -1,19 +1,18 @@
+export { default as SingleSelect } from './Select/SingleSelect.esm.js';
+export { default as SingleSelectNonAutoComplete } from './Select/SingleSelectNonAutoComplete.esm.js';
+export { default as SingleSelectSearchApi } from './Select/SingleSelectSearchApi.esm.js';
+export { default as MultiSelectV1 } from './Select/MultiSelectv1.esm.js';
 export { default as FormNumberField } from './FormNumberField/FormNumberField.esm.js';
 export { default as FormNumberFieldDecimal } from './FormNumberField/FormNumberFieldDecimal.esm.js';
 export { default as FormTextAreaField } from './FormTextAreaField/FormTextAreaField.esm.js';
 export { default as FormTextField } from './FormTextField/FormTextField.esm.js';
 export { default as PasswordField } from './PasswordField/PasswordField.esm.js';
 export { default as FormCheckBox } from './FormCheckBox/FormCheckBox.esm.js';
-export { default as SingleSelect } from './Select/SingleSelect.esm.js';
-export { default as SingleSelectNonAutoComplete } from './Select/SingleSelectNonAutoComplete.esm.js';
-export { default as SingleSelectSearchApi } from './Select/SingleSelectSearchApi.esm.js';
-export { default as MultiSelectV1 } from './Select/MultiSelectv1.esm.js';
 export { default as FormCheckBoxGroup } from './FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
 export { default as FormRadioGroup } from './FormRadioGroup/FormRadioGroup.esm.js';
 export { default as DatepickerWrapperV2 } from './DatePicker/DatepickerWrapperV2.esm.js';
 export { default as MonthPicker } from './DatePicker/MonthPicker.esm.js';
 export { default as Monthpickerrender } from './DatePicker/Monthpickerrender.esm.js';
-export { default as YearPickerField } from './YearPickerField/YearPickerField.esm.js';
 export { default as TimePicker } from './TimePicker/TimePicker.esm.js';
 export { default as FormRenderFileUpload } from './FileUpload/FormRenderFileUpload.esm.js';
 export { default as FormRenderMultiFileUpload } from './FileUpload/FormRenderMultiFileUpload.esm.js';
@@ -22,3 +21,4 @@ export { default as RichTextEditorWrapper } from './RichTextEditor/RichTextEdito
 export { default as FormBottomField } from './FormBottomField/FormBottomField.esm.js';
 export { default as FormErrorField } from './FormErrorField/FormErrorField.esm.js';
 export { default as HelperText } from './HelperText/HelperText.esm.js';
+export { default as YearPickerField } from './YearPickerField/YearPickerField.esm.js';

package/dist/components/Global.styles.esm.js

@@ -1,79 +1,79 @@
 import { styled } from '@mui/material/styles';
 import { Button, Typography, Grid, Dialog, DialogTitle } from '@mui/material';
 
-styled(Button) `
-  border: 0;
-  color: #fff;
-  position: absolute;
-  text-align: center;
-  padding: 5px 12px;
-  font-size: 13px;
-  height: 30px;
-  right: -38px;
-  text-transform: none;
-  z-index: 2;
-  border-radius: 10px 0px 0px 10px;
-  &:hover {
-    right: 0px;
-  }
+styled(Button) `
+  border: 0;
+  color: #fff;
+  position: absolute;
+  text-align: center;
+  padding: 5px 12px;
+  font-size: 13px;
+  height: 30px;
+  right: -38px;
+  text-transform: none;
+  z-index: 2;
+  border-radius: 10px 0px 0px 10px;
+  &:hover {
+    right: 0px;
+  }
 `;
-const SubmitButton = styled(Button) `
-  text-transform: none;
+const SubmitButton = styled(Button) `
+  text-transform: none;
 `;
-const CancelButton = styled(Button) `
-  text-transform: none;
-  color: #000;
-  background: #ececee;
-  &:hover {
-    background: #0009;
-    color: #fff;
-  }
+const CancelButton = styled(Button) `
+  text-transform: none;
+  color: #000;
+  background: #ececee;
+  &:hover {
+    background: #0009;
+    color: #fff;
+  }
 `;
-const SaveAsDraftButton = styled(Button) `
-  text-transform: none;
-  font-size: 12px;
-  background: orange;
-  &:hover {
-    background: orange;
-  }
+const SaveAsDraftButton = styled(Button) `
+  text-transform: none;
+  font-size: 12px;
+  background: orange;
+  &:hover {
+    background: orange;
+  }
 `;
 styled(Typography) ``;
 styled(Grid, {
     shouldForwardProp: (prop) => prop !== 'isActive' && prop !== 'noOfColumn',
-}) `
-  flex-direction: column;
-  margin-bottom: 8px;
-  min-width: 10%;
-  padding-left: 0px;
-  z-index: 2;
-  padding-right: 0px;
-  border: 1px solid #0003;
-  font-size: 12px;
-  padding: 6px;
-  text-align: center;
-  &:hover {
-    cursor: pointer;
-  }
+}) `
+  flex-direction: column;
+  margin-bottom: 8px;
+  min-width: 10%;
+  padding-left: 0px;
+  z-index: 2;
+  padding-right: 0px;
+  border: 1px solid #0003;
+  font-size: 12px;
+  padding: 6px;
+  text-align: center;
+  &:hover {
+    cursor: pointer;
+  }
 `;
-const DialogContainer = styled(Dialog) `
-  position: fixed;
-  top: -16px;
-  left: 0;
-  right: 0;
-  bottom: auto;
-  & .css-tlc64q-MuiPaper-root-MuiDialog-paper,
-  .css-mbdu2s {
-    max-width: 900px;
-  }
+const DialogContainer = styled(Dialog) `
+  position: fixed;
+  top: -16px;
+  left: 0;
+  right: 0;
+  bottom: auto;
+  & .css-tlc64q-MuiPaper-root-MuiDialog-paper,
+  .css-mbdu2s {
+    max-width: 900px;
+  }
 `;
-const DialogTitleWrapper = styled(DialogTitle) `
-  padding: 8px 16px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 14px;
-  cursor: move;
-  border-bottom: 1px solid rgb(229 231 235 / 1);
+const DialogTitleWrapper = styled(DialogTitle) `
+  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  cursor: move;
+  border-bottom: 1px solid rgb(229 231 235 / 1);
 `;
 
 export { CancelButton, DialogContainer, DialogTitleWrapper, SaveAsDraftButton, SubmitButton };

package/dist/utils/Interface/FormInterface.d.ts

@@ -10,7 +10,7 @@ export interface TextFieldInputProps {
 export interface FormSectionPropsItem {
     name: string;
     label: string;
-    inputType: 'text' | 'password' | 'number' | 'select' | 'autocomplete-select' | 'autocomplete-multi-select' | 'datepicker' | 'multiselect' | 'select-v2' | 'basic-select' | 'decimal' | 'alpha-numerical' | 'yearpicker' | 'dateRangePicker' | 'monthpicker' | 'multiselect' | 'file' | 'multifile' | 'textarea' | 'phoneNumber' | 'pincode' | 'email' | 'toggleSwitch' | 'rich-text-editor' | 'multiEmail' | 'timepicker' | 'checkbox-group' | 'radio-group' | 'checkbox' | 'custom' | '';
+    inputType: 'text' | 'password' | 'number' | 'select' | 'autocomplete-select' | 'autocomplete-multi-select' | 'datepicker' | 'multiselect' | 'select-v2' | 'basic-select' | 'decimal' | 'alpha-numerical' | 'yearpicker' | 'dateRangePicker' | 'monthpicker' | 'multiselect' | 'file' | 'multifile' | 'multifile-with-preview' | 'textarea' | 'phoneNumber' | 'pincode' | 'email' | 'toggleSwitch' | 'rich-text-editor' | 'multiEmail' | 'timepicker' | 'checkbox-group' | 'radio-group' | 'checkbox' | 'custom' | '';
     options?: OptionsProps[];
     required?: boolean;
     errorMessage?: string;
@@ -18,7 +18,8 @@ export interface FormSectionPropsItem {
     disable?: boolean;
     onChangeFn?: (e: string | number | undefined | null | boolean) => void;
     onBlurFn?: (e: string | number | undefined | null | boolean) => void;
-    onChangeSetFileFn?: (e: File) => void;
+    onChangeSetFileFn?: (e: File | File[]) => void;
+    showFileCarousel?: boolean;
     maxLength?: number;
     autoFocus?: boolean;
     maxValue?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tp-react-elements-dev",
-  "version": "1.12.32",
+  "version": "1.12.34",
   "private": false,
   "type": "module",
   "description": "React form components library built with React Hook Form and Yup",