41f4478a74
Summary: Shows basic relationship between the AX and nonAX tree litho nodes. When a litho component is selected from the nonAX tree, it's corresponding hostView or lithoView (root of the component tree) is highlighted in the AX tree giving priority to the hostView if it exists. If a hostView is selected in the AX tree, it's corresponding component is selected in the non-AX tree. If a lithoView is selected from the AX tree, it's corresponding lithoView is highlighted in the non-AX tree. This means that each hostView has a one-to-one highlighting between the two trees but lithoViews will have many nodes in the main tree that map to one node in the AX tree (which is accurate to litho components rendering but we may need to change in the future if it is not clear). Reviewed By: jknoxville Differential Revision: D8972205 fbshipit-source-id: d136f5b594d0ac1b66a82b35dc7b085186829fc4
90 lines
1.9 KiB
JavaScript
90 lines
1.9 KiB
JavaScript
/**
|
|
* 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.js';
|
|
import {Elements} from './elements.js';
|
|
|
|
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 = {|
|
|
nonAXWithAXChild?: boolean,
|
|
linkedAXNode?: string,
|
|
|};
|
|
|
|
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,
|
|
searchResults?: ?ElementSearchResultSet,
|
|
root: ?ElementID,
|
|
elements: {[key: ElementID]: Element},
|
|
useAppSidebar?: boolean,
|
|
}> {
|
|
render() {
|
|
const {
|
|
selected,
|
|
elements,
|
|
root,
|
|
onElementExpanded,
|
|
onElementSelected,
|
|
onElementHovered,
|
|
searchResults,
|
|
} = this.props;
|
|
|
|
return (
|
|
<FlexRow fill={true}>
|
|
<Elements
|
|
onElementExpanded={onElementExpanded}
|
|
onElementSelected={onElementSelected}
|
|
onElementHovered={onElementHovered}
|
|
selected={selected}
|
|
searchResults={searchResults}
|
|
root={root}
|
|
elements={elements}
|
|
/>
|
|
</FlexRow>
|
|
);
|
|
}
|
|
}
|