@pie-element/rubric 3.6.1 → 3.6.2

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/mask-markup/components/blank.jsx

@@ -1,249 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import { renderMath } from '../../math-rendering';
-import debug from 'debug';
-import { DragSource, DropTarget } from '../../drag';
-import { withStyles } from '@material-ui/core/styles';
-import Chip from '@material-ui/core/Chip';
-import classnames from 'classnames';
-import { color } from '../../render-ui';
-const log = debug('pie-lib:mask-markup:blank');
-export const DRAG_TYPE = 'MaskBlank';
-
-const useStyles = withStyles(() => ({
-  content: {
-    border: `solid 0px ${color.primary()}`,
-    minWidth: '200px',
-    touchAction: 'none',
-    overflow: 'hidden',
-  },
-  chip: {
-    backgroundColor: color.background(),
-    border: `1px solid ${color.text()}`,
-    color: color.text(),
-    minWidth: '90px',
-    fontSize: 'inherit',
-    minHeight: '32px',
-    height: 'auto',
-    maxWidth: '374px',
-    position: 'relative',
-  },
-  chipLabel: {
-    whiteSpace: 'pre-wrap',
-    // Added for touch devices, for image content.
-    // This will prevent the context menu from appearing and not allowing other interactions with the image.
-    // If interactions with the image in the token will be requested we should handle only the context Menu.
-    pointerEvents: 'none',
-    '& img': {
-      display: 'block',
-      padding: '2px 0',
-    },
-  },
-  hidden: {
-    color: 'transparent',
-    opacity: 0,
-  },
-  dragged: {
-    position: 'absolute',
-    left: 16,
-    maxWidth: '60px',
-  },
-  correct: {
-    border: `solid 1px ${color.correct()}`,
-  },
-  incorrect: {
-    border: `solid 1px ${color.incorrect()}`,
-  },
-  over: {
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-  },
-}));
-
-export class BlankContent extends React.Component {
-  static propTypes = {
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    disabled: PropTypes.bool,
-    duplicates: PropTypes.bool,
-    choice: PropTypes.object,
-    classes: PropTypes.object,
-    isOver: PropTypes.bool,
-    dragItem: PropTypes.object,
-    correct: PropTypes.bool,
-    onChange: PropTypes.func,
-  };
-
-  constructor() {
-    super();
-    this.state = {
-      height: 0,
-    };
-  }
-
-  componentDidUpdate(prevProps) {
-    renderMath(this.rootRef);
-    const { choice: currentChoice } = this.props;
-    const { choice: prevChoice } = prevProps;
-
-    if (JSON.stringify(currentChoice) !== JSON.stringify(prevChoice)) {
-      if (!currentChoice) {
-        this.setState({
-          height: 0,
-        });
-        return;
-      }
-      setTimeout(() => {
-        this.setState({
-          height: this.spanRef.offsetHeight,
-        });
-      }, 300);
-    }
-  }
-
-  addDraggableFalseAttributes(parent) {
-    parent.childNodes.forEach((elem) => {
-      if (elem instanceof Element || elem instanceof HTMLDocument) {
-        elem.setAttribute('draggable', false);
-      }
-    });
-  }
-
-  render() {
-    const { disabled, choice, classes, isOver, dragItem, correct } = this.props;
-    const draggedLabel = dragItem && isOver && dragItem.choice.value;
-    const label = choice && choice.value;
-
-    return (
-      // TODO the Chip element is causing drag problems on touch devices. Avoid using Chip and consider refactoring the code. Keep in mind that Chip is a span with a button role, which interferes with seamless touch device dragging.
-      <Chip
-        clickable={false}
-        disabled={true}
-        ref={(ref) => {
-          //eslint-disable-next-line
-          this.rootRef = ReactDOM.findDOMNode(ref);
-        }}
-        component="span"
-        label={
-          <React.Fragment>
-            <span
-              className={classnames(classes.chipLabel, isOver && classes.over, {
-                [classes.hidden]: draggedLabel,
-              })}
-              ref={(ref) => {
-                if (ref) {
-                  //eslint-disable-next-line
-                  this.spanRef = ReactDOM.findDOMNode(ref);
-                  ref.innerHTML = label || '';
-                  this.addDraggableFalseAttributes(ref);
-                }
-              }}
-            >
-              {' '}
-            </span>
-            {draggedLabel && (
-              <span
-                className={classnames(classes.chipLabel, isOver && classes.over, classes.dragged)}
-                ref={(ref) => {
-                  if (ref) {
-                    //eslint-disable-next-line
-                    this.spanRef = ReactDOM.findDOMNode(ref);
-                    ref.innerHTML = draggedLabel || '';
-                    this.addDraggableFalseAttributes(ref);
-                  }
-                }}
-              >
-                {' '}
-              </span>
-            )}
-          </React.Fragment>
-        }
-        className={classnames(classes.chip, isOver && classes.over, {
-          [classes.correct]: correct !== undefined && correct,
-          [classes.incorrect]: correct !== undefined && !correct,
-        })}
-        variant={disabled ? 'outlined' : undefined}
-        style={{
-          ...(this.state.height ? { height: this.state.height } : {}),
-        }}
-        classes={{
-          label: isOver && classes.over,
-        }}
-      />
-    );
-  }
-}
-
-const StyledBlankContent = useStyles(BlankContent);
-
-const connectedBlankContent = useStyles(({ connectDragSource, connectDropTarget, ...props }) => {
-  const { classes, isOver } = props;
-
-  return connectDropTarget(
-    connectDragSource(
-      <span className={classnames(classes.content, isOver && classes.over)}>
-        <StyledBlankContent {...props} />
-      </span>,
-    ),
-  );
-});
-
-const tileTarget = {
-  drop(props, monitor) {
-    const draggedItem = monitor.getItem();
-
-    log('props.instanceId', props.instanceId, 'draggedItem.instanceId:', draggedItem.instanceId);
-
-    if (draggedItem.id !== props.id) {
-      props.onChange(props.id, draggedItem.choice.id);
-    }
-
-    return {
-      dropped: draggedItem.id !== props.id,
-    };
-  },
-  canDrop(props, monitor) {
-    const draggedItem = monitor.getItem();
-
-    return draggedItem.instanceId === props.instanceId;
-  },
-};
-
-const DropTile = DropTarget(DRAG_TYPE, tileTarget, (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-  dragItem: monitor.getItem(),
-}))(connectedBlankContent);
-
-const tileSource = {
-  canDrag(props) {
-    return !props.disabled && !!props.choice;
-  },
-  beginDrag(props) {
-    return {
-      id: props.id,
-      choice: props.choice,
-      instanceId: props.instanceId,
-      fromChoice: true,
-    };
-  },
-  endDrag(props, monitor) {
-    // this will be null if it did not drop
-    const dropResult = monitor.getDropResult();
-
-    if (!dropResult || (dropResult.dropped && !props.duplicates)) {
-      const draggedItem = monitor.getItem();
-
-      if (draggedItem.fromChoice) {
-        props.onChange(props.id, undefined);
-      }
-    }
-  },
-};
-
-const DragDropTile = DragSource(DRAG_TYPE, tileSource, (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging(),
-}))(DropTile);
-
-export default DragDropTile;

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/mask-markup/components/correct-input.jsx

