Skip to content

Commit

Permalink
feat(mobile): quick add new category from transaction form (#221)
Browse files Browse the repository at this point in the history 
https://github.com/user-attachments/assets/f10ccbce-07b0-4fac-8d53-63c6e4ac443d
  • Loading branch information
@bkdev98
bkdev98 committed Aug 14, 2024
1 parent 664df30 commit c55c95c
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 52 deletions.
54 changes: 28 additions & 26 deletions apps/mobile/components/transaction/select-account-field.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { useLingui } from '@lingui/react'
import * as Haptics from 'expo-haptics'
import { useRef } from 'react'
import { useController } from 'react-hook-form'
import { Keyboard } from 'react-native'
import { Keyboard, View } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { FullWindowOverlay } from 'react-native-screens'

Expand Down Expand Up @@ -86,41 +86,43 @@ export function SelectAccountField({
data={walletAccounts}
numColumns={4}
keyExtractor={(i) => i.id}
contentContainerClassName="px-4 gap-4"
columnWrapperClassName="gap-2"
columnWrapperClassName="flex-wrap"
contentContainerClassName="px-2"
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
keyboardShouldPersistTaps="handled"
keyboardDismissMode="on-drag"
ListHeaderComponent={
<Text className="pt-2 text-center font-medium text-base">
<Text className="py-2 text-center font-medium text-base">
{t(i18n)`Wallet Accounts`}
</Text>
}
contentContainerStyle={{ paddingBottom: bottom + 16 }}
renderItem={({ item }) => (
<Button
size="icon"
className="flex h-20 flex-1 flex-grow flex-col gap-2 px-2"
variant={value === item ? 'secondary' : 'ghost'}
onPress={async () => {
Haptics.selectionAsync()
sheetRef.current?.close()
await sleep(500)
onChange(item.id)
onBlur()
onSelect?.(item)
}}
>
<GenericIcon
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
name={item.icon as any}
className="size-8 text-foreground"
/>
<Text className="!text-sm line-clamp-1 text-center text-muted-foreground">
{item.name}
</Text>
</Button>
<View className="w-[25%] p-1.5">
<Button
size="icon"
className="flex h-20 w-full flex-1 flex-grow flex-col gap-2 px-2"
variant={value === item ? 'secondary' : 'ghost'}
onPress={async () => {
Haptics.selectionAsync()
sheetRef.current?.close()
await sleep(500)
onChange(item.id)
onBlur()
onSelect?.(item)
}}
>
<GenericIcon
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
name={item.icon as any}
className="size-8 text-foreground"
/>
<Text className="!text-sm line-clamp-1 text-center text-muted-foreground">
{item.name}
</Text>
</Button>
</View>
)}
/>
</BottomSheetModal>
Expand Down
86 changes: 60 additions & 26 deletions apps/mobile/components/transaction/select-category-field.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,15 @@ import {
import { t } from '@lingui/macro'
import { useLingui } from '@lingui/react'
import * as Haptics from 'expo-haptics'
import { useRef } from 'react'
import { useCallback, useRef, useState } from 'react'
import { useController } from 'react-hook-form'
import { FlatList, Keyboard, View } from 'react-native'

import { useColorScheme } from '@/hooks/useColorScheme'
import { theme } from '@/lib/theme'
import { useCategoryList } from '@/stores/category/hooks'
import { Link, useFocusEffect } from 'expo-router'
import { PlusIcon } from 'lucide-react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { FullWindowOverlay } from 'react-native-screens'
import GenericIcon from '../common/generic-icon'
Expand All @@ -29,13 +31,23 @@ export function SelectCategoryField({
const { bottom } = useSafeAreaInsets()
const { categories = [], isLoading } = useCategoryList()
const { colorScheme } = useColorScheme()
const [shouldReOpen, setShouldReOpen] = useState(false)

const sheetRef = useRef<BottomSheetModal>(null)
const { i18n } = useLingui()
const {
field: { onChange, onBlur, value },
} = useController({ name: 'categoryId' })

useFocusEffect(
useCallback(() => {
if (shouldReOpen) {
sheetRef.current?.present()
setShouldReOpen(false)
}
}, [shouldReOpen]),
)

const selectedCategory = categories?.find((category) => category.id === value)

const incomeCategories = categories.filter(
Expand Down Expand Up @@ -113,31 +125,53 @@ export function SelectCategoryField({
keyExtractor={(i) => i.id}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
renderItem={({ item }) => (
<View className="w-[25%] p-1.5">
<Button
size="icon"
className="flex h-20 w-full flex-1 flex-grow flex-col gap-2 px-2"
variant={value === item ? 'secondary' : 'ghost'}
onPress={async () => {
Haptics.selectionAsync()
sheetRef.current?.close()
await sleep(500)
onChange(item.id)
onBlur()
onSelect?.(item)
}}
>
<GenericIcon
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
name={item.icon as any}
className="size-8 text-foreground"
/>
<Text className="!text-sm line-clamp-1 text-center text-muted-foreground">
{item.name}
</Text>
</Button>
</View>
renderItem={({ item, index: idx }) => (
<>
<View className="w-[25%] items-center justify-center p-1.5">
<Button
size="icon"
className="flex h-20 w-full flex-1 flex-grow flex-col gap-2 px-2"
variant={value === item ? 'secondary' : 'ghost'}
onPress={async () => {
Haptics.selectionAsync()
sheetRef.current?.close()
await sleep(500)
onChange(item.id)
onBlur()
onSelect?.(item)
}}
>
<GenericIcon
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
name={item.icon as any}
className="size-8 text-foreground"
/>
<Text className="!text-sm line-clamp-1 text-center text-muted-foreground">
{item.name}
</Text>
</Button>
</View>

{idx === section.data.length - 1 && (
<View className="w-[25%] items-center justify-center p-1.5">
<Link href="/category/new-category" asChild>
<Button
size="icon"
variant="outline"
className="h-16 w-16 items-center justify-center border-dashed"
onPress={async () => {
Haptics.selectionAsync()
sheetRef.current?.close()
await sleep(500)
setShouldReOpen(true)
}}
>
<PlusIcon className="size-6 text-muted-foreground" />
</Button>
</Link>
</View>
)}
</>
)}
/>
) : null
Expand Down

0 comments on commit c55c95c

Please sign in to comment.