From ef46973a03abf717410c2fda1104d9d8e74128cc Mon Sep 17 00:00:00 2001 From: desperado1802 Date: Thu, 16 Nov 2023 17:22:53 +0200 Subject: [PATCH] fixed the card resizing when pressing options button --- .../ProfileScreen/components/ListCardItem.tsx | 265 ++++++++---------- 1 file changed, 123 insertions(+), 142 deletions(-) diff --git a/apps/mobile/app/screens/Authenticated/ProfileScreen/components/ListCardItem.tsx b/apps/mobile/app/screens/Authenticated/ProfileScreen/components/ListCardItem.tsx index ba18e8032..de7d9e097 100644 --- a/apps/mobile/app/screens/Authenticated/ProfileScreen/components/ListCardItem.tsx +++ b/apps/mobile/app/screens/Authenticated/ProfileScreen/components/ListCardItem.tsx @@ -1,72 +1,72 @@ /* eslint-disable react-native/no-color-literals */ /* eslint-disable react-native/no-inline-styles */ -import React, { FC, useMemo, useState } from "react" -import { View, TouchableNativeFeedback, TouchableOpacity, StyleSheet, Image } from "react-native" -import { Ionicons, Entypo } from "@expo/vector-icons" -import { Card, Text } from "react-native-paper" -import { LinearGradient } from "expo-linear-gradient" -import { AnimatedCircularProgress } from "react-native-circular-progress" +import React, { FC, useMemo, useState } from 'react'; +import { View, TouchableNativeFeedback, TouchableOpacity, StyleSheet, Image } from 'react-native'; +import { Ionicons, Entypo } from '@expo/vector-icons'; +import { Card, Text } from 'react-native-paper'; +import { LinearGradient } from 'expo-linear-gradient'; +import { AnimatedCircularProgress } from 'react-native-circular-progress'; // COMPONENTS -import { ListItem } from "../../../../components" -import { GLOBAL_STYLE as GS } from "../../../../../assets/ts/styles" -import { spacing, typography, useAppTheme } from "../../../../theme" -import { ITeamTask } from "../../../../services/interfaces/ITask" -import WorkedOnTask from "../../../../components/WorkedOnTask" -import TaskStatus from "../../../../components/TaskStatus" -import TimerButton from "./TimerButton" -import { observer } from "mobx-react-lite" -import { IUserProfile } from "../logics/useProfileScreenLogic" -import TaskTitleDisplay from "./TaskTitleDisplay" -import AllTaskStatuses from "../../../../components/AllTaskStatuses" -import WorkedOnTaskHours from "../../../../components/WorkedDayHours" -import EstimateTime from "../../TimerScreen/components/EstimateTime" -import { secondsToTime } from "../../../../helpers/date" -import { useTaskStatistics } from "../../../../services/hooks/features/useTaskStatics" -import { useStores } from "../../../../models" -import IssuesModal from "../../../../components/IssuesModal" +import { ListItem } from '../../../../components'; +import { GLOBAL_STYLE as GS } from '../../../../../assets/ts/styles'; +import { spacing, typography, useAppTheme } from '../../../../theme'; +import { ITeamTask } from '../../../../services/interfaces/ITask'; +import WorkedOnTask from '../../../../components/WorkedOnTask'; +import TaskStatus from '../../../../components/TaskStatus'; +import TimerButton from './TimerButton'; +import { observer } from 'mobx-react-lite'; +import { IUserProfile } from '../logics/useProfileScreenLogic'; +import TaskTitleDisplay from './TaskTitleDisplay'; +import AllTaskStatuses from '../../../../components/AllTaskStatuses'; +import WorkedOnTaskHours from '../../../../components/WorkedDayHours'; +import EstimateTime from '../../TimerScreen/components/EstimateTime'; +import { secondsToTime } from '../../../../helpers/date'; +import { useTaskStatistics } from '../../../../services/hooks/features/useTaskStatics'; +import { useStores } from '../../../../models'; +import IssuesModal from '../../../../components/IssuesModal'; export type ListItemProps = { - active?: boolean - task?: ITeamTask - isAssigned?: boolean - isAuthUser: boolean - activeAuthTask: boolean - viewType?: "default" | "unassign" - profile?: IUserProfile - isNowTab?: boolean -} + active?: boolean; + task?: ITeamTask; + isAssigned?: boolean; + isAuthUser: boolean; + activeAuthTask: boolean; + viewType?: 'default' | 'unassign'; + profile?: IUserProfile; + isNowTab?: boolean; +}; export interface Props extends ListItemProps {} export const ListItemContent: React.FC = observer((props) => { - const { colors } = useAppTheme() + const { colors } = useAppTheme(); const { - TimerStore: { timerStatus }, - } = useStores() + TimerStore: { timerStatus } + } = useStores(); - const [editTitle, setEditTitle] = useState(false) - const [enableEstimate, setEnableEstimate] = useState(false) - const [showMenu, setShowMenu] = React.useState(false) + const [editTitle, setEditTitle] = useState(false); + const [enableEstimate, setEnableEstimate] = useState(false); + const [showMenu, setShowMenu] = React.useState(false); - const { h, m } = secondsToTime(props.task.estimate || 0) - const { getTaskStat, activeTaskTotalStat } = useTaskStatistics() - const { taskTotalStat } = getTaskStat(props.task) + const { h, m } = secondsToTime(props.task.estimate || 0); + const { getTaskStat, activeTaskTotalStat } = useTaskStatistics(); + const { taskTotalStat } = getTaskStat(props.task); const progress = useMemo(() => { if (!props.isAuthUser) { - return (taskTotalStat?.duration * 100) / props.task?.estimate + return (taskTotalStat?.duration * 100) / props.task?.estimate; } - return (activeTaskTotalStat?.duration * 100) / props.task?.estimate || 0 - }, [timerStatus, props.activeAuthTask, activeTaskTotalStat]) + return (activeTaskTotalStat?.duration * 100) / props.task?.estimate || 0; + }, [timerStatus, props.activeAuthTask, activeTaskTotalStat]); return ( { - setShowMenu(false) - setEditTitle(false) - setEnableEstimate(false) + setShowMenu(false); + setEditTitle(false); + setEnableEstimate(false); }} > = observer((props) => { ...GS.p3, ...GS.positionRelative, backgroundColor: colors.background, - borderRadius: 14, + borderRadius: 14 }} > @@ -82,17 +82,13 @@ export const ListItemContent: React.FC = observer((props) => { memberTask={props.task} isAuthUser={props.profile.isAuthUser} isActiveTask={props.activeAuthTask} - title={"Total time"} - containerStyle={{ flexDirection: "row", alignItems: "center" }} + title={'Total time'} + containerStyle={{ flexDirection: 'row', alignItems: 'center' }} totalTimeText={{ color: colors.primary }} /> - setShowMenu(!showMenu)}> + setShowMenu(!showMenu)} style={{ height: 20 }}> {!showMenu ? ( - + ) : ( )} @@ -101,15 +97,11 @@ export const ListItemContent: React.FC = observer((props) => { - + - + {!enableEstimate ? ( setEnableEstimate(true)}> @@ -121,19 +113,14 @@ export const ListItemContent: React.FC = observer((props) => { backgroundColor="#F0F0F0" > {() => ( - - {h !== 0 ? h + "h" : m !== 0 ? m + "m" : h + "h"} + + {h !== 0 ? h + 'h' : m !== 0 ? m + 'm' : h + 'h'} )} ) : ( - + )} @@ -145,30 +132,26 @@ export const ListItemContent: React.FC = observer((props) => { )} {!props.isAssigned && !props.isAuthUser && ( props.profile.assignTask(props.task)} > )} {props.isAssigned ? ( ) : ( - - - Assigned - + + Assigned {props.task.members.length} people @@ -187,18 +170,18 @@ export const ListItemContent: React.FC = observer((props) => { )} - ) -}) + ); +}); interface IMenuProps { - setShowMenu: () => unknown - setEditTitle: (value: boolean) => unknown - setEnableEstimate: (value: boolean) => unknown - props: ListItemProps + setShowMenu: () => unknown; + setEditTitle: (value: boolean) => unknown; + setEnableEstimate: (value: boolean) => unknown; + props: ListItemProps; } const SidePopUp: FC = ({ props, setShowMenu, setEditTitle, setEnableEstimate }) => { - const { colors } = useAppTheme() - const { isAssigned, task, profile } = props + const { colors } = useAppTheme(); + const { isAssigned, task, profile } = props; return ( = ({ props, setShowMenu, setEditTitle, setEnable shadowColor: colors.border, marginRight: 27, backgroundColor: colors.background, - minWidth: spacing.huge * 2, + minWidth: spacing.huge * 2 }} > { - setEditTitle(true) - setShowMenu() + setEditTitle(true); + setShowMenu(); }} > Edit Task @@ -232,8 +215,8 @@ const SidePopUp: FC = ({ props, setShowMenu, setEditTitle, setEnable { - setEnableEstimate(true) - setShowMenu() + setEnableEstimate(true); + setShowMenu(); }} > Estimate @@ -243,8 +226,8 @@ const SidePopUp: FC = ({ props, setShowMenu, setEditTitle, setEnable { - profile.assignTask(task) - setShowMenu() + profile.assignTask(task); + setShowMenu(); }} > Assign Task @@ -255,8 +238,8 @@ const SidePopUp: FC = ({ props, setShowMenu, setEditTitle, setEnable { - profile.unassignTask(task) - setShowMenu() + profile.unassignTask(task); + setShowMenu(); }} > Unassign Task @@ -264,27 +247,25 @@ const SidePopUp: FC = ({ props, setShowMenu, setEditTitle, setEnable )} - ) -} + ); +}; const ListCardItem: React.FC = (props) => { - const { colors, dark } = useAppTheme() + const { colors, dark } = useAppTheme(); // STATS - const { activeAuthTask } = props + const { activeAuthTask } = props; return ( {dark ? ( = (props) => { )} - ) -} + ); +}; -export default ListCardItem +export default ListCardItem; const styles = StyleSheet.create({ cardContainer: { borderRadius: 14, elevation: 24, - shadowColor: "#000", + shadowColor: '#000', shadowOffset: { width: 0, height: 12 }, shadowOpacity: 0.05, - shadowRadius: 5, + shadowRadius: 5 }, dropdownTxt: { - color: "#282048", + color: '#282048', fontFamily: typography.primary.semiBold, - fontSize: 14, + fontSize: 14 }, firstContainer: { - alignItems: "center", - flexDirection: "row", - justifyContent: "space-between", - marginBottom: 10, + alignItems: 'center', + flexDirection: 'row', + justifyContent: 'space-between', + marginBottom: 10 }, progessText: { fontFamily: typography.primary.semiBold, - fontSize: 12, + fontSize: 12 }, statusContainer: { - alignItems: "center", - borderColor: "transparent", + alignItems: 'center', + borderColor: 'transparent', height: 33, paddingHorizontal: 9, - width: 120, + width: 120 }, timeHeading: { - color: "#7E7991", + color: '#7E7991', fontFamily: typography.fonts.PlusJakartaSans.medium, - fontSize: 10, + fontSize: 10 }, timeNumber: { - color: "#282048", + color: '#282048', fontFamily: typography.fonts.PlusJakartaSans.semiBold, - fontSize: 14, + fontSize: 14 }, timerBtn: { - alignItems: "center", - borderColor: "rgba(0, 0, 0, 0.4)", + alignItems: 'center', + borderColor: 'rgba(0, 0, 0, 0.4)', borderRadius: 20, borderWidth: 1, elevation: 10, height: 42, - justifyContent: "center", + justifyContent: 'center', marginRight: 10, // shadowColor: "rgba(0,0,0,0.16)", // shadowOffset: { width: 5, height: 10 }, // shadowOpacity: 1, // shadowRadius: 10, ...GS.shadowSm, - width: 42, + width: 42 }, timerIcon: { height: 21, - width: 21, + width: 21 }, times: { - alignItems: "center", - borderTopColor: "rgba(0, 0, 0, 0.06)", + alignItems: 'center', + borderTopColor: 'rgba(0, 0, 0, 0.06)', borderTopWidth: 1, - flexDirection: "row", - justifyContent: "space-between", - paddingTop: 14, + flexDirection: 'row', + justifyContent: 'space-between', + paddingTop: 14 }, wrapButton: { - alignItems: "center", - flexDirection: "row", + alignItems: 'center', + flexDirection: 'row' }, wrapperTask: { - alignItems: "center", - flexDirection: "row", + alignItems: 'center', + flexDirection: 'row', height: 42, - justifyContent: "space-between", + justifyContent: 'space-between', paddingRight: 10, - width: "100%", - }, -}) + width: '100%' + } +});