funda-ui 4.7.625 → 4.7.711

package/lib/esm/EventCalendarTimeline/index.tsx

@@ -14,7 +14,6 @@ import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 import getOs from 'funda-utils//dist/cjs/os';
 
 
-
 export interface EventsValueConfig {
     id: string | number;
     date: string,
@@ -71,7 +70,7 @@ export type EventCalendarTimelineProps = {
     cellAddBtnLabel?: string | React.ReactNode;
     forwardAndBackFillDisabled?: boolean;
     draggable?: boolean;
-    showWeek?: boolean;
+    headerShowWeek?: boolean;
     autoScroll?: boolean;
     onChangeDate?: (e: any, currentData: any) => void;
     onChangeMonth?: (currentData: any) => void;
@@ -115,7 +114,7 @@ export type EventCalendarTimelineProps = {
 
     // table
     tableListSectionTitle?: string | React.ReactNode;
-    tableCellMinWidth?: number;
+    tableCellMinWidth?: number | ((mode: 'week' | 'month') => number);
 
     // tooltip
     tableTooltipDirection?: string;
@@ -161,7 +160,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
         cellAddBtnLabel,
         forwardAndBackFillDisabled,
         draggable,
-        showWeek,
+        headerShowWeek,
         autoScroll,
         onChangeDate,
         onChangeMonth,
@@ -272,9 +271,8 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
     // table grid
     const AUTO_SCROLL = autoScroll || false;
-    const SHOW_WEEK = showWeek || false;
+    const HEADER_SHOW_WEEK = headerShowWeek || false;
     const BODY_DRAG = draggable || false;
-    const CELL_MIN_W = typeof tableCellMinWidth === 'undefined' ? (SHOW_WEEK ? 100 : 50) : tableCellMinWidth;
     const tableGridRef = useRef<any>(null);
     const tableGridHeaderRef = useRef<any>(null);
     const scrollHeaderRef = useRef(null);
@@ -301,6 +299,16 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
     // appearance mode
     const [appearanceMode, setAppearanceMode] = useState<string>(appearance);
 
+    // Calculate CELL_MIN_W based on appearanceMode and tableCellMinWidth
+    const CELL_MIN_W = useMemo(() => {
+        if (typeof tableCellMinWidth === 'undefined') {
+            return (headerShowWeek || false) ? 100 : 50;
+        }
+        if (typeof tableCellMinWidth === 'function') {
+            return tableCellMinWidth(appearanceMode as 'week' | 'month');
+        }
+        return tableCellMinWidth;
+    }, [tableCellMinWidth, appearanceMode, headerShowWeek]);
 
     const findMondayAndTruncate = (dates: string[]) => {
         const _res = dates.map((s: string) => new Date(s));
@@ -1246,7 +1254,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
                 // week day
                 const weekDay = item.week[i];
-                const _weekDayStr = SHOW_WEEK ? <span dangerouslySetInnerHTML={{
+                const _weekDayStr = HEADER_SHOW_WEEK ? <span dangerouslySetInnerHTML={{
                     __html: item.weekDisplay[i]
                 }} /> : null;
 
@@ -1346,7 +1354,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                                         'disabled': !isInteractive
                                     }
                                 )}
-                                style={{ width: (CELL_MIN_W - 1) + 'px' }}
+                                style={{ width: (CELL_MIN_W as number - 1) + 'px' }}
                             >
                                 
                                 {d}
@@ -1624,7 +1632,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                                         'disabled': !isInteractive
                                     }
                                 )}
-                                style={{ width: (CELL_MIN_W - 1) + 'px' }}
+                                style={{ width: (CELL_MIN_W as number - 1) + 'px' }}
                             >
 
                                 {/*++++++++++++++++ EVENT ++++++++++++++++*/}
@@ -1856,18 +1864,26 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
         const tableGridEl: any = tableGridRef.current;
 
         // initialize cell height
