@pie-element/drawing-response 10.3.4-next.3 → 11.0.0-beta.0

package/src/drawing-response/index.jsx

@@ -1,10 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { color, Collapsible, PreviewPrompt, UiLayout } from '@pie-lib/render-ui';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 
 import Container from './container';
 
+const StyledUiLayout = styled(UiLayout)({
+  color: color.text(),
+  backgroundColor: color.background(),
+});
+
+const StyledCollapsible = styled(Collapsible)(({ theme }) => ({
+  marginBottom: theme.spacing(2),
+}));
+
+const ErrorDiv = styled('div')({
+  color: color.text(),
+  backgroundColor: color.background(),
+});
+
 class DrawingResponseComponent extends React.Component {
   constructor(props) {
     super(props);
@@ -33,25 +47,23 @@ class DrawingResponseComponent extends React.Component {
       },
       session,
       onSessionChange,
-      classes,
     } = this.props;
     const { hasError, errorMessage } = this.state;
     const isEvaluateMode = mode === 'evaluate';
 
     return hasError ? (
-      <div className={classes.main}>An error occured: {errorMessage}</div>
+      <ErrorDiv>An error occured: {errorMessage}</ErrorDiv>
     ) : (
-      <UiLayout extraCSSRules={extraCSSRules} className={classes.main}>
+      <StyledUiLayout extraCSSRules={extraCSSRules}>
         {teacherInstructions && (
-          <Collapsible
-            className={classes.collapsible}
+          <StyledCollapsible
             labels={{
               hidden: 'Show Teacher Instructions',
               visible: 'Hide Teacher Instructions',
             }}
           >
             <PreviewPrompt prompt={teacherInstructions} />
-          </Collapsible>
+          </StyledCollapsible>
         )}
 
         {prompt && <PreviewPrompt tagName="span" prompt={prompt} />}
@@ -66,26 +78,15 @@ class DrawingResponseComponent extends React.Component {
           disabled={disabled}
           language={language}
         />
-      </UiLayout>
+      </StyledUiLayout>
     );
   }
 }
 
 DrawingResponseComponent.propTypes = {
-  classes: PropTypes.object,
   model: PropTypes.object.isRequired,
   onSessionChange: PropTypes.func.isRequired,
   session: PropTypes.object.isRequired,
 };
 
-const styles = (theme) => ({
-  main: {
-    color: color.text(),
-    backgroundColor: color.background(),
-  },
-  collapsible: {
-    marginBottom: theme.spacing.unit * 2,
-  },
-});
-
-export default withStyles(styles)(DrawingResponseComponent);
+export default DrawingResponseComponent;

