Merge pull request #718 from smartxworks/feat/eval-input

feat(editor): add convenient eval input
smartxworks · Aug 31, 2023 · 712f5a5 · 712f5a5
2 parents 32713c8 + 9c56b2a
commit 712f5a5
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 15 deletions.
diff --git a/packages/editor-sdk/src/components/Form/ExpressionEditor/ExpressionEditor.tsx b/packages/editor-sdk/src/components/Form/ExpressionEditor/ExpressionEditor.tsx
@@ -370,6 +370,26 @@ export const ExpressionEditor = React.forwardRef<
     },
   }));
 
+  const evaledValueElement = (
+    <Box
+      width="100%"
+      padding="8px"
+      maxHeight="128px"
+      background={error ? '#fef1f0' : '#d4eadd'}
+      color={error ? '#c04035' : '#3b734f'}
+      borderColor={error ? '#f7d6d4' : '#72b98e'}
+      borderStyle="solid"
+      borderWidth="1px"
+      borderRadius="0 0 4px 4px"
+      whiteSpace="pre-wrap"
+    >
+      <Box fontWeight="bold" marginBottom="4px">
+        {error ? 'Error' : getTypeString(evaledValue?.value)}
+      </Box>
+      {error || JSON.stringify(evaledValue?.value, null, 2)}
+    </Box>
+  );
+
   return (
     <Box className={wrapperStyle}>
       {/* Force re-render CodeMirror when editted in modal, since it's not reactive */}
@@ -404,25 +424,13 @@ export const ExpressionEditor = React.forwardRef<
       {isFocus ? (
         <Box
           width="100%"
-          padding="8px"
-          maxHeight="128px"
           overflow="auto"
           position="absolute"
           bottom="0"
           zIndex={4}
           transform="translateY(100%)"
-          background={error ? '#fef1f0' : '#d4eadd'}
-          color={error ? '#c04035' : '#3b734f'}
-          borderColor={error ? '#f7d6d4' : '#72b98e'}
-          borderStyle="solid"
-          borderWidth="1px"
-          borderRadius="0 0 4px 4px"
-          whiteSpace="pre-wrap"
         >
-          <Box fontWeight="bold" marginBottom="4px">
-            {error ? 'Error' : getTypeString(evaledValue?.value)}
-          </Box>
-          {error || JSON.stringify(evaledValue?.value, null, 2)}
+          {evaledValueElement}
         </Box>
       ) : null}
       {showModal && (
@@ -445,6 +453,7 @@ export const ExpressionEditor = React.forwardRef<
                   isError={!!error}
                 />
               </Box>
+              {evaledValueElement}
             </ModalBody>
             <ModalFooter>
               <Button size="sm" colorScheme="blue" onClick={onClose}>

diff --git a/packages/editor/src/components/Editor.tsx b/packages/editor/src/components/Editor.tsx
@@ -240,6 +240,7 @@ export const Editor: React.FC<Props> = observer(
             setIsDisplayLeftMenu={setIsDisplayLeftMenu}
             setIsDisplayRightMenu={setIsDisplayRightMenu}
             onCodeMode={() => setCodeMode(true)}
+            services={services}
           />
           <Box display="flex" flex="1" overflow="auto">
             {renderMain()}

diff --git a/packages/editor/src/components/EditorHeader/EditorHeader.tsx b/packages/editor/src/components/EditorHeader/EditorHeader.tsx
@@ -1,5 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Flex, Button, Icon } from '@chakra-ui/react';
+import { ExpressionWidget } from '@sunmao-ui/editor-sdk';
+import { Type } from '@sinclair/typebox';
+import { EditorServices } from '../../types';
 const SideBarIcon: React.FC<{
   transform?: string;
   color?: string;
@@ -15,6 +18,13 @@ const SideBarIcon: React.FC<{
   </Icon>
 );
 
+const MockComp = {
+  id: 'mock',
+  type: 'core/v1/dummy',
+  properties: {},
+  traits: [],
+};
+
 export const EditorHeader: React.FC<{
   isDisplayLeftMenu: boolean;
   isDisplayRightMenu: boolean;
@@ -23,6 +33,7 @@ export const EditorHeader: React.FC<{
   onPreview: () => void;
   onCodeMode: () => void;
   onRefresh: () => void;
+  services: EditorServices;
 }> = ({
   onPreview,
   onCodeMode,
@@ -31,10 +42,23 @@ export const EditorHeader: React.FC<{
   setIsDisplayRightMenu,
   isDisplayLeftMenu,
   isDisplayRightMenu,
+  services,
 }) => {
+  const [exp, setExp] = useState('');
   return (
     <Flex p={2} borderBottomWidth="2px" borderColor="gray.200" align="center">
-      <Flex flex="1" />
+      <Flex flex="1">
+        <ExpressionWidget
+          key={services.editorStore.selectedComponentId}
+          component={MockComp}
+          spec={Type.Any()}
+          services={services}
+          path={[]}
+          level={0}
+          value={exp}
+          onChange={v => setExp(v)}
+        />
+      </Flex>
       <Flex flex="1" align="center" justify="center">
         <SideBarIcon
           color={isDisplayLeftMenu ? '#000' : '#eee'}