-        const headerTitleTrElements = tableGridEl.querySelector('.custom-event-tl-table__datagrid-body__title tbody').getElementsByTagName('tr');
-        const trElements = tableGridEl.querySelector('.custom-event-tl-table__datagrid-body__content tbody').getElementsByTagName('tr');
+        const headerTitleTbody = tableGridEl.querySelector('.custom-event-tl-table__datagrid-body__title tbody');
+        const contentTbody = tableGridEl.querySelector('.custom-event-tl-table__datagrid-body__content tbody');
+        if (!headerTitleTbody || !contentTbody) return;
 
+        const headerTitleTrElements = headerTitleTbody.getElementsByTagName('tr');
+        const trElements = contentTbody.getElementsByTagName('tr');
+
+        // Reset any previously set inline heights so we measure natural heights.
         for (let i = 0; i < headerTitleTrElements.length; i++) {
+            // set to 'auto' (or remove inline style) to allow shrink
+            headerTitleTrElements[i].style.height = 'auto';
+            if (trElements[i]) trElements[i].style.height = 'auto';
 
             const targetElement = headerTitleTrElements[i].offsetHeight > trElements[i].offsetHeight ? headerTitleTrElements[i] : trElements[i];
             const tdOHeight = window.getComputedStyle(targetElement).height;
             headerTitleTrElements[i].style.height = tdOHeight;
             trElements[i].style.height = tdOHeight;
-
         }
 
+
     }
    
     function tableGridInit() {
@@ -1877,7 +1893,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
         const { forwardFillTotal, list: cellsList } = getCells();
         const tableGridEl: any = tableGridRef.current;
-        let _curCellMinWidth: number = CELL_MIN_W;
+        let _curCellMinWidth: number = CELL_MIN_W as number;
         let _curColCount: number = FILL_BLANK_DATE_DISABLD ? days[month] : 7 * cellsList.length;
 
 
@@ -2194,6 +2210,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
         // Call a function when the list has been rendered completely
         onListRenderComplete?.();
 
+
     }, [eventsValue, customTodayDate, appearanceMode]);
 
 

package/lib/esm/File/index.tsx

