@pie-element/ebsr 9.12.1 → 9.12.2-next.19

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/icons/show-rationale-icon.jsx

@@ -0,0 +1,152 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import { normalizeSize } from './sized';
+
+const Info = ({ fg }) => (
+  <g>
+    <rect x="-115" y="136.7" className={fg} width="3" height="3" />
+    <polygon
+      className={fg}
+      points="-112,147.7 -112,141.7 -115.8,141.7 -115.8,143.7 -114,143.7 -114,147.7 -116.2,147.7 -116.2,149.7 -109.8,149.7 -109.8,147.7"
+    />
+  </g>
+);
+
+Info.propTypes = {
+  fg: PropTypes.string,
+};
+
+const Border = ({ className }) => (
+  <path
+    className={className}
+    d="M-113,158.5c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-105,158.5-113,158.5zM-113,130.5c-7.4,0-13.5,6.1-13.5,13.5s6.1,13.5,13.5,13.5s13.5-6.1,13.5-13.5S-105.6,130.5-113,130.5z"
+  />
+);
+Border.propTypes = {
+  className: PropTypes.string,
+};
+const Circle = () => (
+  <g>
+    <path
+      style={{
+        fill: '#D0CAC5',
+        stroke: '#E6E3E0',
+        strokeWidth: 0.75,
+        strokeMiterlimit: 10,
+      }}
+      d="M-111.7,160.9c-8.5,0-15.5-6.9-15.5-15.5c0-8.5,6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5C-96.2,154-103.1,160.9-111.7,160.9z"
+    />
+    <path
+      style={{
+        fill: '#B3ABA4',
+        stroke: '#CDC7C2',
+        strokeWidth: 0.5,
+        strokeMiterlimit: 10,
+      }}
+      d="M-112,159.5c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-104,159.5-112,159.5z"
+    />
+    <circle style={{ fill: '#FFFFFF' }} cx="-113" cy="144" r="14" />
+  </g>
+);
+
+const Root = ({ children, size }) => {
+  size = normalizeSize(size);
+  const style = {
+    height: size,
+    width: size,
+    display: 'inline-block',
+    position: 'relative',
+  };
+
+  return (
+    <div style={style}>
+      <svg preserveAspectRatio="xMinYMin meet" viewBox="-129 128 34 34">
+        {children}
+      </svg>
+    </div>
+  );
+};
+Root.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  size: PropTypes.number,
+};
+
+const styles = {
+  fg: {
+    fill: '#1a9cff',
+  },
+  bg: {
+    fill: '#bce2ff',
+  },
+  border: {
+    fill: '#bbe3fd',
+  },
+  whiteBorder: {
+    fill: 'white',
+  },
+};
+
+export class ShowRationale extends React.Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const { classes } = this.props;
+
+    const info = <Info fg={classes.fg} />;
+    const icons = {
+      check: (
+        <Root>
+          <Circle />
+          {info}
+          <Border className={classes.border} />
+        </Root>
+      ),
+      emoji: (
+        <Root>
+          <Circle />
+          {info}
+          <Border className={classes.border} />
+        </Root>
+      ),
+      open: {
+        check: (
+          <Root>
+            <circle style={{ fill: '#FFFFFF' }} cx="-113" cy="144" r="14" />
+            <Info fg={classes.bg} border={classes.whiteBorder} />
+          </Root>
+        ),
+        emoji: (
+          <Root>
+            <circle style={{ fill: '#FFFFFF' }} cx="-113" cy="144" r="14" />
+            <Info fg={classes.bg} border={classes.border} />
+          </Root>
+        ),
+      },
+    };
+
+    if (this.props.open === true) {
+      return icons.open[this.props.iconSet];
+    } else {
+      return icons[this.props.iconSet];
+    }
+  }
+}
+
+ShowRationale.propTypes = {
+  iconSet: PropTypes.oneOf(['emoji', 'check']),
+  open: PropTypes.bool,
+};
+
+ShowRationale.defaultProps = {
+  iconSet: 'check',
+  open: false,
+};
+
+export default withStyles(styles)(ShowRationale);

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/icons/sized.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const normalizeSize = (size) => {
+  return typeof size === 'string' ? size : typeof size === 'number' ? `${size}px` : '30px';
+};
+
+const Sized = ({ size, children }) => {
+  size = normalizeSize(size);
+
+  const style = {
+    height: size,
+    width: size,
+    display: 'inline-block',
+    position: 'relative',
+  };
+
+  return <div style={style}>{children}</div>;
+};
+
+Sized.propTypes = {
+  size: PropTypes.number,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+};
+export default Sized;

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/mask-markup/choices/choice.jsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { DragSource } from '../../drag';
+import { withStyles } from '@material-ui/core/styles';
+import Chip from '@material-ui/core/Chip';
+import classnames from 'classnames';
+import ReactDOM from 'react-dom';
+import { renderMath } from '../../math-rendering-accessible';
+import { color } from '../../render-ui';
+
+export const DRAG_TYPE = 'MaskBlank';
+
+class BlankContentComp extends React.Component {
+  static propTypes = {
+    disabled: PropTypes.bool,
+    choice: PropTypes.object,
+    classes: PropTypes.object,
+    connectDragSource: PropTypes.func,
+  };
+
+  componentDidUpdate() {
+    renderMath(this.rootRef);
+  }
+
+  render() {
+    const { connectDragSource, choice, classes, disabled } = this.props;
+
+    // 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.
+
+    return connectDragSource(
+      <span className={classnames(classes.choice, disabled && classes.disabled)}>
+        <Chip
+          clickable={false}
+          disabled={true}
+          ref={(ref) => {
+            //eslint-disable-next-line
+            this.rootRef = ReactDOM.findDOMNode(ref);
+          }}
+          className={classes.chip}
+          label={
+            <span
+              className={classes.chipLabel}
+              ref={(ref) => {
+                if (ref) {
+                  ref.innerHTML = choice.value || ' ';
+                }
+              }}
+            >
+              {' '}
+            </span>
+          }
+          variant={disabled ? 'outlined' : undefined}
+        />
+      </span>,
+      {},
+    );
+  }
+}
+
+export const BlankContent = withStyles((theme) => ({
+  choice: {
+    border: `solid 0px ${theme.palette.primary.main}`,
+    borderRadius: theme.spacing.unit * 2,
+    margin: theme.spacing.unit / 2,
+    transform: 'translate(0, 0)',
+  },
+  chip: {
+    backgroundColor: color.background(),
+    border: `1px solid ${color.text()}`,
+    color: color.text(),
+    alignItems: 'center',
+    display: 'inline-flex',
+    height: 'initial',
+    minHeight: '32px',
+    fontSize: 'inherit',
+    whiteSpace: 'pre-wrap',
+    maxWidth: '374px',
+    // 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',
+  },
+  chipLabel: {
+    whiteSpace: 'pre-wrap',
+    '& img': {
+      display: 'block',
+      padding: '2px 0',
+    },
+  },
+  disabled: {},
+}))(BlankContentComp);
+
+const tileSource = {
+  canDrag(props) {
+    return !props.disabled;
+  },
+  beginDrag(props) {
+    return {
+      choice: props.choice,
+      instanceId: props.instanceId,
+    };
+  },
+};
+
+const DragDropTile = DragSource(DRAG_TYPE, tileSource, (connect, monitor) => ({
+  connectDragSource: connect.dragSource(),
+  isDragging: monitor.isDragging(),
+}))(BlankContent);
+
+export default DragDropTile;

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/mask-markup/choices/index.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import findKey from 'lodash/findKey';
+import Choice from './choice';
+import DragDroppablePlaceholder from '../../drag/drag-in-the-blank-dp';
+
+export default class Choices extends React.Component {
+  static propTypes = {
+    disabled: PropTypes.bool,
+    duplicates: PropTypes.bool,
+    choices: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.string })),
+    value: PropTypes.object,
+    choicePosition: PropTypes.string.isRequired,
+  };
+
+  getStyleForWrapper = () => {
+    const { choicePosition } = this.props;
+
+    switch (choicePosition) {
+      case 'above':
+        return {
+          margin: '0 0 40px 0',
+        };
+
+      case 'below':
+        return {
+          margin: '40px 0 0 0',
+        };
+
+      case 'right':
+        return {
+          margin: '0 0 0 40px',
+        };
+
+      default:
+        return {
+          margin: '0 40px 0 0',
+        };
+    }
+  };
+
+  render() {
+    const { disabled, duplicates, choices, value } = this.props;
+    const filteredChoices = choices.filter((c) => {
+      if (duplicates === true) {
+        return true;
+      }
+      const foundChoice = findKey(value, (v) => v === c.id);
+      return foundChoice === undefined;
+    });
+    const elementStyle = this.getStyleForWrapper();
+
+    return (
+      <div style={elementStyle}>
+        <DragDroppablePlaceholder disabled={disabled}>
+          {filteredChoices.map((c, index) => (
+            <Choice key={`${c.value}-${index}`} disabled={disabled} choice={c} />
+          ))}
+        </DragDroppablePlaceholder>
+      </div>
+    );
+  }
+}

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/mask-markup/componentize.js

@@ -0,0 +1,13 @@
+const REGEX = /\{\{(\d+)\}\}/g;
+
+export default (s, t) => {
+  if (!s) {
+    return { markup: '' };
+  }
+
+  const markup = s.replace(REGEX, (match, g) => {
+    return `<span data-component="${t}" data-id="${g}"></span>`;
+  });
+
+  return { markup };
+};

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

@@ -0,0 +1,249 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import { renderMath } from '../../math-rendering-accessible';
+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-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/mask-markup/components/correct-input.jsx

@@ -0,0 +1,96 @@
+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}
+    />
+  );
+});