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

package/src/__tests__/serialization.test.js

@@ -0,0 +1,54 @@
+import { deserialize } from '../serialization';
+
+describe('serialization', () => {
+  it('ignores comments', () => {
+    const out = deserialize(`<!-- hi -->`);
+    expect(out.document.nodes[0]).toEqual(expect.objectContaining({ type: 'span' }));
+  });
+
+  it('ignores comments', () => {
+    const out = deserialize(`<!-- hi --><div>foo</div>`);
+    expect(out.document.nodes[0]).toEqual(
+      expect.objectContaining({
+        type: 'div',
+        nodes: [
+          expect.objectContaining({
+            object: 'text',
+            leaves: [{ text: 'foo' }],
+          }),
+        ],
+      }),
+    );
+  });
+
+  it('deserializes an em', () => {
+    const out = deserialize(`<!-- hi --><div> <em>x</em> </div>`);
+    expect(out.document.nodes[0]).toEqual(
+      expect.objectContaining({
+        type: 'div',
+        nodes: [
+          expect.objectContaining({
+            object: 'text',
+          }),
+          expect.objectContaining({
+            leaves: [
+              {
+                marks: [
+                  {
+                    data: undefined,
+                    type: 'italic',
+                  },
+                ],
+                text: 'x',
+              },
+            ],
+            object: 'text',
+          }),
+          expect.objectContaining({
+            object: 'text',
+          }),
+        ],
+      }),
+    );
+  });
+});

package/src/__tests__/utils.js

@@ -0,0 +1 @@
+export const choice = (v, id) => ({ label: v, value: v, id });

