funda-ui 4.7.115 → 4.7.125

package/lib/esm/SplitterPanel/index.tsx

@@ -0,0 +1,174 @@
+import React, { useEffect, useState, useRef, useImperativeHandle } from 'react';
+
+import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
+import useIsMobile from 'funda-utils/dist/cjs/useIsMobile';
+
+
+interface SplitterPanelSubProps {
+    children: React.ReactNode;
+  }
+  
+  const SplitterPanelLeft: React.FC<SplitterPanelSubProps> = ({ children }) => <>{children}</>;
+  const SplitterPanelRight: React.FC<SplitterPanelSubProps> = ({ children }) => <>{children}</>;
+  
+  interface SplitterPanelProps {
+      wrapperClassName?: string;
+      draggable?: boolean
+      initialWidth?: number;
+      minWidth?: number;
+      maxWidth?: number;
+      onDrag?: (type: 'dragStart' | 'dragEnd' | 'drag', leftWidth: number) => void; 
+      children?: React.ReactNode;
+  }
+  
+
+  const SplitterPanel: React.FC<SplitterPanelProps> & {
+    Left: typeof SplitterPanelLeft;
+    Right: typeof SplitterPanelRight;
+  } = (props) => {
+      const {
+          wrapperClassName,
+          draggable = true,
+          maxWidth,
+          minWidth = 100,
+          initialWidth = 200,
+          onDrag,
+          children
+      } = props;
+      
+    const containerRef = useRef<HTMLDivElement>(null);
+    const dividerRef = useRef<HTMLDivElement>(null);
+    const getDefaultWidth = () => {
+        if (typeof initialWidth === 'number') return initialWidth;
+        if (typeof minWidth === 'number') return minWidth;
+        return 200;
+    };
+    const [leftWidth, setLeftWidth] = useState<number>(getDefaultWidth());
+    const isMobile = useIsMobile();
+
+    // adjust split panel
+    const [dragging, setDragging] = useState<boolean>(false);
+
+    // Update only when initialWidth changes and is valid, and only when it has not been dragged
+    const hasDragged = useRef(false);
+
+    let left: React.ReactNode = null;
+    let right: React.ReactNode = null;
+
+    React.Children.forEach(children, (child) => {
+        if (!React.isValidElement(child)) return;
+        if (child.type === SplitterPanelLeft) left = child.props.children;
+        if (child.type === SplitterPanelRight) right = child.props.children;
+    });
+
+
+
+    // dragdrop
+    function handleSplitPanelsChange(clientX: number) {
+        if (!containerRef.current) return;
+        const containerLeft = containerRef.current.getBoundingClientRect().left;
+        const separatorXPosition = clientX - containerLeft;
+        const minWidthValue = minWidth || 100;
+        const maxWidthValue = maxWidth || window.innerWidth / 2;
+        if (dragging && separatorXPosition > minWidthValue && separatorXPosition < maxWidthValue) {
+            setLeftWidth(separatorXPosition);
+            onDrag?.('drag', separatorXPosition);
+            hasDragged.current = true;
+        }
+    }
+    function handleMouseDownSplitPanels(e: React.MouseEvent) {
+        setDragging(true);
+        onDrag?.('dragStart', leftWidth ?? initialWidth);
+    }
+    function handleTouchStartSplitPanels(e: React.TouchEvent) {
+        setDragging(true);
+        onDrag?.('dragStart', leftWidth ?? initialWidth);
+    }
+
+    function handleMouseMoveSplitPanels(e: MouseEvent) {
+        handleSplitPanelsChange(e.clientX);
+    }
+    function handleTouchMoveSplitPanels(e: TouchEvent) {
+        handleSplitPanelsChange(e.touches[0].clientX);
+    }
+
+    function handleMouseUpSplitPanels() {
+        setDragging(false);
+        onDrag?.('dragEnd', leftWidth ?? initialWidth);
+    }
+
+
+    useEffect(() => {
+        if (!draggable) return;
+    
+        // 事件监听用原生事件
+        document.addEventListener('mousemove', handleMouseMoveSplitPanels, false);
+        document.addEventListener('touchmove', handleTouchMoveSplitPanels, false);
+        document.addEventListener('mouseup', handleMouseUpSplitPanels, false);
+        document.addEventListener('touchend', handleMouseUpSplitPanels, false);
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMoveSplitPanels, false);
+            document.removeEventListener('touchmove', handleTouchMoveSplitPanels, false);
+            document.removeEventListener('mouseup', handleMouseUpSplitPanels, false);
+            document.removeEventListener('touchend', handleMouseUpSplitPanels, false);
+        };
+    }, [draggable, dragging]);
+
+    useEffect(() => {
+        if (!hasDragged.current && typeof initialWidth === 'number') {
+            setLeftWidth(initialWidth);
+        }
+    }, [initialWidth]);
+
+    return (
+        <>
+        
+        {isMobile ? <>
+            <div className={combinedCls(
+                'splitter-panel-vertical',
+                clsWrite(wrapperClassName, '')
+            )}>
+                <div className="splitter-panel-top">{left}</div>
+                <div className="splitter-panel-bottom">{right}</div>
+            </div>
+
+        </> : <>
+            <div
+                className={combinedCls(
+                    'splitter-panel',
+                    clsWrite(wrapperClassName, '')
+                )}
+                ref={containerRef}
+            >
+           
+                <div 
+                    className="splitter-panel-left"
+                    style={{ "--splitter-panel-left-w": `${leftWidth}px` } as React.CSSProperties}
+                >
+                    {left}
+                </div>
+             
+                {/*<!--DIVIDER-->*/}
+                <div
+                    ref={dividerRef}
+                    className={`splitter-panel-divider ${dragging ? 'dragging' : ''}`}
+                    onMouseDown={handleMouseDownSplitPanels}
+                    onTouchStart={handleTouchStartSplitPanels}
+                    onTouchEnd={handleMouseUpSplitPanels}
+                />
+                {/*<!--/DIVIDER-->*/}
+    
+                <div className="splitter-panel-right">
+                    {right}
+                </div>
+            </div>
+        </>}
+
+    </>
+    )
+};
+
+SplitterPanel.Left = SplitterPanelLeft;
+SplitterPanel.Right = SplitterPanelRight;
+
+export default SplitterPanel;

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