package/src/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import isEmpty from 'lodash/isEmpty';
 import { renderMath } from '@pie-lib/math-rendering';
 import { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';
@@ -7,6 +7,11 @@ import { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-ev
 import DrawingResponseComponent from './drawing-response';
 
 export default class DrawingResponse extends HTMLElement {
+  constructor() {
+    super();
+    this._root = null;
+  }
+
   set model(m) {
     this._model = m;
 
@@ -49,9 +54,19 @@ export default class DrawingResponse extends HTMLElement {
         onSessionChange: this.sessionChanged,
       });
 
-      ReactDOM.render(el, this, () => {
+      if (!this._root) {
+        this._root = createRoot(this);
+      }
+      this._root.render(el);
+      queueMicrotask(() => {
         renderMath(this);
       });
     }
   }
+
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
 }

package/configure/src/__tests__/__snapshots__/image-container.test.jsx.snap

@@ -1,45 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ImageContainer snapshot renders 1`] = `
-<div>
-  <div
-    className="undefined "
-    onDragExit={[Function]}
-    onDragLeave={[Function]}
-    onDragOver={[Function]}
-    onDrop={[Function]}
-  >
-    <div>
-      <div>
-        <WithStyles(RawButton)
-          label="Replace Image"
-          onClick={[Function]}
-        />
-        <input
-          accept="image/*"
-          onChange={[Function]}
-          type="file"
-        />
-      </div>
-    </div>
-    <div>
-      <div>
-        <img
-          alt=""
-          height="auto"
-          onLoad={[Function]}
-          src="url"
-          style={
-            Object {
-              "maxHeight": "auto",
-              "maxWidth": "100%",
-              "width": undefined,
-            }
-          }
-        />
-        <div />
-      </div>
-    </div>
-  </div>
-</div>
-`;

package/configure/src/__tests__/__snapshots__/root.test.jsx.snap

@@ -1,185 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Root snapshot renders 1`] = `
-<ConfigLayout
-  dimensions={Object {}}
-  hideSettings={false}
-  settings={
-    <Panel
-      configuration={
-        Object {
-          "backgroundImage": Object {
-            "label": "Background Image",
-            "settings": true,
-          },
-          "baseInputConfiguration": Object {
-            "audio": Object {
-              "disabled": false,
-            },
-            "image": Object {
-              "disabled": false,
-            },
-            "separateParagraphs": Object {
-              "disabled": true,
-            },
-            "showParagraphs": Object {
-              "disabled": false,
-            },
-            "textAlign": Object {
-              "disabled": true,
-            },
-            "video": Object {
-              "disabled": false,
-            },
-          },
-          "language": Object {
-            "enabled": false,
-            "label": "Specify Language",
-            "settings": false,
-          },
-          "languageChoices": Object {
-            "label": "Language Choices",
-            "options": Array [],
-          },
-          "mathMlOptions": Object {
-            "mmlEditing": false,
-            "mmlOutput": false,
-          },
-          "maxImageHeight": Object {
-            "prompt": 300,
-            "teacherInstructions": 300,
-          },
-          "maxImageWidth": Object {
-            "prompt": 300,
-            "teacherInstructions": 300,
-          },
-          "prompt": Object {
-            "inputConfiguration": Object {
-              "audio": Object {
-                "disabled": false,
-              },
-              "image": Object {
-                "disabled": false,
-              },
-              "video": Object {
-                "disabled": false,
-              },
-            },
-            "label": "Prompt",
-            "required": false,
-            "settings": true,
-          },
-          "settingsPanelDisabled": false,
-          "spellCheck": Object {
-            "enabled": true,
-            "label": "Spellcheck",
-            "settings": false,
-          },
-          "teacherInstructions": Object {
-            "inputConfiguration": Object {
-              "audio": Object {
-                "disabled": false,
-              },
-              "image": Object {
-                "disabled": false,
-              },
-              "video": Object {
-                "disabled": false,
-              },
-            },
-            "label": "Teacher Instructions",
-            "required": false,
-            "settings": true,
-          },
-          "withRubric": Object {
-            "label": "Add Rubric",
-            "settings": false,
-          },
-        }
-      }
-      groups={
-        Object {
-          "Properties": Object {
-            "rubricEnabled": false,
-            "spellCheckEnabled": false,
-            "teacherInstructionsEnabled": undefined,
-          },
-          "Settings": Object {
-            "backgroundImageEnabled": undefined,
-            "language": false,
-            "language.enabled": false,
-            "promptEnabled": undefined,
-          },
-        }
-      }
-      model={
-        Object {
-          "imageDimensions": Object {
-            "height": 100,
-            "width": 100,
-          },
-          "imageUrl": "",
-          "prompt": "Test Prompt",
-          "promptEnabled": true,
-        }
-      }
-      onChangeConfiguration={[MockFunction]}
-      onChangeModel={[MockFunction]}
-    />
-  }
->
-  <Component
-    label="Item Stem"
-  >
-    <EditableHtml
-      languageCharactersProps={
-        Array [
-          Object {
-            "language": "spanish",
-          },
-          Object {
-            "language": "special",
-          },
-        ]
-      }
-      markup="Test Prompt"
-      mathMlOptions={
-        Object {
-          "mmlEditing": false,
-          "mmlOutput": false,
-        }
-      }
-      maxImageHeight={300}
-      maxImageWidth={300}
-      onChange={[Function]}
-      pluginProps={
-        Object {
-          "audio": Object {
-            "disabled": false,
-          },
-          "image": Object {
-            "disabled": false,
-          },
-          "separateParagraphs": Object {
-            "disabled": true,
-          },
-          "showParagraphs": Object {
-            "disabled": false,
-          },
-          "textAlign": Object {
-            "disabled": true,
-          },
-          "video": Object {
-            "disabled": false,
-          },
-        }
-      }
-      toolbarOpts={
-        Object {
-          "position": "bottom",
-        }
-      }
-    />
-  </Component>
-</ConfigLayout>
-`;