@pie-element/categorize 6.9.9 → 6.9.10-beta.1445

package/configure/lib/design/categories/RowLabel.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RowLabel = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+
+var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
+
+var styles = function styles(theme) {
+  return {
+    rowLabel: {
+      gridColumn: '1/3'
+    },
+    rowLabelHolder: {
+      width: '100%'
+    }
+  };
+};
+
+var RowLabel = (0, _styles.withStyles)(styles)(function (_ref) {
+  var categoriesPerRow = _ref.categoriesPerRow,
+      classes = _ref.classes,
+      disabled = _ref.disabled,
+      markup = _ref.markup,
+      imageSupport = _ref.imageSupport,
+      onChange = _ref.onChange,
+      toolbarOpts = _ref.toolbarOpts,
+      spellCheck = _ref.spellCheck,
+      maxImageWidth = _ref.maxImageWidth,
+      maxImageHeight = _ref.maxImageHeight,
+      uploadSoundSupport = _ref.uploadSoundSupport;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      gridColumn: "1/".concat(categoriesPerRow + 1),
+      width: '100%'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    className: classes.text
+  }, "Row Label"), /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
+    className: classes.rowLabelHolder,
+    disabled: disabled,
+    markup: markup,
+    onChange: onChange,
+    imageSupport: imageSupport,
+    nonEmpty: false,
+    toolbarOpts: toolbarOpts,
+    spellCheck: spellCheck,
+    maxImageWidth: maxImageWidth,
+    maxImageHeight: maxImageHeight,
+    uploadSoundSupport: uploadSoundSupport,
+    languageCharactersProps: [{
+      language: 'spanish'
+    }, {
+      language: 'special'
+    }]
+  }));
+});
+exports.RowLabel = RowLabel;
+//# sourceMappingURL=RowLabel.js.map

package/configure/lib/design/categories/RowLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/design/categories/RowLabel.jsx"],"names":["styles","theme","rowLabel","gridColumn","rowLabelHolder","width","RowLabel","categoriesPerRow","classes","disabled","markup","imageSupport","onChange","toolbarOpts","spellCheck","maxImageWidth","maxImageHeight","uploadSoundSupport","text","language"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACvBC,IAAAA,QAAQ,EAAE;AACNC,MAAAA,UAAU,EAAE;AADN,KADa;AAIvBC,IAAAA,cAAc,EAAE;AACZC,MAAAA,KAAK,EAAE;AADK;AAJO,GAAZ;AAAA,CAAf;;AASO,IAAMC,QAAQ,GAAG,wBAAWN,MAAX,EACpB,gBAYO;AAAA,MAXFO,gBAWE,QAXFA,gBAWE;AAAA,MAVFC,OAUE,QAVFA,OAUE;AAAA,MATFC,QASE,QATFA,QASE;AAAA,MARFC,MAQE,QARFA,MAQE;AAAA,MAPFC,YAOE,QAPFA,YAOE;AAAA,MANFC,QAME,QANFA,QAME;AAAA,MALFC,WAKE,QALFA,WAKE;AAAA,MAJFC,UAIE,QAJFA,UAIE;AAAA,MAHFC,aAGE,QAHFA,aAGE;AAAA,MAFFC,cAEE,QAFFA,cAEE;AAAA,MADFC,kBACE,QADFA,kBACE;AAEH,sBACI;AACI,IAAA,KAAK,EAAE;AACHd,MAAAA,UAAU,cAAOI,gBAAgB,GAAG,CAA1B,CADP;AAEHF,MAAAA,KAAK,EAAE;AAFJ;AADX,kBAMI,gCAAC,sBAAD;AAAY,IAAA,SAAS,EAAEG,OAAO,CAACU;AAA/B,iBANJ,eAOI,gCAAC,wBAAD;AACI,IAAA,SAAS,EAAEV,OAAO,CAACJ,cADvB;AAEI,IAAA,QAAQ,EAAEK,QAFd;AAGI,IAAA,MAAM,EAAEC,MAHZ;AAII,IAAA,QAAQ,EAAEE,QAJd;AAKI,IAAA,YAAY,EAAED,YALlB;AAMI,IAAA,QAAQ,EAAE,KANd;AAOI,IAAA,WAAW,EAAEE,WAPjB;AAQI,IAAA,UAAU,EAAEC,UARhB;AASI,IAAA,aAAa,EAAEC,aATnB;AAUI,IAAA,cAAc,EAAEC,cAVpB;AAWI,IAAA,kBAAkB,EAAEC,kBAXxB;AAYI,IAAA,uBAAuB,EAAE,CAAC;AAAEE,MAAAA,QAAQ,EAAE;AAAZ,KAAD,EAA0B;AAAEA,MAAAA,QAAQ,EAAE;AAAZ,KAA1B;AAZ7B,IAPJ,CADJ;AAwBH,CAvCmB,CAAjB","sourcesContent":["import React from 'react';\nimport {withStyles} from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\nimport EditableHtml from '@pie-lib/editable-html';\n\nconst styles = (theme) => ({\n    rowLabel: {\n        gridColumn: '1/3',\n    },\n    rowLabelHolder: {\n        width: '100%',\n    },\n});\n\nexport const RowLabel = withStyles(styles)(\n    ({\n         categoriesPerRow,\n         classes,\n         disabled,\n         markup,\n         imageSupport,\n         onChange,\n         toolbarOpts,\n         spellCheck,\n         maxImageWidth,\n         maxImageHeight,\n         uploadSoundSupport,\n     }) => {\n\n        return (\n            <div\n                style={{\n                    gridColumn: `1/${categoriesPerRow + 1}`,\n                    width: '100%',\n                }}\n            >\n                <Typography className={classes.text}>Row Label</Typography>\n                <EditableHtml\n                    className={classes.rowLabelHolder}\n                    disabled={disabled}\n                    markup={markup}\n                    onChange={onChange}\n                    imageSupport={imageSupport}\n                    nonEmpty={false}\n                    toolbarOpts={toolbarOpts}\n                    spellCheck={spellCheck}\n                    maxImageWidth={maxImageWidth}\n                    maxImageHeight={maxImageHeight}\n                    uploadSoundSupport={uploadSoundSupport}\n                    languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}\n                />\n            </div>\n        );\n    },\n);\n"],"file":"RowLabel.js"}

package/configure/lib/design/categories/alternateResponses.js

