From 9c309bb579f0b0f8ccd92d9e5bb826f2224c0970 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Thu, 3 Oct 2024 16:31:26 +0300 Subject: [PATCH 01/19] fix web export of BottomSheetInlineLinkText --- src/components/BottomSheetLink.web.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/BottomSheetLink.web.tsx b/src/components/BottomSheetLink.web.tsx index 6bfb275c25..eb21ca880e 100644 --- a/src/components/BottomSheetLink.web.tsx +++ b/src/components/BottomSheetLink.web.tsx @@ -1,3 +1 @@ -import {Link as BottomSheetLink} from './Link' - -export {BottomSheetLink} +export {Link as BottomSheetInlineLinkText} from './Link' From fba3cce81e8f9306bed6b2b85d7cd8785cff402a Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 3 Oct 2024 08:53:53 -0700 Subject: [PATCH 02/19] add sheet manager --- .../expo/modules/bottomsheet/SheetManager.kt | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/SheetManager.kt diff --git a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/SheetManager.kt b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/SheetManager.kt new file mode 100644 index 0000000000..ac6a820235 --- /dev/null +++ b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/SheetManager.kt @@ -0,0 +1,28 @@ +package expo.modules.bottomsheet + +import java.lang.ref.WeakReference + +class SheetManager { + companion object { + private val sheets = mutableSetOf>() + + fun add(view: BottomSheetView) { + sheets.add(WeakReference(view)) + } + + fun remove(view: BottomSheetView) { + sheets.forEach { + if (it.get() == view) { + sheets.remove(it) + return + } + } + } + + fun dismissAll() { + sheets.forEach { + it.get()?.dismiss() + } + } + } +} \ No newline at end of file From 54ebc4036e6377db00a702ff85de0b2291026b4c Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 3 Oct 2024 08:54:06 -0700 Subject: [PATCH 03/19] tweak --- modules/bottom-sheet/android/build.gradle | 1 + .../expo/modules/bottomsheet/SheetView.kt | 79 +++++++++++++------ 2 files changed, 56 insertions(+), 24 deletions(-) diff --git a/modules/bottom-sheet/android/build.gradle b/modules/bottom-sheet/android/build.gradle index 555d34ed1f..a685376092 100644 --- a/modules/bottom-sheet/android/build.gradle +++ b/modules/bottom-sheet/android/build.gradle @@ -53,4 +53,5 @@ dependencies { implementation "androidx.compose.material3:material3:1.3.0" implementation "androidx.compose.material:material:1.7.2" implementation "com.facebook.react:react-native:+" + implementation("com.composables:core:1.12.0") } diff --git a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/SheetView.kt b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/SheetView.kt index cf12597590..183dada50e 100644 --- a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/SheetView.kt +++ b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/SheetView.kt @@ -1,22 +1,37 @@ package expo.modules.bottomsheet +import android.util.Log import android.view.View +import androidx.compose.foundation.background +import androidx.compose.foundation.gestures.scrollable +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.imePadding import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.widthIn import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.ExperimentalMaterial3Api -import androidx.compose.material3.ModalBottomSheet import androidx.compose.material3.SheetValue import androidx.compose.material3.rememberModalBottomSheetState import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.MutableState +import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.draw.shadow import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp import androidx.compose.ui.viewinterop.AndroidView +import com.composables.core.BottomSheet +import com.composables.core.SheetDetent +import com.composables.core.SheetDetent.Companion.FullyExpanded +import com.composables.core.SheetDetent.Companion.Hidden +import com.composables.core.rememberBottomSheetState +import kotlinx.coroutines.launch +import kotlin.annotations.jvm.Mutable data class SheetState( var isOpen: Boolean = false, @@ -29,41 +44,57 @@ data class SheetState( @Composable fun SheetView( state: MutableState, + openState: MutableState, innerView: View, contentHeight: Float, onDismissRequest: () -> Unit, onExpanded: () -> Unit, onHidden: () -> Unit, ) { - val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = false) + val Peek = SheetDetent(identifier = "peek") { containerHeight, sheetHeight -> + containerHeight*0.6f + } + + val scope = rememberCoroutineScope() + + val sheetState = rememberBottomSheetState( + initialDetent = Hidden, + detents = listOf(Hidden, Peek, FullyExpanded) + ) - ModalBottomSheet( - sheetState = sheetState, - onDismissRequest = onDismissRequest, - shape = - RoundedCornerShape( - topStart = state.value.cornerRadius ?: 0f, - topEnd = state.value.cornerRadius ?: 0f, - ), - containerColor = Color(state.value.containerBackgroundColor ?: android.graphics.Color.TRANSPARENT), + BottomSheet( + state = sheetState, + modifier = Modifier.fillMaxWidth() + .shadow(4.dp) + .clip(RoundedCornerShape(topStart = state.value.cornerRadius ?: 0f, topEnd = state.value.cornerRadius ?: 0f)) + .background(Color(state.value.containerBackgroundColor ?: android.graphics.Color.TRANSPARENT)) + .imePadding() +// onDismissRequest = onDismissRequest, +// shape = +// RoundedCornerShape( +// topStart = state.value.cornerRadius ?: 0f, +// topEnd = state.value.cornerRadius ?: 0f, +// ), +// containerColor = Color(state.value.containerBackgroundColor ?: android.graphics.Color.TRANSPARENT), ) { - Column( - Modifier - .fillMaxWidth() - .height(contentHeight.dp) - // Prevent covering up the handle - .padding(top = 34.dp), - ) { - AndroidView( - factory = { innerView }, - ) + AndroidView( + factory = { innerView }, + ) + } + + LaunchedEffect(openState) { + Log.d("SheetView", "openState: ${openState.value}") + if (openState.value) { + sheetState.currentDetent = Peek + } else { + sheetState.currentDetent = Hidden } } - LaunchedEffect(sheetState.currentValue) { - if (sheetState.currentValue == SheetValue.PartiallyExpanded || sheetState.currentValue == SheetValue.Expanded) { + LaunchedEffect(sheetState.currentDetent) { + if (sheetState.currentDetent == Peek || sheetState.currentDetent == FullyExpanded) { onExpanded() - } else if (sheetState.currentValue == SheetValue.Hidden) { + } else if (sheetState.currentDetent == Hidden) { onHidden() } } From 7620b51cf0f55bc027e0a59d94fd8e18478dd2ef Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 3 Oct 2024 09:08:58 -0700 Subject: [PATCH 04/19] spread --- src/components/Dialog/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx index 372c92ed1f..4c62ba832f 100644 --- a/src/components/Dialog/index.tsx +++ b/src/components/Dialog/index.tsx @@ -143,14 +143,16 @@ export function Inner({children, style}: DialogInnerProps) { } export const ScrollableInner = React.forwardRef( - function ScrollableInner({children, style}, ref) { + function ScrollableInner({children, style, ...props}, ref) { const insets = useSafeAreaInsets() const {nativeSnapPoint} = useDialogContext() return ( {children} From 584c29649fef338e83a9895d350dc92ef500b26c Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Thu, 3 Oct 2024 11:47:45 -0500 Subject: [PATCH 05/19] Rm BottomSheetLink --- src/components/Link.tsx | 39 ------------------- .../ReportDialog/SelectReportOptionView.tsx | 6 +-- 2 files changed, 3 insertions(+), 42 deletions(-) diff --git a/src/components/Link.tsx b/src/components/Link.tsx index 5a66767243..447833a239 100644 --- a/src/components/Link.tsx +++ b/src/components/Link.tsx @@ -241,45 +241,6 @@ export function Link({ ) } -export function BottomSheetLink({ - children, - to, - action = 'push', - onPress: outerOnPress, - download, - ...rest -}: LinkProps) { - const {href, isExternal, onPress} = useLink({ - to, - displayText: typeof children === 'string' ? children : '', - action, - onPress: outerOnPress, - }) - - return ( - - ) -} - export type InlineLinkProps = React.PropsWithChildren< BaseLinkProps & TextStyleProp & Pick > & diff --git a/src/components/ReportDialog/SelectReportOptionView.tsx b/src/components/ReportDialog/SelectReportOptionView.tsx index 7e27cacf0c..169c07d732 100644 --- a/src/components/ReportDialog/SelectReportOptionView.tsx +++ b/src/components/ReportDialog/SelectReportOptionView.tsx @@ -5,7 +5,7 @@ import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {ReportOption, useReportOptions} from '#/lib/moderation/useReportOptions' -import {BottomSheetLink} from '#/components/Link' +import {Link} from '#/components/Link' import {DMCA_LINK} from '#/components/ReportDialog/const' export {useDialogControl as useReportDialogControl} from '#/components/Dialog' @@ -129,7 +129,7 @@ export function SelectReportOptionView({ ]}> Need to report a copyright violation? - View details - + )} From fe4c157abb07e947001f67878b463d740a701197 Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 3 Oct 2024 10:40:55 -0700 Subject: [PATCH 06/19] android stuff --- modules/bottom-sheet/android/build.gradle | 10 +- .../modules/bottomsheet/BottomSheetModule.kt | 6 +- .../modules/bottomsheet/BottomSheetView.kt | 185 ++++++++++++++++++ .../expo/modules/bottomsheet/SheetView.kt | 101 ---------- modules/bottom-sheet/src/BottomSheet.tsx | 20 +- .../Dialog/DialogTextInput.android.ts | 3 + src/components/Dialog/DialogTextInput.ts | 3 + src/components/Dialog/index.tsx | 19 +- 8 files changed, 218 insertions(+), 129 deletions(-) create mode 100644 modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt delete mode 100644 modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/SheetView.kt create mode 100644 src/components/Dialog/DialogTextInput.android.ts create mode 100644 src/components/Dialog/DialogTextInput.ts diff --git a/modules/bottom-sheet/android/build.gradle b/modules/bottom-sheet/android/build.gradle index a685376092..a1d423044b 100644 --- a/modules/bottom-sheet/android/build.gradle +++ b/modules/bottom-sheet/android/build.gradle @@ -40,18 +40,10 @@ android { lintOptions { abortOnError false } - buildFeatures { - compose true - } - composeOptions { - kotlinCompilerExtensionVersion = "1.5.8" - } } dependencies { implementation project(':expo-modules-core') - implementation "androidx.compose.material3:material3:1.3.0" - implementation "androidx.compose.material:material:1.7.2" + implementation 'com.google.android.material:material:1.12.0' implementation "com.facebook.react:react-native:+" - implementation("com.composables:core:1.12.0") } diff --git a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetModule.kt b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetModule.kt index a34d1fdd43..4a9b2ccd4d 100644 --- a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetModule.kt +++ b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetModule.kt @@ -31,11 +31,11 @@ class BottomSheetModule : Module() { } Prop("containerBackgroundColor") { view: BottomSheetView, prop: String -> - view.sheetState.value.containerBackgroundColor = Color.parseColor(prop) +// view.sheetState.value.containerBackgroundColor = Color.parseColor(prop) } Prop("cornerRadius") { view: BottomSheetView, prop: Float -> - view.sheetState.value.cornerRadius = prop +// view.sheetState.value.cornerRadius = prop } Prop("minHeight") { view: BottomSheetView, prop: Float -> @@ -51,7 +51,7 @@ class BottomSheetModule : Module() { } Prop("preventExpansion") { view: BottomSheetView, prop: Boolean -> - view.sheetState.value.preventExpansion = prop + view.preventExpansion = prop } } } diff --git a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt new file mode 100644 index 0000000000..92d22671ce --- /dev/null +++ b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt @@ -0,0 +1,185 @@ +package expo.modules.bottomsheet + +import android.content.Context +import android.view.View +import android.widget.FrameLayout +import androidx.core.view.allViews +import com.facebook.react.ReactRootView +import com.google.android.material.bottomsheet.BottomSheetBehavior +import com.google.android.material.bottomsheet.BottomSheetDialog +import expo.modules.kotlin.AppContext +import expo.modules.kotlin.viewevent.EventDispatcher +import expo.modules.kotlin.views.ExpoView + +class BottomSheetView( + context: Context, + appContext: AppContext, +) : ExpoView(context, appContext) { + + private var reactRootView: ReactRootView? = null + private var innerView: View? = null + private var dialog: BottomSheetDialog? = null + + private val onAttemptDismiss by EventDispatcher() + private val onSnapPointChange by EventDispatcher() + private val onStateChange by EventDispatcher() + + // Props + var preventDismiss = false + set(value) { + field = value + this.dialog?.setCancelable(!value) + } + var preventExpansion = false + var minHeight = 0f + var maxHeight = 0f + + private var isOpen: Boolean = false + set(value) { + field = value + onStateChange( + mapOf( + "state" to if (value) "open" else "closed", + ), + ) + } + + private var isOpening: Boolean = false + set(value) { + field = value + if (value) { + onStateChange(mapOf( + "state" to "opening" + )) + } + } + + private var isClosing: Boolean = false + set(value) { + field = value + if (value) { + onStateChange(mapOf( + "state" to "closing" + )) + } + } + + private var selectedSnapPoint = 0 + set(value) { + if (field == value) return + + field = value + onSnapPointChange( + mapOf( + "snapPoint" to value, + ), + ) + } + + // Lifecycle + + init { + SheetManager.add(this) + } + + override fun addView( + child: View?, + index: Int, + ) { + this.innerView = child + } + + override fun onLayout( + changed: Boolean, + l: Int, + t: Int, + r: Int, + b: Int, + ) { + this.present() + } + + private fun destroy() { + this.isClosing = false + this.isOpen = false + this.dialog = null + this.reactRootView = null + this.innerView = null + } + + // Presentation + + private fun present() { + val innerView = this.innerView ?: return + val contentHeight = innerView.allViews.first().height.toFloat() + + // Needs to be a react root view for RNGH to work + val rootView = ReactRootView(context) + rootView.addView(innerView) + this.reactRootView = rootView + + this.isOpening = true + + val dialog = BottomSheetDialog(context) + dialog.setContentView(rootView) + dialog.setCancelable(!preventDismiss) + dialog.setOnShowListener { + val bottomSheet = dialog.findViewById(com.google.android.material.R.id.design_bottom_sheet) + bottomSheet?.let { + // Let the outside view handle the background color on its own, the default for this is + // white and we don't want that. + it.setBackgroundColor(0) + + val behavior = BottomSheetBehavior.from(it) + + behavior.isFitToContents = false + behavior.state = BottomSheetBehavior.STATE_HALF_EXPANDED + behavior.skipCollapsed = true + behavior.isDraggable = true + behavior.isHideable = true + + behavior.addBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() { + override fun onStateChanged(bottomSheet: View, newState: Int) { + when (newState) { + BottomSheetBehavior.STATE_EXPANDED -> { + selectedSnapPoint = 2 + } + BottomSheetBehavior.STATE_COLLAPSED -> { + selectedSnapPoint = 1 + } + BottomSheetBehavior.STATE_HALF_EXPANDED -> { + selectedSnapPoint = 1 + } + BottomSheetBehavior.STATE_HIDDEN -> { + selectedSnapPoint = 0 + } + } + } + + override fun onSlide(bottomSheet: View, slideOffset: Float) { } + }) + } + } + dialog.setOnDismissListener { + this.isClosing = true + this.destroy() + } + dialog.setOnCancelListener { + it.cancel() + } + dialog.show() + this.dialog = dialog + } + + fun updateLayout() { + this.innerView?.let { + val contentHeight = it.allViews.first().height.toFloat() + } + } + + fun dismiss() { + this.dialog?.dismiss() + this.isClosing = true + this.destroy() + } +} diff --git a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/SheetView.kt b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/SheetView.kt deleted file mode 100644 index 183dada50e..0000000000 --- a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/SheetView.kt +++ /dev/null @@ -1,101 +0,0 @@ -package expo.modules.bottomsheet - -import android.util.Log -import android.view.View -import androidx.compose.foundation.background -import androidx.compose.foundation.gestures.scrollable -import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.height -import androidx.compose.foundation.layout.imePadding -import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.widthIn -import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material3.ExperimentalMaterial3Api -import androidx.compose.material3.SheetValue -import androidx.compose.material3.rememberModalBottomSheetState -import androidx.compose.runtime.Composable -import androidx.compose.runtime.LaunchedEffect -import androidx.compose.runtime.MutableState -import androidx.compose.runtime.rememberCoroutineScope -import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.clip -import androidx.compose.ui.draw.shadow -import androidx.compose.ui.graphics.Color -import androidx.compose.ui.unit.dp -import androidx.compose.ui.viewinterop.AndroidView -import com.composables.core.BottomSheet -import com.composables.core.SheetDetent -import com.composables.core.SheetDetent.Companion.FullyExpanded -import com.composables.core.SheetDetent.Companion.Hidden -import com.composables.core.rememberBottomSheetState -import kotlinx.coroutines.launch -import kotlin.annotations.jvm.Mutable - -data class SheetState( - var isOpen: Boolean = false, - var cornerRadius: Float? = null, - var containerBackgroundColor: Int? = null, - var preventExpansion: Boolean = false, -) - -@OptIn(ExperimentalMaterial3Api::class) -@Composable -fun SheetView( - state: MutableState, - openState: MutableState, - innerView: View, - contentHeight: Float, - onDismissRequest: () -> Unit, - onExpanded: () -> Unit, - onHidden: () -> Unit, -) { - val Peek = SheetDetent(identifier = "peek") { containerHeight, sheetHeight -> - containerHeight*0.6f - } - - val scope = rememberCoroutineScope() - - val sheetState = rememberBottomSheetState( - initialDetent = Hidden, - detents = listOf(Hidden, Peek, FullyExpanded) - ) - - BottomSheet( - state = sheetState, - modifier = Modifier.fillMaxWidth() - .shadow(4.dp) - .clip(RoundedCornerShape(topStart = state.value.cornerRadius ?: 0f, topEnd = state.value.cornerRadius ?: 0f)) - .background(Color(state.value.containerBackgroundColor ?: android.graphics.Color.TRANSPARENT)) - .imePadding() -// onDismissRequest = onDismissRequest, -// shape = -// RoundedCornerShape( -// topStart = state.value.cornerRadius ?: 0f, -// topEnd = state.value.cornerRadius ?: 0f, -// ), -// containerColor = Color(state.value.containerBackgroundColor ?: android.graphics.Color.TRANSPARENT), - ) { - AndroidView( - factory = { innerView }, - ) - } - - LaunchedEffect(openState) { - Log.d("SheetView", "openState: ${openState.value}") - if (openState.value) { - sheetState.currentDetent = Peek - } else { - sheetState.currentDetent = Hidden - } - } - - LaunchedEffect(sheetState.currentDetent) { - if (sheetState.currentDetent == Peek || sheetState.currentDetent == FullyExpanded) { - onExpanded() - } else if (sheetState.currentDetent == Hidden) { - onHidden() - } - } -} diff --git a/modules/bottom-sheet/src/BottomSheet.tsx b/modules/bottom-sheet/src/BottomSheet.tsx index 7a402e7a8e..c01b159aa3 100644 --- a/modules/bottom-sheet/src/BottomSheet.tsx +++ b/modules/bottom-sheet/src/BottomSheet.tsx @@ -3,6 +3,7 @@ import { ColorValue, Dimensions, NativeSyntheticEvent, + Platform, StyleProp, StyleSheet, View, @@ -79,6 +80,7 @@ export class BottomSheet extends React.Component< const {children, ...rest} = this.props const topInset = rest.topInset ?? 0 const bottomInset = rest.bottomInset ?? 0 + const cornerRadius = rest.cornerRadius ?? 0 if (!this.state.open) { return null @@ -97,12 +99,18 @@ export class BottomSheet extends React.Component< }} containerBackgroundColor={backgroundColor}> + style={[ + { + flex: 1, + backgroundColor, + paddingTop: topInset, + paddingBottom: bottomInset, + }, + Platform.OS === 'android' && { + borderTopLeftRadius: cornerRadius, + borderTopRightRadius: cornerRadius, + }, + ]}> {children} diff --git a/src/components/Dialog/DialogTextInput.android.ts b/src/components/Dialog/DialogTextInput.android.ts new file mode 100644 index 0000000000..248eb2602d --- /dev/null +++ b/src/components/Dialog/DialogTextInput.android.ts @@ -0,0 +1,3 @@ +import {TextInput as DialogTextInput} from 'react-native-gesture-handler' + +export {DialogTextInput} diff --git a/src/components/Dialog/DialogTextInput.ts b/src/components/Dialog/DialogTextInput.ts new file mode 100644 index 0000000000..faad8d8675 --- /dev/null +++ b/src/components/Dialog/DialogTextInput.ts @@ -0,0 +1,3 @@ +import {TextInput as DialogTextInput} from 'react-native' + +export {DialogTextInput} diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx index 4c62ba832f..5bba2ab5d7 100644 --- a/src/components/Dialog/index.tsx +++ b/src/components/Dialog/index.tsx @@ -1,10 +1,6 @@ import React, {useImperativeHandle} from 'react' -import {StyleProp, View, ViewStyle} from 'react-native' -import { - GestureHandlerRootView, - ScrollView, - TextInput as RNGHTextInput, -} from 'react-native-gesture-handler' +import {Platform, StyleProp, View, ViewStyle} from 'react-native' +import {GestureHandlerRootView, ScrollView} from 'react-native-gesture-handler' import {KeyboardAwareScrollView} from 'react-native-keyboard-controller' import {useSafeAreaInsets} from 'react-native-safe-area-context' @@ -14,6 +10,7 @@ import {useDialogStateControlContext} from '#/state/dialogs' import {List, ListMethods, ListProps} from '#/view/com/util/List' import {atoms as a, flatten, useTheme} from '#/alf' import {Context, useDialogContext} from '#/components/Dialog/context' +import {DialogTextInput} from '#/components/Dialog/DialogTextInput' import { DialogControlProps, DialogInnerProps, @@ -27,7 +24,7 @@ export {useDialogContext, useDialogControl} from '#/components/Dialog/context' export * from '#/components/Dialog/types' export * from '#/components/Dialog/utils' // @ts-ignore -export const Input = createInput(RNGHTextInput) +export const Input = createInput(DialogTextInput) export function Outer({ children, @@ -151,10 +148,12 @@ export const ScrollableInner = React.forwardRef( style={[a.px_xl, style]} ref={ref} {...props} - bounces={nativeSnapPoint === BottomSheetSnapPoint.Full} + bounces={ + Platform.OS !== 'ios' || nativeSnapPoint === BottomSheetSnapPoint.Full + } + overScrollMode="always" nestedScrollEnabled={true} - bottomOffset={30} - ScrollViewComponent={ScrollView}> + bottomOffset={30}> {children} From 959060b115d70528ba2c50bd465ec9d983aa37f2 Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 3 Oct 2024 11:02:22 -0700 Subject: [PATCH 07/19] fix scrolling in some dialogs --- src/components/Dialog/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx index 5bba2ab5d7..c6195f5c35 100644 --- a/src/components/Dialog/index.tsx +++ b/src/components/Dialog/index.tsx @@ -151,8 +151,6 @@ export const ScrollableInner = React.forwardRef( bounces={ Platform.OS !== 'ios' || nativeSnapPoint === BottomSheetSnapPoint.Full } - overScrollMode="always" - nestedScrollEnabled={true} bottomOffset={30}> {children} From 3af81a662a8bdb672ed86eb395bf54aff19c04b2 Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 3 Oct 2024 12:12:11 -0700 Subject: [PATCH 08/19] auto sizing --- .../modules/bottomsheet/BottomSheetView.kt | 70 ++++++++++++++++--- modules/bottom-sheet/ios/SheetView.swift | 2 + 2 files changed, 62 insertions(+), 10 deletions(-) diff --git a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt index 92d22671ce..09b7696e03 100644 --- a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt +++ b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt @@ -1,6 +1,7 @@ package expo.modules.bottomsheet import android.content.Context +import android.util.Log import android.view.View import android.widget.FrameLayout import androidx.core.view.allViews @@ -20,6 +21,8 @@ class BottomSheetView( private var innerView: View? = null private var dialog: BottomSheetDialog? = null + private val screenHeight = context.resources.displayMetrics.heightPixels.toFloat() + private val onAttemptDismiss by EventDispatcher() private val onSnapPointChange by EventDispatcher() private val onStateChange by EventDispatcher() @@ -31,8 +34,24 @@ class BottomSheetView( this.dialog?.setCancelable(!value) } var preventExpansion = false + var minHeight = 0f + set (value) { + field = if (value < 0) { + 0f + } else { + value + } + } + var maxHeight = 0f + set (value) { + field = if (value > this.screenHeight) { + this.screenHeight.toFloat() + } else { + value + } + } private var isOpen: Boolean = false set(value) { @@ -99,30 +118,38 @@ class BottomSheetView( this.present() } + override fun onDetachedFromWindow() { + super.onDetachedFromWindow() + this.destroy() + } + private fun destroy() { this.isClosing = false this.isOpen = false this.dialog = null this.reactRootView = null this.innerView = null + SheetManager.remove(this) } // Presentation private fun present() { + if (this.isOpen || this.isOpening || this.isClosing) return + val innerView = this.innerView ?: return - val contentHeight = innerView.allViews.first().height.toFloat() + val contentHeight = this.getContentHeight() // Needs to be a react root view for RNGH to work val rootView = ReactRootView(context) rootView.addView(innerView) this.reactRootView = rootView - this.isOpening = true - val dialog = BottomSheetDialog(context) dialog.setContentView(rootView) dialog.setCancelable(!preventDismiss) + Log.d("BottomSheetView", "contentHeight: $contentHeight") + Log.d("BottomSheetView", "screenHeight: $screenHeight") dialog.setOnShowListener { val bottomSheet = dialog.findViewById(com.google.android.material.R.id.design_bottom_sheet) bottomSheet?.let { @@ -132,8 +159,20 @@ class BottomSheetView( val behavior = BottomSheetBehavior.from(it) - behavior.isFitToContents = false - behavior.state = BottomSheetBehavior.STATE_HALF_EXPANDED + behavior.isFitToContents = true + if (contentHeight > this.screenHeight) { + behavior.halfExpandedRatio = 0.99f + behavior.state = BottomSheetBehavior.STATE_EXPANDED + } else { + val targetHeight = if (contentHeight < this.minHeight) { + this.minHeight + } else { + contentHeight + } + // the sheet needs a percentage for the "middle detent" size, rather than a pixel value + behavior.halfExpandedRatio = targetHeight / screenHeight + behavior.state = BottomSheetBehavior.STATE_HALF_EXPANDED + } behavior.skipCollapsed = true behavior.isDraggable = true behavior.isHideable = true @@ -164,9 +203,8 @@ class BottomSheetView( this.isClosing = true this.destroy() } - dialog.setOnCancelListener { - it.cancel() - } + + this.isOpening = true dialog.show() this.dialog = dialog } @@ -179,7 +217,19 @@ class BottomSheetView( fun dismiss() { this.dialog?.dismiss() - this.isClosing = true - this.destroy() + } + + // Util + + fun getContentHeight(): Float { + val innerView = this.innerView ?: return 0f + + innerView.allViews.forEach { + if (it.javaClass.simpleName == "RNGestureHandlerRootView") { + return it.height.toFloat() + 20f + } + } + + return 0f } } diff --git a/modules/bottom-sheet/ios/SheetView.swift b/modules/bottom-sheet/ios/SheetView.swift index 54944030ff..be05dfa94c 100644 --- a/modules/bottom-sheet/ios/SheetView.swift +++ b/modules/bottom-sheet/ios/SheetView.swift @@ -111,6 +111,8 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate { func present() { guard !self.isOpen, + !self.isOpening, + !self.isClosing, let innerView = self.innerView, let contentHeight = innerView.subviews.first?.frame.height, let rvc = self.reactViewController() else { From 346897d25560200b8547eeb9cdee74071fa49f50 Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 3 Oct 2024 12:28:35 -0700 Subject: [PATCH 09/19] more autosize stuff --- .../modules/bottomsheet/BottomSheetView.kt | 57 +++++++++++++------ 1 file changed, 40 insertions(+), 17 deletions(-) diff --git a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt index 09b7696e03..8edce6a0f5 100644 --- a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt +++ b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt @@ -1,7 +1,6 @@ package expo.modules.bottomsheet import android.content.Context -import android.util.Log import android.view.View import android.widget.FrameLayout import androidx.core.view.allViews @@ -44,7 +43,7 @@ class BottomSheetView( } } - var maxHeight = 0f + var maxHeight = this.screenHeight set (value) { field = if (value > this.screenHeight) { this.screenHeight.toFloat() @@ -148,8 +147,6 @@ class BottomSheetView( val dialog = BottomSheetDialog(context) dialog.setContentView(rootView) dialog.setCancelable(!preventDismiss) - Log.d("BottomSheetView", "contentHeight: $contentHeight") - Log.d("BottomSheetView", "screenHeight: $screenHeight") dialog.setOnShowListener { val bottomSheet = dialog.findViewById(com.google.android.material.R.id.design_bottom_sheet) bottomSheet?.let { @@ -160,18 +157,13 @@ class BottomSheetView( val behavior = BottomSheetBehavior.from(it) behavior.isFitToContents = true + behavior.halfExpandedRatio = this.clampRatio(this.getTargetHeight() / this.screenHeight) if (contentHeight > this.screenHeight) { - behavior.halfExpandedRatio = 0.99f behavior.state = BottomSheetBehavior.STATE_EXPANDED + this.selectedSnapPoint = 2 } else { - val targetHeight = if (contentHeight < this.minHeight) { - this.minHeight - } else { - contentHeight - } - // the sheet needs a percentage for the "middle detent" size, rather than a pixel value - behavior.halfExpandedRatio = targetHeight / screenHeight behavior.state = BottomSheetBehavior.STATE_HALF_EXPANDED + this.selectedSnapPoint = 1 } behavior.skipCollapsed = true behavior.isDraggable = true @@ -210,26 +202,57 @@ class BottomSheetView( } fun updateLayout() { - this.innerView?.let { - val contentHeight = it.allViews.first().height.toFloat() + val dialog = this.dialog ?: return + val contentHeight = this.getContentHeight() + + val bottomSheet = dialog.findViewById(com.google.android.material.R.id.design_bottom_sheet) + bottomSheet?.let { + val behavior = BottomSheetBehavior.from(it) + + behavior.halfExpandedRatio = this.clampRatio(this.getTargetHeight() / this.screenHeight) + + if (contentHeight > this.screenHeight && behavior.state != BottomSheetBehavior.STATE_EXPANDED) { + behavior.state = BottomSheetBehavior.STATE_EXPANDED + } else if (contentHeight < this.screenHeight && behavior.state != BottomSheetBehavior.STATE_HALF_EXPANDED) { + behavior.state = BottomSheetBehavior.STATE_HALF_EXPANDED + } } } + private fun getTargetHeight(): Float { + val contentHeight = this.getContentHeight() + val height = if (contentHeight > maxHeight) { + maxHeight + } else if (contentHeight < minHeight) { + minHeight + } else { + contentHeight + } + return height + } + + private fun clampRatio(ratio: Float): Float { + if (ratio < 0.01) { + return 0.01f + } else if (ratio > 0.99) { + return 0.99f + } + return ratio + } + fun dismiss() { this.dialog?.dismiss() } // Util - fun getContentHeight(): Float { + private fun getContentHeight(): Float { val innerView = this.innerView ?: return 0f - innerView.allViews.forEach { if (it.javaClass.simpleName == "RNGestureHandlerRootView") { return it.height.toFloat() + 20f } } - return 0f } } From 91ea4860e129d875eac5da9f1b281bee25c65744 Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 3 Oct 2024 12:30:15 -0700 Subject: [PATCH 10/19] tweak inset stuff --- .../src/main/java/expo/modules/bottomsheet/BottomSheetView.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt index 8edce6a0f5..67dab92f6e 100644 --- a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt +++ b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt @@ -250,7 +250,7 @@ class BottomSheetView( val innerView = this.innerView ?: return 0f innerView.allViews.forEach { if (it.javaClass.simpleName == "RNGestureHandlerRootView") { - return it.height.toFloat() + 20f + return it.height.toFloat() + 50f } } return 0f From c389f4f994ad4a30b4ada0e9873f44201e3f2d72 Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 3 Oct 2024 12:32:36 -0700 Subject: [PATCH 11/19] remove inset --- modules/bottom-sheet/src/BottomSheet.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/bottom-sheet/src/BottomSheet.tsx b/modules/bottom-sheet/src/BottomSheet.tsx index c01b159aa3..e7d19ae975 100644 --- a/modules/bottom-sheet/src/BottomSheet.tsx +++ b/modules/bottom-sheet/src/BottomSheet.tsx @@ -94,7 +94,7 @@ export class BottomSheet extends React.Component< ref={this.ref} style={{ position: 'absolute', - height: screenHeight - topInset - bottomInset, + height: screenHeight, width: '100%', }} containerBackgroundColor={backgroundColor}> From ec2f66caf32f385e705627f876ca29482bcd8359 Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 3 Oct 2024 12:34:19 -0700 Subject: [PATCH 12/19] organize --- .../modules/bottomsheet/BottomSheetView.kt | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt index 67dab92f6e..9cb719e8ef 100644 --- a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt +++ b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt @@ -219,6 +219,22 @@ class BottomSheetView( } } + fun dismiss() { + this.dialog?.dismiss() + } + + // Util + + private fun getContentHeight(): Float { + val innerView = this.innerView ?: return 0f + innerView.allViews.forEach { + if (it.javaClass.simpleName == "RNGestureHandlerRootView") { + return it.height.toFloat() + 50f + } + } + return 0f + } + private fun getTargetHeight(): Float { val contentHeight = this.getContentHeight() val height = if (contentHeight > maxHeight) { @@ -239,20 +255,4 @@ class BottomSheetView( } return ratio } - - fun dismiss() { - this.dialog?.dismiss() - } - - // Util - - private fun getContentHeight(): Float { - val innerView = this.innerView ?: return 0f - innerView.allViews.forEach { - if (it.javaClass.simpleName == "RNGestureHandlerRootView") { - return it.height.toFloat() + 50f - } - } - return 0f - } } From d8c822ad3bfd23bfa58206aee92e648c37ffc9b1 Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 3 Oct 2024 12:56:38 -0700 Subject: [PATCH 13/19] fix --- .../main/java/expo/modules/bottomsheet/BottomSheetView.kt | 5 ----- 1 file changed, 5 deletions(-) diff --git a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt index 9cb719e8ef..1792c025eb 100644 --- a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt +++ b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt @@ -117,11 +117,6 @@ class BottomSheetView( this.present() } - override fun onDetachedFromWindow() { - super.onDetachedFromWindow() - this.destroy() - } - private fun destroy() { this.isClosing = false this.isOpen = false From 78554a3d6b6e5c4bafe75f3654b0e4a50ff910f1 Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 3 Oct 2024 13:08:49 -0700 Subject: [PATCH 14/19] ? --- src/components/Dialog/index.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx index c6195f5c35..87a6b8994c 100644 --- a/src/components/Dialog/index.tsx +++ b/src/components/Dialog/index.tsx @@ -1,5 +1,5 @@ import React, {useImperativeHandle} from 'react' -import {Platform, StyleProp, View, ViewStyle} from 'react-native' +import {StyleProp, View, ViewStyle} from 'react-native' import {GestureHandlerRootView, ScrollView} from 'react-native-gesture-handler' import {KeyboardAwareScrollView} from 'react-native-keyboard-controller' import {useSafeAreaInsets} from 'react-native-safe-area-context' @@ -148,12 +148,10 @@ export const ScrollableInner = React.forwardRef( style={[a.px_xl, style]} ref={ref} {...props} - bounces={ - Platform.OS !== 'ios' || nativeSnapPoint === BottomSheetSnapPoint.Full - } + bounces={nativeSnapPoint === BottomSheetSnapPoint.Full} bottomOffset={30}> {children} - + ) }, From 3f2450fc017a4b410151776681e8086d03bcc34f Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 3 Oct 2024 14:39:53 -0700 Subject: [PATCH 15/19] hack for keyboard android --- src/components/Dialog/index.tsx | 6 +++++- src/components/ReportDialog/SubmitView.tsx | 3 +++ src/view/com/composer/GifAltText.tsx | 3 +++ src/view/com/composer/photos/ImageAltTextDialog.tsx | 4 +++- 4 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx index 87a6b8994c..3b26f5b20e 100644 --- a/src/components/Dialog/index.tsx +++ b/src/components/Dialog/index.tsx @@ -151,7 +151,11 @@ export const ScrollableInner = React.forwardRef( bounces={nativeSnapPoint === BottomSheetSnapPoint.Full} bottomOffset={30}> {children} - + ) }, diff --git a/src/components/ReportDialog/SubmitView.tsx b/src/components/ReportDialog/SubmitView.tsx index 682e918c2d..5b2f527fdd 100644 --- a/src/components/ReportDialog/SubmitView.tsx +++ b/src/components/ReportDialog/SubmitView.tsx @@ -6,6 +6,7 @@ import {useLingui} from '@lingui/react' import {getLabelingServiceTitle} from '#/lib/moderation' import {ReportOption} from '#/lib/moderation/useReportOptions' +import {isAndroid} from '#/platform/detection' import {useAgent} from '#/state/session' import {CharProgress} from '#/view/com/composer/char-progress/CharProgress' import * as Toast from '#/view/com/util/Toast' @@ -227,6 +228,8 @@ export function SubmitView({ {submitting && } + {/* Maybe fix this later -h */} + {isAndroid ? : null} ) } diff --git a/src/view/com/composer/GifAltText.tsx b/src/view/com/composer/GifAltText.tsx index b4ff731fbe..bc93084f50 100644 --- a/src/view/com/composer/GifAltText.tsx +++ b/src/view/com/composer/GifAltText.tsx @@ -12,6 +12,7 @@ import { parseEmbedPlayerFromUrl, } from '#/lib/strings/embed-player' import {enforceLen} from '#/lib/strings/helpers' +import {isAndroid} from '#/platform/detection' import {Gif} from '#/state/queries/tenor' import {atoms as a, native, useTheme} from '#/alf' import {Button, ButtonText} from '#/components/Button' @@ -184,6 +185,8 @@ function AltTextInner({ + {/* Maybe fix this later -h */} + {isAndroid ? : null} ) } diff --git a/src/view/com/composer/photos/ImageAltTextDialog.tsx b/src/view/com/composer/photos/ImageAltTextDialog.tsx index a5ef5bc031..a468db5376 100644 --- a/src/view/com/composer/photos/ImageAltTextDialog.tsx +++ b/src/view/com/composer/photos/ImageAltTextDialog.tsx @@ -5,7 +5,7 @@ import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {MAX_ALT_TEXT} from '#/lib/constants' -import {isWeb} from '#/platform/detection' +import {isAndroid, isWeb} from '#/platform/detection' import {ComposerImage} from '#/state/gallery' import {atoms as a, useTheme} from '#/alf' import {Button, ButtonText} from '#/components/Button' @@ -116,6 +116,8 @@ const ImageAltTextInner = ({ + {/* Maybe fix this later -h */} + {isAndroid ? : null} ) } From 8dfc9a65a6474f58f2d10c8a866a08ffb430b658 Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 3 Oct 2024 15:01:26 -0700 Subject: [PATCH 16/19] tweaks/fixes --- modules/bottom-sheet/ios/SheetViewController.swift | 10 +++++----- src/components/Dialog/index.tsx | 3 ++- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/modules/bottom-sheet/ios/SheetViewController.swift b/modules/bottom-sheet/ios/SheetViewController.swift index 9caa5bab14..004e79a5c4 100644 --- a/modules/bottom-sheet/ios/SheetViewController.swift +++ b/modules/bottom-sheet/ios/SheetViewController.swift @@ -27,7 +27,7 @@ class SheetViewController: UIViewController { return } - if contentHeight > screenHeight { + if contentHeight > screenHeight - 100 { sheet.detents = [ .large() ] @@ -43,10 +43,10 @@ class SheetViewController: UIViewController { .medium() ] } - } - - if !preventExpansion { - sheet.detents.append(.large()) + + if !preventExpansion { + sheet.detents.append(.large()) + } } } diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx index 3b26f5b20e..888914c8bc 100644 --- a/src/components/Dialog/index.tsx +++ b/src/components/Dialog/index.tsx @@ -149,7 +149,8 @@ export const ScrollableInner = React.forwardRef( ref={ref} {...props} bounces={nativeSnapPoint === BottomSheetSnapPoint.Full} - bottomOffset={30}> + bottomOffset={30} + ScrollViewComponent={ScrollView}> {children} Date: Thu, 3 Oct 2024 15:27:00 -0700 Subject: [PATCH 17/19] fix translate --- src/components/Menu/index.tsx | 6 ++---- src/state/preferences/in-app-browser.tsx | 12 ++++++------ src/view/com/util/forms/PostDropdownBtn.tsx | 4 ++-- 3 files changed, 10 insertions(+), 12 deletions(-) diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx index bfdcf4099d..4654d9f9b4 100644 --- a/src/components/Menu/index.tsx +++ b/src/components/Menu/index.tsx @@ -119,10 +119,8 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) { accessibilityLabel={label} onFocus={onFocus} onBlur={onBlur} - onPress={e => { - control?.close() - onPress(e) - + onPress={async e => { + await onPress(e) if (!e.defaultPrevented) { control?.close() } diff --git a/src/state/preferences/in-app-browser.tsx b/src/state/preferences/in-app-browser.tsx index 76c854105e..1494fa4e8a 100644 --- a/src/state/preferences/in-app-browser.tsx +++ b/src/state/preferences/in-app-browser.tsx @@ -2,14 +2,14 @@ import React from 'react' import {Linking} from 'react-native' import * as WebBrowser from 'expo-web-browser' -import {isNative} from '#/platform/detection' -import * as persisted from '#/state/persisted' -import {usePalette} from 'lib/hooks/usePalette' +import {usePalette} from '#/lib/hooks/usePalette' import { createBskyAppAbsoluteUrl, isBskyRSSUrl, isRelativeUrl, -} from 'lib/strings/url-helpers' +} from '#/lib/strings/url-helpers' +import {isNative} from '#/platform/detection' +import * as persisted from '#/state/persisted' import {useModalControls} from '../modals' type StateContext = persisted.Schema['useInAppBrowser'] @@ -62,7 +62,7 @@ export function useOpenLink() { const pal = usePalette('default') const openLink = React.useCallback( - (url: string, override?: boolean) => { + async (url: string, override?: boolean) => { if (isBskyRSSUrl(url) && isRelativeUrl(url)) { url = createBskyAppAbsoluteUrl(url) } @@ -75,7 +75,7 @@ export function useOpenLink() { }) return } else if (override ?? enabled) { - WebBrowser.openBrowserAsync(url, { + await WebBrowser.openBrowserAsync(url, { presentationStyle: WebBrowser.WebBrowserPresentationStyle.FULL_SCREEN, toolbarColor: pal.colors.backgroundLight, diff --git a/src/view/com/util/forms/PostDropdownBtn.tsx b/src/view/com/util/forms/PostDropdownBtn.tsx index ef87c24533..5449fdaf31 100644 --- a/src/view/com/util/forms/PostDropdownBtn.tsx +++ b/src/view/com/util/forms/PostDropdownBtn.tsx @@ -239,8 +239,8 @@ let PostDropdownBtn = ({ Toast.show(_(msg`Copied to clipboard`), 'clipboard-check') }, [_, richText]) - const onPressTranslate = React.useCallback(() => { - openLink(translatorUrl) + const onPressTranslate = React.useCallback(async () => { + await openLink(translatorUrl) }, [openLink, translatorUrl]) const onHidePost = React.useCallback(() => { From 308b197bcfa7926e5377a2be222747496f0a6e55 Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 3 Oct 2024 15:33:59 -0700 Subject: [PATCH 18/19] fix link --- .../moderation/LabelsOnMeDialog.tsx | 36 +++++++++---------- 1 file changed, 17 insertions(+), 19 deletions(-) diff --git a/src/components/moderation/LabelsOnMeDialog.tsx b/src/components/moderation/LabelsOnMeDialog.tsx index fc30b004ad..aa64972a96 100644 --- a/src/components/moderation/LabelsOnMeDialog.tsx +++ b/src/components/moderation/LabelsOnMeDialog.tsx @@ -16,7 +16,6 @@ import {atoms as a, useBreakpoints, useTheme} from '#/alf' import {BottomSheetInlineLinkText} from '#/components/BottomSheetLink' import {Button, ButtonIcon, ButtonText} from '#/components/Button' import * as Dialog from '#/components/Dialog' -import {InlineLinkText} from '#/components/Link' import {Text} from '#/components/Typography' import {Divider} from '../Divider' import {Loader} from '../Loader' @@ -237,24 +236,23 @@ function AppealForm({ return ( <> - - Appeal "{strings.name}" label - - - - This appeal will be sent to{' '} - control.close()} - style={[a.text_md, a.leading_snug]}> - {sourceName} - - . - - + + + Appeal "{strings.name}" label + + + This appeal will be sent to{' '} + + control.close()} + style={[a.text_md, a.leading_snug]}> + {sourceName} + + Date: Thu, 3 Oct 2024 15:36:07 -0700 Subject: [PATCH 19/19] add back period --- src/components/moderation/LabelsOnMeDialog.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/moderation/LabelsOnMeDialog.tsx b/src/components/moderation/LabelsOnMeDialog.tsx index aa64972a96..acedf81754 100644 --- a/src/components/moderation/LabelsOnMeDialog.tsx +++ b/src/components/moderation/LabelsOnMeDialog.tsx @@ -252,6 +252,7 @@ function AppealForm({ style={[a.text_md, a.leading_snug]}> {sourceName} + .