@buoy-gg/bottom-sheet 7.0.77 → 7.0.79
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.BottomSheet=void 0;var _react=require("react");var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _jsxRuntime=require("react/jsx-runtime");const SCREEN=_reactNative.Dimensions.get("window");const MIN_HEIGHT=100;const DEFAULT_HEIGHT=400;const FLOATING_WIDTH=380;const FLOATING_HEIGHT=500;const FLOATING_MIN_WIDTH=SCREEN.width*.25;const FLOATING_MIN_HEIGHT=80;const iPhoneDimensionMap={"393,852":{top:59,bottom:34},"430,932":{top:59,bottom:34},"390,844":{top:47,bottom:34},"428,926":{top:47,bottom:34},"375,812":{top:50,bottom:34},"414,896":{top:48,bottom:34}};const getPureJSSafeAreaInsets=()=>{if(_reactNative.Platform.OS==="android"){const p=_reactNative.Platform.Version;const s=_reactNative.StatusBar.currentHeight||0;const x=p>=29;return{top:s,bottom:x?20:0,left:0,right:0}}const{width:e,height:o}=_reactNative.Dimensions.get("window");const r=`${e},${o}`;const c=iPhoneDimensionMap[r];if(c){return{...c,left:0,right:0}}return{top:20,bottom:0,left:0,right:0}};const useSafeAreaInsets=()=>{const[e,o]=(0,_react.useState)(()=>getPureJSSafeAreaInsets());(0,_react.useEffect)(()=>{const r=()=>{o(getPureJSSafeAreaInsets())};const c=_reactNative.Dimensions.addEventListener("change",r);return()=>{c?.remove()}},[]);return e};const defaultTheme={background:"rgba(8, 12, 21, 0.98)",panel:"rgba(16, 22, 35, 0.98)",border:"#00B8E666",primary:"#FFFFFF",secondary:"#B8BFC9",muted:"#7A8599",success:"#4AFF9F",error:"#FF5252",info:"#00B8E6"};const DragIndicator=(0,_react.memo)(function e({isResizing:o,mode:r,hasCustomContent:c=false,theme:p=defaultTheme}){const s=createDynamicStyles(p);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[s.dragIndicatorContainer,c&&s.dragIndicatorContainerCustom],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[s.dragIndicator,r==="floating"&&s.floatingDragIndicator,o&&s.dragIndicatorActive]}),o&&r==="bottomSheet"&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:s.resizeGripContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:s.resizeGripLine}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:s.resizeGripLine}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:s.resizeGripLine})]})]})});const CornerHandle=(0,_react.memo)(function e({isActive:o,theme:r=defaultTheme}){const c=createDynamicStyles(r);return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[c.cornerHandle],children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[c.handler,o&&c.handlerActive]})})});const ModalHeader=(0,_react.memo)(function e({header:o,onClose:r,onToggleMode:c,isResizing:p,mode:s,panHandlers:x,theme:m=defaultTheme}){const h=createDynamicStyles(m);const j=(0,_react.useRef)(0);const g=(0,_react.useRef)(0);const f=(0,_react.useRef)(null);const w=(0,_react.useCallback)(()=>{const t=Date.now();const d=t-j.current;if(d>500){g.current=0}g.current++;j.current=t;if(f.current){clearTimeout(f.current)}f.current=setTimeout(()=>{if(g.current===2){c()}else if(g.current>=3){r()}g.current=0},300)},[c,r]);(0,_react.useEffect)(()=>{return()=>{if(f.current){clearTimeout(f.current)}}},[]);const S=x?x:{};const A=!!x;if(o?.customContent){const t=(0,_jsxRuntime.jsxs)(_reactNative.View,{style:h.headerInner,children:[(0,_jsxRuntime.jsx)(DragIndicator,{isResizing:p,mode:s,hasCustomContent:true,theme:m}),o.customContent]});return(0,_jsxRuntime.jsx)(_reactNative.View,{style:h.header,...S,children:A?(0,_jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback,{onPress:w,children:t}):t})}const i=(0,_jsxRuntime.jsxs)(_reactNative.View,{style:h.headerInner,children:[(0,_jsxRuntime.jsx)(DragIndicator,{isResizing:p,mode:s,theme:m}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:h.headerContent,children:[o?.title&&(0,_jsxRuntime.jsx)(_reactNative.Text,{style:h.headerTitle,children:o.title}),o?.subtitle&&(0,_jsxRuntime.jsx)(_reactNative.Text,{style:h.headerSubtitle,children:o.subtitle})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:h.headerHintText,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:h.hintText,children:"Double tap: Toggle \u2022 Triple tap: Close"})})]});return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[h.header,s==="floating"&&h.floatingModeHeader],...S,children:A?(0,_jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback,{onPress:w,children:i}):i})});const DraggableHeader=(0,_react.memo)(function e({children:o,position:r,onDragStart:c,onDragEnd:p,onTap:s,containerBounds:x=_reactNative.Dimensions.get("window"),elementSize:m={width:100,height:50},minPosition:h={x:0,y:0},style:j,enabled:g=true}){const f=(0,_react.useRef)(false);const w=(0,_react.useRef)(0);const S=(0,_react.useRef)({x:0,y:0});const A=(0,_react.useMemo)(()=>_reactNative.PanResponder.create({onStartShouldSetPanResponder:()=>g,onMoveShouldSetPanResponder:(i,t)=>g&&(Math.abs(t.dx)>1||Math.abs(t.dy)>1),onPanResponderTerminationRequest:()=>false,onPanResponderGrant:i=>{f.current=false;w.current=0;S.current={x:i.nativeEvent.locationX,y:i.nativeEvent.locationY};r.stopAnimation(({x:t,y:d})=>{r.setOffset({x:t,y:d});r.setValue({x:0,y:0})})},onPanResponderMove:(i,t)=>{const d=Math.abs(t.dx)+Math.abs(t.dy);w.current=d;if(d>5&&!f.current){f.current=true;c?.()}const l=i.nativeEvent.pageX-S.current.x;const K=i.nativeEvent.pageY-S.current.y;r.setOffset({x:0,y:0});r.setValue({x:l,y:K})},onPanResponderRelease:()=>{const i=Number(JSON.stringify(r.x));const t=Number(JSON.stringify(r.y));if(w.current<=5&&!f.current){r.setOffset({x:0,y:0});r.setValue({x:i,y:t});s?.();return}const d=Math.max(h.x,Math.min(i,x.width-m.width));const l=Math.max(h.y,Math.min(t,x.height-m.height));r.setValue({x:d,y:l});p?.({x:d,y:l});f.current=false},onPanResponderTerminate:()=>{f.current=false}}),[g,r,c,p,s,x,m,h]);return(0,_jsxRuntime.jsx)(_reactNative.View,{style:j,...A.panHandlers,children:o})});const BottomSheetComponent=({visible:e,onClose:o,children:r,header:c,styles:p={},minHeight:s=MIN_HEIGHT,maxHeight:x,initialHeight:m=DEFAULT_HEIGHT,initialMode:h="bottomSheet",onModeChange:j,footer:g,footerHeight:f=0,onBack:w,theme:S,background:A=true})=>{const i={...defaultTheme,...S};const t=(0,_react.useMemo)(()=>createDynamicStyles(i),[i]);const d=useSafeAreaInsets();const[l,K]=(0,_react.useState)(h);const[T,M]=(0,_react.useState)(false);const[E,q]=(0,_react.useState)(false);const[be,he]=(0,_react.useState)(m);const[I,Q]=(0,_react.useState)({width:FLOATING_WIDTH,height:FLOATING_HEIGHT,top:(SCREEN.height-FLOATING_HEIGHT)/2,left:(SCREEN.width-FLOATING_WIDTH)/2});const[X]=(0,_react.useState)({width:SCREEN.width,height:SCREEN.height});const R=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;const y=(0,_react.useRef)(new _reactNative.Animated.Value(SCREEN.height)).current;const B=(0,_react.useRef)(new _reactNative.Animated.Value(m)).current;const J=(0,_react.useRef)(m);const V=(0,_react.useRef)(new _reactNative.Animated.ValueXY({x:(SCREEN.width-FLOATING_WIDTH)/2,y:(SCREEN.height-FLOATING_HEIGHT)/2})).current;const Z=(0,_react.useRef)(new _reactNative.Animated.Value(FLOATING_WIDTH)).current;const ee=(0,_react.useRef)(new _reactNative.Animated.Value(FLOATING_HEIGHT)).current;const F=(0,_react.useRef)(I);const oe=(0,_react.useRef)(I);(0,_react.useEffect)(()=>{F.current=I},[I]);(0,_react.useEffect)(()=>{return()=>{R.stopAnimation();y.stopAnimation();B.stopAnimation();V.stopAnimation();Z.stopAnimation();ee.stopAnimation();R.setValue(0);y.setValue(SCREEN.height);B.setValue(m);J.current=m}},[]);const re=R.interpolate({inputRange:[0,1],outputRange:[0,1],extrapolate:"clamp"});const ae=x||SCREEN.height-d.top;const U=(0,_react.useCallback)(()=>{q(false);M(false);const a=l==="bottomSheet"?"floating":"bottomSheet";K(a);j?.(a)},[l,j]);(0,_react.useEffect)(()=>{q(false);M(false)},[l]);(0,_react.useEffect)(()=>{let a=null;let n=null;if(e){y.setValue(SCREEN.height);R.setValue(0);if(l==="bottomSheet"){a=_reactNative.Animated.parallel([_reactNative.Animated.spring(y,{toValue:0,tension:180,friction:22,useNativeDriver:true}),_reactNative.Animated.timing(R,{toValue:1,duration:200,useNativeDriver:true})]);a.start()}else{a=_reactNative.Animated.timing(R,{toValue:1,duration:200,useNativeDriver:true});a.start()}}else{if(l==="bottomSheet"){n=_reactNative.Animated.parallel([_reactNative.Animated.spring(y,{toValue:SCREEN.height,tension:180,friction:22,useNativeDriver:true}),_reactNative.Animated.timing(R,{toValue:0,duration:200,useNativeDriver:true})]);n.start()}else{n=_reactNative.Animated.timing(R,{toValue:0,duration:200,useNativeDriver:true});n.start()}}return()=>{if(a)a.stop();if(n)n.stop()}},[e,l,R,y]);const se=(0,_react.useRef)(0);const fe=(0,_react.useMemo)(()=>_reactNative.PanResponder.create({onStartShouldSetPanResponder:()=>l==="bottomSheet",onMoveShouldSetPanResponder:(a,n)=>l==="bottomSheet"&&Math.abs(n.dy)>3,onPanResponderTerminationRequest:()=>false,onPanResponderGrant:a=>{M(true);se.current=a.nativeEvent.locationY||0;B.stopAnimation(n=>{J.current=n});y.stopAnimation()},onPanResponderMove:a=>{const n=a.nativeEvent.pageY-se.current;let b=SCREEN.height-n;b=Math.max(s,Math.min(b,ae));B.setValue(b);J.current=b},onPanResponderRelease:(a,n)=>{M(false);const b=J.current;const z=n.vy>.8&&n.dy>50||n.dy>150&&b<=s;if(z){_reactNative.Animated.parallel([_reactNative.Animated.timing(R,{toValue:0,duration:200,useNativeDriver:true}),_reactNative.Animated.spring(y,{toValue:SCREEN.height,tension:180,friction:22,useNativeDriver:true})]).start(()=>o());return}he(b)},onPanResponderTerminate:()=>{M(false)}}),[l,s,ae,B,y,R,o]);const O=(0,_react.useCallback)(a=>{let n=false;return _reactNative.PanResponder.create({onStartShouldSetPanResponder:()=>l==="floating",onMoveShouldSetPanResponder:()=>l==="floating",onPanResponderGrant:()=>{n=false;const b=F.current;V.stopAnimation(({x:z,y:H})=>{V.setValue({x:z,y:H})});M(true);oe.current={...b}},onPanResponderMove:(b,z)=>{const{dx:H,dy:G}=z;if(Math.abs(H)<.5&&Math.abs(G)<.5)return;n=true;const le=Math.max(0,d.left||0);const de=X.width-Math.max(0,d.right||0);const ce=Math.max(0,d.top||0);const ue=X.height-Math.max(0,d.bottom||0);const u=oe.current;const D=u.left+u.width;const P=u.top+u.height;let v=u.left;let C=u.top;let _=D;let Y=P;switch(a){case"topLeft":{const L=Math.max(le,Math.min(u.left+H,D-FLOATING_MIN_WIDTH));const k=Math.max(ce,Math.min(u.top+G,P-FLOATING_MIN_HEIGHT));v=L;C=k;_=D;Y=P;break}case"topRight":{const L=Math.min(de,Math.max(D+H,u.left+FLOATING_MIN_WIDTH));const k=Math.max(ce,Math.min(u.top+G,P-FLOATING_MIN_HEIGHT));v=u.left;C=k;_=L;Y=P;break}case"bottomLeft":{const L=Math.max(le,Math.min(u.left+H,D-FLOATING_MIN_WIDTH));const k=Math.min(ue,Math.max(P+G,u.top+FLOATING_MIN_HEIGHT));v=L;C=u.top;_=D;Y=k;break}case"bottomRight":{const L=Math.min(de,Math.max(D+H,u.left+FLOATING_MIN_WIDTH));const k=Math.min(ue,Math.max(P+G,u.top+FLOATING_MIN_HEIGHT));v=u.left;C=u.top;_=L;Y=k;break}}const te=Math.max(FLOATING_MIN_WIDTH,_-v);const ne=Math.max(FLOATING_MIN_HEIGHT,Y-C);Q({width:te,height:ne,left:v,top:C});Z.setValue(te);ee.setValue(ne);V.setValue({x:v,y:C});F.current={width:te,height:ne,left:v,top:C}},onPanResponderRelease:()=>{M(false);if(a==="topRight"&&!n){o();return}if(a==="topLeft"&&!n&&w){w();return}n=false;Q(F.current)},onPanResponderTerminate:()=>{M(false);n=false}})},[l,X,d.left,d.right,d.top,d.bottom,V,Z,ee,o,w]);const $=(0,_react.useMemo)(()=>{return{topLeft:O("topLeft"),topRight:O("topRight"),bottomLeft:O("bottomLeft"),bottomRight:O("bottomRight")}},[O]);const pe=(0,_react.useCallback)(()=>{q(true)},[]);const ge=(0,_react.useCallback)(a=>{q(false);const n=F.current;const b={...n,left:a.x,top:a.y};Q(b)},[]);const ie=(0,_react.useRef)(0);const N=(0,_react.useRef)(0);const W=(0,_react.useRef)(null);const me=(0,_react.useCallback)(()=>{const a=Date.now();const n=a-ie.current;if(n>500){N.current=0}N.current++;ie.current=a;if(W.current){clearTimeout(W.current)}W.current=setTimeout(()=>{if(N.current===2){U()}else if(N.current>=3){o()}N.current=0},300)},[U,o]);(0,_react.useEffect)(()=>{return()=>{if(W.current){clearTimeout(W.current)}}},[]);if(!e){return null}if(l==="floating"){return(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{style:[t.floatingModal,{width:I.width,height:I.height,opacity:re,transform:[{translateX:V.x},{translateY:V.y}]},(E||T)&&t.floatingModalDragging,p.container],children:[(0,_jsxRuntime.jsx)(DraggableHeader,{position:V,onDragStart:pe,onDragEnd:ge,onTap:me,containerBounds:X,elementSize:I,minPosition:{x:0,y:d.top},style:t.floatingHeader,enabled:l==="floating"&&!T,children:(0,_jsxRuntime.jsx)(ModalHeader,{header:c,onClose:o,onToggleMode:U,isResizing:E||T,mode:l,theme:i})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[t.content,p.content],children:[A?(0,_jsxRuntime.jsx)(_sharedUi.ToolBackground,{}):null,(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{style:{flex:1},contentContainerStyle:{flexGrow:1,paddingBottom:f},showsVerticalScrollIndicator:true,nestedScrollEnabled:true,children:r}),g?(0,_jsxRuntime.jsx)(_reactNative.View,{style:t.footerContainer,children:g}):null]}),(0,_jsxRuntime.jsx)(_reactNative.View,{...$.topLeft.panHandlers,style:[t.cornerHandleWrapper,{top:4,left:4}],hitSlop:{top:8,left:8,right:8,bottom:8},children:(0,_jsxRuntime.jsx)(CornerHandle,{isActive:E||T,theme:i})}),(0,_jsxRuntime.jsx)(_reactNative.View,{...$.topRight.panHandlers,style:[t.cornerHandleWrapper,{top:4,right:4}],hitSlop:{top:8,left:8,right:8,bottom:8},children:(0,_jsxRuntime.jsx)(CornerHandle,{isActive:E||T,theme:i})}),(0,_jsxRuntime.jsx)(_reactNative.View,{...$.bottomLeft.panHandlers,style:[t.cornerHandleWrapper,{bottom:4,left:4}],hitSlop:{top:8,left:8,right:8,bottom:8},children:(0,_jsxRuntime.jsx)(CornerHandle,{isActive:E||T,theme:i})}),(0,_jsxRuntime.jsx)(_reactNative.View,{...$.bottomRight.panHandlers,style:[t.cornerHandleWrapper,{bottom:4,right:4}],hitSlop:{top:8,left:8,right:8,bottom:8},children:(0,_jsxRuntime.jsx)(CornerHandle,{isActive:E||T,theme:i})})]})}return(0,_jsxRuntime.jsx)(_reactNative.View,{style:t.fullScreenContainer,pointerEvents:"box-none",children:(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[t.bottomSheetWrapper,{opacity:re,transform:[{translateY:y}]}],children:(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{style:[t.bottomSheet,p.container,{height:B}],children:[(0,_jsxRuntime.jsx)(ModalHeader,{header:c,onClose:o,onToggleMode:U,isResizing:T,mode:l,panHandlers:fe.panHandlers,theme:i}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[t.content,p.content],children:[A?(0,_jsxRuntime.jsx)(_sharedUi.ToolBackground,{}):null,(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{style:{flex:1},contentContainerStyle:{flexGrow:1,paddingBottom:f},showsVerticalScrollIndicator:true,nestedScrollEnabled:true,children:r}),g?(0,_jsxRuntime.jsx)(_reactNative.View,{style:t.footerContainer,children:g}):null]})]})})})};const createDynamicStyles=e=>_reactNative.StyleSheet.create({fullScreenContainer:{..._sharedUi.absoluteFill,zIndex:1e3},bottomSheetWrapper:{position:"absolute",bottom:0,left:0,right:0},bottomSheet:{backgroundColor:e.panel,borderTopLeftRadius:16,borderTopRightRadius:16,borderWidth:1,borderColor:e.border,shadowColor:e.info,shadowOffset:{width:0,height:-4},shadowOpacity:.3,shadowRadius:12,elevation:20},floatingModal:{position:"absolute",backgroundColor:e.panel,borderRadius:16,borderWidth:1,borderColor:e.border,shadowColor:e.info,shadowOffset:{width:0,height:0},shadowOpacity:.5,shadowRadius:20,elevation:24,zIndex:1e3,width:FLOATING_WIDTH,height:FLOATING_HEIGHT},floatingModalDragging:{borderColor:e.success,borderWidth:2,shadowColor:e.success+"99",shadowOpacity:.8,shadowRadius:12},header:{borderTopLeftRadius:16,borderTopRightRadius:16,backgroundColor:e.panel,minHeight:56,borderWidth:1,borderColor:e.border,borderBottomWidth:1,borderBottomColor:"rgba(255, 255, 255, 0.1)"},floatingHeader:{borderTopLeftRadius:14,borderTopRightRadius:14},floatingModeHeader:{borderTopLeftRadius:14,borderTopRightRadius:14},headerInner:{flex:1,justifyContent:"center"},dragIndicatorContainer:{alignItems:"center",paddingVertical:8,backgroundColor:"transparent"},dragIndicatorContainerCustom:{paddingTop:6,paddingBottom:2,backgroundColor:"transparent"},dragIndicator:{width:40,height:3,backgroundColor:e.info+"99",borderRadius:2,shadowColor:e.info,shadowOffset:{width:0,height:0},shadowOpacity:.8,shadowRadius:4},floatingDragIndicator:{width:50,height:5,backgroundColor:e.muted},dragIndicatorActive:{backgroundColor:e.success,width:40},resizeGripContainer:{position:"absolute",flexDirection:"row",gap:2,marginTop:12},resizeGripLine:{width:12,height:1,backgroundColor:e.success,opacity:.6},headerContent:{paddingHorizontal:16,alignItems:"center"},headerTitle:{fontSize:16,fontWeight:"600",color:e.primary},headerSubtitle:{fontSize:12,color:e.secondary,paddingTop:4},headerHintText:{position:"absolute",top:0,left:0,right:0,bottom:0,justifyContent:"center",alignItems:"center"},hintText:{fontSize:10,color:e.muted,fontStyle:"italic"},content:{flex:1,backgroundColor:e.background,borderBottomLeftRadius:16,borderBottomRightRadius:16,overflow:"hidden"},cornerHandle:{position:"absolute",zIndex:1},cornerHandleWrapper:{position:"absolute",width:30,height:30,zIndex:1e3},handler:{width:20,height:20,backgroundColor:"transparent",borderRadius:10,borderWidth:0,borderColor:"transparent"},handlerActive:{backgroundColor:e.success+"1A",borderColor:e.success,borderWidth:2,shadowColor:e.success+"99",shadowOffset:{width:0,height:0},shadowOpacity:1,shadowRadius:8},footerContainer:{position:"absolute",left:0,right:0,bottom:0,backgroundColor:e.background,borderBottomLeftRadius:16,borderBottomRightRadius:16}});const BottomSheet=exports.BottomSheet=(0,_react.memo)(BottomSheetComponent);
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.BottomSheet=void 0;var _react=require("react");var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _jsxRuntime=require("react/jsx-runtime");const SCREEN=_reactNative.Dimensions.get("window");const MIN_HEIGHT=100;const DEFAULT_HEIGHT=400;const FLOATING_WIDTH=380;const FLOATING_HEIGHT=500;const FLOATING_MIN_WIDTH=SCREEN.width*.25;const FLOATING_MIN_HEIGHT=80;const iPhoneDimensionMap={"393,852":{top:59,bottom:34},"430,932":{top:59,bottom:34},"390,844":{top:47,bottom:34},"428,926":{top:47,bottom:34},"375,812":{top:50,bottom:34},"414,896":{top:48,bottom:34}};const getPureJSSafeAreaInsets=()=>{if(_reactNative.Platform.OS==="android"){const p=_reactNative.Platform.Version;const s=_reactNative.StatusBar.currentHeight||0;const x=p>=29;return{top:s,bottom:x?20:0,left:0,right:0}}const{width:e,height:n}=_reactNative.Dimensions.get("window");const r=`${e},${n}`;const c=iPhoneDimensionMap[r];if(c){return{...c,left:0,right:0}}return{top:20,bottom:0,left:0,right:0}};const useSafeAreaInsets=()=>{const[e,n]=(0,_react.useState)(()=>getPureJSSafeAreaInsets());(0,_react.useEffect)(()=>{const r=()=>{n(getPureJSSafeAreaInsets())};const c=_reactNative.Dimensions.addEventListener("change",r);return()=>{c?.remove()}},[]);return e};const defaultTheme={background:"rgba(8, 12, 21, 0.98)",panel:"rgba(16, 22, 35, 0.98)",border:"#00B8E666",primary:"#FFFFFF",secondary:"#B8BFC9",muted:"#7A8599",success:"#4AFF9F",error:"#FF5252",info:"#00B8E6"};const DragIndicator=(0,_react.memo)(function e({isResizing:n,mode:r,hasCustomContent:c=false,theme:p=defaultTheme}){const s=createDynamicStyles(p);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[s.dragIndicatorContainer,c&&s.dragIndicatorContainerCustom],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[s.dragIndicator,r==="floating"&&s.floatingDragIndicator,n&&s.dragIndicatorActive]}),n&&r==="bottomSheet"&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:s.resizeGripContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:s.resizeGripLine}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:s.resizeGripLine}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:s.resizeGripLine})]})]})});const CornerHandle=(0,_react.memo)(function e({isActive:n,theme:r=defaultTheme}){const c=createDynamicStyles(r);return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[c.cornerHandle],children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[c.handler,n&&c.handlerActive]})})});const ModalHeader=(0,_react.memo)(function e({header:n,onClose:r,onToggleMode:c,isResizing:p,mode:s,panHandlers:x,theme:m=defaultTheme}){const h=createDynamicStyles(m);const j=(0,_react.useRef)(0);const g=(0,_react.useRef)(0);const f=(0,_react.useRef)(null);const w=(0,_react.useCallback)(()=>{const t=Date.now();const d=t-j.current;if(d>500){g.current=0}g.current++;j.current=t;if(f.current){clearTimeout(f.current)}f.current=setTimeout(()=>{if(g.current===2){c()}else if(g.current>=3){r()}g.current=0},300)},[c,r]);(0,_react.useEffect)(()=>{return()=>{if(f.current){clearTimeout(f.current)}}},[]);const S=x?x:{};const A=!!x;if(n?.customContent){const t=(0,_jsxRuntime.jsxs)(_reactNative.View,{style:h.headerInner,children:[(0,_jsxRuntime.jsx)(DragIndicator,{isResizing:p,mode:s,hasCustomContent:true,theme:m}),n.customContent]});return(0,_jsxRuntime.jsx)(_reactNative.View,{style:h.header,...S,children:A?(0,_jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback,{onPress:w,children:t}):t})}const i=(0,_jsxRuntime.jsxs)(_reactNative.View,{style:h.headerInner,children:[(0,_jsxRuntime.jsx)(DragIndicator,{isResizing:p,mode:s,theme:m}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:h.headerContent,children:[n?.title&&(0,_jsxRuntime.jsx)(_reactNative.Text,{style:h.headerTitle,children:n.title}),n?.subtitle&&(0,_jsxRuntime.jsx)(_reactNative.Text,{style:h.headerSubtitle,children:n.subtitle})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:h.headerHintText,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:h.hintText,children:"Double tap: Toggle \u2022 Triple tap: Close"})})]});return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[h.header,s==="floating"&&h.floatingModeHeader],...S,children:A?(0,_jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback,{onPress:w,children:i}):i})});const DraggableHeader=(0,_react.memo)(function e({children:n,position:r,onDragStart:c,onDragEnd:p,onTap:s,containerBounds:x=_reactNative.Dimensions.get("window"),elementSize:m={width:100,height:50},minPosition:h={x:0,y:0},style:j,enabled:g=true}){const f=(0,_react.useRef)(false);const w=(0,_react.useRef)(0);const S=(0,_react.useRef)({x:0,y:0});const A=(0,_react.useMemo)(()=>_reactNative.PanResponder.create({onStartShouldSetPanResponder:()=>g,onMoveShouldSetPanResponder:(i,t)=>g&&(Math.abs(t.dx)>1||Math.abs(t.dy)>1),onPanResponderTerminationRequest:()=>false,onPanResponderGrant:i=>{f.current=false;w.current=0;S.current={x:i.nativeEvent.locationX,y:i.nativeEvent.locationY};r.stopAnimation(({x:t,y:d})=>{r.setOffset({x:t,y:d});r.setValue({x:0,y:0})})},onPanResponderMove:(i,t)=>{const d=Math.abs(t.dx)+Math.abs(t.dy);w.current=d;if(d>5&&!f.current){f.current=true;c?.()}const l=i.nativeEvent.pageX-S.current.x;const K=i.nativeEvent.pageY-S.current.y;r.setOffset({x:0,y:0});r.setValue({x:l,y:K})},onPanResponderRelease:()=>{const i=Number(JSON.stringify(r.x));const t=Number(JSON.stringify(r.y));if(w.current<=5&&!f.current){r.setOffset({x:0,y:0});r.setValue({x:i,y:t});s?.();return}const d=Math.max(h.x,Math.min(i,x.width-m.width));const l=Math.max(h.y,Math.min(t,x.height-m.height));r.setValue({x:d,y:l});p?.({x:d,y:l});f.current=false},onPanResponderTerminate:()=>{f.current=false}}),[g,r,c,p,s,x,m,h]);return(0,_jsxRuntime.jsx)(_reactNative.View,{style:j,...A.panHandlers,children:n})});const BottomSheetComponent=({visible:e,onClose:n,children:r,header:c,styles:p={},minHeight:s=MIN_HEIGHT,maxHeight:x,initialHeight:m=DEFAULT_HEIGHT,initialMode:h="bottomSheet",onModeChange:j,footer:g,footerHeight:f=0,onBack:w,theme:S,background:A=true})=>{const i={...defaultTheme,...S};const t=(0,_react.useMemo)(()=>createDynamicStyles(i),[i]);const d=useSafeAreaInsets();const[l,K]=(0,_react.useState)(h);const[T,M]=(0,_react.useState)(false);const[E,q]=(0,_react.useState)(false);const[be,he]=(0,_react.useState)(m);const[I,Q]=(0,_react.useState)({width:FLOATING_WIDTH,height:FLOATING_HEIGHT,top:(SCREEN.height-FLOATING_HEIGHT)/2,left:(SCREEN.width-FLOATING_WIDTH)/2});const[X]=(0,_react.useState)({width:SCREEN.width,height:SCREEN.height});const R=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;const y=(0,_react.useRef)(new _reactNative.Animated.Value(SCREEN.height)).current;const B=(0,_react.useRef)(new _reactNative.Animated.Value(m)).current;const J=(0,_react.useRef)(m);const V=(0,_react.useRef)(new _reactNative.Animated.ValueXY({x:(SCREEN.width-FLOATING_WIDTH)/2,y:(SCREEN.height-FLOATING_HEIGHT)/2})).current;const Z=(0,_react.useRef)(new _reactNative.Animated.Value(FLOATING_WIDTH)).current;const ee=(0,_react.useRef)(new _reactNative.Animated.Value(FLOATING_HEIGHT)).current;const F=(0,_react.useRef)(I);const ne=(0,_react.useRef)(I);(0,_react.useEffect)(()=>{F.current=I},[I]);(0,_react.useEffect)(()=>{return()=>{R.stopAnimation();y.stopAnimation();B.stopAnimation();V.stopAnimation();Z.stopAnimation();ee.stopAnimation();R.setValue(0);y.setValue(SCREEN.height);B.setValue(m);J.current=m}},[]);const re=R.interpolate({inputRange:[0,1],outputRange:[0,1],extrapolate:"clamp"});const ae=x||SCREEN.height-d.top;const U=(0,_react.useCallback)(()=>{q(false);M(false);const a=l==="bottomSheet"?"floating":"bottomSheet";K(a);j?.(a)},[l,j]);(0,_react.useEffect)(()=>{q(false);M(false)},[l]);(0,_react.useEffect)(()=>{let a=null;let o=null;if(e){y.setValue(SCREEN.height);R.setValue(0);if(l==="bottomSheet"){a=_reactNative.Animated.parallel([_reactNative.Animated.spring(y,{toValue:0,tension:180,friction:22,useNativeDriver:true}),_reactNative.Animated.timing(R,{toValue:1,duration:200,useNativeDriver:true})]);a.start()}else{a=_reactNative.Animated.timing(R,{toValue:1,duration:200,useNativeDriver:true});a.start()}}else{if(l==="bottomSheet"){o=_reactNative.Animated.parallel([_reactNative.Animated.spring(y,{toValue:SCREEN.height,tension:180,friction:22,useNativeDriver:true}),_reactNative.Animated.timing(R,{toValue:0,duration:200,useNativeDriver:true})]);o.start()}else{o=_reactNative.Animated.timing(R,{toValue:0,duration:200,useNativeDriver:true});o.start()}}return()=>{if(a)a.stop();if(o)o.stop()}},[e,l,R,y]);const se=(0,_react.useRef)(0);const fe=(0,_react.useMemo)(()=>_reactNative.PanResponder.create({onStartShouldSetPanResponder:()=>l==="bottomSheet",onMoveShouldSetPanResponder:(a,o)=>l==="bottomSheet"&&Math.abs(o.dy)>3,onPanResponderTerminationRequest:()=>false,onPanResponderGrant:a=>{M(true);se.current=a.nativeEvent.locationY||0;B.stopAnimation(o=>{J.current=o});y.stopAnimation()},onPanResponderMove:a=>{const o=a.nativeEvent.pageY-se.current;let b=SCREEN.height-o;b=Math.max(s,Math.min(b,ae));B.setValue(b);J.current=b},onPanResponderRelease:(a,o)=>{M(false);const b=J.current;const z=o.vy>.8&&o.dy>50||o.dy>150&&b<=s;if(z){_reactNative.Animated.parallel([_reactNative.Animated.timing(R,{toValue:0,duration:200,useNativeDriver:true}),_reactNative.Animated.spring(y,{toValue:SCREEN.height,tension:180,friction:22,useNativeDriver:true})]).start(()=>n());return}he(b)},onPanResponderTerminate:()=>{M(false)}}),[l,s,ae,B,y,R,n]);const O=(0,_react.useCallback)(a=>{let o=false;return _reactNative.PanResponder.create({onStartShouldSetPanResponder:()=>l==="floating",onMoveShouldSetPanResponder:()=>l==="floating",onPanResponderGrant:()=>{o=false;const b=F.current;V.stopAnimation(({x:z,y:H})=>{V.setValue({x:z,y:H})});M(true);ne.current={...b}},onPanResponderMove:(b,z)=>{const{dx:H,dy:G}=z;if(Math.abs(H)<.5&&Math.abs(G)<.5)return;o=true;const le=Math.max(0,d.left||0);const de=X.width-Math.max(0,d.right||0);const ce=Math.max(0,d.top||0);const ue=X.height-Math.max(0,d.bottom||0);const u=ne.current;const D=u.left+u.width;const P=u.top+u.height;let v=u.left;let C=u.top;let _=D;let Y=P;switch(a){case"topLeft":{const L=Math.max(le,Math.min(u.left+H,D-FLOATING_MIN_WIDTH));const k=Math.max(ce,Math.min(u.top+G,P-FLOATING_MIN_HEIGHT));v=L;C=k;_=D;Y=P;break}case"topRight":{const L=Math.min(de,Math.max(D+H,u.left+FLOATING_MIN_WIDTH));const k=Math.max(ce,Math.min(u.top+G,P-FLOATING_MIN_HEIGHT));v=u.left;C=k;_=L;Y=P;break}case"bottomLeft":{const L=Math.max(le,Math.min(u.left+H,D-FLOATING_MIN_WIDTH));const k=Math.min(ue,Math.max(P+G,u.top+FLOATING_MIN_HEIGHT));v=L;C=u.top;_=D;Y=k;break}case"bottomRight":{const L=Math.min(de,Math.max(D+H,u.left+FLOATING_MIN_WIDTH));const k=Math.min(ue,Math.max(P+G,u.top+FLOATING_MIN_HEIGHT));v=u.left;C=u.top;_=L;Y=k;break}}const te=Math.max(FLOATING_MIN_WIDTH,_-v);const oe=Math.max(FLOATING_MIN_HEIGHT,Y-C);Q({width:te,height:oe,left:v,top:C});Z.setValue(te);ee.setValue(oe);V.setValue({x:v,y:C});F.current={width:te,height:oe,left:v,top:C}},onPanResponderRelease:()=>{M(false);if(a==="topRight"&&!o){n();return}if(a==="topLeft"&&!o&&w){w();return}o=false;Q(F.current)},onPanResponderTerminate:()=>{M(false);o=false}})},[l,X,d.left,d.right,d.top,d.bottom,V,Z,ee,n,w]);const $=(0,_react.useMemo)(()=>{return{topLeft:O("topLeft"),topRight:O("topRight"),bottomLeft:O("bottomLeft"),bottomRight:O("bottomRight")}},[O]);const pe=(0,_react.useCallback)(()=>{q(true)},[]);const ge=(0,_react.useCallback)(a=>{q(false);const o=F.current;const b={...o,left:a.x,top:a.y};Q(b)},[]);const ie=(0,_react.useRef)(0);const N=(0,_react.useRef)(0);const W=(0,_react.useRef)(null);const me=(0,_react.useCallback)(()=>{const a=Date.now();const o=a-ie.current;if(o>500){N.current=0}N.current++;ie.current=a;if(W.current){clearTimeout(W.current)}W.current=setTimeout(()=>{if(N.current===2){U()}else if(N.current>=3){n()}N.current=0},300)},[U,n]);(0,_react.useEffect)(()=>{return()=>{if(W.current){clearTimeout(W.current)}}},[]);if(!e){return null}if(l==="floating"){return(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{style:[t.floatingModal,{width:I.width,height:I.height,opacity:re,transform:[{translateX:V.x},{translateY:V.y}]},(E||T)&&t.floatingModalDragging,p.container],children:[(0,_jsxRuntime.jsx)(DraggableHeader,{position:V,onDragStart:pe,onDragEnd:ge,onTap:me,containerBounds:X,elementSize:I,minPosition:{x:0,y:d.top},style:t.floatingHeader,enabled:l==="floating"&&!T,children:(0,_jsxRuntime.jsx)(ModalHeader,{header:c,onClose:n,onToggleMode:U,isResizing:E||T,mode:l,theme:i})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[t.content,p.content],children:[A?(0,_jsxRuntime.jsx)(_sharedUi.ToolBackground,{}):null,(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{keyboardShouldPersistTaps:"handled",style:{flex:1},contentContainerStyle:{flexGrow:1,paddingBottom:f},showsVerticalScrollIndicator:true,nestedScrollEnabled:true,children:r}),g?(0,_jsxRuntime.jsx)(_reactNative.View,{style:t.footerContainer,children:g}):null]}),(0,_jsxRuntime.jsx)(_reactNative.View,{...$.topLeft.panHandlers,style:[t.cornerHandleWrapper,{top:4,left:4}],hitSlop:{top:8,left:8,right:8,bottom:8},children:(0,_jsxRuntime.jsx)(CornerHandle,{isActive:E||T,theme:i})}),(0,_jsxRuntime.jsx)(_reactNative.View,{...$.topRight.panHandlers,style:[t.cornerHandleWrapper,{top:4,right:4}],hitSlop:{top:8,left:8,right:8,bottom:8},children:(0,_jsxRuntime.jsx)(CornerHandle,{isActive:E||T,theme:i})}),(0,_jsxRuntime.jsx)(_reactNative.View,{...$.bottomLeft.panHandlers,style:[t.cornerHandleWrapper,{bottom:4,left:4}],hitSlop:{top:8,left:8,right:8,bottom:8},children:(0,_jsxRuntime.jsx)(CornerHandle,{isActive:E||T,theme:i})}),(0,_jsxRuntime.jsx)(_reactNative.View,{...$.bottomRight.panHandlers,style:[t.cornerHandleWrapper,{bottom:4,right:4}],hitSlop:{top:8,left:8,right:8,bottom:8},children:(0,_jsxRuntime.jsx)(CornerHandle,{isActive:E||T,theme:i})})]})}return(0,_jsxRuntime.jsx)(_reactNative.View,{style:t.fullScreenContainer,pointerEvents:"box-none",children:(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[t.bottomSheetWrapper,{opacity:re,transform:[{translateY:y}]}],children:(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{style:[t.bottomSheet,p.container,{height:B}],children:[(0,_jsxRuntime.jsx)(ModalHeader,{header:c,onClose:n,onToggleMode:U,isResizing:T,mode:l,panHandlers:fe.panHandlers,theme:i}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[t.content,p.content],children:[A?(0,_jsxRuntime.jsx)(_sharedUi.ToolBackground,{}):null,(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{keyboardShouldPersistTaps:"handled",style:{flex:1},contentContainerStyle:{flexGrow:1,paddingBottom:f},showsVerticalScrollIndicator:true,nestedScrollEnabled:true,children:r}),g?(0,_jsxRuntime.jsx)(_reactNative.View,{style:t.footerContainer,children:g}):null]})]})})})};const createDynamicStyles=e=>_reactNative.StyleSheet.create({fullScreenContainer:{..._sharedUi.absoluteFill,zIndex:1e3},bottomSheetWrapper:{position:"absolute",bottom:0,left:0,right:0},bottomSheet:{backgroundColor:e.panel,borderTopLeftRadius:16,borderTopRightRadius:16,borderWidth:1,borderColor:e.border,shadowColor:e.info,shadowOffset:{width:0,height:-4},shadowOpacity:.3,shadowRadius:12,elevation:20},floatingModal:{position:"absolute",backgroundColor:e.panel,borderRadius:16,borderWidth:1,borderColor:e.border,shadowColor:e.info,shadowOffset:{width:0,height:0},shadowOpacity:.5,shadowRadius:20,elevation:24,zIndex:1e3,width:FLOATING_WIDTH,height:FLOATING_HEIGHT},floatingModalDragging:{borderColor:e.success,borderWidth:2,shadowColor:e.success+"99",shadowOpacity:.8,shadowRadius:12},header:{borderTopLeftRadius:16,borderTopRightRadius:16,backgroundColor:e.panel,minHeight:56,borderWidth:1,borderColor:e.border,borderBottomWidth:1,borderBottomColor:"rgba(255, 255, 255, 0.1)"},floatingHeader:{borderTopLeftRadius:14,borderTopRightRadius:14},floatingModeHeader:{borderTopLeftRadius:14,borderTopRightRadius:14},headerInner:{flex:1,justifyContent:"center"},dragIndicatorContainer:{alignItems:"center",paddingVertical:8,backgroundColor:"transparent"},dragIndicatorContainerCustom:{paddingTop:6,paddingBottom:2,backgroundColor:"transparent"},dragIndicator:{width:40,height:3,backgroundColor:e.info+"99",borderRadius:2,shadowColor:e.info,shadowOffset:{width:0,height:0},shadowOpacity:.8,shadowRadius:4},floatingDragIndicator:{width:50,height:5,backgroundColor:e.muted},dragIndicatorActive:{backgroundColor:e.success,width:40},resizeGripContainer:{position:"absolute",flexDirection:"row",gap:2,marginTop:12},resizeGripLine:{width:12,height:1,backgroundColor:e.success,opacity:.6},headerContent:{paddingHorizontal:16,alignItems:"center"},headerTitle:{fontSize:16,fontWeight:"600",color:e.primary},headerSubtitle:{fontSize:12,color:e.secondary,paddingTop:4},headerHintText:{position:"absolute",top:0,left:0,right:0,bottom:0,justifyContent:"center",alignItems:"center"},hintText:{fontSize:10,color:e.muted,fontStyle:"italic"},content:{flex:1,backgroundColor:e.background,borderBottomLeftRadius:16,borderBottomRightRadius:16,overflow:"hidden"},cornerHandle:{position:"absolute",zIndex:1},cornerHandleWrapper:{position:"absolute",width:30,height:30,zIndex:1e3},handler:{width:20,height:20,backgroundColor:"transparent",borderRadius:10,borderWidth:0,borderColor:"transparent"},handlerActive:{backgroundColor:e.success+"1A",borderColor:e.success,borderWidth:2,shadowColor:e.success+"99",shadowOffset:{width:0,height:0},shadowOpacity:1,shadowRadius:8},footerContainer:{position:"absolute",left:0,right:0,bottom:0,backgroundColor:e.background,borderBottomLeftRadius:16,borderBottomRightRadius:16}});const BottomSheet=exports.BottomSheet=(0,_react.memo)(BottomSheetComponent);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{useState as W,useRef as g,useEffect as _,useMemo as ht,useCallback as X,memo as et}from"react";import{View as s,StyleSheet as jt,TouchableWithoutFeedback as Pt,Dimensions as ut,PanResponder as Tt,Animated as u,ScrollView as Ft,Text as Mt,Platform as Ot,StatusBar as Xt}from"react-native";import{absoluteFill as Jt,ToolBackground as Bt}from"@buoy-gg/shared-ui";import{jsx as t,jsxs as I}from"react/jsx-runtime";const w=ut.get("window");const qt=100;const $t=400;const ot=380;const nt=500;const rt=w.width*.25;const at=80;const Kt={"393,852":{top:59,bottom:34},"430,932":{top:59,bottom:34},"390,844":{top:47,bottom:34},"428,926":{top:47,bottom:34},"375,812":{top:50,bottom:34},"414,896":{top:48,bottom:34}};const Et=()=>{if(Ot.OS==="android"){const R=Ot.Version;const l=Xt.currentHeight||0;const M=R>=29;return{top:l,bottom:M?20:0,left:0,right:0}}const{width:e,height:r}=ut.get("window");const a=`${e},${r}`;const p=Kt[a];if(p){return{...p,left:0,right:0}}return{top:20,bottom:0,left:0,right:0}};const Ut=()=>{const[e,r]=W(()=>Et());_(()=>{const a=()=>{r(Et())};const p=ut.addEventListener("change",a);return()=>{p?.remove()}},[]);return e};const pt={background:"rgba(8, 12, 21, 0.98)",panel:"rgba(16, 22, 35, 0.98)",border:"#00B8E666",primary:"#FFFFFF",secondary:"#B8BFC9",muted:"#7A8599",success:"#4AFF9F",error:"#FF5252",info:"#00B8E6"};const Nt=et(function e({isResizing:r,mode:a,hasCustomContent:p=false,theme:R=pt}){const l=ft(R);return I(s,{style:[l.dragIndicatorContainer,p&&l.dragIndicatorContainerCustom],children:[t(s,{style:[l.dragIndicator,a==="floating"&&l.floatingDragIndicator,r&&l.dragIndicatorActive]}),r&&a==="bottomSheet"&&I(s,{style:l.resizeGripContainer,children:[t(s,{style:l.resizeGripLine}),t(s,{style:l.resizeGripLine}),t(s,{style:l.resizeGripLine})]})]})});const gt=et(function e({isActive:r,theme:a=pt}){const p=ft(a);return t(s,{style:[p.cornerHandle],children:t(s,{style:[p.handler,r&&p.handlerActive]})})});const kt=et(function e({header:r,onClose:a,onToggleMode:p,isResizing:R,mode:l,panHandlers:M,theme:x=pt}){const m=ft(x);const F=g(0);const y=g(0);const b=g(null);const C=X(()=>{const o=Date.now();const h=o-F.current;if(h>500){y.current=0}y.current++;F.current=o;if(b.current){clearTimeout(b.current)}b.current=setTimeout(()=>{if(y.current===2){p()}else if(y.current>=3){a()}y.current=0},300)},[p,a]);_(()=>{return()=>{if(b.current){clearTimeout(b.current)}}},[]);const H=M?M:{};const O=!!M;if(r?.customContent){const o=I(s,{style:m.headerInner,children:[t(Nt,{isResizing:R,mode:l,hasCustomContent:true,theme:x}),r.customContent]});return t(s,{style:m.header,...H,children:O?t(Pt,{onPress:C,children:o}):o})}const c=I(s,{style:m.headerInner,children:[t(Nt,{isResizing:R,mode:l,theme:x}),I(s,{style:m.headerContent,children:[r?.title&&t(Mt,{style:m.headerTitle,children:r.title}),r?.subtitle&&t(Mt,{style:m.headerSubtitle,children:r.subtitle})]}),t(s,{style:m.headerHintText,children:t(Mt,{style:m.hintText,children:"Double tap: Toggle \u2022 Triple tap: Close"})})]});return t(s,{style:[m.header,l==="floating"&&m.floatingModeHeader],...H,children:O?t(Pt,{onPress:C,children:c}):c})});const Qt=et(function e({children:r,position:a,onDragStart:p,onDragEnd:R,onTap:l,containerBounds:M=ut.get("window"),elementSize:x={width:100,height:50},minPosition:m={x:0,y:0},style:F,enabled:y=true}){const b=g(false);const C=g(0);const H=g({x:0,y:0});const O=ht(()=>Tt.create({onStartShouldSetPanResponder:()=>y,onMoveShouldSetPanResponder:(c,o)=>y&&(Math.abs(o.dx)>1||Math.abs(o.dy)>1),onPanResponderTerminationRequest:()=>false,onPanResponderGrant:c=>{b.current=false;C.current=0;H.current={x:c.nativeEvent.locationX,y:c.nativeEvent.locationY};a.stopAnimation(({x:o,y:h})=>{a.setOffset({x:o,y:h});a.setValue({x:0,y:0})})},onPanResponderMove:(c,o)=>{const h=Math.abs(o.dx)+Math.abs(o.dy);C.current=h;if(h>5&&!b.current){b.current=true;p?.()}const d=c.nativeEvent.pageX-H.current.x;const mt=c.nativeEvent.pageY-H.current.y;a.setOffset({x:0,y:0});a.setValue({x:d,y:mt})},onPanResponderRelease:()=>{const c=Number(JSON.stringify(a.x));const o=Number(JSON.stringify(a.y));if(C.current<=5&&!b.current){a.setOffset({x:0,y:0});a.setValue({x:c,y:o});l?.();return}const h=Math.max(m.x,Math.min(c,M.width-x.width));const d=Math.max(m.y,Math.min(o,M.height-x.height));a.setValue({x:h,y:d});R?.({x:h,y:d});b.current=false},onPanResponderTerminate:()=>{b.current=false}}),[y,a,p,R,l,M,x,m]);return t(s,{style:F,...O.panHandlers,children:r})});const Zt=({visible:e,onClose:r,children:a,header:p,styles:R={},minHeight:l=qt,maxHeight:M,initialHeight:x=$t,initialMode:m="bottomSheet",onModeChange:F,footer:y,footerHeight:b=0,onBack:C,theme:H,background:O=true})=>{const c={...pt,...H};const o=ht(()=>ft(c),[c]);const h=Ut();const[d,mt]=W(m);const[D,V]=W(false);const[Y,it]=W(false);const[te,zt]=W(x);const[B,bt]=W({width:ot,height:nt,top:(w.height-nt)/2,left:(w.width-ot)/2});const[st]=W({width:w.width,height:w.height});const S=g(new u.Value(0)).current;const v=g(new u.Value(w.height)).current;const j=g(new u.Value(x)).current;const lt=g(x);const A=g(new u.ValueXY({x:(w.width-ot)/2,y:(w.height-nt)/2})).current;const Rt=g(new u.Value(ot)).current;const yt=g(new u.Value(nt)).current;const J=g(B);const St=g(B);_(()=>{J.current=B},[B]);_(()=>{return()=>{S.stopAnimation();v.stopAnimation();j.stopAnimation();A.stopAnimation();Rt.stopAnimation();yt.stopAnimation();S.setValue(0);v.setValue(w.height);j.setValue(x);lt.current=x}},[]);const Ct=S.interpolate({inputRange:[0,1],outputRange:[0,1],extrapolate:"clamp"});const vt=M||w.height-h.top;const ct=X(()=>{it(false);V(false);const i=d==="bottomSheet"?"floating":"bottomSheet";mt(i);F?.(i)},[d,F]);_(()=>{it(false);V(false)},[d]);_(()=>{let i=null;let n=null;if(e){v.setValue(w.height);S.setValue(0);if(d==="bottomSheet"){i=u.parallel([u.spring(v,{toValue:0,tension:180,friction:22,useNativeDriver:true}),u.timing(S,{toValue:1,duration:200,useNativeDriver:true})]);i.start()}else{i=u.timing(S,{toValue:1,duration:200,useNativeDriver:true});i.start()}}else{if(d==="bottomSheet"){n=u.parallel([u.spring(v,{toValue:w.height,tension:180,friction:22,useNativeDriver:true}),u.timing(S,{toValue:0,duration:200,useNativeDriver:true})]);n.start()}else{n=u.timing(S,{toValue:0,duration:200,useNativeDriver:true});n.start()}}return()=>{if(i)i.stop();if(n)n.stop()}},[e,d,S,v]);const It=g(0);const Gt=ht(()=>Tt.create({onStartShouldSetPanResponder:()=>d==="bottomSheet",onMoveShouldSetPanResponder:(i,n)=>d==="bottomSheet"&&Math.abs(n.dy)>3,onPanResponderTerminationRequest:()=>false,onPanResponderGrant:i=>{V(true);It.current=i.nativeEvent.locationY||0;j.stopAnimation(n=>{lt.current=n});v.stopAnimation()},onPanResponderMove:i=>{const n=i.nativeEvent.pageY-It.current;let T=w.height-n;T=Math.max(l,Math.min(T,vt));j.setValue(T);lt.current=T},onPanResponderRelease:(i,n)=>{V(false);const T=lt.current;const U=n.vy>.8&&n.dy>50||n.dy>150&&T<=l;if(U){u.parallel([u.timing(S,{toValue:0,duration:200,useNativeDriver:true}),u.spring(v,{toValue:w.height,tension:180,friction:22,useNativeDriver:true})]).start(()=>r());return}zt(T)},onPanResponderTerminate:()=>{V(false)}}),[d,l,vt,j,v,S,r]);const q=X(i=>{let n=false;return Tt.create({onStartShouldSetPanResponder:()=>d==="floating",onMoveShouldSetPanResponder:()=>d==="floating",onPanResponderGrant:()=>{n=false;const T=J.current;A.stopAnimation(({x:U,y:E})=>{A.setValue({x:U,y:E})});V(true);St.current={...T}},onPanResponderMove:(T,U)=>{const{dx:E,dy:Q}=U;if(Math.abs(E)<.5&&Math.abs(Q)<.5)return;n=true;const Dt=Math.max(0,h.left||0);const Vt=st.width-Math.max(0,h.right||0);const At=Math.max(0,h.top||0);const Lt=st.height-Math.max(0,h.bottom||0);const f=St.current;const N=f.left+f.width;const k=f.top+f.height;let L=f.left;let P=f.top;let Z=N;let tt=k;switch(i){case"topLeft":{const z=Math.max(Dt,Math.min(f.left+E,N-rt));const G=Math.max(At,Math.min(f.top+Q,k-at));L=z;P=G;Z=N;tt=k;break}case"topRight":{const z=Math.min(Vt,Math.max(N+E,f.left+rt));const G=Math.max(At,Math.min(f.top+Q,k-at));L=f.left;P=G;Z=z;tt=k;break}case"bottomLeft":{const z=Math.max(Dt,Math.min(f.left+E,N-rt));const G=Math.min(Lt,Math.max(k+Q,f.top+at));L=z;P=f.top;Z=N;tt=G;break}case"bottomRight":{const z=Math.min(Vt,Math.max(N+E,f.left+rt));const G=Math.min(Lt,Math.max(k+Q,f.top+at));L=f.left;P=f.top;Z=z;tt=G;break}}const wt=Math.max(rt,Z-L);const xt=Math.max(at,tt-P);bt({width:wt,height:xt,left:L,top:P});Rt.setValue(wt);yt.setValue(xt);A.setValue({x:L,y:P});J.current={width:wt,height:xt,left:L,top:P}},onPanResponderRelease:()=>{V(false);if(i==="topRight"&&!n){r();return}if(i==="topLeft"&&!n&&C){C();return}n=false;bt(J.current)},onPanResponderTerminate:()=>{V(false);n=false}})},[d,st,h.left,h.right,h.top,h.bottom,A,Rt,yt,r,C]);const dt=ht(()=>{return{topLeft:q("topLeft"),topRight:q("topRight"),bottomLeft:q("bottomLeft"),bottomRight:q("bottomRight")}},[q]);const Wt=X(()=>{it(true)},[]);const _t=X(i=>{it(false);const n=J.current;const T={...n,left:i.x,top:i.y};bt(T)},[]);const Ht=g(0);const $=g(0);const K=g(null);const Yt=X(()=>{const i=Date.now();const n=i-Ht.current;if(n>500){$.current=0}$.current++;Ht.current=i;if(K.current){clearTimeout(K.current)}K.current=setTimeout(()=>{if($.current===2){ct()}else if($.current>=3){r()}$.current=0},300)},[ct,r]);_(()=>{return()=>{if(K.current){clearTimeout(K.current)}}},[]);if(!e){return null}if(d==="floating"){return I(u.View,{style:[o.floatingModal,{width:B.width,height:B.height,opacity:Ct,transform:[{translateX:A.x},{translateY:A.y}]},(Y||D)&&o.floatingModalDragging,R.container],children:[t(Qt,{position:A,onDragStart:Wt,onDragEnd:_t,onTap:Yt,containerBounds:st,elementSize:B,minPosition:{x:0,y:h.top},style:o.floatingHeader,enabled:d==="floating"&&!D,children:t(kt,{header:p,onClose:r,onToggleMode:ct,isResizing:Y||D,mode:d,theme:c})}),I(s,{style:[o.content,R.content],children:[O?t(Bt,{}):null,t(Ft,{style:{flex:1},contentContainerStyle:{flexGrow:1,paddingBottom:b},showsVerticalScrollIndicator:true,nestedScrollEnabled:true,children:a}),y?t(s,{style:o.footerContainer,children:y}):null]}),t(s,{...dt.topLeft.panHandlers,style:[o.cornerHandleWrapper,{top:4,left:4}],hitSlop:{top:8,left:8,right:8,bottom:8},children:t(gt,{isActive:Y||D,theme:c})}),t(s,{...dt.topRight.panHandlers,style:[o.cornerHandleWrapper,{top:4,right:4}],hitSlop:{top:8,left:8,right:8,bottom:8},children:t(gt,{isActive:Y||D,theme:c})}),t(s,{...dt.bottomLeft.panHandlers,style:[o.cornerHandleWrapper,{bottom:4,left:4}],hitSlop:{top:8,left:8,right:8,bottom:8},children:t(gt,{isActive:Y||D,theme:c})}),t(s,{...dt.bottomRight.panHandlers,style:[o.cornerHandleWrapper,{bottom:4,right:4}],hitSlop:{top:8,left:8,right:8,bottom:8},children:t(gt,{isActive:Y||D,theme:c})})]})}return t(s,{style:o.fullScreenContainer,pointerEvents:"box-none",children:t(u.View,{style:[o.bottomSheetWrapper,{opacity:Ct,transform:[{translateY:v}]}],children:I(u.View,{style:[o.bottomSheet,R.container,{height:j}],children:[t(kt,{header:p,onClose:r,onToggleMode:ct,isResizing:D,mode:d,panHandlers:Gt.panHandlers,theme:c}),I(s,{style:[o.content,R.content],children:[O?t(Bt,{}):null,t(Ft,{style:{flex:1},contentContainerStyle:{flexGrow:1,paddingBottom:b},showsVerticalScrollIndicator:true,nestedScrollEnabled:true,children:a}),y?t(s,{style:o.footerContainer,children:y}):null]})]})})})};const ft=e=>jt.create({fullScreenContainer:{...Jt,zIndex:1e3},bottomSheetWrapper:{position:"absolute",bottom:0,left:0,right:0},bottomSheet:{backgroundColor:e.panel,borderTopLeftRadius:16,borderTopRightRadius:16,borderWidth:1,borderColor:e.border,shadowColor:e.info,shadowOffset:{width:0,height:-4},shadowOpacity:.3,shadowRadius:12,elevation:20},floatingModal:{position:"absolute",backgroundColor:e.panel,borderRadius:16,borderWidth:1,borderColor:e.border,shadowColor:e.info,shadowOffset:{width:0,height:0},shadowOpacity:.5,shadowRadius:20,elevation:24,zIndex:1e3,width:ot,height:nt},floatingModalDragging:{borderColor:e.success,borderWidth:2,shadowColor:e.success+"99",shadowOpacity:.8,shadowRadius:12},header:{borderTopLeftRadius:16,borderTopRightRadius:16,backgroundColor:e.panel,minHeight:56,borderWidth:1,borderColor:e.border,borderBottomWidth:1,borderBottomColor:"rgba(255, 255, 255, 0.1)"},floatingHeader:{borderTopLeftRadius:14,borderTopRightRadius:14},floatingModeHeader:{borderTopLeftRadius:14,borderTopRightRadius:14},headerInner:{flex:1,justifyContent:"center"},dragIndicatorContainer:{alignItems:"center",paddingVertical:8,backgroundColor:"transparent"},dragIndicatorContainerCustom:{paddingTop:6,paddingBottom:2,backgroundColor:"transparent"},dragIndicator:{width:40,height:3,backgroundColor:e.info+"99",borderRadius:2,shadowColor:e.info,shadowOffset:{width:0,height:0},shadowOpacity:.8,shadowRadius:4},floatingDragIndicator:{width:50,height:5,backgroundColor:e.muted},dragIndicatorActive:{backgroundColor:e.success,width:40},resizeGripContainer:{position:"absolute",flexDirection:"row",gap:2,marginTop:12},resizeGripLine:{width:12,height:1,backgroundColor:e.success,opacity:.6},headerContent:{paddingHorizontal:16,alignItems:"center"},headerTitle:{fontSize:16,fontWeight:"600",color:e.primary},headerSubtitle:{fontSize:12,color:e.secondary,paddingTop:4},headerHintText:{position:"absolute",top:0,left:0,right:0,bottom:0,justifyContent:"center",alignItems:"center"},hintText:{fontSize:10,color:e.muted,fontStyle:"italic"},content:{flex:1,backgroundColor:e.background,borderBottomLeftRadius:16,borderBottomRightRadius:16,overflow:"hidden"},cornerHandle:{position:"absolute",zIndex:1},cornerHandleWrapper:{position:"absolute",width:30,height:30,zIndex:1e3},handler:{width:20,height:20,backgroundColor:"transparent",borderRadius:10,borderWidth:0,borderColor:"transparent"},handlerActive:{backgroundColor:e.success+"1A",borderColor:e.success,borderWidth:2,shadowColor:e.success+"99",shadowOffset:{width:0,height:0},shadowOpacity:1,shadowRadius:8},footerContainer:{position:"absolute",left:0,right:0,bottom:0,backgroundColor:e.background,borderBottomLeftRadius:16,borderBottomRightRadius:16}});export const BottomSheet=et(Zt);
|
|
1
|
+
"use strict";import{useState as W,useRef as g,useEffect as _,useMemo as ht,useCallback as X,memo as et}from"react";import{View as s,StyleSheet as jt,TouchableWithoutFeedback as Lt,Dimensions as ut,PanResponder as Tt,Animated as u,ScrollView as Ft,Text as St,Platform as kt,StatusBar as Xt}from"react-native";import{absoluteFill as Jt,ToolBackground as Ot}from"@buoy-gg/shared-ui";import{jsx as t,jsxs as I}from"react/jsx-runtime";const w=ut.get("window");const qt=100;const $t=400;const ot=380;const nt=500;const rt=w.width*.25;const at=80;const Kt={"393,852":{top:59,bottom:34},"430,932":{top:59,bottom:34},"390,844":{top:47,bottom:34},"428,926":{top:47,bottom:34},"375,812":{top:50,bottom:34},"414,896":{top:48,bottom:34}};const Bt=()=>{if(kt.OS==="android"){const R=kt.Version;const l=Xt.currentHeight||0;const S=R>=29;return{top:l,bottom:S?20:0,left:0,right:0}}const{width:e,height:r}=ut.get("window");const a=`${e},${r}`;const p=Kt[a];if(p){return{...p,left:0,right:0}}return{top:20,bottom:0,left:0,right:0}};const Ut=()=>{const[e,r]=W(()=>Bt());_(()=>{const a=()=>{r(Bt())};const p=ut.addEventListener("change",a);return()=>{p?.remove()}},[]);return e};const pt={background:"rgba(8, 12, 21, 0.98)",panel:"rgba(16, 22, 35, 0.98)",border:"#00B8E666",primary:"#FFFFFF",secondary:"#B8BFC9",muted:"#7A8599",success:"#4AFF9F",error:"#FF5252",info:"#00B8E6"};const Et=et(function e({isResizing:r,mode:a,hasCustomContent:p=false,theme:R=pt}){const l=ft(R);return I(s,{style:[l.dragIndicatorContainer,p&&l.dragIndicatorContainerCustom],children:[t(s,{style:[l.dragIndicator,a==="floating"&&l.floatingDragIndicator,r&&l.dragIndicatorActive]}),r&&a==="bottomSheet"&&I(s,{style:l.resizeGripContainer,children:[t(s,{style:l.resizeGripLine}),t(s,{style:l.resizeGripLine}),t(s,{style:l.resizeGripLine})]})]})});const gt=et(function e({isActive:r,theme:a=pt}){const p=ft(a);return t(s,{style:[p.cornerHandle],children:t(s,{style:[p.handler,r&&p.handlerActive]})})});const Nt=et(function e({header:r,onClose:a,onToggleMode:p,isResizing:R,mode:l,panHandlers:S,theme:x=pt}){const m=ft(x);const F=g(0);const y=g(0);const b=g(null);const C=X(()=>{const o=Date.now();const h=o-F.current;if(h>500){y.current=0}y.current++;F.current=o;if(b.current){clearTimeout(b.current)}b.current=setTimeout(()=>{if(y.current===2){p()}else if(y.current>=3){a()}y.current=0},300)},[p,a]);_(()=>{return()=>{if(b.current){clearTimeout(b.current)}}},[]);const H=S?S:{};const k=!!S;if(r?.customContent){const o=I(s,{style:m.headerInner,children:[t(Et,{isResizing:R,mode:l,hasCustomContent:true,theme:x}),r.customContent]});return t(s,{style:m.header,...H,children:k?t(Lt,{onPress:C,children:o}):o})}const d=I(s,{style:m.headerInner,children:[t(Et,{isResizing:R,mode:l,theme:x}),I(s,{style:m.headerContent,children:[r?.title&&t(St,{style:m.headerTitle,children:r.title}),r?.subtitle&&t(St,{style:m.headerSubtitle,children:r.subtitle})]}),t(s,{style:m.headerHintText,children:t(St,{style:m.hintText,children:"Double tap: Toggle \u2022 Triple tap: Close"})})]});return t(s,{style:[m.header,l==="floating"&&m.floatingModeHeader],...H,children:k?t(Lt,{onPress:C,children:d}):d})});const Qt=et(function e({children:r,position:a,onDragStart:p,onDragEnd:R,onTap:l,containerBounds:S=ut.get("window"),elementSize:x={width:100,height:50},minPosition:m={x:0,y:0},style:F,enabled:y=true}){const b=g(false);const C=g(0);const H=g({x:0,y:0});const k=ht(()=>Tt.create({onStartShouldSetPanResponder:()=>y,onMoveShouldSetPanResponder:(d,o)=>y&&(Math.abs(o.dx)>1||Math.abs(o.dy)>1),onPanResponderTerminationRequest:()=>false,onPanResponderGrant:d=>{b.current=false;C.current=0;H.current={x:d.nativeEvent.locationX,y:d.nativeEvent.locationY};a.stopAnimation(({x:o,y:h})=>{a.setOffset({x:o,y:h});a.setValue({x:0,y:0})})},onPanResponderMove:(d,o)=>{const h=Math.abs(o.dx)+Math.abs(o.dy);C.current=h;if(h>5&&!b.current){b.current=true;p?.()}const c=d.nativeEvent.pageX-H.current.x;const mt=d.nativeEvent.pageY-H.current.y;a.setOffset({x:0,y:0});a.setValue({x:c,y:mt})},onPanResponderRelease:()=>{const d=Number(JSON.stringify(a.x));const o=Number(JSON.stringify(a.y));if(C.current<=5&&!b.current){a.setOffset({x:0,y:0});a.setValue({x:d,y:o});l?.();return}const h=Math.max(m.x,Math.min(d,S.width-x.width));const c=Math.max(m.y,Math.min(o,S.height-x.height));a.setValue({x:h,y:c});R?.({x:h,y:c});b.current=false},onPanResponderTerminate:()=>{b.current=false}}),[y,a,p,R,l,S,x,m]);return t(s,{style:F,...k.panHandlers,children:r})});const Zt=({visible:e,onClose:r,children:a,header:p,styles:R={},minHeight:l=qt,maxHeight:S,initialHeight:x=$t,initialMode:m="bottomSheet",onModeChange:F,footer:y,footerHeight:b=0,onBack:C,theme:H,background:k=true})=>{const d={...pt,...H};const o=ht(()=>ft(d),[d]);const h=Ut();const[c,mt]=W(m);const[D,V]=W(false);const[Y,it]=W(false);const[te,zt]=W(x);const[O,bt]=W({width:ot,height:nt,top:(w.height-nt)/2,left:(w.width-ot)/2});const[st]=W({width:w.width,height:w.height});const M=g(new u.Value(0)).current;const v=g(new u.Value(w.height)).current;const j=g(new u.Value(x)).current;const lt=g(x);const P=g(new u.ValueXY({x:(w.width-ot)/2,y:(w.height-nt)/2})).current;const Rt=g(new u.Value(ot)).current;const yt=g(new u.Value(nt)).current;const J=g(O);const Mt=g(O);_(()=>{J.current=O},[O]);_(()=>{return()=>{M.stopAnimation();v.stopAnimation();j.stopAnimation();P.stopAnimation();Rt.stopAnimation();yt.stopAnimation();M.setValue(0);v.setValue(w.height);j.setValue(x);lt.current=x}},[]);const Ct=M.interpolate({inputRange:[0,1],outputRange:[0,1],extrapolate:"clamp"});const vt=S||w.height-h.top;const dt=X(()=>{it(false);V(false);const i=c==="bottomSheet"?"floating":"bottomSheet";mt(i);F?.(i)},[c,F]);_(()=>{it(false);V(false)},[c]);_(()=>{let i=null;let n=null;if(e){v.setValue(w.height);M.setValue(0);if(c==="bottomSheet"){i=u.parallel([u.spring(v,{toValue:0,tension:180,friction:22,useNativeDriver:true}),u.timing(M,{toValue:1,duration:200,useNativeDriver:true})]);i.start()}else{i=u.timing(M,{toValue:1,duration:200,useNativeDriver:true});i.start()}}else{if(c==="bottomSheet"){n=u.parallel([u.spring(v,{toValue:w.height,tension:180,friction:22,useNativeDriver:true}),u.timing(M,{toValue:0,duration:200,useNativeDriver:true})]);n.start()}else{n=u.timing(M,{toValue:0,duration:200,useNativeDriver:true});n.start()}}return()=>{if(i)i.stop();if(n)n.stop()}},[e,c,M,v]);const It=g(0);const Gt=ht(()=>Tt.create({onStartShouldSetPanResponder:()=>c==="bottomSheet",onMoveShouldSetPanResponder:(i,n)=>c==="bottomSheet"&&Math.abs(n.dy)>3,onPanResponderTerminationRequest:()=>false,onPanResponderGrant:i=>{V(true);It.current=i.nativeEvent.locationY||0;j.stopAnimation(n=>{lt.current=n});v.stopAnimation()},onPanResponderMove:i=>{const n=i.nativeEvent.pageY-It.current;let T=w.height-n;T=Math.max(l,Math.min(T,vt));j.setValue(T);lt.current=T},onPanResponderRelease:(i,n)=>{V(false);const T=lt.current;const U=n.vy>.8&&n.dy>50||n.dy>150&&T<=l;if(U){u.parallel([u.timing(M,{toValue:0,duration:200,useNativeDriver:true}),u.spring(v,{toValue:w.height,tension:180,friction:22,useNativeDriver:true})]).start(()=>r());return}zt(T)},onPanResponderTerminate:()=>{V(false)}}),[c,l,vt,j,v,M,r]);const q=X(i=>{let n=false;return Tt.create({onStartShouldSetPanResponder:()=>c==="floating",onMoveShouldSetPanResponder:()=>c==="floating",onPanResponderGrant:()=>{n=false;const T=J.current;P.stopAnimation(({x:U,y:B})=>{P.setValue({x:U,y:B})});V(true);Mt.current={...T}},onPanResponderMove:(T,U)=>{const{dx:B,dy:Q}=U;if(Math.abs(B)<.5&&Math.abs(Q)<.5)return;n=true;const Dt=Math.max(0,h.left||0);const Vt=st.width-Math.max(0,h.right||0);const Pt=Math.max(0,h.top||0);const At=st.height-Math.max(0,h.bottom||0);const f=Mt.current;const E=f.left+f.width;const N=f.top+f.height;let A=f.left;let L=f.top;let Z=E;let tt=N;switch(i){case"topLeft":{const z=Math.max(Dt,Math.min(f.left+B,E-rt));const G=Math.max(Pt,Math.min(f.top+Q,N-at));A=z;L=G;Z=E;tt=N;break}case"topRight":{const z=Math.min(Vt,Math.max(E+B,f.left+rt));const G=Math.max(Pt,Math.min(f.top+Q,N-at));A=f.left;L=G;Z=z;tt=N;break}case"bottomLeft":{const z=Math.max(Dt,Math.min(f.left+B,E-rt));const G=Math.min(At,Math.max(N+Q,f.top+at));A=z;L=f.top;Z=E;tt=G;break}case"bottomRight":{const z=Math.min(Vt,Math.max(E+B,f.left+rt));const G=Math.min(At,Math.max(N+Q,f.top+at));A=f.left;L=f.top;Z=z;tt=G;break}}const wt=Math.max(rt,Z-A);const xt=Math.max(at,tt-L);bt({width:wt,height:xt,left:A,top:L});Rt.setValue(wt);yt.setValue(xt);P.setValue({x:A,y:L});J.current={width:wt,height:xt,left:A,top:L}},onPanResponderRelease:()=>{V(false);if(i==="topRight"&&!n){r();return}if(i==="topLeft"&&!n&&C){C();return}n=false;bt(J.current)},onPanResponderTerminate:()=>{V(false);n=false}})},[c,st,h.left,h.right,h.top,h.bottom,P,Rt,yt,r,C]);const ct=ht(()=>{return{topLeft:q("topLeft"),topRight:q("topRight"),bottomLeft:q("bottomLeft"),bottomRight:q("bottomRight")}},[q]);const Wt=X(()=>{it(true)},[]);const _t=X(i=>{it(false);const n=J.current;const T={...n,left:i.x,top:i.y};bt(T)},[]);const Ht=g(0);const $=g(0);const K=g(null);const Yt=X(()=>{const i=Date.now();const n=i-Ht.current;if(n>500){$.current=0}$.current++;Ht.current=i;if(K.current){clearTimeout(K.current)}K.current=setTimeout(()=>{if($.current===2){dt()}else if($.current>=3){r()}$.current=0},300)},[dt,r]);_(()=>{return()=>{if(K.current){clearTimeout(K.current)}}},[]);if(!e){return null}if(c==="floating"){return I(u.View,{style:[o.floatingModal,{width:O.width,height:O.height,opacity:Ct,transform:[{translateX:P.x},{translateY:P.y}]},(Y||D)&&o.floatingModalDragging,R.container],children:[t(Qt,{position:P,onDragStart:Wt,onDragEnd:_t,onTap:Yt,containerBounds:st,elementSize:O,minPosition:{x:0,y:h.top},style:o.floatingHeader,enabled:c==="floating"&&!D,children:t(Nt,{header:p,onClose:r,onToggleMode:dt,isResizing:Y||D,mode:c,theme:d})}),I(s,{style:[o.content,R.content],children:[k?t(Ot,{}):null,t(Ft,{keyboardShouldPersistTaps:"handled",style:{flex:1},contentContainerStyle:{flexGrow:1,paddingBottom:b},showsVerticalScrollIndicator:true,nestedScrollEnabled:true,children:a}),y?t(s,{style:o.footerContainer,children:y}):null]}),t(s,{...ct.topLeft.panHandlers,style:[o.cornerHandleWrapper,{top:4,left:4}],hitSlop:{top:8,left:8,right:8,bottom:8},children:t(gt,{isActive:Y||D,theme:d})}),t(s,{...ct.topRight.panHandlers,style:[o.cornerHandleWrapper,{top:4,right:4}],hitSlop:{top:8,left:8,right:8,bottom:8},children:t(gt,{isActive:Y||D,theme:d})}),t(s,{...ct.bottomLeft.panHandlers,style:[o.cornerHandleWrapper,{bottom:4,left:4}],hitSlop:{top:8,left:8,right:8,bottom:8},children:t(gt,{isActive:Y||D,theme:d})}),t(s,{...ct.bottomRight.panHandlers,style:[o.cornerHandleWrapper,{bottom:4,right:4}],hitSlop:{top:8,left:8,right:8,bottom:8},children:t(gt,{isActive:Y||D,theme:d})})]})}return t(s,{style:o.fullScreenContainer,pointerEvents:"box-none",children:t(u.View,{style:[o.bottomSheetWrapper,{opacity:Ct,transform:[{translateY:v}]}],children:I(u.View,{style:[o.bottomSheet,R.container,{height:j}],children:[t(Nt,{header:p,onClose:r,onToggleMode:dt,isResizing:D,mode:c,panHandlers:Gt.panHandlers,theme:d}),I(s,{style:[o.content,R.content],children:[k?t(Ot,{}):null,t(Ft,{keyboardShouldPersistTaps:"handled",style:{flex:1},contentContainerStyle:{flexGrow:1,paddingBottom:b},showsVerticalScrollIndicator:true,nestedScrollEnabled:true,children:a}),y?t(s,{style:o.footerContainer,children:y}):null]})]})})})};const ft=e=>jt.create({fullScreenContainer:{...Jt,zIndex:1e3},bottomSheetWrapper:{position:"absolute",bottom:0,left:0,right:0},bottomSheet:{backgroundColor:e.panel,borderTopLeftRadius:16,borderTopRightRadius:16,borderWidth:1,borderColor:e.border,shadowColor:e.info,shadowOffset:{width:0,height:-4},shadowOpacity:.3,shadowRadius:12,elevation:20},floatingModal:{position:"absolute",backgroundColor:e.panel,borderRadius:16,borderWidth:1,borderColor:e.border,shadowColor:e.info,shadowOffset:{width:0,height:0},shadowOpacity:.5,shadowRadius:20,elevation:24,zIndex:1e3,width:ot,height:nt},floatingModalDragging:{borderColor:e.success,borderWidth:2,shadowColor:e.success+"99",shadowOpacity:.8,shadowRadius:12},header:{borderTopLeftRadius:16,borderTopRightRadius:16,backgroundColor:e.panel,minHeight:56,borderWidth:1,borderColor:e.border,borderBottomWidth:1,borderBottomColor:"rgba(255, 255, 255, 0.1)"},floatingHeader:{borderTopLeftRadius:14,borderTopRightRadius:14},floatingModeHeader:{borderTopLeftRadius:14,borderTopRightRadius:14},headerInner:{flex:1,justifyContent:"center"},dragIndicatorContainer:{alignItems:"center",paddingVertical:8,backgroundColor:"transparent"},dragIndicatorContainerCustom:{paddingTop:6,paddingBottom:2,backgroundColor:"transparent"},dragIndicator:{width:40,height:3,backgroundColor:e.info+"99",borderRadius:2,shadowColor:e.info,shadowOffset:{width:0,height:0},shadowOpacity:.8,shadowRadius:4},floatingDragIndicator:{width:50,height:5,backgroundColor:e.muted},dragIndicatorActive:{backgroundColor:e.success,width:40},resizeGripContainer:{position:"absolute",flexDirection:"row",gap:2,marginTop:12},resizeGripLine:{width:12,height:1,backgroundColor:e.success,opacity:.6},headerContent:{paddingHorizontal:16,alignItems:"center"},headerTitle:{fontSize:16,fontWeight:"600",color:e.primary},headerSubtitle:{fontSize:12,color:e.secondary,paddingTop:4},headerHintText:{position:"absolute",top:0,left:0,right:0,bottom:0,justifyContent:"center",alignItems:"center"},hintText:{fontSize:10,color:e.muted,fontStyle:"italic"},content:{flex:1,backgroundColor:e.background,borderBottomLeftRadius:16,borderBottomRightRadius:16,overflow:"hidden"},cornerHandle:{position:"absolute",zIndex:1},cornerHandleWrapper:{position:"absolute",width:30,height:30,zIndex:1e3},handler:{width:20,height:20,backgroundColor:"transparent",borderRadius:10,borderWidth:0,borderColor:"transparent"},handlerActive:{backgroundColor:e.success+"1A",borderColor:e.success,borderWidth:2,shadowColor:e.success+"99",shadowOffset:{width:0,height:0},shadowOpacity:1,shadowRadius:8},footerContainer:{position:"absolute",left:0,right:0,bottom:0,backgroundColor:e.background,borderBottomLeftRadius:16,borderBottomRightRadius:16}});export const BottomSheet=et(Zt);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@buoy-gg/bottom-sheet",
|
|
3
|
-
"version": "7.0.
|
|
3
|
+
"version": "7.0.79",
|
|
4
4
|
"description": "Bottom sheet and floating window components for React Native, with configurable presentation and native-driver animations.",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
],
|
|
35
35
|
"sideEffects": false,
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@buoy-gg/shared-ui": "^7.0.
|
|
37
|
+
"@buoy-gg/shared-ui": "^7.0.79"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|
|
40
40
|
"react": "*"
|