feat(editor): add view state button in component action menu

packages/editor/src/components/CodeEditor/StateViewer.tsx

@@ -5,6 +5,7 @@ import { JSONTree } from 'react-json-tree';
 import { pickBy } from 'lodash';
 import { watch } from '@sunmao-ui/runtime';
 import ErrorBoundary from '../ErrorBoundary';
+import { EditorServices } from '../../types';
 
 const theme = {
   base0A: '#fded02',
@@ -34,7 +35,13 @@ const style = css`
   }
 `;
 
-export const StateViewer: React.FC<{ store: Record<string, unknown> }> = ({ store }) => {
+type Props = {
+  store: Record<string, unknown>;
+  services: EditorServices;
+};
+
+export const StateViewer: React.FC<Props> = ({ store, services }) => {
+  const { viewStateComponentId, setViewStateComponentId } = services.editorStore;
   const [filterText, setFilterText] = useState('');
   const [refreshFlag, setRefreshFlag] = useState(0);
   const data = useMemo(() => {
@@ -52,6 +59,13 @@ export const StateViewer: React.FC<{ store: Record<string, unknown> }> = ({ stor
     return stop;
   }, [store]);
 
+  useEffect(() => {
+    if (viewStateComponentId) {
+      setFilterText(viewStateComponentId);
+      setViewStateComponentId('');
+    }
+  }, [setViewStateComponentId, viewStateComponentId]);
+
   return (
     <ErrorBoundary>
       <Box height="100%" className={style} display="flex" flexDirection="column">
@@ -60,7 +74,15 @@ export const StateViewer: React.FC<{ store: Record<string, unknown> }> = ({ stor
           value={filterText}
           onChange={evt => setFilterText(evt.currentTarget.value)}
         />
-        <JSONTree data={data} theme={theme} hideRoot sortObjectKeys />
+        <JSONTree
+          data={data}
+          theme={theme}
+          hideRoot
+          sortObjectKeys
+          shouldExpandNode={keyPath => {
+            return keyPath[0] === filterText;
+          }}
+        />
       </Box>
     </ErrorBoundary>
   );

packages/editor/src/components/Editor.tsx

@@ -166,7 +166,7 @@ export const Editor: React.FC<Props> = observer(
                       <DataSourceList services={services} />
                     </TabPanel>
                     <TabPanel overflow="auto" p={0} height="100%">
-                      <StateViewer store={stateStore} />
+                      <StateViewer store={stateStore} services={services} />
                     </TabPanel>
                   </TabPanels>
                 </Tabs>

packages/editor/src/components/StructureTree/ComponentNode.tsx

@@ -19,6 +19,7 @@ import { AppModel } from '../../AppModel/AppModel';
 import { ComponentId } from '../../AppModel/IAppModel';
 import { RootId } from '../../constants';
 import { RelationshipModal } from '../RelationshipModal';
+import { ExplorerMenuTabs } from '../../constants/enum';
 
 const IndextWidth = 24;
 
@@ -49,7 +50,7 @@ const ComponentNodeImpl = (props: Props) => {
     onDragEnd,
     prefix,
   } = props;
-  const { registry, eventBus, appModelManager } = services;
+  const { registry, eventBus, appModelManager, editorStore } = services;
   const [isShowRelationshipModal, setIsShowRelationshipModal] = useState(false);
   const slots = Object.keys(registry.getComponentByType(component.type).spec.slots);
   const paddingLeft = depth * IndextWidth;
@@ -92,6 +93,14 @@ const ComponentNodeImpl = (props: Props) => {
     e.stopPropagation();
     setIsShowRelationshipModal(true);
   }, []);
+  const onClickShowState = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      editorStore.setExplorerMenuTab(ExplorerMenuTabs.STATE);
+      editorStore.setViewStateComponentId(component.id);
+    },
+    [component.id, editorStore]
+  );
 
   const onClickItem = useCallback(() => {
     onSelectComponent(component.id);
@@ -108,11 +117,11 @@ const ComponentNodeImpl = (props: Props) => {
     [component.id, onDragEnd]
   );
   const onMouseOver = useCallback(() => {
-    services.editorStore.setHoverComponentId(component.id);
-  }, [component.id, services.editorStore]);
+    editorStore.setHoverComponentId(component.id);
+  }, [component.id, editorStore]);
   const onMouseLeave = useCallback(() => {
-    services.editorStore.setHoverComponentId('');
-  }, [services.editorStore]);
+    editorStore.setHoverComponentId('');
+  }, [editorStore]);
   const emptySlots = xor(notEmptySlots, slots);
 
   const emptyChildrenSlotsPlaceholder = isExpanded
@@ -171,6 +180,9 @@ const ComponentNodeImpl = (props: Props) => {
         <MenuItem icon={<ViewIcon />} onClick={onClickShowRelationshipModal}>
           Show Relationship
         </MenuItem>
+        <MenuItem icon={<ViewIcon />} onClick={onClickShowState}>
+          Show State
+        </MenuItem>
         <MenuItem icon={<DeleteIcon />} color="red.500" onClick={onClickRemove}>
           Remove
         </MenuItem>

packages/editor/src/services/EditorStore.ts

@@ -28,6 +28,7 @@ export class EditorStore {
   hoverComponentId = '';
   explorerMenuTab = ExplorerMenuTabs.UI_TREE;
   toolMenuTab = ToolMenuTabs.INSERT;
+  viewStateComponentId = '';
   validateResult: ValidateErrorResult[] = [];
   // current editor editing target(app or module)
   currentEditingTarget: EditingTarget = {
@@ -272,6 +273,10 @@ export class EditorStore {
     this.explorerMenuTab = val;
   };
 
+  setViewStateComponentId = (val: string) => {
+    this.viewStateComponentId = val;
+  };
+
   setToolMenuTab = (val: ToolMenuTabs) => {
     this.toolMenuTab = val;
   };