funda-ui 4.7.115 → 4.7.133

package/lib/esm/Refresher/index.tsx

@@ -0,0 +1,121 @@
+import React, { useState, useRef } from 'react';
+
+import useIsMobile from 'funda-utils/dist/cjs/useIsMobile';
+
+
+interface RefresherProps {
+    /** Pulling text */
+    pullingText?: React.ReactNode;
+    /**  Text when reaching the threshold */
+    readyToRefreshText?: React.ReactNode;
+    /** Refreshing text */
+    refreshingText?: React.ReactNode;
+    /** The pull distance (px) that triggers the refresh */
+    threshold?: number;
+    /** The height of the trigger area */
+    triggerHeight?: number;
+    /** The styles of the trigger area */
+    triggerAreaStyle?: React.CSSProperties;
+    /** Pull-down is only allowed when the scroll bar of this element is at the top. You can only fire certain actions when the scrollbar is at the top by listening to the scroll event of a given DOM element and determining if its scrollTop is 0. */
+    scrollableElementClassName?: string;
+    /** Refresh action is async */
+    onRefresh: () => Promise<void>;
+    children: React.ReactNode;
+}
+
+const Refresher = (prpps: RefresherProps) => {
+    const {
+        onRefresh,
+        children,
+        pullingText = 'Pull down to refresh',
+        readyToRefreshText = 'Release to refresh',
+        refreshingText = 'Refreshing...',
+        threshold = 100,
+        triggerHeight = 50,
+        triggerAreaStyle,
+        scrollableElementClassName,
+    } = prpps;
+
+    const isMobile = useIsMobile();
+    const [pullDistance, setPullDistance] = useState<number>(0);
+    const [isRefreshing, setIsRefreshing] = useState<boolean>(false);
+    const startY = useRef<number | null>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const handleTouchStart = (e: React.TouchEvent) => {
+        if (isRefreshing) return;
+        // Pull-down is only allowed when the scroll bar is at the top
+        const targetScrollableDiv = scrollableElementClassName === null || typeof scrollableElementClassName === 'undefined' ? containerRef.current : document.querySelector(scrollableElementClassName as string);
+
+
+        if (targetScrollableDiv && targetScrollableDiv.scrollTop > 0) return;
+        startY.current = e.touches[0].clientY;
+    };
+
+    const handleTouchMove = (e: React.TouchEvent) => {
+        if (startY.current === null || isRefreshing) return;
+        const distance = e.touches[0].clientY - startY.current;
+        if (distance > 0) {
+            setPullDistance(distance > threshold ? threshold : distance); // The maximum pull should not exceed "threshold" value
+        }
+    };
+
+    const handleTouchEnd = async () => {
+        if (isRefreshing) return;
+        if (pullDistance >= threshold) {
+            setIsRefreshing(true);
+            await onRefresh();
+            setIsRefreshing(false);
+        }
+        setPullDistance(0);
+        startY.current = null;
+    };
+
+    return (
+        <>
+            {!isMobile ? <React.Fragment>
+                {/** CONTENT */}
+                {children}
+            </React.Fragment> : <div
+                ref={containerRef}
+                style={{
+                    overflow: 'hidden',
+                    touchAction: 'pan-y',
+                    marginTop: `-${triggerHeight}px`,
+                }}
+                onTouchStart={handleTouchStart}
+                onTouchMove={handleTouchMove}
+                onTouchEnd={handleTouchEnd}
+            >
+                <div
+                    style={{
+                        transform: `translateY(${isRefreshing ? triggerHeight : pullDistance}px)`,
+                        transition: isRefreshing ? 'transform 0.2s' : 'transform 0.3s',
+                    }}
+                >
+
+                     {/** TRIGGER */}
+                    <div style={{
+                        ...triggerAreaStyle,
+                        height: `${triggerHeight}px`,
+                        textAlign: 'center',
+                        lineHeight: '50px'
+                    }}
+                    >
+                        {isRefreshing
+                            ? refreshingText
+                            : pullDistance >= threshold
+                                ? readyToRefreshText
+                                : pullingText}
+                    </div>
+
+                    {/** CONTENT */}
+                    {children}
+                </div>
+            </div>
+            }
+        </>
+    );
+};
+
+export default Refresher;

package/lib/esm/SplitterPanel/index.scss

@@ -0,0 +1,82 @@
+
+  /* ======================================================
+    <!-- Splitter Panel -->
+/* ====================================================== */
+.splitter-panel {
+
+    --splitter-panel-divider-color: rgba(0, 0, 0, 0.15);
+    --splitter-panel-divider-hover-color: rgba(210, 253, 253, .86);
+
+    display: flex;
+    position: relative;
+
+    .splitter-panel-left {
+        width: var(--splitter-panel-left-w, 0);
+    }
+
+    .splitter-panel-divider {
+        position: relative;
+        width: 1px;
+        cursor: col-resize;
+        padding: 0 2px;
+        transition: all 0.25s;
+        z-index: 1;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 1px;
+            height: 100%;
+            background: var(--splitter-panel-divider-color);
+        }
+
+        &::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -2px;
+            width: 5px;
+            height: 100%;
+        }
+
+
+        &:hover::after {
+            background: var(--splitter-panel-divider-hover-color);
+        }
+    }
+
+
+    .splitter-panel-right {
+        flex: 1;
+    }
+
+
+}
+
+
+
+.splitter-panel-vertical {
+    display: flex;
+    flex-direction: column;
+
+    .splitter-panel-top,
+    .splitter-panel-bottom {
+        min-height: 50px;
+    }
+
+}
+
+
+@media (max-width: 767px) {
+    .splitter-panel {
+        display: none !important;
+    }
+}
+
+@media (min-width: 768px) {
+    .splitter-panel-vertical {
+        display: none !important;
+    }
+}

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/hooks/useIsMobile.tsx

