@pie-lib/mask-markup 1.12.16-next.4 → 1.12.18-next.0

package/src/choices/index.jsx

@@ -7,11 +7,9 @@ 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 })
-    ),
+    choices: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.string })),
     value: PropTypes.object,
-    choicePosition: PropTypes.string.isRequired
+    choicePosition: PropTypes.string.isRequired,
   };
 
   getStyleForWrapper = () => {
@@ -20,30 +18,30 @@ export default class Choices extends React.Component {
     switch (choicePosition) {
       case 'above':
         return {
-          margin: '0 0 40px 0'
+          margin: '0 0 40px 0',
         };
       case 'below':
         return {
-          margin: '40px 0 0 0'
+          margin: '40px 0 0 0',
         };
       case 'right':
         return {
-          margin: '0 0 0 40px'
+          margin: '0 0 0 40px',
         };
       default:
         return {
-          margin: '0 40px 0 0'
+          margin: '0 40px 0 0',
         };
     }
   };
 
   render() {
     const { disabled, duplicates, choices, value } = this.props;
-    const filteredChoices = choices.filter(c => {
+    const filteredChoices = choices.filter((c) => {
       if (duplicates === true) {
         return true;
       }
-      const foundChoice = findKey(value, v => v === c.id);
+      const foundChoice = findKey(value, (v) => v === c.id);
       return foundChoice === undefined;
     });
     const elementStyle = this.getStyleForWrapper();

package/src/components/blank.jsx

@@ -14,7 +14,7 @@ export const DRAG_TYPE = 'MaskBlank';
 const useStyles = withStyles(() => ({
   content: {
     border: `solid 0px ${color.primary()}`,
-    minWidth: '200px'
+    minWidth: '200px',
   },
   chip: {
     minWidth: '90px',
@@ -22,34 +22,34 @@ const useStyles = withStyles(() => ({
     minHeight: '32px',
     height: 'auto',
     maxWidth: '374px',
-    position: 'relative'
+    position: 'relative',
   },
   chipLabel: {
     whiteSpace: 'pre-wrap',
     '& img': {
       display: 'block',
-      padding: '2px 0'
-    }
+      padding: '2px 0',
+    },
   },
   hidden: {
     color: 'transparent',
-    opacity: 0
+    opacity: 0,
   },
   dragged: {
     position: 'absolute',
     left: 14,
-    maxWidth: '60px'
+    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 +62,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 +80,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);
       }
@@ -107,7 +107,7 @@ export class BlankContent extends React.Component {
 
     return (
       <Chip
-        ref={ref => {
+        ref={(ref) => {
           //eslint-disable-next-line
           this.rootRef = ReactDOM.findDOMNode(ref);
         }}
@@ -116,9 +116,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 +132,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 +148,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 +171,8 @@ const connectedBlankContent = useStyles(({ connectDragSource, connectDropTarget,
     connectDragSource(
       <span className={classnames(classes.content, isOver && classes.over)}>
         <StyledBlankContent {...props} />
-      </span>
-    )
+      </span>,
+    ),
   );
 });
 
@@ -187,20 +187,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 +212,7 @@ const tileSource = {
       id: props.id,
       choice: props.choice,
       instanceId: props.instanceId,
-      fromChoice: true
+      fromChoice: true,
     };
   },
   endDrag(props, monitor) {
@@ -226,12 +226,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,7 @@ Input.propTypes = {
   disabled: PropTypes.bool,
   spellCheck: PropTypes.bool,
   correct: PropTypes.bool,
-  showCorrectAnswer: PropTypes.bool
+  showCorrectAnswer: PropTypes.bool,
 };
 
 export default Input;

package/src/constructed-response.jsx

@@ -2,16 +2,14 @@ import React from 'react';
 import Input from './components/input';
 import { withMask } from './with-mask';
 
-export default withMask('input', props => (node, data, onChange) => {
+export default withMask('input', (props) => (node, data, onChange) => {
   const dataset = node.data ? node.data.dataset || {} : {};
   if (dataset.component === 'input') {
     const { adjustedLimit, disabled, feedback, showCorrectAnswer, maxLength, spellCheck } = props;
 
     // the first answer is the correct one
     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,12 +5,12 @@ import Choices from './choices';
 import Blank from './components/blank';
 import { withMask } from './with-mask';
 
-const Masked = withMask('blank', props => (node, data, onChange) => {
+const Masked = withMask('blank', (props) => (node, data, onChange) => {
   const dataset = node.data ? node.data.dataset || {} : {};
   if (dataset.component === 'blank') {
     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);
+    const choice = choiceId && props.choices.find((c) => c.id === choiceId);
 
     return (
       <Blank
@@ -31,16 +31,14 @@ 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() {
@@ -53,7 +51,7 @@ export default class DragInTheBlank extends React.Component {
     renderMath(this.rootRef);
   }
 
-  getPositionDirection = choicePosition => {
+  getPositionDirection = (choicePosition) => {
     let flexDirection;
 
     switch (choicePosition) {
@@ -87,17 +85,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,11 @@ import React from 'react';
 import Dropdown from './components/dropdown';
 import { withMask } from './with-mask';
 
-export default withMask('dropdown', props => (node, data, onChange) => {
+export default withMask('dropdown', (props) => (node, data, onChange) => {
   const dataset = node.data ? node.data.dataset || {} : {};
   if (dataset.component === 'dropdown') {
     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 (