gotta-do

gotta-do's People

Contributors

Watchers

gotta-do's Issues

"Generalize" dropdown component

Right now, the dropdown component is directly connected to the todoform. You could generalize dropdown component by making a few changes and then the dropdown component could become a lot more reusable.
For instance, it would be really cool if we could use dropdown like so:

<Dropdown>
  <TodoForm />
<Dropdown />

Notice how TodoForm is a child of Dropdown. This makes dropdown much more reusable.
Dropdown would need to change to:

diff --git a/src/features/dropdown/DropDown.js b/src/features/dropdown/DropDown.js
index 0198355..e1c1fbc 100644
--- a/src/features/dropdown/DropDown.js
+++ b/src/features/dropdown/DropDown.js
@@ -1,10 +1,9 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { View, Text, Button, StyleSheet, useWindowDimensions, Pressable, Animated, LayoutAnimation } from 'react-native';
 import Icon from 'react-native-ico-material-design';
-import { TodoForm } from '../todoform/TodoForm';

-export const DropDown = () => {
-    const [showPage, setShowPage] = useState(false);
+export const DropDown = ({ children, initialShowPage = false }) => {
+    const [showPage, setShowPage] = useState(initialShowPage);
     const windowHeight = useWindowDimensions().height;
     const windowWidth = useWindowDimensions().width;
     const slideAnimation = useRef(new Animated.Value(0)).current;
@@ -38,7 +37,7 @@ export const DropDown = () => {
             </Pressable>
             <Animated.View
                 style={[styles(windowHeight, windowWidth).formPage, { height: slideAnimation }]}>
-                <TodoForm />
+                {children}
             </Animated.View>
         </View>
     );

Recommend Projects