refactor: bottomsheet modal

apps/wallet-mobile/src/components/BottomSheet/BottomSheet.stories.tsx

@@ -0,0 +1,114 @@
+import {storiesOf} from '@storybook/react-native'
+import React from 'react'
+import {Button, ScrollView, StyleSheet, Text, TextInput, View} from 'react-native'
+
+import {Spacer} from '../Spacer'
+import {BottomSheet, BottomSheetRef} from './BottomSheet'
+
+storiesOf('BottomSheet', module)
+  .add('Default', () => <ComponentDefault />)
+  .add('Scroll + input (Keyboard) + extendable', () => <ComponentWithScrollAndInput />)
+
+const ComponentDefault = () => {
+  const bottomSheetRef = React.useRef<null | BottomSheetRef>(null)
+
+  const openBottomSheet = () => {
+    bottomSheetRef.current?.openBottomSheet()
+  }
+
+  const closeBottomSheet = () => {
+    bottomSheetRef.current?.closeBottomSheet()
+  }
+
+  const handleClick = () => {
+    if (bottomSheetRef.current?.isOpen) closeBottomSheet()
+    else openBottomSheet()
+  }
+
+  return (
+    <View style={{flex: 1}}>
+      <Button title="click" onPress={handleClick} />
+
+      <BottomSheet title="Fake Title" ref={bottomSheetRef} isExtendable={false}>
+        <View style={{flex: 1, alignSelf: 'stretch', paddingHorizontal: 16}}>
+          <Text style={{flex: 1}}>FAke content</Text>
+        </View>
+      </BottomSheet>
+    </View>
+  )
+}
+
+const ComponentWithScrollAndInput = () => {
+  const bottomSheetRef = React.useRef<null | BottomSheetRef>(null)
+
+  const openBottomSheet = () => {
+    bottomSheetRef.current?.openBottomSheet()
+  }
+
+  const closeBottomSheet = () => {
+    bottomSheetRef.current?.closeBottomSheet()
+  }
+
+  const handleClick = () => {
+    if (bottomSheetRef.current?.isOpen) closeBottomSheet()
+    else openBottomSheet()
+  }
+
+  return (
+    <View style={{flex: 1}}>
+      <Button title="click" onPress={handleClick} />
+
+      <BottomSheet title="Fake Title" ref={bottomSheetRef}>
+        <View style={{flex: 1, alignSelf: 'stretch', paddingHorizontal: 16}}>
+          <ScrollView style={{flex: 1, alignSelf: 'stretch', borderColor: 'grey', borderWidth: 1}}>
+            <Text style={{flex: 1}}>FAke content</Text>
+
+            <Text style={{flex: 1}}>FAke content</Text>
+
+            <Text style={{flex: 1}}>FAke content</Text>
+
+            <Text style={{flex: 1}}>FAke content</Text>
+
+            <Text style={{flex: 1}}>FAke content</Text>
+
+            <Text style={{flex: 1}}>FAke content</Text>
+
+            <Text style={{flex: 1}}>FAke content</Text>
+
+            <Text style={{flex: 1}}>FAke content</Text>
+
+            <Text style={{flex: 1}}>FAke content</Text>
+
+            <Text style={{flex: 1}}>FAke content</Text>
+
+            <Text style={{flex: 1}}>FAke content</Text>
+
+            <Text style={{flex: 1}}>FAke content</Text>
+
+            <Text style={{flex: 1}}>FAke content</Text>
+
+            <Text style={{flex: 1}}>FAke content</Text>
+
+            <Text style={{flex: 1}}>FAke content</Text>
+
+            <Text style={{flex: 1}}>FAke content</Text>
+          </ScrollView>
+
+          <Spacer height={20} />
+
+          <TextInput style={styles.input} placeholder="Fake input" />
+
+          <Spacer height={20} />
+        </View>
+      </BottomSheet>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  input: {
+    alignSelf: 'stretch',
+    height: 40,
+    borderWidth: 1,
+  },
+})

