feat: scrollable naics list

bcgov · Apr 8, 2021 · 7190466 · 7190466
1 parent afd0583
commit 7190466
Showing 1 changed file with 42 additions and 29 deletions.
diff --git a/app/components/Admin/NaicsCodeSelectionComponent.tsx b/app/components/Admin/NaicsCodeSelectionComponent.tsx
@@ -13,34 +13,47 @@ export const NaicsCodeSelectionComponent: React.FunctionComponent<Props> = ({
   const router = useRouter();
 
   return (
-    <ListGroup variant="flush">
-      {naicsCodes.map(({code, description, id}) => (
-        <Link
-          key={id}
-          prefetch={false}
-          href={{
-            pathname: router.pathname,
-            query: {
-              ...router.query,
-              naicsCodeId: id
-            }
-          }}
-        >
-          <ListGroup.Item action active={router.query?.naicsCodeId === id}>
-            {/* <table>
-              <tbody>
-                <tr>
-                  <td>{code}</td>
-                  <td style={{paddingLeft: '1em'}}>{description}</td>
-                </tr>
-              </tbody>
-            </table> */}
-            {description}
-            <br />
-            <b>{code}</b>
-          </ListGroup.Item>
-        </Link>
-      ))}
-    </ListGroup>
+    <>
+      <div className="scrollable" tabIndex={0}>
+        <ListGroup variant="flush">
+          {naicsCodes.map(({code, description, id}) => (
+            <Link
+              key={id}
+              prefetch={false}
+              href={{
+                pathname: router.pathname,
+                query: {
+                  ...router.query,
+                  naicsCodeId: id
+                }
+              }}
+            >
+              <ListGroup.Item action active={router.query?.naicsCodeId === id}>
+                {description}
+                <br />
+                <b>{code}</b>
+              </ListGroup.Item>
+            </Link>
+          ))}
+        </ListGroup>
+      </div>
+      <style jsx>
+        {`
+          .scrollable {
+            overflow-y: scroll;
+            max-height: calc(100vh - 108px - 60px - 2.4rem - 146px);
+          }
+          .scrollable::-webkit-scrollbar {
+            -webkit-appearance: none;
+            width: 8px;
+          }
+          .scrollable::-webkit-scrollbar-thumb {
+            border-radius: 4px;
+            background-color: rgba(0, 0, 0, 0.5);
+            box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+          }
+        `}
+      </style>
+    </>
   );
 };