jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Clean up Sheet abstraction

Browse Source 
Summary: This stack gets rid of Flippers old sheet abstraction that relies on native (Electron) overlays, and implements it using Ant dialogs instead. Also removes a lot of code by making dialog API imperative, rather than reducer organised, like done in the deeplink handling.

Reviewed By: passy

Differential Revision: D30192001

fbshipit-source-id: 9bca3274bd039207e58f8f9394027515e391671d
This commit is contained in:
Michel Weststrate
2021-10-06 09:08:47 -07:00
committed by Facebook GitHub Bot
parent 740093d0d9
commit 89b193b438
10 changed files with 16 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
desktop/app/package.json
View File

@@ -60,7 +60,6 @@
"react-player": "^2.9.0", "react-player": "^2.9.0",
"react-redux": "^7.2.4", "react-redux": "^7.2.4",
"react-test-renderer": "^17.0.1", "react-test-renderer": "^17.0.1",
"react-transition-group": "^4.4.2",
"react-virtualized-auto-sizer": "^1.0.6", "react-virtualized-auto-sizer": "^1.0.6",
"react-window": "^1.8.6", "react-window": "^1.8.6",
"recursive-readdir": "^2.2.2", "recursive-readdir": "^2.2.2",

94
desktop/app/src/chrome/Sheet.tsx
View File

@@ -8,36 +8,14 @@
*/ */
import React, {Component} from 'react'; import React, {Component} from 'react';
import {Transition} from 'react-transition-group';
import {TransitionStatus} from 'react-transition-group/Transition';
import {setActiveSheet} from '../reducers/application'; import {setActiveSheet} from '../reducers/application';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import {styled} from '../ui';
import {PLUGIN_SHEET_ELEMENT_ID} from '../ui/components/Sheet';
import {ACTIVE_SHEET_PLUGIN_SHEET} from '../reducers/application';
import {State as Store} from '../reducers'; import {State as Store} from '../reducers';
import {ActiveSheet} from '../reducers/application'; import {ActiveSheet} from '../reducers/application';
import {Modal} from 'antd';
const DialogContainer = styled.div<{state: TransitionStatus}>(({state}) => ({
transform: `translate(-50%, ${
state === 'entering' || state === 'exiting' || state === 'exited'
? 'calc(-100% - 20px)'
: '0%'
})`,
opacity: state === 'exited' ? 0 : 1,
transition: '.3s transform',
position: 'absolute',
left: '50%',
top: 38,
zIndex: 5,
backgroundColor: '#EFEEEF',
border: '1px solid #C6C6C6',
borderTop: 'none',
borderBottomLeftRadius: 2,
borderBottomRightRadius: 2,
boxShadow: '0 5px 13px rgba(0, 0, 0, 0.2)',
}));
type OwnProps = { type OwnProps = {
children: (onHide: () => any) => any; children: (onHide: () => any) => any;
@@ -51,68 +29,16 @@ type DispatchFromProps = {
onHideSheet: () => void; onHideSheet: () => void;
}; };
type State = {
isVisible: boolean;
};
type Props = OwnProps & StateFromProps & DispatchFromProps; type Props = OwnProps & StateFromProps & DispatchFromProps;
class Sheet extends Component<Props, State> { class Sheet extends Component<Props, {}> {
state = {
isVisible: Boolean(this.props.activeSheet),
};
static getDerivedStateFromProps(props: Props) {
if (!props.activeSheet) {
return {
isVisible: true,
};
} else {
return null;
}
}
componentDidMount() {
document.addEventListener('keydown', this.onKeyDown);
}
componentWillUnmount() {
document.removeEventListener('keydown', this.onKeyDown);
}
onKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Escape') {
this.onHide();
}
};
onHide = () => {
this.setState({isVisible: false});
};
render() { render() {
return ( return (
<Transition <Modal
in={Boolean(this.props.activeSheet) && this.state.isVisible} visible={!!this.props.activeSheet}
timeout={0} footer={null}
onExited={() => this.props.onHideSheet()}> onCancel={this.props.onHideSheet}>
{(state) => ( {this.props.children(this.props.onHideSheet)}
<DialogContainer state={state}> </Modal>
<div
/* This is the target for React.portal, it should not be
* unmounted, therefore it's hidden, when another sheet
* is presented. */
id={PLUGIN_SHEET_ELEMENT_ID}
style={{
display:
this.props.activeSheet === ACTIVE_SHEET_PLUGIN_SHEET
? 'block'
: 'none',
}}
/>
{this.props.children(this.onHide)}
</DialogContainer>
)}
</Transition>
); );
} }
} }

