tp-react-elements 1.0.0

package/dist/components/FormComponents/DatePicker/DatepickerWrapperV2.esm.js

@@ -0,0 +1,74 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import { getDatePicker } from '../../../utils/Constants/date-pickers.esm.js';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import dayjs from 'dayjs';
+import { Controller } from 'react-hook-form';
+import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
+
+const DatepickerWrapperV2 = ({ props, variant, }) => {
+    const inputTextRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [DatePicker, setDatePicker] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    useEffect(() => {
+        const loadComponents = async () => {
+            setIsLoading(true);
+            const [datePicker] = await Promise.all([getDatePicker()]);
+            setDatePicker(datePicker);
+            setIsLoading(false);
+        };
+        loadComponents();
+    }, []);
+    const handleToggle = () => {
+        if (!open) {
+            inputTextRef.current?.blur();
+        }
+        setOpen(!open);
+    };
+    const isError = !!props.errors?.[props.item.name];
+    const isShowBorderError = isError;
+    if (isLoading) {
+        return jsx("div", { style: { minHeight: '36px' }, children: "Loading..." });
+    }
+    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => {
+            return (jsxs(Fragment, { children: [DatePicker && (jsxs(LocalizationProvider, { dateAdapter: AdapterDayjs, children: [renderLabel(variant, props), jsx(DatePicker, { views: ['month', 'year', 'day'], label: variant !== 'standard'
+                                    ? `${props.item.label}${props.item.required ? ' *' : ''}`
+                                    : '', value: field.value
+                                    ? typeof field.value === 'string'
+                                        ? dayjs(field.value, props.item.DateFormat || 'DD/MM/YYYY')
+                                        : dayjs(field.value)
+                                    : null, className: 'read-only', format: props.item.DateFormat || 'DD/MM/YYYY', open: open, onOpen: handleToggle, onClose: handleToggle, minDate: props?.item?.minDate ? dayjs(props?.item?.minDate, props.item.DateFormat || 'DD/MM/YYYY') : undefined, maxDate: props?.item?.maxDate ? dayjs(props?.item?.maxDate, props.item.DateFormat || 'DD/MM/YYYY') : undefined, disabled: props.item.disable || false, onChange: (date) => {
+                                    field.onChange(dayjs(date).format(props.item.DateFormat || 'DD/MM/YYYY'));
+                                    props?.item?.onChangeFn &&
+                                        props?.item?.onChangeFn(dayjs(date).format(props.item.DateFormat || 'DD/MM/YYYY'));
+                                }, slotProps: {
+                                    textField: {
+                                        onClick: () => handleToggle(),
+                                        inputRef: inputTextRef,
+                                        onBlur: (e) => {
+                                            props?.item?.onBlurFn && props?.item?.onBlurFn(e);
+                                        },
+                                        inputProps: {
+                                            input: { cursor: 'pointer' },
+                                            'aria-labelledby': `${props.item.name}-label`,
+                                            'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
+                                            'aria-required': props.item.required ? true : undefined,
+                                        },
+                                        error: isShowBorderError,
+                                        sx: {
+                                            '& .MuiFormLabel-root': {
+                                                top: -10,
+                                            },
+                                            '& .MuiInputLabel-shrink': {
+                                                top: 0,
+                                            },
+                                        },
+                                    },
+                                } })] })), jsx(FormBottomField, { ...props })] }));
+        } }, props.item.name));
+};
+
+export { DatepickerWrapperV2 as default };

package/dist/components/FormComponents/DatePicker/MonthPicker.d.ts

@@ -0,0 +1,2 @@
+declare const MonthPicker: ({ props }: any) => import("react/jsx-runtime").JSX.Element;
+export default MonthPicker;

package/dist/components/FormComponents/DatePicker/MonthPicker.esm.js

