@pie-lib/rubric 0.28.1 → 0.29.0-mui-update.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +8 -11
  2. package/lib/authoring.js +218 -298
  3. package/lib/authoring.js.map +1 -1
  4. package/lib/index.js +1 -5
  5. package/lib/index.js.map +1 -1
  6. package/lib/point-menu.js +31 -68
  7. package/lib/point-menu.js.map +1 -1
  8. package/package.json +10 -8
  9. package/src/authoring.jsx +143 -183
  10. package/src/point-menu.jsx +9 -9
package/lib/authoring.js CHANGED
@@ -1,131 +1,82 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports["default"] = exports.RubricType = exports.RawAuthoring = exports.PointConfig = void 0;
9
-
10
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
-
12
9
  var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
13
-
14
10
  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
11
  var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
21
-
22
12
  var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
23
-
13
+ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
24
14
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
25
-
26
15
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
27
-
28
16
  var _react = _interopRequireDefault(require("react"));
29
-
30
17
  var _propTypes = _interopRequireDefault(require("prop-types"));
31
-
32
- var _styles = require("@material-ui/core/styles");
33
-
34
- var _classnames = _interopRequireDefault(require("classnames"));
35
-
36
- var _OutlinedInput = _interopRequireDefault(require("@material-ui/core/OutlinedInput"));
37
-
38
- var _InputLabel = _interopRequireDefault(require("@material-ui/core/InputLabel"));
39
-
40
- var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
41
-
42
- var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
43
-
44
- var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
45
-
18
+ var _styles = require("@mui/material/styles");
19
+ var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
20
+ var _OutlinedInput = _interopRequireDefault(require("@mui/material/OutlinedInput"));
21
+ var _Select = _interopRequireDefault(require("@mui/material/Select"));
22
+ var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
23
+ var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
46
24
  var _times = _interopRequireDefault(require("lodash/times"));
47
-
48
- var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));
49
-
50
- var _FormGroup = _interopRequireDefault(require("@material-ui/core/FormGroup"));
51
-
52
- var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
53
-
54
- var _grey = _interopRequireDefault(require("@material-ui/core/colors/grey"));
55
-
56
- var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
57
-
58
- var _DragIndicator = _interopRequireDefault(require("@material-ui/icons/DragIndicator"));
59
-
60
- var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
61
-
62
- var _reactBeautifulDnd = require("react-beautiful-dnd");
63
-
25
+ var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
26
+ var _FormGroup = _interopRequireDefault(require("@mui/material/FormGroup"));
27
+ var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
28
+ var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
29
+ var _DragIndicator = _interopRequireDefault(require("@mui/icons-material/DragIndicator"));
30
+ var _dnd = require("@hello-pangea/dnd");
64
31
  var _debug = _interopRequireDefault(require("debug"));
65
-
66
32
  var _takeRight = _interopRequireDefault(require("lodash/takeRight"));
67
-
68
33
  var _pointMenu = _interopRequireDefault(require("./point-menu"));
69
-
70
34
  var _range = _interopRequireDefault(require("lodash/range"));
71
-
35
+ var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
72
36
  var _configUi = require("@pie-lib/config-ui");
73
-
74
- 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; }
75
-
76
- 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; }
77
-
78
- 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); }; }
79
-
80
- 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; } }
81
-
37
+ var _colors = require("@mui/material/colors");
38
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
39
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
40
+ function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
41
+ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
82
42
  var log = (0, _debug["default"])('pie-lib:rubric:authoring');
83
-
84
43
  var reorder = function reorder(list, startIndex, endIndex) {
85
44
  var result = Array.from(list);
86
-
87
45
  var _result$splice = result.splice(startIndex, 1),
88
- _result$splice2 = (0, _slicedToArray2["default"])(_result$splice, 1),
89
- removed = _result$splice2[0];
90
-
46
+ _result$splice2 = (0, _slicedToArray2["default"])(_result$splice, 1),
47
+ removed = _result$splice2[0];
91
48
  result.splice(endIndex, 0, removed);
92
49
  return result;
93
50
  };
