From 63429400625971e2e719222128d230885cf58cb7 Mon Sep 17 00:00:00 2001 From: Shivam Date: Thu, 2 Jan 2025 15:44:09 +0530 Subject: [PATCH] fix: padding in scrollview bottomsheet (#172) --- src/components/common/CustomView.res | 39 ++++++++++++++++++++--- src/components/elements/ConfirmButton.res | 2 -- src/contexts/ViewportContext.res | 37 +++++++++++++++++++++ src/routes/App.res | 16 ++++++---- src/routes/FullScreenSheetWrapper.res | 11 ------- src/routes/GlobalConfirmButton.res | 5 +-- 6 files changed, 81 insertions(+), 29 deletions(-) create mode 100644 src/contexts/ViewportContext.res diff --git a/src/components/common/CustomView.res b/src/components/common/CustomView.res index e4ef1b9a..40442f61 100644 --- a/src/components/common/CustomView.res +++ b/src/components/common/CustomView.res @@ -1,15 +1,17 @@ open ReactNative open Style type modalPosition = [#center | #top | #bottom] + @react.component let make = ( ~onDismiss=() => (), ~children, ~closeOnClickOutSide=true, - ~modalPosition: modalPosition=#bottom, + ~modalPosition=#bottom, ~bottomModalWidth=100.->pct, (), ) => { + let (viewPortContants, _) = React.useContext(ViewportContext.viewPortContext) let modalPosStyle = array([ viewStyle(~flex=1., ~width=100.->pct, ~height=100.->pct, ~alignItems=#center, ()), switch modalPosition { @@ -51,7 +53,7 @@ let make = ( ~borderBottomLeftRadius=0., ~borderBottomRightRadius=0., ~overflow=#hidden, - ~maxHeight=95.->pct, + ~maxHeight=viewPortContants.maxPaymentSheetHeight->pct, ~alignItems=#center, ~justifyContent=#center, (), @@ -67,15 +69,42 @@ module Wrapper = { @react.component let make = (~onModalClose, ~width=100.->pct, ~children=React.null) => { let {bgColor} = ThemebasedStyle.useThemeBasedStyle() + let (viewPortContants, _) = React.useContext(ViewportContext.viewPortContext) + + let maxScrollViewHeight = + viewPortContants.windowHeight *. viewPortContants.maxPaymentSheetHeight /. 100. -. + viewPortContants.navigationBarHeight + let (isScrollable, setIsScrollable) = React.useState(_ => false) - { + let height = event.nativeEvent.layout.height + if height > maxScrollViewHeight { + setIsScrollable(_ => true) + } else { + setIsScrollable(_ => false) + } + }} + contentContainerStyle={viewStyle( + ~paddingBottom=isScrollable + ? (viewPortContants.navigationBarHeight +. 15.)->dp + : viewPortContants.navigationBarHeight->dp, + (), + )} keyboardShouldPersistTaps={#handled} style={array([ - viewStyle(~flexGrow=1., ~width, ~minHeight=250.->dp, ~padding=20.->dp, ()), + viewStyle( + ~flexGrow=1., + ~width, + ~minHeight=250.->dp, + ~paddingHorizontal=20.->dp, + ~paddingTop=20.->dp, + (), + ), bgColor, ])}> children - + } } diff --git a/src/components/elements/ConfirmButton.res b/src/components/elements/ConfirmButton.res index 5e754106..f0a2144d 100644 --- a/src/components/elements/ConfirmButton.res +++ b/src/components/elements/ConfirmButton.res @@ -7,7 +7,6 @@ let make = ( ~paymentMethod: string, ~paymentExperience=?, ~errorText=None, - ~bottomSpace=0., ) => { let (nativeProp, _) = React.useContext(NativePropContext.nativePropContext) let (allApiData, _) = React.useContext(AllApiDataContext.allApiDataContext) @@ -35,6 +34,5 @@ let make = ( : localeObject.payNowButton }} />} - {bottomSpace > 0. ? : React.null} } diff --git a/src/contexts/ViewportContext.res b/src/contexts/ViewportContext.res new file mode 100644 index 00000000..3128ac46 --- /dev/null +++ b/src/contexts/ViewportContext.res @@ -0,0 +1,37 @@ +type viewPortContants = { + windowHeight: float, + navigationBarHeight: float, + maxPaymentSheetHeight: float, +} + +let defaultNavbarHeight = 25. +let windowHeight = ReactNative.Dimensions.get(#window).height +let screenHeight = ReactNative.Dimensions.get(#screen).height +let statusBarHeight = ReactNative.StatusBar.currentHeight + +let navigationBarHeight = if ReactNative.Platform.os !== #android { + defaultNavbarHeight +} else { + let navigationHeight = screenHeight -. windowHeight -. statusBarHeight + Math.min(75., Math.max(0., navigationHeight) +. defaultNavbarHeight) +} + +let maxPaymentSheetHeight = 95. // pct + +let defaultVal: viewPortContants = {windowHeight, navigationBarHeight, maxPaymentSheetHeight} + +let viewPortContext = React.createContext((defaultVal, (_: viewPortContants) => ())) + +module Provider = { + let make = React.Context.provider(viewPortContext) +} +@react.component +let make = (~children) => { + let (state, setState) = React.useState(_ => defaultVal) + + let setState = React.useCallback1(val => { + setState(_ => val) + }, [setState]) + + children +} diff --git a/src/routes/App.res b/src/routes/App.res index 05580a05..09d0c6a4 100644 --- a/src/routes/App.res +++ b/src/routes/App.res @@ -8,13 +8,15 @@ module ContextWrapper = { - - - - children - - - + + + + + children + + + + diff --git a/src/routes/FullScreenSheetWrapper.res b/src/routes/FullScreenSheetWrapper.res index b78985a3..512ec5bc 100644 --- a/src/routes/FullScreenSheetWrapper.res +++ b/src/routes/FullScreenSheetWrapper.res @@ -52,16 +52,6 @@ let make = (~children) => { None }, [loading]) - let navigationBarHeight = React.useMemo(() => { - if Platform.os !== #android { - 0. - } else { - let screenHeight = Dimensions.get(#screen).height - let windowHeight = Dimensions.get(#window).height - screenHeight -. windowHeight - } - }, []) - { {children} - diff --git a/src/routes/GlobalConfirmButton.res b/src/routes/GlobalConfirmButton.res index 8df2d158..10dc44b3 100644 --- a/src/routes/GlobalConfirmButton.res +++ b/src/routes/GlobalConfirmButton.res @@ -2,8 +2,5 @@ open ReactNative @react.component let make = (~confirmButtonDataRef) => { - - {confirmButtonDataRef} - - + {confirmButtonDataRef} }