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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/CHANGELOG.md +15 -56
  2. package/NEXT.CHANGELOG.json +1 -0
  3. package/package.json +9 -5
  4. package/src/__tests__/__snapshots__/drag-in-the-blank.test.js.snap +316 -0
  5. package/src/__tests__/__snapshots__/mask.test.js.snap +55 -0
  6. package/src/__tests__/__snapshots__/with-mask.test.js.snap +62 -0
  7. package/src/__tests__/drag-in-the-blank.test.js +71 -0
  8. package/src/__tests__/index.test.js +39 -0
  9. package/src/__tests__/mask.test.js +152 -0
  10. package/src/__tests__/serialization.test.js +54 -0
  11. package/src/__tests__/utils.js +1 -0
  12. package/src/__tests__/with-mask.test.js +51 -0
  13. package/src/choices/__tests__/__snapshots__/index.test.js.snap +209 -0
  14. package/src/choices/__tests__/index.test.js +62 -0
  15. package/src/choices/choice.jsx +60 -6
  16. package/src/choices/index.jsx +2 -2
  17. package/src/components/__tests__/__snapshots__/blank.test.js.snap +111 -0
  18. package/src/components/__tests__/__snapshots__/correct-input.test.js.snap +64 -0
  19. package/src/components/__tests__/__snapshots__/dropdown.test.js.snap +133 -0
  20. package/src/components/__tests__/__snapshots__/input.test.js.snap +34 -0
  21. package/src/components/__tests__/blank.test.js +202 -0
  22. package/src/components/__tests__/correct-input.test.js +49 -0
  23. package/src/components/__tests__/dropdown.test.js +51 -0
  24. package/src/components/__tests__/input.test.js +50 -0
  25. package/src/components/blank.jsx +139 -28
  26. package/src/components/correct-input.jsx +6 -1
  27. package/src/components/dropdown.jsx +192 -71
  28. package/src/constructed-response.jsx +76 -18
  29. package/src/customizable.jsx +35 -0
  30. package/src/drag-in-the-blank.jsx +26 -3
  31. package/src/index.js +10 -1
  32. package/src/inline-dropdown.jsx +2 -0
  33. package/src/mask.jsx +30 -5
  34. package/src/with-mask.jsx +39 -2
  35. package/README.md +0 -14
  36. package/lib/choices/choice.js +0 -158
  37. package/lib/choices/choice.js.map +0 -1
  38. package/lib/choices/index.js +0 -127
  39. package/lib/choices/index.js.map +0 -1
  40. package/lib/componentize.js +0 -25
  41. package/lib/componentize.js.map +0 -1
  42. package/lib/components/blank.js +0 -303
  43. package/lib/components/blank.js.map +0 -1
  44. package/lib/components/correct-input.js +0 -113
  45. package/lib/components/correct-input.js.map +0 -1
  46. package/lib/components/dropdown.js +0 -216
  47. package/lib/components/dropdown.js.map +0 -1
  48. package/lib/components/input.js +0 -57
  49. package/lib/components/input.js.map +0 -1
  50. package/lib/constructed-response.js +0 -52
  51. package/lib/constructed-response.js.map +0 -1
  52. package/lib/drag-in-the-blank.js +0 -191
  53. package/lib/drag-in-the-blank.js.map +0 -1
  54. package/lib/index.js +0 -54
  55. package/lib/index.js.map +0 -1
  56. package/lib/inline-dropdown.js +0 -46
  57. package/lib/inline-dropdown.js.map +0 -1
  58. package/lib/mask.js +0 -215
  59. package/lib/mask.js.map +0 -1
  60. package/lib/serialization.js +0 -207
  61. package/lib/serialization.js.map +0 -1
  62. package/lib/with-mask.js +0 -93
  63. package/lib/with-mask.js.map +0 -1
