tp-react-elements-dev 1.9.0 → 1.10.0

package/dist/components/Form/FileUpload/FormRenderMultiFileUpload.d.ts

@@ -0,0 +1,6 @@
+import { FormRenderProps } from "../FormRender";
+declare const FormRenderMultiFileUpload: ({ props, variant, }: {
+    props: FormRenderProps;
+    variant: "standard" | "outlined" | "";
+}) => import("react/jsx-runtime").JSX.Element;
+export default FormRenderMultiFileUpload;

package/dist/components/Form/FormRender.d.ts

@@ -12,7 +12,7 @@ interface TextFieldInputProps {
 export interface FormSectionPropsItem {
     name: string;
     label: string;
-    inputType: "text" | "password" | "number" | "select" | "datepicker" | "multiselect" | "select-v2" | "register-number" | "decimal" | "alpha-numerical" | "yearpicker" | "dateRangePicker" | "monthpicker" | "multiselect" | "file" | "textarea" | "phoneNumber" | "pincode" | "email" | "toggleSwitch" | "rich-text-editor" | "multiEmail" | "timepicker" | "checkbox-group" | "";
+    inputType: "text" | "password" | "number" | "select" | "datepicker" | "multiselect" | "select-v2" | "register-number" | "decimal" | "alpha-numerical" | "yearpicker" | "dateRangePicker" | "monthpicker" | "multiselect" | "file" | "multifile" | "textarea" | "phoneNumber" | "pincode" | "email" | "toggleSwitch" | "rich-text-editor" | "multiEmail" | "timepicker" | "checkbox-group" | "";
     options?: OptionsProps[];
     required?: boolean;
     errorMessage?: string;
@@ -36,7 +36,7 @@ export interface FormSectionPropsItem {
     sx?: SxProps<Theme>;
     donotAllowSpace?: boolean;
     onInputProps?: (e: React.FocusEvent<HTMLInputElement>) => void;
-    fileType?: "excel" | "pdf" | "all" | "";
+    fileType?: "excel" | "pdf" | "all" | "image" | "";
     handleFileError?: (message: string) => void;
     doNotAllowPaste?: boolean;
     removeButtons?: string;

package/dist/index.esm.js

@@ -59232,6 +59232,79 @@ function TimePickerFieldWrapper({ props, }) {
                             }, label: props.variant === "standard" ? "" : props.item.label, disabled: props.item.disable, slotProps: { textField: { readOnly: true, size: "small" } } }))] })) }), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] })));
 }
 
