@aiquants/swipe-overlay 0.1.0 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +4 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.js +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +1 -2
package/dist/index.d.mts
CHANGED
|
@@ -35,11 +35,14 @@ type SwipeDismissHookResult = {
|
|
|
35
35
|
* Manages swipe-to-dismiss interactions on the mobile overlay panel.
|
|
36
36
|
* モバイルオーバーレイパネルのスワイプクローズ操作を管理。
|
|
37
37
|
*/
|
|
38
|
-
declare const useSwipeToDismissOverlay: ({ isOpen, onClose, isCloseBlocked, skipWhenTextSelected, }: {
|
|
38
|
+
declare const useSwipeToDismissOverlay: ({ isOpen, onClose, isCloseBlocked, skipWhenTextSelected, swipeThreshold, flickVelocity, flickDistance, }: {
|
|
39
39
|
isOpen: boolean;
|
|
40
40
|
onClose: () => void;
|
|
41
41
|
isCloseBlocked: () => boolean;
|
|
42
42
|
skipWhenTextSelected?: boolean;
|
|
43
|
+
swipeThreshold?: number;
|
|
44
|
+
flickVelocity?: number;
|
|
45
|
+
flickDistance?: number;
|
|
43
46
|
}) => SwipeDismissHookResult;
|
|
44
47
|
/**
|
|
45
48
|
* Manages the blocking state for swipe-to-dismiss interactions.
|
package/dist/index.d.ts
CHANGED
|
@@ -35,11 +35,14 @@ type SwipeDismissHookResult = {
|
|
|
35
35
|
* Manages swipe-to-dismiss interactions on the mobile overlay panel.
|
|
36
36
|
* モバイルオーバーレイパネルのスワイプクローズ操作を管理。
|
|
37
37
|
*/
|
|
38
|
-
declare const useSwipeToDismissOverlay: ({ isOpen, onClose, isCloseBlocked, skipWhenTextSelected, }: {
|
|
38
|
+
declare const useSwipeToDismissOverlay: ({ isOpen, onClose, isCloseBlocked, skipWhenTextSelected, swipeThreshold, flickVelocity, flickDistance, }: {
|
|
39
39
|
isOpen: boolean;
|
|
40
40
|
onClose: () => void;
|
|
41
41
|
isCloseBlocked: () => boolean;
|
|
42
42
|
skipWhenTextSelected?: boolean;
|
|
43
|
+
swipeThreshold?: number;
|
|
44
|
+
flickVelocity?: number;
|
|
45
|
+
flickDistance?: number;
|
|
43
46
|
}) => SwipeDismissHookResult;
|
|
44
47
|
/**
|
|
45
48
|
* Manages the blocking state for swipe-to-dismiss interactions.
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var E=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var G=Object.prototype.hasOwnProperty;var _=(e,n)=>{for(var t in n)E(e,t,{get:n[t],enumerable:!0})},O=(e,n,t,a)=>{if(n&&typeof n=="object"||typeof n=="function")for(let l of F(n))!G.call(e,l)&&l!==t&&E(e,l,{get:()=>n[l],enumerable:!(a=B(n,l))||a.enumerable});return e};var U=e=>O(E({},"__esModule",{value:!0}),e);var Q={};_(Q,{SwipeCloseGuardContext:()=>k,useOverlayEscapeStack:()=>T,useSwipeCloseGuard:()=>$,useSwipeGuardState:()=>z,useSwipeToDismissOverlay:()=>j,useTapClick:()=>J,useTransitionDisplay:()=>N});module.exports=U(Q);var s=require("react"),K=120,V=.5,q=40,k=(0,s.createContext)(null),$=()=>(0,s.useContext)(k)??{isBlocked:!1,requestBlock:()=>()=>{}},u=[],P=e=>{if(e.key!=="Escape")return;u[u.length-1]?.onEscape(e)&&(e.preventDefault(),e.stopPropagation())},T=()=>(0,s.useCallback)(e=>{let n=u.findIndex(t=>t.id===e.id);return n>=0&&u.splice(n,1),u.push(e),u.length===1&&typeof document<"u"&&document.addEventListener("keydown",P,!0),()=>{let t=u.findIndex(a=>a.id===e.id);t>=0&&u.splice(t,1),u.length===0&&typeof document<"u"&&document.removeEventListener("keydown",P,!0)}},[]),j=({isOpen:e,onClose:n,isCloseBlocked:t,skipWhenTextSelected:a=!1,swipeThreshold:l=K,flickVelocity:p=V,flickDistance:S=q})=>{let[i,X]=(0,s.useState)(null),[M,m]=(0,s.useState)(!1),h=T(),x=(0,s.useRef)(`overlay-${Math.random().toString(36).slice(2)}`).current,d=(0,s.useRef)({pointerId:null,startX:0,startY:0,isActive:!1,isClosing:!1,lastDelta:0,hasCapture:!1,history:[]}),f=(0,s.useCallback)(()=>t()?!1:(n(),!0),[t,n]);(0,s.useEffect)(()=>{if(e)return h({id:x,onEscape:f})},[e,f,h,x]),(0,s.useEffect)(()=>{if(!(i&&e))return;let v=()=>{let o=d.current;o.hasCapture&&o.pointerId!==null&&i.releasePointerCapture?.(o.pointerId),Object.assign(o,{pointerId:null,isActive:!1,isClosing:!1,hasCapture:!1,history:[]}),i.style.transform="",i.style.transition="",m(!1)};d.current={pointerId:null,startX:0,startY:0,isActive:!1,isClosing:!1,lastDelta:0,hasCapture:!1,history:[]},m(!1);let D=o=>{o.pointerType==="mouse"&&o.button!==0||o.target?.closest('[data-overlay-interactive="true"]')||a&&window.getSelection()?.toString().trim()||(i.style.transition="none",m(!0),d.current={pointerId:o.pointerId,startX:o.clientX,startY:o.clientY,isActive:!0,isClosing:!1,lastDelta:0,hasCapture:!1,history:[{x:o.clientX,time:Date.now()}]})},b=o=>{let r=d.current;if(!r.isActive||r.pointerId!==o.pointerId)return;if(a&&window.getSelection()?.toString().trim()){v();return}r.history.push({x:o.clientX,time:Date.now()});let c=o.clientX-r.startX,y=o.clientY-r.startY;if(!r.isClosing){if(Math.abs(c)<4)return;if(Math.abs(c)<Math.abs(y)*1.3||c<=0){v();return}r.isClosing=!0,r.hasCapture||(i.setPointerCapture?.(o.pointerId),r.hasCapture=!0)}r.isClosing&&(o.preventDefault(),r.lastDelta=Math.max(0,c),i.style.transform=`translateX(${Math.min(r.lastDelta,520)}px)`)},g=o=>{let r=d.current;if(r.pointerId!==o.pointerId)return;let c=Date.now(),y=c-100,w=r.history.find(C=>C.time>=y)||r.history[0]||{x:r.startX,time:c},I=c-w.time,A=o.clientX-w.x,Y=I>0?A/I:0,H=r.lastDelta>l,L=Y>p&&r.lastDelta>S;if(r.isClosing&&(H||L)){let C=L?.15:.3;i.style.transition=`transform ${C}s ease-out`,i.style.transform="translateX(100%)",r.hasCapture&&r.pointerId!==null&&i.releasePointerCapture?.(r.pointerId),Object.assign(r,{pointerId:null,isActive:!1,isClosing:!1,hasCapture:!1,history:[]}),m(!1),f()}else v()};return i.addEventListener("pointerdown",D),i.addEventListener("pointermove",b),i.addEventListener("pointerup",g),i.addEventListener("pointercancel",v),()=>{i.removeEventListener("pointerdown",D),i.removeEventListener("pointermove",b),i.removeEventListener("pointerup",g),i.removeEventListener("pointercancel",v)}},[e,i,f,a,l,p,S]);let R=(0,s.useMemo)(()=>({transform:e?"translateX(0px)":"translateX(100%)"}),[e]);return{overlayRef:X,overlayStyle:R,attemptClose:f,isSwiping:M,element:i}},z=()=>{let e=(0,s.useRef)(new Set),[n,t]=(0,s.useState)(!1),a=(0,s.useCallback)(()=>{let p=Symbol("guard");return e.current.add(p),t(!0),()=>{e.current.delete(p),t(e.current.size>0)}},[]),l=(0,s.useCallback)(()=>{e.current.clear(),t(!1)},[]);return{isBlocked:n,requestBlock:a,reset:l}};function N(e,n){let t=(0,s.useRef)(n);return e&&n!==null&&(t.current=n),e?n:t.current}var J=(e,n=10)=>{let t=(0,s.useRef)(null);return{onPointerDown:a=>{t.current={x:a.clientX,y:a.clientY}},onPointerUp:a=>{if(t.current){let l=Math.hypot(a.clientX-t.current.x,a.clientY-t.current.y);t.current=null,l<n&&(a.preventDefault(),e())}},onPointerCancel:()=>{t.current=null},onClick:a=>a.preventDefault()}};0&&(module.exports={SwipeCloseGuardContext,useOverlayEscapeStack,useSwipeCloseGuard,useSwipeGuardState,useSwipeToDismissOverlay,useTapClick,useTransitionDisplay});
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{createContext as
|
|
1
|
+
import{createContext as B,useCallback as y,useContext as F,useEffect as k,useMemo as G,useRef as v,useState as S}from"react";var _=120,O=.5,U=40,K=B(null),$=()=>F(K)??{isBlocked:!1,requestBlock:()=>()=>{}},a=[],T=e=>{if(e.key!=="Escape")return;a[a.length-1]?.onEscape(e)&&(e.preventDefault(),e.stopPropagation())},V=()=>y(e=>{let i=a.findIndex(r=>r.id===e.id);return i>=0&&a.splice(i,1),a.push(e),a.length===1&&typeof document<"u"&&document.addEventListener("keydown",T,!0),()=>{let r=a.findIndex(o=>o.id===e.id);r>=0&&a.splice(r,1),a.length===0&&typeof document<"u"&&document.removeEventListener("keydown",T,!0)}},[]),j=({isOpen:e,onClose:i,isCloseBlocked:r,skipWhenTextSelected:o=!1,swipeThreshold:u=_,flickVelocity:c=O,flickDistance:h=U})=>{let[s,X]=S(null),[M,m]=S(!1),x=V(),D=v(`overlay-${Math.random().toString(36).slice(2)}`).current,p=v({pointerId:null,startX:0,startY:0,isActive:!1,isClosing:!1,lastDelta:0,hasCapture:!1,history:[]}),d=y(()=>r()?!1:(i(),!0),[r,i]);k(()=>{if(e)return x({id:D,onEscape:d})},[e,d,x,D]),k(()=>{if(!(s&&e))return;let f=()=>{let n=p.current;n.hasCapture&&n.pointerId!==null&&s.releasePointerCapture?.(n.pointerId),Object.assign(n,{pointerId:null,isActive:!1,isClosing:!1,hasCapture:!1,history:[]}),s.style.transform="",s.style.transition="",m(!1)};p.current={pointerId:null,startX:0,startY:0,isActive:!1,isClosing:!1,lastDelta:0,hasCapture:!1,history:[]},m(!1);let b=n=>{n.pointerType==="mouse"&&n.button!==0||n.target?.closest('[data-overlay-interactive="true"]')||o&&window.getSelection()?.toString().trim()||(s.style.transition="none",m(!0),p.current={pointerId:n.pointerId,startX:n.clientX,startY:n.clientY,isActive:!0,isClosing:!1,lastDelta:0,hasCapture:!1,history:[{x:n.clientX,time:Date.now()}]})},g=n=>{let t=p.current;if(!t.isActive||t.pointerId!==n.pointerId)return;if(o&&window.getSelection()?.toString().trim()){f();return}t.history.push({x:n.clientX,time:Date.now()});let l=n.clientX-t.startX,C=n.clientY-t.startY;if(!t.isClosing){if(Math.abs(l)<4)return;if(Math.abs(l)<Math.abs(C)*1.3||l<=0){f();return}t.isClosing=!0,t.hasCapture||(s.setPointerCapture?.(n.pointerId),t.hasCapture=!0)}t.isClosing&&(n.preventDefault(),t.lastDelta=Math.max(0,l),s.style.transform=`translateX(${Math.min(t.lastDelta,520)}px)`)},w=n=>{let t=p.current;if(t.pointerId!==n.pointerId)return;let l=Date.now(),C=l-100,I=t.history.find(E=>E.time>=C)||t.history[0]||{x:t.startX,time:l},L=l-I.time,A=n.clientX-I.x,Y=L>0?A/L:0,H=t.lastDelta>u,P=Y>c&&t.lastDelta>h;if(t.isClosing&&(H||P)){let E=P?.15:.3;s.style.transition=`transform ${E}s ease-out`,s.style.transform="translateX(100%)",t.hasCapture&&t.pointerId!==null&&s.releasePointerCapture?.(t.pointerId),Object.assign(t,{pointerId:null,isActive:!1,isClosing:!1,hasCapture:!1,history:[]}),m(!1),d()}else f()};return s.addEventListener("pointerdown",b),s.addEventListener("pointermove",g),s.addEventListener("pointerup",w),s.addEventListener("pointercancel",f),()=>{s.removeEventListener("pointerdown",b),s.removeEventListener("pointermove",g),s.removeEventListener("pointerup",w),s.removeEventListener("pointercancel",f)}},[e,s,d,o,u,c,h]);let R=G(()=>({transform:e?"translateX(0px)":"translateX(100%)"}),[e]);return{overlayRef:X,overlayStyle:R,attemptClose:d,isSwiping:M,element:s}},z=()=>{let e=v(new Set),[i,r]=S(!1),o=y(()=>{let c=Symbol("guard");return e.current.add(c),r(!0),()=>{e.current.delete(c),r(e.current.size>0)}},[]),u=y(()=>{e.current.clear(),r(!1)},[]);return{isBlocked:i,requestBlock:o,reset:u}};function N(e,i){let r=v(i);return e&&i!==null&&(r.current=i),e?i:r.current}var J=(e,i=10)=>{let r=v(null);return{onPointerDown:o=>{r.current={x:o.clientX,y:o.clientY}},onPointerUp:o=>{if(r.current){let u=Math.hypot(o.clientX-r.current.x,o.clientY-r.current.y);r.current=null,u<i&&(o.preventDefault(),e())}},onPointerCancel:()=>{r.current=null},onClick:o=>o.preventDefault()}};export{K as SwipeCloseGuardContext,V as useOverlayEscapeStack,$ as useSwipeCloseGuard,z as useSwipeGuardState,j as useSwipeToDismissOverlay,J as useTapClick,N as useTransitionDisplay};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aiquants/swipe-overlay",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "React hooks and context for swipe-to-dismiss overlay interactions",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -60,7 +60,6 @@
|
|
|
60
60
|
"react-dom": ">=16.8.0"
|
|
61
61
|
},
|
|
62
62
|
"devDependencies": {
|
|
63
|
-
"@biomejs/biome": "^2.3.7",
|
|
64
63
|
"@types/react": "^18.3.27",
|
|
65
64
|
"@types/react-dom": "^18.3.7",
|
|
66
65
|
"react": "^18.3.1",
|