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-redux": "^7.2.4",
"react-test-renderer": "^17.0.1",
"react-transition-group": "^4.4.2",
"react-virtualized-auto-sizer": "^1.0.6",
"react-window": "^1.8.6",
"recursive-readdir": "^2.2.2",

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

@@ -8,36 +8,14 @@
*/
import React, {Component} from 'react';
import {Transition} from 'react-transition-group';
import {TransitionStatus} from 'react-transition-group/Transition';
import {setActiveSheet} from '../reducers/application';
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 {ActiveSheet} from '../reducers/application';
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)',
}));
import {Modal} from 'antd';
type OwnProps = {
children: (onHide: () => any) => any;
@@ -51,68 +29,16 @@ type DispatchFromProps = {
onHideSheet: () => void;
};
type State = {
isVisible: boolean;
};
type Props = OwnProps & StateFromProps & DispatchFromProps;
class Sheet extends Component<Props, State> {
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});
};
class Sheet extends Component<Props, {}> {
render() {
return (
<Transition
in={Boolean(this.props.activeSheet) && this.state.isVisible}
timeout={0}
onExited={() => this.props.onHideSheet()}>
{(state) => (
<DialogContainer state={state}>
<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>
<Modal
visible={!!this.props.activeSheet}
footer={null}
onCancel={this.props.onHideSheet}>
{this.props.children(this.props.onHideSheet)}
</Modal>
);
}
}

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

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

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

@@ -119,7 +119,6 @@ export {
} from 'flipper-plugin';
export {ElementFramework} from './ui/components/elements-inspector/ElementFramework';
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 {KeyboardActions} from './MenuBar';
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 {Actions} from './';
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_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';
export type ActiveSheet =
| typeof ACTIVE_SHEET_PLUGIN_SHEET
| typeof ACTIVE_SHEET_PLUGINS
| typeof ACTIVE_SHEET_SHARE_DATA
| 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 {VisualizerPortal} from './components/elements-inspector/Visualizer';
export {default as Sheet} from './components/Sheet';
export {Markdown} from './components/Markdown';
export {default as VBox} from './components/VBox';