+const FormRenderMultiFileUpload = ({ props, variant, }) => {
+    var _a;
+    useEffect(() => {
+        if (props.getValues(props.item.name) === null ||
+            props.getValues(props.item.name) === undefined) {
+            const element = document.getElementById(props.item.name);
+            console.log(element, "elementelement");
+            if (element) {
+                element.value = ""; // Ensure it's an input element
+            }
+        }
+    }, [props.getValues(props.item.name)]);
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(Box, Object.assign({ paddingLeft: "4px", sx: Object.assign({}, props.item.sx) }, { children: [((_a = props.item) === null || _a === void 0 ? void 0 : _a.label) && (jsxRuntimeExports.jsx(Box, Object.assign({ sx: { fontSize: "10px;" } }, { children: renderLabel(variant, props) }))), jsxRuntimeExports.jsx(TextField, { type: "file", id: props.item.name, inputProps: {
+                            multiple: true,
+                            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"
+                                            : "",
+                        }, onChange: (event) => {
+                            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+                            const file = event.target.files;
+                            const fileName = file && file.length > 0
+                                ? Array.from(file)
+                                    .map((item) => item.name)
+                                    .join(",")
+                                : null;
+                            console.log(file, "filefile", file.length, fileName);
+                            const allowedExtensions = {
+                                excel: ["xls", "xlsx"],
+                                pdf: ["pdf"],
+                                image: ["jpg", "jpeg", "png"],
+                                all: ["pdf", "jpg", "jpeg", "png", "xls", "xlsx", "doc", "docx"],
+                            };
+                            const fileExtension = fileName
+                                ? fileName.split(".").pop().toLowerCase()
+                                : null;
+                            const validExtensions = props.item.fileType === "excel"
+                                ? allowedExtensions.excel
+                                : props.item.fileType === "pdf"
+                                    ? allowedExtensions.pdf
+                                    : props.item.fileType === "image"
+                                        ? allowedExtensions.image
+                                        : allowedExtensions.all;
+                            if (((_a = props.item) === null || _a === void 0 ? void 0 : _a.fileType) &&
+                                fileExtension &&
+                                !validExtensions.includes(fileExtension)) {
+                                ((_b = props.item) === null || _b === void 0 ? void 0 : _b.handleFileError) &&
+                                    ((_c = props.item) === null || _c === void 0 ? void 0 : _c.handleFileError(`Please upload ${allowedExtensions[props.item.fileType].join(",")} Files only`));
+                                event.target.value = ""; // Clear the file input\
+                                props.setValue((_d = props.item) === null || _d === void 0 ? void 0 : _d.name, null);
+                                props.setValue(((_e = props.item) === null || _e === void 0 ? void 0 : _e.name) + "Name", "");
+                                return;
+                            }
+                            else if (event.target.files[event.target.files.length - 1].size > 20000000) {
+                                ((_f = props.item) === null || _f === void 0 ? void 0 : _f.handleFileError) &&
+                                    ((_g = props.item) === null || _g === void 0 ? void 0 : _g.handleFileError(`File size should be less than 20MB`));
+                                event.target.files = null; // Clear the file input
+                                props.setValue((_h = props.item) === null || _h === void 0 ? void 0 : _h.name, null);
+                                props.setValue(((_j = props.item) === null || _j === void 0 ? void 0 : _j.name) + "File", []);
+                                return;
+                            }
+                            const fileArray = Array.from(file);
+                            console.log(fileArray, 'fileArrayfileArray');
+                            props.setValue((_k = props.item) === null || _k === void 0 ? void 0 : _k.name, fileName);
+                            props.setValue(((_l = props.item) === null || _l === void 0 ? void 0 : _l.name) + "File", fileArray);
+                        }, sx: { width: "100%" } })] })), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] }));
+};
+
 // export const renderLabel = (
 //   label: string,
 //   isRequired?: boolean,
@@ -59643,6 +59716,8 @@ const RenderForm = (props) => {
             return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(MultiSelectV1, { props: props, variant: variant }) }));
         case "file":
             return jsxRuntimeExports.jsx(FormRenderFileUpload, { props: props, variant: variant });
+        case "multifile":
+            return jsxRuntimeExports.jsx(FormRenderMultiFileUpload, { props: props, variant: variant });
         case "textarea":
             return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [renderLabel(variant, props), jsxRuntimeExports.jsx(TextField, Object.assign({ multiline: true, size: "small", InputProps: {
                                     style: {
@@ -62179,6 +62254,25 @@ const useFormValidatingContext = (formArray) => {
                 }
                 renderCustomError(field);
                 break;
+            case "multifile":
+                initialValues[field.name] = null;
+                if (field.required && field.errorMessage) {
+                    validationShape[field.name] = create$6()
+                        .test("hasAtLeastOneFile", field.errorMessage, (value) => {
+                        if (!value)
+                            return false;
+                        // Split by comma, trim, and filter out empty values
+                        const files = value
+                            .split(",")
+                            .map((f) => f.trim())
+                            .filter((f) => f !== "");
+                        return files.length > 0;
+                    })
+                        .required(field.errorMessage);
+                    renderCustomError(field);
+                }
+                renderCustomError(field);
+                break;
             case "number":
                 initialValues[field.name] = null;
                 if (field.required && field.errorMessage) {