@@ -1,127 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = void 0;
9
-
10
- var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
11
-
12
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
13
-
14
- var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
15
-
16
- var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
17
-
18
- var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
19
-
20
- var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
21
-
22
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
23
-
24
- var _react = _interopRequireDefault(require("react"));
25
-
26
- var _propTypes = _interopRequireDefault(require("prop-types"));
27
-
28
- var _findKey = _interopRequireDefault(require("lodash/findKey"));
29
-
30
- var _choice = _interopRequireDefault(require("./choice"));
31
-
32
- var _dragInTheBlankDp = _interopRequireDefault(require("@pie-lib/drag/lib/drag-in-the-blank-dp"));
33
-
34
- function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
35
-
36
- function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
37
-
38
- var Choices = /*#__PURE__*/function (_React$Component) {
39
- (0, _inherits2["default"])(Choices, _React$Component);
40
-
41
- var _super = _createSuper(Choices);
42
-
43
- function Choices() {
44
- var _this;
45
-
46
- (0, _classCallCheck2["default"])(this, Choices);
47
-
48
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
49
- args[_key] = arguments[_key];
50
- }
51
-
52
- _this = _super.call.apply(_super, [this].concat(args));
53
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getStyleForWrapper", function () {
54
- var choicePosition = _this.props.choicePosition;
55
-
56
- switch (choicePosition) {
57
- case 'above':
58
- return {
59
- margin: '0 0 40px 0'
60
- };
61
-
62
- case 'below':
63
- return {
64
- margin: '40px 0 0 0'
65
- };
66
-
67
- case 'right':
68
- return {
69
- margin: '0 0 0 40px'
70
- };
71
-
72
- default:
73
- return {
74
- margin: '0 40px 0 0'
75
- };
76
- }
77
- });
78
- return _this;
79
- }
80
-
81
- (0, _createClass2["default"])(Choices, [{
82
- key: "render",
83
- value: function render() {
84
- var _this$props = this.props,
85
- disabled = _this$props.disabled,
86
- duplicates = _this$props.duplicates,
87
- choices = _this$props.choices,
88
- value = _this$props.value;
89
- var filteredChoices = choices.filter(function (c) {
90
- if (duplicates === true) {
91
- return true;
92
- }
93
-
94
- var foundChoice = (0, _findKey["default"])(value, function (v) {
95
- return v === c.id;
96
- });
97
- return foundChoice === undefined;
98
- });
99
- var elementStyle = this.getStyleForWrapper();
100
- return /*#__PURE__*/_react["default"].createElement("div", {
101
- style: elementStyle
102
- }, /*#__PURE__*/_react["default"].createElement(_dragInTheBlankDp["default"], {
103
- disabled: disabled
104
- }, filteredChoices.map(function (c, index) {
105
- return /*#__PURE__*/_react["default"].createElement(_choice["default"], {
106
- key: "".concat(c.value, "-").concat(index),
107
- disabled: disabled,
108
- choice: c
109
- });
110
- })));
111
- }
112
- }]);
113
- return Choices;
114
- }(_react["default"].Component);
115
-
116
- exports["default"] = Choices;
117
- (0, _defineProperty2["default"])(Choices, "propTypes", {
118
- disabled: _propTypes["default"].bool,
119
- duplicates: _propTypes["default"].bool,
120
- choices: _propTypes["default"].arrayOf(_propTypes["default"].shape({
121
- label: _propTypes["default"].string,
122
- value: _propTypes["default"].string
123
- })),
124
- value: _propTypes["default"].object,
125
- choicePosition: _propTypes["default"].string.isRequired
126
- });
127
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/choices/index.jsx"],"names":["Choices","choicePosition","props","margin","disabled","duplicates","choices","value","filteredChoices","filter","c","foundChoice","v","id","undefined","elementStyle","getStyleForWrapper","map","index","React","Component","PropTypes","bool","arrayOf","shape","label","string","object","isRequired"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;IAEqBA,O;;;;;;;;;;;;;;;2GASE,YAAM;AACzB,UAAQC,cAAR,GAA2B,MAAKC,KAAhC,CAAQD,cAAR;;AAEA,cAAQA,cAAR;AACE,aAAK,OAAL;AACE,iBAAO;AACLE,YAAAA,MAAM,EAAE;AADH,WAAP;;AAIF,aAAK,OAAL;AACE,iBAAO;AACLA,YAAAA,MAAM,EAAE;AADH,WAAP;;AAIF,aAAK,OAAL;AACE,iBAAO;AACLA,YAAAA,MAAM,EAAE;AADH,WAAP;;AAIF;AACE,iBAAO;AACLA,YAAAA,MAAM,EAAE;AADH,WAAP;AAjBJ;AAqBD,K;;;;;;WAED,kBAAS;AACP,wBAAiD,KAAKD,KAAtD;AAAA,UAAQE,QAAR,eAAQA,QAAR;AAAA,UAAkBC,UAAlB,eAAkBA,UAAlB;AAAA,UAA8BC,OAA9B,eAA8BA,OAA9B;AAAA,UAAuCC,KAAvC,eAAuCA,KAAvC;AACA,UAAMC,eAAe,GAAGF,OAAO,CAACG,MAAR,CAAe,UAACC,CAAD,EAAO;AAC5C,YAAIL,UAAU,KAAK,IAAnB,EAAyB;AACvB,iBAAO,IAAP;AACD;;AACD,YAAMM,WAAW,GAAG,yBAAQJ,KAAR,EAAe,UAACK,CAAD;AAAA,iBAAOA,CAAC,KAAKF,CAAC,CAACG,EAAf;AAAA,SAAf,CAApB;AACA,eAAOF,WAAW,KAAKG,SAAvB;AACD,OANuB,CAAxB;AAOA,UAAMC,YAAY,GAAG,KAAKC,kBAAL,EAArB;AAEA,0BACE;AAAK,QAAA,KAAK,EAAED;AAAZ,sBACE,gCAAC,4BAAD;AAA0B,QAAA,QAAQ,EAAEX;AAApC,SACGI,eAAe,CAACS,GAAhB,CAAoB,UAACP,CAAD,EAAIQ,KAAJ;AAAA,4BACnB,gCAAC,kBAAD;AAAQ,UAAA,GAAG,YAAKR,CAAC,CAACH,KAAP,cAAgBW,KAAhB,CAAX;AAAoC,UAAA,QAAQ,EAAEd,QAA9C;AAAwD,UAAA,MAAM,EAAEM;AAAhE,UADmB;AAAA,OAApB,CADH,CADF,CADF;AASD;;;EAvDkCS,kBAAMC,S;;;iCAAtBpB,O,eACA;AACjBI,EAAAA,QAAQ,EAAEiB,sBAAUC,IADH;AAEjBjB,EAAAA,UAAU,EAAEgB,sBAAUC,IAFL;AAGjBhB,EAAAA,OAAO,EAAEe,sBAAUE,OAAV,CAAkBF,sBAAUG,KAAV,CAAgB;AAAEC,IAAAA,KAAK,EAAEJ,sBAAUK,MAAnB;AAA2BnB,IAAAA,KAAK,EAAEc,sBAAUK;AAA5C,GAAhB,CAAlB,CAHQ;AAIjBnB,EAAAA,KAAK,EAAEc,sBAAUM,MAJA;AAKjB1B,EAAAA,cAAc,EAAEoB,sBAAUK,MAAV,CAAiBE;AALhB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport findKey from 'lodash/findKey';\nimport Choice from './choice';\nimport DragDroppablePlaceholder from '@pie-lib/drag/lib/drag-in-the-blank-dp';\n\nexport default class Choices extends React.Component {\n static propTypes = {\n disabled: PropTypes.bool,\n duplicates: PropTypes.bool,\n choices: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.string })),\n value: PropTypes.object,\n choicePosition: PropTypes.string.isRequired,\n };\n\n getStyleForWrapper = () => {\n const { choicePosition } = this.props;\n\n switch (choicePosition) {\n case 'above':\n return {\n margin: '0 0 40px 0',\n };\n\n case 'below':\n return {\n margin: '40px 0 0 0',\n };\n\n case 'right':\n return {\n margin: '0 0 0 40px',\n };\n\n default:\n return {\n margin: '0 40px 0 0',\n };\n }\n };\n\n render() {\n const { disabled, duplicates, choices, value } = this.props;\n const filteredChoices = choices.filter((c) => {\n if (duplicates === true) {\n return true;\n }\n const foundChoice = findKey(value, (v) => v === c.id);\n return foundChoice === undefined;\n });\n const elementStyle = this.getStyleForWrapper();\n\n return (\n <div style={elementStyle}>\n <DragDroppablePlaceholder disabled={disabled}>\n {filteredChoices.map((c, index) => (\n <Choice key={`${c.value}-${index}`} disabled={disabled} choice={c} />\n ))}\n </DragDroppablePlaceholder>\n </div>\n );\n }\n}\n"],"file":"index.js"}
@@ -1,25 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports["default"] = void 0;
7
- var REGEX = /\{\{(\d+)\}\}/g;
8
-
9
- var _default = function _default(s, t) {
10
- if (!s) {
11
- return {
12
- markup: ''
13
- };
14
- }
15
-
16
- var markup = s.replace(REGEX, function (match, g) {
17
- return "<span data-component=\"".concat(t, "\" data-id=\"").concat(g, "\"></span>");
18
- });
19
- return {
20
- markup: markup
21
- };
22
- };
23
-
24
- exports["default"] = _default;
25
- //# sourceMappingURL=componentize.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/componentize.js"],"names":["REGEX","s","t","markup","replace","match","g"],"mappings":";;;;;;AAAA,IAAMA,KAAK,GAAG,gBAAd;;eAEe,kBAACC,CAAD,EAAIC,CAAJ,EAAU;AACvB,MAAI,CAACD,CAAL,EAAQ;AACN,WAAO;AAAEE,MAAAA,MAAM,EAAE;AAAV,KAAP;AACD;;AAED,MAAMA,MAAM,GAAGF,CAAC,CAACG,OAAF,CAAUJ,KAAV,EAAiB,UAACK,KAAD,EAAQC,CAAR,EAAc;AAC5C,4CAAgCJ,CAAhC,0BAA+CI,CAA/C;AACD,GAFc,CAAf;AAIA,SAAO;AAAEH,IAAAA,MAAM,EAANA;AAAF,GAAP;AACD,C","sourcesContent":["const REGEX = /\\{\\{(\\d+)\\}\\}/g;\n\nexport default (s, t) => {\n if (!s) {\n return { markup: '' };\n }\n\n const markup = s.replace(REGEX, (match, g) => {\n return `<span data-component=\"${t}\" data-id=\"${g}\"></span>`;\n });\n\n return { markup };\n};\n"],"file":"componentize.js"}
@@ -1,303 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = exports.DRAG_TYPE = exports.BlankContent = void 0;
9
-
10
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
11
-
12
- var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
13
-
14
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
15
-
16
- var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
17
-
18
- var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
19
-
20
- var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
21
-
22
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
23
-
24
- var _react = _interopRequireDefault(require("react"));
25
-
26
- var _reactDom = _interopRequireDefault(require("react-dom"));
27
-
28
- var _propTypes = _interopRequireDefault(require("prop-types"));
29
-
30
- var _mathRendering = require("@pie-lib/math-rendering");
31
-
32
- var _debug = _interopRequireDefault(require("debug"));
33
-
34
- var _drag = require("@pie-lib/drag");
35
-
36
- var _styles = require("@material-ui/core/styles");
37
-
38
- var _Chip = _interopRequireDefault(require("@material-ui/core/Chip"));
39
-
40
- var _classnames3 = _interopRequireDefault(require("classnames"));
41
-
42
- var _renderUi = require("@pie-lib/render-ui");
43
-
44
- var _excluded = ["connectDragSource", "connectDropTarget"];
45
-
46
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
47
-
48
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
49
-
50
- function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
51
-
52
- function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
53
-
54
- var log = (0, _debug["default"])('pie-lib:mask-markup:blank');
55
- var DRAG_TYPE = 'MaskBlank';
56
- exports.DRAG_TYPE = DRAG_TYPE;
57
- var useStyles = (0, _styles.withStyles)(function () {
58
- return {
59
- content: {
60
- border: "solid 0px ".concat(_renderUi.color.primary()),
61
- minWidth: '200px',
62
- touchAction: 'none',
63
- overflow: 'hidden'
64
- },
65
- chip: {
66
- backgroundColor: _renderUi.color.background(),
67
- border: "1px solid ".concat(_renderUi.color.text()),
68
- color: _renderUi.color.text(),
69
- minWidth: '90px',
70
- fontSize: 'inherit',
71
- minHeight: '32px',
72
- height: 'auto',
73
- maxWidth: '374px',
74
- position: 'relative'
75
- },
76
- chipLabel: {
77
- whiteSpace: 'pre-wrap',
78
- // Added for touch devices, for image content.
79
- // This will prevent the context menu from appearing and not allowing other interactions with the image.
80
- // If interactions with the image in the token will be requested we should handle only the context Menu.
81
- pointerEvents: 'none',
82
- '& img': {
83
- display: 'block',
84
- padding: '2px 0'
85
- }
86
- },
87
- hidden: {
88
- color: 'transparent',
89
- opacity: 0
90
- },
91
- dragged: {
92
- position: 'absolute',
93
- left: 16,
94
- maxWidth: '60px'
95
- },
96
- correct: {
97
- border: "solid 1px ".concat(_renderUi.color.correct())
98
- },
99
- incorrect: {
100
- border: "solid 1px ".concat(_renderUi.color.incorrect())
101
- },
102
- over: {
103
- whiteSpace: 'nowrap',
104
- overflow: 'hidden'
105
- }
106
- };
107
- });
108
-
109
- var BlankContent = /*#__PURE__*/function (_React$Component) {
110
- (0, _inherits2["default"])(BlankContent, _React$Component);
111
-
112
- var _super = _createSuper(BlankContent);
113
-
114
- function BlankContent() {
115
- var _this;
116
-
117
- (0, _classCallCheck2["default"])(this, BlankContent);
118
- _this = _super.call(this);
119
- _this.state = {
120
- height: 0
121
- };
122
- return _this;
123
- }
124
-
125
- (0, _createClass2["default"])(BlankContent, [{
126
- key: "componentDidUpdate",
127
- value: function componentDidUpdate(prevProps) {
128
- var _this2 = this;
129
-
130
- (0, _mathRendering.renderMath)(this.rootRef);
131
- var currentChoice = this.props.choice;
132
- var prevChoice = prevProps.choice;
133
-
134
- if (JSON.stringify(currentChoice) !== JSON.stringify(prevChoice)) {
135
- if (!currentChoice) {
136
- this.setState({
137
- height: 0
138
- });
139
- return;
140
- }
141
-
142
- setTimeout(function () {
143
- _this2.setState({
144
- height: _this2.spanRef.offsetHeight
145
- });
146
- }, 300);
147
- }
148
- }
149
- }, {
150
- key: "addDraggableFalseAttributes",
151
- value: function addDraggableFalseAttributes(parent) {
152
- parent.childNodes.forEach(function (elem) {
153
- if (elem instanceof Element || elem instanceof HTMLDocument) {
154
- elem.setAttribute('draggable', false);
155
- }
156
- });
157
- }
158
- }, {
159
- key: "render",
160
- value: function render() {
161
- var _this3 = this,
162
- _classnames2;
163
-
164
- var _this$props = this.props,
165
- disabled = _this$props.disabled,
166
- choice = _this$props.choice,
167
- classes = _this$props.classes,
168
- isOver = _this$props.isOver,
169
- dragItem = _this$props.dragItem,
170
- correct = _this$props.correct;
171
- var draggedLabel = dragItem && isOver && dragItem.choice.value;
172
- var label = choice && choice.value;
173
- return (
174
- /*#__PURE__*/
175
- // 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.
176
- _react["default"].createElement(_Chip["default"], {
177
- clickable: false,
178
- disabled: true,
179
- ref: function ref(_ref3) {
180
- //eslint-disable-next-line
181
- _this3.rootRef = _reactDom["default"].findDOMNode(_ref3);
182
- },
183
- component: "span",
184
- label: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
185
- className: (0, _classnames3["default"])(classes.chipLabel, isOver && classes.over, (0, _defineProperty2["default"])({}, classes.hidden, draggedLabel)),
186
- ref: function ref(_ref) {
187
- if (_ref) {
188
- //eslint-disable-next-line
189
- _this3.spanRef = _reactDom["default"].findDOMNode(_ref);
190
- _ref.innerHTML = label || '';
191
-
192
- _this3.addDraggableFalseAttributes(_ref);
193
- }
194
- }
195
- }, ' '), draggedLabel && /*#__PURE__*/_react["default"].createElement("span", {
196
- className: (0, _classnames3["default"])(classes.chipLabel, isOver && classes.over, classes.dragged),
197
- ref: function ref(_ref2) {
198
- if (_ref2) {
199
- //eslint-disable-next-line
200
- _this3.spanRef = _reactDom["default"].findDOMNode(_ref2);
201
- _ref2.innerHTML = draggedLabel || '';
202
-
203
- _this3.addDraggableFalseAttributes(_ref2);
204
- }
205
- }
206
- }, ' ')),
207
- className: (0, _classnames3["default"])(classes.chip, isOver && classes.over, (_classnames2 = {}, (0, _defineProperty2["default"])(_classnames2, classes.correct, correct !== undefined && correct), (0, _defineProperty2["default"])(_classnames2, classes.incorrect, correct !== undefined && !correct), _classnames2)),
208
- variant: disabled ? 'outlined' : undefined,
209
- style: _objectSpread({}, this.state.height ? {
210
- height: this.state.height
211
- } : {}),
212
- classes: {
213
- label: isOver && classes.over
214
- }
215
- })
216
- );
217
- }
218
- }]);
219
- return BlankContent;
220
- }(_react["default"].Component);
221
-
222
- exports.BlankContent = BlankContent;
223
- (0, _defineProperty2["default"])(BlankContent, "propTypes", {
224
- id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
225
- disabled: _propTypes["default"].bool,
226
- duplicates: _propTypes["default"].bool,
227
- choice: _propTypes["default"].object,
228
- classes: _propTypes["default"].object,
229
- isOver: _propTypes["default"].bool,
230
- dragItem: _propTypes["default"].object,
231
- correct: _propTypes["default"].bool,
232
- onChange: _propTypes["default"].func
233
- });
234
- var StyledBlankContent = useStyles(BlankContent);
235
- var connectedBlankContent = useStyles(function (_ref4) {
236
- var connectDragSource = _ref4.connectDragSource,
237
- connectDropTarget = _ref4.connectDropTarget,
238
- props = (0, _objectWithoutProperties2["default"])(_ref4, _excluded);
239
- var classes = props.classes,
240
- isOver = props.isOver;
241
- return connectDropTarget(connectDragSource( /*#__PURE__*/_react["default"].createElement("span", {
242
- className: (0, _classnames3["default"])(classes.content, isOver && classes.over)
243
- }, /*#__PURE__*/_react["default"].createElement(StyledBlankContent, props))));
244
- });
245
- var tileTarget = {
246
- drop: function drop(props, monitor) {
247
- var draggedItem = monitor.getItem();
248
- log('props.instanceId', props.instanceId, 'draggedItem.instanceId:', draggedItem.instanceId);
249
-
250
- if (draggedItem.id !== props.id) {
251
- props.onChange(props.id, draggedItem.choice.id);
252
- }
253
-
254
- return {
255
- dropped: draggedItem.id !== props.id
256
- };
257
- },
258
- canDrop: function canDrop(props, monitor) {
259
- var draggedItem = monitor.getItem();
260
- return draggedItem.instanceId === props.instanceId;
261
- }
262
- };
263
- var DropTile = (0, _drag.DropTarget)(DRAG_TYPE, tileTarget, function (connect, monitor) {
264
- return {
265
- connectDropTarget: connect.dropTarget(),
266
- isOver: monitor.isOver(),
267
- dragItem: monitor.getItem()
268
- };
269
- })(connectedBlankContent);
270
- var tileSource = {
271
- canDrag: function canDrag(props) {
272
- return !props.disabled && !!props.choice;
273
- },
274
- beginDrag: function beginDrag(props) {
275
- return {
276
- id: props.id,
277
- choice: props.choice,
278
- instanceId: props.instanceId,
279
- fromChoice: true
280
- };
281
- },
282
- endDrag: function endDrag(props, monitor) {
283
- // this will be null if it did not drop
284
- var dropResult = monitor.getDropResult();
285
-
286
- if (!dropResult || dropResult.dropped && !props.duplicates) {
287
- var draggedItem = monitor.getItem();
288
-
289
- if (draggedItem.fromChoice) {
290
- props.onChange(props.id, undefined);
291
- }
292
- }
293
- }
294
- };
295
- var DragDropTile = (0, _drag.DragSource)(DRAG_TYPE, tileSource, function (connect, monitor) {
296
- return {
297
- connectDragSource: connect.dragSource(),
298
- isDragging: monitor.isDragging()
299
- };
300
- })(DropTile);
301
- var _default = DragDropTile;
302
- exports["default"] = _default;
303
- //# sourceMappingURL=blank.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/blank.jsx"],"names":["log","DRAG_TYPE","useStyles","content","border","color","primary","minWidth","touchAction","overflow","chip","backgroundColor","background","text","fontSize","minHeight","height","maxWidth","position","chipLabel","whiteSpace","pointerEvents","display","padding","hidden","opacity","dragged","left","correct","incorrect","over","BlankContent","state","prevProps","rootRef","currentChoice","props","choice","prevChoice","JSON","stringify","setState","setTimeout","spanRef","offsetHeight","parent","childNodes","forEach","elem","Element","HTMLDocument","setAttribute","disabled","classes","isOver","dragItem","draggedLabel","value","label","ref","ReactDOM","findDOMNode","innerHTML","addDraggableFalseAttributes","undefined","React","Component","id","PropTypes","oneOfType","string","number","bool","duplicates","object","onChange","func","StyledBlankContent","connectedBlankContent","connectDragSource","connectDropTarget","tileTarget","drop","monitor","draggedItem","getItem","instanceId","dropped","canDrop","DropTile","connect","dropTarget","tileSource","canDrag","beginDrag","fromChoice","endDrag","dropResult","getDropResult","DragDropTile","dragSource","isDragging"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport debug from 'debug';\nimport { DragSource, DropTarget } from '@pie-lib/drag';\nimport { withStyles } from '@material-ui/core/styles';\nimport Chip from '@material-ui/core/Chip';\nimport classnames from 'classnames';\nimport { color } from '@pie-lib/render-ui';\nconst log = debug('pie-lib:mask-markup:blank');\nexport const DRAG_TYPE = 'MaskBlank';\n\nconst useStyles = withStyles(() => ({\n content: {\n border: `solid 0px ${color.primary()}`,\n minWidth: '200px',\n touchAction: 'none',\n overflow: 'hidden',\n },\n chip: {\n backgroundColor: color.background(),\n border: `1px solid ${color.text()}`,\n color: color.text(),\n minWidth: '90px',\n fontSize: 'inherit',\n minHeight: '32px',\n height: 'auto',\n maxWidth: '374px',\n position: 'relative',\n },\n chipLabel: {\n whiteSpace: 'pre-wrap',\n // Added for touch devices, for image content.\n // This will prevent the context menu from appearing and not allowing other interactions with the image.\n // If interactions with the image in the token will be requested we should handle only the context Menu.\n pointerEvents: 'none',\n '& img': {\n display: 'block',\n padding: '2px 0',\n },\n },\n hidden: {\n color: 'transparent',\n opacity: 0,\n },\n dragged: {\n position: 'absolute',\n left: 16,\n maxWidth: '60px',\n },\n correct: {\n border: `solid 1px ${color.correct()}`,\n },\n incorrect: {\n border: `solid 1px ${color.incorrect()}`,\n },\n over: {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n },\n}));\n\nexport class BlankContent extends React.Component {\n static propTypes = {\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n disabled: PropTypes.bool,\n duplicates: PropTypes.bool,\n choice: PropTypes.object,\n classes: PropTypes.object,\n isOver: PropTypes.bool,\n dragItem: PropTypes.object,\n correct: PropTypes.bool,\n onChange: PropTypes.func,\n };\n\n constructor() {\n super();\n this.state = {\n height: 0,\n };\n }\n\n componentDidUpdate(prevProps) {\n renderMath(this.rootRef);\n const { choice: currentChoice } = this.props;\n const { choice: prevChoice } = prevProps;\n\n if (JSON.stringify(currentChoice) !== JSON.stringify(prevChoice)) {\n if (!currentChoice) {\n this.setState({\n height: 0,\n });\n return;\n }\n setTimeout(() => {\n this.setState({\n height: this.spanRef.offsetHeight,\n });\n }, 300);\n }\n }\n\n addDraggableFalseAttributes(parent) {\n parent.childNodes.forEach((elem) => {\n if (elem instanceof Element || elem instanceof HTMLDocument) {\n elem.setAttribute('draggable', false);\n }\n });\n }\n\n render() {\n const { disabled, choice, classes, isOver, dragItem, correct } = this.props;\n const draggedLabel = dragItem && isOver && dragItem.choice.value;\n const label = choice && choice.value;\n\n return (\n // 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.\n <Chip\n clickable={false}\n disabled={true}\n ref={(ref) => {\n //eslint-disable-next-line\n this.rootRef = ReactDOM.findDOMNode(ref);\n }}\n component=\"span\"\n label={\n <React.Fragment>\n <span\n className={classnames(classes.chipLabel, isOver && classes.over, {\n [classes.hidden]: draggedLabel,\n })}\n ref={(ref) => {\n if (ref) {\n //eslint-disable-next-line\n this.spanRef = ReactDOM.findDOMNode(ref);\n ref.innerHTML = label || '';\n this.addDraggableFalseAttributes(ref);\n }\n }}\n >\n {' '}\n </span>\n {draggedLabel && (\n <span\n className={classnames(classes.chipLabel, isOver && classes.over, classes.dragged)}\n ref={(ref) => {\n if (ref) {\n //eslint-disable-next-line\n this.spanRef = ReactDOM.findDOMNode(ref);\n ref.innerHTML = draggedLabel || '';\n this.addDraggableFalseAttributes(ref);\n }\n }}\n >\n {' '}\n </span>\n )}\n </React.Fragment>\n }\n className={classnames(classes.chip, isOver && classes.over, {\n [classes.correct]: correct !== undefined && correct,\n [classes.incorrect]: correct !== undefined && !correct,\n })}\n variant={disabled ? 'outlined' : undefined}\n style={{\n ...(this.state.height ? { height: this.state.height } : {}),\n }}\n classes={{\n label: isOver && classes.over,\n }}\n />\n );\n }\n}\n\nconst StyledBlankContent = useStyles(BlankContent);\n\nconst connectedBlankContent = useStyles(({ connectDragSource, connectDropTarget, ...props }) => {\n const { classes, isOver } = props;\n\n return connectDropTarget(\n connectDragSource(\n <span className={classnames(classes.content, isOver && classes.over)}>\n <StyledBlankContent {...props} />\n </span>,\n ),\n );\n});\n\nconst tileTarget = {\n drop(props, monitor) {\n const draggedItem = monitor.getItem();\n\n log('props.instanceId', props.instanceId, 'draggedItem.instanceId:', draggedItem.instanceId);\n\n if (draggedItem.id !== props.id) {\n props.onChange(props.id, draggedItem.choice.id);\n }\n\n return {\n dropped: draggedItem.id !== props.id,\n };\n },\n canDrop(props, monitor) {\n const draggedItem = monitor.getItem();\n\n return draggedItem.instanceId === props.instanceId;\n },\n};\n\nconst DropTile = DropTarget(DRAG_TYPE, tileTarget, (connect, monitor) => ({\n connectDropTarget: connect.dropTarget(),\n isOver: monitor.isOver(),\n dragItem: monitor.getItem(),\n}))(connectedBlankContent);\n\nconst tileSource = {\n canDrag(props) {\n return !props.disabled && !!props.choice;\n },\n beginDrag(props) {\n return {\n id: props.id,\n choice: props.choice,\n instanceId: props.instanceId,\n fromChoice: true,\n };\n },\n endDrag(props, monitor) {\n // this will be null if it did not drop\n const dropResult = monitor.getDropResult();\n\n if (!dropResult || (dropResult.dropped && !props.duplicates)) {\n const draggedItem = monitor.getItem();\n\n if (draggedItem.fromChoice) {\n props.onChange(props.id, undefined);\n }\n }\n },\n};\n\nconst DragDropTile = DragSource(DRAG_TYPE, tileSource, (connect, monitor) => ({\n connectDragSource: connect.dragSource(),\n isDragging: monitor.isDragging(),\n}))(DropTile);\n\nexport default DragDropTile;\n"],"file":"blank.js"}
@@ -1,113 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = void 0;
9
-
10
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
-
12
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
-
14
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
15
-
16
- var _react = _interopRequireDefault(require("react"));
17
-
18
- var _OutlinedInput = _interopRequireDefault(require("@material-ui/core/OutlinedInput"));
19
-
20
- var _classnames3 = _interopRequireDefault(require("classnames"));
21
-
22
- var _styles = require("@material-ui/core/styles");
23
-
24
- var _renderUi = require("@pie-lib/render-ui");
25
-
26
- var _excluded = ["correct", "charactersLimit", "classes", "disabled", "isBox", "isConstructedResponse", "width", "spellCheck"];
27
-
28
- var correctStyle = function correctStyle(color) {
29
- return {
30
- borderColor: "".concat(color, " !important")
31
- };
32
- };
33
-
34
- var _default = (0, _styles.withStyles)(function () {
35
- return {
36
- input: {
37
- color: _renderUi.color.text(),
38
- backgroundColor: _renderUi.color.background(),
39
- borderRadius: '4px !important',
40
- borderWidth: '1px',
41
- borderStyle: 'solid',
42
- padding: '10px 20px 10px 10px',
43
- '&:disabled': {
44
- opacity: 0.8,
45
- cursor: 'not-allowed !important'
46
- },
47
- '&:hover': {
48
- borderColor: _renderUi.color.primary(),
49
- '&:disabled': {
50
- borderColor: 'initial'
51
- }
52
- },
53
- '&:focus': {
54
- borderColor: _renderUi.color.primaryDark()
55
- }
56
- },
57
- crInput: {
58
- padding: '8px !important'
59
- },
60
- correct: correctStyle(_renderUi.color.correct()),
61
- incorrect: correctStyle(_renderUi.color.incorrect()),
62
- box: {
63
- fontSize: 'inherit'
64
- },
65
- outlinedInput: {
66
- padding: '2px',
67
- borderRadius: '4px',
68
- '& fieldset': {
69
- border: 0
70
- }
71
- },
72
- notchedOutline: {
73
- borderColor: _renderUi.color.correct()
74
- }
75
- };
76
- })(function (props) {
77
- var _classnames, _classnames2;
78
-
79
- var correct = props.correct,
80
- charactersLimit = props.charactersLimit,
81
- classes = props.classes,
82
- disabled = props.disabled,
83
- isBox = props.isBox,
84
- isConstructedResponse = props.isConstructedResponse,
85
- width = props.width,
86
- spellCheck = props.spellCheck,
87
- rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
88
- var label = typeof correct === 'boolean' ? correct ? 'correct' : 'incorrect' : undefined;
89
- var inputProps = charactersLimit ? {
90
- maxLength: charactersLimit
91
- } : {};
92
-
93
- if (width) {
94
- inputProps.style = {
95
- width: "".concat(width + Math.round(width / 10) + 1, "ch") // added some extra space for capital letters
96
-
97
- };
98
- }
99
-
100
- return /*#__PURE__*/_react["default"].createElement(_OutlinedInput["default"], (0, _extends2["default"])({
101
- className: (0, _classnames3["default"])((_classnames = {}, (0, _defineProperty2["default"])(_classnames, classes.disabledInput, disabled), (0, _defineProperty2["default"])(_classnames, classes.box, isBox), (0, _defineProperty2["default"])(_classnames, classes.outlinedInput, true), _classnames)),
102
- classes: {
103
- input: (0, _classnames3["default"])((_classnames2 = {}, (0, _defineProperty2["default"])(_classnames2, classes.input, true), (0, _defineProperty2["default"])(_classnames2, classes[label], label), (0, _defineProperty2["default"])(_classnames2, classes.crInput, isConstructedResponse), _classnames2))
104
- },
105
- inputProps: inputProps,
106
- labelWidth: 0,
107
- disabled: disabled,
108
- spellCheck: spellCheck
109
- }, rest));
110
- });
111
-
112
- exports["default"] = _default;
113
- //# sourceMappingURL=correct-input.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/correct-input.jsx"],"names":["correctStyle","color","borderColor","input","text","backgroundColor","background","borderRadius","borderWidth","borderStyle","padding","opacity","cursor","primary","primaryDark","crInput","correct","incorrect","box","fontSize","outlinedInput","border","notchedOutline","props","charactersLimit","classes","disabled","isBox","isConstructedResponse","width","spellCheck","rest","label","undefined","inputProps","maxLength","style","Math","round","disabledInput"],"mappings":"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","sourcesContent":["import React from 'react';\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\nimport classnames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/render-ui';\n\nconst correctStyle = (color) => ({\n borderColor: `${color} !important`,\n});\n\nexport default withStyles(() => ({\n input: {\n color: color.text(),\n backgroundColor: color.background(),\n borderRadius: '4px !important',\n borderWidth: '1px',\n borderStyle: 'solid',\n padding: '10px 20px 10px 10px',\n '&:disabled': {\n opacity: 0.8,\n cursor: 'not-allowed !important',\n },\n '&:hover': {\n borderColor: color.primary(),\n '&:disabled': {\n borderColor: 'initial',\n },\n },\n '&:focus': {\n borderColor: color.primaryDark(),\n },\n },\n crInput: {\n padding: '8px !important',\n },\n correct: correctStyle(color.correct()),\n incorrect: correctStyle(color.incorrect()),\n box: {\n fontSize: 'inherit',\n },\n outlinedInput: {\n padding: '2px',\n borderRadius: '4px',\n '& fieldset': {\n border: 0,\n },\n },\n notchedOutline: {\n borderColor: color.correct(),\n },\n}))((props) => {\n const {\n correct,\n charactersLimit,\n classes,\n disabled,\n isBox,\n isConstructedResponse,\n width,\n spellCheck,\n ...rest\n } = props;\n const label = typeof correct === 'boolean' ? (correct ? 'correct' : 'incorrect') : undefined;\n const inputProps = charactersLimit ? { maxLength: charactersLimit } : {};\n\n if (width) {\n inputProps.style = {\n width: `${width + Math.round(width / 10) + 1}ch`, // added some extra space for capital letters\n };\n }\n\n return (\n <OutlinedInput\n className={classnames({\n [classes.disabledInput]: disabled,\n [classes.box]: isBox,\n [classes.outlinedInput]: true,\n })}\n classes={{\n input: classnames({\n [classes.input]: true,\n [classes[label]]: label,\n [classes.crInput]: isConstructedResponse,\n }),\n }}\n inputProps={inputProps}\n labelWidth={0}\n disabled={disabled}\n spellCheck={spellCheck}\n {...rest}\n />\n );\n});\n"],"file":"correct-input.js"}