@@ -205,6 +205,25 @@ function getSpecifiedDate(v: Date | string, days: number): string {
     return specifiedDay;
 }
 
+/**
+ * Calculates the total number of days from today going back a specified number of months.
+ *
+ * @param {number} monthsAgo - The number of months to go back (e.g., 3 means the past 3 months).
+ * @returns {number} The total number of days between the calculated past date and today.
+ *
+ * @example
+ * getDaysInLastMonths(3); // Returns number of days in the past 3 months
+ */
+function getDaysInLastMonths(monthsAgo: number = 3): number {
+    const today: Date = new Date();
+    const pastDate: Date = new Date();
+    pastDate.setMonth(today.getMonth() - monthsAgo);
+
+    const diffInMs: number = today.getTime() - pastDate.getTime();
+    const diffInDays: number = Math.round(diffInMs / (1000 * 60 * 60 * 24));
+
+    return diffInDays;
+}
 
 
 /**
@@ -304,28 +323,26 @@ function getCurrentYear(): number {
 /**
  * Get current month
  * @param {Boolean} padZeroEnabled 
- * @returns {Number}
+ * @returns {Number|String}
  */
-function getCurrentMonth(padZeroEnabled: boolean = true): number {
-    const m: any = new Date().getMonth() + 1;
+function getCurrentMonth(padZeroEnabled: boolean = true): string | number {
+    const m: number = new Date().getMonth() + 1;
     return padZeroEnabled ? String(m).padStart(2, '0') : m;
 }
 
 
-
 /**
  * Get current day
  * @param {Boolean} padZeroEnabled 
- * @returns {Number}
+ * @returns {Number|String}
  */
-function getCurrentDay(padZeroEnabled: boolean = true): number {
-    const d: any = new Date().getDate();
+function getCurrentDay(padZeroEnabled: boolean = true): string | number {
+    const d: number = new Date().getDate();
     return padZeroEnabled ? String(d).padStart(2, '0') : d;
 }
 
 
 
-
 /**
  * Get first and last month day
  * @param {Number} v 
@@ -562,7 +579,10 @@ export {
     getPrevMonthDate,
     getNextYearDate,
     getPrevYearDate,
+
+    //
     getSpecifiedDate,
+    getDaysInLastMonths,
 
 
     // convert

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

@@ -0,0 +1,125 @@
+/**
+ * Get timeslots from starting and ending time
+ * @param  {string} startTime  -  start time in format "HH:mm"
+ * @param  {string} endTime  -  end time in format "HH:mm"
+ * @param  {number} timeInterval  -  time interval in minutes
+ * @param  {boolean} formatRange  -  if true returns ranges like "10:00 - 11:00", if false returns single times like "10:00"
+ * @returns {string[]} Array of time slots
+ * @example
+
+console.log(getTimeslots("10:00", "14:00", 60, true)); //['10:00 - 11:00', '11:00 - 12:00', '12:00 - 13:00', '13:00 - 14:00']
+console.log(getTimeslots("10:00", "14:00", 60));   // ['10:00', '11:00', '12:00', '13:00']
+*/
+
+function getTimeslots(
+    startTime: string,
+    endTime: string,
+    timeInterval: number,
+    formatRange: boolean = false
+): string[] {
+    const parseTime = (s: string): number => {
+        const c = s.split(':');
+        return parseInt(c[0]) * 60 + parseInt(c[1]);
+    }
+
+    const convertHours = (mins: number): string => {
+        const hour = Math.floor(mins / 60);
+        mins = Math.trunc(mins % 60);
+        const converted = pad(hour, 2) + ':' + pad(mins, 2);
+        return converted;
+    }
+
+    const pad = (str: string | number, max: number): string => {
+        str = str.toString();
+        return str.length < max ? pad("0" + str, max) : str;
+    }
+
+    // calculate time slot
+    const calculateTimeSlot = (_startTime: number, _endTime: number, _timeInterval: number): string[] => {
+        const timeSlots: string[] = [];
+        // Round start and end times to next 30 min interval
+        _startTime = Math.ceil(_startTime / 30) * 30;
+        _endTime = Math.ceil(_endTime / 30) * 30;
+
+        // Start and end of interval in the loop
+        let currentTime = _startTime;
+        while (currentTime < _endTime) {
+            if (formatRange) {
+                const t = convertHours(currentTime) + ' - ' + convertHours(currentTime + _timeInterval);
+                timeSlots.push(t);
+            } else {
+                timeSlots.push(convertHours(currentTime));
+            }
+            currentTime += _timeInterval;
+        }
+        return timeSlots;
+    }
+
+    const inputEndTime = parseTime(endTime);
+    const inputStartTime = parseTime(startTime);
+    const timeSegment = calculateTimeSlot(inputStartTime, inputEndTime, timeInterval);
+
+    return timeSegment;
+}
+
+
+/**
+ * Get minutes between two dates
+ * @param  {Date} startDate  -  start date
+ * @param  {Date} endDate  -  ebd date
+ * @returns Number
+ */
+function getMinutesBetweenDates(startDate, endDate) {
+    const diff = endDate.getTime() - startDate.getTime();
+    return (diff / 60000);
+}
+
+
+/**
+ * Get minutes between two time
+ * @param  {String} startTime  -  start time
+ * @param  {String} endTime  -  ebd time
+ * @returns Number
+ */
+function getMinutesBetweenTime(startTime, endTime) {
+    const pad = (num) => {
+        return ("0" + num).slice(-2);
+    };
+    let s = startTime.split(":"), sMin = +s[1] + s[0] * 60,
+        e = endTime.split(":"), eMin = +e[1] + e[0] * 60,
+        diff = eMin - sMin;
+        
+    if (diff < 0) { sMin -= 12 * 60; diff = eMin - sMin }
+    const h = Math.floor(diff / 60),
+          m = diff % 60;
+    return "" + pad(h) + ":" + pad(m);
+}
+
+
+
+/**
+ * Convert HH:MM:SS into minute
+ * @param  {String} timeStr  -  time string
+ * @returns Number
+ */
+function convertTimeToMin(timeStr) {
+    const _time = timeStr.split(':').length === 3 ?  `${timeStr}` : `${timeStr}:00`;
+
+    const res = _time.split(':'); // split it at the colons
+
+    // Hours are worth 60 minutes.
+    const minutes = (+res[0]) * 60 + (+res[1]);
+    return minutes;
+}
+
+
+export {
+    getTimeslots,
+    getMinutesBetweenDates,
+    getMinutesBetweenTime,
+    convertTimeToMin
+};
+
+
+
+

package/lib/esm/index.js

@@ -33,6 +33,7 @@ export { default as Scrollbar } from './Scrollbar';
 export { default as SearchBar } from './SearchBar';
 export { default as Select } from './Select';
 export { default as ShowMoreLess } from './ShowMoreLess';
+export { default as SplitterPanel } from './SplitterPanel';
 export { default as Stepper } from './Stepper';
 export { default as Switch } from './Switch';
 export { default as Table } from './Table';

package/package.json

@@ -2,7 +2,7 @@
   "author": "UIUX Lab",
   "email": "uiuxlab@gmail.com",
   "name": "funda-ui",
-  "version": "4.7.115",
+  "version": "4.7.125",
   "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
   "repository": {
     "type": "git",