@@ -0,0 +1,48 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Controller } from 'react-hook-form';
+import { TextField, FormGroup, FormControlLabel, Checkbox } from '@mui/material';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+
+const MonthPicker = ({ props }) => {
+    const [selectedMonths, setSelectedMonths] = useState([]);
+    const handleMonthChange = (date) => {
+        // Handle the selected months
+        setSelectedMonths((prevSelectedMonths) => {
+            const monthIndex = date.getMonth();
+            if (prevSelectedMonths.includes(monthIndex)) {
+                // If month is already selected, remove it
+                return prevSelectedMonths?.filter((month) => month !== monthIndex);
+            }
+            else {
+                // If month is not selected, add it
+                return [...prevSelectedMonths, monthIndex];
+            }
+        });
+    };
+    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: jsx(DatePicker, { value: field.value, onChange: handleMonthChange, slots: {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            textField: (textFieldProps) => (jsx(TextField, { ...textFieldProps, fullWidth: true, disabled: props.item.disable || false, InputLabelProps: {
+                                    shrink: true,
+                                }, error: props.errors, inputProps: {
+                                    min: props.item.minDate,
+                                } })),
+                        }, slotProps: {
+                            textField: {
+                                sx: {
+                                    '& .MuiFormLabel-root': {
+                                        top: -10,
+                                    },
+                                    '& .MuiInputLabel-shrink': {
+                                        top: 0,
+                                    },
+                                },
+                            },
+                        } }) }), jsx(FormGroup, { children: Array.from({ length: 12 }).map((_, index) => (jsx(FormControlLabel, { control: jsx(Checkbox, { checked: selectedMonths.includes(index), onChange: () => handleMonthChange(new Date(2000, index, 1)), color: "primary" }), label: new Date(2000, index, 1).toLocaleDateString(undefined, {
+                            month: 'short',
+                        }) }, index))) })] })) }));
+};
+
+export { MonthPicker as default };

package/dist/components/FormComponents/DatePicker/Monthpickerrender.d.ts

@@ -0,0 +1,6 @@
+import { FormRenderProps, VariantProps } from '../../../utils';
+declare const Monthpickerrender: ({ props, variant, }: {
+    props: FormRenderProps;
+    variant: VariantProps;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Monthpickerrender;

package/dist/components/FormComponents/DatePicker/Monthpickerrender.esm.js

@@ -0,0 +1,70 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import { getDatePicker } from '../../../utils/Constants/date-pickers.esm.js';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import dayjs from 'dayjs';
+import { Controller } from 'react-hook-form';
+import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+import { renderLabel, formatDateMonthAndYear } from '../../../utils/Constants/FormConstants.esm.js';
+
+const Monthpickerrender = ({ props, variant, }) => {
+    const ref = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [DatePicker, setDatePicker] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    useEffect(() => {
+        const loadComponents = async () => {
+            setIsLoading(true);
+            const [datePicker] = await Promise.all([getDatePicker()]);
+            setDatePicker(datePicker);
+            setIsLoading(false);
+        };
+        loadComponents();
+    }, []);
+    const handleToggle = () => {
+        if (!open) {
+            ref.current?.blur();
+        }
+        setOpen(!open);
+    };
+    const isError = !!props.errors?.[props.item.name];
+    const isShowBorderError = isError;
+    if (isLoading) {
+        return jsx("div", { style: { minHeight: '36px' }, children: "Loading..." });
+    }
+    return (jsx(Fragment, { children: DatePicker && (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [jsxs(LocalizationProvider, { dateAdapter: AdapterDayjs, children: [renderLabel(variant, props), jsx(DatePicker, { ref: ref, label: variant !== 'standard' &&
+                                    `${props.item.label}${props.item.required ? ' *' : ''}`, views: ['month', 'year'], disabled: props.item.disable, value: field.value ? dayjs(formatDateMonthAndYear(field.value || null)) : null, slotProps: {
+                                    textField: {
+                                        onClick: () => handleToggle(),
+                                        inputRef: ref,
+                                        error: isShowBorderError,
+                                    },
+                                }, disableOpenPicker: props.item.disable, open: open, onOpen: handleToggle, onClose: handleToggle, defaultValue: field.value, onChange: (date) => {
+                                    const formatted = dayjs(date).format('MM/YYYY');
+                                    field.onChange(formatted);
+                                    props.setValue(props.item.name, formatted);
+                                }, sx: {
+                                    '& .css-1holvmy,.css-kichxs-MuiFormLabel-root-MuiInputLabel-root': {
+                                        top: '-10px',
+                                    },
+                                    '& input': {
+                                        paddingRight: '0px !important',
+                                    },
+                                    '& button': {
+                                        paddingLeft: '0px !important',
+                                        paddingRight: '0px !important',
+                                    },
+                                    '& .MuiFormLabel-root': {
+                                        top: -10,
+                                    },
+                                    '& .MuiInputLabel-shrink': {
+                                        top: 0,
+                                    },
+                                }, minDate: props.item.minDate ? dayjs(props.item.minDate, 'MM/YYYY') : undefined, maxDate: props.item.maxDate ? dayjs(props.item.maxDate, 'MM/YYYY') : undefined })] }), props?.item?.helperText && (jsxs("span", { style: {
+                            fontSize: '11px',
+                            color: '#3651d3',
+                        }, children: ["(", props?.item?.helperText, ")"] })), jsx(FormBottomField, { ...props })] })) })) }));
+};
+
+export { Monthpickerrender as default };

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