@@ -31,6 +31,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _category = _interopRequireDefault(require("./category"));
 
+var _categorize = require("@pie-lib/categorize");
+
+var _RowLabel = require("./RowLabel");
+
 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); }; }
 
 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; } }
@@ -78,11 +82,16 @@ var AlternateResponses = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "addChoiceToCategory", function (choice, categoryId) {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "addChoiceToCategory", function (addedChoice, categoryId) {
       var _this$props = _this.props,
           altIndex = _this$props.altIndex,
-          correctResponse = _this$props.model.correctResponse,
+          _this$props$model = _this$props.model,
+          correctResponse = _this$props$model.correctResponse,
+          choices = _this$props$model.choices,
           onModelChanged = _this$props.onModelChanged;
+      var choice = choices.find(function (c) {
+        return c.id === addedChoice.id;
+      });
       correctResponse.forEach(function (a) {
         if (a.category === categoryId) {
           a.alternateResponses = a.alternateResponses || [];
@@ -91,8 +100,34 @@ var AlternateResponses = /*#__PURE__*/function (_React$Component) {
             a.alternateResponses[altIndex] = [];
           }
 
-          a.alternateResponses[altIndex].push(choice.id);
+          a.alternateResponses[altIndex].push(addedChoice.id);
+
+          if (choice.categoryCount && choice.categoryCount !== 0) {
+            a.alternateResponses[altIndex] = a.alternateResponses[altIndex].reduce(function (acc, currentValue) {
+              if (currentValue === choice.id) {
+                var foundIndex = acc.findIndex(function (c) {
+                  return c === choice.id;
+                });
+
+                if (foundIndex === -1) {
+                  acc.push(currentValue);
+                }
+              } else {
+                acc.push(currentValue);
+              }
+
+              return acc;
+            }, []);
+          }
+
           return a;
+        } else {
+          if (a.alternateResponses[altIndex] && choice.categoryCount !== 0) {
+            a.alternateResponses[altIndex] = a.alternateResponses[altIndex].filter(function (c) {
+              return c !== addedChoice.id;
+            });
+            return a;
+          }
         }
 
         return a;
@@ -101,11 +136,29 @@ var AlternateResponses = /*#__PURE__*/function (_React$Component) {
         correctResponse: correctResponse
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "deleteChoiceFromCategory", function (category, choice) {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "moveChoice", function (choiceId, from, to, choiceIndex, alternateIndex) {
       var _this$props2 = _this.props,
-          altIndex = _this$props2.altIndex,
-          correctResponse = _this$props2.model.correctResponse,
+          model = _this$props2.model,
           onModelChanged = _this$props2.onModelChanged;
+
+      var _ref = model || {},
+          choices = _ref.choices,
+          _ref$correctResponse = _ref.correctResponse,
+          correctResponse = _ref$correctResponse === void 0 ? [] : _ref$correctResponse;
+
+      var choice = (choices || []).find(function (choice) {
+        return choice.id === choiceId;
+      });
+      correctResponse = (0, _categorize.moveChoiceToAlternate)(choiceId, from, to, choiceIndex, correctResponse, alternateIndex, choice === null || choice === void 0 ? void 0 : choice.categoryCount);
+      onModelChanged({
+        correctResponse: correctResponse
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "deleteChoiceFromCategory", function (category, choice) {
+      var _this$props3 = _this.props,
+          altIndex = _this$props3.altIndex,
+          correctResponse = _this$props3.model.correctResponse,
+          onModelChanged = _this$props3.onModelChanged;
       correctResponse.forEach(function (a) {
         if (a.category === category.id) {
           if (a.alternateResponses[altIndex]) {
@@ -129,31 +182,76 @@ var AlternateResponses = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this2 = this;
 
-      var _this$props3 = this.props,
-          model = _this$props3.model,
-          classes = _this$props3.classes,
-          className = _this$props3.className,
-          categories = _this$props3.categories,
-          imageSupport = _this$props3.imageSupport;
-      var categoriesPerRow = model.categoriesPerRow;
+      var _this$props4 = this.props,
+          altIndex = _this$props4.altIndex,
+          model = _this$props4.model,
+          configuration = _this$props4.configuration,
+          classes = _this$props4.classes,
+          className = _this$props4.className,
+          categories = _this$props4.categories,
+          imageSupport = _this$props4.imageSupport,
+          spellCheck = _this$props4.spellCheck,
+          uploadSoundSupport = _this$props4.uploadSoundSupport,
+          toolbarOpts = _this$props4.toolbarOpts,
+          defaultImageMaxHeight = _this$props4.defaultImageMaxHeight,
+          defaultImageMaxWidth = _this$props4.defaultImageMaxWidth;
+      var categoriesPerRow = model.categoriesPerRow,
+          errors = model.errors,
+          rowLabels = model.rowLabels;
+
+      var _ref2 = errors || {},
+          duplicateAlternate = _ref2.duplicateAlternate;
+
+      var _ref3 = configuration || {},
+          _ref3$maxImageWidth = _ref3.maxImageWidth,
+          maxImageWidth = _ref3$maxImageWidth === void 0 ? {} : _ref3$maxImageWidth,
+          _ref3$maxImageHeight = _ref3.maxImageHeight,
+          maxImageHeight = _ref3$maxImageHeight === void 0 ? {} : _ref3$maxImageHeight;
+
       var holderStyle = {
         gridTemplateColumns: "repeat(".concat(categoriesPerRow, ", 1fr)")
       };
+      var isDuplicated = duplicateAlternate ? duplicateAlternate.index === altIndex : false;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: (0, _classnames["default"])(classes.categories, className)
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.categoriesHolder,
         style: holderStyle
       }, categories.map(function (category, index) {
-        return /*#__PURE__*/_react["default"].createElement(_category["default"], {
+        var hasRowLabel = index % categoriesPerRow === 0;
+        var rowIndex = index / categoriesPerRow;
+        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+          key: index
+        }, hasRowLabel && /*#__PURE__*/_react["default"].createElement(_RowLabel.RowLabel, {
+          categoriesPerRow: categoriesPerRow,
+          disabled: true,
+          rowIndex: rowIndex,
+          markup: rowLabels[rowIndex] || '',
+          onChange: function onChange(val) {
+            return _this2.changeRowLabel(val, rowIndex);
+          },
+          imageSupport: imageSupport,
+          toolbarOpts: toolbarOpts,
+          spellCheck: spellCheck,
+          maxImageWidth: maxImageWidth && maxImageWidth.rowLabel || defaultImageMaxWidth,
+          maxImageHeight: maxImageHeight && maxImageHeight.rowLabel || defaultImageMaxHeight,
+          uploadSoundSupport: uploadSoundSupport
+        }), /*#__PURE__*/_react["default"].createElement(_category["default"], {
           key: index,
+          alternateResponseIndex: altIndex,
           imageSupport: imageSupport,
+          isDuplicated: isDuplicated && duplicateAlternate.category === category.id,
           category: category,
+          spellCheck: spellCheck,
           onAddChoice: _this2.addChoiceToCategory,
           onDeleteChoice: function onDeleteChoice(choice, choiceIndex) {
             return _this2.deleteChoiceFromCategory(category, choice, choiceIndex);
-          }
-        });
+          },
+          onMoveChoice: function onMoveChoice(choiceId, from, to, choiceIndex, alternateIndex) {
+            return _this2.moveChoice(choiceId, from, to, choiceIndex, alternateIndex);
+          },
+          uploadSoundSupport: uploadSoundSupport
+        }));
       })));
     }
   }]);
@@ -163,6 +261,7 @@ var AlternateResponses = /*#__PURE__*/function (_React$Component) {
 exports.AlternateResponses = AlternateResponses;
 (0, _defineProperty2["default"])(AlternateResponses, "propTypes", {
   altIndex: _propTypes["default"].number.isRequired,
+  configuration: _propTypes["default"].object,
   imageSupport: _propTypes["default"].shape({
     add: _propTypes["default"].func.isRequired,
     "delete": _propTypes["default"].func.isRequired
@@ -171,7 +270,12 @@ exports.AlternateResponses = AlternateResponses;
   className: _propTypes["default"].string,
   categories: _propTypes["default"].array,
   onModelChanged: _propTypes["default"].func,
-  model: _propTypes["default"].object.isRequired
+  model: _propTypes["default"].object.isRequired,
+  uploadSoundSupport: _propTypes["default"].shape({
+    add: _propTypes["default"].func.isRequired,
+    "delete": _propTypes["default"].func.isRequired
+  }),
+  toolbarOpts: _propTypes["default"].object
 });
 
 var _default = (0, _styles.withStyles)(styles)(AlternateResponses);

package/configure/lib/design/categories/alternateResponses.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/design/categories/alternateResponses.jsx"],"names":["styles","theme","categories","marginBottom","spacing","unit","categoriesHolder","display","gridRowGap","gridColumnGap","row","gridTemplateColumns","alignItems","width","marginTop","rowLabel","gridColumn","rowLabelHolder","AlternateResponses","choice","categoryId","props","altIndex","correctResponse","model","onModelChanged","forEach","a","category","alternateResponses","push","id","filter","altId","classes","className","imageSupport","categoriesPerRow","holderStyle","map","index","addChoiceToCategory","choiceIndex","deleteChoiceFromCategory","React","Component","PropTypes","number","isRequired","shape","add","func","object","string","array"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport Category from './category';\n\nconst styles = theme => ({\n  categories: {\n    marginBottom: theme.spacing.unit\n  },\n  categoriesHolder: {\n    display: 'grid',\n    gridRowGap: `${theme.spacing.unit}px`,\n    gridColumnGap: `${theme.spacing.unit}px`\n  },\n  row: {\n    display: 'grid',\n    gridTemplateColumns: 'repeat(2, 1fr)',\n    gridColumnGap: `${theme.spacing.unit}px`,\n    alignItems: 'baseline',\n    width: '100%',\n    marginTop: theme.spacing.unit,\n    marginBottom: 2 * theme.spacing.unit\n  },\n  rowLabel: {\n    gridColumn: '1/3'\n  },\n  rowLabelHolder: {\n    width: '100%'\n  }\n});\n\nexport class AlternateResponses extends React.Component {\n  static propTypes = {\n    altIndex: PropTypes.number.isRequired,\n    imageSupport: PropTypes.shape({\n      add: PropTypes.func.isRequired,\n      delete: PropTypes.func.isRequired\n    }),\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    categories: PropTypes.array,\n    onModelChanged: PropTypes.func,\n    model: PropTypes.object.isRequired\n  };\n\n  addChoiceToCategory = (choice, categoryId) => {\n    const { altIndex, model: { correctResponse }, onModelChanged } = this.props;\n\n    correctResponse.forEach(a => {\n      if (a.category === categoryId) {\n        a.alternateResponses = a.alternateResponses || [];\n\n        if (!a.alternateResponses[altIndex]) {\n          a.alternateResponses[altIndex] = [];\n        }\n\n        a.alternateResponses[altIndex].push(choice.id);\n\n        return a;\n      }\n\n      return a;\n    });\n\n    onModelChanged({ correctResponse });\n  };\n\n  deleteChoiceFromCategory = (category, choice) => {\n    const { altIndex, model: { correctResponse }, onModelChanged } = this.props;\n\n    correctResponse.forEach(a => {\n      if (a.category === category.id) {\n        if (a.alternateResponses[altIndex]) {\n          a.alternateResponses[altIndex] = a.alternateResponses[altIndex].filter(altId => altId !== choice.id);\n        }\n      }\n\n      return a;\n    });\n\n    onModelChanged({ correctResponse });\n  };\n\n  render() {\n    const {\n      model,\n      classes,\n      className,\n      categories,\n      imageSupport\n    } = this.props;\n    const { categoriesPerRow } = model;\n\n    const holderStyle = {\n      gridTemplateColumns: `repeat(${categoriesPerRow}, 1fr)`\n    };\n\n    return (\n      <div className={classNames(classes.categories, className)}>\n        <div className={classes.categoriesHolder} style={holderStyle}>\n          {categories.map((category, index) => (\n            <Category\n              key={index}\n              imageSupport={imageSupport}\n              category={category}\n              onAddChoice={this.addChoiceToCategory}\n              onDeleteChoice={(choice, choiceIndex) =>\n                this.deleteChoiceFromCategory(category, choice, choiceIndex)\n              }\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default withStyles(styles)(AlternateResponses);\n"],"file":"alternateResponses.js"}
+{"version":3,"sources":["../../../src/design/categories/alternateResponses.jsx"],"names":["styles","theme","categories","marginBottom","spacing","unit","categoriesHolder","display","gridRowGap","gridColumnGap","row","gridTemplateColumns","alignItems","width","marginTop","rowLabel","gridColumn","rowLabelHolder","AlternateResponses","addedChoice","categoryId","props","altIndex","model","correctResponse","choices","onModelChanged","choice","find","c","id","forEach","a","category","alternateResponses","push","categoryCount","reduce","acc","currentValue","foundIndex","findIndex","filter","choiceId","from","to","choiceIndex","alternateIndex","altId","configuration","classes","className","imageSupport","spellCheck","uploadSoundSupport","toolbarOpts","defaultImageMaxHeight","defaultImageMaxWidth","categoriesPerRow","errors","rowLabels","duplicateAlternate","maxImageWidth","maxImageHeight","holderStyle","isDuplicated","index","map","hasRowLabel","rowIndex","val","changeRowLabel","addChoiceToCategory","deleteChoiceFromCategory","moveChoice","React","Component","PropTypes","number","isRequired","object","shape","add","func","string","array"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport Category from './category';\nimport { moveChoiceToAlternate } from '@pie-lib/categorize';\nimport {RowLabel} from './RowLabel';\n\nconst styles = (theme) => ({\n  categories: {\n    marginBottom: theme.spacing.unit,\n  },\n  categoriesHolder: {\n    display: 'grid',\n    gridRowGap: `${theme.spacing.unit}px`,\n    gridColumnGap: `${theme.spacing.unit}px`,\n  },\n  row: {\n    display: 'grid',\n    gridTemplateColumns: 'repeat(2, 1fr)',\n    gridColumnGap: `${theme.spacing.unit}px`,\n    alignItems: 'baseline',\n    width: '100%',\n    marginTop: theme.spacing.unit,\n    marginBottom: 2 * theme.spacing.unit,\n  },\n  rowLabel: {\n    gridColumn: '1/3',\n  },\n  rowLabelHolder: {\n    width: '100%',\n  },\n});\n\nexport class AlternateResponses extends React.Component {\n  static propTypes = {\n    altIndex: PropTypes.number.isRequired,\n    configuration: PropTypes.object,\n    imageSupport: PropTypes.shape({\n      add: PropTypes.func.isRequired,\n      delete: PropTypes.func.isRequired,\n    }),\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    categories: PropTypes.array,\n    onModelChanged: PropTypes.func,\n    model: PropTypes.object.isRequired,\n    uploadSoundSupport: PropTypes.shape({\n      add: PropTypes.func.isRequired,\n      delete: PropTypes.func.isRequired,\n    }),\n    toolbarOpts: PropTypes.object,\n  };\n\n  addChoiceToCategory = (addedChoice, categoryId) => {\n    const {\n      altIndex,\n      model: { correctResponse, choices },\n      onModelChanged,\n    } = this.props;\n\n    const choice = choices.find((c) => c.id === addedChoice.id);\n\n    correctResponse.forEach((a) => {\n      if (a.category === categoryId) {\n        a.alternateResponses = a.alternateResponses || [];\n\n        if (!a.alternateResponses[altIndex]) {\n          a.alternateResponses[altIndex] = [];\n        }\n\n        a.alternateResponses[altIndex].push(addedChoice.id);\n        if (choice.categoryCount && choice.categoryCount !== 0) {\n          a.alternateResponses[altIndex] = a.alternateResponses[altIndex].reduce((acc, currentValue) => {\n            if (currentValue === choice.id) {\n              const foundIndex = acc.findIndex((c) => c === choice.id);\n              if (foundIndex === -1) {\n                acc.push(currentValue);\n              }\n            } else {\n              acc.push(currentValue);\n            }\n\n            return acc;\n          }, []);\n        }\n\n        return a;\n      } else {\n        if (a.alternateResponses[altIndex] && choice.categoryCount !== 0) {\n          a.alternateResponses[altIndex] = a.alternateResponses[altIndex].filter((c) => c !== addedChoice.id);\n          return a;\n        }\n      }\n\n      return a;\n    });\n\n    onModelChanged({ correctResponse });\n  };\n\n  moveChoice = (choiceId, from, to, choiceIndex, alternateIndex) => {\n    const { model, onModelChanged } = this.props;\n    let { choices, correctResponse = [] } = model || {};\n    const choice = (choices || []).find((choice) => choice.id === choiceId);\n    correctResponse = moveChoiceToAlternate(\n      choiceId,\n      from,\n      to,\n      choiceIndex,\n      correctResponse,\n      alternateIndex,\n      choice?.categoryCount,\n    );\n\n    onModelChanged({ correctResponse });\n  };\n\n  deleteChoiceFromCategory = (category, choice) => {\n    const {\n      altIndex,\n      model: { correctResponse },\n      onModelChanged,\n    } = this.props;\n\n    correctResponse.forEach((a) => {\n      if (a.category === category.id) {\n        if (a.alternateResponses[altIndex]) {\n          a.alternateResponses[altIndex] = a.alternateResponses[altIndex].filter((altId) => altId !== choice.id);\n        }\n      }\n\n      return a;\n    });\n\n    onModelChanged({ correctResponse });\n  };\n\n  render() {\n    const { altIndex, model, configuration, classes, className, categories, imageSupport, spellCheck, uploadSoundSupport, toolbarOpts, defaultImageMaxHeight, defaultImageMaxWidth } =\n      this.props;\n    const { categoriesPerRow, errors, rowLabels } = model;\n    const { duplicateAlternate } = errors || {};\n    const {  maxImageWidth = {}, maxImageHeight = {} } = configuration || {};\n\n    const holderStyle = {\n      gridTemplateColumns: `repeat(${categoriesPerRow}, 1fr)`,\n    };\n    const isDuplicated = duplicateAlternate ? duplicateAlternate.index === altIndex : false;\n\n    return (\n      <div className={classNames(classes.categories, className)}>\n        <div className={classes.categoriesHolder} style={holderStyle}>\n          {categories.map((category, index) => {\n            const hasRowLabel = index % categoriesPerRow === 0;\n            const rowIndex = index / categoriesPerRow;\n            return (\n                <React.Fragment key={index}>\n                  {hasRowLabel && (\n                      <RowLabel\n                          categoriesPerRow={categoriesPerRow}\n                          disabled={true}\n                          rowIndex={rowIndex}\n                          markup={rowLabels[rowIndex] || ''}\n                          onChange={(val) => this.changeRowLabel(val, rowIndex)}\n                          imageSupport={imageSupport}\n                          toolbarOpts={toolbarOpts}\n                          spellCheck={spellCheck}\n                          maxImageWidth={(maxImageWidth && maxImageWidth.rowLabel) || defaultImageMaxWidth}\n                          maxImageHeight={(maxImageHeight && maxImageHeight.rowLabel) || defaultImageMaxHeight}\n                          uploadSoundSupport={uploadSoundSupport}\n                      />\n                  )}\n                  <Category\n                    key={index}\n                    alternateResponseIndex={altIndex}\n                    imageSupport={imageSupport}\n                    isDuplicated={isDuplicated && duplicateAlternate.category === category.id}\n                    category={category}\n                    spellCheck={spellCheck}\n                    onAddChoice={this.addChoiceToCategory}\n                    onDeleteChoice={(choice, choiceIndex) => this.deleteChoiceFromCategory(category, choice, choiceIndex)}\n                    onMoveChoice={(choiceId, from, to, choiceIndex, alternateIndex) =>\n                      this.moveChoice(choiceId, from, to, choiceIndex, alternateIndex)\n                    }\n                    uploadSoundSupport={uploadSoundSupport}\n                  />\n                </React.Fragment>\n            )\n          })}\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default withStyles(styles)(AlternateResponses);\n"],"file":"alternateResponses.js"}

package/configure/lib/design/categories/category.js

@@ -72,28 +72,53 @@ var Category = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this$props2 = this.props,
+          alternateResponseIndex = _this$props2.alternateResponseIndex,
           category = _this$props2.category,
           classes = _this$props2.classes,
           className = _this$props2.className,
+          deleteFocusedEl = _this$props2.deleteFocusedEl,
+          focusedEl = _this$props2.focusedEl,
+          index = _this$props2.index,
+          error = _this$props2.error,
+          isDuplicated = _this$props2.isDuplicated,
           onChange = _this$props2.onChange,
           onDelete = _this$props2.onDelete,
           onDeleteChoice = _this$props2.onDeleteChoice,
           onAddChoice = _this$props2.onAddChoice,
+          onMoveChoice = _this$props2.onMoveChoice,
           imageSupport = _this$props2.imageSupport,
-          toolbarOpts = _this$props2.toolbarOpts;
+          spellCheck = _this$props2.spellCheck,
+          toolbarOpts = _this$props2.toolbarOpts,
+          maxImageWidth = _this$props2.maxImageWidth,
+          maxImageHeight = _this$props2.maxImageHeight,
+          uploadSoundSupport = _this$props2.uploadSoundSupport;
       return /*#__PURE__*/_react["default"].createElement(_Card["default"], {
-        className: (0, _classnames["default"])(classes.category, className)
-      }, onChange && /*#__PURE__*/_react["default"].createElement(_inputHeader["default"], {
+        className: (0, _classnames["default"])(classes.category, className, (0, _defineProperty2["default"])({}, classes.duplicateError, isDuplicated))
+      }, /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_inputHeader["default"], {
         label: category.label,
+        focusedEl: focusedEl,
+        deleteFocusedEl: deleteFocusedEl,
+        index: index,
+        disabled: !!alternateResponseIndex || alternateResponseIndex === 0,
+        error: error,
         onChange: this.changeLabel,
         onDelete: onDelete,
         imageSupport: imageSupport,
-        toolbarOpts: toolbarOpts
-      }), /*#__PURE__*/_react["default"].createElement(_droppablePlaceholder["default"], {
+        toolbarOpts: toolbarOpts,
+        spellCheck: spellCheck,
+        maxImageWidth: maxImageWidth,
+        maxImageHeight: maxImageHeight,
+        uploadSoundSupport: uploadSoundSupport
+      }), error && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, error)), /*#__PURE__*/_react["default"].createElement(_droppablePlaceholder["default"], {
         className: classes.placeHolder,
+        alternateResponseIndex: alternateResponseIndex,
+        category: category,
         choices: category.choices,
         onDeleteChoice: onDeleteChoice,
         onDropChoice: onAddChoice,
+        onMoveChoice: onMoveChoice,
         categoryId: category.id
       }), onDelete && /*#__PURE__*/_react["default"].createElement(_CardActions["default"], {
         className: classes.actions
@@ -108,18 +133,29 @@ var Category = /*#__PURE__*/function (_React$Component) {
 
 exports.Category = Category;
 (0, _defineProperty2["default"])(Category, "propTypes", {
+  alternateResponseIndex: _propTypes["default"].number,
   classes: _propTypes["default"].object.isRequired,
   className: _propTypes["default"].string,
   category: _propTypes["default"].object.isRequired,
+  deleteFocusedEl: _propTypes["default"].func,
+  focusedEl: _propTypes["default"].number,
+  index: _propTypes["default"].number,
+  error: _propTypes["default"].string,
+  isDuplicated: _propTypes["default"].bool,
   onChange: _propTypes["default"].func,
   onDelete: _propTypes["default"].func,
   onDeleteChoice: _propTypes["default"].func,
   onAddChoice: _propTypes["default"].func,
+  onMoveChoice: _propTypes["default"].func,
   imageSupport: _propTypes["default"].shape({
     add: _propTypes["default"].func.isRequired,
     "delete": _propTypes["default"].func.isRequired
   }),
-  toolbarOpts: _propTypes["default"].object
+  toolbarOpts: _propTypes["default"].object,
+  uploadSoundSupport: _propTypes["default"].shape({
+    add: _propTypes["default"].func.isRequired,
+    "delete": _propTypes["default"].func.isRequired
+  })
 });
 (0, _defineProperty2["default"])(Category, "defaultProps", {});
 
@@ -148,6 +184,14 @@ var styles = function styles(theme) {
       padding: theme.spacing.unit,
       overflow: 'visible'
     },
+    duplicateError: {
+      border: '1px solid red'
+    },
+    errorText: {
+      fontSize: '11px',
+      color: 'red',
+      paddingBottom: '5px'
+    },
     editor: {
       flex: '1',
       paddingBottom: theme.spacing.unit * 2

package/configure/lib/design/categories/category.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/design/categories/category.jsx"],"names":["Category","l","props","category","onChange","label","classes","className","onDelete","onDeleteChoice","onAddChoice","imageSupport","toolbarOpts","changeLabel","placeHolder","choices","id","actions","React","Component","PropTypes","object","isRequired","string","func","shape","add","styles","theme","minHeight","deleteButton","margin","padding","paddingBottom","paddingTop","spacing","unit","iconButtonRoot","width","height","header","display","justifyContent","overflow","editor","flex"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport Card from '@material-ui/core/Card';\nimport InputHeader from '../input-header';\nimport CardActions from '@material-ui/core/CardActions';\nimport { DeleteButton } from '../buttons';\n\nimport PlaceHolder from './droppable-placeholder';\n\nexport class Category extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    category: PropTypes.object.isRequired,\n    onChange: PropTypes.func,\n    onDelete: PropTypes.func,\n    onDeleteChoice: PropTypes.func,\n    onAddChoice: PropTypes.func,\n    imageSupport: PropTypes.shape({\n      add: PropTypes.func.isRequired,\n      delete: PropTypes.func.isRequired\n    }),\n    toolbarOpts: PropTypes.object\n  };\n\n  static defaultProps = {};\n\n  changeLabel = l => {\n    const { category, onChange } = this.props;\n    category.label = l;\n    onChange(category);\n  };\n\n  render() {\n    const {\n      category,\n      classes,\n      className,\n      onChange,\n      onDelete,\n      onDeleteChoice,\n      onAddChoice,\n      imageSupport,\n      toolbarOpts\n    } = this.props;\n    return (\n      <Card className={classNames(classes.category, className)}>\n        {\n          onChange && (\n            <InputHeader\n              label={category.label}\n              onChange={this.changeLabel}\n              onDelete={onDelete}\n              imageSupport={imageSupport}\n              toolbarOpts={toolbarOpts}\n            />\n          )\n        }\n        <PlaceHolder\n          className={classes.placeHolder}\n          choices={category.choices}\n          onDeleteChoice={onDeleteChoice}\n          onDropChoice={onAddChoice}\n          categoryId={category.id}\n        />\n        {\n          onDelete && (\n            <CardActions className={classes.actions}>\n              <DeleteButton label={'delete'} onClick={onDelete} />\n            </CardActions>\n          )\n        }\n      </Card>\n    );\n  }\n}\nconst styles = theme => ({\n  placeHolder: {\n    minHeight: '100px'\n  },\n  deleteButton: {\n    margin: 0\n  },\n  actions: {\n    padding: 0,\n    paddingBottom: 0,\n    paddingTop: theme.spacing.unit\n  },\n  iconButtonRoot: {\n    width: 'auto',\n    height: 'auto'\n  },\n  header: {\n    display: 'flex',\n    justifyContent: 'space-between'\n  },\n  category: {\n    padding: theme.spacing.unit,\n    overflow: 'visible'\n  },\n  editor: {\n    flex: '1',\n    paddingBottom: theme.spacing.unit * 2\n  }\n});\nexport default withStyles(styles)(Category);\n"],"file":"category.js"}
+{"version":3,"sources":["../../../src/design/categories/category.jsx"],"names":["Category","l","props","category","onChange","label","alternateResponseIndex","classes","className","deleteFocusedEl","focusedEl","index","error","isDuplicated","onDelete","onDeleteChoice","onAddChoice","onMoveChoice","imageSupport","spellCheck","toolbarOpts","maxImageWidth","maxImageHeight","uploadSoundSupport","duplicateError","changeLabel","errorText","placeHolder","choices","id","actions","React","Component","PropTypes","number","object","isRequired","string","func","bool","shape","add","styles","theme","minHeight","deleteButton","margin","padding","paddingBottom","paddingTop","spacing","unit","iconButtonRoot","width","height","header","display","justifyContent","overflow","border","fontSize","color","editor","flex"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport Card from '@material-ui/core/Card';\nimport InputHeader from '../input-header';\nimport CardActions from '@material-ui/core/CardActions';\nimport { DeleteButton } from '../buttons';\n\nimport PlaceHolder from './droppable-placeholder';\n\nexport class Category extends React.Component {\n  static propTypes = {\n    alternateResponseIndex: PropTypes.number,\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    category: PropTypes.object.isRequired,\n    deleteFocusedEl: PropTypes.func,\n    focusedEl: PropTypes.number,\n    index: PropTypes.number,\n    error: PropTypes.string,\n    isDuplicated: PropTypes.bool,\n    onChange: PropTypes.func,\n    onDelete: PropTypes.func,\n    onDeleteChoice: PropTypes.func,\n    onAddChoice: PropTypes.func,\n    onMoveChoice: PropTypes.func,\n    imageSupport: PropTypes.shape({\n      add: PropTypes.func.isRequired,\n      delete: PropTypes.func.isRequired,\n    }),\n    toolbarOpts: PropTypes.object,\n    uploadSoundSupport: PropTypes.shape({\n      add: PropTypes.func.isRequired,\n      delete: PropTypes.func.isRequired,\n    }),\n  };\n\n  static defaultProps = {};\n\n  changeLabel = (l) => {\n    const { category, onChange } = this.props;\n    category.label = l;\n    onChange(category);\n  };\n\n  render() {\n    const {\n      alternateResponseIndex,\n      category,\n      classes,\n      className,\n      deleteFocusedEl,\n      focusedEl,\n      index,\n      error,\n      isDuplicated,\n      onChange,\n      onDelete,\n      onDeleteChoice,\n      onAddChoice,\n      onMoveChoice,\n      imageSupport,\n      spellCheck,\n      toolbarOpts,\n      maxImageWidth,\n      maxImageHeight,\n      uploadSoundSupport,\n    } = this.props;\n    return (\n      <Card className={classNames(classes.category, className, {\n        [classes.duplicateError]: isDuplicated\n      })}>\n            <span>\n              <InputHeader\n                label={category.label}\n                focusedEl={focusedEl}\n                deleteFocusedEl={deleteFocusedEl}\n                index={index}\n                disabled={!!alternateResponseIndex || alternateResponseIndex===0}\n                error={error}\n                onChange={this.changeLabel}\n                onDelete={onDelete}\n                imageSupport={imageSupport}\n                toolbarOpts={toolbarOpts}\n                spellCheck={spellCheck}\n                maxImageWidth={maxImageWidth}\n                maxImageHeight={maxImageHeight}\n                uploadSoundSupport={uploadSoundSupport}\n             />\n              {error && <div className={classes.errorText}>{error}</div>}\n              </span>\n        <PlaceHolder\n          className={classes.placeHolder}\n          alternateResponseIndex={alternateResponseIndex}\n          category={category}\n          choices={category.choices}\n          onDeleteChoice={onDeleteChoice}\n          onDropChoice={onAddChoice}\n          onMoveChoice={onMoveChoice}\n          categoryId={category.id}\n        />\n        {onDelete && (\n          <CardActions className={classes.actions}>\n            <DeleteButton label={'delete'} onClick={onDelete} />\n          </CardActions>\n        )}\n      </Card>\n    );\n  }\n}\nconst styles = (theme) => ({\n  placeHolder: {\n    minHeight: '100px',\n  },\n  deleteButton: {\n    margin: 0,\n  },\n  actions: {\n    padding: 0,\n    paddingBottom: 0,\n    paddingTop: theme.spacing.unit,\n  },\n  iconButtonRoot: {\n    width: 'auto',\n    height: 'auto',\n  },\n  header: {\n    display: 'flex',\n    justifyContent: 'space-between',\n  },\n  category: {\n    padding: theme.spacing.unit,\n    overflow: 'visible',\n  },\n  duplicateError: {\n    border: '1px solid red',\n  },\n  errorText: {\n    fontSize: '11px',\n    color: 'red',\n    paddingBottom: '5px'\n  },\n  editor: {\n    flex: '1',\n    paddingBottom: theme.spacing.unit * 2,\n  },\n});\nexport default withStyles(styles)(Category);\n"],"file":"category.js"}

package/configure/lib/design/categories/choice-preview.js

@@ -33,7 +33,7 @@ var _drag = require("@pie-lib/drag");
 
 var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
 
-var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));
+var _RemoveCircleOutline = _interopRequireDefault(require("@material-ui/icons/RemoveCircleOutline"));
 
 var _renderUi = require("@pie-lib/render-ui");
 
@@ -68,20 +68,33 @@ var ChoicePreview = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2["default"])(ChoicePreview, [{
     key: "render",
     value: function render() {
+      var _this2 = this;
+
       var _this$props2 = this.props,
+          alternateResponseIndex = _this$props2.alternateResponseIndex,
+          category = _this$props2.category,
           classes = _this$props2.classes,
           className = _this$props2.className,
-          choice = _this$props2.choice;
+          choice = _this$props2.choice,
+          choiceIndex = _this$props2.choiceIndex;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: (0, _classnames["default"])(classes.choicePreview, className)
-      }, choice ? /*#__PURE__*/_react["default"].createElement(_drag.Choice, null, /*#__PURE__*/_react["default"].createElement(_renderUi.HtmlAndMath, {
+      }, choice ? /*#__PURE__*/_react["default"].createElement(_drag.Choice, {
+        alternateResponseIndex: alternateResponseIndex,
+        category: category,
+        choice: choice,
+        choiceIndex: choiceIndex,
+        onRemoveChoice: function onRemoveChoice() {
+          return _this2["delete"]();
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_renderUi.HtmlAndMath, {
         html: choice === null || choice === void 0 ? void 0 : choice.content
       }), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
         color: "secondary",
         "aria-label": "delete",
         className: classes["delete"],
         onClick: this["delete"]
-      }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null))) : null);
+      }, /*#__PURE__*/_react["default"].createElement(_RemoveCircleOutline["default"], null))) : null);
     }
   }]);
   return ChoicePreview;

package/configure/lib/design/categories/choice-preview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/design/categories/choice-preview.jsx"],"names":["ChoicePreview","props","onDelete","choice","classes","className","choicePreview","content","React","Component","PropTypes","object","isRequired","string","func","styles","position","right","top"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;IAEaA,a;;;;;;;;;;;;;;;+FASF,YAAM;AACb,wBAA6B,MAAKC,KAAlC;AAAA,UAAQC,QAAR,eAAQA,QAAR;AAAA,UAAkBC,MAAlB,eAAkBA,MAAlB;AACAD,MAAAA,QAAQ,CAACC,MAAD,CAAR;AACD,K;;;;;;WAED,kBAAS;AACP,yBAAuC,KAAKF,KAA5C;AAAA,UAAQG,OAAR,gBAAQA,OAAR;AAAA,UAAiBC,SAAjB,gBAAiBA,SAAjB;AAAA,UAA4BF,MAA5B,gBAA4BA,MAA5B;AACA,0BACE;AAAK,QAAA,SAAS,EAAE,4BAAWC,OAAO,CAACE,aAAnB,EAAkCD,SAAlC;AAAhB,SAEIF,MAAM,gBAAG,gCAAC,YAAD,qBACP,gCAAC,qBAAD;AAAa,QAAA,IAAI,EAAEA,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAEI;AAA3B,QADO,eAEP,gCAAC,sBAAD;AACE,QAAA,KAAK,EAAC,WADR;AAEE,sBAAW,QAFb;AAGE,QAAA,SAAS,EAAEH,OAAO,UAHpB;AAIE,QAAA,OAAO,EAAE;AAJX,sBAME,gCAAC,kBAAD,OANF,CAFO,CAAH,GAWF,IAbR,CADF;AAkBD;;;EAlCgCI,kBAAMC,S;;;iCAA5BT,a,eACQ;AACjBI,EAAAA,OAAO,EAAEM,sBAAUC,MAAV,CAAiBC,UADT;AAEjBP,EAAAA,SAAS,EAAEK,sBAAUG,MAFJ;AAGjBV,EAAAA,MAAM,EAAEO,sBAAUC,MAAV,CAAiBC,UAHR;AAIjBV,EAAAA,QAAQ,EAAEQ,sBAAUI,IAAV,CAAeF;AAJR,C;iCADRZ,a,kBAOW,E;;AA6BxB,IAAMe,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBT,IAAAA,aAAa,EAAE;AACbU,MAAAA,QAAQ,EAAE;AADG,KADK;AAIpB,cAAQ;AACNA,MAAAA,QAAQ,EAAE,UADJ;AAENC,MAAAA,KAAK,EAAE,CAFD;AAGNC,MAAAA,GAAG,EAAE;AAHC;AAJY,GAAP;AAAA,CAAf;;eAUe,wBAAWH,MAAX,EAAmBf,aAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport { Choice } from '@pie-lib/drag';\nimport IconButton from '@material-ui/core/IconButton';\nimport Delete from '@material-ui/icons/Delete';\nimport { HtmlAndMath } from '@pie-lib/render-ui';\n\nexport class ChoicePreview extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    choice: PropTypes.object.isRequired,\n    onDelete: PropTypes.func.isRequired\n  };\n  static defaultProps = {};\n\n  delete = () => {\n    const { onDelete, choice } = this.props;\n    onDelete(choice);\n  };\n\n  render() {\n    const { classes, className, choice } = this.props;\n    return (\n      <div className={classNames(classes.choicePreview, className)}>\n        {\n          choice ? <Choice>\n            <HtmlAndMath html={choice?.content} />\n            <IconButton\n              color=\"secondary\"\n              aria-label=\"delete\"\n              className={classes.delete}\n              onClick={this.delete}\n            >\n              <Delete />\n            </IconButton>\n          </Choice>\n            : null\n        }\n      </div>\n    );\n  }\n}\nconst styles = () => ({\n  choicePreview: {\n    position: 'relative'\n  },\n  delete: {\n    position: 'absolute',\n    right: 0,\n    top: 0\n  }\n});\nexport default withStyles(styles)(ChoicePreview);\n"],"file":"choice-preview.js"}
+{"version":3,"sources":["../../../src/design/categories/choice-preview.jsx"],"names":["ChoicePreview","props","onDelete","choice","alternateResponseIndex","category","classes","className","choiceIndex","choicePreview","content","React","Component","PropTypes","object","isRequired","string","func","styles","position","right","top"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;IAEaA,a;;;;;;;;;;;;;;;+FASF,YAAM;AACb,wBAA6B,MAAKC,KAAlC;AAAA,UAAQC,QAAR,eAAQA,QAAR;AAAA,UAAkBC,MAAlB,eAAkBA,MAAlB;AACAD,MAAAA,QAAQ,CAACC,MAAD,CAAR;AACD,K;;;;;;WAED,kBAAS;AAAA;;AACP,yBAAsF,KAAKF,KAA3F;AAAA,UAAQG,sBAAR,gBAAQA,sBAAR;AAAA,UAAgCC,QAAhC,gBAAgCA,QAAhC;AAAA,UAA0CC,OAA1C,gBAA0CA,OAA1C;AAAA,UAAmDC,SAAnD,gBAAmDA,SAAnD;AAAA,UAA8DJ,MAA9D,gBAA8DA,MAA9D;AAAA,UAAsEK,WAAtE,gBAAsEA,WAAtE;AACA,0BACE;AAAK,QAAA,SAAS,EAAE,4BAAWF,OAAO,CAACG,aAAnB,EAAkCF,SAAlC;AAAhB,SACGJ,MAAM,gBACL,gCAAC,YAAD;AAAQ,QAAA,sBAAsB,EAAEC,sBAAhC;AAAwD,QAAA,QAAQ,EAAEC,QAAlE;AAA4E,QAAA,MAAM,EAAEF,MAApF;AAA4F,QAAA,WAAW,EAAEK,WAAzG;AAAsH,QAAA,cAAc,EAAE;AAAA,iBAAM,MAAI,UAAJ,EAAN;AAAA;AAAtI,sBACE,gCAAC,qBAAD;AAAa,QAAA,IAAI,EAAEL,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAEO;AAA3B,QADF,eAEE,gCAAC,sBAAD;AAAY,QAAA,KAAK,EAAC,WAAlB;AAA8B,sBAAW,QAAzC;AAAkD,QAAA,SAAS,EAAEJ,OAAO,UAApE;AAA6E,QAAA,OAAO,EAAE;AAAtF,sBACE,gCAAC,+BAAD,OADF,CAFF,CADK,GAOH,IARN,CADF;AAYD;;;EA5BgCK,kBAAMC,S;;;iCAA5BZ,a,eACQ;AACjBM,EAAAA,OAAO,EAAEO,sBAAUC,MAAV,CAAiBC,UADT;AAEjBR,EAAAA,SAAS,EAAEM,sBAAUG,MAFJ;AAGjBb,EAAAA,MAAM,EAAEU,sBAAUC,MAAV,CAAiBC,UAHR;AAIjBb,EAAAA,QAAQ,EAAEW,sBAAUI,IAAV,CAAeF;AAJR,C;iCADRf,a,kBAOW,E;;AAuBxB,IAAMkB,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBT,IAAAA,aAAa,EAAE;AACbU,MAAAA,QAAQ,EAAE;AADG,KADK;AAIpB,cAAQ;AACNA,MAAAA,QAAQ,EAAE,UADJ;AAENC,MAAAA,KAAK,EAAE,CAFD;AAGNC,MAAAA,GAAG,EAAE;AAHC;AAJY,GAAP;AAAA,CAAf;;eAUe,wBAAWH,MAAX,EAAmBlB,aAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport { Choice } from '@pie-lib/drag';\nimport IconButton from '@material-ui/core/IconButton';\nimport RemoveCircleOutlineIcon from '@material-ui/icons/RemoveCircleOutline';\nimport { HtmlAndMath } from '@pie-lib/render-ui';\n\nexport class ChoicePreview extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    choice: PropTypes.object.isRequired,\n    onDelete: PropTypes.func.isRequired,\n  };\n  static defaultProps = {};\n\n  delete = () => {\n    const { onDelete, choice } = this.props;\n    onDelete(choice);\n  };\n\n  render() {\n    const { alternateResponseIndex, category, classes, className, choice, choiceIndex } = this.props;\n    return (\n      <div className={classNames(classes.choicePreview, className)}>\n        {choice ? (\n          <Choice alternateResponseIndex={alternateResponseIndex} category={category} choice={choice} choiceIndex={choiceIndex} onRemoveChoice={() => this.delete()}>\n            <HtmlAndMath html={choice?.content} />\n            <IconButton color=\"secondary\" aria-label=\"delete\" className={classes.delete} onClick={this.delete}>\n              <RemoveCircleOutlineIcon />\n            </IconButton>\n          </Choice>\n        ) : null}\n      </div>\n    );\n  }\n}\nconst styles = () => ({\n  choicePreview: {\n    position: 'relative',\n  },\n  delete: {\n    position: 'absolute',\n    right: 0,\n    top: 0,\n  },\n});\nexport default withStyles(styles)(ChoicePreview);\n"],"file":"choice-preview.js"}