94
-
95
- var RubricType = _propTypes["default"].shape({
51
+ var RubricType = exports.RubricType = _propTypes["default"].shape({
96
52
  excludeZero: _propTypes["default"].bool,
97
53
  points: _propTypes["default"].arrayOf(_propTypes["default"].string),
98
54
  sampleAnswers: _propTypes["default"].arrayOf(_propTypes["default"].string),
99
55
  maxPoints: _propTypes["default"].number,
100
56
  rubriclessInstruction: _propTypes["default"].string
101
57
  });
102
-
103
- exports.RubricType = RubricType;
104
- var MaxPoints = (0, _styles.withStyles)(function (theme) {
105
- return {
106
- formControl: {
107
- minWidth: '120px',
108
- margin: theme.spacing.unit
109
- }
110
- };
111
- })(function (props) {
58
+ var MaxPoints = function MaxPoints(props) {
112
59
  var value = props.value,
113
- _onChange = props.onChange,
114
- max = props.max,
115
- classes = props.classes;
60
+ _onChange = props.onChange,
61
+ max = props.max;
62
+ var labelId = 'max-points-label';
116
63
  return /*#__PURE__*/_react["default"].createElement(_FormControl["default"], {
117
- className: classes.formControl,
64
+ sx: {
65
+ minWidth: 120,
66
+ m: 1
67
+ },
118
68
  variant: "outlined"
119
69
  }, /*#__PURE__*/_react["default"].createElement(_InputLabel["default"], {
120
- width: 100,
121
- htmlFor: "..."
70
+ id: labelId
122
71
  }, "Max Points"), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
72
+ labelId: labelId,
73
+ label: "Max Points",
123
74
  value: value,
124
75
  onChange: function onChange(e) {
125
76
  return _onChange(e.target.value);
126
77
  },
127
78
  input: /*#__PURE__*/_react["default"].createElement(_OutlinedInput["default"], {
128
- labelWidth: 80
79
+ label: "Max Points"
129
80
  })
130
81
  }, (0, _range["default"])(1, max + 1).map(function (v) {
131
82
  return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
@@ -133,122 +84,151 @@ var MaxPoints = (0, _styles.withStyles)(function (theme) {
133
84
  value: v
134
85
  }, v);
135
86
  })));
136
- }); // if the value is null or 'null', the Sample Answer input field for that point will not be dispalyed
137
- // if the value is '', the Sample Answer input field will be empty
87
+ };
138
88
 
89
+ // if the value is null or 'null', the Sample Answer input field for that point will not be dispalyed
90
+ // if the value is '', the Sample Answer input field will be empty
139
91
  var checkSampleAnswer = function checkSampleAnswer(sampleAnswer) {
140
92
  return sampleAnswer === null || sampleAnswer === 'null';
141
93
  };
