UI tweaks

by-theo · Sep 9, 2022 · 8bc049a · 8bc049a
1 parent 1e075bc
commit 8bc049a
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 34 deletions.
diff --git a/App.tsx b/App.tsx
@@ -15,9 +15,42 @@ import {
   number,
   boolean,
 } from "yup"
-import { useState, useEffect } from "react"
+import { useState, useEffect, FC } from "react"
+import Animated, { FadeInUp, Layout, ZoomOut } from "react-native-reanimated"
 import { initializeDatabase } from "./database"
 
+const Row: FC<{ text: string; done: boolean; onPress: () => void; onLongPress: () => void }> = (props) => {
+  return (
+    <TouchableOpacity onPress={props.onPress} onLongPress={props.onLongPress}>
+      <Animated.View
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          borderRadius: 6,
+          paddingVertical: 12,
+          paddingHorizontal: 8,
+          marginBottom: 8,
+          backgroundColor: "#f3f3f3",
+        }}
+        entering={FadeInUp}
+        exiting={ZoomOut}
+        layout={Layout.delay(200)}
+      >
+        <View style={{
+          height: 24,
+          width: 24,
+          borderRadius: 12,
+          borderColor: "#2191FB",
+          borderWidth: props.done ? 0 : 4,
+          backgroundColor: props.done ? "#63D471" : "transparent",
+        }} />
+        <Text style={{ marginLeft: 8, textDecorationLine: props.done ? "line-through" : "none", fontSize: 16 }}>{props.text}</Text>
+      </Animated.View>
+    </TouchableOpacity>
+  )
+}
+
+
 const Item = object({
   id: number().integer().required(),
   done: boolean().required(),
@@ -83,11 +116,13 @@ export default function App() {
   const DATA = [
     {
       title: "TODO",
-      data: todo
+      data: todo,
+      count: todo.length
     },
     {
       title: "DONE",
-      data: done
+      data: done,
+      count: done.length
     }
   ];
 
@@ -97,7 +132,8 @@ export default function App() {
         <TextInput
           onChangeText={(text) => setText(text)}
           onSubmitEditing={add}
-          placeholder="what do you need to do?"
+          placeholder="Type new task..."
+          placeholderTextColor="#757575"
           style={styles.input}
           value={text}
         />
@@ -107,20 +143,10 @@ export default function App() {
         sections={DATA}
         keyExtractor={(item) => item.id.toString()}
         renderItem={({ item }) => (
-          <TouchableOpacity
-            style={{
-              backgroundColor: item.done ? "#1c9963" : "#fff",
-              borderColor: "#000",
-              borderWidth: 1,
-              padding: 8,
-              marginBottom: 8
-            }}
-            onPress={() => markAsDone(item)} onLongPress={() => deleteItem(item.id)}>
-            <Text>{item.value}</Text>
-          </TouchableOpacity>
+          <Row text={item.value} done={item.done} onPress={() => markAsDone(item)} onLongPress={() => deleteItem(item.id)} />
         )}
-        renderSectionHeader={({ section: { title } }) => (
-          <Text style={styles.sectionHeading}>{title}</Text>
+        renderSectionHeader={({ section: { title, count } }) => (
+          <Text style={styles.sectionHeading}>{title} ({count})</Text>
         )}
       />
       <StatusBar style="auto" />
@@ -134,29 +160,18 @@ const styles = StyleSheet.create({
     flex: 1,
     paddingTop: Constants.statusBarHeight,
   },
-  heading: {
-    fontSize: 20,
-    fontWeight: "bold",
-    textAlign: "center",
-    backgroundColor: "#fff",
-  },
   flexRow: {
     flexDirection: "row",
   },
   input: {
-    borderColor: "#4630eb",
+    borderColor: "#ddd",
     borderRadius: 4,
-    borderWidth: 1,
+    borderWidth: 2,
     flex: 1,
-    height: 48,
+    height: 44,
     margin: 16,
     padding: 8,
   },
-  listArea: {
-    backgroundColor: "#f0f0f0",
-    flex: 1,
-    paddingTop: 16,
-  },
   sectionContainer: {
     marginBottom: 16,
     marginHorizontal: 16,

diff --git a/babel.config.js b/babel.config.js
@@ -1,6 +1,7 @@
-module.exports = function(api) {
+module.exports = function (api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
+    plugins: ['react-native-reanimated/plugin']
   };
 };
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "react": "18.0.0",
     "react-dom": "18.0.0",
     "react-native": "0.69.5",
+    "react-native-reanimated": "~2.9.1",
     "react-native-web": "~0.18.7",
     "yup": "^0.32.11"
   },

diff --git a/yarn.lock b/yarn.lock
@@ -344,7 +344,7 @@
     "@babel/helper-plugin-utils" "^7.18.9"
     "@babel/plugin-syntax-export-default-from" "^7.18.6"
 
-"@babel/plugin-proposal-export-namespace-from@^7.18.9":
+"@babel/plugin-proposal-export-namespace-from@^7.17.12", "@babel/plugin-proposal-export-namespace-from@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.9.tgz#5f7313ab348cdb19d590145f9247540e94761203"
   integrity sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==
@@ -751,6 +751,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
+"@babel/plugin-transform-object-assign@^7.16.7":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.18.6.tgz#7830b4b6f83e1374a5afb9f6111bcfaea872cdd2"
+  integrity sha512-mQisZ3JfqWh2gVXvfqYCAAyRs6+7oev+myBsTwW5RnPhYXOTuCEw2oe3YgxlXMViXUS53lG8koulI7mJ+8JE+A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
 "@babel/plugin-transform-object-super@^7.0.0", "@babel/plugin-transform-object-super@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz#fb3c6ccdd15939b6ff7939944b51971ddc35912c"
@@ -993,7 +1000,7 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/preset-typescript@^7.13.0":
+"@babel/preset-typescript@^7.13.0", "@babel/preset-typescript@^7.16.7":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.18.6.tgz#ce64be3e63eddc44240c6358daefac17b3186399"
   integrity sha512-s9ik86kXBAnD760aybBucdpnLsAt0jK1xqJn2juOn9lkOvSHV60os5hxoVJsPzMQxvnUJFAlkont2DvvaYEBtQ==
@@ -1711,6 +1718,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/invariant@^2.2.35":
+  version "2.2.35"
+  resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.35.tgz#cd3ebf581a6557452735688d8daba6cf0bd5a3be"
+  integrity sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg==
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
@@ -4262,6 +4274,11 @@ lodash.debounce@^4.0.8:
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
 
+lodash.isequal@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+  integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==
+
 lodash.throttle@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
@@ -5419,6 +5436,20 @@ react-native-gradle-plugin@^0.0.7:
   resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.0.7.tgz#96602f909745239deab7b589443f14fce5da2056"
   integrity sha512-+4JpbIx42zGTONhBTIXSyfyHICHC29VTvhkkoUOJAh/XHPEixpuBduYgf6Y4y9wsN1ARlQhBBoptTvXvAFQf5g==
 
+react-native-reanimated@~2.9.1:
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.9.1.tgz#d9a932e312c13c05b4f919e43ebbf76d996e0bc1"
+  integrity sha512-309SIhDBwY4F1n6e5Mr5D1uPZm2ESIcmZsGXHUu8hpKX4oIOlZj2MilTk+kHhi05LjChoJkcpfkstotCJmPRPg==
+  dependencies:
+    "@babel/plugin-proposal-export-namespace-from" "^7.17.12"
+    "@babel/plugin-transform-object-assign" "^7.16.7"
+    "@babel/preset-typescript" "^7.16.7"
+    "@types/invariant" "^2.2.35"
+    invariant "^2.2.4"
+    lodash.isequal "^4.5.0"
+    setimmediate "^1.0.5"
+    string-hash-64 "^1.0.3"
+
 react-native-web@~0.18.7:
   version "0.18.9"
   resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.18.9.tgz#f5032e0b32ebe99c0ab22d13dbd8ca2944b08f12"
@@ -6071,6 +6102,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-2.2.0.tgz#91d5f5130d1cef96dcfa7f726945188741d09ee4"
   integrity sha512-uyQK/mx5QjHun80FLJTfaWE7JtwfRMKBLkMne6udYOmvH0CawotVa7TfgYHzAnpphn4+TweIx1QKMnRIbipmUg==
 
+string-hash-64@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string-hash-64/-/string-hash-64-1.0.3.tgz#0deb56df58678640db5c479ccbbb597aaa0de322"
+  integrity sha512-D5OKWKvDhyVWWn2x5Y9b+37NUllks34q1dCDhk/vYcso9fmhs+Tl3KR/gE4v5UNj2UA35cnX4KdVVGkG1deKqw==
+
 string-width@^4.1.0, string-width@^4.2.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"