lupine.components 1.1.48 → 1.1.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lupine.components",
-  "version": "1.1.48",
+  "version": "1.1.50",
   "license": "MIT",
   "author": "uuware.com",
   "homepage": "https://github.com/uuware/lupine.js",
@@ -40,4 +40,4 @@
   "dependencies": {
     "lupine.web": "^1.0.0"
   }
-}
+}

package/src/components/action-sheet.tsx

@@ -1,4 +1,4 @@
-import { CssProps, RefProps, VNode, mountInnerComponent } from 'lupine.web';
+import { CssProps, RefProps, VNode, callUnload, mountInnerComponent } from 'lupine.web';
 import { backActionHelper } from '../lib';
 import { NotificationColor, NotificationMessage } from './notice-message';
 
@@ -55,7 +55,8 @@ export class ActionSheet {
     const handleClose = (reason?: ActionSheetCloseReasonProps) => {
       closeEvent?.(reason);
       ref.current.classList.remove('animation-open');
-      setTimeout(() => {
+      setTimeout(async () => {
+        await callUnload(base);
         base.remove();
       }, 300);
     };

package/src/components/float-window.tsx

@@ -1,4 +1,4 @@
-import { CssProps, RefProps, VNode, mountInnerComponent } from 'lupine.web';
+import { CssProps, RefProps, VNode, callUnload, mountInnerComponent } from 'lupine.web';
 import { stopPropagation, backActionHelper } from '../lib';
 
 export type FloatWindowCloseProps = () => void;
@@ -57,7 +57,8 @@ export class FloatWindow {
       closeEvent?.();
       ref.current.classList.add('transition');
       ref.current.classList.remove('animation');
-      setTimeout(() => {
+      setTimeout(async () => {
+        await callUnload(base);
         base.remove();
       }, 300);
     };

package/src/components/loading-spin.tsx

@@ -1,5 +1,5 @@
 import { RefProps, Spinner02, SpinnerSize } from 'lupine.components';
-import { CssProps, mountInnerComponent } from 'lupine.components';
+import { CssProps, callUnload, mountInnerComponent } from 'lupine.components';
 
 export type LoadingSpinHookProps = {
   show?: () => void;
@@ -46,7 +46,8 @@ export const LoadingSpinComponent = (props: LoadingSpinProps) => {
 
 export class LoadingSpin {
   static async show(): Promise<() => void> {
-    const handleClose = () => {
+    const handleClose = async () => {
+      await callUnload(base);
       base.remove();
     };
 

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, mountInnerComponent } from 'lupine.web';
+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;
@@ -41,7 +42,8 @@ export class SliderHelper {
       closeEvent?.();
       ref.current?.classList.remove('show');
       ref.current?.classList.add(closeClassName);
-      setTimeout(() => {
+      setTimeout(async () => {
+        await callUnload(base);
         base.remove();
       }, 400);
     };
@@ -95,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',
@@ -155,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;
+}