4
desktop/app/src/chrome/SheetRenderer.tsx
View File

@@ -21,7 +21,6 @@ import {
ACTIVE_SHEET_DOCTOR, ACTIVE_SHEET_DOCTOR,
ACTIVE_SHEET_SHARE_DATA_IN_FILE, ACTIVE_SHEET_SHARE_DATA_IN_FILE,
ACTIVE_SHEET_SELECT_PLUGINS_TO_EXPORT, ACTIVE_SHEET_SELECT_PLUGINS_TO_EXPORT,
ACTIVE_SHEET_PLUGIN_SHEET,
ACTIVE_SHEET_CHANGELOG, ACTIVE_SHEET_CHANGELOG,
ACTIVE_SHEET_CHANGELOG_RECENT_ONLY, ACTIVE_SHEET_CHANGELOG_RECENT_ONLY,
} from '../reducers/application'; } from '../reducers/application';
@@ -75,9 +74,6 @@ export function SheetRenderer({logger}: {logger: Logger}) {
return null; return null;
})() })()
); );
case ACTIVE_SHEET_PLUGIN_SHEET:
// Currently unused.
return null;
default: default:
return null; return null;
} }

1
desktop/app/src/index.tsx
View File

@@ -119,7 +119,6 @@ export {
} from 'flipper-plugin'; } from 'flipper-plugin';
export {ElementFramework} from './ui/components/elements-inspector/ElementFramework'; export {ElementFramework} from './ui/components/elements-inspector/ElementFramework';
export {InspectorSidebar} from './ui/components/elements-inspector/sidebar'; export {InspectorSidebar} from './ui/components/elements-inspector/sidebar';
export {default as Sheet} from './ui/components/Sheet';
export {default as FileSelector} from './ui/components/FileSelector'; export {default as FileSelector} from './ui/components/FileSelector';
export {KeyboardActions} from './MenuBar'; export {KeyboardActions} from './MenuBar';
export {getFlipperMediaCDN, appendAccessTokenToUrl} from './fb-stubs/user'; export {getFlipperMediaCDN, appendAccessTokenToUrl} from './fb-stubs/user';

2
desktop/app/src/reducers/application.tsx
View File

@@ -15,7 +15,6 @@ import {ReactElement} from 'react';
import CancellableExportStatus from '../chrome/CancellableExportStatus'; import CancellableExportStatus from '../chrome/CancellableExportStatus';
import {Actions} from './'; import {Actions} from './';
import produce from 'immer'; import produce from 'immer';
export const ACTIVE_SHEET_PLUGIN_SHEET: 'PLUGIN_SHEET' = 'PLUGIN_SHEET';
export const ACTIVE_SHEET_PLUGINS: 'PLUGINS' = 'PLUGINS'; export const ACTIVE_SHEET_PLUGINS: 'PLUGINS' = 'PLUGINS';
export const ACTIVE_SHEET_SELECT_PLUGINS_TO_EXPORT: 'SELECT_PLUGINS_TO_EXPORT' = export const ACTIVE_SHEET_SELECT_PLUGINS_TO_EXPORT: 'SELECT_PLUGINS_TO_EXPORT' =
'SELECT_PLUGINS_TO_EXPORT'; 'SELECT_PLUGINS_TO_EXPORT';
@@ -33,7 +32,6 @@ export const ACTIVE_SHEET_CHANGELOG_RECENT_ONLY =
'ACTIVE_SHEET_CHANGELOG_RECENT_ONLY'; 'ACTIVE_SHEET_CHANGELOG_RECENT_ONLY';
export type ActiveSheet = export type ActiveSheet =
| typeof ACTIVE_SHEET_PLUGIN_SHEET
| typeof ACTIVE_SHEET_PLUGINS | typeof ACTIVE_SHEET_PLUGINS
| typeof ACTIVE_SHEET_SHARE_DATA | typeof ACTIVE_SHEET_SHARE_DATA
| typeof ACTIVE_SHEET_SIGN_IN | typeof ACTIVE_SHEET_SIGN_IN

117
desktop/app/src/ui/components/Sheet.tsx
View File

