Added dropdown sheet for nav bar

Summary:
Here I've added a drop down sheet for the nav bar. Currently it only supports showing the first five bookmarks with no filtering.

I use a custom hook to handle navigation with the keyboard in the nav bar, so that works well.

So you can use the arrow keys to select a uri from the dropdown, or by using the mouse.

Reviewed By: danielbuechele

Differential Revision: D16542218

fbshipit-source-id: 4c242fd3097297fc599b36523bb4821bbc172f88

src/plugins/navigation/components/AutoCompleteSheet.js

@@ -0,0 +1,101 @@
+/**
+ * Copyright 2018-present Facebook.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @format
+ * @flow strict-local
+ */
+
+import {styled} from 'flipper';
+import {useEffect, useState} from 'react';
+
+import type {Bookmark} from '../flow-types';
+
+type Props = {|
+  bookmarks: Map<string, Bookmark>,
+  onHighlighted: string => void,
+  onNavigate: string => void,
+|};
+
+const MAX_ITEMS = 5;
+
+const AutoCompleteSheetContainer = styled('div')({
+  width: '100%',
+  overflowY: 'scroll',
+  position: 'absolute',
+  top: '100%',
+  backgroundColor: 'white',
+  zIndex: 1,
+  borderBottomRightRadius: 10,
+  borderBottomLeftRadius: 10,
+  boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
+});
+
+const SheetItem = styled('div')({
+  padding: 5,
+  textOverflow: 'ellipsis',
+  overflowX: 'hidden',
+  whiteSpace: 'nowrap',
+  '&.selected': {
+    backgroundColor: 'rgba(155, 155, 155, 0.2)',
+  },
+  '&:hover': {
+    backgroundColor: 'rgba(155, 155, 155, 0.2)',
+  },
+});
+
+// Menu Item Navigation Hook
+const useItemNavigation = (
+  bookmarks: Array<Bookmark>,
+  onHighlighted: string => void,
+) => {
+  const [selectedItem, setSelectedItem] = useState(-1);
+
+  const handleKeyPress = ({key}) => {
+    switch (key) {
+      case 'ArrowDown': {
+        const newSelectedItem =
+          selectedItem < MAX_ITEMS - 1 ? selectedItem + 1 : selectedItem;
+        setSelectedItem(newSelectedItem);
+        onHighlighted(bookmarks[newSelectedItem].uri);
+        break;
+      }
+      case 'ArrowUp': {
+        const newSelectedItem =
+          selectedItem > 0 ? selectedItem - 1 : selectedItem;
+        setSelectedItem(newSelectedItem);
+        onHighlighted(bookmarks[newSelectedItem].uri);
+        break;
+      }
+      default:
+        break;
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('keydown', handleKeyPress);
+    return () => {
+      window.removeEventListener('keydown', handleKeyPress);
+    };
+  });
+
+  return selectedItem;
+};
+
+export default (props: Props) => {
+  const {bookmarks, onHighlighted, onNavigate} = props;
+  const filteredBookmarks = [...bookmarks.values()].slice(0, MAX_ITEMS);
+  const selectedItem = useItemNavigation(filteredBookmarks, onHighlighted);
+  return (
+    <AutoCompleteSheetContainer>
+      {filteredBookmarks.map((bookmark, idx) => (
+        <SheetItem
+          className={idx === selectedItem ? 'selected' : null}
+          key={bookmark.uri}
+          onMouseDown={() => onNavigate(bookmark.uri)}>
+          {bookmark.uri}
+        </SheetItem>
+      ))}
+    </AutoCompleteSheetContainer>
+  );
+};

src/plugins/navigation/components/SearchBar.js

@@ -14,7 +14,7 @@ import {
   Toolbar,
   Glyph,
 } from 'flipper';
-import {IconButton, FavoriteButton} from './';
+import {AutoCompleteSheet, IconButton, FavoriteButton} from './';
 
 import type {Bookmark} from '../flow-types';
 