@@ -1,95 +0,0 @@
-import React from 'react';
-import OutlinedInput from '@material-ui/core/OutlinedInput';
-import classnames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
-import { color } from '../../render-ui';
-
-const correctStyle = (color) => ({
-  borderColor: `${color} !important`,
-});
-
-export default withStyles(() => ({
-  input: {
-    color: color.text(),
-    backgroundColor: color.background(),
-    borderRadius: '4px !important',
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    padding: '10px 20px 10px 10px',
-    '&:disabled': {
-      opacity: 0.8,
-      cursor: 'not-allowed !important',
-    },
-    '&:hover': {
-      borderColor: color.primary(),
-      '&:disabled': {
-        borderColor: 'initial',
-      },
-    },
-    '&:focus': {
-      borderColor: color.primaryDark(),
-    },
-  },
-  crInput: {
-    padding: '8px !important',
-  },
-  correct: correctStyle(color.correct()),
-  incorrect: correctStyle(color.incorrect()),
-  box: {
-    fontSize: 'inherit',
-  },
-  outlinedInput: {
-    padding: '2px',
-    borderRadius: '4px',
-    '& fieldset': {
-      border: 0,
-    },
-  },
-  notchedOutline: {
-    borderColor: color.correct(),
-  },
-}))((props) => {
-  const {
-    correct,
-    charactersLimit,
-    classes,
-    disabled,
-    isBox,
-    isConstructedResponse,
-    width,
-    spellCheck,
-    ...rest
-  } = props;
-  const label = typeof correct === 'boolean' ? (correct ? 'correct' : 'incorrect') : undefined;
-  const inputProps = charactersLimit
-    ? { maxLength: charactersLimit, 'aria-label': 'Enter answer' }
-    : { 'aria-label': 'Enter answer' };
-
-  if (width) {
-    inputProps.style = {
-      width: `${width + Math.round(width / 10) + 1}ch`, // added some extra space for capital letters
-    };
-  }
-
-  return (
-    <OutlinedInput
-      className={classnames({
-        [classes.disabledInput]: disabled,
-        [classes.box]: isBox,
-        [classes.outlinedInput]: true,
-      })}
-      classes={{
-        input: classnames({
-          [classes.input]: true,
-          [classes[label]]: label,
-          [classes.crInput]: isConstructedResponse,
-        }),
-      }}
-      inputProps={inputProps}
-      labelWidth={0}
-      disabled={disabled}
-      spellCheck={spellCheck}
-      {...rest}
-    />
-  );
-});

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/mask-markup/components/dropdown.jsx