package/src/__tests__/with-mask.test.js

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { withMask } from '../with-mask';
+
+describe('WithMask', () => {
+  const onChange = jest.fn();
+  const defaultProps = {
+    markup: '<p>Foo bar {{0}} over the moon;</p>',
+    value: {
+      0: 'blank',
+    },
+    onChange,
+  };
+  const Masked = withMask('foo', (props) => (node) => {
+    const dataset = node.data ? node.data.dataset || {} : {};
+
+    if (dataset.component === 'foo') {
+      return <input type="text" value="Foo" />;
+    }
+  });
+
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallow(<Masked {...defaultProps} />);
+  });
+
+  describe('render', () => {
+    it('renders correctly with default props', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  describe('onChange', () => {
+    const event = (value) => ({
+      target: { value },
+    });
+
+    it('should call the function', () => {
+      const e = event('ceva');
+
+      wrapper.simulate('change', e);
+
+      expect(onChange).toHaveBeenCalledWith({
+        target: {
+          value: 'ceva',
+        },
+      });
+    });
+  });
+});

package/src/choices/__tests__/__snapshots__/index.test.js.snap

@@ -0,0 +1,209 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`index Choice render renders correctly with default props 1`] = `
+<BlankContentComp
+  classes={
+    Object {
+      "chip": "BlankContentComp-chip-2",
+      "chipLabel": "BlankContentComp-chipLabel-3",
+      "choice": "BlankContentComp-choice-1",
+      "disabled": "BlankContentComp-disabled-4",
+    }
+  }
+  disabled={false}
+  label="Label"
+  targetId="1"
+  value="1"
+/>
+`;
+
+exports[`index Choice render renders correctly with disabled prop as true 1`] = `
+<BlankContentComp
+  classes={
+    Object {
+      "chip": "BlankContentComp-chip-2",
+      "chipLabel": "BlankContentComp-chipLabel-3",
+      "choice": "BlankContentComp-choice-1",
+      "disabled": "BlankContentComp-disabled-4",
+    }
+  }
+  disabled={true}
+  label="Label"
+  targetId="1"
+  value="1"
+/>
+`;
+
+exports[`index Choices renders correctly with default props 1`] = `
+<div
+  style={
+    Object {
+      "margin": "0 40px 0 0",
+      "minWidth": "100px",
+    }
+  }
+>
+  <DropTarget(DroppablePlaceholder)
+    disabled={false}
+  >
+    <DragSource(WithStyles(BlankContentComp))
+      choice={
+        Object {
+          "id": "0",
+          "label": "Jumped",
+          "value": "Jumped",
+        }
+      }
+      disabled={false}
+      key="Jumped-0"
+    />
+    <DragSource(WithStyles(BlankContentComp))
+      choice={
+        Object {
+          "id": "1",
+          "label": "Laughed",
+          "value": "Laughed",
+        }
+      }
+      disabled={false}
+      key="Laughed-1"
+    />
+    <DragSource(WithStyles(BlankContentComp))
+      choice={
+        Object {
+          "id": "2",
+          "label": "Spoon",
+          "value": "Spoon",
+        }
+      }
+      disabled={false}
+      key="Spoon-2"
+    />
+  </DropTarget(DroppablePlaceholder)>
+</div>
+`;
+
+exports[`index Choices renders correctly with disabled prop as true 1`] = `
+<div
+  style={
+    Object {
+      "margin": "0 40px 0 0",
+      "minWidth": "100px",
+    }
+  }
+>
+  <DropTarget(DroppablePlaceholder)
+    disabled={true}
+  >
+    <DragSource(WithStyles(BlankContentComp))
+      choice={
+        Object {
+          "id": "0",
+          "label": "Jumped",
+          "value": "Jumped",
+        }
+      }
+      disabled={true}
+      key="Jumped-0"
+    />
+    <DragSource(WithStyles(BlankContentComp))
+      choice={
+        Object {
+          "id": "1",
+          "label": "Laughed",
+          "value": "Laughed",
+        }
+      }
+      disabled={true}
+      key="Laughed-1"
+    />
+    <DragSource(WithStyles(BlankContentComp))
+      choice={
+        Object {
+          "id": "2",
+          "label": "Spoon",
+          "value": "Spoon",
+        }
+      }
+      disabled={true}
+      key="Spoon-2"
+    />
+  </DropTarget(DroppablePlaceholder)>
+</div>
+`;
+
+exports[`index Choices renders with duplicates 1`] = `
+<div
+  style={
+    Object {
+      "margin": "0 40px 0 0",
+      "minWidth": "100px",
+    }
+  }
+>
+  <DropTarget(DroppablePlaceholder)
+    disabled={false}
+  >
+    <DragSource(WithStyles(BlankContentComp))
+      choice={
+        Object {
+          "id": "0",
+          "label": "Jumped",
+          "value": "Jumped",
+        }
+      }
+      disabled={false}
+      key="Jumped-0"
+    />
+    <DragSource(WithStyles(BlankContentComp))
+      choice={
+        Object {
+          "id": "1",
+          "label": "Laughed",
+          "value": "Laughed",
+        }
+      }
+      disabled={false}
+      key="Laughed-1"
+    />
+    <DragSource(WithStyles(BlankContentComp))
+      choice={
+        Object {
+          "id": "2",
+          "label": "Spoon",
+          "value": "Spoon",
+        }
+      }
+      disabled={false}
+      key="Spoon-2"
+    />
+  </DropTarget(DroppablePlaceholder)>
+</div>
+`;
+
+exports[`index Choices renders without duplicates 1`] = `
+<div
+  style={
+    Object {
+      "margin": "0 40px 0 0",
+      "minWidth": "100px",
+    }
+  }
+>
+  <DropTarget(DroppablePlaceholder)
+    disabled={false}
+  >
+    <DragSource(WithStyles(BlankContentComp))
+      choice={
+        Object {
+          "id": "2",
+          "label": "Spoon",
+          "value": "Spoon",
+        }
+      }
+      disabled={false}
+      key="Spoon-0"
+    />
+  </DropTarget(DroppablePlaceholder)>
+</div>
+`;

package/src/choices/__tests__/index.test.js

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { BlankContent as Choice } from '../choice';
+import { choice } from '../../__tests__/utils';
+import Choices from '../index';
+
+describe('index', () => {
+  describe('Choices', () => {
+    const defaultProps = {
+      disabled: false,
+      choices: [choice('Jumped', '0'), choice('Laughed', '1'), choice('Spoon', '2')],
+    };
+    let wrapper;
+
+    beforeEach(() => {
+      wrapper = shallow(<Choices {...defaultProps} />);
+    });
+
+    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 without duplicates', () => {
+      wrapper.setProps({ duplicates: undefined, value: { 0: '0', 1: '1' } });
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders with duplicates', () => {
+      wrapper.setProps({ duplicates: true, value: { 0: '0', 1: '1' } });
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  describe('Choice', () => {
+    const defaultProps = {
+      disabled: false,
+      value: '1',
+      label: 'Label',
+      targetId: '1',
+    };
+    let wrapper;
+
+    beforeEach(() => {
+      wrapper = shallow(<Choice {...defaultProps} />);
+    });
+
+    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();
+      });
+    });
+  });
+});

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"
+/>
+`;