Skip to content

Commit b2692b4

Browse files
dilane3dilane3
committedMar 15, 2022
animatin of move task for deleting ok
1 parent aad19b9 commit b2692b4

File tree

5 files changed

+169
-47
lines changed

5 files changed

+169
-47
lines changed
 

‎components/screens/home/styles/taskListStyle.ts

+5-3
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,13 @@ const styles = StyleSheet.create({
77
marginTop: 170
88
},
99
title: {
10-
marginLeft: 10,
10+
paddingLeft: 10,
1111
fontSize: 18,
12-
marginBottom: 10,
12+
paddingBottom: 10,
1313
marginTop: 20,
14-
fontFamily: "Poppins-Medium"
14+
fontFamily: "Poppins-Medium",
15+
borderColor: '#c4c4c4',
16+
borderBottomWidth: 1,
1517
},
1618
taskList: {
1719
width: "100%",

‎components/screens/home/styles/taskStyle.ts

+17-2
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,23 @@ const styles = StyleSheet.create({
88
justifyContent: "space-between",
99
alignItems: "center",
1010
borderColor: '#c4c4c4',
11-
borderTopWidth: 1,
12-
paddingVertical: 10
11+
borderBottomWidth: 1,
12+
borderLeftWidth: 1,
13+
},
14+
containerIn: {
15+
position: "relative",
16+
width: "100%",
17+
flexDirection: "row",
18+
justifyContent: "space-between",
19+
alignItems: "center",
20+
paddingVertical: 10,
21+
backgroundColor: "#fff"
22+
},
23+
containerBackgroundIcon: {
24+
height: "100%",
25+
width: 70,
26+
justifyContent: "center",
27+
alignItems: "center"
1328
},
1429
leftSection: {
1530
width: Dimensions.get("window").width - 50,

‎components/screens/home/task.tsx

+144-26
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,49 @@
1-
import { Switch, Text, TouchableOpacity, View } from "react-native"
1+
import { Switch, Text, TouchableOpacity, useWindowDimensions, View } from "react-native"
22
import Ionicons from '@expo/vector-icons/Ionicons'
33
import styles from "./styles/taskStyle"
44
import TaskEntity from '../../../entities/task'
5-
import { useContext } from "react"
5+
import React, { useContext } from "react"
66
import taskContext from "../../../dataManager/contexts/taskContext"
77
import { markTask } from "../../../dataManager/data/actions"
8-
import Animated, { Easing, Layout, SlideInRight, SlideOutLeft, SlideOutRight } from "react-native-reanimated"
8+
import Animated, {
9+
cond,
10+
Easing,
11+
interpolate,
12+
interpolateColor,
13+
interpolateColors,
14+
Layout,
15+
SlideInRight,
16+
SlideOutLeft,
17+
SlideOutRight,
18+
useAnimatedGestureHandler,
19+
useAnimatedStyle,
20+
useSharedValue,
21+
withSpring,
22+
withTiming
23+
} from "react-native-reanimated"
924
import navigationContext from "../../../dataManager/contexts/navigationContext"
25+
import { PanGestureHandler } from "react-native-gesture-handler"
1026

1127
type TaskPropType = ({task}: {task: TaskEntity}) => JSX.Element
28+
type ContextType = {
29+
x: number
30+
}
1231

1332
const Task: TaskPropType = ({ task }) => {
1433
// Get data from the global state
1534
const { dispatch, selectTask } = useContext(taskContext)
1635
const { changeModalVisible } = useContext(navigationContext)
1736

37+
// use Dimensions
38+
const { width: windowWidth } = useWindowDimensions()
39+
40+
// Some constants
41+
const WINDOWWIDTH = windowWidth
42+
const MINIMUMWIDTH = 100
43+
44+
// Set Shared value
45+
const translationX = useSharedValue(0)
46+
1847
const handleMarkTask = () => {
1948
// Change the state of the task
2049
dispatch(markTask(task.getId, !task.getMarked))
@@ -28,36 +57,125 @@ const Task: TaskPropType = ({ task }) => {
2857
changeModalVisible()
2958
}
3059

60+
const eventHandler = useAnimatedGestureHandler({
61+
onStart: (_, context: ContextType) => {
62+
context.x = translationX.value
63+
},
64+
onActive: (event, context) => {
65+
console.log(event.translationX)
66+
if (event.translationX > 0) {
67+
translationX.value = context.x + event.translationX
68+
}
69+
},
70+
onEnd: () => {
71+
translationX.value = withTiming(0, {duration: 300})
72+
}
73+
})
74+
75+
// Define some animated styles
76+
const translationStyle = useAnimatedStyle(() => {
77+
return ({
78+
transform: [
79+
{
80+
translateX: interpolate(
81+
translationX.value,
82+
[0, MINIMUMWIDTH],
83+
[0, MINIMUMWIDTH],
84+
"clamp"
85+
)
86+
}
87+
]
88+
})
89+
})
90+
91+
const taskBackgroundStyle = useAnimatedStyle(() => {
92+
return ({
93+
position: "absolute",
94+
top: 0,
95+
left: 0,
96+
width: "100%",
97+
height: "100%",
98+
backgroundColor: interpolateColor(
99+
translationX.value,
100+
[0, MINIMUMWIDTH],
101+
["#fff", "#ef233c"]
102+
) as string
103+
})
104+
})
105+
106+
const taskBackgroundIconStyle = useAnimatedStyle(() => {
107+
return ({
108+
transform: [
109+
{
110+
scale: interpolate(
111+
translationX.value,
112+
[0, MINIMUMWIDTH],
113+
[.5, 1.2],
114+
"clamp"
115+
)
116+
},
117+
{
118+
translateX: interpolate(
119+
translationX.value,
120+
[0, MINIMUMWIDTH],
121+
[-40, 0],
122+
"clamp"
123+
)
124+
}
125+
],
126+
opacity: interpolate(
127+
translationX.value,
128+
[0, MINIMUMWIDTH],
129+
[.4, 1],
130+
"clamp"
131+
)
132+
})
133+
})
134+
31135
return (
32136
<Animated.View
33137
style={styles.container}
34138
entering={SlideInRight}
35139
layout={Layout.springify()}
36-
exiting={SlideOutRight.duration(100)}
140+
exiting={SlideOutRight.duration(100)}
37141
>
38-
<View style={styles.leftSection}>
39-
<Switch
40-
value={task.getMarked}
41-
thumbColor={task.getMarked ? "#3e4bff" : "#eee"}
42-
trackColor={{
43-
false: "#ced4da",
44-
true: "#48cae4"
45-
}}
46-
onValueChange={handleMarkTask}
47-
/>
48-
<Text style={[styles.taskText, task.getMarked && styles.taskMaked]}>{ task.getValue }</Text>
49-
</View>
50-
51-
<TouchableOpacity
52-
style={styles.taskMenu}
53-
onPress={handleSelectTask}
54-
activeOpacity={.6}
142+
<Animated.View
143+
style={[taskBackgroundStyle]}
55144
>
56-
<Ionicons
57-
style={styles.taskMenuIcon}
58-
name="ellipsis-vertical"
59-
/>
60-
</TouchableOpacity>
145+
<Animated.View style={[styles.containerBackgroundIcon, taskBackgroundIconStyle]}>
146+
<Ionicons name="trash" size={25} color="#fff" />
147+
</Animated.View>
148+
</Animated.View>
149+
150+
<PanGestureHandler onGestureEvent={eventHandler}>
151+
<Animated.View
152+
style={[styles.containerIn, translationStyle]}
153+
>
154+
<View style={styles.leftSection}>
155+
<Switch
156+
value={task.getMarked}
157+
thumbColor={task.getMarked ? "#3e4bff" : "#eee"}
158+
trackColor={{
159+
false: "#ced4da",
160+
true: "#90e0ef"
161+
}}
162+
onValueChange={handleMarkTask}
163+
/>
164+
<Text style={[styles.taskText, task.getMarked && styles.taskMaked]}>{ task.getValue }</Text>
165+
</View>
166+
167+
<TouchableOpacity
168+
style={styles.taskMenu}
169+
onPress={handleSelectTask}
170+
activeOpacity={.6}
171+
>
172+
<Ionicons
173+
style={styles.taskMenuIcon}
174+
name="ellipsis-vertical"
175+
/>
176+
</TouchableOpacity>
177+
</Animated.View>
178+
</PanGestureHandler>
61179
</Animated.View>
62180
)
63181
}

‎components/screens/home/taskList.tsx

+1-14
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,12 @@ import taskContext from "../../../dataManager/contexts/taskContext"
44
import styles from "./styles/taskListStyle"
55
import Task from "./task"
66

7-
export type ScrollViewRef = ScrollView & {
8-
flashScrollIndicators: () => void;
9-
};
10-
117
const TaskList = () => {
128
// Get data from the global state
139
const { tasks } = useContext(taskContext)
1410

15-
// UseRef section
16-
const scrollViewRef = useRef<ScrollViewRef>(null)
17-
18-
// UseEffect section
19-
useEffect(() => {
20-
if (scrollViewRef.current)
21-
scrollViewRef.current.scrollToEnd({ animated: true })
22-
}, [tasks])
23-
2411
return (
25-
<ScrollView ref={scrollViewRef} style={styles.container}>
12+
<ScrollView style={styles.container}>
2613
<Text style={styles.title}>List of task</Text>
2714

2815
<View style={styles.taskList}>

‎dataManager/data/taskReducer.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const taskReducer: TaskReducerType = (state, action) => {
1313
case ADD_TASK: {
1414
if (action.payload && typeof action.payload === 'string') {
1515
// Generate a new id
16-
const id = state.length === 0 ? 1 : state[state.length - 1].getId + 1
16+
const id = state.length === 0 ? 1 : state[0].getId + 1
1717

1818
// Create a new task
1919
const task = new Task(id, action.payload)
@@ -22,7 +22,7 @@ const taskReducer: TaskReducerType = (state, action) => {
2222
const stateClone = [...state]
2323

2424
// Add the task
25-
stateClone.push(task)
25+
stateClone.unshift(task)
2626

2727
return stateClone
2828
}

0 commit comments

Comments
 (0)
Please sign in to comment.