custom select list component added

ui/src/components/SettingsModal/SettingModal.tsx

@@ -1,12 +1,12 @@
-import React, {useEffect, useMemo, useState} from "react";
+import React, {useEffect, useState} from "react";
 import {Modal, Backdrop, Fade, Box, Button} from "@material-ui/core";
 import {modalStyle} from "../Filters";
-import Checkbox from "../UI/Checkbox";
 import './SettingsModal.sass';
 import Api from "../../helpers/api";
 import spinner from "../assets/spinner.svg";
 import {useCommonStyles} from "../../helpers/commonStyle";
 import {toast} from "react-toastify";
+import SelectList from "../UI/SelectList";
 
 interface SettingsModalProps {
     isOpen: boolean
@@ -47,14 +47,6 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({isOpen, onClose, is
         })()
     }, [isFirstLogin, isOpen])
 
-    const setAllNamespacesTappedValue = (isTap: boolean) => {
-        const newNamespaces = {};
-        Object.keys(namespaces).forEach(key => {
-            newNamespaces[key] = isTap;
-        })
-        setNamespaces(newNamespaces);
-    }
-
     const updateTappingSettings = async () => {
         try {
             await api.setTapConfig(namespaces);
@@ -66,44 +58,6 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({isOpen, onClose, is
         }
     }
 
-    const toggleTapNamespace = (namespace) => {
-        const newNamespaces = {...namespaces};
-        newNamespaces[namespace] = !namespaces[namespace]
-        setNamespaces(newNamespaces);
-    }
-
-    const toggleAll = () => {
-        const isChecked = Object.values(namespaces).every(tap => tap === true);
-        setAllNamespacesTappedValue(!isChecked);
-    }
-
-    const filteredNamespaces = useMemo(() => {
-        return Object.keys(namespaces).filter((namespace) => namespace.includes(searchValue));
-    },[namespaces, searchValue])
-
-    const buildNamespacesTable = () => {
-        return <table cellPadding={5} style={{borderCollapse: "collapse"}}>
-            <thead>
-            <tr style={{borderBottomWidth: "2px"}}>
-                <th style={{width: 50}}><Checkbox checked={Object.values(namespaces).every(tap => tap === true)}
-                                                  onToggle={toggleAll}/></th>
-                <th>Namespace</th>
-            </tr>
-            </thead>
-            <tbody>
-            {filteredNamespaces?.map(namespace => {
-                    return <tr key={namespace}>
-                        <td style={{width: 50}}>
-                            <Checkbox checked={namespaces[namespace]} onToggle={() => toggleTapNamespace(namespace)}/>
-                        </td>
-                        <td>{namespace}</td>
-                    </tr>
-                }
-            )}
-            </tbody>
-        </table>
-    }
-
     const onModalClose = (reason) => {
         if(reason === 'backdropClick' && isFirstLogin) return;
         onClose();
@@ -133,9 +87,7 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({isOpen, onClose, is
                             <div style={{margin: "10px 0"}}>
                                 <input className={classes.textField + " searchNamespace"} placeholder="Search" value={searchValue}
                                        onChange={(event) => setSearchValue(event.target.value)}/></div>
-                            <div className="namespacesTable">
+                                <SelectList valuesListInput={namespaces} tableName={'Namespace'} multiSelect={true} searchValue={searchValue} setValues={setNamespaces} tabelClassName={'namespacesTable'}/>
-                                {buildNamespacesTable()}
-                            </div>
                         </div>
                     </>}
                 </div>

ui/src/components/UI/SelectList.tsx

@@ -0,0 +1,87 @@
+import { useMemo, useState } from "react";
+import Checkbox from "./Checkbox"
+
+export interface Props {
+    valuesListInput;
+    tableName:string;
+    multiSelect:boolean;
+    searchValue?:string;
+    setValues: (newValues)=> void;
+    tabelClassName
+}
+
+const SelectList: React.FC<Props> = ({valuesListInput,tableName,multiSelect=true,searchValue="",setValues,tabelClassName}) => {
+    const [valuesList, setValuesList] = useState(valuesListInput);
+
+    const toggleValues = (value) => {
+        if (!multiSelect){
+            unToggleAll(value);
+        }
+        else {
+            const newValues = {...valuesList};
+            newValues[value] = !valuesList[value];
+            setValuesList(newValues);
+            setValues(newValues);
+        }
+    }
+
+    const unToggleAll = (value) => {
+        const newValues = {};
+        Object.keys(valuesList).forEach(key => {
+            if (key !== value)
+                newValues[key] = false;
+            else
+                newValues[key] = true;
+        })
+        setValuesList(newValues);
+        setValues(newValues);
+    }
+
+    const toggleAll = () => {
+        const isChecked = Object.values(valuesList).every(tap => tap === true);
+        setAllCheckedValue(!isChecked);
+    }
+
+    const setAllCheckedValue = (isTap: boolean) => {
+        const newValues = {};
+        Object.keys(valuesList).forEach(key => {
+            newValues[key] = isTap;
+        })
+        setValuesList(newValues);
+        setValues(newValues);
+    }
+
+    const tableHead = multiSelect ? <tr style={{borderBottomWidth: "2px"}}>
+            <th style={{width: 50}}><Checkbox checked={Object.values(valuesList).every(tap => tap === true)}
+                onToggle={toggleAll}/></th>
+            <th>{tableName}</th>
+        </tr> : 
+        <tr style={{borderBottomWidth: "2px"}}>
+            <th>{tableName}</th>
+        </tr>
+
+    const filteredValues = useMemo(() => {
+        return Object.keys(valuesList).filter((listValue) => listValue.includes(searchValue));
+    },[valuesList, searchValue])
+
+        return <div className={tabelClassName}>
+                <table cellPadding={5} style={{borderCollapse: "collapse"}}>
+                    <thead>
+                    {tableHead}
+                    </thead>
+                    <tbody>
+                    {filteredValues?.map(listValue => {
+                            return <tr key={listValue}>
+                                <td style={{width: 50}}>
+                                    <Checkbox checked={valuesList[listValue]} onToggle={() => toggleValues(listValue)}/>
+                                </td>
+                                <td>{listValue}</td>
+                            </tr>
+                        }
+                    )}
+                    </tbody>
+            </table>
+        </div>
+}
+
+export default SelectList;