simplify logic

This commit is contained in:
Hailey
2024-10-02 18:21:56 -07:00
parent 7489a70735
commit 0ce5d449f7
6 changed files with 66 additions and 19 deletions
+11 -2
View File
@@ -1,4 +1,13 @@
import {BottomSheetState, BottomSheetViewProps} from './src/BottomSheet.types'
import {
BottomSheetSnapPoint,
BottomSheetState,
BottomSheetViewProps,
} from './src/BottomSheet.types'
import {BottomSheetView} from './src/BottomSheetView'
export {type BottomSheetState, BottomSheetView, type BottomSheetViewProps}
export {
BottomSheetSnapPoint,
type BottomSheetState,
BottomSheetView,
type BottomSheetViewProps,
}
+19 -12
View File
@@ -52,6 +52,22 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
}
}
}
private var selectedDetentIdentifier: UISheetPresentationController.Detent.Identifier? {
didSet {
guard let selectedDetentIdentifier else {
return
}
if selectedDetentIdentifier == .large {
onSnapPointChange([
"snapPoint": 2
])
} else {
onSnapPointChange([
"snapPoint": 1
])
}
}
}
// MARK: - Lifecycle
@@ -104,11 +120,12 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
}
let sheetVc = SheetViewController()
sheetVc.setDetents(contentHeight: self.clampHeight(contentHeight), preventExpansion: self.preventExpansion)
if let sheet = sheetVc.sheetPresentationController {
sheet.delegate = self
sheet.preferredCornerRadius = self.cornerRadius
self.selectedDetentIdentifier = sheet.selectedDetentIdentifier
}
sheetVc.setDetents(contentHeight: self.clampHeight(contentHeight), preventExpansion: self.preventExpansion)
sheetVc.view.addSubview(innerView)
self.sheetVc = sheetVc
@@ -161,16 +178,6 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
}
func sheetPresentationControllerDidChangeSelectedDetentIdentifier(_ sheetPresentationController: UISheetPresentationController) {
let identifier = sheetPresentationController.selectedDetentIdentifier
if identifier == .large {
onSnapPointChange([
"snapPoint": 2,
])
} else {
onSnapPointChange([
"snapPoint": 1,
])
}
self.selectedDetentIdentifier = sheetPresentationController.selectedDetentIdentifier
}
}
+10 -1
View File
@@ -3,6 +3,12 @@ import {ColorValue, NativeSyntheticEvent} from 'react-native'
export type BottomSheetState = 'closed' | 'closing' | 'open' | 'opening'
export enum BottomSheetSnapPoint {
Hidden,
Partial,
Full,
}
export interface BottomSheetViewProps {
children: React.ReactNode
cornerRadius?: number
@@ -15,8 +21,11 @@ export interface BottomSheetViewProps {
minHeight?: number
maxHeight?: number
onAttemptDismiss?: (event: NativeSyntheticEvent<object>) => void
onSnapPointChange?: (
event: NativeSyntheticEvent<{snapPoint: BottomSheetSnapPoint}>,
) => void
onStateChange?: (
event: NativeSyntheticEvent<{state: BottomSheetState}>,
) => void
onAttemptDismiss?: (event: NativeSyntheticEvent<object>) => void
}
+2
View File
@@ -6,10 +6,12 @@ import {
DialogControlRefProps,
DialogOuterProps,
} from '#/components/Dialog/types'
import {BottomSheetSnapPoint} from '../../../modules/bottom-sheet/src/BottomSheet.types'
export const Context = React.createContext<DialogContextProps>({
close: () => {},
insideDialog: false,
snapPoint: BottomSheetSnapPoint.Hidden,
})
export function useDialogContext() {
+22 -4
View File
@@ -8,7 +8,7 @@ import {isIOS} from '#/platform/detection'
import {useDialogStateControlContext} from '#/state/dialogs'
import {List, ListMethods, ListProps} from '#/view/com/util/List'
import {atoms as a, flatten, useTheme} from '#/alf'
import {Context} from '#/components/Dialog/context'
import {Context, useDialogContext} from '#/components/Dialog/context'
import {
DialogControlProps,
DialogInnerProps,
@@ -16,7 +16,10 @@ import {
} from '#/components/Dialog/types'
import {createInput} from '#/components/forms/TextField'
import {Portal} from '#/components/Portal'
import {BottomSheetView} from '../../../modules/bottom-sheet'
import {
BottomSheetSnapPoint,
BottomSheetView,
} from '../../../modules/bottom-sheet'
export {useDialogContext, useDialogControl} from '#/components/Dialog/context'
export * from '#/components/Dialog/types'
@@ -57,6 +60,10 @@ export function OuterWithoutPortal({
const closeCallbacks = React.useRef<(() => void)[]>([])
const {setDialogIsOpen} = useDialogStateControlContext()
const [snapPoint, setSnapPoint] = React.useState<BottomSheetSnapPoint>(
BottomSheetSnapPoint.Partial,
)
const callQueuedCallbacks = React.useCallback(() => {
for (const cb of closeCallbacks.current) {
try {
@@ -103,7 +110,10 @@ export function OuterWithoutPortal({
[open, close],
)
const context = React.useMemo(() => ({close, insideDialog: true}), [close])
const context = React.useMemo(
() => ({close, insideDialog: true, snapPoint}),
[close, snapPoint],
)
const Wrapper = isIOS ? View : GestureHandlerRootView
@@ -113,6 +123,10 @@ export function OuterWithoutPortal({
ref={ref}
topInset={30}
bottomInset={insets.bottom}
onSnapPointChange={e => {
console.log(e.nativeEvent)
setSnapPoint(e.nativeEvent.snapPoint)
}}
onStateChange={e => {
if (e.nativeEvent.state === 'closed') {
onCloseAnimationComplete()
@@ -147,8 +161,12 @@ export function Inner({children, style}: DialogInnerProps) {
export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
function ScrollableInner({children, style}, ref) {
const insets = useSafeAreaInsets()
const {snapPoint} = useDialogContext()
return (
<ScrollView style={[a.px_xl, style]} ref={ref}>
<ScrollView
style={[a.px_xl, style]}
ref={ref}
bounces={snapPoint === BottomSheetSnapPoint.Full}>
{children}
<View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />
</ScrollView>
+2
View File
@@ -7,6 +7,7 @@ import type {
import {ViewStyleProp} from '#/alf'
import {BottomSheetViewProps} from '../../../modules/bottom-sheet'
import {BottomSheetSnapPoint} from '../../../modules/bottom-sheet/src/BottomSheet.types'
type A11yProps = Required<AccessibilityProps>
@@ -38,6 +39,7 @@ export type DialogControlProps = DialogControlRefProps & {
export type DialogContextProps = {
close: DialogControlProps['close']
insideDialog: boolean
snapPoint: BottomSheetSnapPoint
}
export type DialogControlOpenOptions = {