From f9333584dcccef5e5cdfc7aa4ecae0f75bc00c53 Mon Sep 17 00:00:00 2001
From: Haytham Taweel <91259184+HaythamT95@users.noreply.github.com>
Date: Wed, 3 May 2023 12:02:34 +0300
Subject: [PATCH] Update SelectList.tsx

Fixed this bug that I issued earlier in (SelectList)
Let's say that you have the data = [
{key:'1', value:'Apple'},
{key:'2', value:'Appliances'},
{key:'3', value:'Cameras'},
{key:'4', value:'Computers'},
{key:'5', value:'Vegetables'},
{key:'6', value:'Diary Products'},
{key:'7', value:'Drinks'},
]
,If you enter "C" and the click on close (x) and try to use the selectlist again, you will receive only the data you searched for earlier and the not whole data. It means that I will only see ['Cameras', 'Computers'].

Also Added a functionality to clear selected value (in SelectList)  by adding new key to the data. new key="000", value="Clear", and added icon to the clear with read color.
---
 components/SelectList.tsx | 33 +++++++++++++++++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/components/SelectList.tsx b/components/SelectList.tsx
index 5e7a6771..2d842c7f 100644
--- a/components/SelectList.tsx
+++ b/components/SelectList.tsx
@@ -11,6 +11,7 @@ import {
 } from 'react-native';
 
 import { SelectListProps } from '..';
+import { AntDesign } from '@expo/vector-icons';
 
 type L1Keys = { key?: any; value?: any; disabled?: boolean | undefined }
 
@@ -74,6 +75,8 @@ const SelectList: React.FC<SelectListProps> =  ({
 
     
     React.useEffect(() => {
+        if(data.length>0)
+            data.unshift({ key: "000", value: "Clear" })
         setFilteredData(data);
       },[data])
 
@@ -147,7 +150,10 @@ const SelectList: React.FC<SelectListProps> =  ({
                                 }}
                                 style={[{padding:0,height:20,flex:1,fontFamily},inputStyles]}
                             />
-                                <TouchableOpacity onPress={() => slideup()} >
+                                <TouchableOpacity onPress={() => {
+                                    setFilteredData(data)
+                                    slideup()
+                                }} >
 
                                 {
                                     (!closeicon)
@@ -207,6 +213,13 @@ const SelectList: React.FC<SelectListProps> =  ({
                                     }else{
                                         return(
                                             <TouchableOpacity style={[styles.option,dropdownItemStyles]} key={index} onPress={ () => {
+                                                if (key === "000") {
+                                                        setSelected("")
+                                                        setSelectedVal("");
+                                                        slideup()
+                                                        setTimeout(() => { setFilteredData(data) }, 800)
+                                                        return
+                                                    }
                                                 if(save === 'value'){
                                                     setSelected(value);
                                                 }else{
@@ -218,7 +231,23 @@ const SelectList: React.FC<SelectListProps> =  ({
                                                 setTimeout(() => {setFilteredData(data)}, 800)
                                                 
                                             }}>
-                                                <Text style={[{fontFamily},dropdownTextStyles]}>{value}</Text>
+                                                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                                                        <View style={{ flex: 1 }}>
+                                                            <Text style={[{ fontFamily }, dropdownTextStyles]}>
+                                                                {value}
+                                                            </Text>
+                                                        </View>
+                                                        
+                                                        {key === "000" ?
+                                                            <View style={{ flex: 1, alignItems: 'flex-end' }}>
+                                                                <AntDesign name="closecircle" size={24} color="red" />
+                                                            </View> : null}
+
+                                                        {value === selectedval && key !== "000" ? (
+                                                            <View style={{ flex: 1, alignItems: 'flex-end' }}>
+                                                                <AntDesign name="check" size={24} color="black" />
+                                                            </View>
+                                                        ) : null}
                                             </TouchableOpacity>
                                         )
                                     }