@@ -1,160 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Select from '@material-ui/core/Select';
-import MenuItem from '@material-ui/core/MenuItem';
-import CorrectInput from './correct-input';
-import { withStyles } from '@material-ui/core/styles';
-import { color } from '../../render-ui';
-
-class Dropdown extends React.Component {
-  static propTypes = {
-    id: PropTypes.string,
-    value: PropTypes.string,
-    disabled: PropTypes.bool,
-    onChange: PropTypes.func,
-    classes: PropTypes.object,
-    correct: PropTypes.bool,
-    choices: PropTypes.arrayOf(PropTypes.shape({ value: PropTypes.string, label: PropTypes.string })),
-    showCorrectAnswer: PropTypes.bool,
-  };
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      showCheckmark: false,
-      open: false,
-    };
-  }
-
-  showCheckmarkAndOpen = () => {
-    this.setState({
-      showCheckmark: true,
-      open: true,
-    });
-  };
-
-  hideCheckmarkAndClose = () => {
-    this.setState({
-      showCheckmark: false,
-      open: false,
-    });
-  };
-
-  render() {
-    const { classes, id, correct, disabled, value, onChange, choices, showCorrectAnswer } = this.props;
-
-    const { showCheckmark, open } = this.state;
-
-    return (
-      <Select
-        classes={{
-          root: classes.root,
-          icon: classes.icon,
-          selectMenu: classes.selectMenu,
-          select: classes.select,
-        }}
-        disabled={disabled}
-        value={value || ''}
-        onOpen={this.showCheckmarkAndOpen}
-        onClose={this.hideCheckmarkAndClose}
-        open={open}
-        input={<CorrectInput correct={showCorrectAnswer || correct} />}
-        MenuProps={{
-          keepMounted: true,
-          disablePortal: true,
-        }}
-        onChange={(e) => {
-          onChange(id, e.target.value);
-        }}
-      >
-        {(choices || []).map((c, index) => (
-          <MenuItem
-            classes={{ root: classes.menuRoot, selected: classes.selected }}
-            key={`${c.label}-${index}`}
-            value={c.value}
-          >
-            <span
-              className={classes.label}
-              dangerouslySetInnerHTML={{
-                __html: c.label,
-              }}
-            />
-            {showCheckmark && (
-              <span
-                className={classes.label}
-                dangerouslySetInnerHTML={{ __html: c.value === value ? ' &check;' : '' }}
-              />
-            )}
-          </MenuItem>
-        ))}
-      </Select>
-    );
-  }
-}
-
-const styles = () => ({
-  root: {
-    color: color.text(),
-    backgroundColor: color.background(),
-    borderColor: color.secondaryLight(),
-    '& ul': {
-      paddingTop: 0,
-      paddingBottom: 0,
-      border: `1px solid ${color.text()}`,
-      borderRadius: '5px',
-      color: color.text(),
-      backgroundColor: color.background(),
-    },
-  },
-  select: {
-    '&:focus': {
-      borderRadius: '4px',
-    },
-  },
-  selectMenu: {
-    backgroundColor: color.background(),
-    '&:hover': {
-      borderColor: 'initial',
-    },
-    '&:focus': {
-      borderColor: 'initial',
-    },
-  },
-  icon: {
-    color: color.text(),
-  },
-  selected: {
-    color: `${color.text()} !important`,
-    backgroundColor: `${color.background()} !important`,
-    '&:hover': {
-      color: color.text(),
-      backgroundColor: `${color.secondaryLight()} !important`,
-    },
-  },
-  menuRoot: {
-    color: color.text(),
-    backgroundColor: color.background(),
-    '&:focus': {
-      color: color.text(),
-      backgroundColor: color.background(),
-    },
-    '&:hover': {
-      color: color.text(),
-      backgroundColor: color.secondaryLight(),
-    },
-    boxSizing: 'border-box',
-    padding: '25px',
-    '&:first-of-type': {
-      borderRadius: '3px 3px 0 0',
-    },
-    '&:last-of-type': {
-      borderRadius: '0 0 3px 3px',
-    },
-  },
-  label: {
-    fontSize: 'max(1rem, 14px)',
-  },
-});
-
-export default withStyles(styles)(Dropdown);

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/mask-markup/components/input.jsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import CorrectInput from './correct-input';
-
-const Input = ({
-  disabled,
-  correct,
-  charactersLimit,
-  id,
-  isConstructedResponse,
-  value,
-  onChange,
-  showCorrectAnswer,
-  spellCheck,
-  width,
-}) => {
-  return (
-    <CorrectInput
-      disabled={disabled}
-      correct={showCorrectAnswer || correct}
-      charactersLimit={charactersLimit}
-      variant="outlined"
-      value={value}
-      isConstructedResponse={isConstructedResponse}
-      spellCheck={spellCheck}
-      isBox={true}
-      width={width}
-      onChange={(e) => {
-        onChange(id, e.target.value);
-      }}
-    />
-  );
-};
-
-Input.propTypes = {
-  id: PropTypes.string,
-  value: PropTypes.string,
-  onChange: PropTypes.func,
-  disabled: PropTypes.bool,
-  spellCheck: PropTypes.bool,
-  correct: PropTypes.bool,
-  showCorrectAnswer: PropTypes.bool,
-  charactersLimit: PropTypes.number,
-  width: PropTypes.number,
-  isConstructedResponse: PropTypes.bool,
-};
-
-export default Input;

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/mask-markup/constructed-response.jsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import Input from './components/input';
-import { withMask } from './with-mask';
-
-// eslint-disable-next-line react/display-name
-export default withMask('input', (props) => (node, data, onChange) => {
-  const dataset = node.data ? node.data.dataset || {} : {};
-  if (dataset.component === 'input') {
-    // eslint-disable-next-line react/prop-types
-    const { adjustedLimit, disabled, feedback, showCorrectAnswer, maxLength, spellCheck } = props;
-
-    // the first answer is the correct one
-    // eslint-disable-next-line react/prop-types
-    const correctAnswer = ((props.choices && dataset && props.choices[dataset.id]) || [])[0];
-    const finalValue = showCorrectAnswer ? correctAnswer && correctAnswer.label : data[dataset.id] || '';
-    const width = maxLength && maxLength[dataset.id];
-
-    return (
-      <Input
-        key={`${node.type}-input-${dataset.id}`}
-        correct={feedback && feedback[dataset.id] && feedback[dataset.id] === 'correct'}
-        disabled={showCorrectAnswer || disabled}
-        value={finalValue}
-        id={dataset.id}
-        onChange={onChange}
-        showCorrectAnswer={showCorrectAnswer}
-        width={width}
-        charactersLimit={adjustedLimit ? width : 25}
-        isConstructedResponse={true}
-        spellCheck={spellCheck}
-      />
-    );
-  }
-});

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/mask-markup/drag-in-the-blank.jsx

