Set initial height refactoring

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/monaco-editor/get-editor-height-from-lines-number.injectable.ts

@@ -5,24 +5,26 @@
 
 import { getInjectable } from "@ogre-tools/injectable";
 
+export type MonacoEditorSize = (linesCount: number) => number;
+
 const getEditorHeightFromLinesCountInjectable = getInjectable({
   id: "get-editor-height-from-lines-number",
 
   instantiate: () => {
-    return (linesNumber: number) => {
+    return (linesCount: number) => {
-      if (typeof linesNumber !== "number") {
+      if (typeof linesCount !== "number") {
         throw new Error("linesNumber must be a number");
       }
 
-      if (linesNumber < 10) {
+      if (linesCount < 10) {
-        return "small";
+        return 90;
       }
 
-      if (linesNumber < 20) {
+      if (linesCount < 20) {
-        return "medium";
+        return 180;
       }
 
-      return "large";
+      return 360;
     };
   },
 });

src/renderer/components/monaco-editor/get-editor-height-from-lines-number.test.ts

@@ -7,7 +7,7 @@ import { getDiForUnitTesting } from "../../getDiForUnitTesting";
 import getEditorHeightFromLinesCountInjectable from "./get-editor-height-from-lines-number.injectable";
 
 describe("get-editor-height-from-lines-number", () => {
-  let getEditorHeightFromLinesNumber: (linesNumber: number) => string;
+  let getEditorHeightFromLinesNumber: (linesCount: number) => number;
 
   beforeEach(() => {
     const di = getDiForUnitTesting({ doGeneralOverrides: false });
@@ -15,33 +15,33 @@ describe("get-editor-height-from-lines-number", () => {
     getEditorHeightFromLinesNumber = di.inject(getEditorHeightFromLinesCountInjectable);
   });
 
-  it("given linesNumber is less than 10, when called, returns small", () => {
+  it("given linesCount is less than 10, when called, returns small number", () => {
     const actual = getEditorHeightFromLinesNumber(9);
 
-    expect(actual).toBe("small");
+    expect(actual).toBe(90);
   });
 
-  it("given linesNumber is equal to 10, when called, returns medium", () => {
+  it("given linesCount is equal to 10, when called, returns medium number", () => {
     const actual = getEditorHeightFromLinesNumber(10);
 
-    expect(actual).toBe("medium");
+    expect(actual).toBe(180);
   });
 
-  it("given linesNumber is greater than 10 and less than 20, when called, returns medium", () => {
+  it("given linesCount is greater than 10 and less than 20, when called, returns medium number", () => {
     const actual = getEditorHeightFromLinesNumber(19);
 
-    expect(actual).toBe("medium");
+    expect(actual).toBe(180);
   });
 
-  it("given linesNumber is equal to 20, when called, returns large", () => {
+  it("given linesCount is equal to 20, when called, returns large number", () => {
     const actual = getEditorHeightFromLinesNumber(20);
 
-    expect(actual).toBe("large");
+    expect(actual).toBe(360);
   });
 
-  it("given linesNumber is greater than 20, when called, returns large", () => {
+  it("given linesCount is greater than 20, when called, returns large number", () => {
     const actual = getEditorHeightFromLinesNumber(21);
 
-    expect(actual).toBe("large");
+    expect(actual).toBe(360);
   });
 });

src/renderer/components/monaco-editor/monaco-editor.module.scss

@@ -7,16 +7,4 @@
   width: 100%;
   height: 100%;
   flex: 1;
-
-  &.small {
-    height: 90px;
-  }
-
-  &.medium {
-    height: 180px;
-  }
-
-  &.large {
-    height: 360px;
-  }
 }

src/renderer/components/monaco-editor/monaco-editor.tsx

@@ -18,7 +18,7 @@ import type { LensTheme } from "../../themes/lens-theme";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import userStoreInjectable from "../../../common/user-store/user-store.injectable";
 import activeThemeInjectable from "../../themes/active.injectable";
-import getEditorHeightFromLinesCountInjectable from "./get-editor-height-from-lines-number.injectable";
+import getEditorHeightFromLinesCountInjectable, { MonacoEditorSize } from "./get-editor-height-from-lines-number.injectable";
 
 export type MonacoEditorId = string;
 
@@ -44,7 +44,7 @@ export interface MonacoEditorProps {
 interface Dependencies {
   userStore: UserStore;
   activeTheme: IComputedValue<LensTheme>;
-  getEditorHeightFromLinesCount: (linesNumber: number) => "small" | "medium" | "large";
+  getEditorHeightFromLinesCount: MonacoEditorSize;
 }
 
 export function createMonacoUri(id: MonacoEditorId): Uri {
@@ -291,20 +291,23 @@ class NonInjectedMonacoEditor extends React.Component<MonacoEditorProps & Depend
   // avoid excessive validations during typing
   validateLazy = debounce(this.validate, 250);
 
-  get initialHeightClassName() {
+  get initialHeight() {
-    return this.props.setInitialHeight ?
+    return this.props.getEditorHeightFromLinesCount(this.model.getLineCount());
-      styles[this.props.getEditorHeightFromLinesCount(this.model.getLineCount())] :
-      null;
   }
 
   render() {
-    const { className, style } = this.props;
+    const { className, style, setInitialHeight } = this.props;
+
+    const css: React.CSSProperties = {
+      ...style,
+      height: setInitialHeight ? this.initialHeight : style?.height,
+    }
 
     return (
       <div
         data-test-id="monaco-editor"
-        className={cssNames(styles.MonacoEditor, className, this.initialHeightClassName)}
+        className={cssNames(styles.MonacoEditor, className)}
-        style={style}
+        style={css}
         ref={elem => this.containerElem = elem}
       />
     );