@pie-lib/mask-markup 1.33.3-next.2 → 1.33.3-next.205

package/src/drag-in-the-blank.jsx

@@ -1,13 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { renderMath } from '@pie-lib/math-rendering';
+import { DragProvider } from '@pie-lib/drag';
+import { DragOverlay, closestCenter } from '@dnd-kit/core';
+
 import Choices from './choices';
+import Choice from './choices/choice';
 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 || {} : {};
+  const dataset = node.data?.dataset || {};
   if (dataset.component === 'blank') {
     // eslint-disable-next-line react/prop-types
     const {
@@ -18,6 +20,8 @@ const Masked = withMask('blank', (props) => (node, data, onChange) => {
       showCorrectAnswer,
       emptyResponseAreaWidth,
       emptyResponseAreaHeight,
+      instanceId,
+      isDragging
     } = props;
     const choiceId = showCorrectAnswer ? correctResponse[dataset.id] : data[dataset.id];
     // eslint-disable-next-line react/prop-types
@@ -33,18 +37,35 @@ const Masked = withMask('blank', (props) => (node, data, onChange) => {
         id={dataset.id}
         emptyResponseAreaWidth={emptyResponseAreaWidth}
         emptyResponseAreaHeight={emptyResponseAreaHeight}
-        onChange={onChange}
+        onChange={(id, choiceId) => {
+          const newData = { ...data };
+          if (choiceId === undefined) {
+            delete newData[id];
+          } else {
+            newData[id] = choiceId;
+          }
+          onChange(newData);
+        }}
+        instanceId={instanceId}
+        isDragging={isDragging}
       />
     );
   }
 });
 
 export default class DragInTheBlank extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeDragItem: null,
+    };
+  }
+
   static propTypes = {
     markup: PropTypes.string,
     layout: PropTypes.object,
     choicesPosition: PropTypes.string,
-    choices: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.string })),
+    choices: PropTypes.array,
     value: PropTypes.object,
     onChange: PropTypes.func,
     duplicates: PropTypes.bool,
@@ -54,17 +75,76 @@ export default class DragInTheBlank extends React.Component {
     showCorrectAnswer: PropTypes.bool,
     emptyResponseAreaWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     emptyResponseAreaHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    instanceId: PropTypes.string,
+  };
+
+  static defaultProps = {
+    instanceId: 'drag-in-the-blank',
+  };
+
+  handleDragStart = (event) => {
+    const { active } = event;
+
+    if (active?.data?.current) {
+      this.setState({
+        activeDragItem: active.data.current,
+      });
+    }
   };
 
