add initialHeight prop

This commit is contained in:
Samuel Newman
2024-10-10 16:22:07 +03:00
parent 2841944789
commit 9ac49485e2
9 changed files with 86 additions and 34 deletions
@@ -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
}
@@ -52,6 +52,8 @@ class BottomSheetView(
}
var preventExpansion = false
var initialHeight = "auto"
var minHeight = 0f
set(value) {
field =
@@ -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
}
+24 -12
View File
@@ -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
}
}
@@ -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()
}
@@ -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
@@ -25,9 +25,7 @@ const NativeModule = requireNativeModule('BottomSheet')
export class BottomSheetNativeComponent extends React.Component<
BottomSheetViewProps,
{
open: boolean
}
{open: boolean}
> {
ref = React.createRef<any>()
+4 -1
View File
@@ -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<ViewStyle>
nativeOptions?: Omit<BottomSheetViewProps, 'children'>
}>) {
const context = React.useContext(Context)
const {_} = useLingui()
@@ -87,7 +90,7 @@ export function Outer({
return (
<Dialog.Outer
control={context.control}
nativeOptions={{preventExpansion: true}}>
nativeOptions={{preventExpansion: true, ...nativeOptions}}>
<Dialog.Handle />
{/* Re-wrap with context since Dialogs are portal-ed to root */}
<Context.Provider value={context}>
+1 -1
View File
@@ -386,7 +386,7 @@ let PostDropdownBtn = ({
}}
</Menu.Trigger>
<Menu.Outer>
<Menu.Outer nativeOptions={{initialHeight: 'half'}}>
{isAuthor && (
<>
<Menu.Group>