apps/wallet-mobile/src/components/BottomSheet/BottomSheet.tsx

@@ -0,0 +1,145 @@
+import React from 'react'
+import {KeyboardAvoidingView, Modal, NativeTouchEvent, Platform, StyleSheet, Text, View} from 'react-native'
+
+import {Spacer} from '../Spacer'
+
+type BottomSheetProps = {
+  children: React.ReactNode
+  height?: number
+  debug?: boolean
+  isExtendable?: boolean
+  maxHeight?: `${number}%` | number
+  title: string
+}
+
+export type BottomSheetRef = {
+  openBottomSheet: () => void
+  closeBottomSheet: () => void
+  isOpen: boolean
+  onResponderMove: ({nativeEvent}: {nativeEvent: NativeTouchEvent}) => void // in case it needs to be used outside
+}
+
+export const BottomSheet = React.forwardRef<BottomSheetRef, BottomSheetProps>(
+  ({children, height = 300, debug = false, maxHeight = '80%', title, isExtendable = true}, ref) => {
+    const [isOpen, setIsOpen] = React.useState(false)
+    const [isExtended, setExtended] = React.useState(false)
+    const [swipeLocationY, setSwipeLocationY] = React.useState(height)
+    const [upDirectionCount, setUpDirectionCount] = React.useState(0)
+    const [downDirectionCount, setDownDirectionCount] = React.useState(0)
+
+    React.useImperativeHandle(ref, () => ({
+      openBottomSheet,
+      closeBottomSheet,
+      isOpen,
+      onResponderMove,
+    }))
+
+    const openBottomSheet = () => {
+      setIsOpen(true)
+    }
+
+    const closeBottomSheet = () => {
+      if (isExtended) setExtended(false)
+      setIsOpen(false)
+    }
+
+    const extendBottomSheet = () => {
+      setExtended(true)
+    }
+
+    const cleanDirectionCount = () => {
+      setDownDirectionCount(0)
+      setUpDirectionCount(0)
+    }
+
+    const onResponderMove = ({nativeEvent}: {nativeEvent: NativeTouchEvent}) => {
+      if (swipeLocationY < nativeEvent.locationY) {
+        const newState = downDirectionCount + 1
+        if (newState > 4) {
+          closeBottomSheet()
+          cleanDirectionCount()
+        } else setDownDirectionCount(newState)
+      } else if (swipeLocationY > nativeEvent.locationY) {
+        const newState = upDirectionCount + 1
+        if (newState > 4) {
+          extendBottomSheet()
+          cleanDirectionCount()
+        } else setUpDirectionCount(newState)
+      }
+      setSwipeLocationY(nativeEvent.locationY)
+    }
+
+    return (
+      <>
+        {isOpen && <View style={styles.backdrop} />}
+
+        <Modal animationType="slide" visible={debug || isOpen} onRequestClose={closeBottomSheet} transparent>
+          <KeyboardAvoidingView style={styles.container} behavior={Platform.OS === 'ios' ? 'height' : undefined}>
+            <View style={[styles.sheet, {height: isExtended && isExtendable ? maxHeight : height}]}>
+              <Header title={title} onResponderMove={onResponderMove} />
+
+              {children}
+            </View>
+          </KeyboardAvoidingView>
+        </Modal>
+      </>
+    )
+  },
+)
+
+const Header = ({
+  onResponderMove,
+  title,
+}: {
+  onResponderMove: ({nativeEvent}: {nativeEvent: NativeTouchEvent}) => void
+  title: string
+}) => {
+  return (
+    <View onResponderMove={onResponderMove} onStartShouldSetResponder={() => true} style={styles.header}>
+      <Spacer height={8} />
+
+      <SliderIndicator />
+
+      <Spacer height={8} />
+
+      <Text style={styles.title}>{title}</Text>
+    </View>
+  )
+}
+
+const SliderIndicator = () => <View style={styles.slider} />
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+  },
+  sheet: {
+    backgroundColor: 'white',
+    borderTopRightRadius: 20,
+    borderTopLeftRadius: 20,
+    alignItems: 'center',
+    alignSelf: 'stretch',
+  },
+  title: {
+    fontWeight: '500',
+    fontFamily: 'Rubik-Medium',
+    fontSize: 20,
+    padding: 16,
+  },
+  header: {
+    alignItems: 'center',
+    alignSelf: 'stretch',
+  },
+  slider: {
+    height: 4,
+    backgroundColor: 'black',
+    width: 32,
+    borderRadius: 10,
+  },
+})

