Push to prod (#201)

* CEC-2056 safari map (#186) * CEC-2056 Fix Safari map popup * Snapshot serializer for Private styles * Combine serializers * CEC-2207 Add is-online filter for vehicles list (#187) * Add OptionsDropdown component * Add is-online filter * CEC-2237 Track sign in and keys (#188) * Update stage (#189) * CEC-2056 safari map (#186) * CEC-2056 Fix Safari map popup * Snapshot serializer for Private styles * Combine serializers * CEC-2207 Add is-online filter for vehicles list (#187) * Add OptionsDropdown component * Add is-online filter * CEC-2237 Track sign in and keys (#188) Co-authored-by: arpanetus <arpanetus@protonmail.com> * CEC-2281 Update certificate form (#190) * CEC-2281 Fix cert name * CEC-2360 Fix filename display and add manifest type (#191) * CEC-2360 Fix filename display and add manifest type * const * Push to Stage (#200) * CEC-2144, CEC-2338 Add deploy by fleets and fix fleets table (#192) * Add fix for fleets search * Decompose fleets table * Add deploy by fleets * Add snapshots * CEC-2385 Only show software updates (#193) * CEC-2385 Only show software updates * Update browser list * update threshold * Clean up * CEC-2291 Remote Commands (#194) * CEC-2378 Add fix for fleet vehicles' search * CEC-1235 Fix fleet name update (#196) Co-authored-by: arpanetus <arpanetus@protonmail.com> Co-authored-by: arpanetus <arpanetus@protonmail.com>
2022-09-19 15:55:55 -07:00
parent d995361b9f
commit 56043dc375
70 changed files with 3059 additions and 3416 deletions
--- a/src/components/Controls/OptionsDropdown/index.jsx
+++ b/src/components/Controls/OptionsDropdown/index.jsx
@@ -0,0 +1,77 @@
+import React, {useEffect, useRef, useState} from "react";
+import {ClickAwayListener, Grow, IconButton, MenuList, Paper, Popper} from "@material-ui/core";
+import TuneIcon from "@material-ui/icons/Tune";
+
+
+const OptionsDropdown = ({listId, children}) => {
+  const [open, setOpen] = useState(false);
+  const anchorRef = useRef(null);
+  const prevOpen = useRef(open);
+
+  const handleToggle = () => {
+    setOpen((pOpen) => !pOpen);
+  };
+
+  const handleClose = (event) => {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  const handleListKeyDown = (event) => {
+    if (event.key === 'Tab') {
+      event.preventDefault();
+      setOpen(false);
+    }
+  }
+
+  useEffect(() => {
+    if (prevOpen.current === true && open === false) {
+      anchorRef.current.focus();
+    }
+
+    prevOpen.current = open;
+  }, [open]);
+
+  return (<div>
+      <IconButton
+        ref={anchorRef}
+        aria-controls={open ? listId : undefined}
+        aria-haspopup="true"
+        onClick={handleToggle}
+      >
+        <TuneIcon />
+      </IconButton>
+      <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition>
+        {({TransitionProps, placement}) => (
+          <Grow
+            {...TransitionProps}
+            style={{
+              transformOrigin:
+                placement ===
+                'bottom' ?
+                  'center top' :
+                  'center bottom'
+            }}
+          >
+            <Paper>
+              <ClickAwayListener onClickAway={handleClose}>
+                <MenuList
+                  autoFocusItem={open}
+                  id={listId}
+                  onKeyDown={handleListKeyDown}
+                >
+                  {children}
+                </MenuList>
+              </ClickAwayListener>
+            </Paper>
+          </Grow>
+        )}
+      </Popper>
+    </div>
+  );
+}
+
+export default OptionsDropdown;