From 9ac49485e2b8dc591ddcd0f97360acf83faf8e59 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Thu, 10 Oct 2024 16:22:07 +0300 Subject: [PATCH] add `initialHeight` prop --- .../modules/bottomsheet/BottomSheetModule.kt | 4 ++ .../modules/bottomsheet/BottomSheetView.kt | 2 + .../bottom-sheet/ios/BottomSheetModule.swift | 4 ++ modules/bottom-sheet/ios/SheetView.swift | 36 +++++++---- .../ios/SheetViewController.swift | 60 +++++++++++++------ modules/bottom-sheet/src/BottomSheet.types.ts | 3 + .../src/BottomSheetNativeComponent.tsx | 4 +- src/components/Menu/index.tsx | 5 +- src/view/com/util/forms/PostDropdownBtn.tsx | 2 +- 9 files changed, 86 insertions(+), 34 deletions(-) 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 057e6ed2e2..37a32250ec 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 @@ -33,6 +33,10 @@ class BottomSheetModule : Module() { view.disableDrag = prop } + Prop("initialHeight") { view: BottomSheetView, prop: String -> + view.minHeight = prop + } + Prop("minHeight") { view: BottomSheetView, prop: Float -> view.minHeight = 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 index a5a84ec3d9..e11974ebce 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 @@ -52,6 +52,8 @@ class BottomSheetView( } var preventExpansion = false + var initialHeight = "auto" + var minHeight = 0f set(value) { field = diff --git a/modules/bottom-sheet/ios/BottomSheetModule.swift b/modules/bottom-sheet/ios/BottomSheetModule.swift index 579608e75b..f0ea13bb4e 100644 --- a/modules/bottom-sheet/ios/BottomSheetModule.swift +++ b/modules/bottom-sheet/ios/BottomSheetModule.swift @@ -27,6 +27,10 @@ public class BottomSheetModule: Module { view.cornerRadius = CGFloat(prop) } + Prop("initialHeight") { (view: SheetView, prop: String) in + view.initialHeight = prop + } + Prop("minHeight") { (view: SheetView, prop: Double) in view.minHeight = prop } diff --git a/modules/bottom-sheet/ios/SheetView.swift b/modules/bottom-sheet/ios/SheetView.swift index 2223a5a8ca..8f99971b6f 100644 --- a/modules/bottom-sheet/ios/SheetView.swift +++ b/modules/bottom-sheet/ios/SheetView.swift @@ -25,6 +25,7 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate { var preventDismiss = false var preventExpansion = false var cornerRadius: CGFloat? + var initialHeight: String? var minHeight = 0.0 var maxHeight: CGFloat! { didSet { @@ -70,7 +71,7 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate { // MARK: - Lifecycle - required init (appContext: AppContext? = nil) { + required init(appContext: AppContext? = nil) { super.init(appContext: appContext) self.maxHeight = Util.getScreenHeight() self.touchHandler = RCTTouchHandler(bridge: appContext?.reactBridge) @@ -117,16 +118,20 @@ 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 { + !self.isOpening, + !self.isClosing, + let innerView = self.innerView, + let contentHeight = innerView.subviews.first?.frame.height, + let rvc = self.reactViewController() + else { return } let sheetVc = SheetViewController() - sheetVc.setDetents(contentHeight: self.clampHeight(contentHeight), preventExpansion: self.preventExpansion) + sheetVc.setDetents( + initialHeight: self.initialHeight, + contentHeight: self.clampHeight(contentHeight), + preventExpansion: self.preventExpansion) if let sheet = sheetVc.sheetPresentationController { sheet.delegate = self sheet.preferredCornerRadius = self.cornerRadius @@ -145,9 +150,12 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate { func updateLayout() { if self.prevLayoutDetentIdentifier == self.selectedDetentIdentifier, - let contentHeight = self.innerView?.subviews.first?.frame.size.height { - self.sheetVc?.updateDetents(contentHeight: self.clampHeight(contentHeight), - preventExpansion: self.preventExpansion) + let contentHeight = self.innerView?.subviews.first?.frame.size.height + { + self.sheetVc?.updateDetents( + initialHeight: self.initialHeight, + contentHeight: self.clampHeight(contentHeight), + preventExpansion: self.preventExpansion) self.selectedDetentIdentifier = self.sheetVc?.getCurrentDetentIdentifier() } self.prevLayoutDetentIdentifier = self.selectedDetentIdentifier @@ -173,7 +181,9 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate { // MARK: - UISheetPresentationControllerDelegate - func presentationControllerShouldDismiss(_ presentationController: UIPresentationController) -> Bool { + func presentationControllerShouldDismiss(_ presentationController: UIPresentationController) + -> Bool + { self.onAttemptDismiss() return !self.preventDismiss } @@ -186,7 +196,9 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate { self.destroy() } - func sheetPresentationControllerDidChangeSelectedDetentIdentifier(_ sheetPresentationController: UISheetPresentationController) { + func sheetPresentationControllerDidChangeSelectedDetentIdentifier( + _ sheetPresentationController: UISheetPresentationController + ) { self.selectedDetentIdentifier = sheetPresentationController.selectedDetentIdentifier } } diff --git a/modules/bottom-sheet/ios/SheetViewController.swift b/modules/bottom-sheet/ios/SheetViewController.swift index 7b6606980d..94b786532a 100644 --- a/modules/bottom-sheet/ios/SheetViewController.swift +++ b/modules/bottom-sheet/ios/SheetViewController.swift @@ -20,42 +20,68 @@ class SheetViewController: UIViewController { } } - func setDetents(contentHeight: CGFloat, preventExpansion: Bool) { + func setDetents(initialHeight: String, contentHeight: CGFloat, preventExpansion: Bool) { guard let sheet = self.sheetPresentationController, - let screenHeight = Util.getScreenHeight() + let screenHeight = Util.getScreenHeight() else { return } if contentHeight > screenHeight - 100 { - sheet.detents = [ - .large() - ] - sheet.selectedDetentIdentifier = .large - } else { - if #available(iOS 16.0, *) { + if initialHeight == "half" { sheet.detents = [ - .custom { _ in - return contentHeight - } + .medium(), + .large(), ] + sheet.selectedDetentIdentifier = .medium } else { sheet.detents = [ - .medium() + .large() ] + sheet.selectedDetentIdentifier = .large } + } else { + if initialHeight == "full" { + sheet.detents = [ + .large() + ] + sheet.selectedDetentIdentifier = .large + } else { + if #available(iOS 16.0, *) { + sheet.detents = [ + .custom { _ in + return contentHeight + } + ] - if !preventExpansion { - sheet.detents.append(.large()) + if initialHeight == "half" { + if (screenHeight - 100) / 2 > contentHeight { + sheet.detents.insert(.medium(), at: 0) + } else { + sheet.detents.append(.medium()) + } + } + } else { + sheet.detents = [ + .medium() + ] + } + + if !preventExpansion { + sheet.detents.append(.large()) + } + + sheet.selectedDetentIdentifier = .medium } - sheet.selectedDetentIdentifier = .medium } } - func updateDetents(contentHeight: CGFloat, preventExpansion: Bool) { + func updateDetents(initialHeight: String, contentHeight: CGFloat, preventExpansion: Bool) { if let sheet = self.sheetPresentationController { sheet.animateChanges { - self.setDetents(contentHeight: contentHeight, preventExpansion: preventExpansion) + self.setDetents( + initialHeight: initialHeight, contentHeight: contentHeight, + preventExpansion: preventExpansion) if #available(iOS 16.0, *) { sheet.invalidateDetents() } diff --git a/modules/bottom-sheet/src/BottomSheet.types.ts b/modules/bottom-sheet/src/BottomSheet.types.ts index 150932d423..c3735a3032 100644 --- a/modules/bottom-sheet/src/BottomSheet.types.ts +++ b/modules/bottom-sheet/src/BottomSheet.types.ts @@ -3,6 +3,8 @@ import {ColorValue, NativeSyntheticEvent} from 'react-native' export type BottomSheetState = 'closed' | 'closing' | 'open' | 'opening' +export type BottomSheetDetent = 'auto' | 'half' | 'full' + export enum BottomSheetSnapPoint { Hidden, Partial, @@ -25,6 +27,7 @@ export interface BottomSheetViewProps { backgroundColor?: ColorValue containerBackgroundColor?: ColorValue disableDrag?: boolean + initialHeight?: BottomSheetDetent minHeight?: number maxHeight?: number diff --git a/modules/bottom-sheet/src/BottomSheetNativeComponent.tsx b/modules/bottom-sheet/src/BottomSheetNativeComponent.tsx index eadd9b4a1d..7343ed9e40 100644 --- a/modules/bottom-sheet/src/BottomSheetNativeComponent.tsx +++ b/modules/bottom-sheet/src/BottomSheetNativeComponent.tsx @@ -25,9 +25,7 @@ const NativeModule = requireNativeModule('BottomSheet') export class BottomSheetNativeComponent extends React.Component< BottomSheetViewProps, - { - open: boolean - } + {open: boolean} > { ref = React.createRef() diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx index 4d35a63bdb..aaee91a473 100644 --- a/src/components/Menu/index.tsx +++ b/src/components/Menu/index.tsx @@ -19,6 +19,7 @@ import { TriggerProps, } from '#/components/Menu/types' import {Text} from '#/components/Typography' +import {BottomSheetViewProps} from '../../../modules/bottom-sheet' export { type DialogControlProps as MenuControlProps, @@ -77,9 +78,11 @@ export function Trigger({children, label}: TriggerProps) { export function Outer({ children, showCancel, + nativeOptions, }: React.PropsWithChildren<{ showCancel?: boolean style?: StyleProp + nativeOptions?: Omit }>) { const context = React.useContext(Context) const {_} = useLingui() @@ -87,7 +90,7 @@ export function Outer({ return ( + nativeOptions={{preventExpansion: true, ...nativeOptions}}> {/* Re-wrap with context since Dialogs are portal-ed to root */} diff --git a/src/view/com/util/forms/PostDropdownBtn.tsx b/src/view/com/util/forms/PostDropdownBtn.tsx index cd1f2d3de6..5cfa23d885 100644 --- a/src/view/com/util/forms/PostDropdownBtn.tsx +++ b/src/view/com/util/forms/PostDropdownBtn.tsx @@ -386,7 +386,7 @@ let PostDropdownBtn = ({ }} - + {isAuthor && ( <>