apps/wallet-mobile/src/components/BottomSheet/index.ts

@@ -0,0 +1 @@
+export * from './BottomSheet'

apps/wallet-mobile/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from './Analytics'
 export * from './Banner'
+export * from './BottomSheet'
 export * from './BottomSheetModal'
 export * from './Boundary'
 export * from './BulletPointItem'

apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/ConfirmTxScreen.tsx

@@ -3,8 +3,7 @@ import React from 'react'
 import {StyleSheet, View, ViewProps} from 'react-native'
 import {SafeAreaView} from 'react-native-safe-area-context'
 
-import {Button} from '../../../../components'
-import {BottomSheetModal} from '../../../../components/BottomSheetModal'
+import {BottomSheet, BottomSheetRef, Button, Spacer} from '../../../../components'
 import {LoadingOverlay} from '../../../../components/LoadingOverlay'
 import {useWalletNavigation} from '../../../../navigation'
 import {useSelectedWallet} from '../../../../SelectedWallet'
@@ -17,7 +16,15 @@ import {ConfirmTx} from './ConfirmTx'
 import {TransactionSummary} from './TransactionSummary'
 
 export const ConfirmTxScreen = () => {
-  const [confirmationModal, setConfirmationModal] = React.useState<boolean>(false)
+  const bottomSheetRef = React.useRef<null | BottomSheetRef>(null)
+
+  const openBottomSheet = () => {
+    bottomSheetRef.current?.openBottomSheet()
+  }
+
+  const closeBottomSheet = () => {
+    bottomSheetRef.current?.closeBottomSheet()
+  }
 
   const strings = useStrings()
   const wallet = useSelectedWallet()
@@ -62,27 +69,29 @@ export const ConfirmTxScreen = () => {
               authWithOs()
               return
             }
-            setConfirmationModal(true)
+            openBottomSheet()
           }}
         />
       </Actions>
 
-      <BottomSheetModal
-        isOpen={confirmationModal}
+      <BottomSheet
+        height={wallet.isHW ? 430 : 350}
+        ref={bottomSheetRef}
         title={wallet.isHW ? strings.chooseConnectionMethod : strings.signTransaction}
-        onClose={() => {
-          setConfirmationModal(false)
-        }}
-        contentContainerStyle={{justifyContent: 'space-between'}}
+        isExtendable={false}
       >
-        <ConfirmTx
-          wallet={wallet}
-          unsignedTx={unsignedTx}
-          datum={{data: createOrder.datum}}
-          onSuccess={() => resetToTxHistory()}
-          onCancel={() => setConfirmationModal(false)}
-        />
-      </BottomSheetModal>
+        <View style={styles.modalContent}>
+          <ConfirmTx
+            wallet={wallet}
+            unsignedTx={unsignedTx}
+            datum={{data: createOrder.datum}}
+            onSuccess={resetToTxHistory}
+            onCancel={closeBottomSheet}
+          />
+
+          <Spacer height={16} />
+        </View>
+      </BottomSheet>
 
       <LoadingOverlay loading={txIsLoading} />
     </SafeAreaView>
@@ -102,4 +111,9 @@ const styles = StyleSheet.create({
   actions: {
     paddingVertical: 16,
   },
+  modalContent: {
+    flex: 1,
+    alignSelf: 'stretch',
+    paddingHorizontal: 16,
+  },
 })