-  UNSAFE_componentWillReceiveProps() {
-    if (this.rootRef) {
-      renderMath(this.rootRef);
+  renderDragOverlay = () => {
+    const { activeDragItem } = this.state;
+    if (!activeDragItem) return null;
+
+    if (activeDragItem.type === 'MaskBlank') {
+      return (
+        <Choice
+          disabled={activeDragItem.disabled}
+          choice={activeDragItem.choice}
+          instanceId={activeDragItem.instanceId}
+        />
+      );
     }
-  }
 
-  componentDidUpdate() {
-    renderMath(this.rootRef);
-  }
+    return null;
+  };
+
+  handleDragEnd = (event) => {
+    const { active, over } = event;
+    const { onChange, value } = this.props;
+
+    if (!over || !active || !onChange) {
+      return;
+    }
+
+    const draggedData = active.data.current;
+    const dropData = over.data.current;
+
+    if (draggedData?.type === 'MaskBlank' && dropData?.accepts?.includes('MaskBlank')) {
+      const draggedItem = draggedData;
+      const targetId = dropData.id;
+
+      // drop from choice to blank (placing choice into response)
+      if (draggedItem.fromChoice === true) {
+        const newValue = { ...value };
+        newValue[targetId] = draggedItem.choice.id;
+        onChange(newValue);
+      } else if (dropData.toChoiceBoard === true) {
+        // handle drop from blank to choice board (removal from blank)
+        const newValue = { ...value };
+        delete newValue[draggedItem.id];
+        onChange(newValue);
+      }
+      // handle drop from blank to blank (changing position)
+      else if (draggedItem.id !== targetId) {
+        const newValue = { ...value };
+        newValue[targetId] = draggedItem.choice.id;
+        delete newValue[draggedItem.id];
+        onChange(newValue);
+      }
+    }
+    this.setState({ activeDragItem: null });
+  };
 
   getPositionDirection = (choicePosition) => {
     let flexDirection;
@@ -97,7 +177,6 @@ export default class DragInTheBlank extends React.Component {
     const {
       markup,
       duplicates,
-      layout,
       value,
       onChange,
       choicesPosition,
@@ -108,40 +187,50 @@ export default class DragInTheBlank extends React.Component {
       showCorrectAnswer,
       emptyResponseAreaWidth,
       emptyResponseAreaHeight,
+      layout,
+      instanceId
     } = this.props;
 
     const choicePosition = choicesPosition || 'below';
-    const style = {
-      display: 'flex',
-      minWidth: '100px',
-      ...this.getPositionDirection(choicePosition),
-    };
+    const style = { display: 'flex', minWidth: '100px', ...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
-          elementType={'drag-in-the-blank'}
-          markup={markup}
-          layout={layout}
-          value={value}
-          choices={choices}
-          onChange={onChange}
-          disabled={disabled}
-          duplicates={duplicates}
-          feedback={feedback}
-          correctResponse={correctResponse}
-          showCorrectAnswer={showCorrectAnswer}
-          emptyResponseAreaWidth={emptyResponseAreaWidth}
-          emptyResponseAreaHeight={emptyResponseAreaHeight}
-        />
-      </div>
+      <DragProvider
+        onDragStart={this.handleDragStart}
+        onDragEnd={this.handleDragEnd}
+        collisionDetection={closestCenter}
+      >
+        <div ref={(ref) => (this.rootRef = ref)} style={style}>
+          <Choices
+            choicePosition={choicePosition}
+            choices={choices}
+            value={value}
+            duplicates={duplicates}
+            disabled={disabled}
+            instanceId={instanceId}
+          />
+          <Masked
+            elementType="drag-in-the-blank"
+            markup={markup}
+            layout={layout}
+            value={value}
+            choices={choices}
+            onChange={onChange}
+            disabled={disabled}
+            duplicates={duplicates}
+            feedback={feedback}
+            correctResponse={correctResponse}
+            showCorrectAnswer={showCorrectAnswer}
+            emptyResponseAreaWidth={emptyResponseAreaWidth}
+            emptyResponseAreaHeight={emptyResponseAreaHeight}
+            instanceId={instanceId}
+            isDragging={!!this.state.activeDragItem}
+          />
+          <DragOverlay style={{ pointerEvents: "none" }}>
+            {this.renderDragOverlay()}
+          </DragOverlay>
+        </div>
+      </DragProvider>
     );
   }
 }

package/src/mask.jsx

@@ -1,23 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
+import { renderMath } from '@pie-lib/math-rendering';
 import { MARK_TAGS } from './serialization';
-import cx from 'classnames';
 
-const Paragraph = withStyles((theme) => ({
-  para: {
-    paddingTop: 2 * theme.spacing.unit,
-    paddingBottom: 2 * theme.spacing.unit,
-  },
-}))((props) => <div className={props.classes.para}>{props.children}</div>);
+const Paragraph = styled('div')(({ theme }) => ({
+  paddingTop: theme.spacing(2),
+  paddingBottom: theme.spacing(2),
+}));
 
-const Spacer = withStyles(() => ({
-  spacer: {
-    display: 'inline-block',
-    width: '.75em',
-  },
-}))((props) => <span className={props.classes.spacer} />);
+const Spacer = styled('span')(() => ({
+  display: 'inline-block',
+  width: '.75em',
+}));
 
 const restrictWhitespaceTypes = ['tbody', 'tr'];
 
@@ -120,43 +116,56 @@ export const renderChildren = (layout, value, onChange, rootRenderChildren, pare
   return children;
 };
 
-const MaskContainer = withStyles(() => ({
-  main: {
-    display: 'initial',
+const MaskContainer = styled('div')(() => ({
+  display: 'initial',
+  '&:not(.MathJax) table': {
+    borderCollapse: 'collapse',
   },
-  tableStyle: {
-    '&:not(.MathJax) table': {
-      borderCollapse: 'collapse',
-    },
-    // align table content to left as per STAR requirement PD-3687
-    '&:not(.MathJax) table td, &:not(.MathJax) table th': {
-      padding: '8px 12px',
-      textAlign: 'left',
-    },
+  // align table content to left as per STAR requirement PD-3687
+  '&:not(.MathJax) table td, &:not(.MathJax) table th': {
+    padding: '8px 12px',
+    textAlign: 'left',
   },
-}))((props) => <div className={cx(props.classes.main, props.classes.tableStyle)}>{props.children}</div>);
+}));
 
 /**
  * Renders a layout that uses the slate.js Value model structure.
  */
 export default class Mask extends React.Component {
+  constructor(props) {
+    super(props);
+       this.internalContainerRef = React.createRef();
+  }
+
   static propTypes = {
     renderChildren: PropTypes.func,
     layout: PropTypes.object,
     value: PropTypes.object,
     onChange: PropTypes.func,
     elementType: PropTypes.string,
+    containerRef: PropTypes.oneOfType([
+      PropTypes.func,
+      PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+    ]),
   };
 
+  componentDidMount() {
+    const containerRef = this.props.containerRef || this.internalContainerRef;
+    if (containerRef.current && typeof renderMath === 'function') {
+      renderMath(containerRef.current);
+    }
+  }
+
   handleChange = (id, value) => {
     const data = { ...this.props.value, [id]: value };
     this.props.onChange(data);
   };
 
   render() {
-    const { value, layout, elementType } = this.props;
+    const { value, layout, elementType, containerRef } = this.props;
     const children = renderChildren(layout, value, this.handleChange, this.props.renderChildren, null, elementType);
+    const ref = containerRef || this.internalContainerRef;
 
-    return <MaskContainer>{children}</MaskContainer>;
+    return <MaskContainer ref={ref}>{children}</MaskContainer>;
   }
 }

package/src/with-mask.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import Mask from './mask';
 import componentize from './componentize';
@@ -28,11 +27,14 @@ export const withMask = (type, renderChildren) => {
       elementType: PropTypes.string,
     };
 
+    constructor(props) {
+      super(props);
+      this.containerRef = React.createRef();
+    }
+
     componentDidUpdate(prevProps) {
       if (this.props.markup !== prevProps.markup) {
-        // eslint-disable-next-line
-        const domNode = ReactDOM.findDOMNode(this);
-        // Query all elements that may contain outdated MathJax renderings
+        const domNode = this.containerRef.current;
         const mathElements = domNode && domNode.querySelectorAll('[data-latex][data-math-handled="true"]');
 
         // Clean up for fresh MathJax processing
@@ -60,6 +62,7 @@ export const withMask = (type, renderChildren) => {
       const maskLayout = layout ? layout : buildLayoutFromMarkup(markup, type);
       return (
         <Mask
+          containerRef={this.containerRef}
           elementType={elementType}
           layout={maskLayout}
           value={value}