lupine.components 1.1.2 → 1.1.4

package/package.json

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

package/src/components/action-sheet.tsx

@@ -1,4 +1,5 @@
 import { CssProps, RefProps, VNode, mountInnerComponent } from 'lupine.web';
+import { backActionHelper } from '../lib';
 
 export type ActionSheetCloseProps = () => void;
 
@@ -125,16 +126,21 @@ export class ActionSheet {
       },
     };
     const component = (
-      <div css={cssContainer} class='act-sheet-box' onClick={onClickContainer}>
+      <div
+        css={cssContainer}
+        class='act-sheet-box'
+        onClick={onClickContainer}
+        data-back-action={backActionHelper.genBackActionId()}
+      >
         <div ref={ref} class='act-sheet-body'>
           <div class='act-sheet-content'>
             <div class='act-sheet-title'>{title}</div>
             {children}
             {confirmButtonText && (
-            <div class='act-sheet-bottom-item act-sheet-confirm' onClick={onConfirm}>
-              {confirmButtonText}
-            </div>
-          )}
+              <div class='act-sheet-bottom-item act-sheet-confirm' onClick={onConfirm}>
+                {confirmButtonText}
+              </div>
+            )}
           </div>
           {cancelButtonText && (
             <div class='act-sheet-bottom-item' onClick={onCancel}>
@@ -210,11 +216,11 @@ export class ActionSheetMessage {
   }: ActionSheetMessageProps): Promise<ActionSheetCloseProps> {
     const handleClose = await ActionSheet.show({
       title,
-      children: <div css={{ padding: '8px',borderTop: '1px solid var(--primary-border-color)', }}>{message}</div>,
+      children: <div css={{ padding: '8px', borderTop: '1px solid var(--primary-border-color)' }}>{message}</div>,
       contentMaxHeight,
       confirmButtonText,
       handleConfirmClicked,
-        cancelButtonText,
+      cancelButtonText,
       closeWhenClickOutside,
     });
     return handleClose;

package/src/components/mobile-components/mobile-header-title-icon.tsx

@@ -2,11 +2,17 @@
 MobileHeaderTitleIcon can be used in MobileHeaderComponent's Center part.
 It has it's own Left and Right icons.
 */
-import { VNode, CssProps, HtmlVar } from 'lupine.components';
+import { VNode, CssProps, HtmlVar, backActionHelper } from 'lupine.components';
 
 export const MobileHeadeIconHeight = '40px';
 export const MobileHeadeBackIcon = ({ onClick }: { onClick: (event: Event) => void }) => {
-  return <i class='ifc-icon mg-arrow_back_ios_new_outlined mhti-back-icon' onClick={(event) => onClick(event)}></i>;
+  return (
+    <i
+      class={'ifc-icon mg-arrow_back_ios_new_outlined mhti-back-icon'}
+      data-back-action={backActionHelper.genBackActionId()}
+      onClick={(event) => onClick(event)}
+    ></i>
+  );
 };
 
 export const MobileHeadeCloseIcon = ({ onClick }: { onClick: (event: Event) => void }) => {

package/src/components/mobile-components/mobile-header-with-back.tsx

@@ -2,13 +2,17 @@
 HeaderWithBackFrame is a full page frame with header for mobile sliders.
 It has Back icon at Left and Close icon at Right.
 */
-import { VNode, CssProps, RefProps, HtmlVar } from 'lupine.components';
+import { VNode, CssProps, RefProps, HtmlVar, backActionHelper } from 'lupine.components';
 import { MobileHeaderTitleIcon } from './mobile-header-title-icon';
 
 export const HeaderWithBackFrameHeight = '40px';
 export const HeaderWithBackFrameLeft = ({ onClick }: { onClick: (event: Event) => void }) => {
   return (
-    <i class='ifc-icon mg-arrow_back_ios_new_outlined header-back-left-icon' onClick={(event) => onClick(event)}></i>
+    <i
+      class='ifc-icon mg-arrow_back_ios_new_outlined header-back-left-icon'
+      data-back-action={backActionHelper.genBackActionId()}
+      onClick={(event) => onClick(event)}
+    ></i>
   );
 };
 

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

@@ -1,4 +1,4 @@
-import { CssProps, RefProps, VNode } from 'lupine.components';
+import { backActionHelper, CssProps, RefProps, VNode } from 'lupine.components';
 
 export class MobileSideMenuHelper {
   static show() {
@@ -7,10 +7,14 @@ export class MobileSideMenuHelper {
     setTimeout(() => {
       ref.classList.add('animate-show');
     }, 1);
+
+    const backActionId = backActionHelper.genBackActionId();
+    ref.setAttribute('data-back-action', backActionId);
   }
 
   static hide() {
     const ref = document.querySelector('.mobile-side-menu-mask') as HTMLDivElement;
+    ref.removeAttribute('data-back-action');
     ref.classList.remove('animate-show');
     setTimeout(() => {
       ref.classList.remove('show');

package/src/frames/slider-frame.tsx

@@ -25,7 +25,7 @@ export type SliderFrameProps = {
   defaultContent?: VNode<any> | string;
   direction?: 'right' | 'bottom';
   hook?: SliderFrameHookProps;
-  afterClose?: () => void;
+  afterClose?: () => void | Promise<void>;
 };
 export const SliderFrame = (props: SliderFrameProps) => {
   if (props.hook) {
@@ -39,11 +39,11 @@ export const SliderFrame = (props: SliderFrameProps) => {
     props.hook.close = (event: Event) => {
       stopPropagation(event);
       ref.current?.classList.remove('show');
-      setTimeout(() => {
+      setTimeout(async () => {
         ref.current?.classList.add('d-none');
         dom.value = '';
         if (props.afterClose) {
-          props.afterClose();
+          await props.afterClose();
         }
       }, 400);
     };

package/src/lib/back-action-helper.ts

@@ -0,0 +1,54 @@
+import { uniqueIdGenerator } from 'lupine.web';
+
+type BackFn = () => void | Promise<void>;
+
+export const backActionUniqueId = uniqueIdGenerator('bb-'); // bb means back button
+class BackActionHelper {
+  private backFn?: BackFn;
+
+  genBackActionId() {
+    return backActionUniqueId();
+  }
+
+  getAllBackActionButtons() {
+    const nodes = document.querySelectorAll('[data-back-action^="bb-"]');
+    const buttons = Array.from(nodes)
+      .map((el) => {
+        const match = el.getAttribute('data-back-action')?.match(/bb-(\d+)/);
+        return match ? { el, num: parseInt(match[1], 10) } : null;
+      })
+      .filter(Boolean)
+      .sort((a, b) => b!.num - a!.num)
+      .map((item) => item!.el);
+    return buttons;
+  }
+
+  clear() {
+    this.backFn = undefined;
+  }
+  attach(back: BackFn) {
+    this.backFn = back;
+  }
+  async processBackAction(): Promise<boolean> {
+    if (this.backFn) {
+      try {
+        await this.backFn();
+        this.clear();
+        return true;
+      } catch (e) {
+        console.error('back button back failed', e);
+      }
+      return false;
+    }
+
+    const buttons = this.getAllBackActionButtons();
+    if (buttons.length) {
+      const button = buttons[0];
+      button.dispatchEvent(new Event('click'));
+      return true;
+    }
+    return false;
+  }
+}
+
+export const backActionHelper = /* @__PURE__ */ new BackActionHelper();

package/src/lib/index.ts

@@ -1,3 +1,4 @@
+export * from './back-action-helper';
 export * from './base62';
 export * from './blob-utils';
 export * from './calculate-text-width';