lupine.components 1.1.49 → 1.1.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lupine.components",
-  "version": "1.1.49",
+  "version": "1.1.50",
   "license": "MIT",
   "author": "uuware.com",
   "homepage": "https://github.com/uuware/lupine.js",

package/src/components/mobile-components/mobile-side-menu.tsx

@@ -1,4 +1,5 @@
 import { backActionHelper, CssProps, RefProps, VNode, MediaQueryRange } from 'lupine.components';
+import { isSafeAreaSupported } from '../../lib/support-safe-area';
 
 export class MobileSideMenuHelper {
   static show() {
@@ -74,7 +75,7 @@ export class MobileSideMenuHelper {
       moveStart = false;
       pendingOpen = false;
       isOpen = maskDom.classList.contains('show');
-      
+
       const menuDom = maskDom.querySelector('.mobile-side-menu') as HTMLDivElement;
       if (menuDom) {
         menuWidth = menuDom.offsetWidth || 210; // Fallback width roughly 70% of 300px
@@ -243,8 +244,8 @@ export const MobileSideMenu = (props: { children: VNode<any>; autoExtend?: boole
       overflowY: 'auto',
       transform: 'translateX(-100%)',
       boxShadow: 'var(--cover-box-shadow)',
-      'padding-top ': 'constant(safe-area-inset-top)',
-      'padding-top': 'env(safe-area-inset-top)',
+      'padding-top ': isSafeAreaSupported() ? 'constant(safe-area-inset-top)' : '0',
+      'padding-top': isSafeAreaSupported() ? 'env(safe-area-inset-top)' : '0',
     },
     [MediaQueryRange.TabletAbove]: {
       '&.auto-extend .mobile-side-menu-mask': {

package/src/frames/responsive-frame.tsx

@@ -2,13 +2,14 @@
 sliderFrameHook is for slider frame from right or bottom used in side-menu
 */
 
-import { VNode, CssProps, MediaQueryRange, SliderFrameHookProps, SliderFrame, RefProps } from 'lupine.components';
+import { VNode, CssProps, MediaQueryRange, RefProps } from 'lupine.components';
 import { MobileFooterMenu } from '../components/mobile-components/mobile-footer-menu';
 import { DesktopFooter } from '../components/desktop-footer';
 import { DesktopHeader } from '../components/desktop-header';
 import { MobileHeaderComponent } from '../components/mobile-components/mobile-header-component';
 import { MobileSideMenu } from '../components/mobile-components/mobile-side-menu';
 import { IconMenuItemProps } from '../components/mobile-components/icon-menu-item-props';
+import { isSafeAreaSupported } from '../lib/support-safe-area';
 
 export interface ResponsiveFrameProps {
   placeholderClassname: string;
@@ -37,8 +38,8 @@ export const ResponsiveFrame = (props: ResponsiveFrameProps) => {
     margin: '0 auto',
     overflowX: 'hidden',
     ...(!props.noSafeAreaTop ? {
-      'padding-top ': 'constant(safe-area-inset-top)',
-      'padding-top': 'env(safe-area-inset-top)',
+      'padding-top ': isSafeAreaSupported() ? 'constant(safe-area-inset-top)' : '',
+      'padding-top': isSafeAreaSupported() ? 'env(safe-area-inset-top)' : '',
     } : {}),
     '.frame-top-menu': {
       display: 'flex',

package/src/frames/slider-helper.tsx

@@ -1,6 +1,7 @@
 import { CssProps, RefProps, VNode, callUnload, mountInnerComponent } from 'lupine.web';
 import { backActionHelper, stopPropagation } from '../lib';
 import { MediaQueryMaxWidth, MediaQueryRange } from '../styles';
+import { isSafeAreaSupported } from '../lib/support-safe-area';
 
 export type SliderHelperDirection = 'right' | 'left' | 'bottom' | 'top';
 export type SliderHelperCloseProps = () => void;
@@ -96,21 +97,21 @@ export class SliderHelper {
 
     const contentCss: CssProps = isHorizontal
       ? {
-          top: '0',
-          bottom: '0',
-          width: '100%',
-          maxWidth,
-          [direction]: '0',
-        }
+        top: '0',
+        bottom: '0',
+        width: '100%',
+        maxWidth,
+        [direction]: '0',
+      }
       : {
-          top: direction === 'top' ? '0' : 'auto',
-          bottom: direction === 'bottom' ? '0' : 'auto',
-          left: 'auto',
-          right: '0',
-          width: '100%',
-          maxWidth,
-          height: '100%',
-        };
+        top: direction === 'top' ? '0' : 'auto',
+        bottom: direction === 'bottom' ? '0' : 'auto',
+        left: 'auto',
+        right: '0',
+        width: '100%',
+        maxWidth,
+        height: '100%',
+      };
 
     const cssContainer: CssProps = {
       display: 'flex',
@@ -156,8 +157,8 @@ export class SliderHelper {
         transform: startTransform,
         transition: 'transform 0.4s ease-in-out',
         // trick: to put two padding-top properties
-        'padding-top ': 'constant(safe-area-inset-top)',
-        'padding-top': 'env(safe-area-inset-top)',
+        'padding-top ': isSafeAreaSupported() ? 'constant(safe-area-inset-top)' : '0',
+        'padding-top': isSafeAreaSupported() ? 'env(safe-area-inset-top)' : '0',
         ...contentCss,
         '&::-webkit-scrollbar': {
           display: 'none',

package/src/frames/top-frame.tsx

@@ -2,6 +2,7 @@
 place to set safe-area-inset-top and other common styles
 */
 import { VNode, CssProps } from 'lupine.components';
+import { isSafeAreaSupported } from '../lib/support-safe-area';
 
 // TopFrame and ResponsiveFrame both contain safe-area-inset-top, so can't use them togother
 export const TopFrame = async ({
@@ -27,9 +28,9 @@ export const TopFrame = async ({
       // trick: to put two padding-top properties
       ...(!noSafeAreaTop
         ? {
-            'padding-top ': 'constant(safe-area-inset-top)',
-            'padding-top': 'env(safe-area-inset-top)',
-          }
+          'padding-top ': isSafeAreaSupported() ? 'constant(safe-area-inset-top)' : '',
+          'padding-top': isSafeAreaSupported() ? 'env(safe-area-inset-top)' : '',
+        }
         : {}),
     },
   };

package/src/lib/index.ts

@@ -24,4 +24,5 @@ export * from './path-utils';
 export * from './promise-timeout';
 export * from './simple-storage';
 export * from './stop-propagation';
+export * from './support-safe-area';
 export * from './upload-file';

package/src/lib/support-safe-area.ts

@@ -0,0 +1,26 @@
+
+const shouldApplySafeAreaTopPadding = () => {
+    if (typeof navigator === 'undefined') return true;
+    const ua = navigator.userAgent;
+
+    // match old Android devices
+    if (!/(vivo|oppo|xiaomi|redmi|huawei|honor)/i.test(ua)) return true;
+
+    // parse Android version
+    const match = ua.match(/Android\s+([\d\.]+)/i);
+    if (match) {
+        const version = parseFloat(match[1]);
+        // Android version < 10 has bug that return env value even if padding is added
+        if (version <= 10) return false;
+    }
+    return true;
+};
+const _safearea = {
+    supported: shouldApplySafeAreaTopPadding(),
+}
+
+export const isSafeAreaSupported = () => _safearea.supported;
+// for customize development, disable safearea for some mobile devices
+export const setSafeAreaSupported = (supported: boolean) => {
+    _safearea.supported = supported;
+}