diff --git a/app.config.js b/app.config.js index a85ef0f..d9eca1a 100644 --- a/app.config.js +++ b/app.config.js @@ -77,6 +77,7 @@ const expoConfig = { }, package: 'com.safezone.onestep', versionCode: 7, + softwareKeyboardLayoutMode: 'pan', }, web: { favicon: './assets/favicon.png', diff --git a/app/(tabs)/_layout.jsx b/app/(tabs)/_layout.jsx index 8b0564d..bee5029 100644 --- a/app/(tabs)/_layout.jsx +++ b/app/(tabs)/_layout.jsx @@ -3,7 +3,10 @@ import '@/locales/index'; import { Tabs } from 'expo-router'; import React from 'react'; import { useTranslation } from 'react-i18next'; +import { verticalScale } from 'react-native-size-matters'; import MaterialIcons from 'react-native-vector-icons/MaterialIcons'; +import fontStyles from 'theme/fontStyles'; +import { Platform } from 'react-native'; const todayIcon = ({ color, size }) => ( @@ -20,6 +23,14 @@ const TabLayout = () => { { const renderCategoriesTodo = ({ item }) => { return ( - + @@ -47,22 +53,32 @@ const TodayView = () => { - - - - - - } - > - - - - + + + + + + + } + > + item.id} + contentContainerStyle={styles.flatList} + /> + + + + @@ -74,15 +90,15 @@ const styles = StyleSheet.create({ flex: 1, backgroundColor: 'white', }, - bottomContainer: { - paddingHorizontal: scale(20), - paddingTop: verticalScale(20), - }, suspenseBox: { flex: 1, justifyContent: 'center', alignItems: 'center', }, + flatList: { + paddingHorizontal: scale(20), + paddingTop: verticalScale(20), + }, }); export default TodayView; diff --git a/components/todayView/dailyTodos/DailyTodos.tsx b/components/todayView/dailyTodos/DailyTodos.tsx index 84a82e7..d33cf12 100644 --- a/components/todayView/dailyTodos/DailyTodos.tsx +++ b/components/todayView/dailyTodos/DailyTodos.tsx @@ -16,44 +16,30 @@ import { TODAYVIEW_TEXTINPUT_SUBMIT_EVENT, } from '@/utils/logEvent'; import { Icon } from '@ui-kitten/components'; -import React, { Fragment, useContext } from 'react'; +import React, { useContext } from 'react'; import { useTranslation } from 'react-i18next'; -import { - KeyboardAvoidingView, - StyleSheet, - TextInput, - View, -} from 'react-native'; +import { StyleSheet, TextInput, View } from 'react-native'; import DraggableFlatList from 'react-native-draggable-flatlist'; import { GestureHandlerRootView } from 'react-native-gesture-handler'; -import { KeyboardAccessoryView } from 'react-native-keyboard-accessory'; import DailyTodo from './dailyTodo/DailyTodo'; import { moderateScale, scale, verticalScale } from 'react-native-size-matters'; -interface DailyTodosProps { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - todosData: any; - categoryId: number; -} - -const DailyTodos: React.FC = ({ todosData, categoryId }) => { +const DailyTodos = ({ todosData, categoryId }) => { const { userId } = useContext(LoginContext); const { selectedDate } = useContext(DateContext); - // const { data: todosData } = useTodosQuery(userId); const { t } = useTranslation(); const currentTodos = useFilteredTodos(todosData, categoryId, selectedDate); - const { input, setInput, handleSubmit } = useCreateTodo( userId, categoryId, selectedDate, ); - const { isTextInputOpen, activatedCategoryId } = useContext(TextInputContext); + const { isTextInputOpen, activatedCategoryId, setTextInputOpen } = + useContext(TextInputContext); const handleDragEnd = useHandleDrag(); - const { setTextInputOpen } = useContext(TextInputContext); const handleInputSubmit = () => { handleLogEvent(TODAYVIEW_TEXTINPUT_SUBMIT_EVENT, { @@ -69,27 +55,22 @@ const DailyTodos: React.FC = ({ todosData, categoryId }) => { }; return ( - - - - item.id.toString()} - onScroll={() => handleScroll(TODAYVIEW_SCROLL_EVENT, userId)} - scrollEventThrottle={DEFAULT_SCROLL_EVENT_THROTTLE} - /> - - {isTextInputOpen && categoryId === activatedCategoryId ? ( - + + + item.id.toString()} + onScroll={() => handleScroll(TODAYVIEW_SCROLL_EVENT, userId)} + scrollEventThrottle={DEFAULT_SCROLL_EVENT_THROTTLE} + simultaneousHandlers={[]} + activationDistance={20} + containerStyle={styles.flatListContainer} + /> + + {isTextInputOpen && categoryId === activatedCategoryId && ( + = ({ todosData, categoryId }) => { autoFocus={true} /> - - ) : null} - + + )} + ); }; const styles = StyleSheet.create({ - touchableCheck: { - paddingTop: 0, - justifyContent: 'center', + container: { + flex: 1, }, - checkIcon: { - width: scale(24), - height: verticalScale(24), + mainContainer: { + flex: 1, + backgroundColor: 'white', + }, + flatListContainer: { + flex: 1, + }, + keyboardAvoidingView: { + width: '100%', + position: 'absolute', + bottom: 0, + backgroundColor: 'white', + }, + inputWrapper: { + width: '100%', + borderTopWidth: StyleSheet.hairlineWidth, + borderTopColor: colors.Gray02, + backgroundColor: 'white', }, inputContainer: { flexDirection: 'row', - justifyContent: 'center', alignItems: 'center', - paddingLeft: scale(7), + paddingHorizontal: scale(7), + paddingVertical: verticalScale(8), + }, + checkIcon: { + width: scale(24), + height: verticalScale(24), }, textInput: { - backgroundColor: colors.Gray02, flex: 1, + backgroundColor: colors.Gray02, borderRadius: moderateScale(4), marginLeft: scale(4), paddingHorizontal: scale(8), height: scale(24), fontSize: moderateScale(14), }, - keyboardInputContainer: { - borderTopWidth: 0, - justifyContent: 'center', - backgroundColor: 'white', - }, }); export default DailyTodos; diff --git a/components/todayView/dailyTodos/dailyTodo/generatedSubTodoList/GeneratedSubTodoList.tsx b/components/todayView/dailyTodos/dailyTodo/generatedSubTodoList/GeneratedSubTodoList.tsx index e476d46..54e7915 100644 --- a/components/todayView/dailyTodos/dailyTodo/generatedSubTodoList/GeneratedSubTodoList.tsx +++ b/components/todayView/dailyTodos/dailyTodo/generatedSubTodoList/GeneratedSubTodoList.tsx @@ -1,10 +1,10 @@ import React from 'react'; -import { List, ListItem } from '@ui-kitten/components'; +import { List, ListItem, Text } from '@ui-kitten/components'; import { Button } from '@ui-kitten/components'; import { useTranslation } from 'react-i18next'; import useGeneratedSubTodoList from './useGeneratedSubTodoList'; import { IconButton } from '../../../../common/molecules/IconButton'; -import { scale } from 'react-native-size-matters'; +import { moderateScale, scale } from 'react-native-size-matters'; import { StyleSheet } from 'react-native'; const GeneratedSubTodoList = ({ generatedSubTodos, setGeneratedSubTodos }) => { @@ -29,13 +29,17 @@ const GeneratedSubTodoList = ({ generatedSubTodos, setGeneratedSubTodos }) => { ); }; + const listTitle = (evaProps, item) => ( + {item.content} + ); + const renderGeneratedTodo = ({ item, index }) => { return ( listTitle(evaProps, item)} /> ); }; @@ -58,4 +62,7 @@ const styles = StyleSheet.create({ listItem: { paddingLeft: scale(40), }, + titleStyle: { + fontSize: moderateScale(13), + }, }); diff --git a/components/todayView/dailyTodos/dailyTodo/subTodoList/DailySubTodo.jsx b/components/todayView/dailyTodos/dailyTodo/subTodoList/DailySubTodo.jsx index 9a19ee4..4d0349a 100644 --- a/components/todayView/dailyTodos/dailyTodo/subTodoList/DailySubTodo.jsx +++ b/components/todayView/dailyTodos/dailyTodo/subTodoList/DailySubTodo.jsx @@ -72,20 +72,15 @@ const DailySubTodo = ({ item }) => { const accessoryRight = () => { return ; }; - const title = () => ( + const title = evaProps => ( <> - {/* {item.dueTime && ( - - {item.dueTime.split(':').slice(0, 2).join(':')} - - )} */} ); diff --git a/components/todayView/dailyTodos/dailyTodo/todoListItem/TodoListItem.tsx b/components/todayView/dailyTodos/dailyTodo/todoListItem/TodoListItem.tsx index 02fcb2c..eaaa586 100644 --- a/components/todayView/dailyTodos/dailyTodo/todoListItem/TodoListItem.tsx +++ b/components/todayView/dailyTodos/dailyTodo/todoListItem/TodoListItem.tsx @@ -1,7 +1,7 @@ import getIconFillColor from '@/utils/getIconFillColor'; import { Icon, ListItem, Text } from '@ui-kitten/components'; import React from 'react'; -import { Pressable, StyleSheet } from 'react-native'; +import { Pressable, StyleSheet, View } from 'react-native'; import { RenderItemParams } from 'react-native-draggable-flatlist'; import { Todo } from '../../../../../types/todo'; import EditableTextField from '../../../../common/molecules/EditableTextField'; @@ -74,7 +74,7 @@ const TodoListItem: React.FC = ({ }; const title = () => ( - <> + = ({ {item.dueTime.split(':').slice(0, 2).join(':')} )} - + ); return ( diff --git a/components/todayView/dailyTodos/dailyTodo/todoListItem/todoMoreMenu/TodoMoreMenu.tsx b/components/todayView/dailyTodos/dailyTodo/todoListItem/todoMoreMenu/TodoMoreMenu.tsx index 9251c78..0b4b19b 100644 --- a/components/todayView/dailyTodos/dailyTodo/todoListItem/todoMoreMenu/TodoMoreMenu.tsx +++ b/components/todayView/dailyTodos/dailyTodo/todoListItem/todoMoreMenu/TodoMoreMenu.tsx @@ -89,6 +89,7 @@ const TodoMoreMenu = ({ title= onPress={() => { handleEditPress(); + setVisible(false); }} style={styles.topMenuItem} /> @@ -98,6 +99,7 @@ const TodoMoreMenu = ({ title= onPress={() => { handleDeletePress(); + setVisible(false); }} style={styles.middleMenuItem} /> @@ -122,6 +124,7 @@ const TodoMoreMenu = ({ /> onPress={() => { handleGenerateSubTodoPress(); + setVisible(false); }} style={styles.middleMenuItem} /> @@ -133,6 +136,7 @@ const TodoMoreMenu = ({ /> onPress={() => { handleAddSubTodoPress(); + setVisible(false); }} style={styles.middleMenuItem} /> @@ -142,6 +146,7 @@ const TodoMoreMenu = ({ title= onPress={() => { handlePutTodoToInboxPress(); + setVisible(false); }} style={styles.bottomMenuItem} />