@pie-lib/mask-markup 1.10.20 → 1.10.21-next.86

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/CHANGELOG.json +45 -0
  2. package/CHANGELOG.md +13 -102
  3. package/lib/choices/choice.js +5 -1
  4. package/lib/choices/choice.js.map +1 -1
  5. package/lib/components/blank.js +5 -1
  6. package/lib/components/blank.js.map +1 -1
  7. package/lib/components/correct-input.js +14 -1
  8. package/lib/components/correct-input.js.map +1 -1
  9. package/lib/components/dropdown.js +7 -1
  10. package/lib/components/dropdown.js.map +1 -1
  11. package/lib/components/input.js +3 -1
  12. package/lib/components/input.js.map +1 -1
  13. package/lib/constructed-response.js +4 -2
  14. package/lib/constructed-response.js.map +1 -1
  15. package/package.json +4 -4
  16. package/src/choices/choice.jsx +5 -1
  17. package/src/components/blank.jsx +5 -1
  18. package/src/components/correct-input.jsx +14 -1
  19. package/src/components/dropdown.jsx +11 -1
  20. package/src/components/input.jsx +2 -1
  21. package/src/constructed-response.jsx +2 -1
package/CHANGELOG.json CHANGED
@@ -838,5 +838,50 @@
838
838
  "committerDate": "2021-07-02 16:41:08 +0300",
839
839
  "isTagged": true,
840
840
  "tag": "@pie-lib/mask-markup@1.10.18"
841
+ },
842
+ {
843
+ "type": "feat",
844
+ "scope": "mask-markup",
845
+ "subject": "Made sure that the changes do not affect other components",
846
+ "merge": null,
847
+ "header": "feat(mask-markup): Made sure that the changes do not affect other components",
848
+ "body": null,
849
+ "footer": null,
850
+ "notes": [],
851
+ "hash": "e3c5f8ce419aa9e99d9c5b01367d9ab2ce54dce7",
852
+ "gitTags": " (origin/feat/PD-794)",
853
+ "committerDate": "2021-10-18 12:30:08 +0300",
854
+ "isTagged": true,
855
+ "tag": "@pie-lib/mask-markup@1.11.0"
856
+ },
857
+ {
858
+ "type": "feat",
859
+ "scope": "mask-markup",
860
+ "subject": "Added a max limit of characters, adjusted the width and updated design PD-794",
861
+ "merge": null,
862
+ "header": "feat(mask-markup): Added a max limit of characters, adjusted the width and updated design PD-794",
863
+ "body": null,
864
+ "footer": null,
865
+ "notes": [],
866
+ "hash": "f46d544caaf03fc638993670d05ed284e284d93e",
867
+ "gitTags": "",
868
+ "committerDate": "2021-10-05 15:36:43 +0300",
869
+ "isTagged": true,
870
+ "tag": "@pie-lib/mask-markup@1.11.0"
871
+ },
872
+ {
873
+ "type": "fix",
874
+ "scope": "mask-markup",
875
+ "subject": "Fixed border radius in pits",
876
+ "merge": null,
877
+ "header": "fix(mask-markup): Fixed border radius in pits",
878
+ "body": null,
879
+ "footer": null,
880
+ "notes": [],
881
+ "hash": "41c0acd332cbe8bceb3ed9059fee1d52ea73ebec",
882
+ "gitTags": "",
883
+ "committerDate": "2021-10-18 14:06:30 +0300",
884
+ "isTagged": true,
885
+ "tag": "@pie-lib/mask-markup@1.11.1"
841
886
  }
842
887
  ]
package/CHANGELOG.md CHANGED
@@ -21,195 +21,106 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
21
21
 
22
22
  ## [1.10.18](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.10.17...@pie-lib/mask-markup@1.10.18) (2021-07-23)
23
23
 
24
-
25
24
  ### Bug Fixes
26
25
 
