generic Sheet component

Summary: this moves the `Sheet` into its own component, so it can be reused for other places than the bug reporter.

Reviewed By: passy

Differential Revision: D13468275

fbshipit-source-id: 5f6d07a54dda078bd08a4c4cd31a41c61b58a76f

src/App.js

@@ -14,6 +14,7 @@ import MainSidebar from './chrome/MainSidebar.js';
 import BugReporterDialog from './chrome/BugReporterDialog.js';
 import ErrorBar from './chrome/ErrorBar.js';
 import PluginContainer from './PluginContainer.js';
+import Sheet from './chrome/Sheet.js';
 import {ipcRenderer} from 'electron';
 
 import type Logger from './fb-stubs/Logger.js';
@@ -48,7 +49,14 @@ export class App extends React.Component<Props> {
     return (
       <FlexColumn grow={true}>
         <TitleBar />
-        <BugReporterDialog bugReporter={this.props.bugReporter} />
+        <Sheet>
+          {onHide => (
+            <BugReporterDialog
+              bugReporter={this.props.bugReporter}
+              onHide={onHide}
+            />
+          )}
+        </Sheet>
         <FlexRow grow={true}>
           {this.props.leftSidebarVisible && <MainSidebar />}
           {this.props.selectedDevice ? (

src/chrome/BugReporterDialog.js

@@ -7,9 +7,7 @@
 
 import type BugReporter from '../fb-stubs/BugReporter.js';
 import type {FlipperDevicePlugin, FlipperPlugin} from '../plugin';
-import {toggleBugDialogVisible} from '../reducers/application.js';
+import {Fragment, Component} from 'react';
-import {Component} from 'react';
-import {Transition} from 'react-transition-group';
 import {connect} from 'react-redux';
 import {
   Button,
@@ -18,15 +16,17 @@ import {
   Input,
   FlexColumn,
   FlexRow,
+  FlexCenter,
   Textarea,
   Text,
   Glyph,
-  FlexCenter,
   styled,
 } from 'flipper';
 
 const Container = styled(FlexColumn)({
   padding: 10,
+  width: 400,
+  height: 300,
 });
 
 const Icon = styled(Glyph)({
@@ -53,26 +53,6 @@ const textareaStyle = {
   marginBottom: 10,
 };
 
-const DialogContainer = styled('div')(({state}) => ({
-  transform: `translateY(${
-    state === 'entering' || state === 'exiting' ? '-110' : ''
-  }%)`,
-  transition: '.3s transform',
-  width: 400,
-  height: 300,
-  position: 'absolute',
-  left: '50%',
-  marginLeft: -200,
-  top: 38,
-  zIndex: 2,
-  backgroundColor: '#EFEEEF',
-  border: '1px solid #C6C6C6',
-  borderTop: 'none',
-  borderBottomLeftRadius: 2,
-  borderBottomRightRadius: 2,
-  boxShadow: '0 5px 13px rgba(0, 0, 0, 0.2)',
-}));
-
 const TitleInput = styled(Input)({
   ...textareaStyle,
   height: 30,
@@ -112,9 +92,8 @@ type State = {|
 
 type Props = {|
   bugReporter: BugReporter,
-  toggleBugDialogVisible: (visible: boolean) => mixed,
   activePlugin: ?Class<FlipperPlugin<> | FlipperDevicePlugin<>>,
-  bugDialogVisible: boolean,
+  onHide: () => mixed,
 |};
 
 class BugReporterDialog extends Component<Props, State> {
@@ -129,19 +108,6 @@ class BugReporterDialog extends Component<Props, State> {
   titleRef: HTMLElement;
   descriptionRef: HTMLElement;
 
-  componentDidMount() {
-    document.addEventListener('keydown', this.onKeyDown);
-  }
-  componentWillUnmount() {
-    document.removeEventListener('keydown', this.onKeyDown);
-  }
-
-  onKeyDown = (e: KeyboardEvent) => {
-    if (this.props.bugDialogVisible && e.key === 'Escape') {
-      this.onCancel();
-    }
-  };
-
   onDescriptionChange = (e: SyntheticInputEvent<HTMLInputElement>) => {
     this.setState({description: e.target.value});
   };
@@ -215,7 +181,7 @@ class BugReporterDialog extends Component<Props, State> {
       title: '',
       description: '',
     });
-    this.props.toggleBugDialogVisible(false);
+    this.props.onHide();
   };
 
   render() {
@@ -251,7 +217,7 @@ class BugReporterDialog extends Component<Props, State> {
       );
     } else {
       content = (
-        <Container grow={true}>
+        <Fragment>
           <Title>Report a bug...</Title>
           <TitleInput
             placeholder="Title..."
@@ -322,15 +288,11 @@ class BugReporterDialog extends Component<Props, State> {
               </Button>
             </SubmitButtonContainer>
           </Footer>
-        </Container>
+        </Fragment>
       );
     }
 
-    return (
+    return <Container>{content}</Container>;
-      <Transition in={this.props.bugDialogVisible} timeout={300} unmountOnExit>
-        {state => <DialogContainer state={state}>{content}</DialogContainer>}
-      </Transition>
-    );
   }
 }
 
@@ -339,13 +301,8 @@ export default connect(
   ({
     plugins: {devicePlugins, clientPlugins},
     connections: {selectedPlugin},
-    application: {bugDialogVisible},
   }) => ({
-    bugDialogVisible,
     activePlugin:
       devicePlugins.get(selectedPlugin) || clientPlugins.get(selectedPlugin),
   }),
-  {
-    toggleBugDialogVisible,
-  },
 )(BugReporterDialog);

src/chrome/Sheet.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
+ */
+
+import {Component} from 'react';
+import {Transition} from 'react-transition-group';
+import {toggleBugDialogVisible} from '../reducers/application.js';
+import {connect} from 'react-redux';
+import {styled} from 'flipper';
+
+const DialogContainer = styled('div')(({state}) => ({
+  transform: `translateY(${
+    state === 'entering' || state === 'exiting' ? '-110' : ''
+  }%)`,
+  transition: '.3s transform',
+  position: 'absolute',
+  left: '50%',
+  marginLeft: -200,
+  top: 38,
+  zIndex: 2,
+  backgroundColor: '#EFEEEF',
+  border: '1px solid #C6C6C6',
+  borderTop: 'none',
+  borderBottomLeftRadius: 2,
+  borderBottomRightRadius: 2,
+  boxShadow: '0 5px 13px rgba(0, 0, 0, 0.2)',
+}));
+
+type Props = {|
+  sheetVisible: boolean,
+  onHideSheet: () => mixed,
+  children: (onHide: () => mixed) => any,
+|};
+
+class Sheet extends Component<Props> {
+  componentDidMount() {
+    document.addEventListener('keydown', this.onKeyDown);
+  }
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.onKeyDown);
+  }
+
+  onKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      this.onHide();
+    }
+  };
+
+  onHide = () => {
+    this.props.onHideSheet();
+  };
+
+  render() {
+    return (
+      <Transition in={this.props.sheetVisible} timeout={300} unmountOnExit>
+        {state => (
+          <DialogContainer state={state}>
+            {this.props.children(this.onHide)}
+          </DialogContainer>
+        )}
+      </Transition>
+    );
+  }
+}
+/* $FlowFixMe(>=0.86.0) This
+ * comment suppresses an error found when Flow v0.86 was
+ * deployed. To see the error, delete this comment and
+ * run Flow. */
+export default connect(
+  ({application: {bugDialogVisible}}) => ({
+    sheetVisible: bugDialogVisible,
+  }),
+  {
+    onHideSheet: () => toggleBugDialogVisible(false),
+  },
+)(Sheet);