142
-
143
- var PointConfig = (0, _styles.withStyles)(function (theme) {
94
+ var PCContainer = (0, _styles.styled)('div')(function () {
95
+ return {};
96
+ });
97
+ var Row = (0, _styles.styled)('div')(function () {
144
98
  return {
145
- pointConfig: {},
146
- row: {
147
- display: 'flex',
148
- width: '100%',
149
- position: 'relative'
150
- },
151
- editor: {
152
- width: '100%',
153
- backgroundColor: "".concat(theme.palette.common.white, " !important")
154
- },
155
- dragIndicator: {
156
- paddingTop: theme.spacing.unit,
157
- color: _grey["default"][500]
158
- },
159
- pointsLabel: {
160
- color: _grey["default"][500],
161
- paddingBottom: theme.spacing.unit,
162
- textTransform: 'uppercase'
163
- },
164
- sampleAnswersEditor: {
165
- paddingLeft: theme.spacing.unit * 3
166
- },
167
- pointMenu: {
168
- position: 'absolute',
169
- right: 0
170
- },
171
- errorText: {
172
- fontSize: theme.typography.fontSize - 2,
173
- color: theme.palette.error.main,
174
- paddingLeft: theme.spacing.unit * 3,
175
- paddingTop: theme.spacing.unit
176
- }
99
+ display: 'flex',
100
+ width: '100%',
101
+ position: 'relative'
102
+ };
103
+ });
104
+ var EditorDiv = (0, _styles.styled)('div')(function (_ref) {
105
+ var theme = _ref.theme;
106
+ return {
107
+ width: '100%',
108
+ backgroundColor: "".concat(theme.palette.common.white)
109
+ };
110
+ });
111
+ var DragIndicatorStyled = (0, _styles.styled)(_DragIndicator["default"])(function (_ref2) {
112
+ var theme = _ref2.theme;
113
+ return {
114
+ paddingTop: theme.spacing(1),
115
+ color: _colors.grey[500]
116
+ };
117
+ });
118
+ var PointsLabel = (0, _styles.styled)(_Typography["default"])(function (_ref3) {
119
+ var theme = _ref3.theme;
120
+ return {
121
+ color: _colors.grey[500],
122
+ paddingBottom: theme.spacing(1),
123
+ textTransform: 'uppercase'
124
+ };
125
+ });
126
+ var SampleAnswersEditor = (0, _styles.styled)('div')(function (_ref4) {
127
+ var theme = _ref4.theme;
128
+ return {
129
+ paddingLeft: theme.spacing(3)
130
+ };
131
+ });
132
+ var ErrorText = (0, _styles.styled)('div')(function (_ref5) {
133
+ var theme = _ref5.theme;
134
+ return {
135
+ fontSize: theme.typography.fontSize - 2,
136
+ color: theme.palette.error.main,
137
+ paddingLeft: theme.spacing(3),
138
+ paddingTop: theme.spacing(1)
139
+ };
140
+ });
141
+ var PointMenuWrapper = (0, _styles.styled)('div')(function () {
142
+ return {
143
+ position: 'absolute',
144
+ right: 0
177
145
  };
178
- })(function (props) {
146
+ });
147
+ var PointConfig = exports.PointConfig = function PointConfig(props) {
179
148
  var points = props.points,
180
- content = props.content,
181
- classes = props.classes,
182
- sampleAnswer = props.sampleAnswer,
183
- _props$mathMlOptions = props.mathMlOptions,
184
- mathMlOptions = _props$mathMlOptions === void 0 ? {} : _props$mathMlOptions,
185
- error = props.error,
186
- _props$pluginOpts = props.pluginOpts,
187
- pluginOpts = _props$pluginOpts === void 0 ? {} : _props$pluginOpts;
149
+ content = props.content,
150
+ sampleAnswer = props.sampleAnswer,
151
+ _props$mathMlOptions = props.mathMlOptions,
152
+ mathMlOptions = _props$mathMlOptions === void 0 ? {} : _props$mathMlOptions,
153
+ error = props.error,
154
+ _props$pluginOpts = props.pluginOpts,
155
+ pluginOpts = _props$pluginOpts === void 0 ? {} : _props$pluginOpts;
188
156
  var pointsLabel = "".concat(points, " ").concat(points <= 1 ? 'pt' : 'pts');
189
157
  var showSampleAnswer = checkSampleAnswer(sampleAnswer);
190
- return /*#__PURE__*/_react["default"].createElement("div", {
191
- className: classes.pointConfig
192
- }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
193
- variant: "overline",
194
- className: classes.pointsLabel
195
- }, pointsLabel), /*#__PURE__*/_react["default"].createElement("div", {
196
- className: classes.row
197
- }, /*#__PURE__*/_react["default"].createElement(_DragIndicator["default"], {
198
- className: classes.dragIndicator
199
- }), /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
200
- className: classes.editor,
158
+ return /*#__PURE__*/_react["default"].createElement(PCContainer, null, /*#__PURE__*/_react["default"].createElement(PointsLabel, {
159
+ variant: "overline"
160
+ }, pointsLabel), /*#__PURE__*/_react["default"].createElement(Row, null, /*#__PURE__*/_react["default"].createElement(DragIndicatorStyled, null), /*#__PURE__*/_react["default"].createElement(EditorDiv, null, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
201
161
  error: error,
202
162
  pluginProps: pluginOpts,
203
163
  markup: content,
204
164
  onChange: props.onChange,
205
165
  mathMlOptions: mathMlOptions
206
- }), /*#__PURE__*/_react["default"].createElement(_pointMenu["default"], {
207
- classes: {
208
- icon: classes.pointMenu
209
- },
166
+ })), /*#__PURE__*/_react["default"].createElement(PointMenuWrapper, null, /*#__PURE__*/_react["default"].createElement(_pointMenu["default"], {
210
167
  showSampleAnswer: showSampleAnswer,
211
168
  onChange: props.onMenuChange
212
- })), error && /*#__PURE__*/_react["default"].createElement("div", {
213
- className: classes.errorText
214
- }, error), !showSampleAnswer && /*#__PURE__*/_react["default"].createElement("div", {
215
- className: classes.sampleAnswersEditor
216
- }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
217
- variant: "overline",
218
- className: classes.dragIndicator
219
- }, "Sample Response"), /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
220
- className: classes.editor,
169
+ }))), error && /*#__PURE__*/_react["default"].createElement(ErrorText, null, error), !showSampleAnswer && /*#__PURE__*/_react["default"].createElement(SampleAnswersEditor, null, /*#__PURE__*/_react["default"].createElement(DragIndicatorStyled, {
170
+ as: _Typography["default"],
171
+ variant: "overline"
172
+ }, "Sample Response"), /*#__PURE__*/_react["default"].createElement(EditorDiv, null, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
221
173
  markup: sampleAnswer,
222
174
  pluginProps: pluginOpts,
223
175
  onChange: props.onSampleChange,
224
176
  mathMlOptions: mathMlOptions
225
- })));
177
+ }))));
178
+ };
179
+ var Container = (0, _styles.styled)('div')(function (_ref6) {
180
+ var theme = _ref6.theme;
181
+ return {
182
+ backgroundColor: _colors.grey[200],
183
+ borderWidth: 1,
184
+ borderStyle: 'solid',
185
+ borderColor: _colors.grey[300],
186
+ padding: theme.spacing(2),
187
+ margin: theme.spacing(1)
188
+ };
226
189
  });
