funda-ui 4.7.740 → 4.7.750

package/lib/esm/EventCalendarTimeline/index.tsx

@@ -13,8 +13,6 @@ import { getTodayDate, getCalendarDate, isValidDate, padZero, getDateDetails, ge
 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,
@@ -324,6 +322,8 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
         return tableCellMinWidth;
     }, [tableCellMinWidth, appearanceMode, headerShowWeek]);
 
+    
+
     const findMondayAndTruncate = (dates: string[]) => {
         const _res = dates.map((s: string) => new Date(s));
         // Find the first Monday in the sequence
@@ -389,7 +389,45 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
     //================================================================
     // Weekly calendar
     //================================================================
+    const hasInitializedRef = useRef<boolean>(false);
+
+    // Helper function to calculate offset from a specific date
+    const calculateWeekOffset = (targetDate?: Date) => {
+        const _curDate = typeof targetDate === 'undefined' ? date : targetDate;
+
+        // 1. Get the current selected date (from customTodayDate or user selection)
+        const selected = new Date(_curDate.getFullYear(), _curDate.getMonth(), _curDate.getDate());
+        
+        // 2. Get the reference Monday of the "actual current week" (offset 0)
+        const currentWeekDates = getWeekDatesFromMon(0);
+        const currentMonday = new Date(currentWeekDates[0]);
+        currentMonday.setHours(0, 0, 0, 0);
+
+        // 3. Calculate the difference in days
+        const diffTime = selected.getTime() - currentMonday.getTime();
+        const diffDays = Math.round(diffTime / (1000 * 60 * 60 * 24));
+
+        // 4. Update the week offset automatically
+        const offset = Math.floor(diffDays / 7);
+        setWeekOffset(offset);
+    }
+    // Initialize weekOffset based on customTodayDate instead of default 0
     const [weekOffset, setWeekOffset] = useState<number>(0);
+
+    // Sync weekOffset whenever date changes or mode switches to 'week'
+    useEffect(() => {
+        if (!hasInitializedRef.current) {
+            const customDateValid = isValidDate(customTodayDate as never);
+            if (customDateValid) {
+                calculateWeekOffset(new Date(customTodayDate as string));
+                setDate(new Date(customTodayDate as string));
+                hasInitializedRef.current = true;
+            }
+        } 
+    }, [date, appearanceMode, customTodayDate]);
+
+
+
     const handleNextWeek = () => {
         setWeekOffset(weekOffset + 1);
         return weekOffset + 1;
@@ -1169,7 +1207,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
 
     }
-    function handleDayChange(e: React.MouseEvent, currentDay: number) {
+    function handleDayChange(e: React.MouseEvent | null, currentDay: number) {
         // Avoid triggering a full table re-render when the clicked cell is already
         // the active day; this becomes expensive with large datasets.
         if (
@@ -1260,14 +1298,14 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
     function handleAppearanceChange(e: React.MouseEvent) {
         const _mode = (e.target as any).dataset.mode;
         setAppearanceMode(_mode);
-
-        //
+        
+        // The useEffect above will handle the weekOffset calculation 
+        // as soon as appearanceMode becomes 'week'
         onChangeAppearanceMode?.(_mode);
     }
 
 
 
-
     function handleShowWinYear() {
         setWinYear((prevState: boolean) => !prevState);
     }
@@ -1356,7 +1394,9 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                             data-date={_dateShow}
                             data-day={_dateDayShow}
                             data-week={weekDay}
-                            style={{ minWidth: CELL_MIN_W + 'px' }}
+
+                            // FIX: In 'week' mode, we don't want a hardcoded minWidth 
+                            style={appearanceMode === 'week' ? undefined : { minWidth: CELL_MIN_W + 'px' }}  
                             onMouseEnter={(e: React.MouseEvent) => {
                                 onCellMouseEnter?.(e);
                             }}
@@ -2242,6 +2282,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
     }
 
+
     // Dual RAF survival test
     /*
         A single RAF only guarantees "moving to the next frame." 
@@ -2304,15 +2345,30 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
     }, [date]);
 
 
+    // Guaranteed year change triggered by the next/prev buttons
+    const isFirstRenderRef = useRef<boolean>(true);
+    const prevYearRef = useRef<number>(year); // Record the year of the last occurrence.
     useEffect(() => {
-        // Guaranteed year change triggered by the front and rear buttons
-        onChangeYear?.({
-            day: padZero(day),
-            month: padZero(month + 1),
-            year: year.toString()
-        });
-    }, [year]);
+        // 1. Intercept the first render (Mount)
+        if (isFirstRenderRef.current) {
+            isFirstRenderRef.current = false;
+            return;
+        }
+
+        // 2. It only triggers when the year actually changes
+        if (year !== prevYearRef.current) {
+            onChangeYear?.({
+                day: padZero(day),
+                month: padZero(month + 1),
+                year: year.toString()
+            });
 
+            // Update the old year ref for next comparison
+            prevYearRef.current = year;
+        }
+    }, [year, month, day, onChangeYear]);
+
+   
 
     useEffect(() => {
 

package/lib/esm/Utils/libs/date.ts

@@ -1,3 +1,47 @@
+
+/**
+ * Get the Sunday of the week of the specific date, and return to the 
+ * end of January next year if it is New Year's Eve
+ * @param {Date | String} v 
+ * @returns {String}  yyyy-MM-dd
+ *
+ * @example
+ * getSpecialDateEnd('2025-12-29'); // 2026-01-31
+ * getSpecialDateEnd('2025-12-17'); // 2025-12-31
+ */
+/**
+ * Calculates a special end date based on the week and month logic.
+ * @param v - The input date (Date object, string, or timestamp)
+ * @returns A formatted date string (YYYY-MM-DD)
+ */
+function getSpecialDateEnd(v: Date | string | number): string {
+    // Assuming dateFormat returns a Date object based on your logic
+    const date: Date = new Date(v); 
+    
+    // getWeekDatesByDate should return Date[]
+    const weekDates: Date[] = getWeekDatesByDate(v); 
+    const sunday: Date = weekDates[6]; // Sunday of that week
+    
+    // If Sunday of this week rolls into the next year
+    if (sunday.getFullYear() > date.getFullYear()) {
+        const year = sunday.getFullYear();
+        
+        // Get the last day of January of that new year
+        // Note: month 1 in 'new Date' is February, day 0 gives the last day of Jan
+        const lastDay = new Date(year, 1, 0).getDate();
+        
+        // Using template literals for the return string
+        return `${year}-01-${lastDay.toString().padStart(2, '0')}`;
+    }
+    
+    // Default: Return the last day of the current month
+    // We create a date for the "0th" day of the next month to get the end of current month
+    const endOfCurrentMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0);
+    
+    return getCalendarDate(endOfCurrentMonth);
+}
+
+
 /**
  * The check string contains only hours, minutes, and seconds
  * @returns {Boolean}  
@@ -497,20 +541,44 @@ function getMonthDates(year: number, month: number) {
     return dates;
 }
 
+
 /**
- * Get the date of the specified week (From Sunday)
- * @param {Number} weekOffset 
- * @returns {Array<Date>} 
+ * Get all 7 dates for a specific week starting from Sunday.
+ * * @param {Number} weekOffset - The offset of weeks from the current week.
+ * 0: Current week
+ * -1: Previous week
+ * 1: Next week
+ * @returns {Array<Date>} - An array containing 7 Date objects from Sunday to Saturday.
  */
-function getWeekDatesFromSun(weekOffset: number) {
-    const dates: Array<Date> = [];
-    const currentDate = new Date();
+/*
+// Demo 1: Get dates for the current week (Sunday Start)
+const currentWeekSun = getWeekDatesFromSun(0);
+console.log('Sunday (Start):', currentWeekSun[0].toLocaleDateString());
+console.log('Saturday (End):', currentWeekSun[6].toLocaleDateString());
 
-    // Calculate the date of Sunday
-    const dayOfWeek = currentDate.getDay(); // 0 is Sunday
-    currentDate.setDate(currentDate.getDate() - dayOfWeek + weekOffset * 7);
+// Demo 2: Get the date range for the previous week
+const lastWeek = getWeekDatesFromSun(-1);
+const rangeStart = lastWeek[0].toISOString().split('T')[0];
+const rangeEnd = lastWeek[6].toISOString().split('T')[0];
+console.log(`Previous Week Range: ${rangeStart} to ${rangeEnd}`);
+
+// Demo 3: Checking for Month/Year transitions
+const transitionWeek = getWeekDatesFromSun(0).map(d => d.toDateString());
+console.log('Transition Week Dates:', transitionWeek);
+
+*/
+function getWeekDatesFromSun(weekOffset: number): Date[] {
+    const dates: Date[] = [];
+    // Start with a clean date (midnight) to avoid timezone/DST shifts during calculation
+    const currentDate: Date = new Date();
+    currentDate.setHours(0, 0, 0, 0);
+
+    const dayOfWeek: number = currentDate.getDay(); 
+    
+    // Move to the Sunday of the current week, then apply the week offset
+    // Formula: Current Date - Current Day Index + (Offset * 7)
+    currentDate.setDate(currentDate.getDate() - dayOfWeek + (weekOffset * 7));
 
-    // Get the date of the week
     for (let i = 0; i < 7; i++) {
         const date = new Date(currentDate);
         date.setDate(currentDate.getDate() + i);
@@ -520,21 +588,48 @@ function getWeekDatesFromSun(weekOffset: number) {
     return dates;
 }
 
+
 /**
- * Get the date of the specified week (From Monday)
- * @param {Number} weekOffset 
- * @returns {Array<Date>} 
+ * Get all 7 dates for a specific week starting from Monday.
+ * * @param {Number} weekOffset - The offset of weeks from the current week. 
+ * 0: Current week
+ * -1: Previous week
+ * 1: Next week
+ * @returns {Array<Date>} - An array containing 7 Date objects from Monday to Sunday.
  */
-function getWeekDatesFromMon(weekOffset: number) {
-    const dates: Array<Date> = [];
-    const currentDate = new Date();
+/*
+// Demo 1: Get dates for the current week
+const currentWeek = getWeekDatesFromMon(0);
+console.log('Monday of this week:', currentWeek[0].toLocaleDateString());
+console.log('Sunday of this week:', currentWeek[6].toLocaleDateString());
+
+// Demo 2: Get dates for the next week
+const nextWeek = getWeekDatesFromMon(1);
+console.log('Monday of next week:', nextWeek[0].toLocaleDateString());
+
+// Demo 3: Format the output as YYYY-MM-DD
+const formattedWeek = getWeekDatesFromMon(0).map(date => {
+    const y = date.getFullYear();
+    const m = String(date.getMonth() + 1).padStart(2, '0');
+    const d = String(date.getDate()).padStart(2, '0');
+    return `${y}-${m}-${d}`;
+});
+console.log('Formatted Week Array:', formattedWeek);
+// Result: ["2025-12-29", "2025-12-30", ..., "2026-01-04"]
+*/
+function getWeekDatesFromMon(weekOffset: number): Date[] {
+    const dates: Date[] = [];
+    const currentDate: Date = new Date();
 
-    // Set the date to Monday
+    // Calculate the difference to get to Monday of the current week
+    // If today is Sunday (0), we go back 6 days. Otherwise, go to (1 - currentDay).
     const dayOfWeek = currentDate.getDay();
     const diffToMonday = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
-    currentDate.setDate(currentDate.getDate() + diffToMonday + weekOffset * 7);
+    
+    // Apply the Monday offset and the week offset (7 days per week)
+    currentDate.setDate(currentDate.getDate() + diffToMonday + (weekOffset * 7));
 
-    // Get the date of the week
+    // Generate the 7 days of the week
     for (let i = 0; i < 7; i++) {
         const date = new Date(currentDate);
         date.setDate(currentDate.getDate() + i);
@@ -544,7 +639,42 @@ function getWeekDatesFromMon(weekOffset: number) {
     return dates;
 }
 
+/**
+ * Get the date list of the week for the specified date (starting from Monday)
+ * @param {Date | String} v - The specified date
+ * @returns {Array<Date>} - An array containing 7 Date objects
+ */
+function getWeekDatesByDate(v: Date | string | number): Date[] {
+    const dates: Date[] = [];
+    
+    // Ensure we are working with a Date object. 
+    // If 'dateFormat' was a custom utility in your JS, replace 'new Date(v)' with that utility.
+    const currentDate = new Date(v);
+
+    // Get the day of the week (0 for Sunday, 1 for Monday, ..., 6 for Saturday)
+    const dayOfWeek = currentDate.getDay(); 
+    
+    // Calculate difference to Monday: if Sunday (0) subtract 6 days, otherwise subtract (day - 1)
+    const diffToMonday = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
+    
+    // Create the Monday starting point
+    const monday = new Date(currentDate);
+    monday.setDate(currentDate.getDate() + diffToMonday);
+
+    // Generate the 7 days of the week
+    for (let i = 0; i < 7; i++) {
+        const date = new Date(monday);
+        date.setDate(monday.getDate() + i);
+        dates.push(date);
+    }
+    
+    return dates;
+}
+
 export {
+    getSpecialDateEnd,
+
+    //
     isTimeString,
     getNow,
     padZero,
@@ -594,5 +724,6 @@ export {
     // get dates list
     getMonthDates,
     getWeekDatesFromSun,
-    getWeekDatesFromMon
-}
+    getWeekDatesFromMon,
+    getWeekDatesByDate
+}

package/package.json

@@ -1 +1 @@
-{"author":"UIUX Lab","email":"uiuxlab@gmail.com","name":"funda-ui","version":"4.7.740","description":"React components using pure Bootstrap 5+ which does not contain any external style and script libraries.","repository":{"type":"git","url":"git+https://github.com/xizon/funda-ui.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["bootstrap","react-bootstrap","react-components","components","components-react","react-bootstrap-components","react","funda-ui","fundaui","uikit","ui-kit","ui-components"],"bugs":{"url":"https://github.com/xizon/funda-ui/issues"},"homepage":"https://github.com/xizon/funda-ui#readme","main":"all.js","license":"MIT","dependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"types":"all.d.ts","publishConfig":{"directory":"lib"},"directories":{"lib":"lib"}}
+{"author":"UIUX Lab","email":"uiuxlab@gmail.com","name":"funda-ui","version":"4.7.750","description":"React components using pure Bootstrap 5+ which does not contain any external style and script libraries.","repository":{"type":"git","url":"git+https://github.com/xizon/funda-ui.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["bootstrap","react-bootstrap","react-components","components","components-react","react-bootstrap-components","react","funda-ui","fundaui","uikit","ui-kit","ui-components"],"bugs":{"url":"https://github.com/xizon/funda-ui/issues"},"homepage":"https://github.com/xizon/funda-ui#readme","main":"all.js","license":"MIT","dependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"types":"all.d.ts","publishConfig":{"directory":"lib"},"directories":{"lib":"lib"}}