@pie-lib/rubric 1.0.0-beta.2 → 1.0.0-beta.4

package/src/authoring.jsx

@@ -35,15 +35,16 @@ const reorder = (list, startIndex, endIndex) => {
 export const RubricType = PropTypes.shape({
   excludeZero: PropTypes.bool,
   points: PropTypes.arrayOf(PropTypes.string),
-  sampleAnswers: PropTypes.arrayOf(PropTypes.string)
+  sampleAnswers: PropTypes.arrayOf(PropTypes.string),
+  maxPoints: PropTypes.number,
 });
 
-const MaxPoints = withStyles(theme => ({
+const MaxPoints = withStyles((theme) => ({
   formControl: {
     minWidth: '120px',
-    margin: theme.spacing.unit
-  }
-}))(props => {
+    margin: theme.spacing.unit,
+  },
+}))((props) => {
   const { value, onChange, max, classes } = props;
 
   return (
@@ -51,12 +52,8 @@ const MaxPoints = withStyles(theme => ({
       <InputLabel width={100} htmlFor="...">
         Max Points
       </InputLabel>
-      <Select
-        value={value}
-        onChange={e => onChange(e.target.value)}
-        input={<OutlinedInput labelWidth={80} />}
-      >
-        {range(1, max).map(v => (
+      <Select value={value} onChange={(e) => onChange(e.target.value)} input={<OutlinedInput labelWidth={80} />}>
+        {range(1, max).map((v) => (
           <MenuItem key={`${v}`} value={v}>
             {v}
           </MenuItem>
@@ -68,37 +65,37 @@ const MaxPoints = withStyles(theme => ({
 
 // if the value is null or 'null', the Sample Answer input field for that point will not be dispalyed
 // if the value is '', the Sample Answer input field will be empty
-const checkSampleAnswer = sampleAnswer => sampleAnswer === null || sampleAnswer === 'null';
+const checkSampleAnswer = (sampleAnswer) => sampleAnswer === null || sampleAnswer === 'null';
 
-export const PointConfig = withStyles(theme => ({
+export const PointConfig = withStyles((theme) => ({
   pointConfig: {},
   row: {
     display: 'flex',
     width: '100%',
-    position: 'relative'
+    position: 'relative',
   },
   editor: {
     width: '100%',
-    backgroundColor: 'white !important'
+    backgroundColor: `${theme.palette.common.white} !important`,
   },
   dragIndicator: {
     paddingTop: theme.spacing.unit,
-    color: grey[500]
+    color: grey[500],
   },
   pointsLabel: {
     color: grey[500],
     paddingBottom: theme.spacing.unit,
-    textTransform: 'uppercase'
+    textTransform: 'uppercase',
   },
   sampleAnswersEditor: {
-    paddingLeft: theme.spacing.unit * 3
+    paddingLeft: theme.spacing.unit * 3,
   },
   pointMenu: {
     position: 'absolute',
-    right: 0
-  }
-}))(props => {
-  const { points, content, classes, sampleAnswer } = props;
+    right: 0,
+  },
+}))((props) => {
+  const { points, content, classes, sampleAnswer, mathMlOptions = {} } = props;
   const pointsLabel = `${points} ${points <= 1 ? 'pt' : 'pts'}`;
   const showSampleAnswer = checkSampleAnswer(sampleAnswer);
 
@@ -107,17 +104,24 @@ export const PointConfig = withStyles(theme => ({
       <Typography variant="overline" className={classes.pointsLabel}>
         {pointsLabel}
       </Typography>
+
       <div className={classes.row}>
         <DragIndicator className={classes.dragIndicator} />
-        <EditableHtml className={classes.editor} markup={content} onChange={props.onChange} />
+        <EditableHtml
+          className={classes.editor}
+          markup={content}
+          onChange={props.onChange}
+          mathMlOptions={mathMlOptions}
+        />
         <PointMenu
           classes={{
-            icon: classes.pointMenu
+            icon: classes.pointMenu,
           }}
           showSampleAnswer={showSampleAnswer}
           onChange={props.onMenuChange}
         />
       </div>
+
       {!showSampleAnswer && (
         <div className={classes.sampleAnswersEditor}>
           <Typography variant="overline" className={classes.dragIndicator}>
@@ -127,6 +131,7 @@ export const PointConfig = withStyles(theme => ({
             className={classes.editor}
             markup={sampleAnswer}
             onChange={props.onSampleChange}
+            mathMlOptions={mathMlOptions}
           />
         </div>
       )}
@@ -139,12 +144,12 @@ export class RawAuthoring extends React.Component {
     classes: PropTypes.object.isRequired,
     className: PropTypes.string,
     value: RubricType,
-    onChange: PropTypes.func
+    onChange: PropTypes.func,
   };
 
   static defaultProps = {};
 
-  dragEnd = result => {
+  dragEnd = (result) => {
     if (!result.destination) {
       return;
     }
@@ -152,16 +157,12 @@ export class RawAuthoring extends React.Component {
     const { value, onChange } = this.props;
 
     const points = reorder(value.points, result.source.index, result.destination.index);
-    const sampleAnswers = reorder(
-      value.sampleAnswers,
-      result.source.index,
-      result.destination.index
-    );
+    const sampleAnswers = reorder(value.sampleAnswers, result.source.index, result.destination.index);
 
     onChange({ ...value, points, sampleAnswers });
   };
 
-  changeMaxPoints = maxPoints => {
+  changeMaxPoints = (maxPoints) => {
     const { value, onChange } = this.props;
     const currentMax = value.points.length - 1;
 
@@ -241,7 +242,8 @@ export class RawAuthoring extends React.Component {
   };
 
   render() {
-    const { classes, className, value } = this.props;
+    const { classes, className, value, mathMlOptions = {} } = this.props;
+    let { excludeZeroEnabled = true, maxPointsEnabled = true } = value || {};
 
     if (value && Number.isFinite(value.maxPoints)) {
       // eslint-disable-next-line no-console
@@ -254,26 +256,25 @@ export class RawAuthoring extends React.Component {
           Rubric
         </Typography>
         <FormGroup row>
-          <MaxPoints max={10} value={value.points.length - 1} onChange={this.changeMaxPoints} />
-          <FormControlLabel
-            label="Exclude zeros"
-            control={<Checkbox checked={value.excludeZero} onChange={this.excludeZeros} />}
-          />
+          {maxPointsEnabled && <MaxPoints max={10} value={value.points.length - 1} onChange={this.changeMaxPoints} />}
+          {excludeZeroEnabled && (
+            <FormControlLabel
+              label="Exclude zeros"
+              control={<Checkbox checked={value.excludeZero} onChange={this.excludeZeros} />}
+            />
+          )}
         </FormGroup>
+
         <div className={classes.container}>
           <DragDropContext onDragEnd={this.dragEnd}>
             <Droppable droppableId="droppable">
-              {provided => (
+              {(provided) => (
                 <div {...provided.droppableProps} ref={provided.innerRef}>
                   {value.points.map(
                     (p, index) =>
                       this.shouldRenderPoint(index, value) && (
-                        <Draggable
-                          key={`${p.points}-${index}`}
-                          index={index}
-                          draggableId={index.toString()}
-                        >
-                          {provided => (
+                        <Draggable key={`${p.points}-${index}`} index={index} draggableId={index.toString()}>
+                          {(provided) => (
                             <div
                               className={classes.configHolder}
                               ref={provided.innerRef}
@@ -284,18 +285,15 @@ export class RawAuthoring extends React.Component {
                                 points={value.points.length - 1 - index}
                                 content={p}
                                 sampleAnswer={value.sampleAnswers && value.sampleAnswers[index]}
-                                onChange={content => this.changeContent(index, content, 'points')}
-                                onSampleChange={content =>
-                                  this.changeContent(index, content, 'sampleAnswers')
-                                }
-                                onMenuChange={clickedItem =>
-                                  this.onPointMenuChange(index, clickedItem)
-                                }
+                                onChange={(content) => this.changeContent(index, content, 'points')}
+                                onSampleChange={(content) => this.changeContent(index, content, 'sampleAnswers')}
+                                onMenuChange={(clickedItem) => this.onPointMenuChange(index, clickedItem)}
+                                mathMlOptions={mathMlOptions}
                               />
                             </div>
                           )}
                         </Draggable>
-                      )
+                      ),
                   )}
                   {provided.placeholder}
                 </div>
@@ -308,28 +306,28 @@ export class RawAuthoring extends React.Component {
   }
 }
 
-const styles = theme => ({
+const styles = (theme) => ({
   container: {
     backgroundColor: grey[200],
     borderWidth: 1,
     borderStyle: 'solid',
     borderColor: grey[300],
     padding: theme.spacing.unit * 2,
-    margin: theme.spacing.unit
+    margin: theme.spacing.unit,
   },
   configHolder: {
     paddingTop: theme.spacing.unit,
-    paddingBottom: theme.spacing.unit
+    paddingBottom: theme.spacing.unit,
   },
   rubricTitle: {
     paddingLeft: theme.spacing.unit,
-    margin: theme.spacing.unit
-  }
+    margin: theme.spacing.unit,
+  },
 });
 
 const StyledRawAuthoring = withStyles(styles)(RawAuthoring);
 
-const Reverse = props => {
+const Reverse = (props) => {
   const points = Array.from(props.value.points || []).reverse();
   let sampleAnswers = Array.from(props.value.sampleAnswers || []).reverse();
 
@@ -341,11 +339,11 @@ const Reverse = props => {
 
   const value = { ...props.value, points, sampleAnswers };
 
-  const onChange = value => {
+  const onChange = (value) => {
     props.onChange({
       ...value,
       points: Array.from(value.points || []).reverse(),
-      sampleAnswers: Array.from(value.sampleAnswers || []).reverse()
+      sampleAnswers: Array.from(value.sampleAnswers || []).reverse(),
     });
   };
 
@@ -355,7 +353,7 @@ const Reverse = props => {
 Reverse.propTypes = {
   value: RubricType,
   getIndex: PropTypes.func,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
 };
 
 export default Reverse;

package/src/index.js

@@ -2,7 +2,7 @@ import Authoring from './authoring';
 
 const RUBRIC_TYPES = {
   SIMPLE_RUBRIC: 'simpleRubric',
-  MULTI_TRAIT_RUBRIC: 'multiTraitRubric'
+  MULTI_TRAIT_RUBRIC: 'multiTraitRubric',
 };
 
 export { Authoring, RUBRIC_TYPES };

package/src/point-menu.jsx

@@ -10,18 +10,18 @@ export class IconMenu extends React.Component {
   static propTypes = {
     opts: PropTypes.object,
     onClick: PropTypes.func.isRequired,
-    classes: PropTypes.object.isRequired
+    classes: PropTypes.object.isRequired,
   };
 
   constructor(props) {
     super(props);
     this.state = {
       anchorEl: undefined,
-      open: false
+      open: false,
     };
   }
 
-  handleClick = event => this.setState({ open: true, anchorEl: event.currentTarget });
+  handleClick = (event) => this.setState({ open: true, anchorEl: event.currentTarget });
 
   handleRequestClose = () => this.setState({ open: false });
 
@@ -30,7 +30,7 @@ export class IconMenu extends React.Component {
     const { open, anchorEl } = this.state;
     const keys = Object.keys(opts) || [];
 
-    const handleMenuClick = key => () => {
+    const handleMenuClick = (key) => () => {
       onClick(key);
       this.handleRequestClose();
     };
@@ -52,7 +52,7 @@ export class IconMenu extends React.Component {
           style={{ transform: 'translate(-15px, -15px)' }}
           transformOrigin={{
             vertical: 'center',
-            horizontal: 'right'
+            horizontal: 'right',
           }}
         >
           {keys.map((k, index) => (
@@ -70,11 +70,11 @@ export default class PointMenu extends React.Component {
   static propTypes = {
     onChange: PropTypes.func.isRequired,
     classes: PropTypes.object.isRequired,
-    showSampleAnswer: PropTypes.bool.isRequired
+    showSampleAnswer: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
-    classes: {}
+    classes: {},
   };
 
   render() {
@@ -83,9 +83,9 @@ export default class PointMenu extends React.Component {
 
     return (
       <IconMenu
-        onClick={key => onChange(key)}
+        onClick={(key) => onChange(key)}
         opts={{
-          sample: sampleText
+          sample: sampleText,
         }}
         classes={classes}
       />