From 75659dd72ee347bf8ab06e4c024b911019a10cf2 Mon Sep 17 00:00:00 2001 From: Mugi Khan Date: Tue, 17 Dec 2024 23:52:33 +0200 Subject: [PATCH] Cleanup --- .../app/_layout.tsx | 13 +- .../app/search_modal.tsx | 4 +- .../library/widgets/AutoCompleteWidget.tsx | 130 +++++++----------- .../library/widgets/HeaderWidget.tsx | 23 ++-- .../library/widgets/SearchBarWidget.tsx | 21 ++- 5 files changed, 95 insertions(+), 96 deletions(-) diff --git a/demos/react-native-supabase-todolist/app/_layout.tsx b/demos/react-native-supabase-todolist/app/_layout.tsx index dc3ce684..941d4095 100644 --- a/demos/react-native-supabase-todolist/app/_layout.tsx +++ b/demos/react-native-supabase-todolist/app/_layout.tsx @@ -1,7 +1,9 @@ -import { Stack } from 'expo-router'; +import { router, Stack } from 'expo-router'; import React, { useMemo } from 'react'; import { useSystem } from '../library/powersync/system'; import { PowerSyncContext } from '@powersync/react-native'; +import { Pressable } from 'react-native'; +import { MaterialIcons } from '@expo/vector-icons'; /** * This App uses a nested navigation stack. @@ -33,6 +35,15 @@ const HomeLayout = () => { ( + { + router.back(); + }}> + + + ), presentation: 'fullScreenModal' }} /> diff --git a/demos/react-native-supabase-todolist/app/search_modal.tsx b/demos/react-native-supabase-todolist/app/search_modal.tsx index 9f065f31..6024a6ae 100644 --- a/demos/react-native-supabase-todolist/app/search_modal.tsx +++ b/demos/react-native-supabase-todolist/app/search_modal.tsx @@ -1,13 +1,11 @@ -import { Stack } from 'expo-router'; import { StatusBar } from 'expo-status-bar'; -import { StyleSheet, Text, View } from 'react-native'; +import { StyleSheet, View } from 'react-native'; import { SearchBarWidget } from '../library/widgets/SearchBarWidget'; export default function Modal() { return ( - ); diff --git a/demos/react-native-supabase-todolist/library/widgets/AutoCompleteWidget.tsx b/demos/react-native-supabase-todolist/library/widgets/AutoCompleteWidget.tsx index 203c9c1f..bbc06444 100644 --- a/demos/react-native-supabase-todolist/library/widgets/AutoCompleteWidget.tsx +++ b/demos/react-native-supabase-todolist/library/widgets/AutoCompleteWidget.tsx @@ -1,107 +1,71 @@ -import { View, StyleSheet, TouchableOpacity } from 'react-native'; -import { Card, Input, ListItem, Text } from '@rneui/themed'; +import { View, StyleSheet } from 'react-native'; +import { Input, ListItem } from '@rneui/themed'; import React, { useState } from 'react'; -import { router } from 'expo-router'; +import { IconNode } from '@rneui/base'; export interface AutocompleteWidgetProps { - origValue: string; - label?: string; data: any[]; onChange: (value: string) => void; - // origOnChange: (value: string) => void; - icon?: string; - style?: object; - menuStyle?: object; - right?: object; - left?: object; + placeholder?: string; + onPress: (id: string) => void; + leftIcon?: IconNode; } -export const Autocomplete: React.FC = ({ - origValue, - label, - data, - onChange, - // origOnChange, - icon, - style, - menuStyle, - right, - left -}) => { - const [value, setValue] = useState(origValue); +export const Autocomplete: React.FC = ({ data, onChange, placeholder, onPress, leftIcon }) => { + const [value, setValue] = useState(''); const [menuVisible, setMenuVisible] = useState(false); - const [filteredData, setFilteredData] = useState([]); - const filterData = (text: string) => { - return data.filter((val: any) => val?.toLowerCase()?.indexOf(text?.toLowerCase()) > -1); - }; return ( - - + + { - if (value.length === 0) { + if (value?.length === 0) { setMenuVisible(true); } }} + leftIcon={leftIcon} + placeholder={placeholder} onBlur={() => setMenuVisible(false)} - label={label} - // right={right} - // left={left} - // style={styles.input} + underlineColorAndroid={'transparent'} + inputContainerStyle={{ borderBottomWidth: 0 }} onChangeText={(text) => { - // origOnChange(text); onChange(text); - // if (text && text.length > 0) { - // setFilteredData(filterData(text)); - // } else if (text && text.length === 0) { - // setFilteredData(data); - // } setMenuVisible(true); setValue(text); }} - // value={value} + containerStyle={{ + borderColor: 'black', + borderWidth: 1, + borderRadius: 4, + height: 48, + backgroundColor: 'white' + }} /> {menuVisible && ( - + {data.map((val, index) => ( - { - router.push({ - pathname: 'views/todos/edit/[id]', - params: { id: val.id } - }); - }}> - - {val.listName && {val.listName}} + setMenuVisible(false); + onPress(val.id); + }} + style={{ paddingBottom: 8 }}> + + {val.listName && ( + {val.listName} + )} {val.todoName && ( - + {'\u2022'} {val.todoName} - + )} - - - // { - // setValue(val); - // setMenuVisible(false); - // }} - // // title={datum} - // > - // - // {val} - // - // + + + ))} )} @@ -110,12 +74,20 @@ export const Autocomplete: React.FC = ({ }; const styles = StyleSheet.create({ - input: { - flexDirection: 'row', + container: { + flexDirection: 'column', flex: 1, flexGrow: 1, - width: '100%', - alignItems: 'center', - justifyContent: 'flex-start' + marginHorizontal: 8 + }, + inputContainer: { + flexDirection: 'row', + flex: 0, + marginVertical: 8 + }, + menuContainer: { + flex: 2, + flexGrow: 1, + flexDirection: 'column' } }); diff --git a/demos/react-native-supabase-todolist/library/widgets/HeaderWidget.tsx b/demos/react-native-supabase-todolist/library/widgets/HeaderWidget.tsx index 52354d66..47e9ea9d 100644 --- a/demos/react-native-supabase-todolist/library/widgets/HeaderWidget.tsx +++ b/demos/react-native-supabase-todolist/library/widgets/HeaderWidget.tsx @@ -5,6 +5,7 @@ import { Icon, Header } from '@rneui/themed'; import { useStatus } from '@powersync/react'; import { DrawerActions } from '@react-navigation/native'; import { useSystem } from '../powersync/system'; +import { usePathname } from 'expo-router'; export const HeaderWidget: React.FC<{ title?: string; @@ -15,6 +16,8 @@ export const HeaderWidget: React.FC<{ const status = useStatus(); const { title } = props; + + const pathName = usePathname(); return (
- { - router.push('search_modal'); - }} - /> + {pathName.includes('lists') && ( + { + router.push('search_modal'); + }} + /> + )} = () => { const [searchResults, setSearchResults] = React.useState([]); - const [value, setValue] = React.useState(null); - // const navigate = useNavigate(); const powersync = usePowerSync(); const handleInputChange = async (value: string) => { @@ -36,5 +35,19 @@ export const SearchBarWidget: React.FC = () => { } }; - return ; + return ( + { + router.back(); + router.push({ + pathname: 'views/todos/edit/[id]', + params: { id: id } + }); + }} + /> + ); };