227
- exports.PointConfig = PointConfig;
228
-
229
- var RawAuthoring = /*#__PURE__*/function (_React$Component) {
230
- (0, _inherits2["default"])(RawAuthoring, _React$Component);
231
-
232
- var _super = _createSuper(RawAuthoring);
233
-
190
+ var InputContainerWrapper = (0, _styles.styled)('div')(function (_ref7) {
191
+ var theme = _ref7.theme;
192
+ return {
193
+ width: '100%',
194
+ paddingTop: theme.spacing(2),
195
+ marginBottom: theme.spacing(2)
196
+ };
197
+ });
198
+ var Rubricless = (0, _styles.styled)('div')(function () {
199
+ return {
200
+ display: 'none'
201
+ };
202
+ });
203
+ var ConfigHolder = (0, _styles.styled)('div')(function (_ref8) {
204
+ var theme = _ref8.theme;
205
+ return {
206
+ paddingTop: theme.spacing(1),
207
+ paddingBottom: theme.spacing(1)
208
+ };
209
+ });
210
+ var RubricTitle = (0, _styles.styled)(_Typography["default"])(function (_ref9) {
211
+ var theme = _ref9.theme;
212
+ return {
213
+ paddingLeft: theme.spacing(1),
214
+ margin: theme.spacing(1)
215
+ };
216
+ });
217
+ var RawAuthoring = exports.RawAuthoring = /*#__PURE__*/function (_React$Component) {
234
218
  function RawAuthoring() {
235
219
  var _this;
236
-
237
220
  (0, _classCallCheck2["default"])(this, RawAuthoring);
238
-
239
221
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
240
222
  args[_key] = arguments[_key];
241
223
  }
242
-
243
- _this = _super.call.apply(_super, [this].concat(args));
244
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "dragEnd", function (result) {
224
+ _this = _callSuper(this, RawAuthoring, [].concat(args));
225
+ (0, _defineProperty2["default"])(_this, "dragEnd", function (result) {
245
226
  if (!result.destination) {
246
227
  return;
247
228
  }
248
-
249
229
  var _this$props = _this.props,
250
- value = _this$props.value,
251
- onChange = _this$props.onChange;
230
+ value = _this$props.value,
231
+ onChange = _this$props.onChange;
252
232
  var points = reorder(value.points, result.source.index, result.destination.index);
253
233
  var sampleAnswers = reorder(value.sampleAnswers, result.source.index, result.destination.index);
254
234
  onChange(_objectSpread(_objectSpread({}, value), {}, {
@@ -256,23 +236,22 @@ var RawAuthoring = /*#__PURE__*/function (_React$Component) {
256
236
  sampleAnswers: sampleAnswers
257
237
  }));
258
238
  });
259
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeRubriclessInstruction", function (input) {
239
+ (0, _defineProperty2["default"])(_this, "changeRubriclessInstruction", function (input) {
260
240
  var _this$props2 = _this.props,
261
- value = _this$props2.value,
262
- onChange = _this$props2.onChange;
241
+ value = _this$props2.value,
242
+ onChange = _this$props2.onChange;
263
243
  onChange(_objectSpread(_objectSpread({}, value), {}, {
264
244
  rubriclessInstruction: input
265
245
  }));
266
246
  });
267
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeMaxPoints", function (maxPoints) {
247
+ (0, _defineProperty2["default"])(_this, "changeMaxPoints", function (maxPoints) {
268
248
  var _this$props3 = _this.props,
269
- value = _this$props3.value,
270
- onChange = _this$props3.onChange,
271
- rubricless = _this$props3.rubricless;
249
+ value = _this$props3.value,
250
+ onChange = _this$props3.onChange,
251
+ rubricless = _this$props3.rubricless;
272
252
  var currentMax = value.points.length - 1;
273
253
  log('current', currentMax, 'new: ', maxPoints);
274
254
  var points, sampleAnswers;
275
-
276
255
  if (maxPoints > currentMax) {
277
256
  points = (0, _times["default"])(maxPoints - currentMax).map(function () {
278
257
  return '';
@@ -281,13 +260,11 @@ var RawAuthoring = /*#__PURE__*/function (_React$Component) {
281
260
  return null;
282
261
  }).concat(value.sampleAnswers);
283
262
  }
284
-
285
263
  if (maxPoints < currentMax) {
286
264
  log('less than');
287
265
  points = (0, _takeRight["default"])(value.points, maxPoints + 1);
288
266
  sampleAnswers = (0, _takeRight["default"])(value.sampleAnswers, maxPoints + 1);
289
267
  }
290
-
291
268
  if (points && !rubricless) {
292
269
  onChange(_objectSpread(_objectSpread({}, value), {}, {
293
270
  points: points,
@@ -300,31 +277,29 @@ var RawAuthoring = /*#__PURE__*/function (_React$Component) {
300
277
  }));
301
278
  }
302
279
  });
303
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeContent", function (index, content, type) {
280
+ (0, _defineProperty2["default"])(_this, "changeContent", function (index, content, type) {
304
281
  // type could be 'points' or 'sampleAnswers'
305
282
  log("changeModel[".concat(type, "]:"), index, content);
306
-
307
283
  if (type !== 'points' && type !== 'sampleAnswers') {
308
284
  return;
309
285
  }
310
-
311
286
  var _this$props4 = _this.props,
312
- value = _this$props4.value,
313
- onChange = _this$props4.onChange;
287
+ value = _this$props4.value,
288
+ onChange = _this$props4.onChange;
314
289
  var items = value[type] && Array.from(value[type]);
315
290
  items.splice(index, 1, content);
316
291
  log("changeModel[".concat(type, "]:"), items);
317
292
  onChange(_objectSpread(_objectSpread({}, value), {}, (0, _defineProperty2["default"])({}, type, items)));
318
293
  });
319
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "excludeZeros", function () {
294
+ (0, _defineProperty2["default"])(_this, "excludeZeros", function () {
320
295
  var _this$props5 = _this.props,
321
- value = _this$props5.value,
322
- onChange = _this$props5.onChange;
296
+ value = _this$props5.value,
297
+ onChange = _this$props5.onChange;
323
298
  onChange(_objectSpread(_objectSpread({}, value), {}, {
324
299
  excludeZero: !value.excludeZero
325
300
  }));
326
301
  });
327
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "shouldRenderPoint", function (index, value) {
302
+ (0, _defineProperty2["default"])(_this, "shouldRenderPoint", function (index, value) {
328
303
  if (!value.excludeZero) {
329
304
  return true;
330
305
  } else {
@@ -333,15 +308,13 @@ var RawAuthoring = /*#__PURE__*/function (_React$Component) {
333
308
  } else if (index === value.points.length - 1) {
334
309
  return false;
335
310
  }
336
-
337
311
  return true;
338
312
  }
339
313
  });
340
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onPointMenuChange", function (index, clickedItem) {
314
+ (0, _defineProperty2["default"])(_this, "onPointMenuChange", function (index, clickedItem) {
341
315
  if (clickedItem === 'sample') {
342
316
  var value = _this.props.value;
343
317
  var sampleAnswers = Array.from(value.sampleAnswers || []);
344
-
345
318
  if (checkSampleAnswer(sampleAnswers[index])) {
346
319
  // an empty string will display an empty Sample Answer input field
347
320
  _this.changeContent(index, '', 'sampleAnswers');
@@ -353,59 +326,52 @@ var RawAuthoring = /*#__PURE__*/function (_React$Component) {
353
326
  });
354
327
  return _this;
355
328
  }
356
-
357
- (0, _createClass2["default"])(RawAuthoring, [{
329
+ (0, _inherits2["default"])(RawAuthoring, _React$Component);
330
+ return (0, _createClass2["default"])(RawAuthoring, [{
358
331
  key: "render",
359
332
  value: function render() {
360
333
  var _this2 = this;
361
-
362
334
  var _this$props6 = this.props,
363
- classes = _this$props6.classes,
364
- className = _this$props6.className,
365
- value = _this$props6.value,
366
- _this$props6$mathMlOp = _this$props6.mathMlOptions,
367
- mathMlOptions = _this$props6$mathMlOp === void 0 ? {} : _this$props6$mathMlOp,
368
- _this$props6$config = _this$props6.config,
369
- config = _this$props6$config === void 0 ? {} : _this$props6$config,
370
- _this$props6$rubricle = _this$props6.rubricless,
371
- rubricless = _this$props6$rubricle === void 0 ? false : _this$props6$rubricle,
372
- _this$props6$pluginOp = _this$props6.pluginOpts,
373
- pluginOpts = _this$props6$pluginOp === void 0 ? {} : _this$props6$pluginOp;
374
-
375
- var _ref = value || {},
376
- _ref$excludeZeroEnabl = _ref.excludeZeroEnabled,
377
- excludeZeroEnabled = _ref$excludeZeroEnabl === void 0 ? true : _ref$excludeZeroEnabl,
378
- _ref$maxPointsEnabled = _ref.maxPointsEnabled,
379
- maxPointsEnabled = _ref$maxPointsEnabled === void 0 ? true : _ref$maxPointsEnabled,
380
- _ref$errors = _ref.errors,
381
- errors = _ref$errors === void 0 ? {} : _ref$errors,
382
- _ref$rubriclessInstru = _ref.rubriclessInstructionEnabled,
383
- rubriclessInstructionEnabled = _ref$rubriclessInstru === void 0 ? false : _ref$rubriclessInstru,
384
- _ref$maxPoints = _ref.maxPoints,
385
- maxPoints = _ref$maxPoints === void 0 ? 10 : _ref$maxPoints; // rubric will contain a max value for maxPoints
386
-
387
-
388
- var _ref2 = config || {},
389
- _ref2$rubriclessInstr = _ref2.rubriclessInstruction,
390
- rubriclessInstruction = _ref2$rubriclessInstr === void 0 ? {} : _ref2$rubriclessInstr,
391
- _ref2$maxMaxPoints = _ref2.maxMaxPoints,
392
- maxMaxPoints = _ref2$maxMaxPoints === void 0 ? 10 : _ref2$maxMaxPoints;
393
-
394
- var _ref3 = errors || {},
395
- pointsDescriptorsErrors = _ref3.pointsDescriptorsErrors;
396
-
335
+ className = _this$props6.className,
336
+ value = _this$props6.value,
337
+ _this$props6$mathMlOp = _this$props6.mathMlOptions,
338
+ mathMlOptions = _this$props6$mathMlOp === void 0 ? {} : _this$props6$mathMlOp,
339
+ _this$props6$config = _this$props6.config,
340
+ config = _this$props6$config === void 0 ? {} : _this$props6$config,
341
+ _this$props6$rubricle = _this$props6.rubricless,
342
+ rubricless = _this$props6$rubricle === void 0 ? false : _this$props6$rubricle,
343
+ _this$props6$pluginOp = _this$props6.pluginOpts,
344
+ pluginOpts = _this$props6$pluginOp === void 0 ? {} : _this$props6$pluginOp;
345
+ var _ref0 = value || {},
346
+ _ref0$excludeZeroEnab = _ref0.excludeZeroEnabled,
347
+ excludeZeroEnabled = _ref0$excludeZeroEnab === void 0 ? true : _ref0$excludeZeroEnab,
348
+ _ref0$maxPointsEnable = _ref0.maxPointsEnabled,
349
+ maxPointsEnabled = _ref0$maxPointsEnable === void 0 ? true : _ref0$maxPointsEnable,
350
+ _ref0$errors = _ref0.errors,
351
+ errors = _ref0$errors === void 0 ? {} : _ref0$errors,
352
+ _ref0$rubriclessInstr = _ref0.rubriclessInstructionEnabled,
353
+ rubriclessInstructionEnabled = _ref0$rubriclessInstr === void 0 ? false : _ref0$rubriclessInstr,
354
+ _ref0$maxPoints = _ref0.maxPoints,
355
+ maxPoints = _ref0$maxPoints === void 0 ? 10 : _ref0$maxPoints;
356
+ // rubric will contain a max value for maxPoints
357
+ var _ref1 = config || {},
358
+ _ref1$rubriclessInstr = _ref1.rubriclessInstruction,
359
+ rubriclessInstruction = _ref1$rubriclessInstr === void 0 ? {} : _ref1$rubriclessInstr,
360
+ _ref1$maxMaxPoints = _ref1.maxMaxPoints,
361
+ maxMaxPoints = _ref1$maxMaxPoints === void 0 ? 10 : _ref1$maxMaxPoints;
362
+ var _ref10 = errors || {},
363
+ pointsDescriptorsErrors = _ref10.pointsDescriptorsErrors;
397
364
  if (value && Number.isFinite(value.maxPoints)) {
398
365
  // eslint-disable-next-line no-console
399
366
  console.warn('maxPoints is deprecated - remove from model');
400
- } // for rubric value is computed based on points
401
-
367
+ }
402
368
 
369
+ // for rubric value is computed based on points
403
370
  var maxPointsValue = !rubricless ? value.points.length - 1 : maxPoints;
404
371
  return /*#__PURE__*/_react["default"].createElement("div", {
405
- className: (0, _classnames["default"])(classes["class"], className)
406
- }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
407
- variant: "h5",
408
- className: classes.rubricTitle
372
+ className: className
373
+ }, /*#__PURE__*/_react["default"].createElement(RubricTitle, {
374
+ variant: "h5"
409
375
  }, "Rubric"), /*#__PURE__*/_react["default"].createElement(_FormGroup["default"], {
410
376
  row: true
411
377
  }, maxPointsEnabled && /*#__PURE__*/_react["default"].createElement(MaxPoints, {
@@ -419,11 +385,9 @@ var RawAuthoring = /*#__PURE__*/function (_React$Component) {
419
385
  checked: value.excludeZero,
420
386
  onChange: this.excludeZeros
421
387
  })
422
- })), rubriclessInstructionEnabled && rubricless && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
423
- label: rubriclessInstruction.label,
424
- className: classes.inputContainer
388
+ })), rubriclessInstructionEnabled && rubricless && /*#__PURE__*/_react["default"].createElement(InputContainerWrapper, null, /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
389
+ label: rubriclessInstruction.label
425
390
  }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
426
- className: classes.input,
427
391
  markup: value.rubriclessInstruction || '',
428
392
  onChange: this.changeRubriclessInstruction,
429
393
  pluginProps: pluginOpts,
@@ -435,23 +399,22 @@ var RawAuthoring = /*#__PURE__*/function (_React$Component) {
435
399
  language: 'special'
436
400
  }],
437
401
  mathMlOptions: mathMlOptions
438
- })), /*#__PURE__*/_react["default"].createElement("div", {
439
- className: rubricless ? classes.rubricless : classes.container
440
- }, /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.DragDropContext, {
402
+ }))), /*#__PURE__*/_react["default"].createElement("div", {
403
+ className: rubricless ? undefined : undefined
404
+ }, rubricless ? /*#__PURE__*/_react["default"].createElement(Rubricless, null) : /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_dnd.DragDropContext, {
441
405
  onDragEnd: this.dragEnd
442
- }, /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Droppable, {
406
+ }, /*#__PURE__*/_react["default"].createElement(_dnd.Droppable, {
443
407
  droppableId: "droppable"
444
408
  }, function (provided) {
445
409
  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, provided.droppableProps, {
446
410
  ref: provided.innerRef
447
411
  }), value.points.map(function (p, index) {
448
- return _this2.shouldRenderPoint(index, value) && /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Draggable, {
412
+ return _this2.shouldRenderPoint(index, value) && /*#__PURE__*/_react["default"].createElement(_dnd.Draggable, {
449
413
  key: "".concat(p.points, "-").concat(index),
450
414
  index: index,
451
415
  draggableId: index.toString()
452
416
  }, function (provided) {
453
- return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
454
- className: classes.configHolder,
417
+ return /*#__PURE__*/_react["default"].createElement(ConfigHolder, (0, _extends2["default"])({
455
418
  ref: provided.innerRef
456
419
  }, provided.draggableProps, provided.dragHandleProps), /*#__PURE__*/_react["default"].createElement(PointConfig, {
457
420
  points: value.points.length - 1 - index,
@@ -472,15 +435,11 @@ var RawAuthoring = /*#__PURE__*/function (_React$Component) {
472
435
  }));
473
436
  });
474
437
  }), provided.placeholder);
475
- }))));
438
+ })))));
476
439
  }
