From fa9b85b065faea6f90611b854024d51b4c73220e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20B=C3=BCchele?= Date: Thu, 20 Dec 2018 06:07:55 -0800 Subject: [PATCH] showing multiple sheets Summary: The sheet was only used for the bug-reporter before and we had an explicit boolean flag in the redux store to keep track if the bug reporter is shown. Changing this it an `activeSheet` property, which allows us to show arbitrary sheets, while making sure to only show one at a time. Reviewed By: jknoxville Differential Revision: D13516985 fbshipit-source-id: 3e83f719e2b61d0b2229268ebfdc910123b403d2 --- src/App.js | 30 ++++++++++------ src/__tests__/App.electron.js | 4 +-- src/chrome/Sheet.js | 46 ++++++++++++++++++------ src/chrome/TitleBar.js | 24 ++++--------- src/reducers/application.js | 68 +++++++++++++++++++---------------- 5 files changed, 98 insertions(+), 74 deletions(-) diff --git a/src/App.js b/src/App.js index 531c28299..e1123b05f 100644 --- a/src/App.js +++ b/src/App.js @@ -20,14 +20,15 @@ import {ipcRenderer} from 'electron'; import type Logger from './fb-stubs/Logger.js'; import type BugReporter from './fb-stubs/BugReporter.js'; import type BaseDevice from './devices/BaseDevice.js'; +import type {ActiveSheet} from './reducers/application.js'; type Props = { logger: Logger, bugReporter: BugReporter, leftSidebarVisible: boolean, - pluginManagerVisible: boolean, selectedDevice: ?BaseDevice, error: ?string, + activeSheet: ActiveSheet, }; export class App extends React.Component { @@ -45,18 +46,25 @@ export class App extends React.Component { ipcRenderer.send('getLaunchTime'); ipcRenderer.send('componentDidMount'); } + + getSheet = (onHide: () => mixed) => { + if (this.props.activeSheet === 'BUG_REPORTER') { + return ( + + ); + } else { + return null; + } + }; + render() { return ( - - {onHide => ( - - )} - + {this.getSheet} {this.props.leftSidebarVisible && } {this.props.selectedDevice ? ( @@ -76,12 +84,12 @@ export class App extends React.Component { * run Flow. */ export default connect( ({ - application: {pluginManagerVisible, leftSidebarVisible}, + application: {leftSidebarVisible, activeSheet}, connections: {selectedDevice, error}, }) => ({ - pluginManagerVisible, leftSidebarVisible, selectedDevice, + activeSheet, error, }), )(App); diff --git a/src/__tests__/App.electron.js b/src/__tests__/App.electron.js index 47501f542..de6c268ac 100644 --- a/src/__tests__/App.electron.js +++ b/src/__tests__/App.electron.js @@ -26,11 +26,9 @@ test('Empty app state matches snapshot', () => { logger={logger} bugReporter={bugReporter} leftSidebarVisible={false} - bugDialogVisible={false} - pluginManagerVisible={false} selectedDevice={null} - toggleBugDialogVisible={() => {}} error={null} + activeSheet={null} /> , ); diff --git a/src/chrome/Sheet.js b/src/chrome/Sheet.js index 02856473c..52cbc7e9c 100644 --- a/src/chrome/Sheet.js +++ b/src/chrome/Sheet.js @@ -7,18 +7,19 @@ import {Component} from 'react'; import {Transition} from 'react-transition-group'; -import {toggleBugDialogVisible} from '../reducers/application.js'; +import {setActiveSheet} 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' : '' + transform: `translate(-50%, ${ + state === 'entering' || state === 'exiting' || state === 'exited' + ? '-110' + : '0' }%)`, transition: '.3s transform', position: 'absolute', left: '50%', - marginLeft: -200, top: 38, zIndex: 2, backgroundColor: '#EFEEEF', @@ -31,14 +32,33 @@ const DialogContainer = styled('div')(({state}) => ({ type Props = {| sheetVisible: boolean, - onHideSheet: () => mixed, + onHideSheet: () => void, children: (onHide: () => mixed) => any, |}; -class Sheet extends Component { +type State = {| + isVisible: boolean, +|}; + +class Sheet extends Component { + state = { + isVisible: this.props.sheetVisible, + }; + + static getDerivedStateFromProps(props: Props, state: State) { + if (!props.sheetVisible) { + return { + isVisible: true, + }; + } else { + return null; + } + } + componentDidMount() { document.addEventListener('keydown', this.onKeyDown); } + componentWillUnmount() { document.removeEventListener('keydown', this.onKeyDown); } @@ -50,12 +70,16 @@ class Sheet extends Component { }; onHide = () => { - this.props.onHideSheet(); + this.setState({isVisible: false}); }; render() { return ( - + this.props.onHideSheet()} + unmountOnExit> {state => ( {this.props.children(this.onHide)} @@ -70,10 +94,10 @@ class Sheet extends Component { * deployed. To see the error, delete this comment and * run Flow. */ export default connect( - ({application: {bugDialogVisible}}) => ({ - sheetVisible: bugDialogVisible, + ({application: {activeSheet}}) => ({ + sheetVisible: Boolean(activeSheet), }), { - onHideSheet: () => toggleBugDialogVisible(false), + onHideSheet: () => setActiveSheet(null), }, )(Sheet); diff --git a/src/chrome/TitleBar.js b/src/chrome/TitleBar.js index 6519ef139..0944e9329 100644 --- a/src/chrome/TitleBar.js +++ b/src/chrome/TitleBar.js @@ -5,6 +5,8 @@ * @format */ +import type {ActiveSheet} from '../reducers/application'; + import { colors, Button, @@ -12,15 +14,13 @@ import { FlexRow, Component, Spacer, - GK, styled, } from 'flipper'; import {connect} from 'react-redux'; import { - toggleBugDialogVisible, + setActiveSheet, toggleLeftSidebarVisible, toggleRightSidebarVisible, - togglePluginManagerVisible, } from '../reducers/application.js'; import DevicesButton from './DevicesButton.js'; import ScreenCaptureButtons from './ScreenCaptureButtons.js'; @@ -52,11 +52,9 @@ type Props = {| leftSidebarVisible: boolean, rightSidebarVisible: boolean, rightSidebarAvailable: boolean, - pluginManagerVisible: boolean, - toggleBugDialogVisible: (visible?: boolean) => void, toggleLeftSidebarVisible: (visible?: boolean) => void, toggleRightSidebarVisible: (visible?: boolean) => void, - togglePluginManagerVisible: (visible?: boolean) => void, + setActiveSheet: (sheet: ActiveSheet) => void, |}; class TitleBar extends Component { @@ -70,20 +68,11 @@ class TitleBar extends Component { {config.bugReportButtonVisible && (