@pie-lib/mask-markup 1.14.0-beta.2 → 1.14.0-beta.4
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 +40 -0
- package/lib/choices/choice.js +221 -0
- package/lib/choices/choice.js.map +1 -0
- package/lib/choices/index.js +135 -0
- package/lib/choices/index.js.map +1 -0
- package/lib/componentize.js +25 -0
- package/lib/componentize.js.map +1 -0
- package/lib/components/blank.js +415 -0
- package/lib/components/blank.js.map +1 -0
- package/lib/components/correct-input.js +118 -0
- package/lib/components/correct-input.js.map +1 -0
- package/lib/components/dropdown.js +349 -0
- package/lib/components/dropdown.js.map +1 -0
- package/lib/components/input.js +57 -0
- package/lib/components/input.js.map +1 -0
- package/lib/constructed-response.js +116 -0
- package/lib/constructed-response.js.map +1 -0
- package/lib/customizable.js +48 -0
- package/lib/customizable.js.map +1 -0
- package/lib/drag-in-the-blank.js +217 -0
- package/lib/drag-in-the-blank.js.map +1 -0
- package/lib/index.js +62 -0
- package/lib/index.js.map +1 -0
- package/lib/inline-dropdown.js +48 -0
- package/lib/inline-dropdown.js.map +1 -0
- package/lib/mask.js +254 -0
- package/lib/mask.js.map +1 -0
- package/lib/serialization.js +207 -0
- package/lib/serialization.js.map +1 -0
- package/lib/with-mask.js +125 -0
- package/lib/with-mask.js.map +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,217 @@
|
|
|
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 _mathRendering = require("@pie-lib/math-rendering");
|
|
29
|
+
|
|
30
|
+
var _choices = _interopRequireDefault(require("./choices"));
|
|
31
|
+
|
|
32
|
+
var _blank = _interopRequireDefault(require("./components/blank"));
|
|
33
|
+
|
|
34
|
+
var _withMask = require("./with-mask");
|
|
35
|
+
|
|
36
|
+
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; }
|
|
37
|
+
|
|
38
|
+
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; }
|
|
39
|
+
|
|
40
|
+
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); }; }
|
|
41
|
+
|
|
42
|
+
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; } }
|
|
43
|
+
|
|
44
|
+
// eslint-disable-next-line react/display-name
|
|
45
|
+
var Masked = (0, _withMask.withMask)('blank', function (props) {
|
|
46
|
+
return function (node, data, onChange) {
|
|
47
|
+
var dataset = node.data ? node.data.dataset || {} : {};
|
|
48
|
+
|
|
49
|
+
if (dataset.component === 'blank') {
|
|
50
|
+
// eslint-disable-next-line react/prop-types
|
|
51
|
+
var disabled = props.disabled,
|
|
52
|
+
duplicates = props.duplicates,
|
|
53
|
+
correctResponse = props.correctResponse,
|
|
54
|
+
feedback = props.feedback,
|
|
55
|
+
showCorrectAnswer = props.showCorrectAnswer,
|
|
56
|
+
emptyResponseAreaWidth = props.emptyResponseAreaWidth,
|
|
57
|
+
emptyResponseAreaHeight = props.emptyResponseAreaHeight;
|
|
58
|
+
var choiceId = showCorrectAnswer ? correctResponse[dataset.id] : data[dataset.id]; // eslint-disable-next-line react/prop-types
|
|
59
|
+
|
|
60
|
+
var choice = choiceId && props.choices.find(function (c) {
|
|
61
|
+
return c.id === choiceId;
|
|
62
|
+
});
|
|
63
|
+
return /*#__PURE__*/_react["default"].createElement(_blank["default"], {
|
|
64
|
+
key: "".concat(node.type, "-").concat(dataset.id),
|
|
65
|
+
correct: showCorrectAnswer || feedback && feedback[dataset.id],
|
|
66
|
+
disabled: disabled,
|
|
67
|
+
duplicates: duplicates,
|
|
68
|
+
choice: choice,
|
|
69
|
+
id: dataset.id,
|
|
70
|
+
emptyResponseAreaWidth: emptyResponseAreaWidth,
|
|
71
|
+
emptyResponseAreaHeight: emptyResponseAreaHeight,
|
|
72
|
+
onChange: onChange
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
});
|
|
77
|
+
|
|
78
|
+
var DragInTheBlank = /*#__PURE__*/function (_React$Component) {
|
|
79
|
+
(0, _inherits2["default"])(DragInTheBlank, _React$Component);
|
|
80
|
+
|
|
81
|
+
var _super = _createSuper(DragInTheBlank);
|
|
82
|
+
|
|
83
|
+
function DragInTheBlank() {
|
|
84
|
+
var _this;
|
|
85
|
+
|
|
86
|
+
(0, _classCallCheck2["default"])(this, DragInTheBlank);
|
|
87
|
+
|
|
88
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
89
|
+
args[_key] = arguments[_key];
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
93
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getPositionDirection", function (choicePosition) {
|
|
94
|
+
var flexDirection;
|
|
95
|
+
var justifyContent;
|
|
96
|
+
var alignItems;
|
|
97
|
+
|
|
98
|
+
switch (choicePosition) {
|
|
99
|
+
case 'left':
|
|
100
|
+
flexDirection = 'row';
|
|
101
|
+
alignItems = 'center';
|
|
102
|
+
break;
|
|
103
|
+
|
|
104
|
+
case 'right':
|
|
105
|
+
flexDirection = 'row-reverse';
|
|
106
|
+
justifyContent = 'flex-end';
|
|
107
|
+
alignItems = 'center';
|
|
108
|
+
break;
|
|
109
|
+
|
|
110
|
+
case 'below':
|
|
111
|
+
flexDirection = 'column-reverse';
|
|
112
|
+
break;
|
|
113
|
+
|
|
114
|
+
default:
|
|
115
|
+
// above
|
|
116
|
+
flexDirection = 'column';
|
|
117
|
+
break;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
return {
|
|
121
|
+
flexDirection: flexDirection,
|
|
122
|
+
justifyContent: justifyContent,
|
|
123
|
+
alignItems: alignItems
|
|
124
|
+
};
|
|
125
|
+
});
|
|
126
|
+
return _this;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
(0, _createClass2["default"])(DragInTheBlank, [{
|
|
130
|
+
key: "UNSAFE_componentWillReceiveProps",
|
|
131
|
+
value: function UNSAFE_componentWillReceiveProps() {
|
|
132
|
+
if (this.rootRef) {
|
|
133
|
+
(0, _mathRendering.renderMath)(this.rootRef);
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
}, {
|
|
137
|
+
key: "componentDidUpdate",
|
|
138
|
+
value: function componentDidUpdate() {
|
|
139
|
+
(0, _mathRendering.renderMath)(this.rootRef);
|
|
140
|
+
}
|
|
141
|
+
}, {
|
|
142
|
+
key: "render",
|
|
143
|
+
value: function render() {
|
|
144
|
+
var _this2 = this;
|
|
145
|
+
|
|
146
|
+
var _this$props = this.props,
|
|
147
|
+
markup = _this$props.markup,
|
|
148
|
+
duplicates = _this$props.duplicates,
|
|
149
|
+
layout = _this$props.layout,
|
|
150
|
+
value = _this$props.value,
|
|
151
|
+
onChange = _this$props.onChange,
|
|
152
|
+
choicesPosition = _this$props.choicesPosition,
|
|
153
|
+
choices = _this$props.choices,
|
|
154
|
+
correctResponse = _this$props.correctResponse,
|
|
155
|
+
disabled = _this$props.disabled,
|
|
156
|
+
feedback = _this$props.feedback,
|
|
157
|
+
showCorrectAnswer = _this$props.showCorrectAnswer,
|
|
158
|
+
emptyResponseAreaWidth = _this$props.emptyResponseAreaWidth,
|
|
159
|
+
emptyResponseAreaHeight = _this$props.emptyResponseAreaHeight;
|
|
160
|
+
var choicePosition = choicesPosition || 'below';
|
|
161
|
+
|
|
162
|
+
var style = _objectSpread({
|
|
163
|
+
display: 'flex',
|
|
164
|
+
minWidth: '100px'
|
|
165
|
+
}, this.getPositionDirection(choicePosition));
|
|
166
|
+
|
|
167
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
168
|
+
ref: function ref(_ref) {
|
|
169
|
+
return _ref && (_this2.rootRef = _ref);
|
|
170
|
+
},
|
|
171
|
+
style: style
|
|
172
|
+
}, /*#__PURE__*/_react["default"].createElement(_choices["default"], {
|
|
173
|
+
choicePosition: choicePosition,
|
|
174
|
+
duplicates: duplicates,
|
|
175
|
+
choices: choices,
|
|
176
|
+
value: value,
|
|
177
|
+
disabled: disabled
|
|
178
|
+
}), /*#__PURE__*/_react["default"].createElement(Masked, {
|
|
179
|
+
elementType: 'drag-in-the-blank',
|
|
180
|
+
markup: markup,
|
|
181
|
+
layout: layout,
|
|
182
|
+
value: value,
|
|
183
|
+
choices: choices,
|
|
184
|
+
onChange: onChange,
|
|
185
|
+
disabled: disabled,
|
|
186
|
+
duplicates: duplicates,
|
|
187
|
+
feedback: feedback,
|
|
188
|
+
correctResponse: correctResponse,
|
|
189
|
+
showCorrectAnswer: showCorrectAnswer,
|
|
190
|
+
emptyResponseAreaWidth: emptyResponseAreaWidth,
|
|
191
|
+
emptyResponseAreaHeight: emptyResponseAreaHeight
|
|
192
|
+
}));
|
|
193
|
+
}
|
|
194
|
+
}]);
|
|
195
|
+
return DragInTheBlank;
|
|
196
|
+
}(_react["default"].Component);
|
|
197
|
+
|
|
198
|
+
exports["default"] = DragInTheBlank;
|
|
199
|
+
(0, _defineProperty2["default"])(DragInTheBlank, "propTypes", {
|
|
200
|
+
markup: _propTypes["default"].string,
|
|
201
|
+
layout: _propTypes["default"].object,
|
|
202
|
+
choicesPosition: _propTypes["default"].string,
|
|
203
|
+
choices: _propTypes["default"].arrayOf(_propTypes["default"].shape({
|
|
204
|
+
label: _propTypes["default"].string,
|
|
205
|
+
value: _propTypes["default"].string
|
|
206
|
+
})),
|
|
207
|
+
value: _propTypes["default"].object,
|
|
208
|
+
onChange: _propTypes["default"].func,
|
|
209
|
+
duplicates: _propTypes["default"].bool,
|
|
210
|
+
disabled: _propTypes["default"].bool,
|
|
211
|
+
feedback: _propTypes["default"].object,
|
|
212
|
+
correctResponse: _propTypes["default"].object,
|
|
213
|
+
showCorrectAnswer: _propTypes["default"].bool,
|
|
214
|
+
emptyResponseAreaWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
|
|
215
|
+
emptyResponseAreaHeight: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
|
|
216
|
+
});
|
|
217
|
+
//# sourceMappingURL=drag-in-the-blank.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/drag-in-the-blank.jsx"],"names":["Masked","props","node","data","onChange","dataset","component","disabled","duplicates","correctResponse","feedback","showCorrectAnswer","emptyResponseAreaWidth","emptyResponseAreaHeight","choiceId","id","choice","choices","find","c","type","DragInTheBlank","choicePosition","flexDirection","justifyContent","alignItems","rootRef","markup","layout","value","choicesPosition","style","display","minWidth","getPositionDirection","ref","React","Component","PropTypes","string","object","arrayOf","shape","label","func","bool","oneOfType","number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport Choices from './choices';\nimport Blank from './components/blank';\nimport { withMask } from './with-mask';\n\n// eslint-disable-next-line react/display-name\nconst Masked = withMask('blank', (props) => (node, data, onChange) => {\n const dataset = node.data ? node.data.dataset || {} : {};\n if (dataset.component === 'blank') {\n // eslint-disable-next-line react/prop-types\n const {\n disabled,\n duplicates,\n correctResponse,\n feedback,\n showCorrectAnswer,\n emptyResponseAreaWidth,\n emptyResponseAreaHeight,\n } = props;\n const choiceId = showCorrectAnswer ? correctResponse[dataset.id] : data[dataset.id];\n // eslint-disable-next-line react/prop-types\n const choice = choiceId && props.choices.find((c) => c.id === choiceId);\n\n return (\n <Blank\n key={`${node.type}-${dataset.id}`}\n correct={showCorrectAnswer || (feedback && feedback[dataset.id])}\n disabled={disabled}\n duplicates={duplicates}\n choice={choice}\n id={dataset.id}\n emptyResponseAreaWidth={emptyResponseAreaWidth}\n emptyResponseAreaHeight={emptyResponseAreaHeight}\n onChange={onChange}\n />\n );\n }\n});\n\nexport default class DragInTheBlank extends React.Component {\n static propTypes = {\n markup: PropTypes.string,\n layout: PropTypes.object,\n choicesPosition: PropTypes.string,\n choices: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.string })),\n value: PropTypes.object,\n onChange: PropTypes.func,\n duplicates: PropTypes.bool,\n disabled: PropTypes.bool,\n feedback: PropTypes.object,\n correctResponse: PropTypes.object,\n showCorrectAnswer: PropTypes.bool,\n emptyResponseAreaWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n emptyResponseAreaHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n };\n\n UNSAFE_componentWillReceiveProps() {\n if (this.rootRef) {\n renderMath(this.rootRef);\n }\n }\n\n componentDidUpdate() {\n renderMath(this.rootRef);\n }\n\n getPositionDirection = (choicePosition) => {\n let flexDirection;\n let justifyContent;\n let alignItems;\n\n switch (choicePosition) {\n case 'left':\n flexDirection = 'row';\n alignItems = 'center';\n break;\n case 'right':\n flexDirection = 'row-reverse';\n justifyContent = 'flex-end';\n alignItems = 'center';\n break;\n case 'below':\n flexDirection = 'column-reverse';\n break;\n default:\n // above\n flexDirection = 'column';\n break;\n }\n\n return { flexDirection, justifyContent, alignItems };\n };\n\n render() {\n const {\n markup,\n duplicates,\n layout,\n value,\n onChange,\n choicesPosition,\n choices,\n correctResponse,\n disabled,\n feedback,\n showCorrectAnswer,\n emptyResponseAreaWidth,\n emptyResponseAreaHeight,\n } = this.props;\n\n const choicePosition = choicesPosition || 'below';\n const style = {\n display: 'flex',\n minWidth: '100px',\n ...this.getPositionDirection(choicePosition),\n };\n\n return (\n <div ref={(ref) => ref && (this.rootRef = ref)} style={style}>\n <Choices\n choicePosition={choicePosition}\n duplicates={duplicates}\n choices={choices}\n value={value}\n disabled={disabled}\n />\n <Masked\n elementType={'drag-in-the-blank'}\n markup={markup}\n layout={layout}\n value={value}\n choices={choices}\n onChange={onChange}\n disabled={disabled}\n duplicates={duplicates}\n feedback={feedback}\n correctResponse={correctResponse}\n showCorrectAnswer={showCorrectAnswer}\n emptyResponseAreaWidth={emptyResponseAreaWidth}\n emptyResponseAreaHeight={emptyResponseAreaHeight}\n />\n </div>\n );\n }\n}\n"],"file":"drag-in-the-blank.js"}
|
package/lib/index.js
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
Object.defineProperty(exports, "ConstructedResponse", {
|
|
9
|
+
enumerable: true,
|
|
10
|
+
get: function get() {
|
|
11
|
+
return _constructedResponse["default"];
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
Object.defineProperty(exports, "Customizable", {
|
|
15
|
+
enumerable: true,
|
|
16
|
+
get: function get() {
|
|
17
|
+
return _customizable["default"];
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
Object.defineProperty(exports, "DragInTheBlank", {
|
|
21
|
+
enumerable: true,
|
|
22
|
+
get: function get() {
|
|
23
|
+
return _dragInTheBlank["default"];
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
Object.defineProperty(exports, "InlineDropdown", {
|
|
27
|
+
enumerable: true,
|
|
28
|
+
get: function get() {
|
|
29
|
+
return _inlineDropdown["default"];
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
Object.defineProperty(exports, "buildLayoutFromMarkup", {
|
|
33
|
+
enumerable: true,
|
|
34
|
+
get: function get() {
|
|
35
|
+
return _withMask.buildLayoutFromMarkup;
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
Object.defineProperty(exports, "componentize", {
|
|
39
|
+
enumerable: true,
|
|
40
|
+
get: function get() {
|
|
41
|
+
return _componentize["default"];
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
Object.defineProperty(exports, "withMask", {
|
|
45
|
+
enumerable: true,
|
|
46
|
+
get: function get() {
|
|
47
|
+
return _withMask.withMask;
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
var _withMask = require("./with-mask");
|
|
52
|
+
|
|
53
|
+
var _dragInTheBlank = _interopRequireDefault(require("./drag-in-the-blank"));
|
|
54
|
+
|
|
55
|
+
var _constructedResponse = _interopRequireDefault(require("./constructed-response"));
|
|
56
|
+
|
|
57
|
+
var _customizable = _interopRequireDefault(require("./customizable"));
|
|
58
|
+
|
|
59
|
+
var _inlineDropdown = _interopRequireDefault(require("./inline-dropdown"));
|
|
60
|
+
|
|
61
|
+
var _componentize = _interopRequireDefault(require("./componentize"));
|
|
62
|
+
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["import { withMask, buildLayoutFromMarkup } from './with-mask';\nimport DragInTheBlank from './drag-in-the-blank';\nimport ConstructedResponse from './constructed-response';\nimport Customizable from './customizable';\nimport InlineDropdown from './inline-dropdown';\nimport componentize from './componentize';\n\nexport {\n withMask,\n buildLayoutFromMarkup,\n DragInTheBlank,\n ConstructedResponse,\n InlineDropdown,\n componentize,\n Customizable,\n};\n"],"file":"index.js"}
|
|
@@ -0,0 +1,48 @@
|
|
|
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 _react = _interopRequireDefault(require("react"));
|
|
11
|
+
|
|
12
|
+
var _dropdown = _interopRequireDefault(require("./components/dropdown"));
|
|
13
|
+
|
|
14
|
+
var _withMask = require("./with-mask");
|
|
15
|
+
|
|
16
|
+
// eslint-disable-next-line react/display-name
|
|
17
|
+
var _default = (0, _withMask.withMask)('dropdown', function (props) {
|
|
18
|
+
return function (node, data, onChange) {
|
|
19
|
+
var dataset = node.data ? node.data.dataset || {} : {};
|
|
20
|
+
|
|
21
|
+
if (dataset.component === 'dropdown') {
|
|
22
|
+
// eslint-disable-next-line react/prop-types
|
|
23
|
+
var choices = props.choices,
|
|
24
|
+
disabled = props.disabled,
|
|
25
|
+
feedback = props.feedback,
|
|
26
|
+
showCorrectAnswer = props.showCorrectAnswer;
|
|
27
|
+
var correctAnswer = choices && choices[dataset.id] && choices[dataset.id].find(function (c) {
|
|
28
|
+
return c.correct;
|
|
29
|
+
});
|
|
30
|
+
var finalChoice = showCorrectAnswer ? correctAnswer && correctAnswer.value : data[dataset.id];
|
|
31
|
+
return /*#__PURE__*/_react["default"].createElement(_dropdown["default"], {
|
|
32
|
+
key: "".concat(node.type, "-dropdown-").concat(dataset.id),
|
|
33
|
+
correct: feedback && feedback[dataset.id] && feedback[dataset.id] === 'correct',
|
|
34
|
+
disabled: disabled || showCorrectAnswer,
|
|
35
|
+
value: finalChoice,
|
|
36
|
+
correctValue: showCorrectAnswer ? correctAnswer && correctAnswer.label : undefined,
|
|
37
|
+
id: dataset.id,
|
|
38
|
+
onChange: onChange,
|
|
39
|
+
choices: choices[dataset.id],
|
|
40
|
+
showCorrectAnswer: showCorrectAnswer,
|
|
41
|
+
singleQuery: Object.keys(choices).length == 1
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
exports["default"] = _default;
|
|
48
|
+
//# sourceMappingURL=inline-dropdown.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/inline-dropdown.jsx"],"names":["props","node","data","onChange","dataset","component","choices","disabled","feedback","showCorrectAnswer","correctAnswer","id","find","c","correct","finalChoice","value","type","label","undefined","Object","keys","length"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;eACe,wBAAS,UAAT,EAAqB,UAACA,KAAD;AAAA,SAAW,UAACC,IAAD,EAAOC,IAAP,EAAaC,QAAb,EAA0B;AACvE,QAAMC,OAAO,GAAGH,IAAI,CAACC,IAAL,GAAYD,IAAI,CAACC,IAAL,CAAUE,OAAV,IAAqB,EAAjC,GAAsC,EAAtD;;AACA,QAAIA,OAAO,CAACC,SAAR,KAAsB,UAA1B,EAAsC;AACpC;AACA,UAAQC,OAAR,GAA2DN,KAA3D,CAAQM,OAAR;AAAA,UAAiBC,QAAjB,GAA2DP,KAA3D,CAAiBO,QAAjB;AAAA,UAA2BC,QAA3B,GAA2DR,KAA3D,CAA2BQ,QAA3B;AAAA,UAAqCC,iBAArC,GAA2DT,KAA3D,CAAqCS,iBAArC;AACA,UAAMC,aAAa,GAAGJ,OAAO,IAAIA,OAAO,CAACF,OAAO,CAACO,EAAT,CAAlB,IAAkCL,OAAO,CAACF,OAAO,CAACO,EAAT,CAAP,CAAoBC,IAApB,CAAyB,UAACC,CAAD;AAAA,eAAOA,CAAC,CAACC,OAAT;AAAA,OAAzB,CAAxD;AACA,UAAMC,WAAW,GAAGN,iBAAiB,GAAGC,aAAa,IAAIA,aAAa,CAACM,KAAlC,GAA0Cd,IAAI,CAACE,OAAO,CAACO,EAAT,CAAnF;AAEA,0BACE,gCAAC,oBAAD;AACE,QAAA,GAAG,YAAKV,IAAI,CAACgB,IAAV,uBAA2Bb,OAAO,CAACO,EAAnC,CADL;AAEE,QAAA,OAAO,EAAEH,QAAQ,IAAIA,QAAQ,CAACJ,OAAO,CAACO,EAAT,CAApB,IAAoCH,QAAQ,CAACJ,OAAO,CAACO,EAAT,CAAR,KAAyB,SAFxE;AAGE,QAAA,QAAQ,EAAEJ,QAAQ,IAAIE,iBAHxB;AAIE,QAAA,KAAK,EAAEM,WAJT;AAKE,QAAA,YAAY,EAAEN,iBAAiB,GAAGC,aAAa,IAAIA,aAAa,CAACQ,KAAlC,GAA0CC,SAL3E;AAME,QAAA,EAAE,EAAEf,OAAO,CAACO,EANd;AAOE,QAAA,QAAQ,EAAER,QAPZ;AAQE,QAAA,OAAO,EAAEG,OAAO,CAACF,OAAO,CAACO,EAAT,CARlB;AASE,QAAA,iBAAiB,EAAEF,iBATrB;AAUE,QAAA,WAAW,EAAEW,MAAM,CAACC,IAAP,CAAYf,OAAZ,EAAqBgB,MAArB,IAA+B;AAV9C,QADF;AAcD;AACF,GAvBmC;AAAA,CAArB,C","sourcesContent":["import React from 'react';\nimport Dropdown from './components/dropdown';\nimport { withMask } from './with-mask';\n\n// eslint-disable-next-line react/display-name\nexport default withMask('dropdown', (props) => (node, data, onChange) => {\n const dataset = node.data ? node.data.dataset || {} : {};\n if (dataset.component === 'dropdown') {\n // eslint-disable-next-line react/prop-types\n const { choices, disabled, feedback, showCorrectAnswer } = props;\n const correctAnswer = choices && choices[dataset.id] && choices[dataset.id].find((c) => c.correct);\n const finalChoice = showCorrectAnswer ? correctAnswer && correctAnswer.value : data[dataset.id];\n\n return (\n <Dropdown\n key={`${node.type}-dropdown-${dataset.id}`}\n correct={feedback && feedback[dataset.id] && feedback[dataset.id] === 'correct'}\n disabled={disabled || showCorrectAnswer}\n value={finalChoice}\n correctValue={showCorrectAnswer ? correctAnswer && correctAnswer.label : undefined}\n id={dataset.id}\n onChange={onChange}\n choices={choices[dataset.id]}\n showCorrectAnswer={showCorrectAnswer}\n singleQuery={Object.keys(choices).length == 1}\n />\n );\n }\n});\n"],"file":"inline-dropdown.js"}
|
package/lib/mask.js
ADDED
|
@@ -0,0 +1,254 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.renderChildren = 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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
25
|
+
|
|
26
|
+
var _react = _interopRequireDefault(require("react"));
|
|
27
|
+
|
|
28
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
29
|
+
|
|
30
|
+
var _get = _interopRequireDefault(require("lodash/get"));
|
|
31
|
+
|
|
32
|
+
var _styles = require("@material-ui/core/styles");
|
|
33
|
+
|
|
34
|
+
var _serialization = require("./serialization");
|
|
35
|
+
|
|
36
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
37
|
+
|
|
38
|
+
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; }
|
|
39
|
+
|
|
40
|
+
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; }
|
|
41
|
+
|
|
42
|
+
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); }; }
|
|
43
|
+
|
|
44
|
+
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; } }
|
|
45
|
+
|
|
46
|
+
var Paragraph = (0, _styles.withStyles)(function (theme) {
|
|
47
|
+
return {
|
|
48
|
+
para: {
|
|
49
|
+
paddingTop: 2 * theme.spacing.unit,
|
|
50
|
+
paddingBottom: 2 * theme.spacing.unit
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
})(function (props) {
|
|
54
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
55
|
+
className: props.classes.para
|
|
56
|
+
}, props.children);
|
|
57
|
+
});
|
|
58
|
+
var Spacer = (0, _styles.withStyles)(function () {
|
|
59
|
+
return {
|
|
60
|
+
spacer: {
|
|
61
|
+
display: 'inline-block',
|
|
62
|
+
width: '.75em'
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
})(function (props) {
|
|
66
|
+
return /*#__PURE__*/_react["default"].createElement("span", {
|
|
67
|
+
className: props.classes.spacer
|
|
68
|
+
});
|
|
69
|
+
});
|
|
70
|
+
var restrictWhitespaceTypes = ['tbody', 'tr'];
|
|
71
|
+
|
|
72
|
+
var addText = function addText(parentNode, text) {
|
|
73
|
+
var isWhitespace = text.trim() === '';
|
|
74
|
+
var parentType = parentNode && parentNode.type;
|
|
75
|
+
|
|
76
|
+
if (isWhitespace && restrictWhitespaceTypes.includes(parentType)) {
|
|
77
|
+
return undefined;
|
|
78
|
+
} else {
|
|
79
|
+
return text;
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
var getMark = function getMark(n) {
|
|
84
|
+
var mark = n.leaves.find(function (leave) {
|
|
85
|
+
return (0, _get["default"])(leave, 'marks', []).length;
|
|
86
|
+
});
|
|
87
|
+
|
|
88
|
+
if (mark) {
|
|
89
|
+
return mark.marks[0];
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
return null;
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
var renderChildren = function renderChildren(layout, value, onChange, rootRenderChildren, parentNode, elementType) {
|
|
96
|
+
if (!value) {
|
|
97
|
+
return null;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
var children = [];
|
|
101
|
+
(layout.nodes || []).forEach(function (n, index) {
|
|
102
|
+
var key = n.type ? "".concat(n.type, "-").concat(index) : "".concat(index);
|
|
103
|
+
|
|
104
|
+
if (n.isMath) {
|
|
105
|
+
children.push( /*#__PURE__*/_react["default"].createElement("span", {
|
|
106
|
+
dangerouslySetInnerHTML: {
|
|
107
|
+
__html: "<math displaystyle=\"true\">".concat(n.nodes[0].innerHTML, "</math>")
|
|
108
|
+
}
|
|
109
|
+
}));
|
|
110
|
+
return children;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
if (rootRenderChildren) {
|
|
114
|
+
var c = rootRenderChildren(n, value, onChange);
|
|
115
|
+
|
|
116
|
+
if (c) {
|
|
117
|
+
children.push(c);
|
|
118
|
+
|
|
119
|
+
if ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.type) !== 'td' && elementType === 'drag-in-the-blank') {
|
|
120
|
+
children.push( /*#__PURE__*/_react["default"].createElement(Spacer, {
|
|
121
|
+
key: "spacer-".concat(index)
|
|
122
|
+
}));
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
return;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
if (n.object === 'text') {
|
|
130
|
+
var content = n.leaves.reduce(function (acc, l) {
|
|
131
|
+
var t = l.text;
|
|
132
|
+
var extraText = addText(parentNode, t);
|
|
133
|
+
return extraText ? acc + extraText : acc;
|
|
134
|
+
}, '');
|
|
135
|
+
var mark = getMark(n);
|
|
136
|
+
|
|
137
|
+
if (mark) {
|
|
138
|
+
var markKey;
|
|
139
|
+
|
|
140
|
+
for (markKey in _serialization.MARK_TAGS) {
|
|
141
|
+
if (_serialization.MARK_TAGS[markKey] === mark.type) {
|
|
142
|
+
var Tag = markKey;
|
|
143
|
+
children.push( /*#__PURE__*/_react["default"].createElement(Tag, {
|
|
144
|
+
key: key
|
|
145
|
+
}, content));
|
|
146
|
+
break;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
} else if (content.length > 0) {
|
|
150
|
+
children.push(content);
|
|
151
|
+
|
|
152
|
+
if ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.type) !== 'td' && elementType === 'drag-in-the-blank') {
|
|
153
|
+
children.push( /*#__PURE__*/_react["default"].createElement(Spacer, {
|
|
154
|
+
key: "spacer-".concat(index)
|
|
155
|
+
}));
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
} else {
|
|
159
|
+
var subNodes = renderChildren(n, value, onChange, rootRenderChildren, n, elementType);
|
|
160
|
+
|
|
161
|
+
if (n.type === 'p' || n.type === 'paragraph') {
|
|
162
|
+
children.push( /*#__PURE__*/_react["default"].createElement(Paragraph, {
|
|
163
|
+
key: key
|
|
164
|
+
}, subNodes));
|
|
165
|
+
} else {
|
|
166
|
+
var _Tag = n.type;
|
|
167
|
+
|
|
168
|
+
if (n.nodes && n.nodes.length > 0) {
|
|
169
|
+
children.push( /*#__PURE__*/_react["default"].createElement(_Tag, (0, _extends2["default"])({
|
|
170
|
+
key: key
|
|
171
|
+
}, n.data.attributes), subNodes));
|
|
172
|
+
} else {
|
|
173
|
+
children.push( /*#__PURE__*/_react["default"].createElement(_Tag, (0, _extends2["default"])({
|
|
174
|
+
key: key
|
|
175
|
+
}, n.data.attributes)));
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
});
|
|
180
|
+
return children;
|
|
181
|
+
};
|
|
182
|
+
|
|
183
|
+
exports.renderChildren = renderChildren;
|
|
184
|
+
var MaskContainer = (0, _styles.withStyles)(function () {
|
|
185
|
+
return {
|
|
186
|
+
main: {
|
|
187
|
+
display: 'initial'
|
|
188
|
+
},
|
|
189
|
+
tableStyle: {
|
|
190
|
+
'&:not(.MathJax) table': {
|
|
191
|
+
borderCollapse: 'collapse'
|
|
192
|
+
},
|
|
193
|
+
// align table content to left as per STAR requirement PD-3687
|
|
194
|
+
'&:not(.MathJax) table td, &:not(.MathJax) table th': {
|
|
195
|
+
padding: '8px 12px',
|
|
196
|
+
textAlign: 'left'
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
};
|
|
200
|
+
})(function (props) {
|
|
201
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
202
|
+
className: (0, _classnames["default"])(props.classes.main, props.classes.tableStyle)
|
|
203
|
+
}, props.children);
|
|
204
|
+
});
|
|
205
|
+
/**
|
|
206
|
+
* Renders a layout that uses the slate.js Value model structure.
|
|
207
|
+
*/
|
|
208
|
+
|
|
209
|
+
var Mask = /*#__PURE__*/function (_React$Component) {
|
|
210
|
+
(0, _inherits2["default"])(Mask, _React$Component);
|
|
211
|
+
|
|
212
|
+
var _super = _createSuper(Mask);
|
|
213
|
+
|
|
214
|
+
function Mask() {
|
|
215
|
+
var _this;
|
|
216
|
+
|
|
217
|
+
(0, _classCallCheck2["default"])(this, Mask);
|
|
218
|
+
|
|
219
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
220
|
+
args[_key] = arguments[_key];
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
224
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleChange", function (id, value) {
|
|
225
|
+
var data = _objectSpread(_objectSpread({}, _this.props.value), {}, (0, _defineProperty2["default"])({}, id, value));
|
|
226
|
+
|
|
227
|
+
_this.props.onChange(data);
|
|
228
|
+
});
|
|
229
|
+
return _this;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
(0, _createClass2["default"])(Mask, [{
|
|
233
|
+
key: "render",
|
|
234
|
+
value: function render() {
|
|
235
|
+
var _this$props = this.props,
|
|
236
|
+
value = _this$props.value,
|
|
237
|
+
layout = _this$props.layout,
|
|
238
|
+
elementType = _this$props.elementType;
|
|
239
|
+
var children = renderChildren(layout, value, this.handleChange, this.props.renderChildren, null, elementType);
|
|
240
|
+
return /*#__PURE__*/_react["default"].createElement(MaskContainer, null, children);
|
|
241
|
+
}
|
|
242
|
+
}]);
|
|
243
|
+
return Mask;
|
|
244
|
+
}(_react["default"].Component);
|
|
245
|
+
|
|
246
|
+
exports["default"] = Mask;
|
|
247
|
+
(0, _defineProperty2["default"])(Mask, "propTypes", {
|
|
248
|
+
renderChildren: _propTypes["default"].func,
|
|
249
|
+
layout: _propTypes["default"].object,
|
|
250
|
+
value: _propTypes["default"].object,
|
|
251
|
+
onChange: _propTypes["default"].func,
|
|
252
|
+
elementType: _propTypes["default"].string
|
|
253
|
+
});
|
|
254
|
+
//# sourceMappingURL=mask.js.map
|
package/lib/mask.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/mask.jsx"],"names":["Paragraph","theme","para","paddingTop","spacing","unit","paddingBottom","props","classes","children","Spacer","spacer","display","width","restrictWhitespaceTypes","addText","parentNode","text","isWhitespace","trim","parentType","type","includes","undefined","getMark","n","mark","leaves","find","leave","length","marks","renderChildren","layout","value","onChange","rootRenderChildren","elementType","nodes","forEach","index","key","isMath","push","__html","innerHTML","c","object","content","reduce","acc","l","t","extraText","markKey","MARK_TAGS","Tag","subNodes","data","attributes","MaskContainer","main","tableStyle","borderCollapse","padding","textAlign","Mask","id","handleChange","React","Component","PropTypes","func","string"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport get from 'lodash/get';\nimport { withStyles } from '@material-ui/core/styles';\nimport { MARK_TAGS } from './serialization';\nimport cx from 'classnames';\n\nconst Paragraph = withStyles((theme) => ({\n para: {\n paddingTop: 2 * theme.spacing.unit,\n paddingBottom: 2 * theme.spacing.unit,\n },\n}))((props) => <div className={props.classes.para}>{props.children}</div>);\n\nconst Spacer = withStyles(() => ({\n spacer: {\n display: 'inline-block',\n width: '.75em',\n },\n}))((props) => <span className={props.classes.spacer} />);\n\nconst restrictWhitespaceTypes = ['tbody', 'tr'];\n\nconst addText = (parentNode, text) => {\n const isWhitespace = text.trim() === '';\n const parentType = parentNode && parentNode.type;\n\n if (isWhitespace && restrictWhitespaceTypes.includes(parentType)) {\n return undefined;\n } else {\n return text;\n }\n};\n\nconst getMark = (n) => {\n const mark = n.leaves.find((leave) => get(leave, 'marks', []).length);\n\n if (mark) {\n return mark.marks[0];\n }\n\n return null;\n};\n\nexport const renderChildren = (layout, value, onChange, rootRenderChildren, parentNode, elementType) => {\n if (!value) {\n return null;\n }\n\n const children = [];\n\n (layout.nodes || []).forEach((n, index) => {\n const key = n.type ? `${n.type}-${index}` : `${index}`;\n\n if (n.isMath) {\n children.push(\n <span\n dangerouslySetInnerHTML={{\n __html: `<math displaystyle=\"true\">${n.nodes[0].innerHTML}</math>`,\n }}\n />,\n );\n return children;\n }\n\n if (rootRenderChildren) {\n const c = rootRenderChildren(n, value, onChange);\n if (c) {\n children.push(c);\n if (parentNode?.type !== 'td' && elementType === 'drag-in-the-blank') {\n children.push(<Spacer key={`spacer-${index}`} />);\n }\n return;\n }\n }\n\n if (n.object === 'text') {\n const content = n.leaves.reduce((acc, l) => {\n const t = l.text;\n const extraText = addText(parentNode, t);\n return extraText ? acc + extraText : acc;\n }, '');\n const mark = getMark(n);\n\n if (mark) {\n let markKey;\n\n for (markKey in MARK_TAGS) {\n if (MARK_TAGS[markKey] === mark.type) {\n const Tag = markKey;\n\n children.push(<Tag key={key}>{content}</Tag>);\n break;\n }\n }\n } else if (content.length > 0) {\n children.push(content);\n if (parentNode?.type !== 'td' && elementType === 'drag-in-the-blank') {\n children.push(<Spacer key={`spacer-${index}`} />);\n }\n }\n } else {\n const subNodes = renderChildren(n, value, onChange, rootRenderChildren, n, elementType);\n if (n.type === 'p' || n.type === 'paragraph') {\n children.push(<Paragraph key={key}>{subNodes}</Paragraph>);\n } else {\n const Tag = n.type;\n if (n.nodes && n.nodes.length > 0) {\n children.push(\n <Tag key={key} {...n.data.attributes}>\n {subNodes}\n </Tag>,\n );\n } else {\n children.push(<Tag key={key} {...n.data.attributes} />);\n }\n }\n }\n });\n return children;\n};\n\nconst MaskContainer = withStyles(() => ({\n main: {\n display: 'initial',\n },\n tableStyle: {\n '&:not(.MathJax) table': {\n borderCollapse: 'collapse',\n },\n // align table content to left as per STAR requirement PD-3687\n '&:not(.MathJax) table td, &:not(.MathJax) table th': {\n padding: '8px 12px',\n textAlign: 'left',\n },\n },\n}))((props) => <div className={cx(props.classes.main, props.classes.tableStyle)}>{props.children}</div>);\n\n/**\n * Renders a layout that uses the slate.js Value model structure.\n */\nexport default class Mask extends React.Component {\n static propTypes = {\n renderChildren: PropTypes.func,\n layout: PropTypes.object,\n value: PropTypes.object,\n onChange: PropTypes.func,\n elementType: PropTypes.string,\n };\n\n handleChange = (id, value) => {\n const data = { ...this.props.value, [id]: value };\n this.props.onChange(data);\n };\n\n render() {\n const { value, layout, elementType } = this.props;\n const children = renderChildren(layout, value, this.handleChange, this.props.renderChildren, null, elementType);\n\n return <MaskContainer>{children}</MaskContainer>;\n }\n}\n"],"file":"mask.js"}
|