Added SaveBookmarkDialog component

Summary: This adds a dialog box component that allow saving of bookmarks.

Reviewed By: jknoxville

Differential Revision: D16491842

fbshipit-source-id: fc8332bba491ad0583564fd6a85b5ad225bbd461

src/plugins/navigation/components/SaveBookmarkDialog.js

@@ -0,0 +1,82 @@
+/**
+ * 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 {Button, FlexColumn, Input, Sheet, styled} from 'flipper';
+
+type Props = {|
+  uri: ?string,
+  shouldShow: boolean,
+  onHide: ?() => void,
+  onSubmit: ?(uri: string) => void,
+|};
+
+const Container = styled(FlexColumn)({
+  padding: 10,
+  width: 400,
+});
+
+const Title = styled('div')({
+  fontWeight: '500',
+  marginTop: 8,
+  marginLeft: 2,
+  marginBottom: 8,
+});
+
+const URIContainer = styled('div')({
+  marginLeft: 2,
+  marginBottom: 8,
+  overflowWrap: 'break-word',
+});
+
+const ButtonContainer = styled('div')({
+  marginLeft: 'auto',
+});
+
+const NameInput = styled(Input)({
+  margin: 0,
+  marginBottom: 10,
+  height: 30,
+});
+
+export default (props: Props) => {
+  const {shouldShow, onHide, onSubmit, uri} = props;
+  if (uri == null || !shouldShow) {
+    return null;
+  } else {
+    return (
+      <Sheet onHideSheet={onHide}>
+        {hide => {
+          return (
+            <Container>
+              <Title>Save to bookmarks...</Title>
+              <NameInput placeholder="Name..." />
+              <URIContainer>{uri}</URIContainer>
+              <ButtonContainer>
+                <Button onClick={() => hide()} compact padded>
+                  Cancel
+                </Button>
+                <Button
+                  type="primary"
+                  onClick={() => {
+                    hide();
+                    if (onSubmit != null) {
+                      onSubmit(uri);
+                    }
+                  }}
+                  compact
+                  padded>
+                  Save
+                </Button>
+              </ButtonContainer>
+            </Container>
+          );
+        }}
+      </Sheet>
+    );
+  }
+};

src/plugins/navigation/components/index.js

@@ -10,6 +10,7 @@ export {default as BookmarksSidebar} from './BookmarksSidebar';
 export {default as FavoriteButton} from './FavoriteButton';
 export {default as IconButton} from './IconButton';
 export {default as NavigationInfoBox} from './NavigationInfoBox';
+export {default as SaveBookmarkDialog} from './SaveBookmarkDialog';
 export {default as ScrollableFlexColumn} from './ScrollableFlexColumn';
 export {default as SearchBar} from './SearchBar';
 export {default as Timeline} from './Timeline';