diff --git a/desktop/app/package.json b/desktop/app/package.json index a6d6bede5..aff0665aa 100644 --- a/desktop/app/package.json +++ b/desktop/app/package.json @@ -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", diff --git a/desktop/app/src/chrome/Sheet.tsx b/desktop/app/src/chrome/Sheet.tsx index 758246c1c..99ac2cbe9 100644 --- a/desktop/app/src/chrome/Sheet.tsx +++ b/desktop/app/src/chrome/Sheet.tsx @@ -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 { - 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 { render() { return ( - this.props.onHideSheet()}> - {(state) => ( - -
- {this.props.children(this.onHide)} - - )} - + + {this.props.children(this.props.onHideSheet)} + ); } } diff --git a/desktop/app/src/chrome/SheetRenderer.tsx b/desktop/app/src/chrome/SheetRenderer.tsx index 55ef144c4..465248e07 100644 --- a/desktop/app/src/chrome/SheetRenderer.tsx +++ b/desktop/app/src/chrome/SheetRenderer.tsx @@ -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; } diff --git a/desktop/app/src/index.tsx b/desktop/app/src/index.tsx index b36fcd9d3..1dd158136 100644 --- a/desktop/app/src/index.tsx +++ b/desktop/app/src/index.tsx @@ -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'; diff --git a/desktop/app/src/reducers/application.tsx b/desktop/app/src/reducers/application.tsx index 13a2973c3..33dc85dcc 100644 --- a/desktop/app/src/reducers/application.tsx +++ b/desktop/app/src/reducers/application.tsx @@ -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 diff --git a/desktop/app/src/ui/components/Sheet.tsx b/desktop/app/src/ui/components/Sheet.tsx deleted file mode 100644 index 2ce4ff010..000000000 --- a/desktop/app/src/ui/components/Sheet.tsx +++ /dev/null @@ -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: `{onHide => }` - */ -class Sheet extends Component { - 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 could not be displayed, because there was not element#${PLUGIN_SHEET_ELEMENT_ID}.`, - ); - } - return null; - } -} - -export default connect( - ({application: {activeSheet}}) => ({activeSheet}), - {setActiveSheet}, -)(Sheet); diff --git a/desktop/app/src/ui/index.tsx b/desktop/app/src/ui/index.tsx index 138a8824f..bb0b0e6ab 100644 --- a/desktop/app/src/ui/index.tsx +++ b/desktop/app/src/ui/index.tsx @@ -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'; diff --git a/desktop/package.json b/desktop/package.json index 10b89aff3..592afe895 100644 --- a/desktop/package.json +++ b/desktop/package.json @@ -103,7 +103,6 @@ "@types/react-dom": "^17.0.9", "@types/react-redux": "^7.1.18", "@types/react-test-renderer": "^17.0.1", - "@types/react-transition-group": "^4.4.2", "@types/react-virtualized": "^9.21.13", "@types/react-virtualized-auto-sizer": "^1.0.1", "@types/react-window": "^1.8.5", diff --git a/desktop/plugins/public/navigation/components/SaveBookmarkDialog.tsx b/desktop/plugins/public/navigation/components/SaveBookmarkDialog.tsx index f3a01515c..daccdbd19 100644 --- a/desktop/plugins/public/navigation/components/SaveBookmarkDialog.tsx +++ b/desktop/plugins/public/navigation/components/SaveBookmarkDialog.tsx @@ -7,7 +7,8 @@ * @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 {Bookmark, URI} from '../types'; @@ -55,7 +56,7 @@ export function SaveBookmarkDialog(props: Props) { return null; } else { return ( - + {(onHide: () => void) => { return ( @@ -111,7 +112,7 @@ export function SaveBookmarkDialog(props: Props) { ); }} - + ); } } diff --git a/desktop/yarn.lock b/desktop/yarn.lock index 733598481..2a9ad2716 100644 --- a/desktop/yarn.lock +++ b/desktop/yarn.lock @@ -1534,7 +1534,7 @@ core-js-pure "^3.0.0" 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" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6" integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA== @@ -3005,13 +3005,6 @@ dependencies: "@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": version "1.0.1" 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: 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" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.9.tgz#6410af31b26bd0520933d02cbc64fce9ce3fbf0b" integrity sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw== @@ -5608,14 +5601,6 @@ dom-helpers@^3.4.0: dependencies: "@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: version "2.0.1" 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" 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: version "2.8.0" resolved "https://registry.yarnpkg.com/react-virtual/-/react-virtual-2.8.0.tgz#d05d9a5e0c9c594708ce4ce88bb33e2b0b66487e"