diff --git a/desktop/app/package.json b/desktop/app/package.json index a8cbb18b7..c9e05682b 100644 --- a/desktop/app/package.json +++ b/desktop/app/package.json @@ -49,7 +49,6 @@ "p-map": "^4.0.0", "promise-retry": "^2.0.1", "promisify-child-process": "^4.1.0", - "prop-types": "^15.6.0", "react": "17.0.2", "react-async": "^10.0.0", "react-debounce-render": "^7.0.0", diff --git a/desktop/app/src/MenuBar.tsx b/desktop/app/src/MenuBar.tsx index ac0ccb45c..5bdb7a82c 100644 --- a/desktop/app/src/MenuBar.tsx +++ b/desktop/app/src/MenuBar.tsx @@ -20,7 +20,6 @@ import { ACTIVE_SHEET_CHANGELOG, } from './reducers/application'; import {setStaticView} from './reducers/connections'; -import SupportRequestFormV2 from './fb-stubs/SupportRequestFormV2'; import {Store} from './reducers/'; import electron, {MenuItemConstructorOptions} from 'electron'; import {notNull} from './utils/typeUtils'; @@ -270,7 +269,9 @@ function getTemplate( label: 'Create...', click: function () { // Dispatch an action to open the export screen of Support Request form - store.dispatch(setStaticView(SupportRequestFormV2)); + store.dispatch( + setStaticView(require('./fb-stubs/SupportRequestFormV2').default), + ); }, }, ]; diff --git a/desktop/app/src/chrome/RatingButton.tsx b/desktop/app/src/chrome/RatingButton.tsx index 172e449b8..65df8227f 100644 --- a/desktop/app/src/chrome/RatingButton.tsx +++ b/desktop/app/src/chrome/RatingButton.tsx @@ -10,13 +10,11 @@ import React, { Component, ReactElement, - RefObject, useCallback, useEffect, useState, } from 'react'; import { - Glyph, FlexColumn, FlexRow, Button, @@ -25,7 +23,6 @@ import { Input, Link, } from '../ui'; -import LegacyPopover from '../ui/components/Popover2'; import {LeftRailButton} from '../sandy-chrome/LeftRail'; import GK from '../fb-stubs/GK'; import * as UserFeedback from '../fb-stubs/UserFeedback'; @@ -36,16 +33,6 @@ import {useStore} from '../utils/useStore'; import {isLoggedIn} from '../fb-stubs/user'; import {useValue} from 'flipper-plugin'; -type PropsFromState = { - sessionId: string | null; -}; - -type State = { - promptData: FeedbackPrompt | null; - isShown: boolean; - hasTriggered: boolean; -}; - type NextAction = 'select-rating' | 'leave-comment' | 'finished'; class PredefinedComment extends Component<{ @@ -277,100 +264,6 @@ class FeedbackComponent extends Component< } } -class RatingButton extends Component { - state: State = { - promptData: null, - isShown: false, - hasTriggered: false, - }; - - glyphRef: RefObject = React.createRef(); - - constructor(props: PropsFromState) { - super(props); - if (GK.get('flipper_enable_star_ratiings')) { - UserFeedback.getPrompt().then((prompt) => { - this.setState({promptData: prompt}); - setTimeout(this.triggerPopover.bind(this), 30000); - }); - } - } - - onClick() { - const willBeShown = !this.state.isShown; - this.setState({isShown: willBeShown, hasTriggered: true}); - if (!willBeShown) { - UserFeedback.dismiss(this.props.sessionId); - } - } - - submitRating(rating: number) { - UserFeedback.submitRating(rating, this.props.sessionId); - } - - submitComment( - rating: number, - comment: string, - selectedPredefinedComments: Array, - allowUserInfoSharing: boolean, - ) { - UserFeedback.submitComment( - rating, - comment, - selectedPredefinedComments, - allowUserInfoSharing, - this.props.sessionId, - ); - } - - triggerPopover() { - if (!this.state.hasTriggered) { - this.setState({isShown: true, hasTriggered: true}); - } - } - - render() { - const promptData = this.state.promptData; - if (!promptData) { - return null; - } - if ( - !promptData.shouldPopup || - (this.state.hasTriggered && !this.state.isShown) - ) { - return null; - } - return ( -
-
- -
- {this.state.isShown ? ( - - { - this.setState({isShown: false}); - }} - dismiss={this.onClick.bind(this)} - promptData={promptData} - /> - - ) : null} -
- ); - } -} - export function SandyRatingButton() { const [promptData, setPromptData] = useState(null); diff --git a/desktop/app/src/chrome/plugin-manager/PluginDebugger.tsx b/desktop/app/src/chrome/plugin-manager/PluginDebugger.tsx index 881b17b30..216bea34f 100644 --- a/desktop/app/src/chrome/plugin-manager/PluginDebugger.tsx +++ b/desktop/app/src/chrome/plugin-manager/PluginDebugger.tsx @@ -12,7 +12,7 @@ import Client from '../../Client'; import {TableBodyRow} from '../../ui/components/table/types'; import React, {Component, Fragment} from 'react'; import {connect} from 'react-redux'; -import {Text, ManagedTable, styled, colors, Link, Bordered} from '../../ui'; +import {Text, ManagedTable, styled, colors, Link} from '../../ui'; import StatusIndicator from '../../ui/components/StatusIndicator'; import {State as Store} from '../../reducers'; import {PluginDefinition} from '../../plugin'; @@ -28,7 +28,7 @@ const Ellipsis = styled(Text)({ whiteSpace: 'nowrap', }); -const TableContainer = styled(Bordered)({ +const TableContainer = styled.div({ marginTop: 10, height: 400, }); diff --git a/desktop/app/src/index.tsx b/desktop/app/src/index.tsx index cc9558fba..9dc654c83 100644 --- a/desktop/app/src/index.tsx +++ b/desktop/app/src/index.tsx @@ -12,7 +12,7 @@ export {keyframes} from '@emotion/css'; export {produce} from 'immer'; export * from './ui/index'; -export {getStringFromErrorLike, textContent, sleep} from './utils/index'; +export {textContent, sleep} from './utils/index'; export * from './utils/jsonTypes'; export {default as GK, loadGKs, loadDistilleryGK} from './fb-stubs/GK'; export {default as createPaste} from './fb-stubs/createPaste'; @@ -22,48 +22,32 @@ export { graphQLQuery, isLoggedIn, } from './fb-stubs/user'; -export { - FlipperBasePlugin, - FlipperPlugin, - FlipperDevicePlugin, - callClient, - BaseAction, -} from './plugin'; +export {FlipperPlugin, FlipperDevicePlugin, BaseAction} from './plugin'; export {PluginClient, Props} from './plugin'; export {default as Client} from './Client'; export {reportUsage} from './utils/metrics'; export {default as promiseTimeout} from './utils/promiseTimeout'; export {clipboard, remote, OpenDialogOptions} from 'electron'; -export {default as SupportRequestFormV2} from './fb-stubs/SupportRequestFormV2'; -export {default as constants} from './fb-stubs/constants'; -export {connect} from 'react-redux'; -export {selectPlugin, StaticView} from './reducers/connections'; -export {writeBufferToFile, bufferToBlob} from './utils/screenshot'; +export {bufferToBlob} from './utils/screenshot'; export {getPluginKey} from './utils/pluginUtils'; export {Notification, Idler} from 'flipper-plugin'; export {IdlerImpl} from './utils/Idler'; -export {Store, MiddlewareAPI, State as ReduxState} from './reducers/index'; +export {Store, State as ReduxState} from './reducers/index'; export {default as BaseDevice} from './devices/BaseDevice'; -export {DeviceLogEntry, LogLevel, DeviceLogListener} from 'flipper-plugin'; -export {deconstructClientId} from './utils/clientUtils'; export {default as isProduction} from './utils/isProduction'; export {DetailSidebar} from 'flipper-plugin'; export {default as Device} from './devices/BaseDevice'; export {default as AndroidDevice} from './devices/AndroidDevice'; -export {default as MetroDevice} from './devices/MetroDevice'; export {default as ArchivedDevice} from './devices/ArchivedDevice'; export {default as IOSDevice} from './devices/IOSDevice'; export {default as KaiOSDevice} from './devices/KaiOSDevice'; export {OS} from './devices/BaseDevice'; export {default as Button} from './ui/components/Button'; export {default as ToggleButton} from './ui/components/ToggleSwitch'; -export {default as ButtonNavigationGroup} from './ui/components/ButtonNavigationGroup'; export {default as ButtonGroup} from './ui/components/ButtonGroup'; -export {default as ButtonGroupChain} from './ui/components/ButtonGroupChain'; -export {colors, darkColors, brandColors} from './ui/components/colors'; +export {colors, brandColors} from './ui/components/colors'; export {default as Glyph} from './ui/components/Glyph'; export {default as LoadingIndicator} from './ui/components/LoadingIndicator'; -export {default as Popover} from './ui/components/Popover'; export { TableColumns, TableRows, @@ -72,20 +56,13 @@ export { TableHighlightedRows, TableRowSortOrder, TableColumnOrder, - TableColumnOrderVal, TableColumnSizes, } from './ui/components/table/types'; -export { - default as ManagedTable, - ManagedTable as ManagedTableClass, -} from './ui/components/table/ManagedTable'; +export {default as ManagedTable} from './ui/components/table/ManagedTable'; export {ManagedTableProps} from './ui/components/table/ManagedTable'; export { - DataValueExtractor, DataInspectorExpanded, DataDescriptionType, - DataDescription, - DataInspector, MarkerTimeline, } from 'flipper-plugin'; export {DataInspector as ManagedDataInspector} from 'flipper-plugin'; @@ -96,35 +73,13 @@ export {default as Input} from './ui/components/Input'; export {default as Textarea} from './ui/components/Textarea'; export {default as Select} from './ui/components/Select'; export {default as Checkbox} from './ui/components/Checkbox'; -export {default as CodeBlock} from './ui/components/CodeBlock'; -export {default as ErrorBlock} from './ui/components/ErrorBlock'; -export {ErrorBlockContainer} from './ui/components/ErrorBlock'; -export {default as ErrorBoundary} from './ui/components/ErrorBoundary'; -export {OrderableOrder} from './ui/components/Orderable'; -export {_Interactive as Interactive} from 'flipper-plugin'; export {default as Orderable} from './ui/components/Orderable'; -export {default as VirtualList} from './ui/components/VirtualList'; export {Component, PureComponent} from 'react'; -export {default as ContextMenuProvider} from './ui/components/ContextMenuProvider'; -export { - default as ContextMenu, - MenuTemplate, -} from './ui/components/ContextMenu'; -export {FileListFile, FileListFiles} from './ui/components/FileList'; +export {default as ContextMenu} from './ui/components/ContextMenu'; +export {FileListFiles} from './ui/components/FileList'; export {default as FileList} from './ui/components/FileList'; -export {default as File} from './ui/components/File'; -export { - DesktopDropdownItem, - DesktopDropdownSelectedItem, - DesktopDropdown, -} from './ui/components/desktop-toolbar'; export {default as View} from './ui/components/View'; -export {default as ViewWithSize} from './ui/components/ViewWithSize'; -export {default as Block} from './ui/components/Block'; -export {default as FocusableBox} from './ui/components/FocusableBox'; export {default as Sidebar} from './ui/components/Sidebar'; -export {default as SidebarLabel} from './ui/components/SidebarLabel'; -export {default as Box} from './ui/components/Box'; export {default as FlexBox} from './ui/components/FlexBox'; export {default as FlexRow} from './ui/components/FlexRow'; export {default as FlexColumn} from './ui/components/FlexColumn'; @@ -134,16 +89,10 @@ export {Spacer} from './ui/components/Toolbar'; export {default as ToolbarIcon} from './ui/components/ToolbarIcon'; export {default as Panel} from './ui/components/Panel'; export {default as Text} from './ui/components/Text'; -export {default as TextParagraph} from './ui/components/TextParagraph'; export {default as Link} from './ui/components/Link'; -export {default as PathBreadcrumbs} from './ui/components/PathBreadcrumbs'; -export {default as ModalOverlay} from './ui/components/ModalOverlay'; export {default as Tooltip} from './ui/components/Tooltip'; -export {default as TooltipProvider} from './ui/components/TooltipProvider'; -export {default as ResizeSensor} from './ui/components/ResizeSensor'; export {default as StatusIndicator} from './ui/components/StatusIndicator'; export {default as HorizontalRule} from './ui/components/HorizontalRule'; -export {default as VerticalRule} from './ui/components/VerticalRule'; export {default as Label} from './ui/components/Label'; export {default as Heading} from './ui/components/Heading'; export {Filter} from './ui/components/filter/types'; @@ -164,7 +113,6 @@ export { ElementsInspectorElement as Element, // TODO: clean up or create namespace ElementsInspectorProps, - ElementExtraInfo, ElementAttribute, ElementData, ElementSearchResultSet, @@ -179,8 +127,7 @@ export {getFlipperMediaCDN, appendAccessTokenToUrl} from './fb-stubs/user'; export {Rect} from './utils/geometry'; export {Logger} from './fb-interfaces/Logger'; export {getInstance as getLogger} from './fb-stubs/Logger'; -export {callVSCode, getVSCodeUrl} from './utils/vscodeUtils'; -export {useLocalStorageState as useLocalStorage} from 'flipper-plugin'; +export {callVSCode} from './utils/vscodeUtils'; export {checkIdbIsInstalled} from './utils/iOSContainerUtility'; export {IDEFileResolver, IDEType} from './fb-stubs/IDEFileResolver'; export {renderMockFlipperWithPlugin} from './test-utils/createMockFlipperWithPlugin'; diff --git a/desktop/app/src/init.tsx b/desktop/app/src/init.tsx index 3680a379e..78ae6c7d4 100644 --- a/desktop/app/src/init.tsx +++ b/desktop/app/src/init.tsx @@ -29,7 +29,6 @@ import {cache} from '@emotion/css'; import {CacheProvider} from '@emotion/react'; import {enableMapSet} from 'immer'; import os from 'os'; -import {PopoverProvider} from './ui/components/PopoverProvider'; import {initializeFlipperLibImplementation} from './utils/flipperLibImplementation'; import {enableConsoleHook} from './chrome/ConsoleLogs'; import {sideEffect} from './utils/sideEffect'; @@ -131,13 +130,11 @@ class AppFrame extends React.Component< - - - <_NuxManagerContext.Provider value={_createNuxManager()}> - - - - + + <_NuxManagerContext.Provider value={_createNuxManager()}> + + + diff --git a/desktop/app/src/ui/components/AlternatingRows.tsx b/desktop/app/src/ui/components/AlternatingRows.tsx deleted file mode 100644 index 8ee033059..000000000 --- a/desktop/app/src/ui/components/AlternatingRows.tsx +++ /dev/null @@ -1,36 +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 React from 'react'; - -import Bordered from './Bordered'; -import {colors} from './colors'; - -/** - * Displays all children in a bordered, zebra styled vertical layout - * @deprecated use Layout.Container gap - */ -const AlternatingRows: React.FC<{ - children: React.ReactNode[] | React.ReactNode; -}> = ({children}) => ( - - {(Array.isArray(children) ? children : [children]).map((child, idx) => ( -
- {child} -
- ))} - -); - -export default AlternatingRows; diff --git a/desktop/app/src/ui/components/Block.tsx b/desktop/app/src/ui/components/Block.tsx deleted file mode 100644 index c40ea04b6..000000000 --- a/desktop/app/src/ui/components/Block.tsx +++ /dev/null @@ -1,21 +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 styled from '@emotion/styled'; - -/** - * A Block styled div - * @deprecated use Layout.Container - */ -const Block = styled.div({ - display: 'block', -}); -Block.displayName = 'Block'; - -export default Block; diff --git a/desktop/app/src/ui/components/Bordered.tsx b/desktop/app/src/ui/components/Bordered.tsx deleted file mode 100644 index 33823a920..000000000 --- a/desktop/app/src/ui/components/Bordered.tsx +++ /dev/null @@ -1,26 +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 styled from '@emotion/styled'; -import {colors} from './colors'; - -/** - * Puts a gray border around something - * @deprecated use Layout.Container - */ -const Bordered = styled.div({ - borderRadius: 4, - overflow: 'hidden', - border: `1px solid ${colors.macOSTitleBarButtonBorder}`, - backgroundColor: colors.white, - display: 'flex', -}); -Bordered.displayName = 'bordered'; - -export default Bordered; diff --git a/desktop/app/src/ui/components/Box.tsx b/desktop/app/src/ui/components/Box.tsx deleted file mode 100644 index 86da293de..000000000 --- a/desktop/app/src/ui/components/Box.tsx +++ /dev/null @@ -1,24 +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 FlexBox from './FlexBox'; -import styled from '@emotion/styled'; - -/** - * @deprecated use Layout.Container - */ -const Box = styled(FlexBox)({ - height: '100%', - overflow: 'auto', - position: 'relative', - width: '100%', -}); -Box.displayName = 'Box'; - -export default Box; diff --git a/desktop/app/src/ui/components/ButtonGroupChain.tsx b/desktop/app/src/ui/components/ButtonGroupChain.tsx deleted file mode 100644 index 918f45f5a..000000000 --- a/desktop/app/src/ui/components/ButtonGroupChain.tsx +++ /dev/null @@ -1,93 +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 React from 'react'; -import styled from '@emotion/styled'; -import Glyph from './Glyph'; -import {ButtonGroupContext} from './ButtonGroup'; - -const IconContainer = styled.div({ - width: 0, - zIndex: 1, - display: 'inline-flex', - alignItems: 'center', - pointerEvents: 'none', -}); -IconContainer.displayName = 'ButtonGroupChain:IconContainer'; - -const ButtonGroupChainContainer = styled.div<{iconSize: number}>((props) => ({ - display: 'inline-flex', - marginLeft: 10, - '&:first-child>*:not(:first-child):nth-child(odd)': { - paddingLeft: props.iconSize + 6, - }, - '&:first-child>*': { - borderRightStyle: 'none', - borderLeftStyle: 'none', - }, - '&:first-child>:first-child': { - borderLeftStyle: 'solid', - }, - '&:first-child>:last-child': { - borderRightStyle: 'solid', - }, -})); -IconContainer.displayName = 'ButtonGroupChain:ButtonGroupChainContainer'; - -type Props = { - /** - * Children. - */ - children: React.ReactNode; - /** - * Size of the button seperator icon in pixels. - */ - iconSize: 8 | 10 | 12 | 16 | 18 | 20 | 24 | 32; - /** - * Name of the icon seperating the buttons. Defaults to 'chevron-right'. - */ - icon?: string; -}; - -/** - * Groups a series of buttons together with - * a right-chevron icon to seperate them. - * Used to create a navigation heirarchy. - * - * ```jsx - * - * - * - * - * - * ``` - * - * @deprecated use Layout.Horizontal with flags: gap pad wrap - */ -export default function ButtonGroupChain({children, iconSize, icon}: Props) { - return ( - - - {React.Children.map(children, (child, idx) => { - if (idx === 0) { - return child; - } - return ( - <> - - - - {child} - - ); - })} - - - ); -} diff --git a/desktop/app/src/ui/components/ButtonNavigationGroup.tsx b/desktop/app/src/ui/components/ButtonNavigationGroup.tsx deleted file mode 100644 index 6f099f3e4..000000000 --- a/desktop/app/src/ui/components/ButtonNavigationGroup.tsx +++ /dev/null @@ -1,39 +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 ButtonGroup from './ButtonGroup'; -import Button from './Button'; -import React from 'react'; - -/** - * Button group to navigate back and forth. - * @deprecated - */ -export default function ButtonNavigationGroup(props: { - /** Back button is enabled */ - canGoBack: boolean; - /** Forwards button is enabled */ - canGoForward: boolean; - /** Callback when back button is clicked */ - onBack: () => void; - /** Callback when forwards button is clicked */ - onForward: () => void; -}) { - return ( - - - - - - ); -} diff --git a/desktop/app/src/ui/components/CodeBlock.tsx b/desktop/app/src/ui/components/CodeBlock.tsx deleted file mode 100644 index 0e0b2da70..000000000 --- a/desktop/app/src/ui/components/CodeBlock.tsx +++ /dev/null @@ -1,20 +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 styled from '@emotion/styled'; - -/** - * @deprecated, use CodeBlock from flipper-plugin instead - */ -const CodeBlock = styled.div({ - fontFamily: 'monospace', -}); -CodeBlock.displayName = 'CodeBlock'; - -export default CodeBlock; diff --git a/desktop/app/src/ui/components/ErrorBlock.tsx b/desktop/app/src/ui/components/ErrorBlock.tsx index e0c2a0c80..275516a77 100644 --- a/desktop/app/src/ui/components/ErrorBlock.tsx +++ b/desktop/app/src/ui/components/ErrorBlock.tsx @@ -9,7 +9,7 @@ import styled from '@emotion/styled'; import React from 'react'; -import CodeBlock from './CodeBlock'; +import {CodeBlock} from 'flipper-plugin'; export const ErrorBlockContainer = styled(CodeBlock)({ backgroundColor: '#f2dede', diff --git a/desktop/app/src/ui/components/ErrorBoundary.tsx b/desktop/app/src/ui/components/ErrorBoundary.tsx index f2b45a9a9..520d9b047 100644 --- a/desktop/app/src/ui/components/ErrorBoundary.tsx +++ b/desktop/app/src/ui/components/ErrorBoundary.tsx @@ -7,7 +7,7 @@ * @format */ -import ErrorBlock from './ErrorBlock'; +import {CodeBlock} from 'flipper-plugin'; import {Component} from 'react'; import Heading from './Heading'; import Button from './Button'; @@ -21,7 +21,7 @@ const ErrorBoundaryContainer = styled(View)({ }); ErrorBoundaryContainer.displayName = 'ErrorBoundary:ErrorBoundaryContainer'; -const ErrorBoundaryStack = styled(ErrorBlock)({ +const ErrorBoundaryStack = styled(CodeBlock)({ marginBottom: 10, whiteSpace: 'pre', }); @@ -79,7 +79,7 @@ export default class ErrorBoundary extends Component< {heading} {this.props.showStack !== false && ( - + {error} )} diff --git a/desktop/app/src/ui/components/File.tsx b/desktop/app/src/ui/components/File.tsx deleted file mode 100644 index b6eab8ce0..000000000 --- a/desktop/app/src/ui/components/File.tsx +++ /dev/null @@ -1,93 +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 React, {Component} from 'react'; -import fs from 'fs'; - -type FileProps = { - /** Path to the file in the file system */ - src: string; - /** Initial content that should be shown while the file is loading */ - buffer?: string | null | undefined; - /** Encoding to parse the contents of the file. Defaults to UTF-8. */ - encoding: string; - /** Content that should be rendered, when the file loading failed. */ - onError?: (err: Error) => React.ReactNode; - /** Content that should be rendered, while the file is loaded. */ - onLoading?: () => React.ReactNode; - /** Callback when the data is successfully loaded. */ - onData?: (content: string) => void; - /** Content that should be rendered, when the file is successfully loaded. This ususally should render the file's contents. */ - onLoad: (content: string) => React.ReactNode; -}; - -type FileState = { - error: Error | null | undefined; - loaded: boolean; - content: string; -}; - -/** - * Wrapper for loading file content from the file system. - */ -export default class File extends Component { - constructor(props: FileProps, context: Object) { - super(props, context); - this.state = { - content: props.buffer || '', - error: null, - loaded: props.buffer != null, - }; - } - - static defaultProps = { - encoding: 'utf8', - }; - - static getDerivedStateFromProps(nextProps: FileProps) { - if (nextProps.buffer != null) { - return {content: nextProps.buffer, loaded: true}; - } - return null; - } - - componentDidMount() { - if (this.state.loaded) { - return; - } - - fs.readFile(this.props.src, this.props.encoding, (err, content) => { - if (err) { - this.setState({error: err}); - return; - } - - this.setState({content, loaded: true}); - - if (this.props.onData) { - this.props.onData(content); - } - }); - } - - render() { - const {onError, onLoad, onLoading} = this.props; - const {content, error, loaded} = this.state; - - if (error && onError) { - return onError(error); - } else if (loaded) { - return onLoad(content); - } else if (onLoading) { - return onLoading(); - } else { - return null; - } - } -} diff --git a/desktop/app/src/ui/components/FocusableBox.tsx b/desktop/app/src/ui/components/FocusableBox.tsx deleted file mode 100644 index 3d6409ba6..000000000 --- a/desktop/app/src/ui/components/FocusableBox.tsx +++ /dev/null @@ -1,78 +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 Box from './Box'; -import {colors} from './colors'; -import styled from '@emotion/styled'; -import React from 'react'; - -const FocusableBoxBorder = styled(Box)({ - border: `1px solid ${colors.highlight}`, - bottom: '0', - left: '0', - pointerEvents: 'none', - position: 'absolute', - right: '0', - top: '0', -}); -FocusableBoxBorder.displayName = 'FocusableBox:FocusableBoxBorder'; - -type Props = { - onBlur?: (e: React.FocusEvent) => void; - onFocus?: (e: React.FocusEvent) => void; - focusable?: boolean; -}; - -export default class FocusableBox extends Component< - Props, - { - focused: boolean; - } -> { - constructor(props: Props, context: Object) { - super(props, context); - this.state = {focused: false}; - } - - static defaultProps = { - focusable: true, - }; - - onBlur = (e: React.FocusEvent) => { - const {onBlur} = this.props; - if (onBlur) { - onBlur(e); - } - if (this.state.focused) { - this.setState({focused: false}); - } - }; - - onFocus = (e: React.FocusEvent) => { - const {onFocus} = this.props; - if (onFocus) { - onFocus(e); - } - if (this.props.focusable) { - this.setState({focused: true}); - } - }; - - render() { - const {props} = this; - - return ( - - {props.children} - {this.state.focused && } - - ); - } -} diff --git a/desktop/app/src/ui/components/Glyph.tsx b/desktop/app/src/ui/components/Glyph.tsx index 4ff9c70fd..543ae3ea2 100644 --- a/desktop/app/src/ui/components/Glyph.tsx +++ b/desktop/app/src/ui/components/Glyph.tsx @@ -9,7 +9,6 @@ import React from 'react'; import styled from '@emotion/styled'; -import PropTypes from 'prop-types'; import {getIconURL} from '../../utils/icons'; export type IconSize = 8 | 10 | 12 | 16 | 18 | 20 | 24 | 32; @@ -94,9 +93,6 @@ function ColoredIcon( } } ColoredIcon.displayName = 'Glyph:ColoredIcon'; -ColoredIcon.contextTypes = { - glyphColor: PropTypes.string, -}; export default class Glyph extends React.PureComponent<{ name: string; diff --git a/desktop/app/src/ui/components/PathBreadcrumbs.tsx b/desktop/app/src/ui/components/PathBreadcrumbs.tsx deleted file mode 100644 index 947730ac2..000000000 --- a/desktop/app/src/ui/components/PathBreadcrumbs.tsx +++ /dev/null @@ -1,55 +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 ButtonGroup from './ButtonGroup'; -import {Component} from 'react'; -import Button from './Button'; -import path from 'path'; -import React from 'react'; - -class PathBreadcrumbsItem extends Component<{ - name: string; - path: string; - isFolder: boolean; - onClick: (path: string) => void; -}> { - onClick = () => { - this.props.onClick(this.props.path); - }; - - render() { - return ; - } -} - -export default function PathBreadcrumbs(props: { - path: string; - isFile?: boolean; - onClick: (path: string) => void; -}) { - const parts = props.path === path.sep ? [''] : props.path.split(path.sep); - const {onClick} = props; - - return ( - - {parts.map((part, i) => { - const fullPath = parts.slice(0, i + 1).join(path.sep) || path.sep; - return ( - - ); - })} - - ); -} diff --git a/desktop/app/src/ui/components/Popover.tsx b/desktop/app/src/ui/components/Popover.tsx deleted file mode 100644 index 4b88a1b40..000000000 --- a/desktop/app/src/ui/components/Popover.tsx +++ /dev/null @@ -1,113 +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 React, {PureComponent} from 'react'; -import FlexColumn from './FlexColumn'; -import styled from '@emotion/styled'; -import {colors} from './colors'; - -const Anchor = styled.img({ - zIndex: 6, - position: 'absolute', - bottom: 0, - left: '50%', - transform: 'translate(-50%, calc(100% + 2px))', -}); -Anchor.displayName = 'Popover.Anchor'; - -type Opts = { - minWidth?: number; - skewLeft?: boolean; -}; - -const PopoverContainer = styled(FlexColumn)<{opts?: Opts}>((props) => ({ - backgroundColor: colors.white, - borderRadius: 7, - border: '1px solid rgba(0,0,0,0.3)', - boxShadow: '0 2px 10px 0 rgba(0,0,0,0.3)', - position: 'absolute', - zIndex: 5, - bottom: 0, - marginTop: 15, - left: '50%', - minWidth: (props.opts && props.opts.minWidth) || 'auto', - transform: - props.opts && props.opts.skewLeft - ? 'translate(calc(-100% + 22px), calc(100% + 15px))' - : 'translate(-50%, calc(100% + 15px))', - overflow: 'hidden', - '&::before': { - content: '""', - display: 'block', - position: 'absolute', - left: '50%', - transform: - props.opts && props.opts.skewLeft - ? 'translateX(calc(-100% + 22px))' - : 'translateX(-50%)', - height: 13, - top: -13, - width: 26, - backgroundColor: colors.white, - }, -})); -PopoverContainer.displayName = 'Popover:PopoverContainer'; - -type Props = { - children: React.ReactNode; - onDismiss: Function; - forceOpts?: Opts; -}; - -/** - * @deprecated use Popover from antd - */ -export default class Popover extends PureComponent { - _ref?: Element | null; - - componentDidMount() { - window.document.addEventListener('click', this.handleClick); - window.document.addEventListener('keydown', this.handleKeydown); - } - - componentWillUnmount() { - window.document.addEventListener('click', this.handleClick); - window.document.addEventListener('keydown', this.handleKeydown); - } - - handleClick = (e: MouseEvent) => { - if (this._ref && !this._ref.contains(e.target as Node)) { - this.props.onDismiss(); - } - }; - - handleKeydown = (e: KeyboardEvent) => { - if (e.key === 'Escape') { - this.props.onDismiss(); - } - }; - - _setRef = (ref: Element | null) => { - this._ref = ref; - }; - - render() { - return ( - <> - - - {this.props.children} - - - ); - } -} diff --git a/desktop/app/src/ui/components/Popover2.tsx b/desktop/app/src/ui/components/Popover2.tsx deleted file mode 100644 index 89bae6255..000000000 --- a/desktop/app/src/ui/components/Popover2.tsx +++ /dev/null @@ -1,38 +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 React, {useEffect, ReactNode} from 'react'; -import {useContext} from 'react'; -import {PopoverContext} from './PopoverProvider'; - -/** - * Popover element to be used as a stopgap until we adopt a - * UI framework. - * I don't recommend using this, as it will likely be removed in future. - * Must be nested under a PopoverProvider at some level, usually it is at the top level app so you shouldn't need to add it. - * @deprecated use Popover from Antd - */ -export default function Popover2(props: { - id: string; - targetRef: React.RefObject; - children: ReactNode; -}) { - const popoverManager = useContext(PopoverContext); - - useEffect(() => { - if (props.targetRef.current) { - popoverManager.open(props.id, props.targetRef, props.children); - return () => { - popoverManager.close(props.id); - }; - } - }); - - return null; -} diff --git a/desktop/app/src/ui/components/PopoverProvider.tsx b/desktop/app/src/ui/components/PopoverProvider.tsx deleted file mode 100644 index 73e74f0cd..000000000 --- a/desktop/app/src/ui/components/PopoverProvider.tsx +++ /dev/null @@ -1,158 +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 { - createContext, - useMemo, - useState, - ReactNode, - useEffect, - useRef, - RefObject, -} from 'react'; -import React from 'react'; -import {colors, styled} from '../../ui'; -import {useWindowSize} from '../../utils/useWindowSize'; - -type PopoverManager = { - open( - id: string, - targetRef: RefObject, - content: ReactNode, - ): void; - close(id: string): void; -}; -type Popover = { - id: string; - targetRef: RefObject; - content: ReactNode; -}; - -const Anchor = styled.img((props: {top: number; left: number}) => ({ - zIndex: 9999999, - position: 'absolute', - top: props.top, - left: props.left, -})); -Anchor.displayName = 'Popover.Anchor'; -const ANCHOR_WIDTH = 34; - -const PopoverContainer = styled('div')( - (props: {left: number; top: number; hidden: boolean}) => ({ - position: 'absolute', - top: props.top, - left: props.left, - zIndex: 9999998, - backgroundColor: colors.white, - borderRadius: 7, - border: '1px solid rgba(0,0,0,0.3)', - boxShadow: '0 2px 10px 0 rgba(0,0,0,0.3)', - display: props.hidden ? 'none' : 'visible', - }), -); -PopoverContainer.displayName = 'Popover.PopoverContainer'; - -const PopoverElement = (props: { - targetRef: RefObject; - children: ReactNode; -}) => { - const ref = useRef(null); - const [dimensions, setDimensions] = useState<{ - width: number; - height: number; - } | null>(null); - useEffect(() => { - if (!ref.current) { - return; - } - if ( - dimensions?.width !== ref.current.clientWidth || - dimensions?.height !== ref.current.clientHeight - ) { - setDimensions({ - width: ref.current?.clientWidth, - height: ref.current?.clientHeight, - }); - } - }); - - const windowSize = useWindowSize(); - if ( - windowSize.height == null || - windowSize.width == null || - props.targetRef.current?.getBoundingClientRect() == null - ) { - return null; - } - - // target is the point that the anchor points to. - // It is defined as the center of the bottom edge of the target element. - const targetXCoord = - props.targetRef.current?.getBoundingClientRect().left + - props.targetRef.current?.getBoundingClientRect().width / 2; - const targetYCoord = props.targetRef.current?.getBoundingClientRect().bottom; - return ( - <> - - - - ); -}; - -export const PopoverContext = createContext(undefined as any); - -export function PopoverProvider({children}: {children: React.ReactNode}) { - const [popovers, setPopovers] = useState([]); - const popoverManager = useMemo( - () => ({ - open: ( - id: string, - targetRef: RefObject, - content: ReactNode, - ) => { - setPopovers((s) => [...s, {id, targetRef: targetRef, content}]); - }, - close: (id: string) => { - setPopovers((s) => s.filter((p) => p.id !== id)); - }, - }), - [], - ); - return ( - <> - {popovers.map((p, index) => ( - - {p.content} - - ))} - - {children} - - - ); -} diff --git a/desktop/app/src/ui/components/ResizeSensor.tsx b/desktop/app/src/ui/components/ResizeSensor.tsx deleted file mode 100644 index 1b45bee48..000000000 --- a/desktop/app/src/ui/components/ResizeSensor.tsx +++ /dev/null @@ -1,60 +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 styled from '@emotion/styled'; -import {Component} from 'react'; -import React from 'react'; - -const IFrame = styled.iframe({ - height: '100%', - width: '100%', - border: 'none', - background: 'transparent', - position: 'absolute', - zIndex: -1, - top: 0, - left: 0, -}); -IFrame.displayName = 'ResizeSensor:IFrame'; - -/** - * Listener for resize events. - */ -export default class ResizeSensor extends Component<{ - /** Callback when resize happened */ - onResize: (e: UIEvent) => void; -}> { - iframe: HTMLIFrameElement | undefined | null; - - setRef = (ref: HTMLIFrameElement | null) => { - this.iframe = ref; - }; - - render() { - return