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

package/src/__tests__/index.test.js

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import componentize from '../componentize';
+import { deserialize } from '../serialization';
+
+describe('index', () => {
+  describe('componentize', () => {
+    it('should return an array with the appropriate markup', () => {
+      const dropDownMarkup = componentize('{{0}} foo {{1}}', 'dropdown');
+
+      expect(dropDownMarkup).toEqual({
+        markup:
+          '<span data-component="dropdown" data-id="0"></span> foo <span data-component="dropdown" data-id="1"></span>',
+      });
+    });
+  });
+
+  describe('serialization', () => {
+    it('should have default node a span', () => {
+      expect(deserialize('something')).toEqual(
+        expect.objectContaining({
+          object: 'value',
+          document: {
+            object: 'document',
+            data: {},
+            nodes: [
+              {
+                object: 'block',
+                data: {},
+                isVoid: false,
+                type: 'span',
+                nodes: [{ object: 'text', leaves: [{ text: 'something' }] }],
+              },
+            ],
+          },
+        }),
+      );
+    });
+  });
+});

package/src/__tests__/mask.test.js

@@ -0,0 +1,152 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import Mask from '../mask';
+
+describe('Mask', () => {
+  const renderChildren = jest.fn();
+  const onChange = jest.fn();
+  const defaultProps = {
+    renderChildren,
+    onChange,
+    layout: {
+      nodes: [
+        {
+          object: 'text',
+          leaves: [
+            {
+              text: 'Foo',
+            },
+          ],
+        },
+      ],
+    },
+    value: {},
+  };
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallow(<Mask {...defaultProps} />);
+  });
+
+  describe('render', () => {
+    it('renders correctly with default props', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders correctly a paragraph', () => {
+      wrapper.setProps({
+        layout: {
+          nodes: [
+            {
+              type: 'p',
+              nodes: [
+                {
+                  object: 'text',
+                  leaves: [
+                    {
+                      text: 'Foo',
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      });
+
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders correctly a div', () => {
+      wrapper.setProps({
+        layout: {
+          nodes: [
+            {
+              type: 'div',
+              data: {
+                attributes: {},
+              },
+              nodes: [
+                {
+                  type: 'p',
+                  data: {
+                    attributes: {},
+                  },
+                  nodes: [
+                    {
+                      object: 'text',
+                      leaves: [
+                        {
+                          text: 'Foo',
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      });
+
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it.only('renders correctly a em', () => {
+      wrapper.setProps({
+        layout: {
+          nodes: [
+            {
+              leaves: [{ text: 'Foo ' }],
+              object: 'text',
+            },
+            {
+              leaves: [
+                {
+                  marks: [
+                    {
+                      data: undefined,
+                      type: 'italic',
+                    },
+                  ],
+                  text: 'x',
+                },
+              ],
+              object: 'text',
+            },
+            {
+              leaves: [{ text: ' bar' }],
+              object: 'text',
+            },
+          ],
+          object: 'block',
+          type: 'div',
+        },
+      });
+
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    const da = () => ({ data: { attributes: {} } });
+    it('renders without space under tbody', () => {
+      wrapper.setProps({
+        layout: {
+          nodes: [
+            {
+              type: 'tbody',
+              ...da(),
+              nodes: [
+                {
+                  object: 'text',
+                  leaves: [{ text: ' ' }],
+                },
+                { type: 'tr', ...da(), nodes: [] },
+              ],
+            },
+          ],
+        },
+      });
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});

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}>