@pie-element/multiple-choice 5.8.1-next.99 → 5.9.3-next.1008
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 +231 -0
- package/PRINT.md +35 -0
- package/configure/CHANGELOG.md +195 -0
- package/configure/lib/defaults.js +29 -6
- package/configure/lib/defaults.js.map +1 -1
- package/configure/lib/index.js +10 -5
- package/configure/lib/index.js.map +1 -1
- package/configure/lib/main.js +245 -62
- package/configure/lib/main.js.map +1 -1
- package/configure/lib/utils.js +18 -0
- package/configure/lib/utils.js.map +1 -0
- package/configure/package.json +4 -4
- package/controller/CHANGELOG.md +62 -0
- package/controller/lib/defaults.js +1 -0
- package/controller/lib/defaults.js.map +1 -1
- package/controller/lib/index.js +85 -18
- package/controller/lib/index.js.map +1 -1
- package/controller/lib/utils.js +9 -1
- package/controller/lib/utils.js.map +1 -1
- package/controller/package.json +1 -1
- package/docs/config-schema.json +120 -0
- package/docs/config-schema.json.md +93 -1
- package/docs/demo/generate.js +10 -5
- package/docs/pie-schema.json +48 -0
- package/docs/pie-schema.json.md +39 -0
- package/lib/choice-input.js +44 -20
- package/lib/choice-input.js.map +1 -1
- package/lib/choice.js +157 -0
- package/lib/choice.js.map +1 -0
- package/lib/feedback-tick.js +1 -1
- package/lib/feedback-tick.js.map +1 -1
- package/lib/index.js +2 -2
- package/lib/index.js.map +1 -1
- package/lib/main.js +1 -1
- package/lib/main.js.map +1 -1
- package/lib/multiple-choice.js +59 -146
- package/lib/multiple-choice.js.map +1 -1
- package/lib/print.js +129 -0
- package/lib/print.js.map +1 -0
- package/package.json +11 -7
package/docs/demo/generate.js
CHANGED
|
@@ -11,7 +11,8 @@ exports.model = (id, element) => ({
|
|
|
11
11
|
feedback: {
|
|
12
12
|
type: 'none',
|
|
13
13
|
value: ''
|
|
14
|
-
}
|
|
14
|
+
},
|
|
15
|
+
accessibility: 'sweden'
|
|
15
16
|
},
|
|
16
17
|
{
|
|
17
18
|
value: 'iceland',
|
|
@@ -20,7 +21,8 @@ exports.model = (id, element) => ({
|
|
|
20
21
|
type: 'none',
|
|
21
22
|
value: ''
|
|
22
23
|
},
|
|
23
|
-
rationale: 'Rationale for Iceland'
|
|
24
|
+
rationale: 'Rationale for Iceland',
|
|
25
|
+
accessibility: 'iceland'
|
|
24
26
|
},
|
|
25
27
|
{
|
|
26
28
|
value: 'norway',
|
|
@@ -29,7 +31,8 @@ exports.model = (id, element) => ({
|
|
|
29
31
|
type: 'none',
|
|
30
32
|
value: ''
|
|
31
33
|
},
|
|
32
|
-
rationale: 'Rationale for Norway'
|
|
34
|
+
rationale: 'Rationale for Norway',
|
|
35
|
+
accessibility: 'norway'
|
|
33
36
|
},
|
|
34
37
|
{
|
|
35
38
|
correct: true,
|
|
@@ -39,9 +42,11 @@ exports.model = (id, element) => ({
|
|
|
39
42
|
type: 'none',
|
|
40
43
|
value: ''
|
|
41
44
|
},
|
|
42
|
-
rationale: 'Rationale for Finland'
|
|
45
|
+
rationale: 'Rationale for Finland',
|
|
46
|
+
accessibility: 'finland'
|
|
43
47
|
}
|
|
44
48
|
],
|
|
45
49
|
prompt: 'Which of these northern European countries are EU members? <math><mstack><msrow><mn>111</mn></msrow><msline/></mstack></math>',
|
|
46
|
-
promptEnabled: true
|
|
50
|
+
promptEnabled: true,
|
|
51
|
+
toolbarEditorPosition: 'bottom'
|
|
47
52
|
});
|
package/docs/pie-schema.json
CHANGED
|
@@ -114,6 +114,16 @@
|
|
|
114
114
|
"type": "number",
|
|
115
115
|
"title": "gridColumns"
|
|
116
116
|
},
|
|
117
|
+
"toolbarEditorPosition": {
|
|
118
|
+
"description": "Indicates the editor's toolbar position which can be 'bottom' or 'top'",
|
|
119
|
+
"default": ": 'bottom'",
|
|
120
|
+
"enum": [
|
|
121
|
+
"bottom",
|
|
122
|
+
"top"
|
|
123
|
+
],
|
|
124
|
+
"type": "string",
|
|
125
|
+
"title": "toolbarEditorPosition"
|
|
126
|
+
},
|
|
117
127
|
"lockChoiceOrder": {
|
|
118
128
|
"description": "Indicates the order of choices should be randomly ordered when presented to user",
|
|
119
129
|
"type": "boolean",
|
|
@@ -153,6 +163,11 @@
|
|
|
153
163
|
"type": "boolean",
|
|
154
164
|
"title": "rationaleEnabled"
|
|
155
165
|
},
|
|
166
|
+
"spellCheckEnabled": {
|
|
167
|
+
"description": "Indicates if spellcheck is enabled for the author. Default value is true",
|
|
168
|
+
"type": "boolean",
|
|
169
|
+
"title": "spellCheckEnabled"
|
|
170
|
+
},
|
|
156
171
|
"studentInstructionsEnabled": {
|
|
157
172
|
"description": "Indicates if Student Instructions are enabled",
|
|
158
173
|
"type": "boolean",
|
|
@@ -163,6 +178,11 @@
|
|
|
163
178
|
"type": "boolean",
|
|
164
179
|
"title": "teacherInstructionsEnabled"
|
|
165
180
|
},
|
|
181
|
+
"accessibilityLabelsEnabled": {
|
|
182
|
+
"description": "Indicates if Accessibility Labels are enabled",
|
|
183
|
+
"type": "boolean",
|
|
184
|
+
"title": "accessibilityLabelsEnabled"
|
|
185
|
+
},
|
|
166
186
|
"id": {
|
|
167
187
|
"description": "Identifier to identify the Pie Element in html markup, Must be unique within a pie item config.",
|
|
168
188
|
"type": "string",
|
|
@@ -175,11 +195,13 @@
|
|
|
175
195
|
}
|
|
176
196
|
},
|
|
177
197
|
"required": [
|
|
198
|
+
"accessibilityLabelsEnabled",
|
|
178
199
|
"choices",
|
|
179
200
|
"element",
|
|
180
201
|
"feedbackEnabled",
|
|
181
202
|
"id",
|
|
182
203
|
"rationaleEnabled",
|
|
204
|
+
"spellCheckEnabled",
|
|
183
205
|
"studentInstructionsEnabled",
|
|
184
206
|
"teacherInstructionsEnabled"
|
|
185
207
|
],
|
|
@@ -221,6 +243,32 @@
|
|
|
221
243
|
}
|
|
222
244
|
}
|
|
223
245
|
},
|
|
246
|
+
"ConfigureMaxImageDimensionsProp": {
|
|
247
|
+
"title": "ConfigureMaxImageDimensionsProp",
|
|
248
|
+
"type": "object",
|
|
249
|
+
"properties": {
|
|
250
|
+
"teacherInstructions": {
|
|
251
|
+
"description": "Indicates the max dimension for images in teacher instructions",
|
|
252
|
+
"type": "number",
|
|
253
|
+
"title": "teacherInstructions"
|
|
254
|
+
},
|
|
255
|
+
"prompt": {
|
|
256
|
+
"description": "Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified",
|
|
257
|
+
"type": "number",
|
|
258
|
+
"title": "prompt"
|
|
259
|
+
},
|
|
260
|
+
"rationale": {
|
|
261
|
+
"description": "Indicates the max dimension for images in rationale",
|
|
262
|
+
"type": "number",
|
|
263
|
+
"title": "rationale"
|
|
264
|
+
},
|
|
265
|
+
"choices": {
|
|
266
|
+
"description": "Indicates the max dimension for images in choices",
|
|
267
|
+
"type": "number",
|
|
268
|
+
"title": "choices"
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
},
|
|
224
272
|
"Choice": {
|
|
225
273
|
"title": "Choice",
|
|
226
274
|
"type": "object",
|
package/docs/pie-schema.json.md
CHANGED
|
@@ -98,6 +98,17 @@ Indicates the number of columns for the grid layout
|
|
|
98
98
|
|
|
99
99
|
Default: `": 2"`
|
|
100
100
|
|
|
101
|
+
# `toolbarEditorPosition` (string, enum)
|
|
102
|
+
|
|
103
|
+
Indicates the editor's toolbar position which can be 'bottom' or 'top'
|
|
104
|
+
|
|
105
|
+
This element must be one of the following enum values:
|
|
106
|
+
|
|
107
|
+
* `bottom`
|
|
108
|
+
* `top`
|
|
109
|
+
|
|
110
|
+
Default: `": 'bottom'"`
|
|
111
|
+
|
|
101
112
|
# `lockChoiceOrder` (boolean)
|
|
102
113
|
|
|
103
114
|
Indicates the order of choices should be randomly ordered when presented to user
|
|
@@ -131,6 +142,10 @@ Indicates if feedback is enabled
|
|
|
131
142
|
|
|
132
143
|
Indicates if Rationale are enabled
|
|
133
144
|
|
|
145
|
+
# `spellCheckEnabled` (boolean, required)
|
|
146
|
+
|
|
147
|
+
Indicates if spellcheck is enabled for the author. Default value is true
|
|
148
|
+
|
|
134
149
|
# `studentInstructionsEnabled` (boolean, required)
|
|
135
150
|
|
|
136
151
|
Indicates if Student Instructions are enabled
|
|
@@ -139,6 +154,10 @@ Indicates if Student Instructions are enabled
|
|
|
139
154
|
|
|
140
155
|
Indicates if Teacher Instructions are enabled
|
|
141
156
|
|
|
157
|
+
# `accessibilityLabelsEnabled` (boolean, required)
|
|
158
|
+
|
|
159
|
+
Indicates if Accessibility Labels are enabled
|
|
160
|
+
|
|
142
161
|
# `id` (string, required)
|
|
143
162
|
|
|
144
163
|
Identifier to identify the Pie Element in html markup, Must be unique within a pie item config.
|
|
@@ -182,6 +201,26 @@ Indicates the label for the item that has to be displayed in the Settings Panel
|
|
|
182
201
|
Indicates the value of the item if it affects config-ui
|
|
183
202
|
(eg.: if item is a switch and displaying an input on the config-ui depends on the switch value: on/off)
|
|
184
203
|
|
|
204
|
+
## `ConfigureMaxImageDimensionsProp` (object)
|
|
205
|
+
|
|
206
|
+
Properties of the `ConfigureMaxImageDimensionsProp` object:
|
|
207
|
+
|
|
208
|
+
### `teacherInstructions` (number)
|
|
209
|
+
|
|
210
|
+
Indicates the max dimension for images in teacher instructions
|
|
211
|
+
|
|
212
|
+
### `prompt` (number)
|
|
213
|
+
|
|
214
|
+
Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified
|
|
215
|
+
|
|
216
|
+
### `rationale` (number)
|
|
217
|
+
|
|
218
|
+
Indicates the max dimension for images in rationale
|
|
219
|
+
|
|
220
|
+
### `choices` (number)
|
|
221
|
+
|
|
222
|
+
Indicates the max dimension for images in choices
|
|
223
|
+
|
|
185
224
|
## `Choice` (object)
|
|
186
225
|
|
|
187
226
|
Properties of the `Choice` object:
|
package/lib/choice-input.js
CHANGED
|
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports["default"] = exports.
|
|
8
|
+
exports["default"] = exports.StyledRadio = exports.StyledFormControlLabel = exports.StyledCheckbox = exports.ChoiceInput = void 0;
|
|
9
9
|
|
|
10
10
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
11
11
|
|
|
@@ -19,10 +19,10 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
|
|
|
19
19
|
|
|
20
20
|
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
21
21
|
|
|
22
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
23
|
-
|
|
24
22
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
25
23
|
|
|
24
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
25
|
+
|
|
26
26
|
var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
|
|
27
27
|
|
|
28
28
|
var _react = _interopRequireDefault(require("react"));
|
|
@@ -43,11 +43,13 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
43
43
|
|
|
44
44
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
|
|
45
45
|
|
|
46
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try {
|
|
46
|
+
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
47
|
+
|
|
48
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
47
49
|
|
|
48
|
-
function
|
|
50
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
49
51
|
|
|
50
|
-
|
|
52
|
+
var CLASS_NAME = 'multiple-choice-component';
|
|
51
53
|
|
|
52
54
|
var styleSheet = function styleSheet() {
|
|
53
55
|
return {
|
|
@@ -64,7 +66,10 @@ var styleSheet = function styleSheet() {
|
|
|
64
66
|
'& label': {
|
|
65
67
|
color: _renderUi.color.text()
|
|
66
68
|
}
|
|
67
|
-
}
|
|
69
|
+
},
|
|
70
|
+
horizontalLayout: (0, _defineProperty2["default"])({}, "& .".concat(CLASS_NAME), {
|
|
71
|
+
paddingRight: '8px'
|
|
72
|
+
})
|
|
68
73
|
};
|
|
69
74
|
};
|
|
70
75
|
|
|
@@ -85,7 +90,6 @@ var StyledFormControlLabel = (0, _styles.withStyles)(formStyleSheet, {
|
|
|
85
90
|
}));
|
|
86
91
|
});
|
|
87
92
|
exports.StyledFormControlLabel = StyledFormControlLabel;
|
|
88
|
-
var CLASS_NAME = 'multiple-choice-component';
|
|
89
93
|
|
|
90
94
|
var colorStyle = function colorStyle(varName, fallback) {
|
|
91
95
|
return (0, _defineProperty2["default"])({}, "&.".concat(CLASS_NAME), {
|
|
@@ -120,7 +124,8 @@ var StyledCheckbox = (0, _styles.withStyles)(inputStyles)(function (props) {
|
|
|
120
124
|
classes = props.classes,
|
|
121
125
|
checked = props.checked,
|
|
122
126
|
onChange = props.onChange,
|
|
123
|
-
disabled = props.disabled
|
|
127
|
+
disabled = props.disabled,
|
|
128
|
+
accessibility = props.accessibility;
|
|
124
129
|
|
|
125
130
|
var key = function key(k) {
|
|
126
131
|
return correctness ? "".concat(correctness, "-").concat(k) : k;
|
|
@@ -136,12 +141,14 @@ var StyledCheckbox = (0, _styles.withStyles)(inputStyles)(function (props) {
|
|
|
136
141
|
onChange: onChange,
|
|
137
142
|
disabled: disabled
|
|
138
143
|
};
|
|
139
|
-
return /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], (0, _extends2["default"])({
|
|
144
|
+
return /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], (0, _extends2["default"])({
|
|
145
|
+
"aria-label": accessibility
|
|
146
|
+
}, miniProps, {
|
|
140
147
|
className: CLASS_NAME,
|
|
141
148
|
classes: {
|
|
142
149
|
root: resolved.root,
|
|
143
150
|
checked: resolved.checked,
|
|
144
|
-
disabled: resolved.disabled
|
|
151
|
+
disabled: "".concat(correctness ? '' : resolved.disabled)
|
|
145
152
|
}
|
|
146
153
|
}));
|
|
147
154
|
});
|
|
@@ -151,7 +158,8 @@ var StyledRadio = (0, _styles.withStyles)(inputStyles)(function (props) {
|
|
|
151
158
|
classes = props.classes,
|
|
152
159
|
checked = props.checked,
|
|
153
160
|
onChange = props.onChange,
|
|
154
|
-
disabled = props.disabled
|
|
161
|
+
disabled = props.disabled,
|
|
162
|
+
accessibility = props.accessibility;
|
|
155
163
|
|
|
156
164
|
var key = function key(k) {
|
|
157
165
|
return correctness ? "".concat(correctness, "-").concat(k) : k;
|
|
@@ -167,11 +175,14 @@ var StyledRadio = (0, _styles.withStyles)(inputStyles)(function (props) {
|
|
|
167
175
|
onChange: onChange,
|
|
168
176
|
disabled: disabled
|
|
169
177
|
};
|
|
170
|
-
return /*#__PURE__*/_react["default"].createElement(_Radio["default"], (0, _extends2["default"])({
|
|
178
|
+
return /*#__PURE__*/_react["default"].createElement(_Radio["default"], (0, _extends2["default"])({
|
|
179
|
+
"aria-label": accessibility
|
|
180
|
+
}, miniProps, {
|
|
171
181
|
className: CLASS_NAME,
|
|
172
182
|
classes: {
|
|
173
183
|
root: resolved.root,
|
|
174
|
-
checked: resolved.checked
|
|
184
|
+
checked: resolved.checked,
|
|
185
|
+
disabled: "".concat(correctness ? '' : resolved.disabled)
|
|
175
186
|
}
|
|
176
187
|
}));
|
|
177
188
|
});
|
|
@@ -212,21 +223,27 @@ var ChoiceInput = /*#__PURE__*/function (_React$Component) {
|
|
|
212
223
|
correctness = _this$props.correctness,
|
|
213
224
|
classes = _this$props.classes,
|
|
214
225
|
className = _this$props.className,
|
|
215
|
-
rationale = _this$props.rationale
|
|
226
|
+
rationale = _this$props.rationale,
|
|
227
|
+
accessibility = _this$props.accessibility,
|
|
228
|
+
hideTick = _this$props.hideTick,
|
|
229
|
+
isEvaluateMode = _this$props.isEvaluateMode,
|
|
230
|
+
choicesLayout = _this$props.choicesLayout;
|
|
216
231
|
var Tag = choiceMode === 'checkbox' ? StyledCheckbox : StyledRadio;
|
|
217
232
|
var classSuffix = choiceMode === 'checkbox' ? 'checkbox' : 'radio-button';
|
|
233
|
+
var holderClassNames = (0, _classnames["default"])(classes.checkboxHolder, (0, _defineProperty2["default"])({}, classes.horizontalLayout, choicesLayout === 'horizontal'));
|
|
218
234
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
219
|
-
className: (0, _classnames["default"])(className, 'corespring-' + classSuffix)
|
|
235
|
+
className: (0, _classnames["default"])(className, 'corespring-' + classSuffix, 'choice-input')
|
|
220
236
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
221
237
|
className: classes.row
|
|
222
|
-
}, /*#__PURE__*/_react["default"].createElement(_feedbackTick["default"], {
|
|
238
|
+
}, !hideTick && isEvaluateMode && /*#__PURE__*/_react["default"].createElement(_feedbackTick["default"], {
|
|
223
239
|
correctness: correctness
|
|
224
240
|
}), /*#__PURE__*/_react["default"].createElement("div", {
|
|
225
|
-
className:
|
|
241
|
+
className: (0, _classnames["default"])(holderClassNames, 'checkbox-holder')
|
|
226
242
|
}, /*#__PURE__*/_react["default"].createElement(StyledFormControlLabel, {
|
|
227
243
|
disabled: disabled,
|
|
228
244
|
label: displayKey ? displayKey + '. ' : '',
|
|
229
245
|
control: /*#__PURE__*/_react["default"].createElement(Tag, {
|
|
246
|
+
accessibility: accessibility,
|
|
230
247
|
checked: checked,
|
|
231
248
|
correctness: correctness,
|
|
232
249
|
onChange: this.onToggleChoice
|
|
@@ -238,6 +255,7 @@ var ChoiceInput = /*#__PURE__*/function (_React$Component) {
|
|
|
238
255
|
tagName: "span"
|
|
239
256
|
}))), rationale && /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
|
|
240
257
|
className: "rationale",
|
|
258
|
+
defaultClassName: "rationale",
|
|
241
259
|
prompt: rationale
|
|
242
260
|
}), /*#__PURE__*/_react["default"].createElement(_renderUi.Feedback, {
|
|
243
261
|
feedback: feedback,
|
|
@@ -258,14 +276,20 @@ exports.ChoiceInput = ChoiceInput;
|
|
|
258
276
|
feedback: _propTypes["default"].string,
|
|
259
277
|
label: _propTypes["default"].string.isRequired,
|
|
260
278
|
rationale: _propTypes["default"].string,
|
|
279
|
+
accessibility: _propTypes["default"].string,
|
|
261
280
|
onChange: _propTypes["default"].func.isRequired,
|
|
262
281
|
value: _propTypes["default"].string.isRequired,
|
|
263
282
|
classes: _propTypes["default"].object,
|
|
264
|
-
className: _propTypes["default"].string
|
|
283
|
+
className: _propTypes["default"].string,
|
|
284
|
+
hideTick: _propTypes["default"].bool,
|
|
285
|
+
isEvaluateMode: _propTypes["default"].bool,
|
|
286
|
+
choicesLayout: _propTypes["default"].oneOf(['vertical', 'grid', 'horizontal'])
|
|
265
287
|
});
|
|
266
288
|
(0, _defineProperty2["default"])(ChoiceInput, "defaultProps", {
|
|
267
289
|
rationale: null,
|
|
268
|
-
|
|
290
|
+
accessibility: null,
|
|
291
|
+
checked: false,
|
|
292
|
+
isEvaluateMode: false
|
|
269
293
|
});
|
|
270
294
|
|
|
271
295
|
var _default = (0, _styles.withStyles)(styleSheet)(ChoiceInput);
|
package/lib/choice-input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/choice-input.jsx"],"names":["styleSheet","row","display","alignItems","backgroundColor","color","background","checkboxHolder","flex","text","formStyleSheet","label","StyledFormControlLabel","name","props","classes","CLASS_NAME","colorStyle","varName","fallback","inputStyles","correct","disabled","incorrect","root","primaryLight","checked","primary","opacity","cursor","pointerEvents","StyledCheckbox","correctness","onChange","key","k","resolved","miniProps","StyledRadio","ChoiceInput","onToggleChoice","bind","value","selected","choiceMode","displayKey","feedback","className","rationale","Tag","classSuffix","React","Component","PropTypes","oneOf","string","isRequired","bool","func","object"],"mappings":"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","sourcesContent":["import FormControlLabel from '@material-ui/core/FormControlLabel';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Checkbox from '@material-ui/core/Checkbox';\nimport { Feedback, color, PreviewPrompt } from '@pie-lib/render-ui';\nimport FeedbackTick from './feedback-tick';\nimport Radio from '@material-ui/core/Radio';\nimport classNames from 'classnames';\n\nconst styleSheet = () => ({\n row: {\n display: 'flex',\n alignItems: 'center',\n backgroundColor: color.background(),\n },\n checkboxHolder: {\n display: 'flex',\n alignItems: 'center',\n backgroundColor: color.background(),\n flex: 1,\n '& label': {\n color: color.text(),\n },\n },\n});\n\nconst formStyleSheet = {\n label: {\n color: `${color.text()} !important`, //'var(--choice-input-color, black)'\n backgroundColor: color.background(),\n },\n};\n\nexport const StyledFormControlLabel = withStyles(formStyleSheet, {\n name: 'FormControlLabel',\n})((props) => (\n <FormControlLabel {...props} classes={{ label: props.classes.label }} />\n));\n\nconst CLASS_NAME = 'multiple-choice-component';\n\nconst colorStyle = (varName, fallback) => ({\n [`&.${CLASS_NAME}`]: {\n color: `var(--choice-input-${varName}, ${fallback}) !important`,\n },\n});\n\nconst inputStyles = {\n 'correct-root': colorStyle('correct-color', color.text()),\n 'correct-checked': colorStyle('correct-selected-color', color.correct()), //green[500]),\n 'correct-disabled': colorStyle('correct-disabled-color', color.disabled()), //'grey'),\n 'incorrect-root': colorStyle('incorrect-color', color.incorrect()),\n 'incorrect-checked': colorStyle('incorrect-checked', color.incorrect()), //orange[500]),\n 'incorrect-disabled': colorStyle(\n 'incorrect-disabled-color',\n color.disabled()\n ),\n root: {\n ...colorStyle('color', color.text()),\n '&:hover': { color: `${color.primaryLight()} !important` },\n },\n checked: colorStyle('selected-color', color.primary()),\n disabled: {\n ...colorStyle('disabled-color', color.text()),\n opacity: 0.6,\n cursor: 'not-allowed !important',\n pointerEvents: 'initial !important',\n },\n};\n\nexport const StyledCheckbox = withStyles(inputStyles)((props) => {\n const { correctness, classes, checked, onChange, disabled } = props;\n const key = (k) => (correctness ? `${correctness}-${k}` : k);\n\n const resolved = {\n root: classes[key('root')],\n checked: classes[key('checked')],\n disabled: classes[key('disabled')],\n };\n\n const miniProps = { checked, onChange, disabled };\n return (\n <Checkbox\n {...miniProps}\n className={CLASS_NAME}\n classes={{\n root: resolved.root,\n checked: resolved.checked,\n disabled: resolved.disabled,\n }}\n />\n );\n});\n\nexport const StyledRadio = withStyles(inputStyles)((props) => {\n const { correctness, classes, checked, onChange, disabled } = props;\n const key = (k) => (correctness ? `${correctness}-${k}` : k);\n\n const resolved = {\n root: classes[key('root')],\n checked: classes[key('checked')],\n disabled: classes[key('disabled')],\n };\n\n const miniProps = { checked, onChange, disabled };\n\n return (\n <Radio\n {...miniProps}\n className={CLASS_NAME}\n classes={{\n root: resolved.root,\n checked: resolved.checked,\n }}\n />\n );\n});\n\nexport class ChoiceInput extends React.Component {\n static propTypes = {\n choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n displayKey: PropTypes.string.isRequired,\n checked: PropTypes.bool.isRequired,\n correctness: PropTypes.string,\n disabled: PropTypes.bool.isRequired,\n feedback: PropTypes.string,\n label: PropTypes.string.isRequired,\n rationale: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n value: PropTypes.string.isRequired,\n classes: PropTypes.object,\n className: PropTypes.string,\n };\n\n static defaultProps = {\n rationale: null,\n checked: false,\n };\n\n constructor(props) {\n super(props);\n this.onToggleChoice = this.onToggleChoice.bind(this);\n }\n\n onToggleChoice() {\n this.props.onChange({\n value: this.props.value,\n selected: !this.props.checked,\n });\n }\n\n render() {\n const {\n choiceMode,\n disabled,\n displayKey,\n feedback,\n label,\n checked,\n correctness,\n classes,\n className,\n rationale,\n } = this.props;\n\n const Tag = choiceMode === 'checkbox' ? StyledCheckbox : StyledRadio;\n const classSuffix = choiceMode === 'checkbox' ? 'checkbox' : 'radio-button';\n\n return (\n <div className={classNames(className, 'corespring-' + classSuffix)}>\n <div className={classes.row}>\n <FeedbackTick correctness={correctness} />\n <div className={classes.checkboxHolder}>\n <StyledFormControlLabel\n disabled={disabled}\n label={displayKey ? displayKey + '. ' : ''}\n control={\n <Tag\n checked={checked}\n correctness={correctness}\n onChange={this.onToggleChoice}\n />\n }\n />\n <PreviewPrompt\n className=\"label\"\n onClick={this.onToggleChoice}\n prompt={label}\n tagName=\"span\"\n />\n </div>\n </div>\n {rationale && (\n <PreviewPrompt className=\"rationale\" prompt={rationale} />\n )}\n <Feedback feedback={feedback} correctness={correctness} />\n </div>\n );\n }\n}\n\nexport default withStyles(styleSheet)(ChoiceInput);\n"],"file":"choice-input.js"}
|
|
1
|
+
{"version":3,"sources":["../src/choice-input.jsx"],"names":["CLASS_NAME","styleSheet","row","display","alignItems","backgroundColor","color","background","checkboxHolder","flex","text","horizontalLayout","paddingRight","formStyleSheet","label","StyledFormControlLabel","name","props","classes","colorStyle","varName","fallback","inputStyles","correct","disabled","incorrect","root","primaryLight","checked","primary","opacity","cursor","pointerEvents","StyledCheckbox","correctness","onChange","accessibility","key","k","resolved","miniProps","StyledRadio","ChoiceInput","onToggleChoice","bind","value","selected","choiceMode","displayKey","feedback","className","rationale","hideTick","isEvaluateMode","choicesLayout","Tag","classSuffix","holderClassNames","React","Component","PropTypes","oneOf","string","isRequired","bool","func","object"],"mappings":"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","sourcesContent":["import FormControlLabel from '@material-ui/core/FormControlLabel';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Checkbox from '@material-ui/core/Checkbox';\nimport { Feedback, color, PreviewPrompt } from '@pie-lib/render-ui';\nimport FeedbackTick from './feedback-tick';\nimport Radio from '@material-ui/core/Radio';\nimport classNames from 'classnames';\n\nconst CLASS_NAME = 'multiple-choice-component';\n\nconst styleSheet = () => ({\n row: {\n display: 'flex',\n alignItems: 'center',\n backgroundColor: color.background(),\n },\n checkboxHolder: {\n display: 'flex',\n alignItems: 'center',\n backgroundColor: color.background(),\n flex: 1,\n '& label': {\n color: color.text(),\n },\n },\n horizontalLayout: {\n [`& .${CLASS_NAME}`]: {\n paddingRight: '8px',\n }\n }\n});\n\nconst formStyleSheet = {\n label: {\n color: `${color.text()} !important`, //'var(--choice-input-color, black)'\n backgroundColor: color.background(),\n },\n};\n\nexport const StyledFormControlLabel = withStyles(formStyleSheet, {\n name: 'FormControlLabel',\n})((props) => (\n <FormControlLabel {...props} classes={{ label: props.classes.label }} />\n));\n\nconst colorStyle = (varName, fallback) => ({\n [`&.${CLASS_NAME}`]: {\n color: `var(--choice-input-${varName}, ${fallback}) !important`,\n },\n});\n\nconst inputStyles = {\n 'correct-root': colorStyle('correct-color', color.text()),\n 'correct-checked': colorStyle('correct-selected-color', color.correct()), //green[500]),\n 'correct-disabled': colorStyle('correct-disabled-color', color.disabled()), //'grey'),\n 'incorrect-root': colorStyle('incorrect-color', color.incorrect()),\n 'incorrect-checked': colorStyle('incorrect-checked', color.incorrect()), //orange[500]),\n 'incorrect-disabled': colorStyle(\n 'incorrect-disabled-color',\n color.disabled()\n ),\n root: {\n ...colorStyle('color', color.text()),\n '&:hover': { color: `${color.primaryLight()} !important` },\n },\n checked: colorStyle('selected-color', color.primary()),\n disabled: {\n ...colorStyle('disabled-color', color.text()),\n opacity: 0.6,\n cursor: 'not-allowed !important',\n pointerEvents: 'initial !important',\n },\n};\n\nexport const StyledCheckbox = withStyles(inputStyles)((props) => {\n const {\n correctness,\n classes,\n checked,\n onChange,\n disabled,\n accessibility,\n } = props;\n const key = (k) => (correctness ? `${correctness}-${k}` : k);\n\n const resolved = {\n root: classes[key('root')],\n checked: classes[key('checked')],\n disabled: classes[key('disabled')],\n };\n\n const miniProps = { checked, onChange, disabled };\n return (\n <Checkbox\n aria-label={accessibility}\n {...miniProps}\n className={CLASS_NAME}\n classes={{\n root: resolved.root,\n checked: resolved.checked,\n disabled: `${correctness ? '' : resolved.disabled}`,\n }}\n />\n );\n});\n\nexport const StyledRadio = withStyles(inputStyles)((props) => {\n const {\n correctness,\n classes,\n checked,\n onChange,\n disabled,\n accessibility,\n } = props;\n const key = (k) => (correctness ? `${correctness}-${k}` : k);\n\n const resolved = {\n root: classes[key('root')],\n checked: classes[key('checked')],\n disabled: classes[key('disabled')],\n };\n\n const miniProps = { checked, onChange, disabled };\n\n return (\n <Radio\n aria-label={accessibility}\n {...miniProps}\n className={CLASS_NAME}\n classes={{\n root: resolved.root,\n checked: resolved.checked,\n disabled: `${correctness ? '' : resolved.disabled}`,\n }}\n />\n );\n});\n\nexport class ChoiceInput extends React.Component {\n static propTypes = {\n choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n displayKey: PropTypes.string.isRequired,\n checked: PropTypes.bool.isRequired,\n correctness: PropTypes.string,\n disabled: PropTypes.bool.isRequired,\n feedback: PropTypes.string,\n label: PropTypes.string.isRequired,\n rationale: PropTypes.string,\n accessibility: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n value: PropTypes.string.isRequired,\n classes: PropTypes.object,\n className: PropTypes.string,\n hideTick: PropTypes.bool,\n isEvaluateMode: PropTypes.bool,\n choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),\n };\n\n static defaultProps = {\n rationale: null,\n accessibility: null,\n checked: false,\n isEvaluateMode: false,\n };\n\n constructor(props) {\n super(props);\n this.onToggleChoice = this.onToggleChoice.bind(this);\n }\n\n onToggleChoice() {\n this.props.onChange({\n value: this.props.value,\n selected: !this.props.checked,\n });\n }\n\n render() {\n const {\n choiceMode,\n disabled,\n displayKey,\n feedback,\n label,\n checked,\n correctness,\n classes,\n className,\n rationale,\n accessibility,\n hideTick,\n isEvaluateMode,\n choicesLayout\n } = this.props;\n\n const Tag = choiceMode === 'checkbox' ? StyledCheckbox : StyledRadio;\n const classSuffix = choiceMode === 'checkbox' ? 'checkbox' : 'radio-button';\n\n const holderClassNames = classNames(classes.checkboxHolder, {\n [classes.horizontalLayout]: choicesLayout === 'horizontal',\n });\n\n return (\n <div className={classNames(className, 'corespring-' + classSuffix, 'choice-input')}>\n <div className={classes.row}>\n {(!hideTick && isEvaluateMode) && <FeedbackTick correctness={correctness} />}\n <div className={classNames(holderClassNames, 'checkbox-holder')}>\n <StyledFormControlLabel\n disabled={disabled}\n label={displayKey ? displayKey + '. ' : ''}\n control={\n <Tag\n accessibility={accessibility}\n checked={checked}\n correctness={correctness}\n onChange={this.onToggleChoice}\n />\n }\n />\n <PreviewPrompt\n className=\"label\"\n onClick={this.onToggleChoice}\n prompt={label}\n tagName=\"span\"\n />\n </div>\n </div>\n {rationale && (\n <PreviewPrompt className=\"rationale\" defaultClassName=\"rationale\" prompt={rationale} />\n )}\n <Feedback feedback={feedback} correctness={correctness} />\n </div>\n );\n }\n}\n\nexport default withStyles(styleSheet)(ChoiceInput);\n"],"file":"choice-input.js"}
|
package/lib/choice.js
ADDED
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = exports.Choice = void 0;
|
|
9
|
+
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
+
|
|
12
|
+
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
13
|
+
|
|
14
|
+
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
15
|
+
|
|
16
|
+
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
|
17
|
+
|
|
18
|
+
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
19
|
+
|
|
20
|
+
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
21
|
+
|
|
22
|
+
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
23
|
+
|
|
24
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
25
|
+
|
|
26
|
+
var _react = _interopRequireDefault(require("react"));
|
|
27
|
+
|
|
28
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
29
|
+
|
|
30
|
+
var _styles = require("@material-ui/core/styles");
|
|
31
|
+
|
|
32
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
33
|
+
|
|
34
|
+
var _choiceInput = _interopRequireDefault(require("./choice-input"));
|
|
35
|
+
|
|
36
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
37
|
+
|
|
38
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
39
|
+
|
|
40
|
+
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
|
|
41
|
+
|
|
42
|
+
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
43
|
+
|
|
44
|
+
var Choice = /*#__PURE__*/function (_React$Component) {
|
|
45
|
+
(0, _inherits2["default"])(Choice, _React$Component);
|
|
46
|
+
|
|
47
|
+
var _super = _createSuper(Choice);
|
|
48
|
+
|
|
49
|
+
function Choice() {
|
|
50
|
+
var _this;
|
|
51
|
+
|
|
52
|
+
(0, _classCallCheck2["default"])(this, Choice);
|
|
53
|
+
|
|
54
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
55
|
+
args[_key] = arguments[_key];
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
59
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (choice) {
|
|
60
|
+
var _this$props = _this.props,
|
|
61
|
+
disabled = _this$props.disabled,
|
|
62
|
+
onChoiceChanged = _this$props.onChoiceChanged;
|
|
63
|
+
|
|
64
|
+
if (!disabled) {
|
|
65
|
+
onChoiceChanged(choice);
|
|
66
|
+
}
|
|
67
|
+
});
|
|
68
|
+
return _this;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
(0, _createClass2["default"])(Choice, [{
|
|
72
|
+
key: "render",
|
|
73
|
+
value: function render() {
|
|
74
|
+
var _classNames;
|
|
75
|
+
|
|
76
|
+
var _this$props2 = this.props,
|
|
77
|
+
choice = _this$props2.choice,
|
|
78
|
+
index = _this$props2.index,
|
|
79
|
+
choicesLength = _this$props2.choicesLength,
|
|
80
|
+
showCorrect = _this$props2.showCorrect,
|
|
81
|
+
isEvaluateMode = _this$props2.isEvaluateMode,
|
|
82
|
+
choiceMode = _this$props2.choiceMode,
|
|
83
|
+
disabled = _this$props2.disabled,
|
|
84
|
+
checked = _this$props2.checked,
|
|
85
|
+
correctness = _this$props2.correctness,
|
|
86
|
+
displayKey = _this$props2.displayKey,
|
|
87
|
+
classes = _this$props2.classes,
|
|
88
|
+
choicesLayout = _this$props2.choicesLayout,
|
|
89
|
+
gridColumns = _this$props2.gridColumns;
|
|
90
|
+
var choiceClass = 'choice' + (index === choicesLength - 1 ? ' last' : '');
|
|
91
|
+
var feedback = !isEvaluateMode || showCorrect ? '' : choice.feedback;
|
|
92
|
+
|
|
93
|
+
var choiceProps = _objectSpread(_objectSpread({}, choice), {}, {
|
|
94
|
+
checked: checked,
|
|
95
|
+
choiceMode: choiceMode,
|
|
96
|
+
disabled: disabled,
|
|
97
|
+
feedback: feedback,
|
|
98
|
+
correctness: correctness,
|
|
99
|
+
displayKey: displayKey,
|
|
100
|
+
choicesLayout: choicesLayout,
|
|
101
|
+
gridColumns: gridColumns,
|
|
102
|
+
onChange: this.onChange,
|
|
103
|
+
isEvaluateMode: isEvaluateMode
|
|
104
|
+
});
|
|
105
|
+
|
|
106
|
+
var names = (0, _classnames["default"])(classes.choice, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.noBorder, index === choicesLength - 1 || choicesLayout !== 'vertical'), (0, _defineProperty2["default"])(_classNames, classes.horizontalLayout, choicesLayout === 'horizontal'), _classNames));
|
|
107
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
108
|
+
className: choiceClass,
|
|
109
|
+
key: index
|
|
110
|
+
}, /*#__PURE__*/_react["default"].createElement(_choiceInput["default"], (0, _extends2["default"])({}, choiceProps, {
|
|
111
|
+
className: names
|
|
112
|
+
})));
|
|
113
|
+
}
|
|
114
|
+
}]);
|
|
115
|
+
return Choice;
|
|
116
|
+
}(_react["default"].Component);
|
|
117
|
+
|
|
118
|
+
exports.Choice = Choice;
|
|
119
|
+
Choice.propTypes = {
|
|
120
|
+
choiceMode: _propTypes["default"].oneOf(['radio', 'checkbox']),
|
|
121
|
+
choice: _propTypes["default"].object,
|
|
122
|
+
disabled: _propTypes["default"].bool.isRequired,
|
|
123
|
+
onChoiceChanged: _propTypes["default"].func,
|
|
124
|
+
classes: _propTypes["default"].object.isRequired,
|
|
125
|
+
index: _propTypes["default"].number,
|
|
126
|
+
choicesLength: _propTypes["default"].number,
|
|
127
|
+
showCorrect: _propTypes["default"].bool,
|
|
128
|
+
isEvaluateMode: _propTypes["default"].bool,
|
|
129
|
+
checked: _propTypes["default"].bool,
|
|
130
|
+
correctness: _propTypes["default"].string,
|
|
131
|
+
displayKey: _propTypes["default"].string,
|
|
132
|
+
choicesLayout: _propTypes["default"].oneOf(['vertical', 'grid', 'horizontal']),
|
|
133
|
+
gridColumns: _propTypes["default"].string
|
|
134
|
+
};
|
|
135
|
+
|
|
136
|
+
var _default = (0, _styles.withStyles)({
|
|
137
|
+
choice: {
|
|
138
|
+
paddingTop: '20px',
|
|
139
|
+
paddingBottom: '10px',
|
|
140
|
+
borderBottom: '1px solid #E0DEE0'
|
|
141
|
+
},
|
|
142
|
+
noBorder: {
|
|
143
|
+
borderBottom: 'none'
|
|
144
|
+
},
|
|
145
|
+
horizontalLayout: {
|
|
146
|
+
paddingRight: '20px',
|
|
147
|
+
'& label': {
|
|
148
|
+
marginRight: '8px' // '& span:first-child': {
|
|
149
|
+
// paddingRight: 0
|
|
150
|
+
// }
|
|
151
|
+
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
})(Choice);
|
|
155
|
+
|
|
156
|
+
exports["default"] = _default;
|
|
157
|
+
//# sourceMappingURL=choice.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/choice.jsx"],"names":["Choice","choice","props","disabled","onChoiceChanged","index","choicesLength","showCorrect","isEvaluateMode","choiceMode","checked","correctness","displayKey","classes","choicesLayout","gridColumns","choiceClass","feedback","choiceProps","onChange","names","noBorder","horizontalLayout","React","Component","propTypes","PropTypes","oneOf","object","bool","isRequired","func","number","string","paddingTop","paddingBottom","borderBottom","paddingRight","marginRight"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;IAEaA,M;;;;;;;;;;;;;;;iGACA,UAACC,MAAD,EAAY;AACrB,wBAAsC,MAAKC,KAA3C;AAAA,UAAQC,QAAR,eAAQA,QAAR;AAAA,UAAkBC,eAAlB,eAAkBA,eAAlB;;AAEA,UAAI,CAACD,QAAL,EAAe;AACbC,QAAAA,eAAe,CAACH,MAAD,CAAf;AACD;AACF,K;;;;;;WAED,kBAAS;AAAA;;AACP,yBAcI,KAAKC,KAdT;AAAA,UACED,MADF,gBACEA,MADF;AAAA,UAEEI,KAFF,gBAEEA,KAFF;AAAA,UAGEC,aAHF,gBAGEA,aAHF;AAAA,UAIEC,WAJF,gBAIEA,WAJF;AAAA,UAKEC,cALF,gBAKEA,cALF;AAAA,UAMEC,UANF,gBAMEA,UANF;AAAA,UAOEN,QAPF,gBAOEA,QAPF;AAAA,UAQEO,OARF,gBAQEA,OARF;AAAA,UASEC,WATF,gBASEA,WATF;AAAA,UAUEC,UAVF,gBAUEA,UAVF;AAAA,UAWEC,OAXF,gBAWEA,OAXF;AAAA,UAYEC,aAZF,gBAYEA,aAZF;AAAA,UAaEC,WAbF,gBAaEA,WAbF;AAeA,UAAMC,WAAW,GAAG,YAAYX,KAAK,KAAKC,aAAa,GAAG,CAA1B,GAA8B,OAA9B,GAAwC,EAApD,CAApB;AAEA,UAAMW,QAAQ,GAAG,CAACT,cAAD,IAAmBD,WAAnB,GAAiC,EAAjC,GAAsCN,MAAM,CAACgB,QAA9D;;AAEA,UAAMC,WAAW,mCACZjB,MADY;AAEfS,QAAAA,OAAO,EAAPA,OAFe;AAGfD,QAAAA,UAAU,EAAVA,UAHe;AAIfN,QAAAA,QAAQ,EAARA,QAJe;AAKfc,QAAAA,QAAQ,EAARA,QALe;AAMfN,QAAAA,WAAW,EAAXA,WANe;AAOfC,QAAAA,UAAU,EAAVA,UAPe;AAQfE,QAAAA,aAAa,EAAbA,aARe;AASfC,QAAAA,WAAW,EAAXA,WATe;AAUfI,QAAAA,QAAQ,EAAE,KAAKA,QAVA;AAWfX,QAAAA,cAAc,EAAdA;AAXe,QAAjB;;AAcA,UAAMY,KAAK,GAAG,4BAAWP,OAAO,CAACZ,MAAnB,mEACXY,OAAO,CAACQ,QADG,EAEVhB,KAAK,KAAKC,aAAa,GAAG,CAA1B,IAA+BQ,aAAa,KAAK,UAFvC,iDAGXD,OAAO,CAACS,gBAHG,EAGgBR,aAAa,KAAK,YAHlC,gBAAd;AAMA,0BACE;AAAK,QAAA,SAAS,EAAEE,WAAhB;AAA6B,QAAA,GAAG,EAAEX;AAAlC,sBACE,gCAAC,uBAAD,gCAAiBa,WAAjB;AAA8B,QAAA,SAAS,EAAEE;AAAzC,SADF,CADF;AAKD;;;EAtDyBG,kBAAMC,S;;;AAyDlCxB,MAAM,CAACyB,SAAP,GAAmB;AACjBhB,EAAAA,UAAU,EAAEiB,sBAAUC,KAAV,CAAgB,CAAC,OAAD,EAAU,UAAV,CAAhB,CADK;AAEjB1B,EAAAA,MAAM,EAAEyB,sBAAUE,MAFD;AAGjBzB,EAAAA,QAAQ,EAAEuB,sBAAUG,IAAV,CAAeC,UAHR;AAIjB1B,EAAAA,eAAe,EAAEsB,sBAAUK,IAJV;AAKjBlB,EAAAA,OAAO,EAAEa,sBAAUE,MAAV,CAAiBE,UALT;AAMjBzB,EAAAA,KAAK,EAAEqB,sBAAUM,MANA;AAOjB1B,EAAAA,aAAa,EAAEoB,sBAAUM,MAPR;AAQjBzB,EAAAA,WAAW,EAAEmB,sBAAUG,IARN;AASjBrB,EAAAA,cAAc,EAAEkB,sBAAUG,IATT;AAUjBnB,EAAAA,OAAO,EAAEgB,sBAAUG,IAVF;AAWjBlB,EAAAA,WAAW,EAAEe,sBAAUO,MAXN;AAYjBrB,EAAAA,UAAU,EAAEc,sBAAUO,MAZL;AAajBnB,EAAAA,aAAa,EAAEY,sBAAUC,KAAV,CAAgB,CAAC,UAAD,EAAa,MAAb,EAAqB,YAArB,CAAhB,CAbE;AAcjBZ,EAAAA,WAAW,EAAEW,sBAAUO;AAdN,CAAnB;;eAiBe,wBAAW;AACxBhC,EAAAA,MAAM,EAAE;AACNiC,IAAAA,UAAU,EAAE,MADN;AAENC,IAAAA,aAAa,EAAE,MAFT;AAGNC,IAAAA,YAAY,EAAE;AAHR,GADgB;AAMxBf,EAAAA,QAAQ,EAAE;AACRe,IAAAA,YAAY,EAAE;AADN,GANc;AASxBd,EAAAA,gBAAgB,EAAE;AAChBe,IAAAA,YAAY,EAAE,MADE;AAEhB,eAAW;AACTC,MAAAA,WAAW,EAAE,KADJ,CAET;AACA;AACA;;AAJS;AAFK;AATM,CAAX,EAkBZtC,MAlBY,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport ChoiceInput from './choice-input';\n\nexport class Choice extends React.Component {\n onChange = (choice) => {\n const { disabled, onChoiceChanged } = this.props;\n\n if (!disabled) {\n onChoiceChanged(choice);\n }\n };\n\n render() {\n const {\n choice,\n index,\n choicesLength,\n showCorrect,\n isEvaluateMode,\n choiceMode,\n disabled,\n checked,\n correctness,\n displayKey,\n classes,\n choicesLayout,\n gridColumns,\n } = this.props;\n const choiceClass = 'choice' + (index === choicesLength - 1 ? ' last' : '');\n\n const feedback = !isEvaluateMode || showCorrect ? '' : choice.feedback;\n\n const choiceProps = {\n ...choice,\n checked,\n choiceMode,\n disabled,\n feedback,\n correctness,\n displayKey,\n choicesLayout,\n gridColumns,\n onChange: this.onChange,\n isEvaluateMode,\n };\n\n const names = classNames(classes.choice, {\n [classes.noBorder]:\n index === choicesLength - 1 || choicesLayout !== 'vertical',\n [classes.horizontalLayout]: choicesLayout === 'horizontal',\n });\n\n return (\n <div className={choiceClass} key={index}>\n <ChoiceInput {...choiceProps} className={names} />\n </div>\n );\n }\n}\n\nChoice.propTypes = {\n choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n choice: PropTypes.object,\n disabled: PropTypes.bool.isRequired,\n onChoiceChanged: PropTypes.func,\n classes: PropTypes.object.isRequired,\n index: PropTypes.number,\n choicesLength: PropTypes.number,\n showCorrect: PropTypes.bool,\n isEvaluateMode: PropTypes.bool,\n checked: PropTypes.bool,\n correctness: PropTypes.string,\n displayKey: PropTypes.string,\n choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),\n gridColumns: PropTypes.string,\n};\n\nexport default withStyles({\n choice: {\n paddingTop: '20px',\n paddingBottom: '10px',\n borderBottom: '1px solid #E0DEE0',\n },\n noBorder: {\n borderBottom: 'none',\n },\n horizontalLayout: {\n paddingRight: '20px',\n '& label': {\n marginRight: '8px',\n // '& span:first-child': {\n // paddingRight: 0\n // }\n },\n }\n})(Choice);\n"],"file":"choice.js"}
|
package/lib/feedback-tick.js
CHANGED
|
@@ -31,7 +31,7 @@ var _renderUi = require("@pie-lib/render-ui");
|
|
|
31
31
|
|
|
32
32
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
|
|
33
33
|
|
|
34
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try {
|
|
34
|
+
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
35
35
|
|
|
36
36
|
var stylesheet = {
|
|
37
37
|
incorrect: {
|