@@ -0,0 +1,6 @@
+import { FormRenderProps, VariantProps } from '../../../utils';
+declare const FormRenderFileUpload: ({ props, variant, }: {
+    props: FormRenderProps;
+    variant: VariantProps;
+}) => import("react/jsx-runtime").JSX.Element;
+export default FormRenderFileUpload;

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

@@ -0,0 +1,69 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Box, TextField } from '@mui/material';
+import { useRef, useEffect } from 'react';
+import { useWatch } from 'react-hook-form';
+import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+import 'dayjs';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
+
+const FormRenderFileUpload = ({ props, variant, }) => {
+    const isError = !!props.errors?.[props.item.name];
+    const isShowBorderError = isError;
+    const inputRef = useRef(null);
+    const watched = useWatch({ control: props.control, name: props.item.name });
+    useEffect(() => {
+        if (watched === null || watched === undefined) {
+            if (inputRef.current)
+                inputRef.current.value = '';
+        }
+    }, [watched]);
+    const extensionMap = {
+        excel: ['xls', 'xlsx'],
+        pdf: ['pdf'],
+        zip: ['zip'],
+        image: ['jpg', 'jpeg', 'png'],
+        document: ['doc', 'docx', 'pdf'],
+        all: ['pdf', 'jpg', 'jpeg', 'png', 'xls', 'xlsx', 'doc', 'docx', 'zip'],
+    };
+    const accept = props.item.fileType && extensionMap[props.item.fileType]
+        ? extensionMap[props.item.fileType].map((ext) => `.${ext}`).join(',')
+        : '';
+    return (jsxs(Fragment, { children: [jsxs(Box, { paddingLeft: '4px', sx: { ...props.item.sx }, children: [props.item?.label && (jsx(Box, { sx: { fontSize: '10px;' }, children: renderLabel(variant, props, true) })), jsx(TextField, { type: "file", id: props.item.name, error: isShowBorderError, inputRef: inputRef, inputProps: {
+                            accept,
+                            'aria-labelledby': `${props.item.name}-label`,
+                            'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
+                            'aria-required': props.item.required ? true : undefined,
+                        }, onChange: (event) => {
+                            const file = event.target?.files[0];
+                            const fileName = file ? file.name : null;
+                            const allowedExtensions = extensionMap;
+                            const fileExtension = fileName ? fileName.split('.').pop().toLowerCase() : null;
+                            const validExtensions = props.item.fileType && allowedExtensions[props.item.fileType]
+                                ? allowedExtensions[props.item.fileType]
+                                : allowedExtensions.all;
+                            if (props.item?.fileType && fileExtension && !validExtensions.includes(fileExtension)) {
+                                props.item?.handleFileError &&
+                                    props.item?.handleFileError(`Please upload ${allowedExtensions[props.item.fileType].join(', ')} files only`);
+                                event.target.value = ''; // Clear the file input\
+                                props.setValue(props.item?.name, null);
+                                props.setValue(props.item?.name + 'Name', '');
+                                return;
+                            }
+                            else if (event.target.files[0].size > (props.item.filesize || 20000000)) {
+                                const maxSizeMB = ((props.item.filesize || 20000000) / (1024 * 1024)).toFixed(2);
+                                props.item?.handleFileError &&
+                                    props.item?.handleFileError(`File size should be less than ${maxSizeMB}MB`);
+                                event.target.value = ''; // Clear the file input
+                                props.setValue(props.item?.name, null);
+                                props.setValue(props.item?.name + 'Name', '');
+                                return;
+                            }
+                            console.log(props.item?.name, ':props.item?.name');
+                            props.setValue(props.item?.name, file);
+                            props.setValue(props.item?.name + 'Name', fileName);
+                            props.item.onChangeSetFileFn &&
+                                props.item.onChangeSetFileFn(file);
+                        }, sx: { width: '100%' } })] }), jsx(FormBottomField, { ...props })] }));
+};
+
+export { FormRenderFileUpload as default };

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

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

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

