From 7d9ae020afed94e664736beaca2cd1664629f7f4 Mon Sep 17 00:00:00 2001
From: prisar <prisar230@gmail.com>
Date: Sat, 22 Jul 2023 15:14:14 +0530
Subject: [PATCH] add scrollbar to dropdown

---
 src/App.css                |  6 +++++-
 src/components/Devices.css | 20 +++++++++++++++++++-
 src/components/Devices.js  | 28 ++++++++++++++++++++++++++++
 3 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/src/App.css b/src/App.css
index fad4f40..9522cb4 100644
--- a/src/App.css
+++ b/src/App.css
@@ -28,7 +28,11 @@ body {
   color: white;
 }
 
-::-webkit-scrollbar {
+/* ::-webkit-scrollbar {
+  display: none;
+} */
+
+.dashboard-title::-webkit-scrollbar {
   display: none;
 }
 
diff --git a/src/components/Devices.css b/src/components/Devices.css
index 7d922ee..4c0dd02 100644
--- a/src/components/Devices.css
+++ b/src/components/Devices.css
@@ -4,7 +4,7 @@
     background: rgb(215, 192, 252);
     color: black;
     font-size: 30px;
-  }
+}
 
 .device-dropdown {
     width: 15vw;
@@ -12,18 +12,36 @@
     font-weight: 600;
 }
 
+.device-dropdown::-webkit-scrollbar {
+    background: black;
+    width: 5px;
+    height: 5px;
+}
+
 .day-dropdown {
     width: 20vw;
     margin: 5px;
     font-weight: 600;
 }
 
+.day-dropdown::-webkit-scrollbar {
+    background: black;
+    width: 5px;
+    height: 5px;
+}
+
 .test-dropdown {
     width: 20vw;
     margin: 5px;
     font-weight: 600;
 }
 
+.test-dropdown::-webkit-scrollbar {
+    background: black;
+    width: 5px;
+    height: 5px;
+}
+
 .dropdown-group {
     display: flex;
     flex-direction: row;
diff --git a/src/components/Devices.js b/src/components/Devices.js
index 53aaefc..4deb4ed 100644
--- a/src/components/Devices.js
+++ b/src/components/Devices.js
@@ -4,11 +4,32 @@ import * as _ from 'lodash';
 import Dropdown from 'react-dropdown';
 import 'react-dropdown/style.css';
 import moment from 'moment';
+import Select from 'react-select';
 
 import DeviceGraph from "./DeviceGraph";
 import db from '../firebase';
 import './Devices.css';
 
+const styles = {
+    menuList: (base) => ({
+        ...base,
+
+        "::-webkit-scrollbar": {
+            width: "4px",
+            height: "0px",
+        },
+        "::-webkit-scrollbar-track": {
+            background: "#f1f1f1"
+        },
+        "::-webkit-scrollbar-thumb": {
+            background: "#888"
+        },
+        "::-webkit-scrollbar-thumb:hover": {
+            background: "#555"
+        }
+    })
+};
+
 const Devices = () => {
     const [device, setDevice] = useState("Select a device");
     const [testDate, setTestDate] = useState("Select a test date");
@@ -55,6 +76,8 @@ const Devices = () => {
         setShowGraph(true);
     }
 
+    const menuPortalTarget = document.getElementById('root');
+
     useEffect(() => {
         if (!allTests) {
             const q = query(collection(db, "testData"));
@@ -86,6 +109,11 @@ const Devices = () => {
                 <Dropdown className='device-dropdown' options={devices} onChange={changeDevice} value={device} placeholder="Select an device" />
                 <Dropdown className='day-dropdown' options={days} onChange={changeTestDate} value={testDate} placeholder="Select an test date" />
                 <Dropdown className='test-dropdown' options={tests} onChange={changeTest} value={curTest} placeholder="Select an test" />
+                
+                {/* <Select className='device-dropdown' options={devices.map(x => { return { value: x, label: x }; })} menuPlacement='auto' maxMenuHeight={250} menuShouldScrollIntoView={true} onChange={changeDevice} />
+                <Select className='day-dropdown' options={days.map(x => { return { value: x, label: x }; })} menuPlacement='auto' maxMenuHeight={250} menuShouldScrollIntoView={true} onChange={changeTestDate} />
+                <Select className='test-dropdown' options={tests.map(x => { return { value: x, label: x }; })} menuPlacement='auto' maxMenuHeight={220} menuShouldScrollIntoView={true} onChange={changeTestDate} /> */}
+
                 <button className='clear-button' onClick={() => { setCurTest(null); setCurTestData(null); }}>Clear</button>
             </div>