Merge pull request #62 from Exabyte-io/feature/SOF-5507-3

SOF 5507 - Lessons learned back to materials designer

src/components/source_editor/BasisText.js

@@ -4,10 +4,10 @@ import "codemirror/theme/darcula.css";
 import "codemirror/mode/fortran/fortran";
 
 import { Made } from "@exabyte-io/made.js";
-import CodeMirror from "@uiw/react-codemirror";
 import setClass from "classnames";
 import PropTypes from "prop-types";
 import React from "react";
+import CodeMirror from "./CodeMirror";
 
 import { displayMessage } from "../../i18n/messages";
 
@@ -20,7 +20,7 @@ class BasisText extends React.Component {
             message: "",
             manualEditStarted: false,
         };
-        this.handleContentChange = this.handleContentChange.bind(this);
+        this.updateContent = this.updateContent.bind(this);
     }
 
     // eslint-disable-next-line no-unused-vars
@@ -31,29 +31,25 @@ class BasisText extends React.Component {
         }
     }
 
-    isContentPassingValidation(content) {
-        const { isContentValidated } = this.state;
+    validateContent = (content) => {
         try {
             Made.parsers.xyz.validate(content);
-            // only show the success message first time after last failure
-            if (!isContentValidated) {
-                this.setState({
-                    isContentValidated: true,
-                    // TODO: consider removing the success message after a timeout period
-                    message: displayMessage("basis.validationSuccess"),
-                });
-            } else {
-                // already validated before -> remove message
-                this.setState({ message: "" });
-            }
-        } catch (err) {
-            this.setState({
-                isContentValidated: false,
-                message: displayMessage("basis.validationError"),
-            });
+            return true;
+        } catch (e) {
             return false;
         }
-        return true;
+    };
+
+    isContentPassingValidation(content) {
+        const { isContentValidated } = this.state;
+        const isValid = this.validateContent(content);
+        let message = displayMessage("basis.validationError");
+        if (isValid) {
+            // if not previously validated, display success, otherwise remove message
+            message = !isContentValidated ? displayMessage("basis.validationSuccess") : "";
+        }
+        this.setState({ isContentValidated: isValid, message });
+        return isValid;
     }
 
     reformatContentAndUpdateStateIfNoManualEdit = (newContent) => {
@@ -71,18 +67,13 @@ class BasisText extends React.Component {
         }
     };
 
-    handleContentChange(editor) {
-        const { doc } = editor;
-        if (doc.children && doc.children.length) {
-            const { onChange } = this.props;
-            // TODO : export validateLine from Made and use Array.some
-            const content = doc.children[0].lines.map((line) => line.text).join("\n");
-            this.setState({ content }, () => {
-                if (this.isContentPassingValidation(content)) {
-                    onChange(content);
-                }
-            });
-        }
+    updateContent(content) {
+        const { onChange } = this.props;
+        this.setState({ content }, () => {
+            if (this.isContentPassingValidation(content)) {
+                onChange(content);
+            }
+        });
     }
 
     render() {
@@ -94,10 +85,9 @@ class BasisText extends React.Component {
                     <CodeMirror
                         className="xyz-codemirror"
                         // eslint-disable-next-line react/no-unused-class-component-methods
-                        ref={(el) => (this.codeMirrorComponent = el)}
-                        value={content}
+                        content={content}
+                        updateContent={this.updateContent}
                         onFocus={() => this.setState({ manualEditStarted: true })}
-                        onChange={this.handleContentChange}
                         onBlur={() => this.setState({ manualEditStarted: false })}
                         options={{
                             theme: "darcula",

src/components/source_editor/CodeMirror.js

@@ -0,0 +1,63 @@
+import PropTypes from "prop-types";
+import React from "react";
+
+import CodeMirrorBase from "@uiw/react-codemirror";
+
+class CodeMirror extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { isLoaded: false };
+        this.handleContentChange = this.handleContentChange.bind(this);
+    }
+
+    /*
+     * editor - CodeMirror object https://uiwjs.github.io/react-codemirror/
+     * viewUpdate - object containing the update to the editor tree structure
+     */
+    handleContentChange(editor, viewUpdate) {
+        const { isLoaded } = this.state;
+        const { updateContent, updateOnFirstLoad } = this.props;
+        // kludge for the way state management is handled in web-app
+        if (!isLoaded && !updateOnFirstLoad && viewUpdate.origin === "setValue") {
+            this.setState({ isLoaded: true });
+            return;
+        }
+        updateContent(editor.getValue());
+    }
+
+    render() {
+        const { content, options, onFocus, onBlur } = this.props;
+        return (
+            <CodeMirrorBase
+                value={content}
+                onChange={(editor, viewUpdate) => {
+                    this.handleContentChange(editor, viewUpdate);
+                }}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                options={options}
+            />
+        );
+    }
+}
+
+CodeMirror.propTypes = {
+    content: PropTypes.string,
+    updateContent: PropTypes.func,
+    updateOnFirstLoad: PropTypes.bool,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
+    // eslint-disable-next-line react/forbid-prop-types
+    options: PropTypes.object,
+};
+
+CodeMirror.defaultProps = {
+    content: "",
+    updateOnFirstLoad: true,
+    updateContent: () => {},
+    onFocus: () => {},
+    onBlur: () => {},
+    options: {},
+};
+
+export default CodeMirror;

src/exports.js

@@ -1,3 +1,4 @@
+export { default as CodeMirror } from "./components/source_editor/CodeMirror";
 export { default as BasisText } from "./components/source_editor/BasisText";
 export { Material } from "./material";
 export { ActionDialog } from "./components/include/ActionDialog";

src/stylesheets/_colors.scss

@@ -91,7 +91,7 @@
         width: #{$width}px;
     }
     &::-webkit-scrollbar-track {
-        -webkit-box-shadow: inset 0 0 #{$width/2}px rgba(0, 0, 0, 0.3);
+        -webkit-box-shadow: inset 0 0 #{calc($width/2)}px rgba(0, 0, 0, 0.3);
         border-radius: 10px;
     }
     &::-webkit-scrollbar-thumb {