@pie-lib/mask-markup 1.11.2 → 1.11.3
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 +8 -0
- package/lib/components/correct-input.js +19 -11
- package/lib/components/correct-input.js.map +1 -1
- package/lib/components/input.js +6 -2
- package/lib/components/input.js.map +1 -1
- package/lib/constructed-response.js +6 -2
- package/lib/constructed-response.js.map +1 -1
- package/lib/mask.js +14 -4
- package/lib/mask.js.map +1 -1
- package/package.json +4 -4
- package/src/components/correct-input.jsx +25 -11
- package/src/components/input.jsx +15 -2
- package/src/constructed-response.jsx +5 -2
- package/src/mask.jsx +7 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.11.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.11.2...@pie-lib/mask-markup@1.11.3) (2021-11-29)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @pie-lib/mask-markup
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## [1.11.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.11.1...@pie-lib/mask-markup@1.11.2) (2021-11-10)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @pie-lib/mask-markup
|
|
@@ -54,6 +54,9 @@ var _default = (0, _styles.withStyles)(function () {
|
|
|
54
54
|
borderColor: _renderUi.color.primaryDark()
|
|
55
55
|
}
|
|
56
56
|
},
|
|
57
|
+
crInput: {
|
|
58
|
+
padding: '8px !important'
|
|
59
|
+
},
|
|
57
60
|
correct: correctStyle(_renderUi.color.correct()),
|
|
58
61
|
incorrect: correctStyle(_renderUi.color.incorrect()),
|
|
59
62
|
box: {
|
|
@@ -74,25 +77,30 @@ var _default = (0, _styles.withStyles)(function () {
|
|
|
74
77
|
var _classnames, _classnames2;
|
|
75
78
|
|
|
76
79
|
var correct = props.correct,
|
|
77
|
-
|
|
80
|
+
charactersLimit = props.charactersLimit,
|
|
78
81
|
classes = props.classes,
|
|
79
82
|
disabled = props.disabled,
|
|
80
|
-
|
|
81
|
-
|
|
83
|
+
isBox = props.isBox,
|
|
84
|
+
isConstructedResponse = props.isConstructedResponse,
|
|
85
|
+
width = props.width,
|
|
86
|
+
rest = _objectWithoutProperties(props, ["correct", "charactersLimit", "classes", "disabled", "isBox", "isConstructedResponse", "width"]);
|
|
82
87
|
|
|
83
88
|
var label = typeof correct === 'boolean' ? correct ? 'correct' : 'incorrect' : undefined;
|
|
84
|
-
var
|
|
85
|
-
|
|
86
|
-
var inputProps = maxLength ? {
|
|
87
|
-
maxLength: maxLength,
|
|
88
|
-
style: {
|
|
89
|
-
width: "".concat(maxLength + extraSpace, "ch")
|
|
90
|
-
}
|
|
89
|
+
var inputProps = charactersLimit ? {
|
|
90
|
+
maxLength: charactersLimit
|
|
91
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
|
+
|
|
92
100
|
return _react["default"].createElement(_OutlinedInput["default"], _extends({
|
|
93
101
|
className: (0, _classnames3["default"])((_classnames = {}, _defineProperty(_classnames, classes.disabledInput, disabled), _defineProperty(_classnames, classes.box, isBox), _defineProperty(_classnames, classes.outlinedInput, true), _classnames)),
|
|
94
102
|
classes: {
|
|
95
|
-
input: (0, _classnames3["default"])((_classnames2 = {}, _defineProperty(_classnames2, classes.input, true), _defineProperty(_classnames2, classes[label], label), _classnames2))
|
|
103
|
+
input: (0, _classnames3["default"])((_classnames2 = {}, _defineProperty(_classnames2, classes.input, true), _defineProperty(_classnames2, classes[label], label), _defineProperty(_classnames2, classes.crInput, isConstructedResponse), _classnames2))
|
|
96
104
|
},
|
|
97
105
|
inputProps: inputProps,
|
|
98
106
|
labelWidth: 0,
|
|
@@ -1 +1 @@
|
|
|
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","correct","incorrect","box","fontSize","outlinedInput","border","notchedOutline","props","
|
|
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","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 ...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 {...rest}\n />\n );\n});\n"],"file":"correct-input.js"}
|
package/lib/components/input.js
CHANGED
|
@@ -16,18 +16,22 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
|
|
|
16
16
|
var Input = function Input(_ref) {
|
|
17
17
|
var disabled = _ref.disabled,
|
|
18
18
|
correct = _ref.correct,
|
|
19
|
+
charactersLimit = _ref.charactersLimit,
|
|
19
20
|
id = _ref.id,
|
|
21
|
+
isConstructedResponse = _ref.isConstructedResponse,
|
|
20
22
|
value = _ref.value,
|
|
21
23
|
_onChange = _ref.onChange,
|
|
22
24
|
showCorrectAnswer = _ref.showCorrectAnswer,
|
|
23
|
-
|
|
25
|
+
width = _ref.width;
|
|
24
26
|
return _react["default"].createElement(_correctInput["default"], {
|
|
25
27
|
disabled: disabled,
|
|
26
28
|
correct: showCorrectAnswer || correct,
|
|
29
|
+
charactersLimit: charactersLimit,
|
|
27
30
|
variant: "outlined",
|
|
28
31
|
value: value,
|
|
32
|
+
isConstructedResponse: isConstructedResponse,
|
|
29
33
|
isBox: true,
|
|
30
|
-
|
|
34
|
+
width: width,
|
|
31
35
|
onChange: function onChange(e) {
|
|
32
36
|
_onChange(id, e.target.value);
|
|
33
37
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/input.jsx"],"names":["Input","disabled","correct","id","value","onChange","showCorrectAnswer","
|
|
1
|
+
{"version":3,"sources":["../../src/components/input.jsx"],"names":["Input","disabled","correct","charactersLimit","id","isConstructedResponse","value","onChange","showCorrectAnswer","width","e","target","propTypes","PropTypes","string","func","bool"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAEA,IAAMA,KAAK,GAAG,SAARA,KAAQ,OAUR;AAAA,MATJC,QASI,QATJA,QASI;AAAA,MARJC,OAQI,QARJA,OAQI;AAAA,MAPJC,eAOI,QAPJA,eAOI;AAAA,MANJC,EAMI,QANJA,EAMI;AAAA,MALJC,qBAKI,QALJA,qBAKI;AAAA,MAJJC,KAII,QAJJA,KAII;AAAA,MAHJC,SAGI,QAHJA,QAGI;AAAA,MAFJC,iBAEI,QAFJA,iBAEI;AAAA,MADJC,KACI,QADJA,KACI;AACJ,SACE,gCAAC,wBAAD;AACE,IAAA,QAAQ,EAAER,QADZ;AAEE,IAAA,OAAO,EAAEO,iBAAiB,IAAIN,OAFhC;AAGE,IAAA,eAAe,EAAEC,eAHnB;AAIE,IAAA,OAAO,EAAC,UAJV;AAKE,IAAA,KAAK,EAAEG,KALT;AAME,IAAA,qBAAqB,EAAED,qBANzB;AAOE,IAAA,KAAK,EAAE,IAPT;AAQE,IAAA,KAAK,EAAEI,KART;AASE,IAAA,QAAQ,EAAE,kBAAAC,CAAC,EAAI;AACbH,MAAAA,SAAQ,CAACH,EAAD,EAAKM,CAAC,CAACC,MAAF,CAASL,KAAd,CAAR;AACD;AAXH,IADF;AAeD,CA1BD;;AA4BAN,KAAK,CAACY,SAAN,GAAkB;AAChBR,EAAAA,EAAE,EAAES,sBAAUC,MADE;AAEhBR,EAAAA,KAAK,EAAEO,sBAAUC,MAFD;AAGhBP,EAAAA,QAAQ,EAAEM,sBAAUE,IAHJ;AAIhBd,EAAAA,QAAQ,EAAEY,sBAAUG,IAJJ;AAKhBd,EAAAA,OAAO,EAAEW,sBAAUG,IALH;AAMhBR,EAAAA,iBAAiB,EAAEK,sBAAUG;AANb,CAAlB;eASehB,K","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport CorrectInput from './correct-input';\n\nconst Input = ({\n disabled,\n correct,\n charactersLimit,\n id,\n isConstructedResponse,\n value,\n onChange,\n showCorrectAnswer,\n width\n}) => {\n return (\n <CorrectInput\n disabled={disabled}\n correct={showCorrectAnswer || correct}\n charactersLimit={charactersLimit}\n variant=\"outlined\"\n value={value}\n isConstructedResponse={isConstructedResponse}\n isBox={true}\n width={width}\n onChange={e => {\n onChange(id, e.target.value);\n }}\n />\n );\n};\n\nInput.propTypes = {\n id: PropTypes.string,\n value: PropTypes.string,\n onChange: PropTypes.func,\n disabled: PropTypes.bool,\n correct: PropTypes.bool,\n showCorrectAnswer: PropTypes.bool\n};\n\nexport default Input;\n"],"file":"input.js"}
|
|
@@ -18,13 +18,15 @@ var _default = (0, _withMask.withMask)('input', function (props) {
|
|
|
18
18
|
var dataset = node.data ? node.data.dataset || {} : {};
|
|
19
19
|
|
|
20
20
|
if (dataset.component === 'input') {
|
|
21
|
-
var
|
|
21
|
+
var adjustedLimit = props.adjustedLimit,
|
|
22
|
+
disabled = props.disabled,
|
|
22
23
|
feedback = props.feedback,
|
|
23
24
|
showCorrectAnswer = props.showCorrectAnswer,
|
|
24
25
|
maxLength = props.maxLength; // the first answer is the correct one
|
|
25
26
|
|
|
26
27
|
var correctAnswer = (props.choices && dataset && props.choices[dataset.id] || [])[0];
|
|
27
28
|
var finalValue = showCorrectAnswer ? correctAnswer && correctAnswer.label : data[dataset.id] || '';
|
|
29
|
+
var width = maxLength && maxLength[dataset.id];
|
|
28
30
|
return _react["default"].createElement(_input["default"], {
|
|
29
31
|
key: "".concat(node.type, "-input-").concat(dataset.id),
|
|
30
32
|
correct: feedback && feedback[dataset.id] && feedback[dataset.id] === 'correct',
|
|
@@ -33,7 +35,9 @@ var _default = (0, _withMask.withMask)('input', function (props) {
|
|
|
33
35
|
id: dataset.id,
|
|
34
36
|
onChange: onChange,
|
|
35
37
|
showCorrectAnswer: showCorrectAnswer,
|
|
36
|
-
|
|
38
|
+
width: width,
|
|
39
|
+
charactersLimit: adjustedLimit ? width : 25,
|
|
40
|
+
isConstructedResponse: true
|
|
37
41
|
});
|
|
38
42
|
}
|
|
39
43
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/constructed-response.jsx"],"names":["props","node","data","onChange","dataset","component","disabled","feedback","showCorrectAnswer","maxLength","correctAnswer","choices","id","finalValue","label","type"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe,wBAAS,OAAT,EAAkB,UAAAA,KAAK;AAAA,SAAI,UAACC,IAAD,EAAOC,IAAP,EAAaC,QAAb,EAA0B;AAClE,QAAMC,OAAO,GAAGH,IAAI,CAACC,IAAL,GAAYD,IAAI,CAACC,IAAL,CAAUE,OAAV,IAAqB,EAAjC,GAAsC,EAAtD;;AACA,QAAIA,OAAO,CAACC,SAAR,KAAsB,OAA1B,EAAmC;AAAA,UACzBC,
|
|
1
|
+
{"version":3,"sources":["../src/constructed-response.jsx"],"names":["props","node","data","onChange","dataset","component","adjustedLimit","disabled","feedback","showCorrectAnswer","maxLength","correctAnswer","choices","id","finalValue","label","width","type"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe,wBAAS,OAAT,EAAkB,UAAAA,KAAK;AAAA,SAAI,UAACC,IAAD,EAAOC,IAAP,EAAaC,QAAb,EAA0B;AAClE,QAAMC,OAAO,GAAGH,IAAI,CAACC,IAAL,GAAYD,IAAI,CAACC,IAAL,CAAUE,OAAV,IAAqB,EAAjC,GAAsC,EAAtD;;AACA,QAAIA,OAAO,CAACC,SAAR,KAAsB,OAA1B,EAAmC;AAAA,UACzBC,aADyB,GAC2CN,KAD3C,CACzBM,aADyB;AAAA,UACVC,QADU,GAC2CP,KAD3C,CACVO,QADU;AAAA,UACAC,QADA,GAC2CR,KAD3C,CACAQ,QADA;AAAA,UACUC,iBADV,GAC2CT,KAD3C,CACUS,iBADV;AAAA,UAC6BC,SAD7B,GAC2CV,KAD3C,CAC6BU,SAD7B,EAEjC;;AACA,UAAMC,aAAa,GAAG,CAAEX,KAAK,CAACY,OAAN,IAAiBR,OAAjB,IAA4BJ,KAAK,CAACY,OAAN,CAAcR,OAAO,CAACS,EAAtB,CAA7B,IAA2D,EAA5D,EAAgE,CAAhE,CAAtB;AACA,UAAMC,UAAU,GAAGL,iBAAiB,GAChCE,aAAa,IAAIA,aAAa,CAACI,KADC,GAEhCb,IAAI,CAACE,OAAO,CAACS,EAAT,CAAJ,IAAoB,EAFxB;AAGA,UAAMG,KAAK,GAAGN,SAAS,IAAIA,SAAS,CAACN,OAAO,CAACS,EAAT,CAApC;AAEA,aACE,gCAAC,iBAAD;AACE,QAAA,GAAG,YAAKZ,IAAI,CAACgB,IAAV,oBAAwBb,OAAO,CAACS,EAAhC,CADL;AAEE,QAAA,OAAO,EAAEL,QAAQ,IAAIA,QAAQ,CAACJ,OAAO,CAACS,EAAT,CAApB,IAAoCL,QAAQ,CAACJ,OAAO,CAACS,EAAT,CAAR,KAAyB,SAFxE;AAGE,QAAA,QAAQ,EAAEJ,iBAAiB,IAAIF,QAHjC;AAIE,QAAA,KAAK,EAAEO,UAJT;AAKE,QAAA,EAAE,EAAEV,OAAO,CAACS,EALd;AAME,QAAA,QAAQ,EAAEV,QANZ;AAOE,QAAA,iBAAiB,EAAEM,iBAPrB;AAQE,QAAA,KAAK,EAAEO,KART;AASE,QAAA,eAAe,EAAEV,aAAa,GAAGU,KAAH,GAAW,EAT3C;AAUE,QAAA,qBAAqB,EAAE;AAVzB,QADF;AAcD;AACF,GA1BqC;AAAA,CAAvB,C","sourcesContent":["import React from 'react';\nimport Input from './components/input';\nimport { withMask } from './with-mask';\n\nexport default withMask('input', props => (node, data, onChange) => {\n const dataset = node.data ? node.data.dataset || {} : {};\n if (dataset.component === 'input') {\n const { adjustedLimit, disabled, feedback, showCorrectAnswer, maxLength } = props;\n // the first answer is the correct one\n const correctAnswer = ((props.choices && dataset && props.choices[dataset.id]) || [])[0];\n const finalValue = showCorrectAnswer\n ? correctAnswer && correctAnswer.label\n : data[dataset.id] || '';\n const width = maxLength && maxLength[dataset.id];\n\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 />\n );\n }\n});\n"],"file":"constructed-response.js"}
|
package/lib/mask.js
CHANGED
|
@@ -143,13 +143,23 @@ var renderChildren = function renderChildren(layout, value, onChange, rootRender
|
|
|
143
143
|
});
|
|
144
144
|
return children;
|
|
145
145
|
};
|
|
146
|
+
|
|
147
|
+
exports.renderChildren = renderChildren;
|
|
148
|
+
var MaskContainer = (0, _styles.withStyles)(function () {
|
|
149
|
+
return {
|
|
150
|
+
main: {
|
|
151
|
+
display: 'inherit'
|
|
152
|
+
}
|
|
153
|
+
};
|
|
154
|
+
})(function (props) {
|
|
155
|
+
return _react["default"].createElement("div", {
|
|
156
|
+
className: props.classes.main
|
|
157
|
+
}, props.children);
|
|
158
|
+
});
|
|
146
159
|
/**
|
|
147
160
|
* Renders a layout that uses the slate.js Value model structure.
|
|
148
161
|
*/
|
|
149
162
|
|
|
150
|
-
|
|
151
|
-
exports.renderChildren = renderChildren;
|
|
152
|
-
|
|
153
163
|
var Mask =
|
|
154
164
|
/*#__PURE__*/
|
|
155
165
|
function (_React$Component) {
|
|
@@ -184,7 +194,7 @@ function (_React$Component) {
|
|
|
184
194
|
value = _this$props.value,
|
|
185
195
|
layout = _this$props.layout;
|
|
186
196
|
var children = renderChildren(layout, value, this.handleChange, this.props.renderChildren);
|
|
187
|
-
return _react["default"].createElement(
|
|
197
|
+
return _react["default"].createElement(MaskContainer, null, children);
|
|
188
198
|
}
|
|
189
199
|
}]);
|
|
190
200
|
|
package/lib/mask.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/mask.jsx"],"names":["Paragraph","theme","para","paddingTop","spacing","unit","paddingBottom","props","classes","children","restrictWhitespaceTypes","addText","parentNode","text","isWhitespace","trim","parentType","type","includes","undefined","getMark","n","mark","leaves","find","leave","length","marks","renderChildren","layout","value","onChange","rootRenderChildren","nodes","forEach","index","key","c","push","object","content","reduce","acc","l","t","extraText","markKey","MARK_TAGS","Tag","subNodes","data","attributes","Mask","id","handleChange","React","Component","PropTypes","func"],"mappings":"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
|
|
1
|
+
{"version":3,"sources":["../src/mask.jsx"],"names":["Paragraph","theme","para","paddingTop","spacing","unit","paddingBottom","props","classes","children","restrictWhitespaceTypes","addText","parentNode","text","isWhitespace","trim","parentType","type","includes","undefined","getMark","n","mark","leaves","find","leave","length","marks","renderChildren","layout","value","onChange","rootRenderChildren","nodes","forEach","index","key","c","push","object","content","reduce","acc","l","t","extraText","markKey","MARK_TAGS","Tag","subNodes","data","attributes","MaskContainer","main","display","Mask","id","handleChange","React","Component","PropTypes","func"],"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';\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 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) => {\n if (!value) {\n return null;\n }\n\n const children = [];\n\n (layout.nodes || []).forEach((n, index) => {\n const key = `${n.type}-${index}`;\n\n if (rootRenderChildren) {\n const c = rootRenderChildren(n, value, onChange);\n if (c) {\n children.push(c);\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>{content}</Tag>);\n break;\n }\n }\n } else if (content.length > 0) {\n children.push(content);\n }\n } else {\n const subNodes = renderChildren(n, value, onChange, rootRenderChildren, n);\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: 'inherit'\n }\n}))(props => <div className={props.classes.main}>{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 };\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 } = this.props;\n const children = renderChildren(layout, value, this.handleChange, this.props.renderChildren);\n\n return <MaskContainer>{children}</MaskContainer>;\n }\n}\n"],"file":"mask.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pie-lib/mask-markup",
|
|
3
|
-
"version": "1.11.
|
|
3
|
+
"version": "1.11.3",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "src/index.js",
|
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
"dependencies": {
|
|
11
11
|
"@material-ui/core": "^3.9.3",
|
|
12
12
|
"@pie-lib/drag": "^1.1.52",
|
|
13
|
-
"@pie-lib/math-rendering": "^2.3.
|
|
14
|
-
"@pie-lib/render-ui": "^4.12.
|
|
13
|
+
"@pie-lib/math-rendering": "^2.3.12",
|
|
14
|
+
"@pie-lib/render-ui": "^4.12.3",
|
|
15
15
|
"classnames": "^2.2.6",
|
|
16
16
|
"debug": "^4.1.1",
|
|
17
17
|
"immutable": ">=3.8.1",
|
|
@@ -27,5 +27,5 @@
|
|
|
27
27
|
"keywords": [],
|
|
28
28
|
"author": "",
|
|
29
29
|
"license": "ISC",
|
|
30
|
-
"gitHead": "
|
|
30
|
+
"gitHead": "3575de076034eb451b0a66b2f3fd3d29802983ec"
|
|
31
31
|
}
|
|
@@ -30,6 +30,9 @@ export default withStyles(() => ({
|
|
|
30
30
|
borderColor: color.primaryDark()
|
|
31
31
|
}
|
|
32
32
|
},
|
|
33
|
+
crInput: {
|
|
34
|
+
padding: '8px !important'
|
|
35
|
+
},
|
|
33
36
|
correct: correctStyle(color.correct()),
|
|
34
37
|
incorrect: correctStyle(color.incorrect()),
|
|
35
38
|
box: {
|
|
@@ -46,17 +49,24 @@ export default withStyles(() => ({
|
|
|
46
49
|
borderColor: color.correct()
|
|
47
50
|
}
|
|
48
51
|
}))(props => {
|
|
49
|
-
const {
|
|
52
|
+
const {
|
|
53
|
+
correct,
|
|
54
|
+
charactersLimit,
|
|
55
|
+
classes,
|
|
56
|
+
disabled,
|
|
57
|
+
isBox,
|
|
58
|
+
isConstructedResponse,
|
|
59
|
+
width,
|
|
60
|
+
...rest
|
|
61
|
+
} = props;
|
|
50
62
|
const label = typeof correct === 'boolean' ? (correct ? 'correct' : 'incorrect') : undefined;
|
|
51
|
-
const
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
}
|
|
59
|
-
: {};
|
|
63
|
+
const inputProps = charactersLimit ? { maxLength: charactersLimit } : {};
|
|
64
|
+
|
|
65
|
+
if (width) {
|
|
66
|
+
inputProps.style = {
|
|
67
|
+
width: `${width + Math.round(width / 10) + 1}ch` // added some extra space for capital letters
|
|
68
|
+
};
|
|
69
|
+
}
|
|
60
70
|
|
|
61
71
|
return (
|
|
62
72
|
<OutlinedInput
|
|
@@ -66,7 +76,11 @@ export default withStyles(() => ({
|
|
|
66
76
|
[classes.outlinedInput]: true
|
|
67
77
|
})}
|
|
68
78
|
classes={{
|
|
69
|
-
input: classnames({
|
|
79
|
+
input: classnames({
|
|
80
|
+
[classes.input]: true,
|
|
81
|
+
[classes[label]]: label,
|
|
82
|
+
[classes.crInput]: isConstructedResponse
|
|
83
|
+
})
|
|
70
84
|
}}
|
|
71
85
|
inputProps={inputProps}
|
|
72
86
|
labelWidth={0}
|
package/src/components/input.jsx
CHANGED
|
@@ -2,21 +2,34 @@ import React from 'react';
|
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import CorrectInput from './correct-input';
|
|
4
4
|
|
|
5
|
-
const Input = ({
|
|
5
|
+
const Input = ({
|
|
6
|
+
disabled,
|
|
7
|
+
correct,
|
|
8
|
+
charactersLimit,
|
|
9
|
+
id,
|
|
10
|
+
isConstructedResponse,
|
|
11
|
+
value,
|
|
12
|
+
onChange,
|
|
13
|
+
showCorrectAnswer,
|
|
14
|
+
width
|
|
15
|
+
}) => {
|
|
6
16
|
return (
|
|
7
17
|
<CorrectInput
|
|
8
18
|
disabled={disabled}
|
|
9
19
|
correct={showCorrectAnswer || correct}
|
|
20
|
+
charactersLimit={charactersLimit}
|
|
10
21
|
variant="outlined"
|
|
11
22
|
value={value}
|
|
23
|
+
isConstructedResponse={isConstructedResponse}
|
|
12
24
|
isBox={true}
|
|
13
|
-
|
|
25
|
+
width={width}
|
|
14
26
|
onChange={e => {
|
|
15
27
|
onChange(id, e.target.value);
|
|
16
28
|
}}
|
|
17
29
|
/>
|
|
18
30
|
);
|
|
19
31
|
};
|
|
32
|
+
|
|
20
33
|
Input.propTypes = {
|
|
21
34
|
id: PropTypes.string,
|
|
22
35
|
value: PropTypes.string,
|
|
@@ -5,12 +5,13 @@ import { withMask } from './with-mask';
|
|
|
5
5
|
export default withMask('input', props => (node, data, onChange) => {
|
|
6
6
|
const dataset = node.data ? node.data.dataset || {} : {};
|
|
7
7
|
if (dataset.component === 'input') {
|
|
8
|
-
const { disabled, feedback, showCorrectAnswer, maxLength } = props;
|
|
8
|
+
const { adjustedLimit, disabled, feedback, showCorrectAnswer, maxLength } = props;
|
|
9
9
|
// the first answer is the correct one
|
|
10
10
|
const correctAnswer = ((props.choices && dataset && props.choices[dataset.id]) || [])[0];
|
|
11
11
|
const finalValue = showCorrectAnswer
|
|
12
12
|
? correctAnswer && correctAnswer.label
|
|
13
13
|
: data[dataset.id] || '';
|
|
14
|
+
const width = maxLength && maxLength[dataset.id];
|
|
14
15
|
|
|
15
16
|
return (
|
|
16
17
|
<Input
|
|
@@ -21,7 +22,9 @@ export default withMask('input', props => (node, data, onChange) => {
|
|
|
21
22
|
id={dataset.id}
|
|
22
23
|
onChange={onChange}
|
|
23
24
|
showCorrectAnswer={showCorrectAnswer}
|
|
24
|
-
|
|
25
|
+
width={width}
|
|
26
|
+
charactersLimit={adjustedLimit ? width : 25}
|
|
27
|
+
isConstructedResponse={true}
|
|
25
28
|
/>
|
|
26
29
|
);
|
|
27
30
|
}
|
package/src/mask.jsx
CHANGED
|
@@ -95,6 +95,12 @@ export const renderChildren = (layout, value, onChange, rootRenderChildren, pare
|
|
|
95
95
|
return children;
|
|
96
96
|
};
|
|
97
97
|
|
|
98
|
+
const MaskContainer = withStyles(() => ({
|
|
99
|
+
main: {
|
|
100
|
+
display: 'inherit'
|
|
101
|
+
}
|
|
102
|
+
}))(props => <div className={props.classes.main}>{props.children}</div>);
|
|
103
|
+
|
|
98
104
|
/**
|
|
99
105
|
* Renders a layout that uses the slate.js Value model structure.
|
|
100
106
|
*/
|
|
@@ -115,6 +121,6 @@ export default class Mask extends React.Component {
|
|
|
115
121
|
const { value, layout } = this.props;
|
|
116
122
|
const children = renderChildren(layout, value, this.handleChange, this.props.renderChildren);
|
|
117
123
|
|
|
118
|
-
return <
|
|
124
|
+
return <MaskContainer>{children}</MaskContainer>;
|
|
119
125
|
}
|
|
120
126
|
}
|