@@ -1,124 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { renderMath } from '../math-rendering';
-import Choices from './choices';
-import Blank from './components/blank';
-import { withMask } from './with-mask';
-
-// eslint-disable-next-line react/display-name
-const Masked = withMask('blank', (props) => (node, data, onChange) => {
-  const dataset = node.data ? node.data.dataset || {} : {};
-  if (dataset.component === 'blank') {
-    // eslint-disable-next-line react/prop-types
-    const { disabled, duplicates, correctResponse, feedback, showCorrectAnswer } = props;
-    const choiceId = showCorrectAnswer ? correctResponse[dataset.id] : data[dataset.id];
-    // eslint-disable-next-line react/prop-types
-    const choice = choiceId && props.choices.find((c) => c.id === choiceId);
-
-    return (
-      <Blank
-        key={`${node.type}-${dataset.id}`}
-        correct={showCorrectAnswer || (feedback && feedback[dataset.id])}
-        disabled={disabled}
-        duplicates={duplicates}
-        choice={choice}
-        id={dataset.id}
-        onChange={onChange}
-      />
-    );
-  }
-});
-
-export default class DragInTheBlank extends React.Component {
-  static propTypes = {
-    markup: PropTypes.string,
-    layout: PropTypes.object,
-    choicesPosition: PropTypes.string,
-    choices: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.string })),
-    value: PropTypes.object,
-    onChange: PropTypes.func,
-    duplicates: PropTypes.bool,
-    disabled: PropTypes.bool,
-    feedback: PropTypes.object,
-    correctResponse: PropTypes.object,
-    showCorrectAnswer: PropTypes.bool,
-  };
-
-  UNSAFE_componentWillReceiveProps() {
-    if (this.rootRef) {
-      renderMath(this.rootRef);
-    }
-  }
-
-  componentDidUpdate() {
-    renderMath(this.rootRef);
-  }
-
-  getPositionDirection = (choicePosition) => {
-    let flexDirection;
-
-    switch (choicePosition) {
-      case 'left':
-        flexDirection = 'row';
-        break;
-      case 'right':
-        flexDirection = 'row-reverse';
-        break;
-      case 'below':
-        flexDirection = 'column-reverse';
-        break;
-      default:
-        // above
-        flexDirection = 'column';
-        break;
-    }
-
-    return flexDirection;
-  };
-
-  render() {
-    const {
-      markup,
-      duplicates,
-      layout,
-      value,
-      onChange,
-      choicesPosition,
-      choices,
-      correctResponse,
-      disabled,
-      feedback,
-      showCorrectAnswer,
-    } = this.props;
-
-    const choicePosition = choicesPosition || 'below';
-    const style = {
-      display: 'flex',
-      flexDirection: this.getPositionDirection(choicePosition),
-    };
-
-    return (
-      <div ref={(ref) => ref && (this.rootRef = ref)} style={style}>
-        <Choices
-          choicePosition={choicePosition}
-          duplicates={duplicates}
-          choices={choices}
-          value={value}
-          disabled={disabled}
-        />
-        <Masked
-          markup={markup}
-          layout={layout}
-          value={value}
-          choices={choices}
-          onChange={onChange}
-          disabled={disabled}
-          duplicates={duplicates}
-          feedback={feedback}
-          correctResponse={correctResponse}
-          showCorrectAnswer={showCorrectAnswer}
-        />
-      </div>
-    );
-  }
-}