@pie-element/rubric 1.6.2 → 1.6.3-next.1016

package/src/main.jsx

@@ -27,6 +27,7 @@ class Rubric extends React.Component {
 
   static propTypes = {
     classes: PropTypes.object.isRequired,
+    animationsDisabled: PropTypes.bool,
     value: RubricType,
   };
 
@@ -44,51 +45,60 @@ class Rubric extends React.Component {
   };
 
   render() {
-    const { value, classes } = this.props;
+    const { value, classes, animationsDisabled } = this.props;
+
     if (value && value.points) {
       const { points, sampleAnswers } = value;
 
+      const rubricList = <List component="nav">
+        {points.slice(0).reverse().map(
+          (desc, index) => {
+            index = points.length - index - 1;
+            return this.shouldRenderPoint(index, value) && (
+              <React.Fragment key={index}>
+                <ListItem key={`P${index}`}>
+                  <ListItemText
+                    className={classes.rubricCol}
+                    primary={index === 1 ? `${index} PT` : `${index} PTS`}
+                  />
+                  <ListItemText
+                    primary={
+                      <div dangerouslySetInnerHTML={{ __html: desc }} />
+                    }
+                  />
+                </ListItem>
+                {sampleAnswers && sampleAnswers[index] && (
+                  <ListItem key={`S${index}`}>
+                    <ListItemText
+                      className={classes.rubricCol}
+                      style={{marginLeft: '20px'}}
+                      primary={'Sample Answer'}
+                    />
+                    <ListItemText
+                      primary={
+                        <div dangerouslySetInnerHTML={{ __html: sampleAnswers[index] }} />
+                      }
+                    />
+                  </ListItem>
+                )}
+              </React.Fragment>
+            )
+          })}
+      </List>;
+
       return (
         <div className={classes.root}>
-          <Link href={this.dudUrl} onClick={this.toggleRubric}>
-            {this.state.linkPrefix} Rubric
-          </Link>
-          <Collapse in={this.state.rubricOpen} timeout="auto">
-            <List component="nav">
-              {points.map(
-                (desc, index) =>
-                  this.shouldRenderPoint(index, value) && (
-                    <React.Fragment key={index}>
-                      <ListItem key={`P${index}`}>
-                        <ListItemText
-                          className={classes.rubricCol}
-                          primary={`${index} PTS`}
-                        />
-                        <ListItemText
-                          primary={
-                            <div dangerouslySetInnerHTML={{ __html: desc }} />
-                          }
-                        />
-                      </ListItem>
-                      {sampleAnswers && sampleAnswers[index] && (
-                        <ListItem key={`S${index}`}>
-                          <ListItemText
-                            className={classes.rubricCol}
-                            style={{marginLeft: '20px'}}
-                            primary={'Sample Answer'}
-                          />
-                          <ListItemText
-                            primary={
-                              <div dangerouslySetInnerHTML={{ __html: sampleAnswers[index] }} />
-                            }
-                          />
-                        </ListItem>
-                      )}
-                    </React.Fragment>
-                  )
-              )}
-            </List>
-          </Collapse>
+          {!animationsDisabled ?
+            <React.Fragment>
+              <Link href={this.dudUrl} onClick={this.toggleRubric}>
+                {this.state.linkPrefix} Rubric
+              </Link>
+              <Collapse in={this.state.rubricOpen} timeout="auto">
+                {rubricList}
+              </Collapse>
+            </React.Fragment>
+            : rubricList
+          }
         </div>
       );
     } else {
@@ -100,6 +110,7 @@ class Rubric extends React.Component {
 const styles = () => ({
   rubricCol: {
     flex: '0 1 auto',
+    minWidth: 'fit-content'
   },
 });
 

package/src/print.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import debounce from 'lodash/debounce';
+import Main from './main';
+import { renderMath } from '@pie-lib/math-rendering';
+import debug from 'debug';
+
+const log = debug('pie-element:rubric:print');
+
+const preparePrintModel = (model, opts) => {
+  const instr = opts.role === 'instructor';
+
+  if (!instr) {
+    return {};
+  }
+
+  model.value = { ...model };
+  model.mode = 'evaluate';
+  model.animationsDisabled = true;
+
+  return model;
+};
+
+export default class RubricPrint extends HTMLElement {
+  constructor() {
+    super();
+    this._options = null;
+    this._model = null;
+    this._session = [];
+    this._rerender = debounce(
+      () => {
+        if (this._model && this._session) {
+          const printModel = preparePrintModel(this._model, this._options);
+
+          const element =
+            this._options &&
+            React.createElement(Main, {
+              ...printModel,
+            });
+
+          ReactDOM.render(element, this, () => {
+            log('render complete - render math');
+            renderMath(this);
+          });
+        } else {
+          log('skip');
+        }
+      },
+      50,
+      { leading: false, trailing: true }
+    );
+  }
+  set options(o) {
+    this._options = o;
+  }
+
+  set model(s) {
+    this._model = s;
+    this._rerender();
+  }
+
+  connectedCallback() {}
+}