@cleartrip/ct-design-floating-wrapper 1.11.0 → 5.27.0-SNAPSHOT-native-main.14
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/FloatingWrapper.d.ts +2 -3
- package/dist/FloatingWrapper.d.ts.map +1 -1
- package/dist/FloatingWrapper.native.d.ts +4 -0
- package/dist/FloatingWrapper.native.d.ts.map +1 -0
- package/dist/ct-design-floating-wrapper.browser.cjs.js +1 -1
- package/dist/ct-design-floating-wrapper.browser.cjs.js.map +1 -1
- package/dist/ct-design-floating-wrapper.browser.esm.js +1 -1
- package/dist/ct-design-floating-wrapper.browser.esm.js.map +1 -1
- package/dist/ct-design-floating-wrapper.cjs.js +99 -105
- package/dist/ct-design-floating-wrapper.cjs.js.map +1 -1
- package/dist/ct-design-floating-wrapper.esm.js +100 -106
- package/dist/ct-design-floating-wrapper.esm.js.map +1 -1
- package/dist/ct-design-floating-wrapper.umd.js +102 -137
- package/dist/ct-design-floating-wrapper.umd.js.map +1 -1
- package/dist/hooks/useDraggable.d.ts.map +1 -1
- package/dist/hooks/useDraggable.native.d.ts +10 -0
- package/dist/hooks/useDraggable.native.d.ts.map +1 -0
- package/dist/index.d.ts +3 -3
- package/dist/index.native.d.ts +4 -0
- package/dist/index.native.d.ts.map +1 -0
- package/dist/style.d.ts +2 -2
- package/dist/style.d.ts.map +1 -1
- package/dist/type.d.ts +2 -2
- package/dist/type.d.ts.map +1 -1
- package/package.json +32 -6
- package/src/FloatingWrapper.native.tsx +46 -0
- package/src/FloatingWrapper.tsx +54 -0
- package/src/hooks/useDraggable.native.ts +191 -0
- package/src/hooks/useDraggable.ts +295 -0
- package/src/index.native.ts +3 -0
- package/src/index.ts +3 -0
- package/src/style.ts +18 -0
- package/src/type.ts +86 -0
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
declare const FloatingWrapper: (props: IFloatingWrapperProps) => JSX.Element;
|
|
1
|
+
import type { IFloatingWrapperProps } from './type';
|
|
2
|
+
declare const FloatingWrapper: (props: IFloatingWrapperProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
3
|
export default FloatingWrapper;
|
|
5
4
|
//# sourceMappingURL=FloatingWrapper.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FloatingWrapper.d.ts","sourceRoot":"","sources":["../packages/components/FloatingWrapper/src/FloatingWrapper.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FloatingWrapper.d.ts","sourceRoot":"","sources":["../packages/components/FloatingWrapper/src/FloatingWrapper.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,QAAQ,CAAC;AAgBpD,QAAA,MAAM,eAAe,GAAI,OAAO,qBAAqB,4CA+BpD,CAAC;AAEF,eAAe,eAAe,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FloatingWrapper.native.d.ts","sourceRoot":"","sources":["../packages/components/FloatingWrapper/src/FloatingWrapper.native.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,QAAQ,CAAC;AAqBpD,QAAA,MAAM,eAAe,GAAI,OAAO,qBAAqB,4CAiBpD,CAAC;AAEF,eAAe,eAAe,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var e,t=require("react/jsx-runtime"),n=require("@cleartrip/ct-design-style-manager"),r=require("react"),i=require("react-swipeable");exports.InitialCorner=void 0,(e=exports.InitialCorner||(exports.InitialCorner={})).TOP_LEFT="top-left",e.TOP_RIGHT="top-right",e.BOTTOM_LEFT="bottom-left",e.BOTTOM_RIGHT="bottom-right";const o=8,s=(e,t,n)=>Math.min(Math.max(e,t),n),a=()=>({top:0,left:0,right:"undefined"==typeof window?0:window.innerWidth,bottom:"undefined"==typeof window?0:window.innerHeight}),u=e=>{if(!e||"viewport"===e)return a();if((e=>"object"==typeof e&&null!==e&&"top"in e)(e))return e;const t=e.current;if(!t)return a();const n=t.getBoundingClientRect();return{top:n.top,left:n.left,right:n.right,bottom:n.bottom}},c=e=>{const{bounds:t="viewport",edgeOffset:n=o,initialPosition:a=exports.InitialCorner.BOTTOM_RIGHT,snapToEdge:c=!0,disabled:l=!1,show:d=!0,onTap:f}=e,[p,w]=r.useState({x:0,y:0}),[g,h]=r.useState(!1),[x,m]=r.useState(!1),b=r.useRef(null),T=r.useRef({width:0,height:0}),v=r.useRef(p),y=r.useRef({x:0,y:0}),O=r.useRef(!1),R=r.useRef(0);v.current=p;const I=r.useRef(e);I.current=Object.assign(Object.assign({},e),{bounds:t,edgeOffset:n,initialPosition:a,snapToEdge:c,show:d});const S=()=>{var e;const t=u(I.current.bounds),{width:n,height:r}=T.current,i=null!==(e=I.current.edgeOffset)&&void 0!==e?e:o,s=t.left+i,a=t.top+i;return{minX:s,minY:a,maxX:Math.max(s,t.right-n-i),maxY:Math.max(a,t.bottom-r-i)}},C=e=>{const{minX:t,minY:n,maxX:r,maxY:i}=S();return{x:s(e.x,t,r),y:s(e.y,n,i)}},E=()=>{var e;const{minX:t,minY:n,maxX:r,maxY:i}=S(),o=null!==(e=I.current.initialPosition)&&void 0!==e?e:exports.InitialCorner.BOTTOM_RIGHT;if(!(e=>"string"==typeof e)(o))return C(o);switch(o){case exports.InitialCorner.TOP_LEFT:return{x:t,y:n};case exports.InitialCorner.TOP_RIGHT:return{x:r,y:n};case exports.InitialCorner.BOTTOM_LEFT:return{x:t,y:i};case exports.InitialCorner.BOTTOM_RIGHT:default:return{x:r,y:i}}},M=e=>{const t=b.current;t&&(t.style.cursor=l?"default":e?"grabbing":"grab",t.style.transition=e?"none":"transform 200ms ease-out")},j=r.useRef(C);j.current=C;const _=r.useRef(E);_.current=E,r.useLayoutEffect(()=>{var e;const t=b.current;if(!t)return;const n=()=>{const e=t.getBoundingClientRect();0===e.width&&0===e.height||(T.current={width:e.width,height:e.height})},r=()=>{I.current.show&&w(e=>j.current(e))};n(),O.current?r():(O.current=!0,w(_.current()),h(!0));const i=new ResizeObserver(()=>{n(),r()});null==i||i.observe(t),R.current=null!==(e=null===window||void 0===window?void 0:window.innerWidth)&&void 0!==e?e:360;const o=()=>{var e;window.innerWidth!==R.current&&(R.current=null!==(e=null===window||void 0===window?void 0:window.innerWidth)&&void 0!==e?e:360,n(),r())};return window.addEventListener("resize",o),()=>{null==i||i.disconnect(),window.removeEventListener("resize",o)}},[]),r.useEffect(()=>{if(!g||x)return;const e=requestAnimationFrame(()=>m(!0));return()=>cancelAnimationFrame(e)},[g,x]);const X=i.useSwipeable({onSwipeStart:()=>{l||(y.current=v.current,M(!0))},onSwiping:e=>{if(l)return;const t=y.current,n=C({x:t.x+e.deltaX,y:t.y+e.deltaY});v.current=n,(e=>{const t=b.current;t&&(t.style.transform=`translate(${e.x}px, ${e.y}px)`)})(n)},onSwiped:()=>{if(l)return;M(!1);const e=(e=>{const t=C(e);if(!I.current.snapToEdge)return t;const n=u(I.current.bounds),{minX:r,maxX:i}=S(),o=t.x+T.current.width/2,s=(n.left+n.right)/2;return Object.assign(Object.assign({},t),{x:o<s?r:i})})(v.current);v.current=e,w(e)},onTap:()=>{null==f||f()},trackMouse:!0,trackTouch:!0,preventScrollOnSwipe:!0});return{bind:Object.assign(Object.assign({},X),{ref:e=>{X.ref(e),b.current=e}}),position:p,isReady:g,canAnimate:x}},l=n.makeStyles(()=>({root:{position:"fixed",top:0,left:0,willChange:"transform",touchAction:"none",userSelect:"none",WebkitUserSelect:"none",WebkitTapHighlightColor:"transparent",zIndex:100}}));exports.FloatingWrapper=e=>{const{children:r,disabled:i=!1,show:o=!0}=e,{bind:s,position:a,isReady:u,canAnimate:d}=c(e),f=n.useWebMergeStyles([l.root],[]),p={transform:`translate(${a.x}px, ${a.y}px)`,cursor:i?"default":"grab",transition:d?"transform 200ms ease-out":"none",visibility:u?void 0:"hidden",display:o?void 0:"none",pointerEvents:o?void 0:"none"};return t.jsx("div",Object.assign({},s,{className:f,style:p,children:r}))},exports.useDraggable=c;
|
|
2
2
|
//# sourceMappingURL=ct-design-floating-wrapper.browser.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ct-design-floating-wrapper.browser.cjs.js","sources":["../packages/components/FloatingWrapper/src/type.ts","../packages/components/FloatingWrapper/src/hooks/useDraggable.ts","../packages/components/FloatingWrapper/src/FloatingWrapper.tsx"
|
|
1
|
+
{"version":3,"file":"ct-design-floating-wrapper.browser.cjs.js","sources":["../packages/components/FloatingWrapper/src/type.ts","../packages/components/FloatingWrapper/src/hooks/useDraggable.ts","../packages/components/FloatingWrapper/src/FloatingWrapper.tsx"],"sourcesContent":[null,null,null],"names":["InitialCorner","DEFAULT_EDGE_OFFSET","clamp","value","min","max","Math","getViewportRect","top","left","right","window","innerWidth","bottom","innerHeight","resolveBounds","bounds","isExplicitBounds","element","current","rect","getBoundingClientRect","useDraggable","props","edgeOffset","initialPosition","BOTTOM_RIGHT","snapToEdge","disabled","show","onTap","position","setPosition","useState","x","y","isReady","setIsReady","canAnimate","setCanAnimate","elementRef","useRef","sizeRef","width","height","positionRef","dragStartRef","isInitializedRef","viewportWidthRef","propsRef","Object","assign","getLimits","pad","_a","minX","minY","maxX","maxY","clampToLimits","next","resolveInitialPosition","initial","isCorner","TOP_LEFT","TOP_RIGHT","BOTTOM_LEFT","applyDragState","dragging","style","cursor","transition","clampRef","initRef","useLayoutEffect","measure","reclamp","prev","resizeObserver","ResizeObserver","observe","onWindowResize","addEventListener","disconnect","removeEventListener","useEffect","id","requestAnimationFrame","cancelAnimationFrame","handlers","useSwipeable","onSwipeStart","onSwiping","eventData","start","deltaX","deltaY","pos","transform","applyTransform","onSwiped","resting","clamped","center","boxCenter","snapToNearestEdge","trackMouse","trackTouch","preventScrollOnSwipe","bind","ref","staticStyles","makeStyles","root","willChange","touchAction","userSelect","WebkitUserSelect","WebkitTapHighlightColor","zIndex","children","rootClassName","useWebMergeStyles","dynamicStyle","visibility","undefined","display","pointerEvents","_jsx","className"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{jsx as t}from"react/jsx-runtime";import{makeStyles as n,useWebMergeStyles as e}from"@cleartrip/ct-design-style-manager";import{useState as r,useRef as i,useLayoutEffect as o,useEffect as s}from"react";import{useSwipeable as c}from"react-swipeable";var a;!function(t){t.TOP_LEFT="top-left",t.TOP_RIGHT="top-right",t.BOTTOM_LEFT="bottom-left",t.BOTTOM_RIGHT="bottom-right"}(a||(a={}));const u=8,d=(t,n,e)=>Math.min(Math.max(t,n),e),l=()=>({top:0,left:0,right:"undefined"==typeof window?0:window.innerWidth,bottom:"undefined"==typeof window?0:window.innerHeight}),m=t=>{if(!t||"viewport"===t)return l();if((t=>"object"==typeof t&&null!==t&&"top"in t)(t))return t;const n=t.current;if(!n)return l();const e=n.getBoundingClientRect();return{top:e.top,left:e.left,right:e.right,bottom:e.bottom}},w=t=>{const{bounds:n="viewport",edgeOffset:e=u,initialPosition:l=a.BOTTOM_RIGHT,snapToEdge:w=!0,disabled:f=!1,show:h=!0,onTap:p}=t,[g,T]=r({x:0,y:0}),[b,x]=r(!1),[O,v]=r(!1),y=i(null),M=i({width:0,height:0}),R=i(g),E=i({x:0,y:0}),_=i(!1),j=i(0);R.current=g;const X=i(t);X.current=Object.assign(Object.assign({},t),{bounds:n,edgeOffset:e,initialPosition:l,snapToEdge:w,show:h});const B=()=>{var t;const n=m(X.current.bounds),{width:e,height:r}=M.current,i=null!==(t=X.current.edgeOffset)&&void 0!==t?t:u,o=n.left+i,s=n.top+i;return{minX:o,minY:s,maxX:Math.max(o,n.right-e-i),maxY:Math.max(s,n.bottom-r-i)}},H=t=>{const{minX:n,minY:e,maxX:r,maxY:i}=B();return{x:d(t.x,n,r),y:d(t.y,e,i)}},S=()=>{var t;const{minX:n,minY:e,maxX:r,maxY:i}=B(),o=null!==(t=X.current.initialPosition)&&void 0!==t?t:a.BOTTOM_RIGHT;if(!(t=>"string"==typeof t)(o))return H(o);switch(o){case a.TOP_LEFT:return{x:n,y:e};case a.TOP_RIGHT:return{x:r,y:e};case a.BOTTOM_LEFT:return{x:n,y:i};case a.BOTTOM_RIGHT:default:return{x:r,y:i}}},I=t=>{const n=y.current;n&&(n.style.cursor=f?"default":t?"grabbing":"grab",n.style.transition=t?"none":"transform 200ms ease-out")},P=i(H);P.current=H;const Y=i(S);Y.current=S,o(()=>{var t;const n=y.current;if(!n)return;const e=()=>{const t=n.getBoundingClientRect();0===t.width&&0===t.height||(M.current={width:t.width,height:t.height})},r=()=>{X.current.show&&T(t=>P.current(t))};e(),_.current?r():(_.current=!0,T(Y.current()),x(!0));const i=new ResizeObserver(()=>{e(),r()});null==i||i.observe(n),j.current=null!==(t=null===window||void 0===window?void 0:window.innerWidth)&&void 0!==t?t:360;const o=()=>{var t;window.innerWidth!==j.current&&(j.current=null!==(t=null===window||void 0===window?void 0:window.innerWidth)&&void 0!==t?t:360,e(),r())};return window.addEventListener("resize",o),()=>{null==i||i.disconnect(),window.removeEventListener("resize",o)}},[]),s(()=>{if(!b||O)return;const t=requestAnimationFrame(()=>v(!0));return()=>cancelAnimationFrame(t)},[b,O]);const F=c({onSwipeStart:()=>{f||(E.current=R.current,I(!0))},onSwiping:t=>{if(f)return;const n=E.current,e=H({x:n.x+t.deltaX,y:n.y+t.deltaY});R.current=e,(t=>{const n=y.current;n&&(n.style.transform=`translate(${t.x}px, ${t.y}px)`)})(e)},onSwiped:()=>{if(f)return;I(!1);const t=(t=>{const n=H(t);if(!X.current.snapToEdge)return n;const e=m(X.current.bounds),{minX:r,maxX:i}=B(),o=n.x+M.current.width/2,s=(e.left+e.right)/2;return Object.assign(Object.assign({},n),{x:o<s?r:i})})(R.current);R.current=t,T(t)},onTap:()=>{null==p||p()},trackMouse:!0,trackTouch:!0,preventScrollOnSwipe:!0});return{bind:Object.assign(Object.assign({},F),{ref:t=>{F.ref(t),y.current=t}}),position:g,isReady:b,canAnimate:O}},f=n(()=>({root:{position:"fixed",top:0,left:0,willChange:"transform",touchAction:"none",userSelect:"none",WebkitUserSelect:"none",WebkitTapHighlightColor:"transparent",zIndex:100}})),h=n=>{const{children:r,disabled:i=!1,show:o=!0}=n,{bind:s,position:c,isReady:a,canAnimate:u}=w(n),d=e([f.root],[]),l={transform:`translate(${c.x}px, ${c.y}px)`,cursor:i?"default":"grab",transition:u?"transform 200ms ease-out":"none",visibility:a?void 0:"hidden",display:o?void 0:"none",pointerEvents:o?void 0:"none"};return t("div",Object.assign({},s,{className:d,style:l,children:r}))};export{h as FloatingWrapper,a as InitialCorner,w as useDraggable};
|
|
2
2
|
//# sourceMappingURL=ct-design-floating-wrapper.browser.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ct-design-floating-wrapper.browser.esm.js","sources":["../packages/components/FloatingWrapper/src/type.ts","../packages/components/FloatingWrapper/src/hooks/useDraggable.ts","../packages/components/FloatingWrapper/src/FloatingWrapper.tsx"
|
|
1
|
+
{"version":3,"file":"ct-design-floating-wrapper.browser.esm.js","sources":["../packages/components/FloatingWrapper/src/type.ts","../packages/components/FloatingWrapper/src/hooks/useDraggable.ts","../packages/components/FloatingWrapper/src/FloatingWrapper.tsx"],"sourcesContent":[null,null,null],"names":["InitialCorner","DEFAULT_EDGE_OFFSET","clamp","value","min","max","Math","getViewportRect","top","left","right","window","innerWidth","bottom","innerHeight","resolveBounds","bounds","isExplicitBounds","element","current","rect","getBoundingClientRect","useDraggable","props","edgeOffset","initialPosition","BOTTOM_RIGHT","snapToEdge","disabled","show","onTap","position","setPosition","useState","x","y","isReady","setIsReady","canAnimate","setCanAnimate","elementRef","useRef","sizeRef","width","height","positionRef","dragStartRef","isInitializedRef","viewportWidthRef","propsRef","Object","assign","getLimits","pad","_a","minX","minY","maxX","maxY","clampToLimits","next","resolveInitialPosition","initial","isCorner","TOP_LEFT","TOP_RIGHT","BOTTOM_LEFT","applyDragState","dragging","style","cursor","transition","clampRef","initRef","useLayoutEffect","measure","reclamp","prev","resizeObserver","ResizeObserver","observe","onWindowResize","addEventListener","disconnect","removeEventListener","useEffect","id","requestAnimationFrame","cancelAnimationFrame","handlers","useSwipeable","onSwipeStart","onSwiping","eventData","start","deltaX","deltaY","pos","transform","applyTransform","onSwiped","resting","clamped","center","boxCenter","snapToNearestEdge","trackMouse","trackTouch","preventScrollOnSwipe","bind","ref","staticStyles","makeStyles","root","willChange","touchAction","userSelect","WebkitUserSelect","WebkitTapHighlightColor","zIndex","FloatingWrapper","children","rootClassName","useWebMergeStyles","dynamicStyle","visibility","undefined","display","pointerEvents","_jsx","className"],"mappings":"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"}
|
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var tslib = require('tslib');
|
|
4
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var ctDesignStyleManager = require('@cleartrip/ct-design-style-manager');
|
|
5
5
|
var react = require('react');
|
|
6
|
-
var ctDesignContainer = require('@cleartrip/ct-design-container');
|
|
7
|
-
var ctDesignTheme = require('@cleartrip/ct-design-theme');
|
|
8
6
|
var reactSwipeable = require('react-swipeable');
|
|
9
7
|
|
|
10
8
|
exports.InitialCorner = void 0;
|
|
@@ -15,30 +13,30 @@ exports.InitialCorner = void 0;
|
|
|
15
13
|
InitialCorner["BOTTOM_RIGHT"] = "bottom-right";
|
|
16
14
|
})(exports.InitialCorner || (exports.InitialCorner = {}));
|
|
17
15
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
16
|
+
const DEFAULT_EDGE_OFFSET = 8;
|
|
17
|
+
const SNAP_TRANSITION = 'transform 200ms ease-out';
|
|
18
|
+
const clamp = (value, min, max) => {
|
|
21
19
|
return Math.min(Math.max(value, min), max);
|
|
22
20
|
};
|
|
23
|
-
|
|
21
|
+
const isExplicitBounds = (bounds) => {
|
|
24
22
|
return typeof bounds === 'object' && bounds !== null && 'top' in bounds;
|
|
25
23
|
};
|
|
26
|
-
|
|
27
|
-
|
|
24
|
+
const isCorner = (position) => typeof position === 'string';
|
|
25
|
+
const getViewportRect = () => ({
|
|
28
26
|
top: 0,
|
|
29
27
|
left: 0,
|
|
30
28
|
right: typeof window === 'undefined' ? 0 : window.innerWidth,
|
|
31
29
|
bottom: typeof window === 'undefined' ? 0 : window.innerHeight,
|
|
32
|
-
});
|
|
33
|
-
|
|
30
|
+
});
|
|
31
|
+
const resolveBounds = (bounds) => {
|
|
34
32
|
if (!bounds || bounds === 'viewport')
|
|
35
33
|
return getViewportRect();
|
|
36
34
|
if (isExplicitBounds(bounds))
|
|
37
35
|
return bounds;
|
|
38
|
-
|
|
36
|
+
const element = bounds.current;
|
|
39
37
|
if (!element)
|
|
40
38
|
return getViewportRect();
|
|
41
|
-
|
|
39
|
+
const rect = element.getBoundingClientRect();
|
|
42
40
|
return {
|
|
43
41
|
top: rect.top,
|
|
44
42
|
left: rect.left,
|
|
@@ -46,52 +44,52 @@ var resolveBounds = function (bounds) {
|
|
|
46
44
|
bottom: rect.bottom,
|
|
47
45
|
};
|
|
48
46
|
};
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
47
|
+
const useDraggable = (props) => {
|
|
48
|
+
const { bounds = 'viewport', edgeOffset = DEFAULT_EDGE_OFFSET, initialPosition = exports.InitialCorner.BOTTOM_RIGHT, snapToEdge = true, disabled = false, show = true, onTap, } = props;
|
|
49
|
+
const [position, setPosition] = react.useState({ x: 0, y: 0 });
|
|
50
|
+
const [isReady, setIsReady] = react.useState(false);
|
|
51
|
+
const [canAnimate, setCanAnimate] = react.useState(false);
|
|
52
|
+
const elementRef = react.useRef(null);
|
|
53
|
+
const sizeRef = react.useRef({ width: 0, height: 0 });
|
|
54
|
+
const positionRef = react.useRef(position);
|
|
55
|
+
const dragStartRef = react.useRef({ x: 0, y: 0 });
|
|
56
|
+
const isInitializedRef = react.useRef(false);
|
|
57
|
+
const viewportWidthRef = react.useRef(0);
|
|
60
58
|
positionRef.current = position;
|
|
61
|
-
|
|
62
|
-
propsRef.current =
|
|
63
|
-
|
|
59
|
+
const propsRef = react.useRef(props);
|
|
60
|
+
propsRef.current = Object.assign(Object.assign({}, props), { bounds, edgeOffset, initialPosition, snapToEdge, show });
|
|
61
|
+
const getLimits = () => {
|
|
64
62
|
var _a;
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
return { minX
|
|
63
|
+
const rect = resolveBounds(propsRef.current.bounds);
|
|
64
|
+
const { width, height } = sizeRef.current;
|
|
65
|
+
const pad = (_a = propsRef.current.edgeOffset) !== null && _a !== void 0 ? _a : DEFAULT_EDGE_OFFSET;
|
|
66
|
+
const minX = rect.left + pad;
|
|
67
|
+
const minY = rect.top + pad;
|
|
68
|
+
const maxX = Math.max(minX, rect.right - width - pad);
|
|
69
|
+
const maxY = Math.max(minY, rect.bottom - height - pad);
|
|
70
|
+
return { minX, minY, maxX, maxY };
|
|
73
71
|
};
|
|
74
|
-
|
|
75
|
-
|
|
72
|
+
const clampToLimits = (next) => {
|
|
73
|
+
const { minX, minY, maxX, maxY } = getLimits();
|
|
76
74
|
return {
|
|
77
75
|
x: clamp(next.x, minX, maxX),
|
|
78
76
|
y: clamp(next.y, minY, maxY),
|
|
79
77
|
};
|
|
80
78
|
};
|
|
81
|
-
|
|
82
|
-
|
|
79
|
+
const snapToNearestEdge = (next) => {
|
|
80
|
+
const clamped = clampToLimits(next);
|
|
83
81
|
if (!propsRef.current.snapToEdge)
|
|
84
82
|
return clamped;
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
return
|
|
83
|
+
const rect = resolveBounds(propsRef.current.bounds);
|
|
84
|
+
const { minX, maxX } = getLimits();
|
|
85
|
+
const center = clamped.x + sizeRef.current.width / 2;
|
|
86
|
+
const boxCenter = (rect.left + rect.right) / 2;
|
|
87
|
+
return Object.assign(Object.assign({}, clamped), { x: center < boxCenter ? minX : maxX });
|
|
90
88
|
};
|
|
91
|
-
|
|
89
|
+
const resolveInitialPosition = () => {
|
|
92
90
|
var _a;
|
|
93
|
-
|
|
94
|
-
|
|
91
|
+
const { minX, minY, maxX, maxY } = getLimits();
|
|
92
|
+
const initial = (_a = propsRef.current.initialPosition) !== null && _a !== void 0 ? _a : exports.InitialCorner.BOTTOM_RIGHT;
|
|
95
93
|
if (!isCorner(initial))
|
|
96
94
|
return clampToLimits(initial);
|
|
97
95
|
switch (initial) {
|
|
@@ -106,38 +104,38 @@ var useDraggable = function (props) {
|
|
|
106
104
|
return { x: maxX, y: maxY };
|
|
107
105
|
}
|
|
108
106
|
};
|
|
109
|
-
|
|
110
|
-
|
|
107
|
+
const applyTransform = (pos) => {
|
|
108
|
+
const element = elementRef.current;
|
|
111
109
|
if (element) {
|
|
112
|
-
element.style.transform =
|
|
110
|
+
element.style.transform = `translate(${pos.x}px, ${pos.y}px)`;
|
|
113
111
|
}
|
|
114
112
|
};
|
|
115
|
-
|
|
116
|
-
|
|
113
|
+
const applyDragState = (dragging) => {
|
|
114
|
+
const element = elementRef.current;
|
|
117
115
|
if (!element)
|
|
118
116
|
return;
|
|
119
117
|
element.style.cursor = disabled ? 'default' : dragging ? 'grabbing' : 'grab';
|
|
120
118
|
element.style.transition = dragging ? 'none' : SNAP_TRANSITION;
|
|
121
119
|
};
|
|
122
|
-
|
|
120
|
+
const clampRef = react.useRef(clampToLimits);
|
|
123
121
|
clampRef.current = clampToLimits;
|
|
124
|
-
|
|
122
|
+
const initRef = react.useRef(resolveInitialPosition);
|
|
125
123
|
initRef.current = resolveInitialPosition;
|
|
126
|
-
react.useLayoutEffect(
|
|
124
|
+
react.useLayoutEffect(() => {
|
|
127
125
|
var _a;
|
|
128
|
-
|
|
126
|
+
const element = elementRef.current;
|
|
129
127
|
if (!element)
|
|
130
128
|
return undefined;
|
|
131
|
-
|
|
132
|
-
|
|
129
|
+
const measure = () => {
|
|
130
|
+
const rect = element.getBoundingClientRect();
|
|
133
131
|
if (rect.width === 0 && rect.height === 0)
|
|
134
132
|
return;
|
|
135
133
|
sizeRef.current = { width: rect.width, height: rect.height };
|
|
136
134
|
};
|
|
137
|
-
|
|
135
|
+
const reclamp = () => {
|
|
138
136
|
if (!propsRef.current.show)
|
|
139
137
|
return;
|
|
140
|
-
setPosition(
|
|
138
|
+
setPosition((prev) => clampRef.current(prev));
|
|
141
139
|
};
|
|
142
140
|
measure();
|
|
143
141
|
if (!isInitializedRef.current) {
|
|
@@ -148,13 +146,13 @@ var useDraggable = function (props) {
|
|
|
148
146
|
else {
|
|
149
147
|
reclamp();
|
|
150
148
|
}
|
|
151
|
-
|
|
149
|
+
const resizeObserver = new ResizeObserver(() => {
|
|
152
150
|
measure();
|
|
153
151
|
reclamp();
|
|
154
152
|
});
|
|
155
153
|
resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(element);
|
|
156
154
|
viewportWidthRef.current = (_a = window === null || window === void 0 ? void 0 : window.innerWidth) !== null && _a !== void 0 ? _a : 360;
|
|
157
|
-
|
|
155
|
+
const onWindowResize = () => {
|
|
158
156
|
var _a;
|
|
159
157
|
if (window.innerWidth === viewportWidthRef.current)
|
|
160
158
|
return;
|
|
@@ -163,87 +161,83 @@ var useDraggable = function (props) {
|
|
|
163
161
|
reclamp();
|
|
164
162
|
};
|
|
165
163
|
window.addEventListener('resize', onWindowResize);
|
|
166
|
-
return
|
|
164
|
+
return () => {
|
|
167
165
|
resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
|
|
168
166
|
window.removeEventListener('resize', onWindowResize);
|
|
169
167
|
};
|
|
170
168
|
}, []);
|
|
171
|
-
react.useEffect(
|
|
169
|
+
react.useEffect(() => {
|
|
172
170
|
if (!isReady || canAnimate)
|
|
173
171
|
return undefined;
|
|
174
|
-
|
|
175
|
-
return
|
|
172
|
+
const id = requestAnimationFrame(() => setCanAnimate(true));
|
|
173
|
+
return () => cancelAnimationFrame(id);
|
|
176
174
|
}, [isReady, canAnimate]);
|
|
177
|
-
|
|
178
|
-
onSwipeStart:
|
|
175
|
+
const handlers = reactSwipeable.useSwipeable({
|
|
176
|
+
onSwipeStart: () => {
|
|
179
177
|
if (disabled)
|
|
180
178
|
return;
|
|
181
179
|
dragStartRef.current = positionRef.current;
|
|
182
180
|
applyDragState(true);
|
|
183
181
|
},
|
|
184
|
-
onSwiping:
|
|
182
|
+
onSwiping: (eventData) => {
|
|
185
183
|
if (disabled)
|
|
186
184
|
return;
|
|
187
|
-
|
|
188
|
-
|
|
185
|
+
const start = dragStartRef.current;
|
|
186
|
+
const next = clampToLimits({
|
|
189
187
|
x: start.x + eventData.deltaX,
|
|
190
188
|
y: start.y + eventData.deltaY,
|
|
191
189
|
});
|
|
192
190
|
positionRef.current = next;
|
|
193
191
|
applyTransform(next);
|
|
194
192
|
},
|
|
195
|
-
onSwiped:
|
|
193
|
+
onSwiped: () => {
|
|
196
194
|
if (disabled)
|
|
197
195
|
return;
|
|
198
196
|
applyDragState(false);
|
|
199
|
-
|
|
197
|
+
const resting = snapToNearestEdge(positionRef.current);
|
|
200
198
|
positionRef.current = resting;
|
|
201
199
|
setPosition(resting);
|
|
202
200
|
},
|
|
203
|
-
onTap:
|
|
201
|
+
onTap: () => {
|
|
204
202
|
onTap === null || onTap === void 0 ? void 0 : onTap();
|
|
205
203
|
},
|
|
206
204
|
trackMouse: true,
|
|
207
205
|
trackTouch: true,
|
|
208
206
|
preventScrollOnSwipe: true,
|
|
209
207
|
});
|
|
210
|
-
|
|
208
|
+
const bind = Object.assign(Object.assign({}, handlers), { ref: (element) => {
|
|
211
209
|
handlers.ref(element);
|
|
212
210
|
elementRef.current = element;
|
|
213
211
|
} });
|
|
214
|
-
return { bind
|
|
212
|
+
return { bind, position, isReady, canAnimate };
|
|
215
213
|
};
|
|
216
214
|
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
};
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
transition: canAnimate ? "transform 200ms ease-out" : "none",
|
|
242
|
-
visibility: isReady ? undefined : "hidden",
|
|
243
|
-
display: show ? undefined : "none",
|
|
244
|
-
pointerEvents: show ? undefined : "none",
|
|
215
|
+
const staticStyles = ctDesignStyleManager.makeStyles(() => ({
|
|
216
|
+
root: {
|
|
217
|
+
position: 'fixed',
|
|
218
|
+
top: 0,
|
|
219
|
+
left: 0,
|
|
220
|
+
willChange: 'transform',
|
|
221
|
+
touchAction: 'none',
|
|
222
|
+
userSelect: 'none',
|
|
223
|
+
WebkitUserSelect: 'none',
|
|
224
|
+
WebkitTapHighlightColor: 'transparent',
|
|
225
|
+
zIndex: 100,
|
|
226
|
+
},
|
|
227
|
+
}));
|
|
228
|
+
const FloatingWrapper = (props) => {
|
|
229
|
+
const { children, disabled = false, show = true } = props;
|
|
230
|
+
const { bind, position, isReady, canAnimate } = useDraggable(props);
|
|
231
|
+
const rootClassName = ctDesignStyleManager.useWebMergeStyles([staticStyles.root], []);
|
|
232
|
+
const dynamicStyle = {
|
|
233
|
+
transform: `translate(${position.x}px, ${position.y}px)`,
|
|
234
|
+
cursor: disabled ? 'default' : 'grab',
|
|
235
|
+
transition: canAnimate ? 'transform 200ms ease-out' : 'none',
|
|
236
|
+
visibility: isReady ? undefined : 'hidden',
|
|
237
|
+
display: show ? undefined : 'none',
|
|
238
|
+
pointerEvents: show ? undefined : 'none',
|
|
245
239
|
};
|
|
246
|
-
return (jsxRuntime.jsx(
|
|
240
|
+
return (jsxRuntime.jsx("div", Object.assign({}, bind, { className: rootClassName, style: dynamicStyle, children: children })));
|
|
247
241
|
};
|
|
248
242
|
|
|
249
243
|
exports.FloatingWrapper = FloatingWrapper;
|