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

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

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

10
src/ui/index.js
View File

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