11import type { FC } from 'react' ;
22import { useEffect , useRef , useState } from 'react' ;
33import { useTranslation } from 'react-i18next' ;
4- import type { BottomDrawerMethods } from 'react-native-animated-bottom-drawer' ;
5- import BottomDrawer from 'react-native-animated-bottom-drawer' ;
64import { Box } from 'react-native-flex-layout' ;
75import { Button , RadioButton , Text , useTheme } from 'react-native-paper' ;
86
97import { ScrollView , View } from 'react-native' ;
108
9+ import useOrientation , { Orientation } from '@/hooks/useOrientation' ;
10+
1111import { spacing } from '@/constants' ;
1212
13+ import type { BottomSheetMethods } from '@devvie/bottom-sheet' ;
14+ import BottomSheet from '@devvie/bottom-sheet' ;
15+
1316export interface ChangeEnumValueModalProps {
1417 isOpen ?: boolean ;
1518 onClose ?: ( ) => void ;
@@ -18,7 +21,6 @@ export interface ChangeEnumValueModalProps {
1821 possibleValues : PossibleEnumValues ;
1922 title ?: string ;
2023 description ?: string ;
21- extraHeight ?: number ;
2224}
2325
2426export type PossibleEnumValues = { label : string ; value : string } [ ] ;
@@ -30,15 +32,12 @@ const ChangeEnumValueModal: FC<ChangeEnumValueModalProps> = ({
3032 defaultValue,
3133 onChange : onSave ,
3234 onClose,
33- extraHeight,
3435 possibleValues,
3536} ) => {
3637 const theme = useTheme ( ) ;
37- const drawerRef = useRef < BottomDrawerMethods > ( null ) ;
38+ const drawerRef = useRef < BottomSheetMethods > ( null ) ;
3839 const { t } = useTranslation ( ) ;
3940
40- const [ initialHeight , setInitialHeight ] = useState < number > ( 0 ) ;
41-
4241 const [ value , setValue ] = useState < string > ( defaultValue ?? '' ) ;
4342 const [ wasModified , setWasModified ] = useState < boolean > ( false ) ;
4443
@@ -71,44 +70,27 @@ const ChangeEnumValueModal: FC<ChangeEnumValueModalProps> = ({
7170 }
7271 } , [ defaultValue , wasModified ] ) ;
7372
73+ const { orientation } = useOrientation ( ) ;
74+
7475 return (
75- < BottomDrawer
76+ < BottomSheet
7677 ref = { drawerRef }
77- overDrag
78- customStyles = { {
79- container : {
80- backgroundColor : theme . colors . surface ,
81- } ,
82- handleContainer : {
83- backgroundColor : theme . colors . surfaceVariant ,
84- minHeight : 35 ,
85- borderTopLeftRadius : 20 ,
86- borderTopRightRadius : 20 ,
87- } ,
88- handle : {
89- backgroundColor : theme . colors . surfaceDisabled ,
90- width : 40 ,
91- height : 5 ,
92- borderRadius : 5 ,
93- } ,
94- } }
95- initialHeight = { initialHeight }
9678 onClose = { handleCancel }
79+ style = { {
80+ borderTopLeftRadius : 20 ,
81+ borderTopRightRadius : 20 ,
82+ backgroundColor : theme . colors . surface ,
83+ left : orientation === Orientation . LANDSCAPE ? '25%' : 0 ,
84+ right : orientation === Orientation . LANDSCAPE ? '25%' : 0 ,
85+ width : orientation === Orientation . LANDSCAPE ? '50%' : '100%' ,
86+ } }
87+ openDuration = { 450 }
88+ closeDuration = { 300 }
9789 >
9890 < View
9991 style = { {
10092 paddingHorizontal : spacing * 2 ,
10193 paddingTop : spacing * 2 ,
102- paddingBottom : spacing * 3 ,
103- } }
104- onLayout = { e => {
105- const { height, y } = e . nativeEvent . layout ;
106- const heightValue = height + y + ( extraHeight ?? 0 ) ;
107-
108- drawerRef . current ?. snapToPosition ( heightValue , {
109- resetLastPosition : false ,
110- } ) ;
111- setInitialHeight ( heightValue ) ;
11294 } }
11395 >
11496 < View
@@ -167,7 +149,7 @@ const ChangeEnumValueModal: FC<ChangeEnumValueModalProps> = ({
167149 </ Button >
168150 </ View >
169151 </ View >
170- </ BottomDrawer >
152+ </ BottomSheet >
171153 ) ;
172154} ;
173155
0 commit comments