@pie-lib/mask-markup 1.13.47-next.1 → 1.14.0-beta.2

package/src/choices/choice.jsx

@@ -1,12 +1,13 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
-import { DragSource } from '@pie-lib/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 '@pie-lib/math-rendering';
 import { color } from '@pie-lib/render-ui';
+import { DragSource } from '@pie-lib/drag';
 
 export const DRAG_TYPE = 'MaskBlank';
 
@@ -18,6 +19,45 @@ class BlankContentComp extends React.Component {
     connectDragSource: PropTypes.func,
   };
 
+  startDrag = () => {
+    const { connectDragSource, disabled } = this.props;
+    if (!disabled) {
+      connectDragSource(this.dragContainerRef);
+    }
+  };
+
+  // start drag after 500ms (touch and hold duration) for chromebooks and other touch devices PD-4888
+  handleTouchStart = (e) => {
+    e.preventDefault();
+    this.longPressTimer = setTimeout(() => {
+      this.startDrag(e);
+    }, 500);
+  };
+
+  handleTouchEnd = () => {
+    clearTimeout(this.longPressTimer);
+  };
+
+  handleTouchMove = () => {
+    clearTimeout(this.longPressTimer);
+  };
+
+  componentDidMount() {
+    if (this.dragContainerRef) {
+      this.dragContainerRef.addEventListener('touchstart', this.handleTouchStart, { passive: false });
+      this.dragContainerRef.addEventListener('touchend', this.handleTouchEnd);
+      this.dragContainerRef.addEventListener('touchmove', this.handleTouchMove);
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.dragContainerRef) {
+      this.dragContainerRef.removeEventListener('touchstart', this.handleTouchStart);
+      this.dragContainerRef.removeEventListener('touchend', this.handleTouchEnd);
+      this.dragContainerRef.removeEventListener('touchmove', this.handleTouchMove);
+    }
+  }
+
   componentDidUpdate() {
     renderMath(this.rootRef);
   }
