From 33eef0b8dc3bf3e1a5508259ae1c15a31a06db3b Mon Sep 17 00:00:00 2001 From: Max Daunarovich Date: Wed, 19 Jan 2022 19:02:07 +0300 Subject: [PATCH 1/4] Update render tree to hide Cadence editor instead of unmounting it. --- src/containers/Editor/components.tsx | 78 ++++++++++++++++++++++++++-- 1 file changed, 74 insertions(+), 4 deletions(-) diff --git a/src/containers/Editor/components.tsx b/src/containers/Editor/components.tsx index 9b276422..8dd0756f 100644 --- a/src/containers/Editor/components.tsx +++ b/src/containers/Editor/components.tsx @@ -1,9 +1,10 @@ import React, { useState, useEffect } from 'react'; -import { Flex, Button, Box, Divider } from 'theme-ui'; +import { Flex, Button, Box /*Divider*/ } from 'theme-ui'; import styled from '@emotion/styled'; import { FaShareSquare } from 'react-icons/fa'; import { motion } from 'framer-motion'; import useClipboard from 'react-use-clipboard'; +import { Divider } from 'theme-ui'; import { Main as MainRoot } from 'layout/Main'; import { Editor as EditorRoot } from 'layout/Editor'; @@ -30,6 +31,10 @@ import { } from 'components/Arguments/SingleArgument/styles'; import { Markdown } from 'components/Markdown'; +export interface WithShowProps { + show: boolean; +} + const Header: React.FC = ({ children }) => { return ( @@ -154,7 +159,8 @@ function getActiveId(project: Project, active: ActiveEditor): string { } } -const ProjectInfoContainer = styled.div` +const ProjectInfoContainer = styled.div` + display: ${({ show }) => (show ? 'block' : 'none')}; margin: 0.2rem 1rem 0rem 1rem; min-width: 500px; margin-top: 1rem; @@ -230,10 +236,9 @@ const EditorContainer: React.FC = ({ } const isReadmeEditor = active.type === 4; - const isCodeEditor = !isReadmeEditor; return ( - + /* {isReadmeEditor && (project.parentId && !project.persist ? ( @@ -303,6 +308,71 @@ const EditorContainer: React.FC = ({ )} + */ + + + + {/* This is Project Info Block */} + + {project.parentId && !project.persist ? ( + <> + {title} + + {description} + + + + + + ) : ( + <> + + + { + setTitle(event.target.value); + updateProject(event.target.value, description, readme); + }} + /> + + + + { + setDescription(event.target.value); + updateProject(title, event.target.value, readme); + }} + /> + + + { + setReadme(readme); + updateProject(title, description, readme); + }} + /> + + )} + + {/* This is Cadence Editor */} + onEditorChange(code)} + getCode={getCode} + show={!isReadmeEditor} + /> + + ); }; From b47a5b5cbec21b3bc9c717f1850e594d71060290 Mon Sep 17 00:00:00 2001 From: Max Daunarovich Date: Wed, 19 Jan 2022 19:02:26 +0300 Subject: [PATCH 2/4] Include show prop in CadenceEditor --- src/components/CadenceEditor.tsx | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/src/components/CadenceEditor.tsx b/src/components/CadenceEditor.tsx index 4e60f904..7efe1384 100644 --- a/src/components/CadenceEditor.tsx +++ b/src/components/CadenceEditor.tsx @@ -1,6 +1,9 @@ import React from 'react'; import styled from '@emotion/styled'; import { keyframes } from '@emotion/core'; +import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'; +const { MonacoServices } = require('monaco-languageclient/lib/monaco-services'); + import configureCadence, { CADENCE_LANGUAGE_ID } from 'util/cadence'; import { CadenceCheckCompleted, @@ -8,7 +11,6 @@ import { Callbacks, } from 'util/language-server'; import { createCadenceLanguageClient } from 'util/language-client'; -import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'; import { EntityType } from 'providers/Project'; import Arguments from 'components/Arguments'; import { Argument } from 'components/Arguments/types'; @@ -23,8 +25,7 @@ import { MonacoLanguageClient, ExecuteCommandRequest, } from 'monaco-languageclient'; - -const { MonacoServices } = require('monaco-languageclient/lib/monaco-services'); +import { WithShowProps } from "containers/Editor/components"; const blink = keyframes` 50% { @@ -32,11 +33,13 @@ const blink = keyframes` } `; -const EditorContainer = styled.div` +const EditorContainer = styled.div` width: 100%; height: 100%; position: relative; + display: ${({ show }) => (show ? 'block' : 'none')}; + .drag-box { width: fit-content; height: fit-content; @@ -112,6 +115,7 @@ type CodeGetter = (index: number) => string | undefined; type CadenceEditorProps = { code: string; mount: string; + show: boolean; onChange: any; activeId: string; type: EntityType; @@ -136,6 +140,7 @@ class CadenceEditor extends React.Component< constructor(props: { code: string; mount: string; + show: boolean; onChange: any; activeId: string; type: EntityType; @@ -183,15 +188,12 @@ class CadenceEditor extends React.Component< this.editor.focus(); if (this.props.activeId && !this.callbacks) { - const getCode = (index: number) => - this.props.getCode(index) + const getCode = (index: number) => this.props.getCode(index); await this.loadLanguageServer(getCode); } } - private async loadLanguageServer( - getCode: CodeGetter, - ) { + private async loadLanguageServer(getCode: CodeGetter) { this.callbacks = { // The actual callback will be set as soon as the language server is initialized toServer: null, @@ -439,7 +441,7 @@ class CadenceEditor extends React.Component< } render() { - const { type, code } = this.props; + const { type, code, show } = this.props; /// Get a list of args from language server const { activeId } = this.props; @@ -455,7 +457,7 @@ class CadenceEditor extends React.Component< info: [], }; return ( - + Date: Thu, 20 Jan 2022 22:06:35 +0300 Subject: [PATCH 3/4] Fix Bool conversion error --- src/components/Arguments/index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/Arguments/index.tsx b/src/components/Arguments/index.tsx index 67e670d3..a54a5115 100644 --- a/src/components/Arguments/index.tsx +++ b/src/components/Arguments/index.tsx @@ -288,7 +288,10 @@ const Arguments: React.FC = (props) => { // Map values to strings that will be passed to backend const args:any = list.map((arg, index) => { const { type } = arg; - const value = fixed[index] + const fixedValue = fixed[index] + + // We need to keep Bool values as boolean and not string + const value = type === "Bool" ? fixedValue === "true" : fixed[index] // If we have a complex type - return value formatted by language server if ( isComplexType(type)){ From 31de79abcd4a89e968b73c957307f6a7b18b7fea Mon Sep 17 00:00:00 2001 From: Max Daunarovich Date: Thu, 20 Jan 2022 22:13:25 +0300 Subject: [PATCH 4/4] Remove unused block of code --- src/containers/Editor/components.tsx | 71 ---------------------------- 1 file changed, 71 deletions(-) diff --git a/src/containers/Editor/components.tsx b/src/containers/Editor/components.tsx index 8dd0756f..58d333ae 100644 --- a/src/containers/Editor/components.tsx +++ b/src/containers/Editor/components.tsx @@ -238,77 +238,6 @@ const EditorContainer: React.FC = ({ const isReadmeEditor = active.type === 4; return ( - /* - {isReadmeEditor && - (project.parentId && !project.persist ? ( - - - - {title} - - {description} - - - - - - - ) : ( - - - - - - { - setTitle(event.target.value); - updateProject(event.target.value, description, readme); - }} - /> - - - - { - setDescription(event.target.value); - updateProject(title, event.target.value, readme); - }} - /> - - - { - setReadme(readme); - updateProject(title, description, readme); - }} - /> - - - ))} - {isCodeEditor && ( - <> - - - onEditorChange(code)} - getCode={getCode} - /> - - - - )} - */