27
- * **mask-markup:** Updated serialization PD-859 ([4948f99](https://github.com/pie-framework/pie-lib/commit/4948f99))
28
-
29
-
30
-
31
-
26
+ - **mask-markup:** Updated serialization PD-859 ([4948f99](https://github.com/pie-framework/pie-lib/commit/4948f99))
32
27
 
33
28
  ## [1.10.17](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.10.15...@pie-lib/mask-markup@1.10.17) (2021-06-25)
34
29
 
35
30
  **Note:** Version bump only for package @pie-lib/mask-markup
36
31
 
37
-
38
-
39
-
40
-
41
32
  ## [1.10.15](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.10.14...@pie-lib/mask-markup@1.10.15) (2021-06-25)
42
33
 
43
-
44
34
  ### Bug Fixes
45
35
 
46
- * **mask-markup:** Fixed DITB image-based tokens to be draggable - PD-1120 ([4cf2f4a](https://github.com/pie-framework/pie-lib/commit/4cf2f4a))
47
- * **mask-markup:** Fixed labels overlapping ([3f7cff2](https://github.com/pie-framework/pie-lib/commit/3f7cff2))
48
- * **mask-markup:** set max fontSize for dropdown items to fix PD-1142 ([704c291](https://github.com/pie-framework/pie-lib/commit/704c291))
49
-
50
-
51
-
52
-
36
+ - **mask-markup:** Fixed DITB image-based tokens to be draggable - PD-1120 ([4cf2f4a](https://github.com/pie-framework/pie-lib/commit/4cf2f4a))
37
+ - **mask-markup:** Fixed labels overlapping ([3f7cff2](https://github.com/pie-framework/pie-lib/commit/3f7cff2))
38
+ - **mask-markup:** set max fontSize for dropdown items to fix PD-1142 ([704c291](https://github.com/pie-framework/pie-lib/commit/704c291))
53
39
 
54
40
  ## [1.10.14](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.10.13...@pie-lib/mask-markup@1.10.14) (2021-04-06)
55
41
 
56
-
57
42
  ### Bug Fixes
58
43
 
59
- * **mask-markup:** Changed choice preview design PD-605 ([d4b882e](https://github.com/pie-framework/pie-lib/commit/d4b882e))
60
-
61
-
62
-
63
-
44
+ - **mask-markup:** Changed choice preview design PD-605 ([d4b882e](https://github.com/pie-framework/pie-lib/commit/d4b882e))
64
45
 
65
46
  ## [1.10.13](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.10.12...@pie-lib/mask-markup@1.10.13) (2021-04-02)
66
47
 
67
-
68
48
  ### Bug Fixes
69
49
 
70
- * **mask-markup:** fix dragging issue by overwriting material ui chip height PD-1034 ([f26db36](https://github.com/pie-framework/pie-lib/commit/f26db36))
71
-
72
-
73
-
74
-
50
+ - **mask-markup:** fix dragging issue by overwriting material ui chip height PD-1034 ([f26db36](https://github.com/pie-framework/pie-lib/commit/f26db36))
75
51
 
76
52
  ## [1.10.12](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.10.11...@pie-lib/mask-markup@1.10.12) (2021-03-16)
77
53
 
78
-
79
54
  ### Bug Fixes
80
55
 
81
- * **drag-in-the-blank:** add margin for tokens PD-745 ([2df356f](https://github.com/pie-framework/pie-lib/commit/2df356f))
82
- * **drag-in-the-blank:** set max width for tokens PD-727 ([b43b630](https://github.com/pie-framework/pie-lib/commit/b43b630))
83
-
84
-
85
-
86
-
56
+ - **drag-in-the-blank:** add margin for tokens PD-745 ([2df356f](https://github.com/pie-framework/pie-lib/commit/2df356f))
57
+ - **drag-in-the-blank:** set max width for tokens PD-727 ([b43b630](https://github.com/pie-framework/pie-lib/commit/b43b630))
87
58
 
88
59
  ## [1.10.11](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.10.10...@pie-lib/mask-markup@1.10.11) (2021-03-15)
89
60
 
90
-
91
61
  ### Bug Fixes
92
62
 
93
- * **mask-markup:** increase height for drag-in-the-blank chip PD-726 ([9cb037e](https://github.com/pie-framework/pie-lib/commit/9cb037e))
94
-
95
-
96
-
97
-
63
+ - **mask-markup:** increase height for drag-in-the-blank chip PD-726 ([9cb037e](https://github.com/pie-framework/pie-lib/commit/9cb037e))
98
64
 
99
65
  ## [1.10.10](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.10.9...@pie-lib/mask-markup@1.10.10) (2021-03-01)
100
66
 
101
67
  **Note:** Version bump only for package @pie-lib/mask-markup
102
68
 
103
-
104
-
105
-
106
-
107
69
  ## [1.10.9](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.10.8...@pie-lib/mask-markup@1.10.9) (2021-03-01)
108
70
 
109
71
  **Note:** Version bump only for package @pie-lib/mask-markup
110
72
 
111
-
112
-
113
-
114
-
115
73
  ## [1.10.8](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.10.7...@pie-lib/mask-markup@1.10.8) (2021-02-15)
116
74
 
117
-
118
75
  ### Bug Fixes
119
76
 
120
- * **inline-dropdown:** remove newline regex - PD-887 ([e9e14c8](https://github.com/pie-framework/pie-lib/commit/e9e14c8))
121
-
122
-
123
-
124
-
77
+ - **inline-dropdown:** remove newline regex - PD-887 ([e9e14c8](https://github.com/pie-framework/pie-lib/commit/e9e14c8))
125
78
 
126
79
  ## [1.10.7](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.10.5...@pie-lib/mask-markup@1.10.7) (2021-02-15)
127
80
 
128
81
  **Note:** Version bump only for package @pie-lib/mask-markup
129
82
 
130
-
131
-
132
-
133
-
134
83
  ## [1.10.5](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.10.4...@pie-lib/mask-markup@1.10.5) (2021-02-15)
135
84
 
136
85
  **Note:** Version bump only for package @pie-lib/mask-markup
137
86
 
138
-
139
-
140
-
141
-
142
87
  ## [1.10.4](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.10.3...@pie-lib/mask-markup@1.10.4) (2021-02-01)
143
88
 
144
89
  **Note:** Version bump only for package @pie-lib/mask-markup
145
90
 
146
-
147
-
148
-
149
-
150
91
  ## [1.10.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.10.2...@pie-lib/mask-markup@1.10.3) (2021-01-28)
151
92
 
152
93
  **Note:** Version bump only for package @pie-lib/mask-markup
153
94
 
154
-
155
-
156
-
157
-
158
95
  ## [1.10.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.10.1...@pie-lib/mask-markup@1.10.2) (2021-01-28)
159
96
 
160
97
  **Note:** Version bump only for package @pie-lib/mask-markup
161
98
 
162
-
163
-
164
-
165
-
166
99
  ## [1.10.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.10.0...@pie-lib/mask-markup@1.10.1) (2021-01-25)
167
100
 
168
101
  **Note:** Version bump only for package @pie-lib/mask-markup
169
102
 
170
-
171
-
172
-
173
-
174
103
  # [1.10.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.9.5...@pie-lib/mask-markup@1.10.0) (2021-01-11)
175
104
 
176
-
177
105
  ### Features
178
106
 
179
- * **mask-markup:** inline-dropdown color treatment fixed ([60072de](https://github.com/pie-framework/pie-lib/commit/60072de))
180
-
181
-
182
-
183
-
107
+ - **mask-markup:** inline-dropdown color treatment fixed ([60072de](https://github.com/pie-framework/pie-lib/commit/60072de))
184
108
 
185
109
  ## [1.9.5](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.9.4...@pie-lib/mask-markup@1.9.5) (2020-10-29)
186
110
 
187
111
  **Note:** Version bump only for package @pie-lib/mask-markup
188
112
 
189
-
190
-
191
-
192
-
193
113
  ## [1.9.4](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.9.3...@pie-lib/mask-markup@1.9.4) (2020-10-28)
194
114
 
195
-
196
115
  ### Bug Fixes
197
116
 
198
- * dropdown colors ([143853d](https://github.com/pie-framework/pie-lib/commit/143853d))
199
- * upgrade react-dnd ([f507025](https://github.com/pie-framework/pie-lib/commit/f507025))
200
-
201
-
202
-
203
-
117
+ - dropdown colors ([143853d](https://github.com/pie-framework/pie-lib/commit/143853d))
118
+ - upgrade react-dnd ([f507025](https://github.com/pie-framework/pie-lib/commit/f507025))
204
119
 
205
120
  ## [1.9.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.9.2...@pie-lib/mask-markup@1.9.3) (2020-10-26)
206
121
 
207
122
  **Note:** Version bump only for package @pie-lib/mask-markup
208
123
 
209
-
210
-
211
-
212
-
213
124
  ## [1.9.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.9.1...@pie-lib/mask-markup@1.9.2) (2020-10-26)
214
125
 
215
126
  **Note:** Version bump only for package @pie-lib/mask-markup
package/lib/choices/choice.js CHANGED
@@ -119,7 +119,11 @@ var BlankContent = (0, _styles.withStyles)(function (theme) {
119
119
  margin: '4px'
120
120
  },
121
121
  chipLabel: {
122
- whiteSpace: 'pre-wrap'
122
+ whiteSpace: 'pre-wrap',
123
+ '& img': {
124
+ display: 'block',
125
+ padding: '2px 0'
126
+ }
123
127
  },
124
128
  disabled: {}
125
129
  };
package/lib/choices/choice.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/choices/choice.jsx"],"names":["DRAG_TYPE","BlankContentComp","rootRef","props","connectDragSource","choice","classes","disabled","ref","ReactDOM","findDOMNode","chip","chipLabel","innerHTML","value","undefined","React","Component","PropTypes","bool","object","func","BlankContent","theme","border","palette","primary","main","alignItems","display","height","minHeight","fontSize","whiteSpace","maxWidth","margin","tileSource","canDrag","beginDrag","instanceId","DragDropTile","connect","monitor","dragSource","isDragging"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DragSource } from '@pie-lib/drag';\nimport { withStyles } from '@material-ui/core/styles';\nimport Chip from '@material-ui/core/Chip';\nimport classnames from 'classnames';\nimport ReactDOM from 'react-dom';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nexport const DRAG_TYPE = 'MaskBlank';\n\nclass BlankContentComp extends React.Component {\n static propTypes = {\n disabled: PropTypes.bool,\n choice: PropTypes.object,\n classes: PropTypes.object,\n connectDragSource: PropTypes.func\n };\n\n componentDidUpdate() {\n renderMath(this.rootRef);\n }\n\n render() {\n const { connectDragSource, choice, classes, disabled } = this.props;\n\n return connectDragSource(\n <span className={classnames(classes.choice, disabled && classes.disabled)}>\n <Chip\n ref={ref => {\n //eslint-disable-next-line\n this.rootRef = ReactDOM.findDOMNode(ref);\n }}\n className={classes.chip}\n label={\n <span\n className={classes.chipLabel}\n ref={ref => {\n if (ref) {\n ref.innerHTML = choice.value || ' ';\n }\n }}\n >\n {' '}\n </span>\n }\n variant={disabled ? 'outlined' : undefined}\n />\n </span>,\n {}\n );\n }\n}\n\nexport const BlankContent = withStyles(theme => ({\n choice: {\n border: `solid 0px ${theme.palette.primary.main}`\n },\n chip: {\n alignItems: 'center',\n display: 'inline-flex',\n height: 'initial',\n minHeight: '32px',\n fontSize: 'inherit',\n whiteSpace: 'pre-wrap',\n maxWidth: '374px',\n margin: '4px'\n },\n chipLabel: {\n whiteSpace: 'pre-wrap'\n },\n disabled: {}\n}))(BlankContentComp);\n\nconst tileSource = {\n canDrag(props) {\n return !props.disabled;\n },\n beginDrag(props) {\n return {\n choice: props.choice,\n instanceId: props.instanceId\n };\n }\n};\n\nconst DragDropTile = DragSource(DRAG_TYPE, tileSource, (connect, monitor) => ({\n connectDragSource: connect.dragSource(),\n isDragging: monitor.isDragging()\n}))(BlankContent);\n\nexport default DragDropTile;\n"],"file":"choice.js"}
1
+ {"version":3,"sources":["../../src/choices/choice.jsx"],"names":["DRAG_TYPE","BlankContentComp","rootRef","props","connectDragSource","choice","classes","disabled","ref","ReactDOM","findDOMNode","chip","chipLabel","innerHTML","value","undefined","React","Component","PropTypes","bool","object","func","BlankContent","theme","border","palette","primary","main","alignItems","display","height","minHeight","fontSize","whiteSpace","maxWidth","margin","padding","tileSource","canDrag","beginDrag","instanceId","DragDropTile","connect","monitor","dragSource","isDragging"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DragSource } from '@pie-lib/drag';\nimport { withStyles } from '@material-ui/core/styles';\nimport Chip from '@material-ui/core/Chip';\nimport classnames from 'classnames';\nimport ReactDOM from 'react-dom';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nexport const DRAG_TYPE = 'MaskBlank';\n\nclass BlankContentComp extends React.Component {\n static propTypes = {\n disabled: PropTypes.bool,\n choice: PropTypes.object,\n classes: PropTypes.object,\n connectDragSource: PropTypes.func\n };\n\n componentDidUpdate() {\n renderMath(this.rootRef);\n }\n\n render() {\n const { connectDragSource, choice, classes, disabled } = this.props;\n\n return connectDragSource(\n <span className={classnames(classes.choice, disabled && classes.disabled)}>\n <Chip\n ref={ref => {\n //eslint-disable-next-line\n this.rootRef = ReactDOM.findDOMNode(ref);\n }}\n className={classes.chip}\n label={\n <span\n className={classes.chipLabel}\n ref={ref => {\n if (ref) {\n ref.innerHTML = choice.value || ' ';\n }\n }}\n >\n {' '}\n </span>\n }\n variant={disabled ? 'outlined' : undefined}\n />\n </span>,\n {}\n );\n }\n}\n\nexport const BlankContent = withStyles(theme => ({\n choice: {\n border: `solid 0px ${theme.palette.primary.main}`\n },\n chip: {\n alignItems: 'center',\n display: 'inline-flex',\n height: 'initial',\n minHeight: '32px',\n fontSize: 'inherit',\n whiteSpace: 'pre-wrap',\n maxWidth: '374px',\n margin: '4px'\n },\n chipLabel: {\n whiteSpace: 'pre-wrap',\n '& img': {\n display: 'block',\n padding: '2px 0'\n }\n },\n disabled: {}\n}))(BlankContentComp);\n\nconst tileSource = {\n canDrag(props) {\n return !props.disabled;\n },\n beginDrag(props) {\n return {\n choice: props.choice,\n instanceId: props.instanceId\n };\n }\n};\n\nconst DragDropTile = DragSource(DRAG_TYPE, tileSource, (connect, monitor) => ({\n connectDragSource: connect.dragSource(),\n isDragging: monitor.isDragging()\n}))(BlankContent);\n\nexport default DragDropTile;\n"],"file":"choice.js"}
package/lib/components/blank.js CHANGED
@@ -72,7 +72,11 @@ var useStyles = (0, _styles.withStyles)(function () {
72
72
  position: 'relative'
73
73
  },
74
74
  chipLabel: {
75
- whiteSpace: 'pre-wrap'
75
+ whiteSpace: 'pre-wrap',
76
+ '& img': {
77
+ display: 'block',
78
+ padding: '2px 0'
79
+ }
76
80
  },
77
81
  hidden: {
78
82
  color: 'transparent',
package/lib/components/blank.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/blank.jsx"],"names":["log","DRAG_TYPE","useStyles","content","border","color","primary","minWidth","chip","fontSize","minHeight","maxWidth","position","chipLabel","whiteSpace","hidden","opacity","dragged","left","correct","incorrect","over","overflow","BlankContent","state","height","prevProps","rootRef","currentChoice","props","choice","prevChoice","JSON","stringify","setState","setTimeout","spanRef","offsetHeight","parent","childNodes","forEach","elem","Element","HTMLDocument","setAttribute","disabled","classes","isOver","dragItem","draggedLabel","value","label","ref","ReactDOM","findDOMNode","innerHTML","addDraggableFalseAttributes","undefined","React","Component","id","PropTypes","oneOfType","string","number","bool","duplicates","object","onChange","func","StyledBlankContent","connectedBlankContent","connectDragSource","connectDropTarget","tileTarget","drop","monitor","draggedItem","getItem","instanceId","dropped","canDrop","DropTile","connect","dropTarget","tileSource","canDrag","beginDrag","fromChoice","endDrag","dropResult","getDropResult","DragDropTile","dragSource","isDragging"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport debug from 'debug';\nimport { DragSource, DropTarget } from '@pie-lib/drag';\nimport { withStyles } from '@material-ui/core/styles';\nimport Chip from '@material-ui/core/Chip';\nimport classnames from 'classnames';\nimport { color } from '@pie-lib/render-ui';\nconst log = debug('pie-lib:mask-markup:blank');\nexport const DRAG_TYPE = 'MaskBlank';\n\nconst useStyles = withStyles(() => ({\n content: {\n border: `solid 0px ${color.primary()}`,\n minWidth: '200px'\n },\n chip: {\n minWidth: '90px',\n fontSize: 'inherit',\n minHeight: '32px',\n maxWidth: '374px',\n position: 'relative'\n },\n chipLabel: {\n whiteSpace: 'pre-wrap'\n },\n hidden: {\n color: 'transparent',\n opacity: 0\n },\n dragged: {\n position: 'absolute',\n left: 14,\n maxWidth: '60px'\n },\n correct: {\n border: `solid 1px ${color.correct()}`\n },\n incorrect: {\n border: `solid 1px ${color.incorrect()}`\n },\n over: {\n whiteSpace: 'nowrap',\n overflow: 'hidden'\n }\n}));\n\nexport class BlankContent extends React.Component {\n static propTypes = {\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n disabled: PropTypes.bool,\n duplicates: PropTypes.bool,\n choice: PropTypes.object,\n classes: PropTypes.object,\n isOver: PropTypes.bool,\n dragItem: PropTypes.object,\n correct: PropTypes.bool,\n onChange: PropTypes.func\n };\n\n constructor() {\n super();\n this.state = {\n height: 0\n };\n }\n\n componentDidUpdate(prevProps) {\n renderMath(this.rootRef);\n const { choice: currentChoice } = this.props;\n const { choice: prevChoice } = prevProps;\n\n if (JSON.stringify(currentChoice) !== JSON.stringify(prevChoice)) {\n if (!currentChoice) {\n this.setState({\n height: 0\n });\n return;\n }\n setTimeout(() => {\n this.setState({\n height: this.spanRef.offsetHeight\n });\n }, 300);\n }\n }\n\n addDraggableFalseAttributes(parent) {\n parent.childNodes.forEach(elem => {\n if (elem instanceof Element || elem instanceof HTMLDocument) {\n elem.setAttribute('draggable', false);\n }\n });\n }\n\n render() {\n const { disabled, choice, classes, isOver, dragItem, correct } = this.props;\n const draggedLabel = dragItem && isOver && dragItem.choice.value;\n const label = choice && choice.value;\n\n return (\n <Chip\n ref={ref => {\n //eslint-disable-next-line\n this.rootRef = ReactDOM.findDOMNode(ref);\n }}\n component=\"span\"\n label={\n <React.Fragment>\n <span\n className={classnames(classes.chipLabel, isOver && classes.over, {\n [classes.hidden]: draggedLabel\n })}\n ref={ref => {\n if (ref) {\n //eslint-disable-next-line\n this.spanRef = ReactDOM.findDOMNode(ref);\n ref.innerHTML = label || '';\n this.addDraggableFalseAttributes(ref);\n }\n }}\n >\n {' '}\n </span>\n {draggedLabel && (\n <span\n className={classnames(classes.chipLabel, isOver && classes.over, classes.dragged)}\n ref={ref => {\n if (ref) {\n //eslint-disable-next-line\n this.spanRef = ReactDOM.findDOMNode(ref);\n ref.innerHTML = draggedLabel || '';\n this.addDraggableFalseAttributes(ref);\n }\n }}\n >\n {' '}\n </span>\n )}\n </React.Fragment>\n }\n className={classnames(classes.chip, isOver && classes.over, {\n [classes.correct]: correct !== undefined && correct,\n [classes.incorrect]: correct !== undefined && !correct\n })}\n variant={disabled ? 'outlined' : undefined}\n style={{\n ...(this.state.height ? { height: this.state.height } : {})\n }}\n classes={{\n label: isOver && classes.over\n }}\n />\n );\n }\n}\n\nconst StyledBlankContent = useStyles(BlankContent);\n\nconst connectedBlankContent = useStyles(({ connectDragSource, connectDropTarget, ...props }) => {\n const { classes, isOver } = props;\n\n return connectDropTarget(\n connectDragSource(\n <span className={classnames(classes.content, isOver && classes.over)}>\n <StyledBlankContent {...props} />\n </span>\n )\n );\n});\n\nconst tileTarget = {\n drop(props, monitor) {\n const draggedItem = monitor.getItem();\n\n log('props.instanceId', props.instanceId, 'draggedItem.instanceId:', draggedItem.instanceId);\n\n if (draggedItem.id !== props.id) {\n props.onChange(props.id, draggedItem.choice.id);\n }\n\n return {\n dropped: draggedItem.id !== props.id\n };\n },\n canDrop(props, monitor) {\n const draggedItem = monitor.getItem();\n\n return draggedItem.instanceId === props.instanceId;\n }\n};\n\nconst DropTile = DropTarget(DRAG_TYPE, tileTarget, (connect, monitor) => ({\n connectDropTarget: connect.dropTarget(),\n isOver: monitor.isOver(),\n dragItem: monitor.getItem()\n}))(connectedBlankContent);\n\nconst tileSource = {\n canDrag(props) {\n return !props.disabled && !!props.choice;\n },\n beginDrag(props) {\n return {\n id: props.id,\n choice: props.choice,\n instanceId: props.instanceId,\n fromChoice: true\n };\n },\n endDrag(props, monitor) {\n // this will be null if it did not drop\n const dropResult = monitor.getDropResult();\n\n if (!dropResult || (dropResult.dropped && !props.duplicates)) {\n const draggedItem = monitor.getItem();\n\n if (draggedItem.fromChoice) {\n props.onChange(props.id, undefined);\n }\n }\n }\n};\n\nconst DragDropTile = DragSource(DRAG_TYPE, tileSource, (connect, monitor) => ({\n connectDragSource: connect.dragSource(),\n isDragging: monitor.isDragging()\n}))(DropTile);\n\nexport default DragDropTile;\n"],"file":"blank.js"}
1
+ {"version":3,"sources":["../../src/components/blank.jsx"],"names":["log","DRAG_TYPE","useStyles","content","border","color","primary","minWidth","chip","fontSize","minHeight","maxWidth","position","chipLabel","whiteSpace","display","padding","hidden","opacity","dragged","left","correct","incorrect","over","overflow","BlankContent","state","height","prevProps","rootRef","currentChoice","props","choice","prevChoice","JSON","stringify","setState","setTimeout","spanRef","offsetHeight","parent","childNodes","forEach","elem","Element","HTMLDocument","setAttribute","disabled","classes","isOver","dragItem","draggedLabel","value","label","ref","ReactDOM","findDOMNode","innerHTML","addDraggableFalseAttributes","undefined","React","Component","id","PropTypes","oneOfType","string","number","bool","duplicates","object","onChange","func","StyledBlankContent","connectedBlankContent","connectDragSource","connectDropTarget","tileTarget","drop","monitor","draggedItem","getItem","instanceId","dropped","canDrop","DropTile","connect","dropTarget","tileSource","canDrag","beginDrag","fromChoice","endDrag","dropResult","getDropResult","DragDropTile","dragSource","isDragging"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,IAAMA,GAAG,GAAG,uBAAM,2BAAN,CAAZ;AACO,IAAMC,SAAS,GAAG,WAAlB;;AAEP,IAAMC,SAAS,GAAG,wBAAW;AAAA,SAAO;AAClCC,IAAAA,OAAO,EAAE;AACPC,MAAAA,MAAM,sBAAeC,gBAAMC,OAAN,EAAf,CADC;AAEPC,MAAAA,QAAQ,EAAE;AAFH,KADyB;AAKlCC,IAAAA,IAAI,EAAE;AACJD,MAAAA,QAAQ,EAAE,MADN;AAEJE,MAAAA,QAAQ,EAAE,SAFN;AAGJC,MAAAA,SAAS,EAAE,MAHP;AAIJC,MAAAA,QAAQ,EAAE,OAJN;AAKJC,MAAAA,QAAQ,EAAE;AALN,KAL4B;AAYlCC,IAAAA,SAAS,EAAE;AACTC,MAAAA,UAAU,EAAE,UADH;AAET,eAAS;AACPC,QAAAA,OAAO,EAAE,OADF;AAEPC,QAAAA,OAAO,EAAE;AAFF;AAFA,KAZuB;AAmBlCC,IAAAA,MAAM,EAAE;AACNZ,MAAAA,KAAK,EAAE,aADD;AAENa,MAAAA,OAAO,EAAE;AAFH,KAnB0B;AAuBlCC,IAAAA,OAAO,EAAE;AACPP,MAAAA,QAAQ,EAAE,UADH;AAEPQ,MAAAA,IAAI,EAAE,EAFC;AAGPT,MAAAA,QAAQ,EAAE;AAHH,KAvByB;AA4BlCU,IAAAA,OAAO,EAAE;AACPjB,MAAAA,MAAM,sBAAeC,gBAAMgB,OAAN,EAAf;AADC,KA5ByB;AA+BlCC,IAAAA,SAAS,EAAE;AACTlB,MAAAA,MAAM,sBAAeC,gBAAMiB,SAAN,EAAf;AADG,KA/BuB;AAkClCC,IAAAA,IAAI,EAAE;AACJT,MAAAA,UAAU,EAAE,QADR;AAEJU,MAAAA,QAAQ,EAAE;AAFN;AAlC4B,GAAP;AAAA,CAAX,CAAlB;;IAwCaC,Y;;;;;AAaX,0BAAc;AAAA;;AAAA;;AACZ;AACA,UAAKC,KAAL,GAAa;AACXC,MAAAA,MAAM,EAAE;AADG,KAAb;AAFY;AAKb;;;;uCAEkBC,S,EAAW;AAAA;;AAC5B,qCAAW,KAAKC,OAAhB;AAD4B,UAEZC,aAFY,GAEM,KAAKC,KAFX,CAEpBC,MAFoB;AAAA,UAGZC,UAHY,GAGGL,SAHH,CAGpBI,MAHoB;;AAK5B,UAAIE,IAAI,CAACC,SAAL,CAAeL,aAAf,MAAkCI,IAAI,CAACC,SAAL,CAAeF,UAAf,CAAtC,EAAkE;AAChE,YAAI,CAACH,aAAL,EAAoB;AAClB,eAAKM,QAAL,CAAc;AACZT,YAAAA,MAAM,EAAE;AADI,WAAd;AAGA;AACD;;AACDU,QAAAA,UAAU,CAAC,YAAM;AACf,UAAA,MAAI,CAACD,QAAL,CAAc;AACZT,YAAAA,MAAM,EAAE,MAAI,CAACW,OAAL,CAAaC;AADT,WAAd;AAGD,SAJS,EAIP,GAJO,CAAV;AAKD;AACF;;;gDAE2BC,M,EAAQ;AAClCA,MAAAA,MAAM,CAACC,UAAP,CAAkBC,OAAlB,CAA0B,UAAAC,IAAI,EAAI;AAChC,YAAIA,IAAI,YAAYC,OAAhB,IAA2BD,IAAI,YAAYE,YAA/C,EAA6D;AAC3DF,UAAAA,IAAI,CAACG,YAAL,CAAkB,WAAlB,EAA+B,KAA/B;AACD;AACF,OAJD;AAKD;;;6BAEQ;AAAA;AAAA;;AAAA,wBAC0D,KAAKf,KAD/D;AAAA,UACCgB,QADD,eACCA,QADD;AAAA,UACWf,MADX,eACWA,MADX;AAAA,UACmBgB,OADnB,eACmBA,OADnB;AAAA,UAC4BC,MAD5B,eAC4BA,MAD5B;AAAA,UACoCC,QADpC,eACoCA,QADpC;AAAA,UAC8C7B,OAD9C,eAC8CA,OAD9C;AAEP,UAAM8B,YAAY,GAAGD,QAAQ,IAAID,MAAZ,IAAsBC,QAAQ,CAAClB,MAAT,CAAgBoB,KAA3D;AACA,UAAMC,KAAK,GAAGrB,MAAM,IAAIA,MAAM,CAACoB,KAA/B;AAEA,aACE,gCAAC,gBAAD;AACE,QAAA,GAAG,EAAE,aAAAE,KAAG,EAAI;AACV;AACA,UAAA,MAAI,CAACzB,OAAL,GAAe0B,qBAASC,WAAT,CAAqBF,KAArB,CAAf;AACD,SAJH;AAKE,QAAA,SAAS,EAAC,MALZ;AAME,QAAA,KAAK,EACH,gCAAC,iBAAD,CAAO,QAAP,QACE;AACE,UAAA,SAAS,EAAE,6BAAWN,OAAO,CAACnC,SAAnB,EAA8BoC,MAAM,IAAID,OAAO,CAACzB,IAAhD,sBACRyB,OAAO,CAAC/B,MADA,EACSkC,YADT,EADb;AAIE,UAAA,GAAG,EAAE,aAAAG,IAAG,EAAI;AACV,gBAAIA,IAAJ,EAAS;AACP;AACA,cAAA,MAAI,CAAChB,OAAL,GAAeiB,qBAASC,WAAT,CAAqBF,IAArB,CAAf;AACAA,cAAAA,IAAG,CAACG,SAAJ,GAAgBJ,KAAK,IAAI,EAAzB;;AACA,cAAA,MAAI,CAACK,2BAAL,CAAiCJ,IAAjC;AACD;AACF;AAXH,WAaG,GAbH,CADF,EAgBGH,YAAY,IACX;AACE,UAAA,SAAS,EAAE,6BAAWH,OAAO,CAACnC,SAAnB,EAA8BoC,MAAM,IAAID,OAAO,CAACzB,IAAhD,EAAsDyB,OAAO,CAAC7B,OAA9D,CADb;AAEE,UAAA,GAAG,EAAE,aAAAmC,KAAG,EAAI;AACV,gBAAIA,KAAJ,EAAS;AACP;AACA,cAAA,MAAI,CAAChB,OAAL,GAAeiB,qBAASC,WAAT,CAAqBF,KAArB,CAAf;AACAA,cAAAA,KAAG,CAACG,SAAJ,GAAgBN,YAAY,IAAI,EAAhC;;AACA,cAAA,MAAI,CAACO,2BAAL,CAAiCJ,KAAjC;AACD;AACF;AATH,WAWG,GAXH,CAjBJ,CAPJ;AAwCE,QAAA,SAAS,EAAE,6BAAWN,OAAO,CAACxC,IAAnB,EAAyByC,MAAM,IAAID,OAAO,CAACzB,IAA3C,oDACRyB,OAAO,CAAC3B,OADA,EACUA,OAAO,KAAKsC,SAAZ,IAAyBtC,OADnC,iCAER2B,OAAO,CAAC1B,SAFA,EAEYD,OAAO,KAAKsC,SAAZ,IAAyB,CAACtC,OAFtC,iBAxCb;AA4CE,QAAA,OAAO,EAAE0B,QAAQ,GAAG,UAAH,GAAgBY,SA5CnC;AA6CE,QAAA,KAAK,oBACC,KAAKjC,KAAL,CAAWC,MAAX,GAAoB;AAAEA,UAAAA,MAAM,EAAE,KAAKD,KAAL,CAAWC;AAArB,SAApB,GAAoD,EADrD,CA7CP;AAgDE,QAAA,OAAO,EAAE;AACP0B,UAAAA,KAAK,EAAEJ,MAAM,IAAID,OAAO,CAACzB;AADlB;AAhDX,QADF;AAsDD;;;;EA3G+BqC,kBAAMC,S;;;;gBAA3BpC,Y,eACQ;AACjBqC,EAAAA,EAAE,EAAEC,sBAAUC,SAAV,CAAoB,CAACD,sBAAUE,MAAX,EAAmBF,sBAAUG,MAA7B,CAApB,CADa;AAEjBnB,EAAAA,QAAQ,EAAEgB,sBAAUI,IAFH;AAGjBC,EAAAA,UAAU,EAAEL,sBAAUI,IAHL;AAIjBnC,EAAAA,MAAM,EAAE+B,sBAAUM,MAJD;AAKjBrB,EAAAA,OAAO,EAAEe,sBAAUM,MALF;AAMjBpB,EAAAA,MAAM,EAAEc,sBAAUI,IAND;AAOjBjB,EAAAA,QAAQ,EAAEa,sBAAUM,MAPH;AAQjBhD,EAAAA,OAAO,EAAE0C,sBAAUI,IARF;AASjBG,EAAAA,QAAQ,EAAEP,sBAAUQ;AATH,C;;AA6GrB,IAAMC,kBAAkB,GAAGtE,SAAS,CAACuB,YAAD,CAApC;AAEA,IAAMgD,qBAAqB,GAAGvE,SAAS,CAAC,iBAAwD;AAAA,MAArDwE,iBAAqD,SAArDA,iBAAqD;AAAA,MAAlCC,iBAAkC,SAAlCA,iBAAkC;AAAA,MAAZ5C,KAAY;;AAAA,MACtFiB,OADsF,GAClEjB,KADkE,CACtFiB,OADsF;AAAA,MAC7EC,MAD6E,GAClElB,KADkE,CAC7EkB,MAD6E;AAG9F,SAAO0B,iBAAiB,CACtBD,iBAAiB,CACf;AAAM,IAAA,SAAS,EAAE,6BAAW1B,OAAO,CAAC7C,OAAnB,EAA4B8C,MAAM,IAAID,OAAO,CAACzB,IAA9C;AAAjB,KACE,gCAAC,kBAAD,EAAwBQ,KAAxB,CADF,CADe,CADK,CAAxB;AAOD,CAVsC,CAAvC;AAYA,IAAM6C,UAAU,GAAG;AACjBC,EAAAA,IADiB,gBACZ9C,KADY,EACL+C,OADK,EACI;AACnB,QAAMC,WAAW,GAAGD,OAAO,CAACE,OAAR,EAApB;AAEAhF,IAAAA,GAAG,CAAC,kBAAD,EAAqB+B,KAAK,CAACkD,UAA3B,EAAuC,yBAAvC,EAAkEF,WAAW,CAACE,UAA9E,CAAH;;AAEA,QAAIF,WAAW,CAACjB,EAAZ,KAAmB/B,KAAK,CAAC+B,EAA7B,EAAiC;AAC/B/B,MAAAA,KAAK,CAACuC,QAAN,CAAevC,KAAK,CAAC+B,EAArB,EAAyBiB,WAAW,CAAC/C,MAAZ,CAAmB8B,EAA5C;AACD;;AAED,WAAO;AACLoB,MAAAA,OAAO,EAAEH,WAAW,CAACjB,EAAZ,KAAmB/B,KAAK,CAAC+B;AAD7B,KAAP;AAGD,GAbgB;AAcjBqB,EAAAA,OAdiB,mBAcTpD,KAdS,EAcF+C,OAdE,EAcO;AACtB,QAAMC,WAAW,GAAGD,OAAO,CAACE,OAAR,EAApB;AAEA,WAAOD,WAAW,CAACE,UAAZ,KAA2BlD,KAAK,CAACkD,UAAxC;AACD;AAlBgB,CAAnB;AAqBA,IAAMG,QAAQ,GAAG,sBAAWnF,SAAX,EAAsB2E,UAAtB,EAAkC,UAACS,OAAD,EAAUP,OAAV;AAAA,SAAuB;AACxEH,IAAAA,iBAAiB,EAAEU,OAAO,CAACC,UAAR,EADqD;AAExErC,IAAAA,MAAM,EAAE6B,OAAO,CAAC7B,MAAR,EAFgE;AAGxEC,IAAAA,QAAQ,EAAE4B,OAAO,CAACE,OAAR;AAH8D,GAAvB;AAAA,CAAlC,EAIbP,qBAJa,CAAjB;AAMA,IAAMc,UAAU,GAAG;AACjBC,EAAAA,OADiB,mBACTzD,KADS,EACF;AACb,WAAO,CAACA,KAAK,CAACgB,QAAP,IAAmB,CAAC,CAAChB,KAAK,CAACC,MAAlC;AACD,GAHgB;AAIjByD,EAAAA,SAJiB,qBAIP1D,KAJO,EAIA;AACf,WAAO;AACL+B,MAAAA,EAAE,EAAE/B,KAAK,CAAC+B,EADL;AAEL9B,MAAAA,MAAM,EAAED,KAAK,CAACC,MAFT;AAGLiD,MAAAA,UAAU,EAAElD,KAAK,CAACkD,UAHb;AAILS,MAAAA,UAAU,EAAE;AAJP,KAAP;AAMD,GAXgB;AAYjBC,EAAAA,OAZiB,mBAYT5D,KAZS,EAYF+C,OAZE,EAYO;AACtB;AACA,QAAMc,UAAU,GAAGd,OAAO,CAACe,aAAR,EAAnB;;AAEA,QAAI,CAACD,UAAD,IAAgBA,UAAU,CAACV,OAAX,IAAsB,CAACnD,KAAK,CAACqC,UAAjD,EAA8D;AAC5D,UAAMW,WAAW,GAAGD,OAAO,CAACE,OAAR,EAApB;;AAEA,UAAID,WAAW,CAACW,UAAhB,EAA4B;AAC1B3D,QAAAA,KAAK,CAACuC,QAAN,CAAevC,KAAK,CAAC+B,EAArB,EAAyBH,SAAzB;AACD;AACF;AACF;AAvBgB,CAAnB;AA0BA,IAAMmC,YAAY,GAAG,sBAAW7F,SAAX,EAAsBsF,UAAtB,EAAkC,UAACF,OAAD,EAAUP,OAAV;AAAA,SAAuB;AAC5EJ,IAAAA,iBAAiB,EAAEW,OAAO,CAACU,UAAR,EADyD;AAE5EC,IAAAA,UAAU,EAAElB,OAAO,CAACkB,UAAR;AAFgE,GAAvB;AAAA,CAAlC,EAGjBZ,QAHiB,CAArB;eAKeU,Y","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport debug from 'debug';\nimport { DragSource, DropTarget } from '@pie-lib/drag';\nimport { withStyles } from '@material-ui/core/styles';\nimport Chip from '@material-ui/core/Chip';\nimport classnames from 'classnames';\nimport { color } from '@pie-lib/render-ui';\nconst log = debug('pie-lib:mask-markup:blank');\nexport const DRAG_TYPE = 'MaskBlank';\n\nconst useStyles = withStyles(() => ({\n content: {\n border: `solid 0px ${color.primary()}`,\n minWidth: '200px'\n },\n chip: {\n minWidth: '90px',\n fontSize: 'inherit',\n minHeight: '32px',\n maxWidth: '374px',\n position: 'relative'\n },\n chipLabel: {\n whiteSpace: 'pre-wrap',\n '& img': {\n display: 'block',\n padding: '2px 0'\n }\n },\n hidden: {\n color: 'transparent',\n opacity: 0\n },\n dragged: {\n position: 'absolute',\n left: 14,\n maxWidth: '60px'\n },\n correct: {\n border: `solid 1px ${color.correct()}`\n },\n incorrect: {\n border: `solid 1px ${color.incorrect()}`\n },\n over: {\n whiteSpace: 'nowrap',\n overflow: 'hidden'\n }\n}));\n\nexport class BlankContent extends React.Component {\n static propTypes = {\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n disabled: PropTypes.bool,\n duplicates: PropTypes.bool,\n choice: PropTypes.object,\n classes: PropTypes.object,\n isOver: PropTypes.bool,\n dragItem: PropTypes.object,\n correct: PropTypes.bool,\n onChange: PropTypes.func\n };\n\n constructor() {\n super();\n this.state = {\n height: 0\n };\n }\n\n componentDidUpdate(prevProps) {\n renderMath(this.rootRef);\n const { choice: currentChoice } = this.props;\n const { choice: prevChoice } = prevProps;\n\n if (JSON.stringify(currentChoice) !== JSON.stringify(prevChoice)) {\n if (!currentChoice) {\n this.setState({\n height: 0\n });\n return;\n }\n setTimeout(() => {\n this.setState({\n height: this.spanRef.offsetHeight\n });\n }, 300);\n }\n }\n\n addDraggableFalseAttributes(parent) {\n parent.childNodes.forEach(elem => {\n if (elem instanceof Element || elem instanceof HTMLDocument) {\n elem.setAttribute('draggable', false);\n }\n });\n }\n\n render() {\n const { disabled, choice, classes, isOver, dragItem, correct } = this.props;\n const draggedLabel = dragItem && isOver && dragItem.choice.value;\n const label = choice && choice.value;\n\n return (\n <Chip\n ref={ref => {\n //eslint-disable-next-line\n this.rootRef = ReactDOM.findDOMNode(ref);\n }}\n component=\"span\"\n label={\n <React.Fragment>\n <span\n className={classnames(classes.chipLabel, isOver && classes.over, {\n [classes.hidden]: draggedLabel\n })}\n ref={ref => {\n if (ref) {\n //eslint-disable-next-line\n this.spanRef = ReactDOM.findDOMNode(ref);\n ref.innerHTML = label || '';\n this.addDraggableFalseAttributes(ref);\n }\n }}\n >\n {' '}\n </span>\n {draggedLabel && (\n <span\n className={classnames(classes.chipLabel, isOver && classes.over, classes.dragged)}\n ref={ref => {\n if (ref) {\n //eslint-disable-next-line\n this.spanRef = ReactDOM.findDOMNode(ref);\n ref.innerHTML = draggedLabel || '';\n this.addDraggableFalseAttributes(ref);\n }\n }}\n >\n {' '}\n </span>\n )}\n </React.Fragment>\n }\n className={classnames(classes.chip, isOver && classes.over, {\n [classes.correct]: correct !== undefined && correct,\n [classes.incorrect]: correct !== undefined && !correct\n })}\n variant={disabled ? 'outlined' : undefined}\n style={{\n ...(this.state.height ? { height: this.state.height } : {})\n }}\n classes={{\n label: isOver && classes.over\n }}\n />\n );\n }\n}\n\nconst StyledBlankContent = useStyles(BlankContent);\n\nconst connectedBlankContent = useStyles(({ connectDragSource, connectDropTarget, ...props }) => {\n const { classes, isOver } = props;\n\n return connectDropTarget(\n connectDragSource(\n <span className={classnames(classes.content, isOver && classes.over)}>\n <StyledBlankContent {...props} />\n </span>\n )\n );\n});\n\nconst tileTarget = {\n drop(props, monitor) {\n const draggedItem = monitor.getItem();\n\n log('props.instanceId', props.instanceId, 'draggedItem.instanceId:', draggedItem.instanceId);\n\n if (draggedItem.id !== props.id) {\n props.onChange(props.id, draggedItem.choice.id);\n }\n\n return {\n dropped: draggedItem.id !== props.id\n };\n },\n canDrop(props, monitor) {\n const draggedItem = monitor.getItem();\n\n return draggedItem.instanceId === props.instanceId;\n }\n};\n\nconst DropTile = DropTarget(DRAG_TYPE, tileTarget, (connect, monitor) => ({\n connectDropTarget: connect.dropTarget(),\n isOver: monitor.isOver(),\n dragItem: monitor.getItem()\n}))(connectedBlankContent);\n\nconst tileSource = {\n canDrag(props) {\n return !props.disabled && !!props.choice;\n },\n beginDrag(props) {\n return {\n id: props.id,\n choice: props.choice,\n instanceId: props.instanceId,\n fromChoice: true\n };\n },\n endDrag(props, monitor) {\n // this will be null if it did not drop\n const dropResult = monitor.getDropResult();\n\n if (!dropResult || (dropResult.dropped && !props.duplicates)) {\n const draggedItem = monitor.getItem();\n\n if (draggedItem.fromChoice) {\n props.onChange(props.id, undefined);\n }\n }\n }\n};\n\nconst DragDropTile = DragSource(DRAG_TYPE, tileSource, (connect, monitor) => ({\n connectDragSource: connect.dragSource(),\n isDragging: monitor.isDragging()\n}))(DropTile);\n\nexport default DragDropTile;\n"],"file":"blank.js"}
package/lib/components/correct-input.js CHANGED
@@ -36,6 +36,7 @@ var _default = (0, _styles.withStyles)(function () {
36
36
  input: {
37
37
  color: _renderUi.color.text(),
38
38
  backgroundColor: _renderUi.color.background(),
39
+ borderRadius: '4px !important',
39
40
  borderWidth: '1px',
40
41
  borderStyle: 'solid',
41
42
  padding: '10px 20px 10px 10px',
@@ -59,6 +60,8 @@ var _default = (0, _styles.withStyles)(function () {
59
60
  fontSize: 'inherit'
60
61
  },
61
62
  outlinedInput: {
63
+ padding: '2px',
64
+ borderRadius: '4px',
62
65
  '& fieldset': {
63
66
  border: 0
64
67
  }
@@ -74,14 +77,24 @@ var _default = (0, _styles.withStyles)(function () {
74
77
  isBox = props.isBox,
75
78
  classes = props.classes,
76
79
  disabled = props.disabled,
77
- rest = _objectWithoutProperties(props, ["correct", "isBox", "classes", "disabled"]);
80
+ maxLength = props.maxLength,
81
+ rest = _objectWithoutProperties(props, ["correct", "isBox", "classes", "disabled", "maxLength"]);
78
82
 
79
83
  var label = typeof correct === 'boolean' ? correct ? 'correct' : 'incorrect' : undefined;
84
+ var extraSpace = maxLength ? maxLength / 10 + 1 : 0; // used for capital letters
85
+
86
+ var inputProps = maxLength ? {
87
+ maxLength: maxLength,
88
+ style: {
89
+ width: "".concat(maxLength + extraSpace, "ch")
90
+ }
91
+ } : {};
80
92
  return _react["default"].createElement(_OutlinedInput["default"], _extends({
81
93
  className: (0, _classnames3["default"])((_classnames = {}, _defineProperty(_classnames, classes.disabledInput, disabled), _defineProperty(_classnames, classes.box, isBox), _defineProperty(_classnames, classes.outlinedInput, true), _classnames)),
82
94
  classes: {
83
95
  input: (0, _classnames3["default"])((_classnames2 = {}, _defineProperty(_classnames2, classes.input, true), _defineProperty(_classnames2, classes[label], label), _classnames2))
84
96
  },
97
+ inputProps: inputProps,
85
98
  labelWidth: 0,
86
99
  disabled: disabled
87
100
  }, rest));
package/lib/components/correct-input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/correct-input.jsx"],"names":["correctStyle","color","borderColor","input","text","backgroundColor","background","borderWidth","borderStyle","padding","opacity","cursor","primary","primaryDark","correct","incorrect","box","fontSize","outlinedInput","border","notchedOutline","props","isBox","classes","disabled","rest","label","undefined","disabledInput"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,YAAY,GAAG,SAAfA,YAAe,CAAAC,KAAK;AAAA,SAAK;AAC7BC,IAAAA,WAAW,YAAKD,KAAL;AADkB,GAAL;AAAA,CAA1B;;eAIe,wBAAW;AAAA,SAAO;AAC/BE,IAAAA,KAAK,EAAE;AACLF,MAAAA,KAAK,EAAEA,gBAAMG,IAAN,EADF;AAELC,MAAAA,eAAe,EAAEJ,gBAAMK,UAAN,EAFZ;AAGLC,MAAAA,WAAW,EAAE,KAHR;AAILC,MAAAA,WAAW,EAAE,OAJR;AAKLC,MAAAA,OAAO,EAAE,qBALJ;AAML,oBAAc;AACZC,QAAAA,OAAO,EAAE,GADG;AAEZC,QAAAA,MAAM,EAAE;AAFI,OANT;AAUL,iBAAW;AACTT,QAAAA,WAAW,EAAED,gBAAMW,OAAN,EADJ;AAET,sBAAc;AACZV,UAAAA,WAAW,EAAE;AADD;AAFL,OAVN;AAgBL,iBAAW;AACTA,QAAAA,WAAW,EAAED,gBAAMY,WAAN;AADJ;AAhBN,KADwB;AAqB/BC,IAAAA,OAAO,EAAEd,YAAY,CAACC,gBAAMa,OAAN,EAAD,CArBU;AAsB/BC,IAAAA,SAAS,EAAEf,YAAY,CAACC,gBAAMc,SAAN,EAAD,CAtBQ;AAuB/BC,IAAAA,GAAG,EAAE;AACHC,MAAAA,QAAQ,EAAE;AADP,KAvB0B;AA0B/BC,IAAAA,aAAa,EAAE;AACb,oBAAc;AACZC,QAAAA,MAAM,EAAE;AADI;AADD,KA1BgB;AA+B/BC,IAAAA,cAAc,EAAE;AACdlB,MAAAA,WAAW,EAAED,gBAAMa,OAAN;AADC;AA/Be,GAAP;AAAA,CAAX,EAkCX,UAAAO,KAAK,EAAI;AAAA;;AAAA,MACHP,OADG,GAC4CO,KAD5C,CACHP,OADG;AAAA,MACMQ,KADN,GAC4CD,KAD5C,CACMC,KADN;AAAA,MACaC,OADb,GAC4CF,KAD5C,CACaE,OADb;AAAA,MACsBC,QADtB,GAC4CH,KAD5C,CACsBG,QADtB;AAAA,MACmCC,IADnC,4BAC4CJ,KAD5C;;AAEX,MAAMK,KAAK,GAAG,OAAOZ,OAAP,KAAmB,SAAnB,GAAgCA,OAAO,GAAG,SAAH,GAAe,WAAtD,GAAqEa,SAAnF;AAEA,SACE,gCAAC,yBAAD;AACE,IAAA,SAAS,EAAE,6EACRJ,OAAO,CAACK,aADA,EACgBJ,QADhB,gCAERD,OAAO,CAACP,GAFA,EAEMM,KAFN,gCAGRC,OAAO,CAACL,aAHA,EAGgB,IAHhB,gBADb;AAME,IAAA,OAAO,EAAE;AACPf,MAAAA,KAAK,EAAE,+EAAcoB,OAAO,CAACpB,KAAtB,EAA8B,IAA9B,iCAAqCoB,OAAO,CAACG,KAAD,CAA5C,EAAsDA,KAAtD;AADA,KANX;AASE,IAAA,UAAU,EAAE,CATd;AAUE,IAAA,QAAQ,EAAEF;AAVZ,KAWMC,IAXN,EADF;AAeD,CArDc,C","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 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 correct: correctStyle(color.correct()),\n incorrect: correctStyle(color.incorrect()),\n box: {\n fontSize: 'inherit'\n },\n outlinedInput: {\n '& fieldset': {\n border: 0\n }\n },\n notchedOutline: {\n borderColor: color.correct()\n }\n}))(props => {\n const { correct, isBox, classes, disabled, ...rest } = props;\n const label = typeof correct === 'boolean' ? (correct ? 'correct' : 'incorrect') : undefined;\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({ [classes.input]: true, [classes[label]]: label })\n }}\n labelWidth={0}\n disabled={disabled}\n {...rest}\n />\n );\n});\n"],"file":"correct-input.js"}
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","isBox","classes","disabled","maxLength","rest","label","undefined","extraSpace","inputProps","style","width","disabledInput"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,YAAY,GAAG,SAAfA,YAAe,CAAAC,KAAK;AAAA,SAAK;AAC7BC,IAAAA,WAAW,YAAKD,KAAL;AADkB,GAAL;AAAA,CAA1B;;eAIe,wBAAW;AAAA,SAAO;AAC/BE,IAAAA,KAAK,EAAE;AACLF,MAAAA,KAAK,EAAEA,gBAAMG,IAAN,EADF;AAELC,MAAAA,eAAe,EAAEJ,gBAAMK,UAAN,EAFZ;AAGLC,MAAAA,YAAY,EAAE,gBAHT;AAILC,MAAAA,WAAW,EAAE,KAJR;AAKLC,MAAAA,WAAW,EAAE,OALR;AAMLC,MAAAA,OAAO,EAAE,qBANJ;AAOL,oBAAc;AACZC,QAAAA,OAAO,EAAE,GADG;AAEZC,QAAAA,MAAM,EAAE;AAFI,OAPT;AAWL,iBAAW;AACTV,QAAAA,WAAW,EAAED,gBAAMY,OAAN,EADJ;AAET,sBAAc;AACZX,UAAAA,WAAW,EAAE;AADD;AAFL,OAXN;AAiBL,iBAAW;AACTA,QAAAA,WAAW,EAAED,gBAAMa,WAAN;AADJ;AAjBN,KADwB;AAsB/BC,IAAAA,OAAO,EAAEf,YAAY,CAACC,gBAAMc,OAAN,EAAD,CAtBU;AAuB/BC,IAAAA,SAAS,EAAEhB,YAAY,CAACC,gBAAMe,SAAN,EAAD,CAvBQ;AAwB/BC,IAAAA,GAAG,EAAE;AACHC,MAAAA,QAAQ,EAAE;AADP,KAxB0B;AA2B/BC,IAAAA,aAAa,EAAE;AACbT,MAAAA,OAAO,EAAE,KADI;AAEbH,MAAAA,YAAY,EAAE,KAFD;AAGb,oBAAc;AACZa,QAAAA,MAAM,EAAE;AADI;AAHD,KA3BgB;AAkC/BC,IAAAA,cAAc,EAAE;AACdnB,MAAAA,WAAW,EAAED,gBAAMc,OAAN;AADC;AAlCe,GAAP;AAAA,CAAX,EAqCX,UAAAO,KAAK,EAAI;AAAA;;AAAA,MACHP,OADG,GACuDO,KADvD,CACHP,OADG;AAAA,MACMQ,KADN,GACuDD,KADvD,CACMC,KADN;AAAA,MACaC,OADb,GACuDF,KADvD,CACaE,OADb;AAAA,MACsBC,QADtB,GACuDH,KADvD,CACsBG,QADtB;AAAA,MACgCC,SADhC,GACuDJ,KADvD,CACgCI,SADhC;AAAA,MAC8CC,IAD9C,4BACuDL,KADvD;;AAEX,MAAMM,KAAK,GAAG,OAAOb,OAAP,KAAmB,SAAnB,GAAgCA,OAAO,GAAG,SAAH,GAAe,WAAtD,GAAqEc,SAAnF;AACA,MAAMC,UAAU,GAAGJ,SAAS,GAAGA,SAAS,GAAG,EAAZ,GAAiB,CAApB,GAAwB,CAApD,CAHW,CAG4C;;AACvD,MAAMK,UAAU,GAAGL,SAAS,GACxB;AACEA,IAAAA,SAAS,EAAEA,SADb;AAEEM,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,YAAKP,SAAS,GAAGI,UAAjB;AADA;AAFT,GADwB,GAOxB,EAPJ;AASA,SACE,gCAAC,yBAAD;AACE,IAAA,SAAS,EAAE,6EACRN,OAAO,CAACU,aADA,EACgBT,QADhB,gCAERD,OAAO,CAACP,GAFA,EAEMM,KAFN,gCAGRC,OAAO,CAACL,aAHA,EAGgB,IAHhB,gBADb;AAME,IAAA,OAAO,EAAE;AACPhB,MAAAA,KAAK,EAAE,+EAAcqB,OAAO,CAACrB,KAAtB,EAA8B,IAA9B,iCAAqCqB,OAAO,CAACI,KAAD,CAA5C,EAAsDA,KAAtD;AADA,KANX;AASE,IAAA,UAAU,EAAEG,UATd;AAUE,IAAA,UAAU,EAAE,CAVd;AAWE,IAAA,QAAQ,EAAEN;AAXZ,KAYME,IAZN,EADF;AAgBD,CAlEc,C","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 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 { correct, isBox, classes, disabled, maxLength, ...rest } = props;\n const label = typeof correct === 'boolean' ? (correct ? 'correct' : 'incorrect') : undefined;\n const extraSpace = maxLength ? maxLength / 10 + 1 : 0; // used for capital letters\n const inputProps = maxLength\n ? {\n maxLength: maxLength,\n style: {\n width: `${maxLength + extraSpace}ch`\n }\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({ [classes.input]: true, [classes[label]]: label })\n }}\n inputProps={inputProps}\n labelWidth={0}\n disabled={disabled}\n {...rest}\n />\n );\n});\n"],"file":"correct-input.js"}
package/lib/components/dropdown.js CHANGED
@@ -93,7 +93,8 @@ function (_React$Component) {
93
93
  classes: {
94
94
  root: classes.root,
95
95
  icon: classes.icon,
96
- selectMenu: classes.selectMenu
96
+ selectMenu: classes.selectMenu,
97
+ select: classes.select
97
98
  },
98
99
  disabled: disabled,
99
100
  value: value || '',
@@ -165,6 +166,11 @@ var styles = function styles() {
165
166
  backgroundColor: _renderUi.color.background()
166
167
  }
167
168
  },
169
+ select: {
170
+ '&:focus': {
171
+ borderRadius: '4px'
172
+ }
173
+ },
168
174
  selectMenu: {
169
175
  backgroundColor: _renderUi.color.background(),
170
176
  '&:hover': {
package/lib/components/dropdown.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/dropdown.jsx"],"names":["Dropdown","props","setState","showCheckmark","open","state","classes","id","correct","disabled","value","onChange","choices","showCorrectAnswer","root","icon","selectMenu","showCheckmarkAndOpen","hideCheckmarkAndClose","keepMounted","disablePortal","e","target","map","c","index","menuRoot","selected","label","__html","React","Component","PropTypes","string","bool","func","object","arrayOf","shape","styles","color","text","backgroundColor","background","borderColor","secondaryLight","paddingTop","paddingBottom","border","borderRadius","boxSizing","padding","fontSize"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Select from '@material-ui/core/Select';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport CorrectInput from './correct-input';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/render-ui';\n\nclass Dropdown extends React.Component {\n static propTypes = {\n id: PropTypes.string,\n value: PropTypes.string,\n disabled: PropTypes.bool,\n onChange: PropTypes.func,\n classes: PropTypes.object,\n correct: PropTypes.bool,\n choices: PropTypes.arrayOf(\n PropTypes.shape({ value: PropTypes.string, label: PropTypes.string })\n ),\n showCorrectAnswer: PropTypes.bool\n };\n\n constructor(props) {\n super(props);\n\n this.state = {\n showCheckmark: false,\n open: false\n };\n }\n\n showCheckmarkAndOpen = () => {\n this.setState({\n showCheckmark: true,\n open: true\n });\n };\n\n hideCheckmarkAndClose = () => {\n this.setState({\n showCheckmark: false,\n open: false\n });\n };\n\n render() {\n const {\n classes,\n id,\n correct,\n disabled,\n value,\n onChange,\n choices,\n showCorrectAnswer\n } = this.props;\n\n const { showCheckmark, open } = this.state;\n\n return (\n <Select\n classes={{ root: classes.root, icon: classes.icon, selectMenu: classes.selectMenu }}\n disabled={disabled}\n value={value || ''}\n onOpen={this.showCheckmarkAndOpen}\n onClose={this.hideCheckmarkAndClose}\n open={open}\n input={<CorrectInput correct={showCorrectAnswer || correct} />}\n MenuProps={{\n keepMounted: true,\n disablePortal: true\n }}\n onChange={e => {\n onChange(id, e.target.value);\n }}\n >\n {(choices || []).map((c, index) => (\n <MenuItem\n classes={{ root: classes.menuRoot, selected: classes.selected }}\n key={`${c.label}-${index}`}\n value={c.value}\n >\n <span\n className={classes.label}\n dangerouslySetInnerHTML={{\n __html: c.label\n }}\n />\n {showCheckmark && (\n <span\n className={classes.label}\n dangerouslySetInnerHTML={{ __html: c.value === value ? ' &check;' : '' }}\n />\n )}\n </MenuItem>\n ))}\n </Select>\n );\n }\n}\n\nconst styles = () => ({\n root: {\n color: color.text(),\n backgroundColor: color.background(),\n borderColor: color.secondaryLight(),\n '& ul': {\n paddingTop: 0,\n paddingBottom: 0,\n border: `1px solid ${color.text()}`,\n borderRadius: '5px',\n color: color.text(),\n backgroundColor: color.background()\n }\n },\n selectMenu: {\n backgroundColor: color.background(),\n '&:hover': {\n borderColor: 'initial'\n },\n '&:focus': {\n borderColor: 'initial'\n }\n },\n icon: {\n color: color.text()\n },\n selected: {\n color: `${color.text()} !important`,\n backgroundColor: `${color.background()} !important`,\n '&:hover': {\n color: color.text(),\n backgroundColor: `${color.secondaryLight()} !important`\n }\n },\n menuRoot: {\n color: color.text(),\n backgroundColor: color.background(),\n '&:focus': {\n color: color.text(),\n backgroundColor: color.background()\n },\n '&:hover': {\n color: color.text(),\n backgroundColor: color.secondaryLight()\n },\n boxSizing: 'border-box',\n padding: '25px',\n '&:first-of-type': {\n borderRadius: '3px 3px 0 0'\n },\n '&:last-of-type': {\n borderRadius: '0 0 3px 3px'\n }\n },\n label: {\n fontSize: 'max(1rem, 14px)'\n }\n});\n\nexport default withStyles(styles)(Dropdown);\n"],"file":"dropdown.js"}
1
+ {"version":3,"sources":["../../src/components/dropdown.jsx"],"names":["Dropdown","props","setState","showCheckmark","open","state","classes","id","correct","disabled","value","onChange","choices","showCorrectAnswer","root","icon","selectMenu","select","showCheckmarkAndOpen","hideCheckmarkAndClose","keepMounted","disablePortal","e","target","map","c","index","menuRoot","selected","label","__html","React","Component","PropTypes","string","bool","func","object","arrayOf","shape","styles","color","text","backgroundColor","background","borderColor","secondaryLight","paddingTop","paddingBottom","border","borderRadius","boxSizing","padding","fontSize"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Select from '@material-ui/core/Select';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport CorrectInput from './correct-input';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/render-ui';\n\nclass Dropdown extends React.Component {\n static propTypes = {\n id: PropTypes.string,\n value: PropTypes.string,\n disabled: PropTypes.bool,\n onChange: PropTypes.func,\n classes: PropTypes.object,\n correct: PropTypes.bool,\n choices: PropTypes.arrayOf(\n PropTypes.shape({ value: PropTypes.string, label: PropTypes.string })\n ),\n showCorrectAnswer: PropTypes.bool\n };\n\n constructor(props) {\n super(props);\n\n this.state = {\n showCheckmark: false,\n open: false\n };\n }\n\n showCheckmarkAndOpen = () => {\n this.setState({\n showCheckmark: true,\n open: true\n });\n };\n\n hideCheckmarkAndClose = () => {\n this.setState({\n showCheckmark: false,\n open: false\n });\n };\n\n render() {\n const {\n classes,\n id,\n correct,\n disabled,\n value,\n onChange,\n choices,\n showCorrectAnswer\n } = this.props;\n\n const { showCheckmark, open } = this.state;\n\n return (\n <Select\n classes={{\n root: classes.root,\n icon: classes.icon,\n selectMenu: classes.selectMenu,\n select: classes.select\n }}\n disabled={disabled}\n value={value || ''}\n onOpen={this.showCheckmarkAndOpen}\n onClose={this.hideCheckmarkAndClose}\n open={open}\n input={<CorrectInput correct={showCorrectAnswer || correct} />}\n MenuProps={{\n keepMounted: true,\n disablePortal: true\n }}\n onChange={e => {\n onChange(id, e.target.value);\n }}\n >\n {(choices || []).map((c, index) => (\n <MenuItem\n classes={{ root: classes.menuRoot, selected: classes.selected }}\n key={`${c.label}-${index}`}\n value={c.value}\n >\n <span\n className={classes.label}\n dangerouslySetInnerHTML={{\n __html: c.label\n }}\n />\n {showCheckmark && (\n <span\n className={classes.label}\n dangerouslySetInnerHTML={{ __html: c.value === value ? ' &check;' : '' }}\n />\n )}\n </MenuItem>\n ))}\n </Select>\n );\n }\n}\n\nconst styles = () => ({\n root: {\n color: color.text(),\n backgroundColor: color.background(),\n borderColor: color.secondaryLight(),\n '& ul': {\n paddingTop: 0,\n paddingBottom: 0,\n border: `1px solid ${color.text()}`,\n borderRadius: '5px',\n color: color.text(),\n backgroundColor: color.background()\n }\n },\n select: {\n '&:focus': {\n borderRadius: '4px'\n }\n },\n selectMenu: {\n backgroundColor: color.background(),\n '&:hover': {\n borderColor: 'initial'\n },\n '&:focus': {\n borderColor: 'initial'\n }\n },\n icon: {\n color: color.text()\n },\n selected: {\n color: `${color.text()} !important`,\n backgroundColor: `${color.background()} !important`,\n '&:hover': {\n color: color.text(),\n backgroundColor: `${color.secondaryLight()} !important`\n }\n },\n menuRoot: {\n color: color.text(),\n backgroundColor: color.background(),\n '&:focus': {\n color: color.text(),\n backgroundColor: color.background()\n },\n '&:hover': {\n color: color.text(),\n backgroundColor: color.secondaryLight()\n },\n boxSizing: 'border-box',\n padding: '25px',\n '&:first-of-type': {\n borderRadius: '3px 3px 0 0'\n },\n '&:last-of-type': {\n borderRadius: '0 0 3px 3px'\n }\n },\n label: {\n fontSize: 'max(1rem, 14px)'\n }\n});\n\nexport default withStyles(styles)(Dropdown);\n"],"file":"dropdown.js"}
package/lib/components/input.js CHANGED
@@ -19,13 +19,15 @@ var Input = function Input(_ref) {
19
19
  id = _ref.id,
20
20
  value = _ref.value,
21
21
  _onChange = _ref.onChange,
22
- showCorrectAnswer = _ref.showCorrectAnswer;
22
+ showCorrectAnswer = _ref.showCorrectAnswer,
23
+ maxLength = _ref.maxLength;
23
24
  return _react["default"].createElement(_correctInput["default"], {
24
25
  disabled: disabled,
25
26
  correct: showCorrectAnswer || correct,
26
27
  variant: "outlined",
27
28
  value: value,
28
29
  isBox: true,
30
+ maxLength: maxLength,
29
31
  onChange: function onChange(e) {
30
32
  _onChange(id, e.target.value);
31
33
  }
package/lib/components/input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/input.jsx"],"names":["Input","disabled","correct","id","value","onChange","showCorrectAnswer","e","target","propTypes","PropTypes","string","func","bool"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAEA,IAAMA,KAAK,GAAG,SAARA,KAAQ,OAAmE;AAAA,MAAhEC,QAAgE,QAAhEA,QAAgE;AAAA,MAAtDC,OAAsD,QAAtDA,OAAsD;AAAA,MAA7CC,EAA6C,QAA7CA,EAA6C;AAAA,MAAzCC,KAAyC,QAAzCA,KAAyC;AAAA,MAAlCC,SAAkC,QAAlCA,QAAkC;AAAA,MAAxBC,iBAAwB,QAAxBA,iBAAwB;AAC/E,SACE,gCAAC,wBAAD;AACE,IAAA,QAAQ,EAAEL,QADZ;AAEE,IAAA,OAAO,EAAEK,iBAAiB,IAAIJ,OAFhC;AAGE,IAAA,OAAO,EAAC,UAHV;AAIE,IAAA,KAAK,EAAEE,KAJT;AAKE,IAAA,KAAK,EAAE,IALT;AAME,IAAA,QAAQ,EAAE,kBAAAG,CAAC,EAAI;AACbF,MAAAA,SAAQ,CAACF,EAAD,EAAKI,CAAC,CAACC,MAAF,CAASJ,KAAd,CAAR;AACD;AARH,IADF;AAYD,CAbD;;AAcAJ,KAAK,CAACS,SAAN,GAAkB;AAChBN,EAAAA,EAAE,EAAEO,sBAAUC,MADE;AAEhBP,EAAAA,KAAK,EAAEM,sBAAUC,MAFD;AAGhBN,EAAAA,QAAQ,EAAEK,sBAAUE,IAHJ;AAIhBX,EAAAA,QAAQ,EAAES,sBAAUG,IAJJ;AAKhBX,EAAAA,OAAO,EAAEQ,sBAAUG,IALH;AAMhBP,EAAAA,iBAAiB,EAAEI,sBAAUG;AANb,CAAlB;eASeb,K","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport CorrectInput from './correct-input';\n\nconst Input = ({ disabled, correct, id, value, onChange, showCorrectAnswer }) => {\n return (\n <CorrectInput\n disabled={disabled}\n correct={showCorrectAnswer || correct}\n variant=\"outlined\"\n value={value}\n isBox={true}\n onChange={e => {\n onChange(id, e.target.value);\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"}
1
+ {"version":3,"sources":["../../src/components/input.jsx"],"names":["Input","disabled","correct","id","value","onChange","showCorrectAnswer","maxLength","e","target","propTypes","PropTypes","string","func","bool"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAEA,IAAMA,KAAK,GAAG,SAARA,KAAQ,OAA8E;AAAA,MAA3EC,QAA2E,QAA3EA,QAA2E;AAAA,MAAjEC,OAAiE,QAAjEA,OAAiE;AAAA,MAAxDC,EAAwD,QAAxDA,EAAwD;AAAA,MAApDC,KAAoD,QAApDA,KAAoD;AAAA,MAA7CC,SAA6C,QAA7CA,QAA6C;AAAA,MAAnCC,iBAAmC,QAAnCA,iBAAmC;AAAA,MAAhBC,SAAgB,QAAhBA,SAAgB;AAC1F,SACE,gCAAC,wBAAD;AACE,IAAA,QAAQ,EAAEN,QADZ;AAEE,IAAA,OAAO,EAAEK,iBAAiB,IAAIJ,OAFhC;AAGE,IAAA,OAAO,EAAC,UAHV;AAIE,IAAA,KAAK,EAAEE,KAJT;AAKE,IAAA,KAAK,EAAE,IALT;AAME,IAAA,SAAS,EAAEG,SANb;AAOE,IAAA,QAAQ,EAAE,kBAAAC,CAAC,EAAI;AACbH,MAAAA,SAAQ,CAACF,EAAD,EAAKK,CAAC,CAACC,MAAF,CAASL,KAAd,CAAR;AACD;AATH,IADF;AAaD,CAdD;;AAeAJ,KAAK,CAACU,SAAN,GAAkB;AAChBP,EAAAA,EAAE,EAAEQ,sBAAUC,MADE;AAEhBR,EAAAA,KAAK,EAAEO,sBAAUC,MAFD;AAGhBP,EAAAA,QAAQ,EAAEM,sBAAUE,IAHJ;AAIhBZ,EAAAA,QAAQ,EAAEU,sBAAUG,IAJJ;AAKhBZ,EAAAA,OAAO,EAAES,sBAAUG,IALH;AAMhBR,EAAAA,iBAAiB,EAAEK,sBAAUG;AANb,CAAlB;eASed,K","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport CorrectInput from './correct-input';\n\nconst Input = ({ disabled, correct, id, value, onChange, showCorrectAnswer, maxLength }) => {\n return (\n <CorrectInput\n disabled={disabled}\n correct={showCorrectAnswer || correct}\n variant=\"outlined\"\n value={value}\n isBox={true}\n maxLength={maxLength}\n onChange={e => {\n onChange(id, e.target.value);\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"}
package/lib/constructed-response.js CHANGED
@@ -20,7 +20,8 @@ var _default = (0, _withMask.withMask)('input', function (props) {
20
20
  if (dataset.component === 'input') {
21
21
  var disabled = props.disabled,
22
22
  feedback = props.feedback,
23
- showCorrectAnswer = props.showCorrectAnswer; // the first answer is the correct one
23
+ showCorrectAnswer = props.showCorrectAnswer,
24
+ maxLength = props.maxLength; // the first answer is the correct one
24
25
 
25
26
  var correctAnswer = (props.choices && dataset && props.choices[dataset.id] || [])[0];
26
27
  var finalValue = showCorrectAnswer ? correctAnswer && correctAnswer.label : data[dataset.id] || '';
@@ -31,7 +32,8 @@ var _default = (0, _withMask.withMask)('input', function (props) {
31
32
  value: finalValue,
32
33
  id: dataset.id,
33
34
  onChange: onChange,
34
- showCorrectAnswer: showCorrectAnswer
35
+ showCorrectAnswer: showCorrectAnswer,
36
+ maxLength: maxLength && maxLength[dataset.id]
35
37
  });
36
38
  }
37
39
  };
package/lib/constructed-response.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/constructed-response.jsx"],"names":["props","node","data","onChange","dataset","component","disabled","feedback","showCorrectAnswer","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,QADyB,GACiBN,KADjB,CACzBM,QADyB;AAAA,UACfC,QADe,GACiBP,KADjB,CACfO,QADe;AAAA,UACLC,iBADK,GACiBR,KADjB,CACLQ,iBADK,EAEjC;;AACA,UAAMC,aAAa,GAAG,CAAET,KAAK,CAACU,OAAN,IAAiBN,OAAjB,IAA4BJ,KAAK,CAACU,OAAN,CAAcN,OAAO,CAACO,EAAtB,CAA7B,IAA2D,EAA5D,EAAgE,CAAhE,CAAtB;AACA,UAAMC,UAAU,GAAGJ,iBAAiB,GAChCC,aAAa,IAAIA,aAAa,CAACI,KADC,GAEhCX,IAAI,CAACE,OAAO,CAACO,EAAT,CAAJ,IAAoB,EAFxB;AAIA,aACE,gCAAC,iBAAD;AACE,QAAA,GAAG,YAAKV,IAAI,CAACa,IAAV,oBAAwBV,OAAO,CAACO,EAAhC,CADL;AAEE,QAAA,OAAO,EAAEJ,QAAQ,IAAIA,QAAQ,CAACH,OAAO,CAACO,EAAT,CAApB,IAAoCJ,QAAQ,CAACH,OAAO,CAACO,EAAT,CAAR,KAAyB,SAFxE;AAGE,QAAA,QAAQ,EAAEH,iBAAiB,IAAIF,QAHjC;AAIE,QAAA,KAAK,EAAEM,UAJT;AAKE,QAAA,EAAE,EAAER,OAAO,CAACO,EALd;AAME,QAAA,QAAQ,EAAER,QANZ;AAOE,QAAA,iBAAiB,EAAEK;AAPrB,QADF;AAWD;AACF,GAtBqC;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 { disabled, feedback, showCorrectAnswer } = 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\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 />\n );\n }\n});\n"],"file":"constructed-response.js"}
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,QADyB,GAC4BN,KAD5B,CACzBM,QADyB;AAAA,UACfC,QADe,GAC4BP,KAD5B,CACfO,QADe;AAAA,UACLC,iBADK,GAC4BR,KAD5B,CACLQ,iBADK;AAAA,UACcC,SADd,GAC4BT,KAD5B,CACcS,SADd,EAEjC;;AACA,UAAMC,aAAa,GAAG,CAAEV,KAAK,CAACW,OAAN,IAAiBP,OAAjB,IAA4BJ,KAAK,CAACW,OAAN,CAAcP,OAAO,CAACQ,EAAtB,CAA7B,IAA2D,EAA5D,EAAgE,CAAhE,CAAtB;AACA,UAAMC,UAAU,GAAGL,iBAAiB,GAChCE,aAAa,IAAIA,aAAa,CAACI,KADC,GAEhCZ,IAAI,CAACE,OAAO,CAACQ,EAAT,CAAJ,IAAoB,EAFxB;AAIA,aACE,gCAAC,iBAAD;AACE,QAAA,GAAG,YAAKX,IAAI,CAACc,IAAV,oBAAwBX,OAAO,CAACQ,EAAhC,CADL;AAEE,QAAA,OAAO,EAAEL,QAAQ,IAAIA,QAAQ,CAACH,OAAO,CAACQ,EAAT,CAApB,IAAoCL,QAAQ,CAACH,OAAO,CAACQ,EAAT,CAAR,KAAyB,SAFxE;AAGE,QAAA,QAAQ,EAAEJ,iBAAiB,IAAIF,QAHjC;AAIE,QAAA,KAAK,EAAEO,UAJT;AAKE,QAAA,EAAE,EAAET,OAAO,CAACQ,EALd;AAME,QAAA,QAAQ,EAAET,QANZ;AAOE,QAAA,iBAAiB,EAAEK,iBAPrB;AAQE,QAAA,SAAS,EAAEC,SAAS,IAAIA,SAAS,CAACL,OAAO,CAACQ,EAAT;AARnC,QADF;AAYD;AACF,GAvBqC;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 { 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\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 maxLength={maxLength && maxLength[dataset.id]}\n />\n );\n }\n});\n"],"file":"constructed-response.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pie-lib/mask-markup",
3
- "version": "1.10.20",
3
+ "version": "1.10.21-next.86+f45a2d2e",
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.9",
14
- "@pie-lib/render-ui": "^4.12.0",
13
+ "@pie-lib/math-rendering": "^2.3.10-next.86+f45a2d2e",
14
+ "@pie-lib/render-ui": "^4.12.1-next.86+f45a2d2e",
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": "de37d3ba44d3e7934e2f804381fe50d2da16a29a"
30
+ "gitHead": "f45a2d2e117fa21914e67a74c97fbec724227986"
31
31
  }
package/src/choices/choice.jsx CHANGED
@@ -67,7 +67,11 @@ export const BlankContent = withStyles(theme => ({
67
67
  margin: '4px'
68
68
  },
69
69
  chipLabel: {
70
- whiteSpace: 'pre-wrap'
70
+ whiteSpace: 'pre-wrap',
71
+ '& img': {
72
+ display: 'block',
73
+ padding: '2px 0'
74
+ }
71
75
  },
72
76
  disabled: {}
73
77
  }))(BlankContentComp);
package/src/components/blank.jsx CHANGED
@@ -24,7 +24,11 @@ const useStyles = withStyles(() => ({
24
24
  position: 'relative'
25
25
  },
26
26
  chipLabel: {
27
- whiteSpace: 'pre-wrap'
27
+ whiteSpace: 'pre-wrap',
28
+ '& img': {
29
+ display: 'block',
30
+ padding: '2px 0'
31
+ }
28
32
  },
29
33
  hidden: {
30
34
  color: 'transparent',
package/src/components/correct-input.jsx CHANGED
@@ -12,6 +12,7 @@ export default withStyles(() => ({
12
12
  input: {
13
13
  color: color.text(),
14
14
  backgroundColor: color.background(),
15
+ borderRadius: '4px !important',
15
16
  borderWidth: '1px',
16
17
  borderStyle: 'solid',
17
18
  padding: '10px 20px 10px 10px',
@@ -35,6 +36,8 @@ export default withStyles(() => ({
35
36
  fontSize: 'inherit'
36
37
  },
37
38
  outlinedInput: {
39
+ padding: '2px',
40
+ borderRadius: '4px',
38
41
  '& fieldset': {
39
42
  border: 0
40
43
  }
@@ -43,8 +46,17 @@ export default withStyles(() => ({
43
46
  borderColor: color.correct()
44
47
  }
45
48
  }))(props => {
46
- const { correct, isBox, classes, disabled, ...rest } = props;
49
+ const { correct, isBox, classes, disabled, maxLength, ...rest } = props;
47
50
  const label = typeof correct === 'boolean' ? (correct ? 'correct' : 'incorrect') : undefined;
51
+ const extraSpace = maxLength ? maxLength / 10 + 1 : 0; // used for capital letters
52
+ const inputProps = maxLength
53
+ ? {
54
+ maxLength: maxLength,
55
+ style: {
56
+ width: `${maxLength + extraSpace}ch`
57
+ }
58
+ }
59
+ : {};
48
60
 
49
61
  return (
50
62
  <OutlinedInput
@@ -56,6 +68,7 @@ export default withStyles(() => ({
56
68
  classes={{
57
69
  input: classnames({ [classes.input]: true, [classes[label]]: label })
58
70
  }}
71
+ inputProps={inputProps}
59
72
  labelWidth={0}
60
73
  disabled={disabled}
61
74
  {...rest}
package/src/components/dropdown.jsx CHANGED
@@ -59,7 +59,12 @@ class Dropdown extends React.Component {
59
59
 
60
60
  return (
61
61
  <Select
62
- classes={{ root: classes.root, icon: classes.icon, selectMenu: classes.selectMenu }}
62
+ classes={{
63
+ root: classes.root,
64
+ icon: classes.icon,
65
+ selectMenu: classes.selectMenu,
66
+ select: classes.select
67
+ }}
63
68
  disabled={disabled}
64
69
  value={value || ''}
65
70
  onOpen={this.showCheckmarkAndOpen}
@@ -113,6 +118,11 @@ const styles = () => ({
113
118
  backgroundColor: color.background()
114
119
  }
115
120
  },
121
+ select: {
122
+ '&:focus': {
123
+ borderRadius: '4px'
124
+ }
125
+ },
116
126
  selectMenu: {
117
127
  backgroundColor: color.background(),
118
128
  '&:hover': {
package/src/components/input.jsx CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import CorrectInput from './correct-input';
4
4
 
5
- const Input = ({ disabled, correct, id, value, onChange, showCorrectAnswer }) => {
5
+ const Input = ({ disabled, correct, id, value, onChange, showCorrectAnswer, maxLength }) => {
6
6
  return (
7
7
  <CorrectInput
8
8
  disabled={disabled}
@@ -10,6 +10,7 @@ const Input = ({ disabled, correct, id, value, onChange, showCorrectAnswer }) =>
10
10
  variant="outlined"
11
11
  value={value}
12
12
  isBox={true}
13
+ maxLength={maxLength}
13
14
  onChange={e => {
14
15
  onChange(id, e.target.value);
15
16
  }}
package/src/constructed-response.jsx CHANGED
@@ -5,7 +5,7 @@ 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 } = props;
8
+ const { 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
@@ -21,6 +21,7 @@ export default withMask('input', props => (node, data, onChange) => {
21
21
  id={dataset.id}
22
22
  onChange={onChange}
23
23
  showCorrectAnswer={showCorrectAnswer}
24
+ maxLength={maxLength && maxLength[dataset.id]}
24
25
  />
25
26
  );
26
27
  }