@pie-lib/mask-markup 1.16.0 → 1.18.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.
- package/CHANGELOG.md +24 -52
- package/package.json +6 -5
- package/src/choices/choice.jsx +1 -1
- package/src/components/blank.jsx +1 -1
- package/src/components/correct-input.jsx +1 -1
- package/src/components/dropdown.jsx +1 -1
- package/src/constructed-response.jsx +1 -1
- package/lib/choices/choice.js +0 -221
- package/lib/choices/choice.js.map +0 -1
- package/lib/choices/index.js +0 -135
- 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 -415
- package/lib/components/blank.js.map +0 -1
- package/lib/components/correct-input.js +0 -118
- package/lib/components/correct-input.js.map +0 -1
- package/lib/components/dropdown.js +0 -484
- 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 -116
- package/lib/constructed-response.js.map +0 -1
- package/lib/customizable.js +0 -48
- package/lib/customizable.js.map +0 -1
- package/lib/drag-in-the-blank.js +0 -217
- package/lib/drag-in-the-blank.js.map +0 -1
- package/lib/index.js +0 -62
- package/lib/index.js.map +0 -1
- package/lib/inline-dropdown.js +0 -48
- package/lib/inline-dropdown.js.map +0 -1
- package/lib/mask.js +0 -254
- package/lib/mask.js.map +0 -1
- package/lib/serialization.js +0 -207
- package/lib/serialization.js.map +0 -1
- package/lib/shared/index.js +0 -136
- package/lib/with-mask.js +0 -125
- package/lib/with-mask.js.map +0 -1
|
@@ -1,116 +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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
-
|
|
12
|
-
var _react = _interopRequireDefault(require("react"));
|
|
13
|
-
|
|
14
|
-
var _styles = require("@material-ui/core/styles");
|
|
15
|
-
|
|
16
|
-
var _classnames2 = _interopRequireDefault(require("classnames"));
|
|
17
|
-
|
|
18
|
-
var _index = require("./shared/index");
|
|
19
|
-
|
|
20
|
-
var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
|
|
21
|
-
|
|
22
|
-
var _withMask = require("./with-mask");
|
|
23
|
-
|
|
24
|
-
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; }
|
|
25
|
-
|
|
26
|
-
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; }
|
|
27
|
-
|
|
28
|
-
var styles = function styles() {
|
|
29
|
-
return {
|
|
30
|
-
editableHtmlCustom: {
|
|
31
|
-
display: 'inline-block',
|
|
32
|
-
verticalAlign: 'middle',
|
|
33
|
-
margin: '4px',
|
|
34
|
-
borderRadius: '4px',
|
|
35
|
-
border: "1px solid ".concat(_index.color.black())
|
|
36
|
-
},
|
|
37
|
-
correct: {
|
|
38
|
-
border: "1px solid ".concat(_index.color.correct())
|
|
39
|
-
},
|
|
40
|
-
incorrect: {
|
|
41
|
-
border: "1px solid ".concat(_index.color.incorrect())
|
|
42
|
-
}
|
|
43
|
-
};
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
var MaskedInput = function MaskedInput(props) {
|
|
47
|
-
return function (node, data) {
|
|
48
|
-
var _node$data;
|
|
49
|
-
|
|
50
|
-
var adjustedLimit = props.adjustedLimit,
|
|
51
|
-
disabled = props.disabled,
|
|
52
|
-
feedback = props.feedback,
|
|
53
|
-
showCorrectAnswer = props.showCorrectAnswer,
|
|
54
|
-
maxLength = props.maxLength,
|
|
55
|
-
spellCheck = props.spellCheck,
|
|
56
|
-
classes = props.classes,
|
|
57
|
-
pluginProps = props.pluginProps,
|
|
58
|
-
onChange = props.onChange;
|
|
59
|
-
var dataset = ((_node$data = node.data) === null || _node$data === void 0 ? void 0 : _node$data.dataset) || {};
|
|
60
|
-
|
|
61
|
-
if (dataset.component === 'input') {
|
|
62
|
-
var _pluginProps$characte, _classnames;
|
|
63
|
-
|
|
64
|
-
var correctAnswer = (props.choices && dataset && props.choices[dataset.id] || [])[0];
|
|
65
|
-
var finalValue = showCorrectAnswer ? correctAnswer && correctAnswer.label : data[dataset.id] || '';
|
|
66
|
-
var width = maxLength && maxLength[dataset.id];
|
|
67
|
-
var feedbackStatus = feedback && feedback[dataset.id];
|
|
68
|
-
var isCorrect = showCorrectAnswer || feedbackStatus === 'correct';
|
|
69
|
-
var isIncorrect = !showCorrectAnswer && feedbackStatus === 'incorrect';
|
|
70
|
-
|
|
71
|
-
var handleInputChange = function handleInputChange(newValue) {
|
|
72
|
-
var updatedValue = _objectSpread(_objectSpread({}, data), {}, (0, _defineProperty2["default"])({}, dataset.id, newValue));
|
|
73
|
-
|
|
74
|
-
onChange(updatedValue);
|
|
75
|
-
};
|
|
76
|
-
|
|
77
|
-
var handleKeyDown = function handleKeyDown(event) {
|
|
78
|
-
// the keyCode value for the Enter/Return key is 13
|
|
79
|
-
if (event.key === 'Enter' || event.keyCode === 13) {
|
|
80
|
-
return false;
|
|
81
|
-
}
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
return /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
|
|
85
|
-
id: dataset.id,
|
|
86
|
-
key: "".concat(node.type, "-input-").concat(dataset.id),
|
|
87
|
-
disabled: showCorrectAnswer || disabled,
|
|
88
|
-
disableUnderline: true,
|
|
89
|
-
onChange: handleInputChange,
|
|
90
|
-
markup: finalValue || '',
|
|
91
|
-
charactersLimit: adjustedLimit ? width : 25,
|
|
92
|
-
activePlugins: ['languageCharacters'],
|
|
93
|
-
pluginProps: pluginProps,
|
|
94
|
-
languageCharactersProps: [{
|
|
95
|
-
language: 'spanish'
|
|
96
|
-
}],
|
|
97
|
-
spellCheck: spellCheck,
|
|
98
|
-
width: "calc(".concat(width, "em + 42px)") // added 42px for left and right padding of editable-html
|
|
99
|
-
,
|
|
100
|
-
onKeyDown: handleKeyDown,
|
|
101
|
-
autoWidthToolbar: true,
|
|
102
|
-
toolbarOpts: {
|
|
103
|
-
minWidth: 'auto',
|
|
104
|
-
noBorder: true,
|
|
105
|
-
isHidden: !!(pluginProps !== null && pluginProps !== void 0 && (_pluginProps$characte = pluginProps.characters) !== null && _pluginProps$characte !== void 0 && _pluginProps$characte.disabled)
|
|
106
|
-
},
|
|
107
|
-
className: (0, _classnames2["default"])(classes.editableHtmlCustom, (_classnames = {}, (0, _defineProperty2["default"])(_classnames, classes.correct, isCorrect), (0, _defineProperty2["default"])(_classnames, classes.incorrect, isIncorrect), _classnames))
|
|
108
|
-
});
|
|
109
|
-
}
|
|
110
|
-
};
|
|
111
|
-
};
|
|
112
|
-
|
|
113
|
-
var _default = (0, _styles.withStyles)(styles)((0, _withMask.withMask)('input', MaskedInput));
|
|
114
|
-
|
|
115
|
-
exports["default"] = _default;
|
|
116
|
-
//# sourceMappingURL=constructed-response.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/constructed-response.jsx"],"names":["styles","editableHtmlCustom","display","verticalAlign","margin","borderRadius","border","color","black","correct","incorrect","MaskedInput","props","node","data","adjustedLimit","disabled","feedback","showCorrectAnswer","maxLength","spellCheck","classes","pluginProps","onChange","dataset","component","correctAnswer","choices","id","finalValue","label","width","feedbackStatus","isCorrect","isIncorrect","handleInputChange","newValue","updatedValue","handleKeyDown","event","key","keyCode","type","language","minWidth","noBorder","isHidden","characters"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBC,IAAAA,kBAAkB,EAAE;AAClBC,MAAAA,OAAO,EAAE,cADS;AAElBC,MAAAA,aAAa,EAAE,QAFG;AAGlBC,MAAAA,MAAM,EAAE,KAHU;AAIlBC,MAAAA,YAAY,EAAE,KAJI;AAKlBC,MAAAA,MAAM,sBAAeC,aAAMC,KAAN,EAAf;AALY,KADA;AAQpBC,IAAAA,OAAO,EAAE;AACPH,MAAAA,MAAM,sBAAeC,aAAME,OAAN,EAAf;AADC,KARW;AAWpBC,IAAAA,SAAS,EAAE;AACTJ,MAAAA,MAAM,sBAAeC,aAAMG,SAAN,EAAf;AADG;AAXS,GAAP;AAAA,CAAf;;AAgBA,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACC,KAAD;AAAA,SAAW,UAACC,IAAD,EAAOC,IAAP,EAAgB;AAAA;;AAC7C,QACEC,aADF,GAUIH,KAVJ,CACEG,aADF;AAAA,QAEEC,QAFF,GAUIJ,KAVJ,CAEEI,QAFF;AAAA,QAGEC,QAHF,GAUIL,KAVJ,CAGEK,QAHF;AAAA,QAIEC,iBAJF,GAUIN,KAVJ,CAIEM,iBAJF;AAAA,QAKEC,SALF,GAUIP,KAVJ,CAKEO,SALF;AAAA,QAMEC,UANF,GAUIR,KAVJ,CAMEQ,UANF;AAAA,QAOEC,OAPF,GAUIT,KAVJ,CAOES,OAPF;AAAA,QAQEC,WARF,GAUIV,KAVJ,CAQEU,WARF;AAAA,QASEC,QATF,GAUIX,KAVJ,CASEW,QATF;AAWA,QAAMC,OAAO,GAAG,eAAAX,IAAI,CAACC,IAAL,0DAAWU,OAAX,KAAsB,EAAtC;;AAEA,QAAIA,OAAO,CAACC,SAAR,KAAsB,OAA1B,EAAmC;AAAA;;AACjC,UAAMC,aAAa,GAAG,CAAEd,KAAK,CAACe,OAAN,IAAiBH,OAAjB,IAA4BZ,KAAK,CAACe,OAAN,CAAcH,OAAO,CAACI,EAAtB,CAA7B,IAA2D,EAA5D,EAAgE,CAAhE,CAAtB;AACA,UAAMC,UAAU,GAAGX,iBAAiB,GAAGQ,aAAa,IAAIA,aAAa,CAACI,KAAlC,GAA0ChB,IAAI,CAACU,OAAO,CAACI,EAAT,CAAJ,IAAoB,EAAlG;AACA,UAAMG,KAAK,GAAGZ,SAAS,IAAIA,SAAS,CAACK,OAAO,CAACI,EAAT,CAApC;AACA,UAAMI,cAAc,GAAGf,QAAQ,IAAIA,QAAQ,CAACO,OAAO,CAACI,EAAT,CAA3C;AACA,UAAMK,SAAS,GAAGf,iBAAiB,IAAIc,cAAc,KAAK,SAA1D;AACA,UAAME,WAAW,GAAG,CAAChB,iBAAD,IAAsBc,cAAc,KAAK,WAA7D;;AAEA,UAAMG,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,QAAD,EAAc;AACtC,YAAMC,YAAY,mCACbvB,IADa,4CAEfU,OAAO,CAACI,EAFO,EAEFQ,QAFE,EAAlB;;AAIAb,QAAAA,QAAQ,CAACc,YAAD,CAAR;AACD,OAND;;AAQA,UAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAAW;AAC/B;AACA,YAAIA,KAAK,CAACC,GAAN,KAAc,OAAd,IAAyBD,KAAK,CAACE,OAAN,KAAkB,EAA/C,EAAmD;AACjD,iBAAO,KAAP;AACD;AACF,OALD;;AAOA,0BACE,gCAAC,wBAAD;AACE,QAAA,EAAE,EAAEjB,OAAO,CAACI,EADd;AAEE,QAAA,GAAG,YAAKf,IAAI,CAAC6B,IAAV,oBAAwBlB,OAAO,CAACI,EAAhC,CAFL;AAGE,QAAA,QAAQ,EAAEV,iBAAiB,IAAIF,QAHjC;AAIE,QAAA,gBAAgB,MAJlB;AAKE,QAAA,QAAQ,EAAEmB,iBALZ;AAME,QAAA,MAAM,EAAEN,UAAU,IAAI,EANxB;AAOE,QAAA,eAAe,EAAEd,aAAa,GAAGgB,KAAH,GAAW,EAP3C;AAQE,QAAA,aAAa,EAAE,CAAC,oBAAD,CARjB;AASE,QAAA,WAAW,EAAET,WATf;AAUE,QAAA,uBAAuB,EAAE,CAAC;AAAEqB,UAAAA,QAAQ,EAAE;AAAZ,SAAD,CAV3B;AAWE,QAAA,UAAU,EAAEvB,UAXd;AAYE,QAAA,KAAK,iBAAUW,KAAV,eAZP,CAYoC;AAZpC;AAaE,QAAA,SAAS,EAAEO,aAbb;AAcE,QAAA,gBAAgB,MAdlB;AAeE,QAAA,WAAW,EAAE;AACXM,UAAAA,QAAQ,EAAE,MADC;AAEXC,UAAAA,QAAQ,EAAE,IAFC;AAGXC,UAAAA,QAAQ,EAAE,CAAC,EAACxB,WAAD,aAACA,WAAD,wCAACA,WAAW,CAAEyB,UAAd,kDAAC,sBAAyB/B,QAA1B;AAHA,SAff;AAoBE,QAAA,SAAS,EAAE,6BAAWK,OAAO,CAACpB,kBAAnB,mEACRoB,OAAO,CAACZ,OADA,EACUwB,SADV,iDAERZ,OAAO,CAACX,SAFA,EAEYwB,WAFZ;AApBb,QADF;AA2BD;AACF,GAjEmB;AAAA,CAApB;;eAmEe,wBAAWlC,MAAX,EAAmB,wBAAS,OAAT,EAAkBW,WAAlB,CAAnB,C","sourcesContent":["import React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport classnames from 'classnames';\n\nimport { color } from '../../render-ui/src/index';\nimport EditableHtml from '@pie-lib/editable-html';\nimport { withMask } from './with-mask';\n\nconst styles = () => ({\n editableHtmlCustom: {\n display: 'inline-block',\n verticalAlign: 'middle',\n margin: '4px',\n borderRadius: '4px',\n border: `1px solid ${color.black()}`,\n },\n correct: {\n border: `1px solid ${color.correct()}`,\n },\n incorrect: {\n border: `1px solid ${color.incorrect()}`,\n },\n});\n\nconst MaskedInput = (props) => (node, data) => {\n const {\n adjustedLimit,\n disabled,\n feedback,\n showCorrectAnswer,\n maxLength,\n spellCheck,\n classes,\n pluginProps,\n onChange,\n } = props;\n const dataset = node.data?.dataset || {};\n\n if (dataset.component === 'input') {\n const correctAnswer = ((props.choices && dataset && props.choices[dataset.id]) || [])[0];\n const finalValue = showCorrectAnswer ? correctAnswer && correctAnswer.label : data[dataset.id] || '';\n const width = maxLength && maxLength[dataset.id];\n const feedbackStatus = feedback && feedback[dataset.id];\n const isCorrect = showCorrectAnswer || feedbackStatus === 'correct';\n const isIncorrect = !showCorrectAnswer && feedbackStatus === 'incorrect';\n\n const handleInputChange = (newValue) => {\n const updatedValue = {\n ...data,\n [dataset.id]: newValue,\n };\n onChange(updatedValue);\n };\n\n const handleKeyDown = (event) => {\n // the keyCode value for the Enter/Return key is 13\n if (event.key === 'Enter' || event.keyCode === 13) {\n return false;\n }\n };\n\n return (\n <EditableHtml\n id={dataset.id}\n key={`${node.type}-input-${dataset.id}`}\n disabled={showCorrectAnswer || disabled}\n disableUnderline\n onChange={handleInputChange}\n markup={finalValue || ''}\n charactersLimit={adjustedLimit ? width : 25}\n activePlugins={['languageCharacters']}\n pluginProps={pluginProps}\n languageCharactersProps={[{ language: 'spanish' }]}\n spellCheck={spellCheck}\n width={`calc(${width}em + 42px)`} // added 42px for left and right padding of editable-html\n onKeyDown={handleKeyDown}\n autoWidthToolbar\n toolbarOpts={{\n minWidth: 'auto',\n noBorder: true,\n isHidden: !!pluginProps?.characters?.disabled,\n }}\n className={classnames(classes.editableHtmlCustom, {\n [classes.correct]: isCorrect,\n [classes.incorrect]: isIncorrect,\n })}\n />\n );\n }\n};\n\nexport default withStyles(styles)(withMask('input', MaskedInput));\n"],"file":"constructed-response.js"}
|
package/lib/customizable.js
DELETED
|
@@ -1,48 +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 _react = _interopRequireDefault(require("react"));
|
|
11
|
-
|
|
12
|
-
var _withMask = require("./with-mask");
|
|
13
|
-
|
|
14
|
-
// import Input from './components/input';
|
|
15
|
-
// eslint-disable-next-line react/display-name
|
|
16
|
-
var _default = (0, _withMask.withMask)('input', function (props) {
|
|
17
|
-
return function (node, data, onChange) {
|
|
18
|
-
var dataset = node.data ? node.data.dataset || {} : {};
|
|
19
|
-
|
|
20
|
-
if (dataset.component === 'input') {
|
|
21
|
-
// eslint-disable-next-line react/prop-types
|
|
22
|
-
// const { adjustedLimit, disabled, feedback, showCorrectAnswer, maxLength, spellCheck } = props;
|
|
23
|
-
// the first answer is the correct one
|
|
24
|
-
// eslint-disable-next-line react/prop-types
|
|
25
|
-
// const correctAnswer = ((props.choices && dataset && props.choices[dataset.id]) || [])[0];
|
|
26
|
-
// const finalValue = showCorrectAnswer ? correctAnswer && correctAnswer.label : data[dataset.id] || '';
|
|
27
|
-
// const width = maxLength && maxLength[dataset.id];
|
|
28
|
-
return props.customMarkMarkupComponent(dataset.id); // return (
|
|
29
|
-
// <Input
|
|
30
|
-
// key={`${node.type}-input-${dataset.id}`}
|
|
31
|
-
// correct={feedback && feedback[dataset.id] && feedback[dataset.id] === 'correct'}
|
|
32
|
-
// disabled={showCorrectAnswer || disabled}
|
|
33
|
-
// value={finalValue}
|
|
34
|
-
// id={dataset.id}
|
|
35
|
-
// onChange={onChange}
|
|
36
|
-
// showCorrectAnswer={showCorrectAnswer}
|
|
37
|
-
// width={width}
|
|
38
|
-
// charactersLimit={adjustedLimit ? width : 25}
|
|
39
|
-
// isConstructedResponse={true}
|
|
40
|
-
// spellCheck={spellCheck}
|
|
41
|
-
// />
|
|
42
|
-
// );
|
|
43
|
-
}
|
|
44
|
-
};
|
|
45
|
-
});
|
|
46
|
-
|
|
47
|
-
exports["default"] = _default;
|
|
48
|
-
//# sourceMappingURL=customizable.js.map
|
package/lib/customizable.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/customizable.jsx"],"names":["props","node","data","onChange","dataset","component","customMarkMarkupComponent","id"],"mappings":";;;;;;;;;AAAA;;AAEA;;AADA;AAGA;eACe,wBAAS,OAAT,EAAkB,UAACA,KAAD;AAAA,SAAW,UAACC,IAAD,EAAOC,IAAP,EAAaC,QAAb,EAA0B;AACpE,QAAMC,OAAO,GAAGH,IAAI,CAACC,IAAL,GAAYD,IAAI,CAACC,IAAL,CAAUE,OAAV,IAAqB,EAAjC,GAAsC,EAAtD;;AACA,QAAIA,OAAO,CAACC,SAAR,KAAsB,OAA1B,EAAmC;AACjC;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA,aAAOL,KAAK,CAACM,yBAAN,CAAgCF,OAAO,CAACG,EAAxC,CAAP,CAViC,CAWjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACF,GA7BgC;AAAA,CAAlB,C","sourcesContent":["import React from 'react';\n// import Input from './components/input';\nimport { withMask } from './with-mask';\n\n// eslint-disable-next-line react/display-name\nexport default withMask('input', (props) => (node, data, onChange) => {\n const dataset = node.data ? node.data.dataset || {} : {};\n if (dataset.component === 'input') {\n // eslint-disable-next-line react/prop-types\n // const { adjustedLimit, disabled, feedback, showCorrectAnswer, maxLength, spellCheck } = props;\n\n // the first answer is the correct one\n // eslint-disable-next-line react/prop-types\n // const correctAnswer = ((props.choices && dataset && props.choices[dataset.id]) || [])[0];\n // const finalValue = showCorrectAnswer ? correctAnswer && correctAnswer.label : data[dataset.id] || '';\n // const width = maxLength && maxLength[dataset.id];\n\n return props.customMarkMarkupComponent(dataset.id);\n // return (\n // <Input\n // key={`${node.type}-input-${dataset.id}`}\n // correct={feedback && feedback[dataset.id] && feedback[dataset.id] === 'correct'}\n // disabled={showCorrectAnswer || disabled}\n // value={finalValue}\n // id={dataset.id}\n // onChange={onChange}\n // showCorrectAnswer={showCorrectAnswer}\n // width={width}\n // charactersLimit={adjustedLimit ? width : 25}\n // isConstructedResponse={true}\n // spellCheck={spellCheck}\n // />\n // );\n }\n});\n"],"file":"customizable.js"}
|
package/lib/drag-in-the-blank.js
DELETED
|
@@ -1,217 +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 _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
|
|
@@ -1 +0,0 @@
|
|
|
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
DELETED
|
@@ -1,62 +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
|
-
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
DELETED
|
@@ -1 +0,0 @@
|
|
|
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"}
|
package/lib/inline-dropdown.js
DELETED
|
@@ -1,48 +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 _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
|
|
@@ -1 +0,0 @@
|
|
|
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"}
|