@pie-lib/mask-markup 2.0.0-beta.1 → 2.0.0-beta.2

package/src/components/blank.jsx

@@ -14,42 +14,51 @@ export const DRAG_TYPE = 'MaskBlank';
 const useStyles = withStyles(() => ({
   content: {
     border: `solid 0px ${color.primary()}`,
-    minWidth: '200px'
+    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'
+    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'
-    }
+      padding: '2px 0',
+    },
   },
   hidden: {
     color: 'transparent',
-    opacity: 0
+    opacity: 0,
   },
   dragged: {
     position: 'absolute',
-    left: 14,
-    maxWidth: '60px'
+    left: 16,
+    maxWidth: '60px',
   },
   correct: {
-    border: `solid 1px ${color.correct()}`
+    border: `solid 1px ${color.correct()}`,
   },
   incorrect: {
-    border: `solid 1px ${color.incorrect()}`
+    border: `solid 1px ${color.incorrect()}`,
   },
   over: {
     whiteSpace: 'nowrap',
-    overflow: 'hidden'
-  }
+    overflow: 'hidden',
+  },
 }));
 
 export class BlankContent extends React.Component {
@@ -62,13 +71,13 @@ export class BlankContent extends React.Component {
     isOver: PropTypes.bool,
     dragItem: PropTypes.object,
     correct: PropTypes.bool,
-    onChange: PropTypes.func
+    onChange: PropTypes.func,
   };
 
   constructor() {
     super();
     this.state = {
-      height: 0
+      height: 0,
     };
   }
 
@@ -80,20 +89,20 @@ export class BlankContent extends React.Component {
     if (JSON.stringify(currentChoice) !== JSON.stringify(prevChoice)) {
       if (!currentChoice) {
         this.setState({
-          height: 0
+          height: 0,
         });
         return;
       }
       setTimeout(() => {
         this.setState({
-          height: this.spanRef.offsetHeight
+          height: this.spanRef.offsetHeight,
         });
       }, 300);
     }
   }
 
   addDraggableFalseAttributes(parent) {
-    parent.childNodes.forEach(elem => {
+    parent.childNodes.forEach((elem) => {
       if (elem instanceof Element || elem instanceof HTMLDocument) {
         elem.setAttribute('draggable', false);
       }
@@ -106,8 +115,11 @@ export class BlankContent extends React.Component {
     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
-        ref={ref => {
+        clickable={false}
+        disabled={true}
+        ref={(ref) => {
           //eslint-disable-next-line
           this.rootRef = ReactDOM.findDOMNode(ref);
         }}
@@ -116,9 +128,9 @@ export class BlankContent extends React.Component {
           <React.Fragment>
             <span
               className={classnames(classes.chipLabel, isOver && classes.over, {
-                [classes.hidden]: draggedLabel
+                [classes.hidden]: draggedLabel,
               })}
-              ref={ref => {
+              ref={(ref) => {
                 if (ref) {
                   //eslint-disable-next-line
                   this.spanRef = ReactDOM.findDOMNode(ref);
@@ -132,7 +144,7 @@ export class BlankContent extends React.Component {
             {draggedLabel && (
               <span
                 className={classnames(classes.chipLabel, isOver && classes.over, classes.dragged)}
-                ref={ref => {
+                ref={(ref) => {
                   if (ref) {
                     //eslint-disable-next-line
                     this.spanRef = ReactDOM.findDOMNode(ref);
@@ -148,14 +160,14 @@ export class BlankContent extends React.Component {
         }
         className={classnames(classes.chip, isOver && classes.over, {
           [classes.correct]: correct !== undefined && correct,
-          [classes.incorrect]: correct !== undefined && !correct
+          [classes.incorrect]: correct !== undefined && !correct,
         })}
         variant={disabled ? 'outlined' : undefined}
         style={{
-          ...(this.state.height ? { height: this.state.height } : {})
+          ...(this.state.height ? { height: this.state.height } : {}),
         }}
         classes={{
-          label: isOver && classes.over
+          label: isOver && classes.over,
         }}
       />
     );
@@ -171,8 +183,8 @@ const connectedBlankContent = useStyles(({ connectDragSource, connectDropTarget,
     connectDragSource(
       <span className={classnames(classes.content, isOver && classes.over)}>
         <StyledBlankContent {...props} />
-      </span>
-    )
+      </span>,
+    ),
   );
 });
 
@@ -187,20 +199,20 @@ const tileTarget = {
     }
 
     return {
-      dropped: draggedItem.id !== props.id
+      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()
+  dragItem: monitor.getItem(),
 }))(connectedBlankContent);
 
 const tileSource = {
@@ -212,7 +224,7 @@ const tileSource = {
       id: props.id,
       choice: props.choice,
       instanceId: props.instanceId,
-      fromChoice: true
+      fromChoice: true,
     };
   },
   endDrag(props, monitor) {
@@ -226,12 +238,12 @@ const tileSource = {
         props.onChange(props.id, undefined);
       }
     }
-  }
+  },
 };
 
 const DragDropTile = DragSource(DRAG_TYPE, tileSource, (connect, monitor) => ({
   connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging()
+  isDragging: monitor.isDragging(),
 }))(DropTile);
 
 export default DragDropTile;

package/src/components/correct-input.jsx

@@ -4,8 +4,8 @@ import classnames from 'classnames';
 import { withStyles } from '@material-ui/core/styles';
 import { color } from '@pie-lib/render-ui';
 
-const correctStyle = color => ({
-  borderColor: `${color} !important`
+const correctStyle = (color) => ({
+  borderColor: `${color} !important`,
 });
 
 export default withStyles(() => ({
@@ -18,37 +18,37 @@ export default withStyles(() => ({
     padding: '10px 20px 10px 10px',
     '&:disabled': {
       opacity: 0.8,
-      cursor: 'not-allowed !important'
+      cursor: 'not-allowed !important',
     },
     '&:hover': {
       borderColor: color.primary(),
       '&:disabled': {
-        borderColor: 'initial'
-      }
+        borderColor: 'initial',
+      },
     },
     '&:focus': {
-      borderColor: color.primaryDark()
-    }
+      borderColor: color.primaryDark(),
+    },
   },
   crInput: {
-    padding: '8px !important'
+    padding: '8px !important',
   },
   correct: correctStyle(color.correct()),
   incorrect: correctStyle(color.incorrect()),
   box: {
-    fontSize: 'inherit'
+    fontSize: 'inherit',
   },
   outlinedInput: {
     padding: '2px',
     borderRadius: '4px',
     '& fieldset': {
-      border: 0
-    }
+      border: 0,
+    },
   },
   notchedOutline: {
-    borderColor: color.correct()
-  }
-}))(props => {
+    borderColor: color.correct(),
+  },
+}))((props) => {
   const {
     correct,
     charactersLimit,
@@ -65,7 +65,7 @@ export default withStyles(() => ({
 
   if (width) {
     inputProps.style = {
-      width: `${width + Math.round(width / 10) + 1}ch` // added some extra space for capital letters
+      width: `${width + Math.round(width / 10) + 1}ch`, // added some extra space for capital letters
     };
   }
 
@@ -74,14 +74,14 @@ export default withStyles(() => ({
       className={classnames({
         [classes.disabledInput]: disabled,
         [classes.box]: isBox,
-        [classes.outlinedInput]: true
+        [classes.outlinedInput]: true,
       })}
       classes={{
         input: classnames({
           [classes.input]: true,
           [classes[label]]: label,
-          [classes.crInput]: isConstructedResponse
-        })
+          [classes.crInput]: isConstructedResponse,
+        }),
       }}
       inputProps={inputProps}
       labelWidth={0}

package/src/components/dropdown.jsx

@@ -14,10 +14,8 @@ class Dropdown extends React.Component {
     onChange: PropTypes.func,
     classes: PropTypes.object,
     correct: PropTypes.bool,
-    choices: PropTypes.arrayOf(
-      PropTypes.shape({ value: PropTypes.string, label: PropTypes.string })
-    ),
-    showCorrectAnswer: PropTypes.bool
+    choices: PropTypes.arrayOf(PropTypes.shape({ value: PropTypes.string, label: PropTypes.string })),
+    showCorrectAnswer: PropTypes.bool,
   };
 
   constructor(props) {
@@ -25,35 +23,26 @@ class Dropdown extends React.Component {
 
     this.state = {
       showCheckmark: false,
-      open: false
+      open: false,
     };
   }
 
   showCheckmarkAndOpen = () => {
     this.setState({
       showCheckmark: true,
-      open: true
+      open: true,
     });
   };
 
   hideCheckmarkAndClose = () => {
     this.setState({
       showCheckmark: false,
-      open: false
+      open: false,
     });
   };
 
   render() {
-    const {
-      classes,
-      id,
-      correct,
-      disabled,
-      value,
-      onChange,
-      choices,
-      showCorrectAnswer
-    } = this.props;
+    const { classes, id, correct, disabled, value, onChange, choices, showCorrectAnswer } = this.props;
 
     const { showCheckmark, open } = this.state;
 
@@ -63,7 +52,7 @@ class Dropdown extends React.Component {
           root: classes.root,
           icon: classes.icon,
           selectMenu: classes.selectMenu,
-          select: classes.select
+          select: classes.select,
         }}
         disabled={disabled}
         value={value || ''}
@@ -73,9 +62,9 @@ class Dropdown extends React.Component {
         input={<CorrectInput correct={showCorrectAnswer || correct} />}
         MenuProps={{
           keepMounted: true,
-          disablePortal: true
+          disablePortal: true,
         }}
-        onChange={e => {
+        onChange={(e) => {
           onChange(id, e.target.value);
         }}
       >
@@ -88,7 +77,7 @@ class Dropdown extends React.Component {
             <span
               className={classes.label}
               dangerouslySetInnerHTML={{
-                __html: c.label
+                __html: c.label,
               }}
             />
             {showCheckmark && (
@@ -115,57 +104,57 @@ const styles = () => ({
       border: `1px solid ${color.text()}`,
       borderRadius: '5px',
       color: color.text(),
-      backgroundColor: color.background()
-    }
+      backgroundColor: color.background(),
+    },
   },
   select: {
     '&:focus': {
-      borderRadius: '4px'
-    }
+      borderRadius: '4px',
+    },
   },
   selectMenu: {
     backgroundColor: color.background(),
     '&:hover': {
-      borderColor: 'initial'
+      borderColor: 'initial',
     },
     '&:focus': {
-      borderColor: 'initial'
-    }
+      borderColor: 'initial',
+    },
   },
   icon: {
-    color: color.text()
+    color: color.text(),
   },
   selected: {
     color: `${color.text()} !important`,
     backgroundColor: `${color.background()} !important`,
     '&:hover': {
       color: color.text(),
-      backgroundColor: `${color.secondaryLight()} !important`
-    }
+      backgroundColor: `${color.secondaryLight()} !important`,
+    },
   },
   menuRoot: {
     color: color.text(),
     backgroundColor: color.background(),
     '&:focus': {
       color: color.text(),
-      backgroundColor: color.background()
+      backgroundColor: color.background(),
     },
     '&:hover': {
       color: color.text(),
-      backgroundColor: color.secondaryLight()
+      backgroundColor: color.secondaryLight(),
     },
     boxSizing: 'border-box',
     padding: '25px',
     '&:first-of-type': {
-      borderRadius: '3px 3px 0 0'
+      borderRadius: '3px 3px 0 0',
     },
     '&:last-of-type': {
-      borderRadius: '0 0 3px 3px'
-    }
+      borderRadius: '0 0 3px 3px',
+    },
   },
   label: {
-    fontSize: 'max(1rem, 14px)'
-  }
+    fontSize: 'max(1rem, 14px)',
+  },
 });
 
 export default withStyles(styles)(Dropdown);

package/src/components/input.jsx

@@ -12,7 +12,7 @@ const Input = ({
   onChange,
   showCorrectAnswer,
   spellCheck,
-  width
+  width,
 }) => {
   return (
     <CorrectInput
@@ -25,7 +25,7 @@ const Input = ({
       spellCheck={spellCheck}
       isBox={true}
       width={width}
-      onChange={e => {
+      onChange={(e) => {
         onChange(id, e.target.value);
       }}
     />
@@ -39,7 +39,10 @@ Input.propTypes = {
   disabled: PropTypes.bool,
   spellCheck: PropTypes.bool,
   correct: PropTypes.bool,
-  showCorrectAnswer: PropTypes.bool
+  showCorrectAnswer: PropTypes.bool,
+  charactersLimit: PropTypes.number,
+  width: PropTypes.number,
+  isConstructedResponse: PropTypes.bool,
 };
 
 export default Input;

package/src/constructed-response.jsx

@@ -2,16 +2,17 @@ import React from 'react';
 import Input from './components/input';
 import { withMask } from './with-mask';
 
-export default withMask('input', props => (node, data, onChange) => {
+// 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 finalValue = showCorrectAnswer ? correctAnswer && correctAnswer.label : data[dataset.id] || '';
     const width = maxLength && maxLength[dataset.id];
 
     return (

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

@@ -5,13 +5,15 @@ import Choices from './choices';
 import Blank from './components/blank';
 import { withMask } from './with-mask';
 
-const Masked = withMask('blank', props => (node, data, onChange) => {
+// 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];
-    const choice = choiceId && props.choices.find(c => c.id === choiceId);
+    // eslint-disable-next-line react/prop-types
+    const choice = choiceId && props.choices.find((c) => c.id === choiceId);
 
     return (
       <Blank
@@ -32,19 +34,17 @@ export default class DragInTheBlank extends React.Component {
     markup: PropTypes.string,
     layout: PropTypes.object,
     choicesPosition: PropTypes.string,
-    choices: PropTypes.arrayOf(
-      PropTypes.shape({ label: PropTypes.string, value: 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
+    showCorrectAnswer: PropTypes.bool,
   };
 
-  componentWillReceiveProps() {
+  UNSAFE_componentWillReceiveProps() {
     if (this.rootRef) {
       renderMath(this.rootRef);
     }
@@ -54,7 +54,7 @@ export default class DragInTheBlank extends React.Component {
     renderMath(this.rootRef);
   }
 
-  getPositionDirection = choicePosition => {
+  getPositionDirection = (choicePosition) => {
     let flexDirection;
 
     switch (choicePosition) {
@@ -88,17 +88,17 @@ export default class DragInTheBlank extends React.Component {
       correctResponse,
       disabled,
       feedback,
-      showCorrectAnswer
+      showCorrectAnswer,
     } = this.props;
 
     const choicePosition = choicesPosition || 'below';
     const style = {
       display: 'flex',
-      flexDirection: this.getPositionDirection(choicePosition)
+      flexDirection: this.getPositionDirection(choicePosition),
     };
 
     return (
-      <div ref={ref => ref && (this.rootRef = ref)} style={style}>
+      <div ref={(ref) => ref && (this.rootRef = ref)} style={style}>
         <Choices
           choicePosition={choicePosition}
           duplicates={duplicates}

package/src/index.js

@@ -4,11 +4,4 @@ import ConstructedResponse from './constructed-response';
 import InlineDropdown from './inline-dropdown';
 import componentize from './componentize';
 
-export {
-  withMask,
-  buildLayoutFromMarkup,
-  DragInTheBlank,
-  ConstructedResponse,
-  InlineDropdown,
-  componentize
-};
+export { withMask, buildLayoutFromMarkup, DragInTheBlank, ConstructedResponse, InlineDropdown, componentize };

package/src/inline-dropdown.jsx

@@ -2,12 +2,13 @@ import React from 'react';
 import Dropdown from './components/dropdown';
 import { withMask } from './with-mask';
 
-export default withMask('dropdown', props => (node, data, onChange) => {
+// eslint-disable-next-line react/display-name
+export default withMask('dropdown', (props) => (node, data, onChange) => {
   const dataset = node.data ? node.data.dataset || {} : {};
   if (dataset.component === 'dropdown') {
+    // eslint-disable-next-line react/prop-types
     const { choices, disabled, feedback, showCorrectAnswer } = props;
-    const correctAnswer =
-      choices && choices[dataset.id] && choices[dataset.id].find(c => c.correct);
+    const correctAnswer = choices && choices[dataset.id] && choices[dataset.id].find((c) => c.correct);
     const finalChoice = showCorrectAnswer ? correctAnswer && correctAnswer.value : data[dataset.id];
 
     return (