feat(editor): add convenient eval input

Clarence5 · Aug 29, 2023 · 9c56b2a · 9c56b2a
1 parent 59d5e6a
commit 9c56b2a
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'}