@@ -8,6 +8,8 @@ import {
 } from 'funda-utils/dist/cjs/buffer';
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
+
+
 export type FileProps = {
     contentRef?: React.ForwardedRef<any>;
     wrapperClassName?: string;
@@ -41,6 +43,15 @@ export type FileProps = {
     fetchFuncAsync?: any;
     fetchFuncMethod?: string;
     fetchFuncMethodParams?: any[];
+    formDataAppend?: (formData: FormData, files: FileList) => void;
+    /** Enable chunked upload for large files */
+    enableChunkedUpload?: boolean;
+    /** Chunk size in bytes (default: 2MB) */
+    chunkSize?: number;
+    /** Custom function to append chunk data to FormData. Receives (formData: FormData, chunk: Blob, chunkIndex: number, totalChunks: number, file: File) */
+    chunkDataAppend?: (formData: FormData, chunk: Blob, chunkIndex: number, totalChunks: number, file: File) => void;
+    /** Callback for chunk upload progress. Receives (uploadedBytes: number, totalBytes: number, file: File, chunkIndex: number, totalChunks: number) */
+    onChunkProgress?: (uploadedBytes: number, totalBytes: number, file: File, chunkIndex: number, totalChunks: number) => void;
     onChange?: (e: any, e2: any, value: any) => void;
     onComplete?: (e: any, e2: any, callback: any, incomingData: string | null | undefined) => void;
     onProgress?: (files: any, e: any, e2: any) => void;
@@ -79,9 +90,17 @@ const File = forwardRef((props: FileProps, externalRef: any) => {
         fetchFuncAsync,
         fetchFuncMethod,
         fetchFuncMethodParams,
+        formDataAppend,
         onChange,
         onComplete,
         onProgress,
+        
+        // Upload file in chunks
+        enableChunkedUpload,
+        chunkSize = 2 * 1024 * 1024, // Default 2MB
+        chunkDataAppend,
+        onChunkProgress,
+
         ...attributes
     } = props;
 
@@ -144,10 +163,9 @@ const File = forwardRef((props: FileProps, externalRef: any) => {
 
         let res = {};
         if (typeof window === 'undefined') return res;
-        
-   
+
         try {
-            const response = await fetch(url + '?' + new URLSearchParams(fetchParams as any), {
+            const response = await fetch(typeof fetchParams !== 'undefined' ? url + '?' + new URLSearchParams(fetchParams as any) : url, {
                 method: methord,
                 body: data,
                 ...rest
@@ -165,6 +183,75 @@ const File = forwardRef((props: FileProps, externalRef: any) => {
 
     }
 
+    /**
+     * Upload file in chunks
+     */
+    async function uploadFileInChunks(file: File, url: string, method: string = 'POST'): Promise<any> {
+        const totalChunks = Math.ceil(file.size / chunkSize);
+        const uploadId = `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+        let uploadedBytes = 0;
+
+        // Upload each chunk sequentially
+        for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex++) {
+            const start = chunkIndex * chunkSize;
+            const end = Math.min(start + chunkSize, file.size);
+            const chunk = file.slice(start, end);
+
+            const formData = new FormData();
+            
+            if (chunkDataAppend) {
+                // Use custom chunk data append function
+                chunkDataAppend(formData, chunk, chunkIndex, totalChunks, file);
+            } else {
+                // Default chunk upload format
+                formData.append('chunk', chunk);
+                formData.append('chunkIndex', chunkIndex.toString());
+                formData.append('totalChunks', totalChunks.toString());
+                formData.append('uploadId', uploadId);
+                formData.append('fileName', file.name);
+                formData.append('fileSize', file.size.toString());
+                formData.append('fileType', file.type);
+            }
+
+            // Update progress
+            uploadedBytes += (end - start);
+            onChunkProgress?.(uploadedBytes, file.size, file, chunkIndex, totalChunks);
+
+            // Upload chunk
+            const response: any = await fetchDataDefault(
+                url,
+                formData,
+                method,
+                {
+                    headers: { 'Content-Type': 'multipart/form-data' }
+                }
+            );
+
+            // Check if chunk upload failed
+            if (response.error) {
+                throw new Error(`Chunk ${chunkIndex + 1}/${totalChunks} upload failed: ${response.error}`);
+            }
+
+            // If server returns a specific response indicating chunk upload success/failure, handle it
+            if (response.code !== undefined && response.code !== 0 && response.code !== 200) {
+                throw new Error(`Chunk ${chunkIndex + 1}/${totalChunks} upload failed: ${response.message || 'Unknown error'}`);
+            }
+        }
+
+        // After all chunks are uploaded, return the final response
+        // The server should merge chunks and return the final result
+        return {
+            code: 0,
+            message: 'Upload completed',
+            data: {
+                uploadId,
+                fileName: file.name,
+                fileSize: file.size,
+                totalChunks
+            }
+        };
+    }
+
 
     function handleLabelEnter(event: any) {
         event.currentTarget.getElementsByTagName('button')[0].className = labelHoverClassName ? labelHoverClassName : 'btn btn-primary';
@@ -192,26 +279,70 @@ const File = forwardRef((props: FileProps, externalRef: any) => {
         setProgressing(true);
 
 
+        // Use the default "fetch()" method to handle file references
         if (fetchUrl) {
 
-            const formData = new FormData();
-            formData.append('action', 'upload_plug_action');
+            // Check if chunked upload is enabled
+            if (enableChunkedUpload) {
+                // Upload files in chunks
+                (async () => {
+                    try {
+                        const uploadPromises: Promise<any>[] = [];
+                        
+                        for (let i = 0; i < curFiles.length; i++) {
+                            const file = curFiles[i];
+                            uploadPromises.push(uploadFileInChunks(file, fetchUrl, fetchMethod ? fetchMethod : 'POST'));
+                        }
 
-            for (let i = 0; i < curFiles.length; i++) {
-                formData.append("clientFiles", curFiles[i]);
-            }
+                        const results = await Promise.all(uploadPromises);
+                        
+                        // Combine results from all files
+                        const jsonData = {
+                            code: 0,
+                            message: 'All files uploaded successfully',
+                            data: results
+                        };
+                        
+                        onComplete?.(fileInputRef.current, submitRef.current, jsonData, incomingData);
+                        setProgressing(false);
+                        resetDefaultVal();
+                    } catch (error: any) {
+                        const errorResponse = {
+                            code: -1,
+                            message: error.message || 'Upload failed',
+                            error: error
+                        };
+                        onComplete?.(fileInputRef.current, submitRef.current, errorResponse, incomingData);
+                        setProgressing(false);
+                    }
+                })();
+            } else {
+                // Original non-chunked upload
+                const formData = new FormData();
+                
+                if (formDataAppend) {
+                    // Use custom formData.append function
+                    formDataAppend(formData, curFiles);
+                } else {
+                    // Default behavior
+                    formData.append('action', 'upload_plug_action');
+                    for (let i = 0; i < curFiles.length; i++) {
+                        formData.append("clientFiles", curFiles[i]);
+                    }
+                }
 
-            fetchDataDefault(fetchUrl, formData, fetchMethod ? fetchMethod : 'POST', {
-                headers: { 'Content-Type': 'multipart/form-data' }
-            }).then(function (response: any) {
-                const jsonData = response.data;
-                onComplete?.(fileInputRef.current, submitRef.current, jsonData, incomingData);
-                setProgressing(false);
+                fetchDataDefault(fetchUrl, formData, fetchMethod ? fetchMethod : 'POST', {
+                    headers: { 'Content-Type': 'multipart/form-data' }
+                }).then(function (response: any) {
+                    const jsonData = response;
+                    onComplete?.(fileInputRef.current, submitRef.current, jsonData, incomingData);
+                    setProgressing(false);
 
-                // update default value
-                resetDefaultVal();
+                    // update default value
+                    resetDefaultVal();
 
-            });
+                });
+            }
         } else {
 
 
@@ -322,12 +453,6 @@ const File = forwardRef((props: FileProps, externalRef: any) => {
         setDefaultValue(null);
 
 
-        //----
-        //remove focus style
-        if (val === '') {
-            rootRef.current?.classList.remove('focus');
-        }
-
         //
         onChange?.(fileInputRef.current, submitRef.current, fileInputRef.current.files);
 

package/lib/esm/Input/index.tsx

@@ -354,8 +354,6 @@ const Input = forwardRef((props: InputProps, externalRef: any) => {
 
 
     function handleFocus(event: FocusEvent<HTMLInputElement>) {
-        rootRef.current?.classList.add('focus');
-
         //
         if (valRef.current) {
             onFocus?.(event, onComposition, valRef.current);
@@ -365,13 +363,6 @@ const Input = forwardRef((props: InputProps, externalRef: any) => {
     function handleChange(event: ChangeEvent<HTMLInputElement> | KeyboardEvent<HTMLInputElement> | null, curVal: string) {
         setChangedVal(curVal);
 
-   
-        //----
-        //remove focus style
-        if (curVal === '') {
-            rootRef.current?.classList.remove('focus');
-        }
-
         //
         if (valRef.current) {
             onChange?.(event, onComposition, valRef.current, curVal);
@@ -390,13 +381,6 @@ const Input = forwardRef((props: InputProps, externalRef: any) => {
         const el = event.target;
         const val = event.target.value;
 
-
-        //----
-        //remove focus style
-        if (val === '') {
-            rootRef.current?.classList.remove('focus');
-        }
-
         //
         if (valRef.current) {
             onBlur?.(event, onComposition, valRef.current);
@@ -520,7 +504,12 @@ const Input = forwardRef((props: InputProps, externalRef: any) => {
     return (
         <>
 
-            <div className={clsWrite(wrapperClassName, 'mb-3 position-relative')} ref={rootRef}>
+            <div className={combinedCls(
+                clsWrite(wrapperClassName, 'mb-3 position-relative'),
+                {
+                    'focus-floating': changedVal !== ''
+                }
+            )} ref={rootRef}>
                 {label ? <>{typeof label === 'string' ? <label htmlFor={idRes} className="form-label" dangerouslySetInnerHTML={{ __html: `${label}` }}></label> : <label htmlFor={idRes} className="form-label">{label}</label>}</> : null}
 
                 <div className={combinedCls(

package/lib/esm/ModalDialog/index.tsx

@@ -14,7 +14,6 @@ import {
 
 
 
-
 declare global {
     interface Window {
         curVideo?: any;

package/lib/esm/NativeSelect/index.tsx

@@ -260,7 +260,7 @@ const NativeSelect = forwardRef((props: NativeSelectProps, externalRef: any) =>
 
     //
     function handleFocus(event: any) {
-        rootRef.current?.classList.add('focus');
+        rootRef.current?.classList.add('focus-floating');
 
         //
         onFocus?.(event);    
@@ -283,7 +283,7 @@ const NativeSelect = forwardRef((props: NativeSelectProps, externalRef: any) =>
 
         //----
         //remove focus style
-        rootRef.current?.classList.remove('focus');
+        rootRef.current?.classList.remove('focus-floating');
 
         //
 		if ( typeof(onChange) === 'function' ) {
@@ -298,7 +298,7 @@ const NativeSelect = forwardRef((props: NativeSelectProps, externalRef: any) =>
 
         //----
         //remove focus style
-        rootRef.current?.classList.remove('focus');
+        rootRef.current?.classList.remove('focus-floating');
 
         //
         onBlur?.(event);

package/lib/esm/NumberInput/index.tsx

@@ -183,7 +183,6 @@ const NumberInput = forwardRef((props: NumberInputProps, externalRef: any) => {
 
     
     function handleFocus(event: FocusEvent<HTMLInputElement>) {
-        rootRef.current?.classList.add('focus');
 
         //
         onFocus?.(event, valRef.current);    
@@ -220,12 +219,7 @@ const NumberInput = forwardRef((props: NumberInputProps, externalRef: any) => {
         setChangedVal(resToInput);
 
 
-        //----
-        //remove focus style
-        if (val === '') {
-            rootRef.current?.classList.remove('focus');
-        }
-        
+
         //
         onChange?.(event, valRef.current, Number(!isNumeric(newVal) ? '0' : resToInput));
         
@@ -247,13 +241,6 @@ const NumberInput = forwardRef((props: NumberInputProps, externalRef: any) => {
             setChangedVal('0');
         }
 
-
-        //----
-        //remove focus style
-        if (val === '') {
-            rootRef.current?.classList.remove('focus');
-        }
-
         //
         onBlur?.(event, valRef.current);
 
@@ -286,7 +273,12 @@ const NumberInput = forwardRef((props: NumberInputProps, externalRef: any) => {
     return (
         <>
 
-            <div className={clsWrite(wrapperClassName, 'mb-3 position-relative')} ref={rootRef}>
+            <div className={combinedCls(
+                clsWrite(wrapperClassName, 'mb-3 position-relative'),
+                {
+                    'focus-floating': changedVal !== ''
+                }
+            )} ref={rootRef}>
                 {label ? <>{typeof label === 'string' ? <label htmlFor={idRes} className="form-label" dangerouslySetInnerHTML={{__html: `${label}`}}></label> : <label htmlFor={idRes} className="form-label">{label}</label>}</> : null}
 
                 <div className="position-relative">