@@ -28,7 +68,13 @@ class BlankContentComp extends React.Component {
     // 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)}>
+      <span
+        className={classnames(classes.choice, disabled && classes.disabled)}
+        ref={(ref) => {
+          //eslint-disable-next-line
+          this.dragContainerRef = ReactDOM.findDOMNode(ref);
+        }}
+      >
         <Chip
           clickable={false}
           disabled={true}
@@ -65,7 +111,7 @@ export const BlankContent = withStyles((theme) => ({
     transform: 'translate(0, 0)',
   },
   chip: {
-    backgroundColor: color.background(),
+    backgroundColor: color.white(),
     border: `1px solid ${color.text()}`,
     color: color.text(),
     alignItems: 'center',
@@ -79,15 +125,23 @@ export const BlankContent = withStyles((theme) => ({
     // 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',
+    borderRadius: '3px',
+    paddingTop: '12px',
+    paddingBottom: '12px',
   },
   chipLabel: {
-    whiteSpace: 'pre-wrap',
+    whiteSpace: 'normal',
     '& img': {
       display: 'block',
       padding: '2px 0',
     },
+    '& mjx-frac': {
+      fontSize: '120% !important',
+    },
+  },
+  disabled: {
+    opacity: 0.6,
   },
-  disabled: {},
 }))(BlankContentComp);
 
 const tileSource = {

package/src/choices/index.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import findKey from 'lodash/findKey';
 import Choice from './choice';
-import DragDroppablePlaceholder from '@pie-lib/drag/lib/drag-in-the-blank-dp';
+import { DragDroppablePlaceholder } from '@pie-lib/drag';
 
 export default class Choices extends React.Component {
   static propTypes = {
@@ -48,7 +48,7 @@ export default class Choices extends React.Component {
       const foundChoice = findKey(value, (v) => v === c.id);
       return foundChoice === undefined;
     });
-    const elementStyle = this.getStyleForWrapper();
+    const elementStyle = { ...this.getStyleForWrapper(), minWidth: '100px' };
 
     return (
       <div style={elementStyle}>

package/src/components/__tests__/__snapshots__/blank.test.js.snap

@@ -0,0 +1,111 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Blank render renders correctly with default props 1`] = `
+<WithStyles(Chip)
+  className="undefined"
+  clickable={false}
+  component="span"
+  disabled={true}
+  label={
+    <React.Fragment>
+      <span
+        className=""
+      >
+         
+      </span>
+    </React.Fragment>
+  }
+  style={
+    Object {
+      "height": 0,
+      "minHeight": 32,
+      "minWidth": 90,
+      "width": 0,
+    }
+  }
+/>
+`;
+
+exports[`Blank render renders correctly with disabled prop as true 1`] = `
+<WithStyles(Chip)
+  className="undefined"
+  clickable={false}
+  component="span"
+  disabled={true}
+  label={
+    <React.Fragment>
+      <span
+        className=""
+      >
+         
+      </span>
+    </React.Fragment>
+  }
+  style={
+    Object {
+      "height": 0,
+      "minHeight": 32,
+      "minWidth": 90,
+      "width": 0,
+    }
+  }
+  variant="outlined"
+/>
+`;
+
+exports[`Blank render renders correctly with draggedItem 1`] = `
+<WithStyles(Chip)
+  className="undefined"
+  clickable={false}
+  component="span"
+  disabled={true}
+  label={
+    <React.Fragment>
+      <span
+        className=""
+      >
+         
+      </span>
+    </React.Fragment>
+  }
+  style={
+    Object {
+      "height": 0,
+      "minHeight": 32,
+      "minWidth": 90,
+      "width": 0,
+    }
+  }
+/>
+`;
+
+exports[`Blank render renders correctly with draggedItem and isOver 1`] = `
+<WithStyles(Chip)
+  className="undefined"
+  clickable={false}
+  component="span"
+  disabled={true}
+  label={
+    <React.Fragment>
+      <span
+        className="undefined"
+      >
+         
+      </span>
+      <span
+        className=""
+      >
+         
+      </span>
+    </React.Fragment>
+  }
+  style={
+    Object {
+      "height": 0,
+      "minHeight": 32,
+      "minWidth": 90,
+      "width": 0,
+    }
+  }
+/>
+`;

package/src/components/__tests__/__snapshots__/correct-input.test.js.snap

@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CorrectInput render renders correctly with correct as false 1`] = `
+<Component
+  classes={
+    Object {
+      "box": "Component-box-5",
+      "correct": "Component-correct-3",
+      "crInput": "Component-crInput-2",
+      "incorrect": "Component-incorrect-4",
+      "input": "Component-input-1",
+      "notchedOutline": "Component-notchedOutline-7",
+      "outlinedInput": "Component-outlinedInput-6",
+    }
+  }
+  correct={false}
+  disabled={false}
+  onChange={[MockFunction]}
+  value="Cow"
+  variant="outlined"
+/>
+`;
+
+exports[`CorrectInput render renders correctly with default props 1`] = `
+<Component
+  classes={
+    Object {
+      "box": "Component-box-5",
+      "correct": "Component-correct-3",
+      "crInput": "Component-crInput-2",
+      "incorrect": "Component-incorrect-4",
+      "input": "Component-input-1",
+      "notchedOutline": "Component-notchedOutline-7",
+      "outlinedInput": "Component-outlinedInput-6",
+    }
+  }
+  correct={false}
+  disabled={false}
+  onChange={[MockFunction]}
+  value="Cow"
+  variant="outlined"
+/>
+`;
+
+exports[`CorrectInput render renders correctly with disabled prop as true 1`] = `
+<Component
+  classes={
+    Object {
+      "box": "Component-box-5",
+      "correct": "Component-correct-3",
+      "crInput": "Component-crInput-2",
+      "incorrect": "Component-incorrect-4",
+      "input": "Component-input-1",
+      "notchedOutline": "Component-notchedOutline-7",
+      "outlinedInput": "Component-outlinedInput-6",
+    }
+  }
+  correct={false}
+  disabled={true}
+  onChange={[MockFunction]}
+  value="Cow"
+  variant="outlined"
+/>
+`;

package/src/components/__tests__/__snapshots__/dropdown.test.js.snap

@@ -0,0 +1,133 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dropdown render renders correctly with correct as true 1`] = `
+<Dropdown
+  choices={
+    Array [
+      Object {
+        "id": undefined,
+        "label": "Jumped",
+        "value": "Jumped",
+      },
+      Object {
+        "id": undefined,
+        "label": "Laughed",
+        "value": "Laughed",
+      },
+      Object {
+        "id": undefined,
+        "label": "Smiled",
+        "value": "Smiled",
+      },
+    ]
+  }
+  classes={
+    Object {
+      "correctIcon": "Dropdown-correctIcon-10",
+      "correctnessIndicatorIcon": "Dropdown-correctnessIndicatorIcon-9",
+      "disabledCorrect": "Dropdown-disabledCorrect-2",
+      "disabledIncorrect": "Dropdown-disabledIncorrect-3",
+      "incorrectIcon": "Dropdown-incorrectIcon-11",
+      "label": "Dropdown-label-7",
+      "menuRoot": "Dropdown-menuRoot-6",
+      "root": "Dropdown-root-1",
+      "selectMenu": "Dropdown-selectMenu-4",
+      "selected": "Dropdown-selected-5",
+      "srOnly": "Dropdown-srOnly-8",
+    }
+  }
+  correct={true}
+  disabled={false}
+  id="1"
+  onChange={[MockFunction]}
+  value="Jumped"
+/>
+`;
+
+exports[`Dropdown render renders correctly with default props 1`] = `
+<Dropdown
+  choices={
+    Array [
+      Object {
+        "id": undefined,
+        "label": "Jumped",
+        "value": "Jumped",
+      },
+      Object {
+        "id": undefined,
+        "label": "Laughed",
+        "value": "Laughed",
+      },
+      Object {
+        "id": undefined,
+        "label": "Smiled",
+        "value": "Smiled",
+      },
+    ]
+  }
+  classes={
+    Object {
+      "correctIcon": "Dropdown-correctIcon-10",
+      "correctnessIndicatorIcon": "Dropdown-correctnessIndicatorIcon-9",
+      "disabledCorrect": "Dropdown-disabledCorrect-2",
+      "disabledIncorrect": "Dropdown-disabledIncorrect-3",
+      "incorrectIcon": "Dropdown-incorrectIcon-11",
+      "label": "Dropdown-label-7",
+      "menuRoot": "Dropdown-menuRoot-6",
+      "root": "Dropdown-root-1",
+      "selectMenu": "Dropdown-selectMenu-4",
+      "selected": "Dropdown-selected-5",
+      "srOnly": "Dropdown-srOnly-8",
+    }
+  }
+  correct={false}
+  disabled={false}
+  id="1"
+  onChange={[MockFunction]}
+  value="Jumped"
+/>
+`;
+
+exports[`Dropdown render renders correctly with disabled prop as true 1`] = `
+<Dropdown
+  choices={
+    Array [
+      Object {
+        "id": undefined,
+        "label": "Jumped",
+        "value": "Jumped",
+      },
+      Object {
+        "id": undefined,
+        "label": "Laughed",
+        "value": "Laughed",
+      },
+      Object {
+        "id": undefined,
+        "label": "Smiled",
+        "value": "Smiled",
+      },
+    ]
+  }
+  classes={
+    Object {
+      "correctIcon": "Dropdown-correctIcon-10",
+      "correctnessIndicatorIcon": "Dropdown-correctnessIndicatorIcon-9",
+      "disabledCorrect": "Dropdown-disabledCorrect-2",
+      "disabledIncorrect": "Dropdown-disabledIncorrect-3",
+      "incorrectIcon": "Dropdown-incorrectIcon-11",
+      "label": "Dropdown-label-7",
+      "menuRoot": "Dropdown-menuRoot-6",
+      "root": "Dropdown-root-1",
+      "selectMenu": "Dropdown-selectMenu-4",
+      "selected": "Dropdown-selected-5",
+      "srOnly": "Dropdown-srOnly-8",
+    }
+  }
+  correct={false}
+  disabled={true}
+  id="1"
+  onChange={[MockFunction]}
+  value="Jumped"
+/>
+`;

package/src/components/__tests__/__snapshots__/input.test.js.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Input render renders correctly with correct as false 1`] = `
+<WithStyles(Component)
+  correct={false}
+  disabled={false}
+  isBox={true}
+  onChange={[Function]}
+  value="Cow"
+  variant="outlined"
+/>
+`;
+
+exports[`Input render renders correctly with default props 1`] = `
+<WithStyles(Component)
+  correct={false}
+  disabled={false}
+  isBox={true}
+  onChange={[Function]}
+  value="Cow"
+  variant="outlined"
+/>
+`;
+
+exports[`Input render renders correctly with disabled prop as true 1`] = `
+<WithStyles(Component)
+  correct={false}
+  disabled={true}
+  isBox={true}
+  onChange={[Function]}
+  value="Cow"
+  variant="outlined"
+/>
+`;

package/src/components/__tests__/blank.test.js

@@ -0,0 +1,202 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { BlankContent as Blank } from '../blank';
+
+describe('Blank', () => {
+  const onChange = jest.fn();
+  const defaultProps = {
+    disabled: false,
+    value: 'Cow',
+    classes: {},
+    isOver: false,
+    dragItem: {},
+    correct: false,
+    onChange,
+  };
+  let wrapper;
+  let instance;
+
+  beforeEach(() => {
+    wrapper = shallow(<Blank {...defaultProps} />);
+    instance = wrapper.instance();
+  });
+
+  describe('render', () => {
+    it('renders correctly with default props', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders correctly with disabled prop as true', () => {
+      wrapper.setProps({ disabled: true });
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders correctly with draggedItem', () => {
+      wrapper.setProps({ dragItem: { choice: { value: 'Dog' } } });
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders correctly with draggedItem and isOver', () => {
+      wrapper.setProps({ dragItem: { choice: { value: 'Dog' } }, isOver: true });
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  describe('onDelete', () => {
+    it('should be undefined if disabled is true', () => {
+      wrapper.setProps({ disabled: true });
+
+      expect(wrapper.props().onDelete).toEqual(undefined);
+    });
+
+    it('should be undefined if no value is set', () => {
+      wrapper.setProps({ disabled: false, value: undefined });
+
+      expect(wrapper.props().onDelete).toEqual(undefined);
+    });
+  });
+
+  describe('updateDimensions', () => {
+    let span;
+    let rootRef;
+
+    const setSpanDimensions = (height, width) => {
+      Object.defineProperty(span, 'offsetHeight', { value: height, configurable: true });
+      Object.defineProperty(span, 'offsetWidth', { value: width, configurable: true });
+    };
+
+    beforeEach(() => {
+      wrapper = shallow(<Blank {...defaultProps} />);
+      instance = wrapper.instance();
+
+      span = document.createElement('span');
+      rootRef = document.createElement('span');
+
+      instance.spanRef = span;
+      instance.rootRef = rootRef;
+
+      Object.defineProperty(span, 'offsetHeight', { value: 0, configurable: true });
+      Object.defineProperty(span, 'offsetWidth', { value: 0, configurable: true });
+    });
+
+    it('should update dimensions if span size exceeds the response area size', () => {
+      setSpanDimensions(50, 50);
+
+      instance.updateDimensions();
+
+      expect(instance.state).toEqual({
+        width: 74,
+        height: 74,
+      });
+    });
+
+    it('should not update dimensions if span size does not exceed the response area size', () => {
+      wrapper.setProps({
+        emptyResponseAreaHeight: 50,
+        emptyResponseAreaWidth: 50,
+      });
+      setSpanDimensions(30, 30);
+
+      instance.updateDimensions();
+
+      expect(instance.state).toEqual({
+        width: 54, // with padding it does exceed (30 + 24 > 50) so it's updating
+        height: 54, // with padding it does exceed (30 + 24 > 50) so it's updating
+      });
+    });
+
+    it('should handle non-numeric emptyResponseAreaHeight and emptyResponseAreaWidth', () => {
+      wrapper.setProps({
+        emptyResponseAreaHeight: 'non-numeric',
+        emptyResponseAreaWidth: 'non-numeric',
+      });
+      setSpanDimensions(50, 50);
+
+      instance.updateDimensions();
+
+      expect(instance.state).toEqual({
+        width: 74,
+        height: 74,
+      });
+    });
+  });
+
+  describe('getRootDimensions', () => {
+    it('should return state dimensions if set', () => {
+      instance.setState({ height: 50, width: 50 });
+
+      const dimensions = instance.getRootDimensions();
+
+      expect(dimensions).toEqual({
+        height: 50,
+        width: 50,
+        minWidth: 90,
+        minHeight: 32,
+      });
+    });
+
+    it('should return state height and props width if state width is not set', () => {
+      instance.setState({ height: 50, width: 0 });
+
+      const dimensions = instance.getRootDimensions();
+
+      expect(dimensions).toEqual({
+        height: 50,
+        width: 0,
+        minWidth: 90,
+        minHeight: 32,
+      });
+    });
+
+    it('should return props height and state width if state height is not set', () => {
+      instance.setState({ height: 0, width: 50 });
+
+      const dimensions = instance.getRootDimensions();
+
+      expect(dimensions).toEqual({
+        height: 0,
+        width: 50,
+        minWidth: 90,
+        minHeight: 32,
+      });
+    });
+
+    it('should return props dimensions if state dimensions are zero', () => {
+      instance.setState({ height: 0, width: 0 });
+      wrapper.setProps({ emptyResponseAreaHeight: 60, emptyResponseAreaWidth: 60 });
+
+      const dimensions = instance.getRootDimensions();
+
+      expect(dimensions).toEqual({
+        height: 60,
+        width: 60,
+      });
+    });
+
+    it('should return state dimensions over props dimensions if both are set', () => {
+      instance.setState({ height: 50, width: 50 });
+      wrapper.setProps({ emptyResponseAreaHeight: 60, emptyResponseAreaWidth: 60 });
+
+      const dimensions = instance.getRootDimensions();
+
+      expect(dimensions).toEqual({
+        height: 50,
+        width: 50,
+      });
+    });
+
+    it('should return minWidth and minHeight if state and props dimensions are zero or undefined', () => {
+      instance.setState({ height: 0, width: 0 });
+      wrapper.setProps({ emptyResponseAreaHeight: undefined, emptyResponseAreaWidth: undefined });
+
+      const dimensions = instance.getRootDimensions();
+
+      expect(dimensions).toEqual({
+        height: 0,
+        width: 0,
+        minWidth: 90,
+        minHeight: 32,
+      });
+    });
+  });
+});