add initialHeight prop
This commit is contained in:
+4
@@ -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
|
||||
}
|
||||
|
||||
@@ -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>()
|
||||
|
||||
|
||||
@@ -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}>
|
||||
|
||||
@@ -386,7 +386,7 @@ let PostDropdownBtn = ({
|
||||
}}
|
||||
</Menu.Trigger>
|
||||
|
||||
<Menu.Outer>
|
||||
<Menu.Outer nativeOptions={{initialHeight: 'half'}}>
|
||||
{isAuthor && (
|
||||
<>
|
||||
<Menu.Group>
|
||||
|
||||
Reference in New Issue
Block a user