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

Migrate elementes-inspector files from js to tsx

Browse Source 
Summary: As per title

Reviewed By: danielbuechele

Differential Revision: D16772834

fbshipit-source-id: 4290c139ce66731b68433d54eda0d0e0207e9912
This commit is contained in:
Pritesh Nandgaonkar
2019-08-20 06:18:58 -07:00
committed by Facebook Github Bot
parent 7f7e96b99f
commit a2a288182d
6 changed files with 232 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/index.js
View File

@@ -172,14 +172,14 @@ export {
ElementAttribute, ElementAttribute,
Element, Element,
ElementSearchResultSet, ElementSearchResultSet,
} from './ui/components/elements-inspector/ElementsInspector.js'; } from './ui/components/elements-inspector/ElementsInspector.tsx';
export {Elements} from './ui/components/elements-inspector/elements.js'; export {Elements} from './ui/components/elements-inspector/elements.tsx';
export { export {
ContextMenuExtension, ContextMenuExtension,
} from './ui/components/elements-inspector/elements.js'; } from './ui/components/elements-inspector/elements.tsx';
export { export {
default as ElementsInspector, default as ElementsInspector,
} from './ui/components/elements-inspector/ElementsInspector.js'; } from './ui/components/elements-inspector/ElementsInspector.tsx';
export {InspectorSidebar} from './ui/components/elements-inspector/sidebar.js'; export {InspectorSidebar} from './ui/components/elements-inspector/sidebar.tsx';
export {Console} from './ui/components/console.tsx'; export {Console} from './ui/components/console.tsx';
export {default as Sheet} from './ui/components/Sheet.tsx'; export {default as Sheet} from './ui/components/Sheet.tsx';

103
src/ui/components/elements-inspector/ElementsInspector.js
View File