@@ -26,6 +26,8 @@ type Props = {|
 
 type State = {|
   query: string,
+  inputFocused: boolean,
+  autoCompleteSheetOpen: boolean,
 |};
 
 const IconContainer = styled('div')({
@@ -44,12 +46,24 @@ const IconContainer = styled('div')({
   },
 });
 
-const SearchChevronContainer = styled('div')({
+const ToolbarContainer = styled('div')({
-  marginRight: 12,
+  '.drop-shadow': {
+    boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
+  },
+});
+
+const SearchInputContainer = styled('div')({
+  height: '100%',
+  width: '100%',
+  marginLeft: 5,
+  marginRight: 9,
+  position: 'relative',
 });
 
 class SearchBar extends Component<Props, State> {
   state = {
+    inputFocused: false,
+    autoCompleteSheetOpen: false,
     query: '',
   };
 
@@ -58,6 +72,7 @@ class SearchBar extends Component<Props, State> {
   };
 
   navigateTo = (query: string) => {
+    this.setState({query});
     this.props.onNavigate(query);
   };
 
@@ -67,39 +82,61 @@ class SearchBar extends Component<Props, State> {
 
   render = () => {
     const {bookmarks} = this.props;
-    const {query} = this.state;
+    const {autoCompleteSheetOpen, inputFocused, query} = this.state;
     return (
-      <Toolbar>
+      <ToolbarContainer>
-        <SearchBox>
+        <Toolbar>
-          <SearchInput
+          <SearchBox className={inputFocused ? 'drop-shadow' : null}>
-            onChange={this.queryInputChanged}
+            <SearchInputContainer>
-            onKeyPress={e => {
+              <SearchInput
-              if (e.key === 'Enter') {
+                value={query}
-                this.navigateTo(this.state.query);
+                onBlur={() =>
-              }
+                  this.setState({
-            }}
+                    autoCompleteSheetOpen: false,
-            placeholder="Navigate To..."
+                    inputFocused: false,
-          />
+                  })
-          <SearchChevronContainer>
+                }
-            <Glyph name="chevron-down" size={12} />
+                onFocus={() =>
-          </SearchChevronContainer>
+                  this.setState({
-        </SearchBox>
+                    autoCompleteSheetOpen: true,
-        {query.length > 0 ? (
+                    inputFocused: true,
-          <IconContainer>
+                  })
-            <IconButton
+                }
-              icon="send"
+                onChange={this.queryInputChanged}
-              size={16}
+                onKeyPress={e => {
-              outline={true}
+                  if (e.key === 'Enter') {
-              onClick={() => this.navigateTo(this.state.query)}
+                    this.navigateTo(this.state.query);
-            />
+                    e.target.blur();
-            <FavoriteButton
+                  }
-              size={16}
+                }}
-              highlighted={bookmarks.has(query)}
+                placeholder="Navigate To..."
-              onClick={() => this.favorite(this.state.query)}
+              />
-            />
+              {autoCompleteSheetOpen ? (
-          </IconContainer>
+                <AutoCompleteSheet
-        ) : null}
+                  bookmarks={bookmarks}
-      </Toolbar>
+                  onNavigate={this.navigateTo}
+                  onHighlighted={newQuery => this.setState({query: newQuery})}
+                />
+              ) : null}
+            </SearchInputContainer>
+          </SearchBox>
+          {query.length > 0 ? (
+            <IconContainer>
+              <IconButton
+                icon="send"
+                size={16}
+                outline={true}
+                onClick={() => this.navigateTo(this.state.query)}
+              />
+              <FavoriteButton
+                size={16}
+                highlighted={bookmarks.has(query)}
+                onClick={() => this.favorite(this.state.query)}
+              />
+            </IconContainer>
+          ) : null}
+        </Toolbar>
+      </ToolbarContainer>
     );
   };
 }

src/plugins/navigation/components/index.js

@@ -6,6 +6,7 @@
  * @flow strict-local
  */
 
+export {default as AutoCompleteSheet} from './AutoCompleteSheet';
 export {default as BookmarksSidebar} from './BookmarksSidebar';
 export {default as FavoriteButton} from './FavoriteButton';
 export {default as IconButton} from './IconButton';