Merge pull request #395 from webzard-io/fix/windlike-patch

Fix/windlike patch

packages/editor-sdk/src/components/Form/ExpressionEditor.tsx

@@ -408,11 +408,12 @@ export const ExpressionEditor = React.forwardRef<
           borderStyle="solid"
           borderWidth="1px"
           borderRadius="0 0 4px 4px"
+          whiteSpace="pre-wrap"
         >
           <Box fontWeight="bold" marginBottom="4px">
             {error ? 'Error' : getTypeString(evaledValue)}
           </Box>
-          {error || JSON.stringify(evaledValue)}
+          {error || JSON.stringify(evaledValue, null, 2)}
         </Box>
       ) : null}
       {showModal && (

packages/editor/src/components/EditorHeader/EditorHeader.tsx

@@ -14,13 +14,13 @@ export const EditorHeader: React.FC<{
       <Flex flex="1" />
       <Flex flex="1" align="center" justify="center">
         <Button size="sm" disabled={scale <= 50} onClick={() => setScale(scale - 10)}>
-          <AddIcon />
+          <MinusIcon />
         </Button>
         <Box fontSize="sm" mx="2" width={10} textAlign="center">
           {scale}%
         </Box>
         <Button size="sm" disabled={scale >= 100} onClick={() => setScale(scale + 10)}>
-          <MinusIcon />
+          <AddIcon />
         </Button>
       </Flex>
       <Flex flex="1" justify="end">

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

@@ -90,6 +90,7 @@ export const ComponentItemView: React.FC<Props> = props => {
 
   return (
     <Box
+      id={`tree-item-${id}`}
       width="full"
       padding="1"
       onMouseOver={() => setIsHover(true)}

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useRef, useEffect } from 'react';
 import { ComponentSchema } from '@sunmao-ui/core';
 import { Box, Text, VStack } from '@chakra-ui/react';
 import { ComponentTree } from './ComponentTree';
@@ -20,9 +20,12 @@ type Props = {
 
 export const StructureTree: React.FC<Props> = props => {
   const { components, selectedComponentId, onSelectComponent, services } = props;
+  const wrapperRef = useRef<HTMLDivElement>(null);
 
   const realComponents = useMemo(() => {
-    return components.filter(c => c.type !== `${CORE_VERSION}/${CoreComponentName.Dummy}`);
+    return components.filter(
+      c => c.type !== `${CORE_VERSION}/${CoreComponentName.Dummy}`
+    );
   }, [components]);
 
   const componentEles = useMemo(() => {
@@ -45,9 +48,15 @@ export const StructureTree: React.FC<Props> = props => {
     ));
   }, [realComponents, selectedComponentId, onSelectComponent, services]);
 
+  useEffect(() => {
+    wrapperRef.current
+      ?.querySelector(`#tree-item-${selectedComponentId}`)
+      ?.scrollIntoView();
+  }, [selectedComponentId]);
+
   return (
-    <VStack spacing="2" padding="5" alignItems="start">
-      <Text fontSize="lg" fontWeight="bold">
+    <VStack ref={wrapperRef} spacing="2" padding="4" alignItems="start" overflow="auto">
+      <Text fontSize="lg" fontWeight="bold" mb="0.5rem">
         Components
       </Text>
       {componentEles.length > 0 ? componentEles : <Placeholder services={services} />}

packages/runtime/src/traits/core/Fetch.tsx

@@ -28,7 +28,7 @@ export const FetchTraitPropertiesSpec = Type.Object({
   headers: Type.Record(Type.String(), Type.String(), {
     title: 'Headers',
   }),
-  body: Type.Record(Type.String(), Type.String(), {
+  body: Type.Record(Type.String(), Type.Any(), {
     title: 'Body',
     widget: `${CORE_VERSION}/${CoreWidgetName.RecordField}`,
   }),