@@ -1,117 +0,0 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* 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 {createPortal} from 'react-dom';
import {connect} from 'react-redux';
import {
ACTIVE_SHEET_PLUGIN_SHEET,
setActiveSheet,
ActiveSheet,
} from '../../reducers/application';
import {State as Store} from '../../reducers';
export const PLUGIN_SHEET_ELEMENT_ID = 'pluginSheetContents';
type OwnProps = {
/**
* Function as child component (FaCC) to render the contents of the sheet.
* A `onHide` function is passed as argument, that can be called to remove
* the sheet.
*/
children: (onHide: () => void) => React.ReactNode | undefined;
onHideSheet?: () => void;
};
type StateFromProps = {
/**
* Function that is called when the sheet becomes hidden.
*/
activeSheet: ActiveSheet;
};
type DispatchFromProps = {
setActiveSheet: (sheet: ActiveSheet) => any;
};
type State = {
content: React.ReactNode | undefined;
};
type Props = OwnProps & DispatchFromProps & StateFromProps;
/**
* Usage: `<Sheet>{onHide => <YourSheetContent onHide={onHide} />}</Sheet>`
*/
class Sheet extends Component<Props, State> {
static getDerivedStateFromProps(props: Props) {
if (props.activeSheet === 'PLUGIN_SHEET') {
return {
content: props.children(() => {
props.setActiveSheet(null);
}),
};
}
return null;
}
state = {
content: this.props.children(() => {
this.props.setActiveSheet(null);
}),
};
componentDidMount() {
this.showSheetIfContentsAvailable();
}
componentDidUpdate(prevProps: Props, prevState: State) {
if (prevState.content !== this.state.content) {
this.showSheetIfContentsAvailable();
}
if (
prevProps.activeSheet === ACTIVE_SHEET_PLUGIN_SHEET &&
this.props.activeSheet !== ACTIVE_SHEET_PLUGIN_SHEET
) {
this.onHideSheet();
}
}
onHideSheet = () => {
if (this.props.onHideSheet != null) {
this.props.onHideSheet();
}
};
showSheetIfContentsAvailable = () => {
if (this.state.content) {
this.props.setActiveSheet('PLUGIN_SHEET');
} else {
this.props.setActiveSheet(null);
}
};
render() {
const container = document.getElementById(PLUGIN_SHEET_ELEMENT_ID);
if (this.state.content && container) {
return createPortal(this.state.content, container);
}
if (this.state.content) {
console.warn(
`The <Sheet> could not be displayed, because there was not element#${PLUGIN_SHEET_ELEMENT_ID}.`,
);
}
return null;
}
}
export default connect<StateFromProps, DispatchFromProps, OwnProps, Store>(
({application: {activeSheet}}) => ({activeSheet}),
{setActiveSheet},
)(Sheet);

1
desktop/app/src/ui/index.tsx
View File

@@ -108,7 +108,6 @@ export {SearchableProps} from './components/searchable/Searchable';
export {InspectorSidebar} from './components/elements-inspector/sidebar'; export {InspectorSidebar} from './components/elements-inspector/sidebar';
export {VisualizerPortal} from './components/elements-inspector/Visualizer'; export {VisualizerPortal} from './components/elements-inspector/Visualizer';
export {default as Sheet} from './components/Sheet';
export {Markdown} from './components/Markdown'; export {Markdown} from './components/Markdown';
export {default as VBox} from './components/VBox'; export {default as VBox} from './components/VBox';

1
desktop/package.json
View File

@@ -103,7 +103,6 @@
"@types/react-dom": "^17.0.9", "@types/react-dom": "^17.0.9",
"@types/react-redux": "^7.1.18", "@types/react-redux": "^7.1.18",
"@types/react-test-renderer": "^17.0.1", "@types/react-test-renderer": "^17.0.1",
"@types/react-transition-group": "^4.4.2",
"@types/react-virtualized": "^9.21.13", "@types/react-virtualized": "^9.21.13",
"@types/react-virtualized-auto-sizer": "^1.0.1", "@types/react-virtualized-auto-sizer": "^1.0.1",
"@types/react-window": "^1.8.5", "@types/react-window": "^1.8.5",

7
desktop/plugins/public/navigation/components/SaveBookmarkDialog.tsx
View File

