funda-ui 4.7.125 → 4.7.133

package/lib/cjs/SplitterPanel/index.js

@@ -446,7 +446,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
          */
 
         var useIsMobile = function useIsMobile() {
-          var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 768;
+          var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 600;
           var _useState = (0, react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
             _useState2 = _slicedToArray(_useState, 2),
             isMobile = _useState2[0],
@@ -460,7 +460,71 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
             setIsMounted(true);
             var handleResize = function handleResize() {
               if (window) {
-                setIsMobile(window.innerWidth <= breakpoint);
+                var detectDeviceType = function 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
+                  var ua = navigator.userAgent.toLowerCase();
+
+                  // 3. Get platform info
+                  var platform = navigator.platform.toLowerCase();
+
+                  // 4. Check screen characteristics using window.matchMedia
+                  var isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+                  var isPortrait = window.matchMedia('(orientation: portrait)').matches;
+                  var isLandscape = window.matchMedia('(orientation: landscape)').matches;
+
+                  // 5. Get screen dimensions
+                  var screenWidth = window.screen.width;
+                  var screenHeight = window.screen.height;
+                  var minScreenSize = Math.min(screenWidth, screenHeight);
+                  var maxScreenSize = Math.max(screenWidth, screenHeight);
+
+                  // Define device characteristics
+                  var 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);
+                  var 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/cjs/Utils/useIsMobile.js

@@ -127,7 +127,7 @@ const App = () => {
  */
 
 var useIsMobile = function useIsMobile() {
-  var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 768;
+  var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 600;
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     isMobile = _useState2[0],
@@ -141,7 +141,71 @@ var useIsMobile = function useIsMobile() {
     setIsMounted(true);
     var handleResize = function handleResize() {
       if (window) {
-        setIsMobile(window.innerWidth <= breakpoint);
+        var detectDeviceType = function 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
+          var ua = navigator.userAgent.toLowerCase();
+
+          // 3. Get platform info
+          var platform = navigator.platform.toLowerCase();
+
+          // 4. Check screen characteristics using window.matchMedia
+          var isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+          var isPortrait = window.matchMedia('(orientation: portrait)').matches;
+          var isLandscape = window.matchMedia('(orientation: landscape)').matches;
+
+          // 5. Get screen dimensions
+          var screenWidth = window.screen.width;
+          var screenHeight = window.screen.height;
+          var minScreenSize = Math.min(screenWidth, screenHeight);
+          var maxScreenSize = Math.max(screenWidth, screenHeight);
+
+          // Define device characteristics
+          var 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);
+          var 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/cjs/index.d.ts

@@ -29,6 +29,7 @@ export const NumberInput: any;
 export const Pagination: any;
 export const Radio: any;
 export const RangeSlider: any;
+export const Refresher: any;
 export const RootPortal: any;
 export const ScrollReveal: any;
 export const Scrollbar: any;

package/lib/cjs/index.js

@@ -31,6 +31,7 @@ exports.NumberInput = _interopRequireDefault(require("./NumberInput")).default;
 exports.Pagination = _interopRequireDefault(require("./Pagination")).default;
 exports.Radio = _interopRequireDefault(require("./Radio")).default;
 exports.RangeSlider = _interopRequireDefault(require("./RangeSlider")).default;
+exports.Refresher = _interopRequireDefault(require("./Refresher")).default;
 exports.RootPortal = _interopRequireDefault(require("./RootPortal")).default;
 exports.ScrollReveal = _interopRequireDefault(require("./ScrollReveal")).default;
 exports.Scrollbar = _interopRequireDefault(require("./Scrollbar")).default;

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/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/index.js

@@ -27,6 +27,7 @@ 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';

package/package.json

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