477
440
  }]);
478
- return RawAuthoring;
479
- }(_react["default"].Component);
480
-
481
- exports.RawAuthoring = RawAuthoring;
441
+ }(_react["default"].Component); // styles migrated to styled-components above
482
442
  (0, _defineProperty2["default"])(RawAuthoring, "propTypes", {
483
- classes: _propTypes["default"].object.isRequired,
484
443
  className: _propTypes["default"].string,
485
444
  value: RubricType,
486
445
  config: _propTypes["default"].object,
@@ -489,69 +448,32 @@ exports.RawAuthoring = RawAuthoring;
489
448
  onChange: _propTypes["default"].func
490
449
  });
491
450
  (0, _defineProperty2["default"])(RawAuthoring, "defaultProps", {});
492
-
493
- var styles = function styles(theme) {
494
- return {
495
- container: {
496
- backgroundColor: _grey["default"][200],
497
- borderWidth: 1,
498
- borderStyle: 'solid',
499
- borderColor: _grey["default"][300],
500
- padding: theme.spacing.unit * 2,
501
- margin: theme.spacing.unit
502
- },
503
- inputContainer: {
504
- width: '100%',
505
- paddingTop: theme.spacing.unit * 2,
506
- marginBottom: theme.spacing.unit * 2
507
- },
508
- rubricless: {
509
- display: 'none'
510
- },
511
- configHolder: {
512
- paddingTop: theme.spacing.unit,
513
- paddingBottom: theme.spacing.unit
514
- },
515
- rubricTitle: {
516
- paddingLeft: theme.spacing.unit,
517
- margin: theme.spacing.unit
518
- }
519
- };
520
- };
521
-
522
- var StyledRawAuthoring = (0, _styles.withStyles)(styles)(RawAuthoring);
523
-
524
451
  var Reverse = function Reverse(props) {
525
- var _ref4 = props || {},
526
- _ref4$rubricless = _ref4.rubricless,
527
- rubricless = _ref4$rubricless === void 0 ? false : _ref4$rubricless,
528
- _ref4$config = _ref4.config,
529
- config = _ref4$config === void 0 ? {} : _ref4$config,
530
- _ref4$pluginOpts = _ref4.pluginOpts,
531
- pluginOpts = _ref4$pluginOpts === void 0 ? {} : _ref4$pluginOpts;
532
-
452
+ var _ref11 = props || {},
453
+ _ref11$rubricless = _ref11.rubricless,
454
+ rubricless = _ref11$rubricless === void 0 ? false : _ref11$rubricless,
455
+ _ref11$config = _ref11.config,
456
+ config = _ref11$config === void 0 ? {} : _ref11$config,
457
+ _ref11$pluginOpts = _ref11.pluginOpts,
458
+ pluginOpts = _ref11$pluginOpts === void 0 ? {} : _ref11$pluginOpts;
533
459
  var points = Array.from(props.value.points || []).reverse();
534
460
  var sampleAnswers = Array.from(props.value.sampleAnswers || []).reverse();
535
-
536
461
  if (points.length > sampleAnswers.length) {
537
462
  sampleAnswers = (0, _times["default"])(points.length - sampleAnswers.length).map(function () {
538
463
  return null;
539
464
  }).concat(sampleAnswers);
540
465
  }
541
-
542
466
  var value = _objectSpread(_objectSpread({}, props.value), {}, {
543
467
  points: points,
544
468
  sampleAnswers: sampleAnswers
545
469
  });
546
-
547
470
  var onChange = function onChange(value) {
548
471
  props.onChange(_objectSpread(_objectSpread({}, value), {}, {
549
472
  points: Array.from(value.points || []).reverse(),
550
473
  sampleAnswers: Array.from(value.sampleAnswers || []).reverse()
551
474
  }));
552
475
  };
553
-
554
- return /*#__PURE__*/_react["default"].createElement(StyledRawAuthoring, {
476
+ return /*#__PURE__*/_react["default"].createElement(RawAuthoring, {
555
477
  value: value,
556
478
  config: config,
557
479
  onChange: onChange,
@@ -559,7 +481,6 @@ var Reverse = function Reverse(props) {
559
481
  pluginOpts: pluginOpts
560
482
  });
561
483
  };
562
-
563
484
  Reverse.propTypes = {
564
485
  value: RubricType,
565
486
  config: _propTypes["default"].object,
@@ -568,6 +489,5 @@ Reverse.propTypes = {
568
489
  getIndex: _propTypes["default"].func,
569
490
  onChange: _propTypes["default"].func
570
491
  };
571
- var _default = Reverse;
572
- exports["default"] = _default;
492
+ var _default = exports["default"] = Reverse;
573
493
  //# sourceMappingURL=authoring.js.map