Merge pull request #1930 from ever-co/bug/timer-screen-teams-dropdown…

…-and-estimate-task Bug/timer screen teams dropdown and estimate task
ever-co · Dec 1, 2023 · 55c0307 · 55c0307
2 parents ee7cabe + e924f3f
commit 55c0307
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 18 deletions.
diff --git a/apps/mobile/app/components/TeamDropdown/DropDownSection.tsx b/apps/mobile/app/components/TeamDropdown/DropDownSection.tsx
@@ -41,10 +41,18 @@ const DropDownSection: FC<Props> = observer(function DropDownSection({
 
 	const others = teams.filter((t) => t.id !== activeTeamId);
 
-	const { colors } = useAppTheme();
+	const { colors, dark } = useAppTheme();
 	return (
 		<View
-			style={[styles.mainContainer, { backgroundColor: colors.background, shadowColor: 'rgba(0, 0, 0, 0.12)' }]}
+			style={[
+				styles.mainContainer,
+				{
+					backgroundColor: colors.background,
+					shadowColor: 'rgba(0, 0, 0, 0.12)',
+					borderWidth: dark ? 1 : 0,
+					borderColor: colors.border
+				}
+			]}
 		>
 			{/* <View style={styles.indDropDown}>
 				<View style={{ flexDirection: "row", alignItems: "center" }}>

diff --git a/apps/mobile/app/screens/Authenticated/TeamScreen/components/ListCardItem.tsx b/apps/mobile/app/screens/Authenticated/TeamScreen/components/ListCardItem.tsx
@@ -2,7 +2,7 @@
 /* eslint-disable react-native/no-color-literals */
 /* eslint-disable react-native/no-inline-styles */
 import React, { useState } from 'react';
-import { View, ViewStyle, TouchableOpacity, StyleSheet, TouchableWithoutFeedback, Platform } from 'react-native';
+import { View, ViewStyle, TouchableOpacity, StyleSheet, TouchableWithoutFeedback } from 'react-native';
 import { Ionicons, Entypo } from '@expo/vector-icons';
 
 // COMPONENTS
@@ -87,14 +87,7 @@ export const ListItemContent: React.FC<IcontentProps> = observer(({ memberInfo,
 					</View>
 				</View>
 				<View style={[styles.times, { borderTopColor: colors.divider }]}>
-					<TouchableWithoutFeedback
-						onPress={(event) => {
-							if (Platform.OS === 'android' && taskEdition.estimateEditMode) {
-								event.stopPropagation();
-								taskEdition.setEstimateEditMode(false);
-							}
-						}}
-					>
+					<TouchableWithoutFeedback>
 						<View
 							style={{
 								flexDirection: 'row',
@@ -114,7 +107,11 @@ export const ListItemContent: React.FC<IcontentProps> = observer(({ memberInfo,
 							</View>
 
 							{memberInfo.memberTask && taskEdition.estimateEditMode ? (
-								<View style={styles.estimate} ref={clickOutsideTaskEstimationInputRef}>
+								<View
+									style={styles.estimate}
+									collapsable={false}
+									ref={clickOutsideTaskEstimationInputRef}
+								>
 									<EstimateTime
 										setEditEstimate={taskEdition.setEstimateEditMode}
 										currentTask={memberInfo.memberTask}

diff --git a/apps/mobile/app/screens/Authenticated/TimerScreen/components/EstimateTime.tsx b/apps/mobile/app/screens/Authenticated/TimerScreen/components/EstimateTime.tsx
@@ -8,16 +8,18 @@ import { secondsToTime } from '../../../../helpers/date';
 import { typography, useAppTheme } from '../../../../theme';
 import { useTeamTasks } from '../../../../services/hooks/features/useTeamTasks';
 import { ITeamTask } from '../../../../services/interfaces/ITask';
+import { useClickOutside } from 'react-native-click-outside';
 
 interface Props {
 	setEditEstimate?: (value: boolean) => unknown;
 	currentTask: ITeamTask;
 	setEstimateTime?: (value: number) => unknown;
+	timerScreen?: boolean;
 }
-const EstimateTime: FC<Props> = ({ setEditEstimate, currentTask, setEstimateTime }) => {
+const EstimateTime: FC<Props> = ({ setEditEstimate, currentTask, setEstimateTime, timerScreen }) => {
 	// Hooks
 	const { updateTask } = useTeamTasks();
-	const { colors } = useAppTheme();
+	const { colors, dark } = useAppTheme();
 
 	// STATES
 	const textInputRef = useRef(null);
@@ -26,6 +28,18 @@ const EstimateTime: FC<Props> = ({ setEditEstimate, currentTask, setEstimateTime
 	const [isLoading, setIsLoading] = useState<boolean>(false);
 	const [showCheckIcon, setShowCheckIcon] = useState<boolean>(false);
 
+	const clickOutsideTaskEstimationInputRef = useClickOutside<View>(() => outsideClickInTimerScreen());
+
+	const outsideClickInTimerScreen = () => {
+		setShowCheckIcon(false);
+		textInputRef?.current?.blur();
+		const { h, m } = secondsToTime(currentTask?.estimate || 0);
+		setEstimate({
+			hours: h.toString(),
+			minutes: m.toString()
+		});
+	};
+
 	useEffect(() => {
 		const { h, m } = secondsToTime(currentTask?.estimate || 0);
 		setEstimate({
@@ -127,7 +141,7 @@ const EstimateTime: FC<Props> = ({ setEditEstimate, currentTask, setEstimateTime
 	};
 
 	return (
-		<View style={[styles.estimate, {}]}>
+		<View style={[styles.estimate, {}]} collapsable={false} ref={timerScreen && clickOutsideTaskEstimationInputRef}>
 			<View>
 				<TextInput
 					ref={textInputRef}
@@ -174,8 +188,22 @@ const EstimateTime: FC<Props> = ({ setEditEstimate, currentTask, setEstimateTime
 				</View>
 			</View>
 			<Text style={[styles.suffix, { color: colors.primary }]}>{' m'}</Text>
-			{showCheckIcon && <Feather size={25} color={'green'} name="check" onPress={() => handleSubmit()} />}
-			{isLoading ? <ActivityIndicator size={14} color="#1B005D" style={styles.loading} /> : null}
+			{showCheckIcon && (
+				<Feather
+					size={25}
+					color={'green'}
+					name="check"
+					onPress={() => handleSubmit()}
+					style={timerScreen ? { position: 'absolute', right: -24 } : undefined}
+				/>
+			)}
+			{isLoading && (
+				<ActivityIndicator
+					size={14}
+					color={timerScreen ? (dark ? colors.primary : '#1B005D') : '#1B005D'}
+					style={timerScreen ? { position: 'absolute', right: -19 } : styles.loading}
+				/>
+			)}
 		</View>
 	);
 };

diff --git a/apps/mobile/app/screens/Authenticated/TimerScreen/components/TimerTaskSection.tsx b/apps/mobile/app/screens/Authenticated/TimerScreen/components/TimerTaskSection.tsx
@@ -160,7 +160,8 @@ const TimerTaskSection = observer(
 									>
 										{translate('myWorkScreen.estimateLabel')} :{' '}
 									</Text>
-									<EstimateTime currentTask={activeTask} />
+
+									<EstimateTime timerScreen={true} currentTask={activeTask} />
 								</View>
 								<TaskSize
 									task={activeTask}