menu modal

src/state/models/shell-ui.ts

@@ -14,6 +14,18 @@ export class ConfirmModal {
   }
 }
 
+export class MenuModal {
+  name = 'menu'
+
+  constructor(
+    public title: string,
+    public options: any, // TODO: Before commit string | (() => JSX.Element),
+    public onPressConfirm: () => void | Promise<void>,
+  ) {
+    makeAutoObservable(this)
+  }
+}
+
 export class EditProfileModal {
   name = 'edit-profile'
 
@@ -98,6 +110,7 @@ export class ShellUiModel {
     | ServerInputModal
     | ReportPostModal
     | ReportAccountModal
+    | MenuModal
     | undefined
   isLightboxActive = false
   activeLightbox: ProfileImageLightbox | ImagesLightbox | undefined
@@ -140,7 +153,9 @@ export class ShellUiModel {
       | EditProfileModal
       | ServerInputModal
       | ReportPostModal
-      | ReportAccountModal,
+      | ReportAccountModal
+      | MenuModal,
+    // TODO: Create a MODALS interface, don't repeat
   ) {
     this.isModalActive = true
     this.activeModal = modal

src/view/com/modals/Menu.tsx

@@ -0,0 +1,127 @@
+import React, {useState} from 'react'
+import {
+  ActivityIndicator,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native'
+import LinearGradient from 'react-native-linear-gradient'
+import {Text} from '../util/text/Text'
+import {useStores} from '../../../state'
+import {s, colors, gradients} from '../../lib/styles'
+import {ErrorMessage} from '../util/error/ErrorMessage'
+
+export const snapPoints = ['25%']
+
+export function Component({
+  title,
+  // message,
+  options,
+  onPressConfirm,
+}: {
+  title: string
+  // message: string | (() => JSX.Element)
+  options: any // TODO Before commit
+  onPressConfirm: () => void | Promise<void> // TODO: remove?
+}) {
+  console.log('-meeennuuu')
+  const store = useStores()
+  const [isProcessing, setIsProcessing] = useState<boolean>(false)
+  const [error, setError] = useState<string>('')
+  // const onPress = async () => {
+  //   setError('')
+  //   setIsProcessing(true)
+  //   try {
+  //     await onPressConfirm()
+  //     store.shell.closeModal()
+  //     return
+  //   } catch (e: any) {
+  //     setError(e.toString())
+  //     setIsProcessing(false)
+  //   }
+  // }
+  return (
+    <View style={[s.flex1, s.pl10, s.pr10, {backgroundColor: 'white'}]}>
+      {/* <Text style={styles.title}>{title}</Text> */}
+      {/* {typeof message === 'string' ? (
+        <Text style={styles.description}>{message}</Text>
+      ) : (
+        message()
+      )} */}
+      <View style={styles.optionsContainer}>
+        {options.map(({Icon, text, onPress, danger}) => {
+          return (
+            <TouchableOpacity onPress={onPress} style={styles.option}>
+              <Icon />
+              <Text
+                style={[
+                  styles.description,
+                  danger ? {color: colors.red5} : {},
+                ]}>
+                {text}
+              </Text>
+            </TouchableOpacity>
+          )
+        })}
+      </View>
+      {/* {error ? (
+        <View style={s.mt10}>
+          <ErrorMessage message={error} />
+        </View>
+      ) : undefined} */}
+      {/* {isProcessing ? (
+        <View style={[styles.btn, s.mt10]}>
+          <ActivityIndicator />
+        </View>
+      ) : (
+        <TouchableOpacity style={s.mt10} onPress={onPress}>
+          <LinearGradient
+            colors={[gradients.blueLight.start, gradients.blueLight.end]}
+            start={{x: 0, y: 0}}
+            end={{x: 1, y: 1}}
+            style={[styles.btn]}>
+            <Text style={[s.white, s.bold, s.f18]}>Confirm</Text>
+          </LinearGradient>
+        </TouchableOpacity>
+      )} */}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  title: {
+    textAlign: 'center',
+    fontWeight: 'bold',
+    fontSize: 24,
+    marginBottom: 12,
+  },
+  description: {
+    // textAlign: 'center',
+    fontSize: 18,
+    color: colors.gray5,
+    // marginBottom: 10,
+  },
+  btn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    borderRadius: 32,
+    padding: 14,
+    backgroundColor: colors.gray1,
+  },
+  option: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    columnGap: 10,
+    marginVertical: 8,
+  },
+  optionsContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 22,
+    // backgroundColor: 'red',
+    marginBottom: 30,
+  },
+})

src/view/com/modals/Modal.tsx

@@ -7,6 +7,7 @@ import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop'
 
 import * as models from '../../../state/models/shell-ui'
 
+import * as MenuModal from './Menu'
 import * as ConfirmModal from './Confirm'
 import * as EditProfileModal from './EditProfile'
 import * as ServerInputModal from './ServerInput'
@@ -46,6 +47,11 @@ export const Modal = observer(function Modal() {
         {...(store.shell.activeModal as models.ConfirmModal)}
       />
     )
+  } else if (store.shell.activeModal?.name === 'menu') {
+    snapPoints = MenuModal.snapPoints
+    element = (
+      <MenuModal.Component {...(store.shell.activeModal as models.MenuModal)} />
+    )
   } else if (store.shell.activeModal?.name === 'edit-profile') {
     snapPoints = EditProfileModal.snapPoints
     element = (