@@ -0,0 +1,86 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Box, TextField } from '@mui/material';
+import { useRef, 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';
+
+const FormRenderMultiFileUpload = ({ props, variant, }) => {
+    // const getDocument: Document = document;
+    const inputRef = useRef(null);
+    const watched = useWatch({ control: props.control, name: props.item.name });
+    useEffect(() => {
+        if (watched === null || watched === undefined) {
+            if (inputRef.current)
+                inputRef.current.value = '';
+        }
+    }, [watched]);
+    const isError = !!props.errors?.[props.item.name];
+    const isShowBorderError = isError;
+    return (jsxs(Fragment, { children: [jsxs(Box, { paddingLeft: '4px', sx: { ...props.item.sx }, children: [props.item?.label && (jsx(Box, { sx: { fontSize: '10px;' }, children: renderLabel(variant, props, true) })), jsx(TextField, { type: "file", id: props.item.name, error: isShowBorderError, inputRef: inputRef, 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'
+                                            : '',
+                            'aria-labelledby': `${props.item.name}-label`,
+                            'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
+                            'aria-required': props.item.required ? true : undefined,
+                        }, onChange: (event) => {
+                            const file = event.target.files;
+                            const fileName = file && file.length > 0
+                                ? Array.from(file)
+                                    .map((item) => item.name)
+                                    .join(',')
+                                : null;
+                            const allowedExtensions = {
+                                excel: ['xls', 'xlsx'],
+                                pdf: ['pdf'],
+                                image: ['jpg', 'jpeg', 'png'],
+                                all: ['pdf', 'jpg', 'jpeg', 'png', 'xls', 'xlsx', 'doc', 'docx', 'zip'],
+                                zip: ['zip'],
+                                document: ['doc', 'docx', 'pdf'],
+                            };
+                            let fileExtension = null;
+                            if (fileName) {
+                                const ext = fileName.split('.').pop();
+                                if (ext) {
+                                    fileExtension = ext.toLowerCase();
+                                }
+                            }
+                            const validExtensions = props.item.fileType === 'excel'
+                                ? allowedExtensions.excel
+                                : props.item.fileType === 'pdf'
+                                    ? allowedExtensions.pdf
+                                    : props.item.fileType === 'image'
+                                        ? allowedExtensions.image
+                                        : allowedExtensions.all;
+                            if (props.item?.fileType && fileExtension && !validExtensions.includes(fileExtension)) {
+                                props.item?.handleFileError &&
+                                    props.item?.handleFileError(`Please upload ${allowedExtensions[props.item.fileType].join(', ')} files only`);
+                                event.target.value = ''; // Clear the file input\
+                                props.setValue(props.item?.name, null);
+                                props.setValue(props.item?.name + 'Name', '');
+                                return;
+                            }
+                            else if (event.target.files[event.target.files.length - 1].size > 20000000) {
+                                props.item?.handleFileError &&
+                                    props.item?.handleFileError(`File size should be less than 20MB`);
+                                event.target.files = null; // Clear the file input
+                                props.setValue(props.item?.name, null);
+                                props.setValue(props.item?.name + 'File', []);
+                                return;
+                            }
+                            const fileArray = Array.from(file);
+                            props.setValue(props.item?.name, fileName);
+                            props.setValue(props.item?.name + 'File', fileArray);
+                        }, sx: { width: '100%' } })] }), jsx(FormBottomField, { ...props })] }));
+};
+
+export { FormRenderMultiFileUpload as default };

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

@@ -0,0 +1,6 @@
+import { FormRenderProps, VariantProps } from '../../../utils';
+declare const MultiFileWithPreview: ({ props, variant, }: {
+    props: FormRenderProps;
+    variant: VariantProps;
+}) => import("react/jsx-runtime").JSX.Element;
+export default MultiFileWithPreview;