lupine.components 1.1.18 → 1.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lupine.components",
-  "version": "1.1.18",
+  "version": "1.1.20",
   "license": "MIT",
   "author": "uuware.com",
   "homepage": "https://github.com/uuware/lupine.js",
@@ -16,6 +16,7 @@
   "engines": {
     "node": ">= 20"
   },
+  "sideEffects": false,
   "exports": {
     ".": {
       "types": "./src/index.ts",

package/src/components/drag-refresh.tsx

@@ -2,15 +2,18 @@ import { CssProps, RefProps } from 'lupine.web';
 import { Spinner02, SpinnerSize } from './spinner';
 
 export type DragRefreshCloseProps = () => void;
+export type DragRefreshHookCheckProps = () => boolean;
+export type DragRefreshHookFreshProps = (close: DragRefreshCloseProps) => Promise<void>;
 
 export type DragRefreshHookProps = {
-  setEnable: (enable: boolean) => void;
-  updateOnDragRefresh: (onDragRefresh: (close: DragRefreshCloseProps) => Promise<void>) => void;
+  setCheckEnabled?: (checkEnabled: DragRefreshHookCheckProps) => void;
+  setOnDragRefresh?: (onDragRefresh: DragRefreshHookFreshProps) => void;
 };
 
 export type DragRefreshProps = {
   container: string;
-  onDragRefresh: (close: DragRefreshCloseProps) => Promise<void>;
+  checkEnabled?: DragRefreshHookCheckProps;
+  onDragRefresh?: DragRefreshHookFreshProps;
   hook?: DragRefreshHookProps;
 };
 
@@ -39,12 +42,12 @@ export const DragFresh = (props: DragRefreshProps) => {
     },
   };
 
-  let isEnabled = true;
+  let isEnabled = false;
   if (props.hook) {
-    props.hook.setEnable = (enable: boolean) => {
-      isEnabled = enable;
+    props.hook.setCheckEnabled = (checkEnabled: DragRefreshHookCheckProps) => {
+      props.checkEnabled = checkEnabled;
     };
-    props.hook.updateOnDragRefresh = (onDragRefresh: (close: DragRefreshCloseProps) => Promise<void>) => {
+    props.hook.setOnDragRefresh = (onDragRefresh: (close: DragRefreshCloseProps) => Promise<void>) => {
       props.onDragRefresh = onDragRefresh;
     };
   }
@@ -69,6 +72,7 @@ export const DragFresh = (props: DragRefreshProps) => {
       let needRefresh = false;
       const maxHeight = 150;
       container.addEventListener('touchstart', (e: any) => {
+        isEnabled = props.checkEnabled && props.onDragRefresh ? props.checkEnabled() : false;
         if (!isEnabled) return;
         touchstartY = e.touches[0].clientY;
         touchstartX = e.touches[0].clientX;
@@ -110,7 +114,7 @@ export const DragFresh = (props: DragRefreshProps) => {
         if (!isEnabled) return;
         if (direction === 'Y') {
           if (needRefresh) {
-            props.onDragRefresh(closeSpin);
+            props.onDragRefresh?.(closeSpin);
           } else {
             closeSpin();
           }

package/src/frames/responsive-frame.tsx

@@ -18,7 +18,7 @@ export interface ResponsiveFrameProps {
   desktopTopMenu: IconMenuItemProps[];
   mobileBottomMenu: IconMenuItemProps[];
   mobileSideMenuContent: VNode<any>;
-  sliderFrameHook: SliderFrameHookProps;
+  sharedContents: VNode<any>;
 }
 export const ResponsiveFrame = async (props: ResponsiveFrameProps) => {
   const cssContainer: CssProps = {
@@ -65,7 +65,7 @@ export const ResponsiveFrame = async (props: ResponsiveFrameProps) => {
 
   return (
     <div css={cssContainer} class='responsive-frame'>
-      <SliderFrame hook={props.sliderFrameHook} />
+      {props.sharedContents}
       <div class='frame-top-menu'>
         <DesktopHeader title={props.desktopHeaderTitle} items={props.desktopTopMenu}></DesktopHeader>
         <MobileHeaderComponent></MobileHeaderComponent>

package/src/frames/slider-frame.tsx

@@ -19,6 +19,7 @@ export type SliderFrameHookProps = {
   load?: (children: VNode<any>) => void;
   close?: (event: Event) => void;
   addClass?: (className: SliderFramePosition) => void;
+  isOpened?: () => boolean;
 };
 
 export type SliderFrameProps = {
@@ -50,6 +51,9 @@ export const SliderFrame = (props: SliderFrameProps) => {
     props.hook.addClass = (className) => {
       ref.current?.classList.add(className);
     };
+    props.hook.isOpened = () => {
+      return ref.current?.classList.contains('show');
+    };
   }
   const dom = new HtmlVar(<div class='slider-frame-default'>{props.defaultContent || '(No Content)'}</div>);
   const ref: RefProps = {};

package/src/lib/drag-util.ts

@@ -27,6 +27,7 @@ export const createDragUtil = () => {
   let initialY = 0;
   let draggingDom: HTMLDivElement | null = null;
   let onMoveCallback: (clientX: number, clientY: number, movedX: number, movedY: number) => void = () => {};
+  let onMoveEndCallback: () => void = () => {};
   let onScaleCallback: (scale: number) => void = () => {};
 
   let isZooming = false;
@@ -37,10 +38,19 @@ export const createDragUtil = () => {
     const dy = t2.clientY - t1.clientY;
     return Math.sqrt(dx * dx + dy * dy);
   };
+  const onMoveEnd = () => {
+    onMoveEndCallback();
+    isDragging = false;
+    isZooming = false;
+    draggingDom = null;
+  };
   return {
     setOnMoveCallback: (callback: (clientX: number, clientY: number, movedX: number, movedY: number) => void) => {
       onMoveCallback = callback;
     },
+    setOnMoveEndCallback: (callback: () => void) => {
+      onMoveEndCallback = callback;
+    },
     setOnScaleCallback: (callback: (scale: number) => void) => {
       onScaleCallback = callback;
     },
@@ -54,11 +64,15 @@ export const createDragUtil = () => {
         return;
       }
       isDragging = true;
+      isZooming = false;
       draggingDom = event.currentTarget as HTMLDivElement;
       initialX = event.clientX;
       initialY = event.clientY;
     },
     onMouseMove: (event: MouseEvent) => {
+      if (event.buttons === 0 && isDragging) {
+        onMoveEnd();
+      }
       if (event.buttons === 0 || !draggingDom) {
         isDragging = false;
         draggingDom = null;
@@ -66,20 +80,18 @@ export const createDragUtil = () => {
       }
       onMoveCallback(event.clientX, event.clientY, event.clientX - initialX, event.clientY - initialY);
     },
-    onMouseUp: () => {
-      isDragging = false;
-      isZooming = false;
-      draggingDom = null;
-    },
+    onMouseUp: onMoveEnd,
 
     onTouchStart: (event: TouchEvent) => {
       if (event.touches.length === 1) {
         isDragging = true;
+        isZooming = false;
         draggingDom = event.currentTarget as HTMLDivElement;
         initialX = event.touches[0].clientX;
         initialY = event.touches[0].clientY;
       } else if (event.touches.length === 2) {
         initialDistance = getDistance(event.touches[0], event.touches[1]);
+        isDragging = false;
         isZooming = true;
       } else {
         isDragging = false;
@@ -94,10 +106,15 @@ export const createDragUtil = () => {
           const delta = newDistance / initialDistance;
           //   const newScale = Math.min(Math.max(1, scale * delta), 4); // 限制缩放范围
           onScaleCallback(delta);
-          return;
+        } else {
+          onMoveEnd();
         }
+        return;
+      }
+      if (event.touches.length === 0 && isDragging) {
+        onMoveEnd();
       }
-      if (!isDragging || event.touches.length === 0 || !draggingDom) {
+      if (event.touches.length === 0 || !draggingDom) {
         isDragging = false;
         draggingDom = null;
         return;
@@ -109,10 +126,6 @@ export const createDragUtil = () => {
         event.touches[0].clientY - initialY
       );
     },
-    onTouchEnd: () => {
-      isDragging = false;
-      isZooming = false;
-      draggingDom = null;
-    },
+    onTouchEnd: onMoveEnd,
   };
 };