@@ -1,103 +0,0 @@
/**
* Copyright 2018-present Facebook.
* 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 FlexRow from '../FlexRow.tsx';
import {Elements, type DecorateRow} from './elements.js';
import type {ContextMenuExtension} from 'flipper';
export type ElementID = string;
export type ElementSearchResultSet = {|
query: string,
matches: Set<ElementID>,
|};
export type ElementData = {
[name: ElementID]: {
[key: string]:
| string
| number
| boolean
| {|
__type__: string,
value: any,
|},
},
};
export type ElementAttribute = {|
name: string,
value: string,
|};
export type ElementExtraInfo = {|
linkedNode?: string, // id of linked node in opposite tree
expandWithParent?: boolean,
|};
export type Element = {|
id: ElementID,
name: string,
expanded: boolean,
children: Array<ElementID>,
attributes: Array<ElementAttribute>,
data: ElementData,
decoration: string,
extraInfo: ElementExtraInfo,
|};
export default class ElementsInspector extends Component<{
onElementExpanded: (key: ElementID, deep: boolean) => void,
onElementSelected: (key: ElementID) => void,
onElementHovered: ?(key: ?ElementID) => void,
onValueChanged: ?(path: Array<string>, val: any) => void,
selected: ?ElementID,
focused?: ?ElementID,
searchResults?: ?ElementSearchResultSet,
root: ?ElementID,
elements: {[key: ElementID]: Element},
useAppSidebar?: boolean,
alternateRowColor?: boolean,
contextMenuExtensions?: Array<ContextMenuExtension>,
decorateRow?: DecorateRow,
}> {
static defaultProps = {
alternateRowColor: true,
};
render() {
const {
selected,
focused,
elements,
root,
onElementExpanded,
onElementSelected,
onElementHovered,
searchResults,
alternateRowColor,
contextMenuExtensions,
decorateRow,
} = this.props;
return (
<Elements
onElementExpanded={onElementExpanded}
onElementSelected={onElementSelected}
onElementHovered={onElementHovered}
selected={selected}
focused={focused}
searchResults={searchResults}
root={root}
elements={elements}
alternateRowColor={alternateRowColor}
contextMenuExtensions={contextMenuExtensions}
decorateRow={decorateRow}
/>
);
}
}

106
src/ui/components/elements-inspector/ElementsInspector.tsx Normal file
View File

@@ -0,0 +1,106 @@
/**
* Copyright 2018-present Facebook.
* 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 {Elements, DecorateRow} from './elements';
import {ContextMenuExtension} from 'flipper';
import React from 'react';
export type ElementID = string;
export type ElementSearchResultSet = {
query: string;
matches: Set<ElementID>;
};
export type ElementData = {
[name: string]: {
[key: string]:
| string
| number
| boolean
| {
__type__: string;
value: any;
};
};
};
export type ElementAttribute = {
name: string;
value: string;
};
export type ElementExtraInfo = {
linkedNode?: string; // id of linked node in opposite tree
expandWithParent?: boolean;
};
export type Element = {
id: ElementID;
name: string;
expanded: boolean;
children: Array<ElementID>;
attributes: Array<ElementAttribute>;
data: ElementData;
decoration: string;
extraInfo: ElementExtraInfo;
};
export default class ElementsInspector extends Component<{
onElementExpanded: (key: ElementID, deep: boolean) => void;
onElementSelected: (key: ElementID) => void;
onElementHovered:
| ((key: ElementID | undefined | null) => any)
| undefined
| null;
onValueChanged: ((path: Array<string>, val: any) => any) | undefined | null;
selected: ElementID | undefined | null;
focused?: ElementID | undefined | null;
searchResults?: ElementSearchResultSet | undefined | null;
root: ElementID | undefined | null;
elements: {[key: string]: Element};
useAppSidebar?: boolean;
alternateRowColor?: boolean;
contextMenuExtensions?: Array<ContextMenuExtension>;
decorateRow?: DecorateRow;
}> {
static defaultProps = {
alternateRowColor: true,
};
render() {
const {
selected,
focused,
elements,
root,
onElementExpanded,
onElementSelected,
onElementHovered,
searchResults,
alternateRowColor,
contextMenuExtensions,
decorateRow,
} = this.props;
return (
<Elements
onElementExpanded={onElementExpanded}
onElementSelected={onElementSelected}
onElementHovered={onElementHovered}
selected={selected}
focused={focused}
searchResults={searchResults}
root={root}
elements={elements}
alternateRowColor={alternateRowColor}
contextMenuExtensions={contextMenuExtensions}
decorateRow={decorateRow}
/>
);
}
}

174
src/ui/components/elements-inspector/elements.js → src/ui/components/elements-inspector/elements.tsx
View File

@@ -5,25 +5,27 @@
* @format * @format
*/ */
import type { import {ElementID, Element, ElementSearchResultSet} from './ElementsInspector';
ElementID, import {reportInteraction} from '../../../utils/InteractionTracker';
Element, import ContextMenu from '../ContextMenu';
ElementSearchResultSet, import {PureComponent, ReactElement} from 'react';
} from './ElementsInspector.js'; import FlexRow from '../FlexRow';
import {reportInteraction} from '../../../utils/InteractionTracker.tsx'; import FlexColumn from '../FlexColumn';
import ContextMenu from '../ContextMenu.tsx'; import Glyph from '../Glyph';
import {PureComponent, type Element as ReactElement} from 'react'; import {colors} from '../colors';
import FlexRow from '../FlexRow.tsx'; import Text from '../Text';
import FlexColumn from '../FlexColumn.tsx'; import styled from 'react-emotion';
import Glyph from '../Glyph.tsx'; import {clipboard, MenuItemConstructorOptions} from 'electron';
import {colors} from '../colors.tsx'; import React, {MouseEvent, KeyboardEvent} from 'react';
import Text from '../Text.tsx';
import styled from '../../styled/index.js';
import {clipboard} from 'electron';
const ROW_HEIGHT = 23; const ROW_HEIGHT = 23;
const backgroundColor = props => { const backgroundColor = (props: {
selected: boolean;
focused: boolean;
isQueryMatch: boolean;
even: boolean;
}) => {
if (props.selected) { if (props.selected) {
return colors.macOSTitleBarIconSelected; return colors.macOSTitleBarIconSelected;
} else if (props.isQueryMatch) { } else if (props.isQueryMatch) {
@@ -37,7 +39,7 @@ const backgroundColor = props => {
} }
}; };
const backgroundColorHover = props => { const backgroundColorHover = (props: {selected: boolean; focused: boolean}) => {
if (props.selected) { if (props.selected) {
return colors.macOSTitleBarIconSelected; return colors.macOSTitleBarIconSelected;
} else if (props.focused) { } else if (props.focused) {
@@ -47,7 +49,7 @@ const backgroundColorHover = props => {
} }
}; };
const ElementsRowContainer = styled(ContextMenu)(props => ({ const ElementsRowContainer = styled(ContextMenu)((props: any) => ({
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
backgroundColor: backgroundColor(props), backgroundColor: backgroundColor(props),
@@ -79,7 +81,7 @@ const ElementsRowDecoration = styled(FlexRow)({
top: -1, top: -1,
}); });
const ElementsLine = styled('div')(props => ({ const ElementsLine = styled('div')((props: {childrenCount: number}) => ({
backgroundColor: colors.light20, backgroundColor: colors.light20,
height: props.childrenCount * ROW_HEIGHT - 4, height: props.childrenCount * ROW_HEIGHT - 4,
position: 'absolute', position: 'absolute',
@@ -119,13 +121,13 @@ const ElementsRowAttributeValue = styled('span')({
}); });
class PartialHighlight extends PureComponent<{ class PartialHighlight extends PureComponent<{
selected: boolean, selected: boolean;
highlighted: ?string, highlighted: string | undefined | null;
content: string, content: string;
}> { }> {
static HighlightedText = styled('span')(({selected}) => ({ static HighlightedText = styled('span')((props: {selected: boolean}) => ({
backgroundColor: colors.lemon, backgroundColor: colors.lemon,
color: selected ? `${colors.grapeDark3} !important` : 'auto', color: props.selected ? `${colors.grapeDark3} !important` : 'auto',
})); }));
render() { render() {
@@ -161,10 +163,10 @@ class PartialHighlight extends PureComponent<{
} }
class ElementsRowAttribute extends PureComponent<{ class ElementsRowAttribute extends PureComponent<{
name: string, name: string;
value: string, value: string;
matchingSearchQuery: ?string, matchingSearchQuery: string | undefined | null;
selected: boolean, selected: boolean;
}> { }> {
render() { render() {
const {name, value, matchingSearchQuery, selected} = this.props; const {name, value, matchingSearchQuery, selected} = this.props;
@@ -185,35 +187,38 @@ class ElementsRowAttribute extends PureComponent<{
} }
} }
type FlatElement = {| type FlatElement = {
key: ElementID, key: ElementID;
element: Element, element: Element;
level: number, level: number;
|}; };
type FlatElements = Array<FlatElement>; type FlatElements = Array<FlatElement>;
type ElementsRowProps = { type ElementsRowProps = {
id: ElementID, id: ElementID;
level: number, level: number;
selected: boolean, selected: boolean;
focused: boolean, focused: boolean;
matchingSearchQuery: ?string, matchingSearchQuery: string | undefined | null;
isQueryMatch: boolean, isQueryMatch: boolean;
element: Element, element: Element;
even: boolean, even: boolean;
onElementSelected: (key: ElementID) => void, onElementSelected: (key: ElementID) => void;
onElementExpanded: (key: ElementID, deep: boolean) => void, onElementExpanded: (key: ElementID, deep: boolean) => void;
childrenCount: number, childrenCount: number;
onElementHovered: ?(key: ?ElementID) => void, onElementHovered:
style?: Object, | ((key: ElementID | undefined | null) => void)
contextMenuExtensions: Array<ContextMenuExtension>, | undefined
decorateRow?: DecorateRow, | null;
style?: Object;
contextMenuExtensions: Array<ContextMenuExtension>;
decorateRow?: DecorateRow;
}; };
type ElementsRowState = {| type ElementsRowState = {
hovered: boolean, hovered: boolean;
|}; };
class ElementsRow extends PureComponent<ElementsRowProps, ElementsRowState> { class ElementsRow extends PureComponent<ElementsRowProps, ElementsRowState> {
constructor(props: ElementsRowProps, context: Object) { constructor(props: ElementsRowProps, context: Object) {
@@ -226,7 +231,7 @@ class ElementsRow extends PureComponent<ElementsRowProps, ElementsRowState> {
getContextMenu = (): Array<MenuItemConstructorOptions> => { getContextMenu = (): Array<MenuItemConstructorOptions> => {
const {props} = this; const {props} = this;
const items = [ const items: Array<MenuItemConstructorOptions> = [
{ {
type: 'separator', type: 'separator',
}, },
@@ -259,7 +264,7 @@ class ElementsRow extends PureComponent<ElementsRowProps, ElementsRowState> {
this.interaction('selected', {level: this.props.level}); this.interaction('selected', {level: this.props.level});
}; };
onDoubleClick = (event: SyntheticMouseEvent<*>) => { onDoubleClick = (event: MouseEvent<any>) => {
this.props.onElementExpanded(this.props.id, event.altKey); this.props.onElementExpanded(this.props.id, event.altKey);
}; };
@@ -307,12 +312,10 @@ class ElementsRow extends PureComponent<ElementsRowProps, ElementsRowState> {
const attributes = element.attributes const attributes = element.attributes
? element.attributes.map(attr => ( ? element.attributes.map(attr => (
<ElementsRowAttribute <ElementsRowAttribute
key={attr.name}
name={attr.name} name={attr.name}
value={attr.value} value={attr.value}
matchingSearchQuery={matchingSearchQuery} matchingSearchQuery={matchingSearchQuery}
selected={selected} selected={selected}
focused={focused}
/> />
)) ))
: []; : [];
@@ -377,7 +380,7 @@ class ElementsRow extends PureComponent<ElementsRowProps, ElementsRowState> {
} }
function containsKeyInSearchResults( function containsKeyInSearchResults(
searchResults: ?ElementSearchResultSet, searchResults: ElementSearchResultSet | undefined | null,
key: ElementID, key: ElementID,
) { ) {
return searchResults != undefined && searchResults.matches.has(key); return searchResults != undefined && searchResults.matches.has(key);
@@ -396,32 +399,35 @@ const ElementsBox = styled(FlexColumn)({
overflow: 'auto', overflow: 'auto',
}); });
export type DecorateRow = Element => ?ReactElement<empty>; export type DecorateRow = (e: Element) => ReactElement<any> | undefined | null;
type ElementsProps = {| type ElementsProps = {
root: ?ElementID, root: ElementID | undefined | null;
selected: ?ElementID, selected: ElementID | undefined | null;
focused?: ?ElementID, focused?: ElementID | undefined | null;
searchResults: ?ElementSearchResultSet, searchResults: ElementSearchResultSet | undefined | null;
elements: {[key: ElementID]: Element}, elements: {[key: string]: Element};
onElementSelected: (key: ElementID) => void, onElementSelected: (key: ElementID) => void;
onElementExpanded: (key: ElementID, deep: boolean) => void, onElementExpanded: (key: ElementID, deep: boolean) => void;
onElementHovered: ?(key: ?ElementID) => void, onElementHovered:
alternateRowColor?: boolean, | ((key: ElementID | undefined | null) => void)
contextMenuExtensions?: Array<ContextMenuExtension>, | undefined
decorateRow?: DecorateRow, | null;
|}; alternateRowColor?: boolean;
contextMenuExtensions?: Array<ContextMenuExtension>;
decorateRow?: DecorateRow;
};
type ElementsState = {| type ElementsState = {
flatKeys: Array<ElementID>, flatKeys: Array<ElementID>;
flatElements: FlatElements, flatElements: FlatElements;
maxDepth: number, maxDepth: number;
|}; };
export type ContextMenuExtension = {| export type ContextMenuExtension = {
label: string, label: string;
click: ElementID => void, click: (element: ElementID) => any;
|}; };
export class Elements extends PureComponent<ElementsProps, ElementsState> { export class Elements extends PureComponent<ElementsProps, ElementsState> {
static defaultProps = { static defaultProps = {
@@ -437,14 +443,14 @@ export class Elements extends PureComponent<ElementsProps, ElementsState> {
} }
componentDidMount() { componentDidMount() {
this.setProps(this.props, true); this.setProps(this.props);
} }
componentWillReceiveProps(nextProps: ElementsProps) { componentWillReceiveProps(nextProps: ElementsProps) {
this.setProps(nextProps); this.setProps(nextProps);
} }
setProps(props: ElementsProps, force?: boolean) { setProps(props: ElementsProps) {
const flatElements: FlatElements = []; const flatElements: FlatElements = [];
const flatKeys = []; const flatKeys = [];
@@ -488,7 +494,7 @@ export class Elements extends PureComponent<ElementsProps, ElementsState> {
this.props.onElementSelected(key); this.props.onElementSelected(key);
}; };
onKeyDown = (e: SyntheticKeyboardEvent<*>) => { onKeyDown = (e: KeyboardEvent<any>) => {
const {selected} = this.props; const {selected} = this.props;
if (selected == null) { if (selected == null) {
return; return;
@@ -572,7 +578,6 @@ export class Elements extends PureComponent<ElementsProps, ElementsState> {
buildRow = (row: FlatElement, index: number) => { buildRow = (row: FlatElement, index: number) => {
const { const {
elements,
onElementExpanded, onElementExpanded,
onElementHovered, onElementHovered,
onElementSelected, onElementSelected,
@@ -618,7 +623,6 @@ export class Elements extends PureComponent<ElementsProps, ElementsState> {
} }
isQueryMatch={containsKeyInSearchResults(searchResults, row.key)} isQueryMatch={containsKeyInSearchResults(searchResults, row.key)}
element={row.element} element={row.element}
elements={elements}
childrenCount={childrenCount} childrenCount={childrenCount}
contextMenuExtensions={contextMenuExtensions || []} contextMenuExtensions={contextMenuExtensions || []}
decorateRow={decorateRow} decorateRow={decorateRow}
@@ -629,7 +633,7 @@ export class Elements extends PureComponent<ElementsProps, ElementsState> {
render() { render() {
return ( return (
<ElementsBox> <ElementsBox>
<ElementsContainer tabIndex="0" onKeyDown={this.onKeyDown}> <ElementsContainer onKeyDown={this.onKeyDown}>
{this.state.flatElements.map(this.buildRow)} {this.state.flatElements.map(this.buildRow)}
</ElementsContainer> </ElementsContainer>
</ElementsBox> </ElementsBox>

53
src/ui/components/elements-inspector/sidebar.js → src/ui/components/elements-inspector/sidebar.tsx
View File

@@ -5,25 +5,26 @@
* @format * @format
*/ */
import type {Element} from './ElementsInspector.js'; import {Element} from './ElementsInspector';
import type {PluginClient} from '../../../plugin.tsx'; import {PluginClient} from '../../../plugin';
import type Client from '../../../Client.tsx'; import Client from '../../../Client';
import type {Logger} from '../../../fb-interfaces/Logger.js'; import {Logger} from '../../../fb-interfaces/Logger.js';
import Panel from '../Panel.tsx'; import Panel from '../Panel';
import ManagedDataInspector from '../data-inspector/ManagedDataInspector.tsx'; import ManagedDataInspector from '../data-inspector/ManagedDataInspector';
import {Component} from 'react'; import {Component} from 'react';
import {Console} from '../console.tsx'; import {Console} from '../console';
import GK from '../../../fb-stubs/GK.tsx'; import GK from '../../../fb-stubs/GK';
import React from 'react';
const deepEqual = require('deep-equal'); import deepEqual from 'deep-equal';
type OnValueChanged = (path: Array<string>, val: any) => void; type OnValueChanged = (path: Array<string>, val: any) => void;
type InspectorSidebarSectionProps = { type InspectorSidebarSectionProps = {
data: any, data: any;
id: string, id: string;
onValueChanged: ?OnValueChanged, onValueChanged: OnValueChanged | undefined | null;
tooltips?: Object, tooltips?: Object;
}; };
class InspectorSidebarSection extends Component<InspectorSidebarSectionProps> { class InspectorSidebarSection extends Component<InspectorSidebarSectionProps> {
@@ -74,19 +75,19 @@ class InspectorSidebarSection extends Component<InspectorSidebarSectionProps> {
} }
} }
type Props = {| type Props = {
element: ?Element, element: Element | undefined | null;
tooltips?: Object, tooltips?: Object;
onValueChanged: ?OnValueChanged, onValueChanged: OnValueChanged | undefined | null;
client: PluginClient, client: PluginClient;
realClient: Client, realClient: Client;
logger: Logger, logger: Logger;
extensions?: Array<Function>, extensions?: Array<Function>;
|}; };
type State = {| type State = {
isConsoleEnabled: boolean, isConsoleEnabled: boolean;
|}; };
export class InspectorSidebar extends Component<Props, State> { export class InspectorSidebar extends Component<Props, State> {
state = { state = {
@@ -144,7 +145,7 @@ export class InspectorSidebar extends Component<Props, State> {
console.error( console.error(
`ElementsInspector unable to parse extra section: ${extraSection}`, `ElementsInspector unable to parse extra section: ${extraSection}`,
); );
data = {}; data = null;
} }
} }
sections.push( sections.push(

10
src/ui/index.js
View File

@@ -170,15 +170,15 @@ export type {
ElementAttribute, ElementAttribute,
Element, Element,
ElementSearchResultSet, ElementSearchResultSet,
} from './components/elements-inspector/ElementsInspector.js'; } from './components/elements-inspector/ElementsInspector.tsx';
export {Elements} from './components/elements-inspector/elements.js'; export {Elements} from './components/elements-inspector/elements.tsx';
export type { export type {
ContextMenuExtension, ContextMenuExtension,
} from './components/elements-inspector/elements.js'; } from './components/elements-inspector/elements.tsx';
export { export {
default as ElementsInspector, default as ElementsInspector,
} from './components/elements-inspector/ElementsInspector.js'; } from './components/elements-inspector/ElementsInspector.tsx';
export {InspectorSidebar} from './components/elements-inspector/sidebar.js'; export {InspectorSidebar} from './components/elements-inspector/sidebar.tsx';
export {Console} from './components/console.tsx'; export {Console} from './components/console.tsx';