feat(ui): Add more options to dropdown menu

Endurance-Soft · Mar 6, 2024 · ca27343 · ca27343
1 parent 7f6ef84
commit ca27343
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 18 deletions.
diff --git a/constants.js b/constants.js
@@ -51,11 +51,19 @@ export const theme = {
     secondaryText: "#787878",
     primary: "#fffefd",
     secondary: "#bbe6ec",
+            // secondary: "#DEC9F4",
+            // secondary: "#D8E2FD",
+            // secondary: "#FFE6CF",
+            // secondary: "#F1F5F8",
     tertiary: "#152432",
     red: "#b83232",
     green: "#5cce87",
     black: "#161819",
     skyBlue: "#a8dae1",
+            // skyBlue: "#C9B3E4",
+            // skyBlue: "#CED5EF",
+            // skyBlue: "#FFF9EF",
+            // skyBlue: "#FFFFFD",
     otherWhite: "#e8e8e8",
     slateGrey: "#787878",
   },

diff --git a/src/components/DropdownSelector.js b/src/components/DropdownSelector.js
@@ -20,17 +20,25 @@ const DropdownSelector = ({ selectedOption, onOptionChange }) => {
       <Menu opened={menuVisible} onBackdropPress={() => setMenuVisible(false)}>
         <MenuTrigger onPress={toggleMenu} style={styles.trigger}>
           <View style={styles.menuTrigger}>
-            <Text style={styles.triggerText}>
-              {selectedOption.charAt(0).toUpperCase() + selectedOption.slice(1)}
-            </Text>
+            <View style={styles.menuTriggerInter}>
+              <Text style={styles.triggerText}>
+                {selectedOption.charAt(0).toUpperCase() + selectedOption.slice(1)}
+              </Text>
+            </View>
             <FontAwesome5 name={menuVisible ? "chevron-up" : "chevron-down"} size={20} color="white" />
           </View>
         </MenuTrigger>
-        <MenuOptions customStyles={styles.menuOptions}>
-          <MenuOption onSelect={() => { onOptionChange("Hoy"); setMenuVisible(false); }}>
-            <Text style={styles.optionText}>Estoy cansado jefe</Text>
-          </MenuOption>
-          {/* Add  */}
+        <MenuOptions customStyles={{ optionsContainer: styles.optionsContainer, optionsWrapper: styles.optionsWrapper, }}>
+          {['Hoy', 'Esta Semana', 'Este Mes', 'Todo'].map((option) => (
+            <MenuOption key={option} onSelect={() => { onOptionChange(option); setMenuVisible(false); }}>
+              <View style={{ flexDirection: "row", alignItems: "center" }}>
+                <Text style={styles.optionsText}>{option}</Text>
+                {selectedOption === option && (
+                  <FontAwesome5 name="check" size={17} color="white" style={{ marginLeft: 10 }} />
+                )}
+              </View>
+            </MenuOption>
+          ))}
         </MenuOptions>
       </Menu>
     </View>

diff --git a/src/components/styles/DropdownSelectorStyles.js b/src/components/styles/DropdownSelectorStyles.js
@@ -22,23 +22,45 @@ export const styles = StyleSheet.create({
       fontSize: 16,
       fontWeight: "bold",
     },
+    optionsText: {
+      color: theme.colors.primary,
+      fontSize: 16,
+      fontWeight: "bold",
+    },
     menuTrigger: {
       flexDirection: "row",
       alignItems: 'center',
+      justifyContent: 'space-between',
+      elevation: 5,
+      paddingVertical: 12,
+      paddingHorizontal: 25,
+      backgroundColor: theme.colors.tertiary,
+      borderRadius: 22,
       elevation: 5,
-        paddingVertical: 12,
-        paddingHorizontal: 25,
-        backgroundColor: theme.colors.tertiary,
-        borderRadius: 22,
-        elevation: 5,
+      width: 200,
+    },
+    menuTriggerInter: {
+      flexDirection: "row",
+      alignItems: 'center',
+      justifyContent: 'center',
+      flex: 1,
     },
     triggerText: {
       color: theme.colors.primary,
         fontSize: 16,
         fontWeight: "bold",
         marginRight: 12,
     },
-    menuOptions: {
-      zIndex: 1,
+    optionsContainer: {
+      paddingVertical: 15,
+      marginTop: 55,
+      marginLeft: 0,
+      borderRadius: 20,
+      width: 200,
+      backgroundColor: theme.colors.tertiary,
+      elevation: 5,
+    },
+    optionsWrapper: {
+      marginLeft: 20,
     },
   });
diff --git a/src/screens/ClientSearchScreen.js b/src/screens/ClientSearchScreen.js
@@ -8,6 +8,8 @@ import { DATA, theme } from '../../constants'
 import Icon from 'react-native-vector-icons/AntDesign';
 import { useNavigation } from '@react-navigation/native';
 
+const secondary = theme.colors.secondary;
+
 const ClientSearchScreen = () => {
   const navigation = useNavigation();
   const [searchQuery, setSearchQuery] = useState('');
@@ -38,7 +40,7 @@ const ClientSearchScreen = () => {
   return (
 
       <SafeAreaView style={styles.container}>
-      <StatusBar style="ligth" backgroundColor='#bbe6ec'/>
+      <StatusBar style="ligth" backgroundColor={secondary}/>
         <View style={styles.up}>
           <View style={styles.header}>
           <TouchableOpacity style={styles.back} onPress={() => navigation.goBack()}>

diff --git a/src/screens/HomeScreen.js b/src/screens/HomeScreen.js
@@ -7,8 +7,10 @@ import { HISTORY_DATA, theme } from "../../constants";
 import DropdownSelector from "../components/DropdownSelector";
 import { StatusBar } from "expo-status-bar";
 
+const secondary = theme.colors.secondary;
+
 const NewScreen = () => {
-  const [selectedOption, setSelectedOption] = useState("today");
+  const [selectedOption, setSelectedOption] = useState("Hoy");
   const renderHistoryItem = ({ item }) => (
     <StoryItem
       story={item}
@@ -24,7 +26,7 @@ const NewScreen = () => {
 
   return (
     <SafeAreaView style={styles.safeArea}>
-      <StatusBar style="ligth" backgroundColor="#bbe6ec" />
+      <StatusBar style="ligth" backgroundColor={secondary} />
       <View style={styles.header}>
         <ProfileHeader userName="Jon Doe" />
         <DropdownSelector