@pie-lib/mask-markup 1.13.47-next.1 → 1.14.0-beta.2
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.
- package/CHANGELOG.md +22 -47
- package/NEXT.CHANGELOG.json +1 -0
- package/package.json +9 -5
- package/src/__tests__/__snapshots__/drag-in-the-blank.test.js.snap +316 -0
- package/src/__tests__/__snapshots__/mask.test.js.snap +55 -0
- package/src/__tests__/__snapshots__/with-mask.test.js.snap +62 -0
- package/src/__tests__/drag-in-the-blank.test.js +71 -0
- package/src/__tests__/index.test.js +39 -0
- package/src/__tests__/mask.test.js +152 -0
- package/src/__tests__/serialization.test.js +54 -0
- package/src/__tests__/utils.js +1 -0
- package/src/__tests__/with-mask.test.js +51 -0
- package/src/choices/__tests__/__snapshots__/index.test.js.snap +209 -0
- package/src/choices/__tests__/index.test.js +62 -0
- package/src/choices/choice.jsx +60 -6
- package/src/choices/index.jsx +2 -2
- package/src/components/__tests__/__snapshots__/blank.test.js.snap +111 -0
- package/src/components/__tests__/__snapshots__/correct-input.test.js.snap +64 -0
- package/src/components/__tests__/__snapshots__/dropdown.test.js.snap +133 -0
- package/src/components/__tests__/__snapshots__/input.test.js.snap +34 -0
- package/src/components/__tests__/blank.test.js +202 -0
- package/src/components/__tests__/correct-input.test.js +49 -0
- package/src/components/__tests__/dropdown.test.js +51 -0
- package/src/components/__tests__/input.test.js +50 -0
- package/src/components/blank.jsx +139 -28
- package/src/components/correct-input.jsx +6 -1
- package/src/components/dropdown.jsx +192 -71
- package/src/constructed-response.jsx +76 -18
- package/src/customizable.jsx +35 -0
- package/src/drag-in-the-blank.jsx +26 -3
- package/src/index.js +10 -1
- package/src/inline-dropdown.jsx +2 -0
- package/src/mask.jsx +30 -5
- package/src/with-mask.jsx +39 -2
- package/README.md +0 -14
- package/lib/choices/choice.js +0 -158
- package/lib/choices/choice.js.map +0 -1
- package/lib/choices/index.js +0 -127
- package/lib/choices/index.js.map +0 -1
- package/lib/componentize.js +0 -25
- package/lib/componentize.js.map +0 -1
- package/lib/components/blank.js +0 -303
- package/lib/components/blank.js.map +0 -1
- package/lib/components/correct-input.js +0 -113
- package/lib/components/correct-input.js.map +0 -1
- package/lib/components/dropdown.js +0 -216
- package/lib/components/dropdown.js.map +0 -1
- package/lib/components/input.js +0 -57
- package/lib/components/input.js.map +0 -1
- package/lib/constructed-response.js +0 -52
- package/lib/constructed-response.js.map +0 -1
- package/lib/drag-in-the-blank.js +0 -191
- package/lib/drag-in-the-blank.js.map +0 -1
- package/lib/index.js +0 -54
- package/lib/index.js.map +0 -1
- package/lib/inline-dropdown.js +0 -46
- package/lib/inline-dropdown.js.map +0 -1
- package/lib/mask.js +0 -215
- package/lib/mask.js.map +0 -1
- package/lib/serialization.js +0 -207
- package/lib/serialization.js.map +0 -1
- package/lib/with-mask.js +0 -93
- package/lib/with-mask.js.map +0 -1
package/lib/components/blank.js
DELETED
|
@@ -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"}
|