added text input to filter modal items

locales/de.json

@@ -1,5 +1,8 @@
 {
-  "test": "Einstellungen",
+  "common": {
+    "textInputPlaceholderSearch": "Suche",
+    "pickerSearchFilterNoResults": "Keine Ergebnisse gefunden"
+  },
   "sideBar": {
     "devicesTitle": "Geräte",
     "settings": "Einstellungen",

locales/en.json

@@ -1,5 +1,8 @@
 {
-  "test": "Settings",
+  "common": {
+    "textInputPlaceholderSearch": "Search",
+    "pickerSearchFilterNoResults": "No results found"
+  },
   "sideBar": {
     "devicesTitle": "Devices",
     "settings": "Settings",

src/Components/Icon/index.js

@@ -1,5 +1,5 @@
 import Icon from "@expo/vector-icons/MaterialCommunityIcons";
 
-export default function MyIcon({ name, color, size }) {
-  return <Icon name={name} color={color} size={size} />;
+export default function MyIcon({ style, name, color, size }) {
+  return <Icon style={style} name={name} color={color} size={size} />;
 }

src/Components/PickerModal/index.js

@@ -1,12 +1,26 @@
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import { AppContext, AppStyles } from "../../utils";
-import Icon from "@expo/vector-icons/MaterialCommunityIcons";
-import { Modal, Text, TouchableOpacity, View } from "react-native";
+import { Modal, Text, TextInput, TouchableOpacity, View } from "react-native";
 import { Divider } from "../Divider";
+import MyIcon from "../Icon";
+import { useTranslation } from "react-i18next";
 
-export default function PickerModal({ isOpen, setIsOpen, items }) {
+export default function PickerModal({
+  isOpen,
+  setIsOpen,
+  items,
+  searchFilter,
+}) {
   const appContext = useContext(AppContext);
-  const closeModal = () => setIsOpen(false);
+  const { t } = useTranslation();
+  const [providedItems, setProvidedItems] = useState(items);
+  const [searchFilterInput, setSearchFilterInput] = useState("");
+
+  const closeModal = () => {
+    setIsOpen(false);
+    setProvidedItems(items);
+    setSearchFilterInput("");
+  };
 
   return (
     <Modal
@@ -20,21 +34,97 @@ export default function PickerModal({ isOpen, setIsOpen, items }) {
           backgroundColor: appContext.appTheme.backgroundColor,
         }}
       >
-        <TouchableOpacity
-          onPress={() => {
-            console.log("press");
-            setIsOpen(false);
-          }}
-        >
-          <Icon
-            name="window-close"
+        <View style={{ flexDirection: "row", alignItems: "center" }}>
+          <TouchableOpacity onPress={() => closeModal()}>
+            <MyIcon
+              name={searchFilter ? "chevron-left" : "window-close"}
               size={24}
-            style={{ marginLeft: 10, marginTop: 20, marginBottom: 20 }}
+              style={{ marginLeft: 20, marginTop: 20, marginBottom: 20 }}
               color={appContext.appTheme.icon}
             />
           </TouchableOpacity>
 
-        {items.map((item, i) => {
+          {searchFilter && (
+            <View
+              style={{
+                flex: 1,
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "center",
+                borderBottomWidth: 1,
+                borderColor: appContext.appTheme.textInputBottomColor,
+                marginLeft: 10,
+                marginRight: 10,
+              }}
+            >
+              <MyIcon
+                style={{ marginLeft: 10 }}
+                name="magnify"
+                size={22}
+                color={appContext.appTheme.icon}
+              />
+              <TextInput
+                style={{
+                  flex: 1,
+                  height: 40,
+                  marginLeft: 10,
+                  marginRight: 10,
+                }}
+                placeholder={t("common.textInputPlaceholderSearch")}
+                value={searchFilterInput}
+                onChangeText={(text) => {
+                  setSearchFilterInput(text);
+
+                  setProvidedItems((provItems) => {
+                    let newProvItems = [...provItems];
+
+                    newProvItems = items.filter((provItem) => {
+                      return provItem.label.startsWith(text);
+                    });
+
+                    return newProvItems;
+                  });
+                }}
+              />
+              {searchFilterInput !== "" && (
+                <TouchableOpacity
+                  onPress={() => {
+                    setSearchFilterInput("");
+                    setProvidedItems(items);
+                  }}
+                >
+                  <MyIcon
+                    style={{ marginRight: 10 }}
+                    name="close"
+                    size={20}
+                    color={appContext.appTheme.icon}
+                  />
+                </TouchableOpacity>
+              )}
+            </View>
+          )}
+        </View>
+
+        {providedItems.length === 0 && (
+          <View
+            style={{
+              flex: 1,
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <MyIcon
+              name="magnify-remove-outline"
+              color={appContext.appTheme.icon}
+              size={64}
+            />
+            <Text style={[AppStyles.typography20, { marginTop: 20 }]}>
+              {t("common.pickerSearchFilterNoResults")}
+            </Text>
+          </View>
+        )}
+
+        {providedItems.map((item, i) => {
           return item.selected ? (
             <View key={i}>
               <TouchableOpacity onPress={() => closeModal()}>
@@ -54,7 +144,7 @@ export default function PickerModal({ isOpen, setIsOpen, items }) {
                   >
                     {item.label}
                   </Text>
-                  <Icon
+                  <MyIcon
                     name="check"
                     size={24}
                     color={appContext.appTheme.colors.primary}

src/Screens/Device/light.js

@@ -168,6 +168,7 @@ export default function LightView() {
         </TouchableOpacity>
 
         <PickerModal
+          searchFilter
           isOpen={modalDeviceColorModeVisible}
           setIsOpen={setModalDeviceColorModeVisible}
           items={colorModePickerOptions.map((item) => {

src/utils.js

@@ -55,6 +55,7 @@ const DarkAppTheme = {
     },
   },
   divider: "#434443",
+  textInputBottomColor: "#b2b3b3",
   icon: "#ddd",
   switch: {
     trackColorTrue: "#01d064",
@@ -91,6 +92,7 @@ const LightAppTheme = {
     },
   },
   divider: "#ddd",
+  textInputBottomColor: "#b2b3b3",
   icon: "#000",
   switch: {
     trackColorTrue: "#01d064",