@@ -24,9 +24,10 @@ const App = () => {
 import { useEffect, useState } from 'react';
 
 
-const useIsMobile = (breakpoint: number = 768): boolean => {
-    const [isMobile, setIsMobile] = useState<boolean>(false);
-    const [isMounted, setIsMounted] = useState<boolean>(false);
+const useIsMobile = (breakpoint = 600) => {
+    const [isMobile, setIsMobile] = useState(false);
+    const [isMounted, setIsMounted] = useState(false);
+    
 
     useEffect(() => {
         // Set the mounted state to true after the component has mounted
@@ -34,7 +35,92 @@ const useIsMobile = (breakpoint: number = 768): boolean => {
 
         const handleResize = () => {
             if (window) {
-                setIsMobile(window.innerWidth <= breakpoint);
+
+
+                const detectDeviceType = () => {
+                    // 1. First check if window and navigator are available (SSR compatibility)
+                    if (typeof window === 'undefined' || !navigator) {
+                        return 'desktop'; // Default to desktop
+                    }
+                
+                    // 2. Get user agent string
+                    const ua = navigator.userAgent.toLowerCase();
+                    
+                    // 3. Get platform info
+                    const platform = navigator.platform.toLowerCase();
+                    
+                    // 4. Check screen characteristics using window.matchMedia
+                    const isTouch = ('ontouchstart' in window) || navigator.maxTouchPoints > 0;
+                                   
+                    const isPortrait = window.matchMedia('(orientation: portrait)').matches;
+                    const isLandscape = window.matchMedia('(orientation: landscape)').matches;
+                    
+                    // 5. Get screen dimensions
+                    const screenWidth = window.screen.width;
+                    const screenHeight = window.screen.height;
+                    const minScreenSize = Math.min(screenWidth, screenHeight);
+                    const maxScreenSize = Math.max(screenWidth, screenHeight);
+                
+                    // Define device characteristics
+                    const isTablet = (
+                        // Traditional UA detection
+                        /ipad/.test(ua) || 
+                        (/android/.test(ua) && !/mobile/.test(ua)) ||
+                        /tablet/.test(ua) ||
+                        /playbook/.test(ua) ||
+                        /nexus (7|9|10)/.test(ua) ||
+                        /sm-t/.test(ua) ||
+                        /huawei(.*)mediapad/.test(ua) ||
+                        
+                        // Special detection for iPad Pro and newer iPads
+                        (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1) ||
+                        
+                        // Screen size characteristics (tablets typically fall within this range)
+                        (minScreenSize >= breakpoint && maxScreenSize <= 1366 && isTouch) ||
+                        
+                        // Specific device detection
+                        /kindle|silk|kftt|kfot|kfjwa|kfjwi|kfsowi|kfthwa|kfthwi|kfapwa|kfapwi/i.test(ua)
+                    );
+                
+                    const isMobile = (
+                        !isTablet && ( // Prevent tablets from being detected as phones
+                            // Traditional mobile device detection
+                            /iphone|ipod|android.*mobile|windows phone|mobi/.test(ua) ||
+                            
+                            // Screen size characteristics (phones typically smaller than 600px)
+                            (minScreenSize < breakpoint && isTouch) ||
+                            
+                            // Additional mobile device detection
+                            /blackberry|\bbb\d+|meego|webos|palm|phone|pocket|mobile|mini|iemobile/i.test(ua)
+                        )
+                    );
+                
+                    // 6. Comprehensive decision logic
+                    if (isMobile) {
+                        // Additional check for small tablets
+                        if (maxScreenSize >= 1024 && isTouch) {
+                            return 'tablet';
+                        }
+                        return 'mobile';
+                    }
+                    
+                    if (isTablet) {
+                        // Additional check for touch-enabled laptops
+                        if (maxScreenSize > 1366 && /windows/.test(ua)) {
+                            return 'desktop';
+                        }
+                        return 'tablet';
+                    }
+                
+                    // 7. Check for touch-enabled laptops
+                    if (isTouch && /windows/.test(ua) && maxScreenSize > 1366) {
+                        return 'desktop';
+                    }
+                
+                    return 'desktop';
+                };
+
+                setIsMobile(detectDeviceType() === 'mobile');
             }
         };
 

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

@@ -27,12 +27,14 @@ export { default as NumberInput } from './NumberInput';
 export { default as Pagination } from './Pagination';
 export { default as Radio } from './Radio';
 export { default as RangeSlider } from './RangeSlider';
+export { default as Refresher } from './Refresher';
 export { default as RootPortal } from './RootPortal';
 export { default as ScrollReveal } from './ScrollReveal';
 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';