From 5850a250fe06645c59cc287ebb7fc4b22e583a93 Mon Sep 17 00:00:00 2001
From: Amit Fainholts <amit@up9.com>
Date: Tue, 25 Jan 2022 14:29:45 +0200
Subject: [PATCH] Radio buttons added to selectList with single select

---
 ui/src/components/UI/Radio.tsx      | 17 +++++++++++++++++
 ui/src/components/UI/SelectList.tsx |  6 ++++--
 2 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 ui/src/components/UI/Radio.tsx

diff --git a/ui/src/components/UI/Radio.tsx b/ui/src/components/UI/Radio.tsx
new file mode 100644
index 000000000..23a71e1d9
--- /dev/null
+++ b/ui/src/components/UI/Radio.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+
+export interface Props {
+    checked: boolean;
+    onToggle: (checked:boolean) => any;
+}
+
+const Radio: React.FC<Props> = ({checked, onToggle}) => {
+
+    return (
+        <div>
+            <input style={{cursor: "pointer"}} type="radio" checked={checked} onChange={(event) => onToggle(event.target.checked)}/>
+        </div>
+    );
+};
+
+export default Radio;
diff --git a/ui/src/components/UI/SelectList.tsx b/ui/src/components/UI/SelectList.tsx
index 0659de6b2..6acd376c1 100644
--- a/ui/src/components/UI/SelectList.tsx
+++ b/ui/src/components/UI/SelectList.tsx
@@ -1,5 +1,6 @@
 import { useMemo, useState } from "react";
 import Checkbox from "./Checkbox"
+import Radio from "./Radio";
 
 export interface Props {
     valuesListInput;
@@ -73,10 +74,11 @@ const SelectList: React.FC<Props> = ({valuesListInput,tableName,multiSelect=true
                     {filteredValues?.map(listValue => {
                             return <tr key={listValue}>
                                 <td style={{width: 50}}>
-                                    <Checkbox checked={valuesList[listValue]} onToggle={() => toggleValues(listValue)}/>
+                                    {multiSelect && <Checkbox checked={valuesList[listValue]} onToggle={() => toggleValues(listValue)}/>}
+                                    {!multiSelect && <Radio checked={valuesList[listValue]} onToggle={() => toggleValues(listValue)}/>}
                                 </td>
                                 <td>{listValue}</td>
-                            </tr>
+                            </tr>   
                         }
                     )}
                     </tbody>