From 9f1f34bd9961d3484e45cb076e9563464c6c5aeb Mon Sep 17 00:00:00 2001
From: Benjamin Elo <beneloca@fb.com>
Date: Thu, 11 Jul 2019 07:40:47 -0700
Subject: [PATCH] Added search bar to navigation plugin

Summary:
Here I've started work on a search bar for the top of my plugin. Currently it supports navigation in a device by typing in an app uri and pressing the enter key or by pressing the send icon.

More features will be added as other components for this plugin are added. I have added a function stub for the bookmark button for now and the drop down icon is purely cosmetic at the moment.

Reviewed By: jknoxville

Differential Revision: D16183223

fbshipit-source-id: 0313d8c6e3a967c9400b9e9d3f24960e6a021a8c
---
 .../navigation/components/SearchBar.js        | 79 +++++++++++++++++++
 .../navigation/components/SearchBarButton.js  | 28 +++++++
 src/plugins/navigation/index.js               | 14 +++-
 3 files changed, 118 insertions(+), 3 deletions(-)
 create mode 100644 src/plugins/navigation/components/SearchBar.js
 create mode 100644 src/plugins/navigation/components/SearchBarButton.js

diff --git a/src/plugins/navigation/components/SearchBar.js b/src/plugins/navigation/components/SearchBar.js
new file mode 100644
index 000000000..2bfb15a32
--- /dev/null
+++ b/src/plugins/navigation/components/SearchBar.js
@@ -0,0 +1,79 @@
+/**
+ * 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 {
+  Component,
+  styled,
+  SearchBox,
+  SearchInput,
+  Toolbar,
+  Glyph,
+} from 'flipper';
+import SearchBarButton from './SearchBarButton';
+
+type Props = {|
+  onFavorite: (query: string) => void,
+  onNavigate: (query: string) => void,
+|};
+
+type State = {|
+  query: string,
+|};
+
+const SearchChevronContainer = styled('div')({
+  marginRight: 12,
+});
+
+class SearchBar extends Component<Props, State> {
+  state = {
+    query: '',
+  };
+
+  favorite = (query: string) => {
+    this.props.onFavorite(query);
+  };
+
+  navigateTo = (query: string) => {
+    this.props.onNavigate(query);
+  };
+
+  queryInputChanged = (event: SyntheticInputEvent<>) => {
+    this.setState({query: event.target.value});
+  };
+
+  render = () => {
+    return (
+      <Toolbar>
+        <SearchBox>
+          <SearchInput
+            onChange={this.queryInputChanged}
+            onKeyPress={e => {
+              if (e.key === 'Enter') {
+                this.navigateTo(this.state.query);
+              }
+            }}
+            placeholder="Navigate To..."
+          />
+          <SearchChevronContainer>
+            <Glyph name="chevron-down" size={12} />
+          </SearchChevronContainer>
+        </SearchBox>
+        <SearchBarButton
+          icon="send"
+          onClick={() => this.navigateTo(this.state.query)}
+        />
+        <SearchBarButton
+          icon="star"
+          onClick={() => this.favorite(this.state.query)}
+        />
+      </Toolbar>
+    );
+  };
+}
+
+export default SearchBar;
diff --git a/src/plugins/navigation/components/SearchBarButton.js b/src/plugins/navigation/components/SearchBarButton.js
new file mode 100644
index 000000000..7412142c6
--- /dev/null
+++ b/src/plugins/navigation/components/SearchBarButton.js
@@ -0,0 +1,28 @@
+/**
+ * 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
+ */
+
+import {Glyph, styled} from 'flipper';
+
+type Props = {|
+  icon: string,
+  onClick?: () => void,
+|};
+
+const SearchBarButton = styled('div')({
+  marginRight: 9,
+  marginTop: -3,
+  marginLeft: 4,
+  position: 'relative',
+});
+
+export default function(props: Props) {
+  return (
+    <SearchBarButton onClick={props.onClick}>
+      <Glyph name={props.icon} size={16} variant="outline" />
+    </SearchBarButton>
+  );
+}
diff --git a/src/plugins/navigation/index.js b/src/plugins/navigation/index.js
index 1e67800b5..c8bad0749 100644
--- a/src/plugins/navigation/index.js
+++ b/src/plugins/navigation/index.js
@@ -7,6 +7,7 @@
  */
 
 import {FlipperPlugin, FlexColumn} from 'flipper';
+import SearchBar from './components/SearchBar';
 
 type State = {||};
 
@@ -43,12 +44,19 @@ export default class extends FlipperPlugin<State, {}, PersistedState> {
     }
   };
 
+  navigateTo = (query: string) => {
+    this.getDevice().then(device => {
+      device.navigateToLocation(query);
+    });
+  };
+
   render() {
     return (
       <FlexColumn>
-        {this.props.persistedState.data.map((d, i) => (
-          <div key={i}>{JSON.stringify(d)}</div>
-        ))}
+        <SearchBar
+          onNavigate={this.navigateTo}
+          onFavorite={(query: string) => {}}
+        />
       </FlexColumn>
     );
   }