@@ -7,7 +7,8 @@
* @format * @format
*/ */
import {Button, FlexColumn, Input, Sheet, styled} from 'flipper'; import {Modal} from 'antd';
import {Button, FlexColumn, Input, styled} from 'flipper';
import React, {useState} from 'react'; import React, {useState} from 'react';
import {Bookmark, URI} from '../types'; import {Bookmark, URI} from '../types';
@@ -55,7 +56,7 @@ export function SaveBookmarkDialog(props: Props) {
return null; return null;
} else { } else {
return ( return (
<Sheet onHideSheet={onHide}> <Modal visible footer={null} onCancel={onHide}>
{(onHide: () => void) => { {(onHide: () => void) => {
return ( return (
<Container> <Container>
@@ -111,7 +112,7 @@ export function SaveBookmarkDialog(props: Props) {
</Container> </Container>
); );
}} }}
</Sheet> </Modal>
); );
} }
} }

29
desktop/yarn.lock
View File

@@ -1534,7 +1534,7 @@
core-js-pure "^3.0.0" core-js-pure "^3.0.0"
regenerator-runtime "^0.13.4" regenerator-runtime "^0.13.4"
"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
version "7.14.0" version "7.14.0"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA== integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==
@@ -3005,13 +3005,6 @@
dependencies: dependencies:
"@types/react" "*" "@types/react" "*"
"@types/react-transition-group@^4.4.2":
version "4.4.2"
resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.2.tgz#38890fd9db68bf1f2252b99a942998dc7877c5b3"
integrity sha512-KibDWL6nshuOJ0fu8ll7QnV/LVTo3PzQ9aCPnRUYPfX7eZohHwLIdNHj7pftanREzHNP4/nJa8oeM73uSiavMQ==
dependencies:
"@types/react" "*"
"@types/react-virtualized-auto-sizer@^1.0.1": "@types/react-virtualized-auto-sizer@^1.0.1":
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.1.tgz#b3187dae1dfc4c15880c9cfc5b45f2719ea6ebd4" resolved "https://registry.yarnpkg.com/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.1.tgz#b3187dae1dfc4c15880c9cfc5b45f2719ea6ebd4"
@@ -5202,7 +5195,7 @@ cssstyle@^2.3.0:
dependencies: dependencies:
cssom "~0.3.6" cssom "~0.3.6"
csstype@^2.5.7, csstype@^2.6.7, csstype@^3.0.2, csstype@^3.0.5: csstype@^2.5.7, csstype@^3.0.2, csstype@^3.0.5:
version "3.0.9" version "3.0.9"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.9.tgz#6410af31b26bd0520933d02cbc64fce9ce3fbf0b" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.9.tgz#6410af31b26bd0520933d02cbc64fce9ce3fbf0b"
integrity sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw== integrity sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==
@@ -5608,14 +5601,6 @@ dom-helpers@^3.4.0:
dependencies: dependencies:
"@babel/runtime" "^7.1.2" "@babel/runtime" "^7.1.2"
dom-helpers@^5.0.1:
version "5.1.4"
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.1.4.tgz#4609680ab5c79a45f2531441f1949b79d6587f4b"
integrity sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==
dependencies:
"@babel/runtime" "^7.8.7"
csstype "^2.6.7"
domexception@^2.0.1: domexception@^2.0.1:
version "2.0.1" version "2.0.1"
resolved "https://registry.yarnpkg.com/domexception/-/domexception-2.0.1.tgz#fb44aefba793e1574b0af6aed2801d057529f304" resolved "https://registry.yarnpkg.com/domexception/-/domexception-2.0.1.tgz#fb44aefba793e1574b0af6aed2801d057529f304"
@@ -11314,16 +11299,6 @@ react-transition-group@2.9.0:
prop-types "^15.6.2" prop-types "^15.6.2"
react-lifecycles-compat "^3.0.4" react-lifecycles-compat "^3.0.4"
react-transition-group@^4.4.2:
version "4.4.2"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
dependencies:
"@babel/runtime" "^7.5.5"
dom-helpers "^5.0.1"
loose-envify "^1.4.0"
prop-types "^15.6.2"
react-virtual@^2.8.0: react-virtual@^2.8.0:
version "2.8.0" version "2.8.0"
resolved "https://registry.yarnpkg.com/react-virtual/-/react-virtual-2.8.0.tgz#d05d9a5e0c9c594708ce4ce88bb33e2b0b66487e" resolved "https://registry.yarnpkg.com/react-virtual/-/react-virtual-2.8.0.tgz#d05d9a5e0c9c594708ce4ce88bb33e2b0b66487e"