@pie-element/categorize 8.15.1-next.1 → 8.15.1-next.10

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

@@ -0,0 +1,408 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Categories = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _configUi = require("@pie-lib/pie-toolbox/config-ui");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
+
+var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
+
+var _categorize = require("@pie-lib/pie-toolbox/categorize");
+
+var _category = _interopRequireDefault(require("./category"));
+
+var _header = _interopRequireDefault(require("../header"));
+
+var _utils = require("../../utils");
+
+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; } }
+
+var styles = function styles(theme) {
+  return {
+    categories: {
+      marginBottom: theme.spacing.unit * 3
+    },
+    categoriesHolder: {
+      display: 'grid',
+      gridRowGap: "".concat(theme.spacing.unit, "px"),
+      gridColumnGap: "".concat(theme.spacing.unit, "px")
+    },
+    row: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(2, 1fr)',
+      gridColumnGap: "".concat(theme.spacing.unit, "px"),
+      alignItems: 'baseline',
+      width: '100%',
+      marginTop: theme.spacing.unit,
+      marginBottom: 2 * theme.spacing.unit
+    },
+    rowLabel: {
+      gridColumn: '1/3'
+    },
+    rowLabelHolder: {
+      width: '100%'
+    },
+    tooltip: {
+      fontSize: theme.typography.fontSize - 2,
+      whiteSpace: 'pre',
+      maxWidth: '500px'
+    },
+    errorText: {
+      fontSize: theme.typography.fontSize - 2,
+      color: theme.palette.error.main,
+      paddingTop: theme.spacing.unit / 2
+    }
+  };
+};
+
+var Categories = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Categories, _React$Component);
+
+  var _super = _createSuper(Categories);
+
+  function Categories() {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Categories);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      focusedEl: null
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "add", function () {
+      var _this$props = _this.props,
+          model = _this$props.model,
+          oldCategories = _this$props.categories;
+      var categoriesPerRow = model.categoriesPerRow;
+
+      var id = _configUi.choiceUtils.firstAvailableIndex(model.categories.map(function (a) {
+        return a.id;
+      }), 0);
+
+      var data = {
+        id: id,
+        label: 'Category ' + id
+      };
+      var addRowLabel = model.categories.length % categoriesPerRow === 0;
+      var rowLabels = (0, _toConsumableArray2["default"])(model.rowLabels);
+
+      if (addRowLabel) {
+        rowLabels.push('');
+      }
+
+      _this.setState({
+        focusedEl: oldCategories.length
+      }, function () {
+        _this.props.onModelChanged({
+          rowLabels: rowLabels,
+          categories: model.categories.concat([data])
+        });
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "deleteFocusedEl", function () {
+      _this.setState({
+        focusedEl: null
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "delete", function (category) {
+      var _this$props2 = _this.props,
+          model = _this$props2.model,
+          onModelChanged = _this$props2.onModelChanged;
+      var index = model.categories.findIndex(function (a) {
+        return a.id === category.id;
+      });
+
+      if (index !== -1) {
+        model.categories.splice(index, 1);
+        model.correctResponse = (0, _categorize.removeCategory)(category.id, model.correctResponse);
+        onModelChanged(model);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "change", function (c) {
+      var categories = _this.props.categories;
+      var index = categories.findIndex(function (a) {
+        return a.id === c.id;
+      });
+
+      if (index !== -1) {
+        categories.splice(index, 1, c);
+
+        _this.props.onModelChanged({
+          categories: categories
+        });
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "addChoiceToCategory", function (addedChoice, categoryId) {
+      var _this$props3 = _this.props,
+          model = _this$props3.model,
+          onModelChanged = _this$props3.onModelChanged;
+
+      var _ref = model || {},
+          _ref$choices = _ref.choices,
+          choices = _ref$choices === void 0 ? [] : _ref$choices,
+          _ref$correctResponse = _ref.correctResponse,
+          correctResponse = _ref$correctResponse === void 0 ? [] : _ref$correctResponse,
+          _ref$maxChoicesPerCat = _ref.maxChoicesPerCategory,
+          maxChoicesPerCategory = _ref$maxChoicesPerCat === void 0 ? 0 : _ref$maxChoicesPerCat;
+
+      var choice = (choices || []).find(function (choice) {
+        return choice.id === addedChoice.id;
+      });
+      correctResponse = (0, _categorize.moveChoiceToCategory)(addedChoice.id, undefined, categoryId, 0, model.correctResponse); // if multiplePlacements not allowed, ensure the consistency in the other categories
+
+      if (choice.categoryCount !== 0) {
+        correctResponse = (0, _categorize.verifyAllowMultiplePlacements)(addedChoice, categoryId, correctResponse);
+      }
+
+      var maxCategoryChoices = (0, _utils.getMaxCategoryChoices)(model); // when maxChoicesPerCategory is set to 0, there is no limit so it should not be updated
+
+      onModelChanged({
+        correctResponse: correctResponse,
+        maxChoicesPerCategory: maxChoicesPerCategory !== 0 && maxChoicesPerCategory < maxCategoryChoices ? maxChoicesPerCategory + 1 : maxChoicesPerCategory
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "deleteChoiceFromCategory", function (category, choice, choiceIndex) {
+      var _this$props4 = _this.props,
+          model = _this$props4.model,
+          onModelChanged = _this$props4.onModelChanged;
+      var correctResponse = (0, _categorize.removeChoiceFromCategory)(choice.id, category.id, choiceIndex, model.correctResponse);
+      onModelChanged({
+        correctResponse: correctResponse
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "moveChoice", function (choiceId, from, to, choiceIndex) {
+      var _this$props5 = _this.props,
+          model = _this$props5.model,
+          onModelChanged = _this$props5.onModelChanged;
+
+      var _ref2 = model || {},
+          choices = _ref2.choices,
+          _ref2$correctResponse = _ref2.correctResponse,
+          correctResponse = _ref2$correctResponse === void 0 ? [] : _ref2$correctResponse,
+          _ref2$maxChoicesPerCa = _ref2.maxChoicesPerCategory,
+          maxChoicesPerCategory = _ref2$maxChoicesPerCa === void 0 ? 0 : _ref2$maxChoicesPerCa;
+
+      var choice = (choices || []).find(function (choice) {
+        return choice.id === choiceId;
+      });
+
+      if (to === from || !choice) {
+        return;
+      }
+
+      if (choice.categoryCount !== 0) {
+        correctResponse = (0, _categorize.moveChoiceToCategory)(choice.id, from, to, choiceIndex, correctResponse);
+        correctResponse = (0, _categorize.verifyAllowMultiplePlacements)(choice, to, correctResponse);
+      } else if (choice.categoryCount === 0) {
+        correctResponse = (0, _categorize.moveChoiceToCategory)(choice.id, undefined, to, 0, correctResponse);
+      }
+
+      var maxCategoryChoices = (0, _utils.getMaxCategoryChoices)(model); // when maxChoicesPerCategory is set to 0, there is no limit so it should not be updated
+
+      onModelChanged({
+        correctResponse: correctResponse,
+        maxChoicesPerCategory: maxChoicesPerCategory !== 0 && maxChoicesPerCategory < maxCategoryChoices ? maxChoicesPerCategory + 1 : maxChoicesPerCategory
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeRowLabel", function (val, index) {
+      var model = _this.props.model;
+      var rowLabels = model.rowLabels;
+      var newRowLabels = (0, _toConsumableArray2["default"])(rowLabels);
+
+      if (newRowLabels.length < index) {
+        newRowLabels.push(val);
+      } else {
+        newRowLabels[index] = val;
+      }
+
+      _this.props.onModelChanged({
+        rowLabels: newRowLabels
+      });
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Categories, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props6 = this.props,
+          model = _this$props6.model,
+          classes = _this$props6.classes,
+          className = _this$props6.className,
+          categories = _this$props6.categories,
+          imageSupport = _this$props6.imageSupport,
+          uploadSoundSupport = _this$props6.uploadSoundSupport,
+          toolbarOpts = _this$props6.toolbarOpts,
+          spellCheck = _this$props6.spellCheck,
+          configuration = _this$props6.configuration,
+          defaultImageMaxHeight = _this$props6.defaultImageMaxHeight,
+          defaultImageMaxWidth = _this$props6.defaultImageMaxWidth,
+          _this$props6$mathMlOp = _this$props6.mathMlOptions,
+          mathMlOptions = _this$props6$mathMlOp === void 0 ? {} : _this$props6$mathMlOp;
+      var categoriesPerRow = model.categoriesPerRow,
+          rowLabels = model.rowLabels,
+          errors = model.errors;
+
+      var _ref3 = errors || {},
+          associationError = _ref3.associationError,
+          categoriesError = _ref3.categoriesError,
+          categoriesErrors = _ref3.categoriesErrors;
+
+      var _ref4 = configuration || {},
+          maxCategories = _ref4.maxCategories,
+          _ref4$maxImageWidth = _ref4.maxImageWidth,
+          maxImageWidth = _ref4$maxImageWidth === void 0 ? {} : _ref4$maxImageWidth,
+          _ref4$maxImageHeight = _ref4.maxImageHeight,
+          maxImageHeight = _ref4$maxImageHeight === void 0 ? {} : _ref4$maxImageHeight;
+
+      var holderStyle = {
+        gridTemplateColumns: "repeat(".concat(categoriesPerRow, ", 1fr)")
+      };
+      var validationMessage = (0, _utils.generateValidationMessage)(configuration);
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _classnames["default"])(classes.categories, className)
+      }, /*#__PURE__*/_react["default"].createElement(_header["default"], {
+        label: "Categories",
+        buttonLabel: "ADD A CATEGORY",
+        onAdd: this.add,
+        info: /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+          classes: {
+            tooltip: classes.tooltip
+          },
+          disableFocusListener: true,
+          disableTouchListener: true,
+          placement: 'right',
+          title: validationMessage
+        }, /*#__PURE__*/_react["default"].createElement(_Info["default"], {
+          fontSize: 'small',
+          color: 'primary',
+          style: {
+            marginLeft: '5px'
+          }
+        })),
+        buttonDisabled: maxCategories && categories && maxCategories === categories.length
+      }), /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.categoriesHolder,
+        style: holderStyle
+      }, categories.map(function (category, index) {
+        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: false,
+          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,
+          mathMlOptions: mathMlOptions,
+          configuration: configuration
+        }), /*#__PURE__*/_react["default"].createElement(_category["default"], {
+          imageSupport: imageSupport,
+          focusedEl: _this2.state.focusedEl,
+          deleteFocusedEl: _this2.deleteFocusedEl,
+          index: index,
+          category: category,
+          error: categoriesErrors && categoriesErrors[category.id],
+          onChange: _this2.change,
+          onDelete: function onDelete() {
+            return _this2["delete"](category);
+          },
+          onAddChoice: _this2.addChoiceToCategory,
+          onMoveChoice: function onMoveChoice(choiceId, from, to, choiceIndex) {
+            return _this2.moveChoice(choiceId, from, to, choiceIndex);
+          },
+          toolbarOpts: toolbarOpts,
+          spellCheck: spellCheck,
+          onDeleteChoice: function onDeleteChoice(choice, choiceIndex) {
+            return _this2.deleteChoiceFromCategory(category, choice, choiceIndex);
+          },
+          maxImageWidth: maxImageWidth && maxImageWidth.categoryLabel || defaultImageMaxWidth,
+          maxImageHeight: maxImageHeight && maxImageHeight.categoryLabel || defaultImageMaxHeight,
+          uploadSoundSupport: uploadSoundSupport,
+          configuration: configuration
+        }));
+      })), associationError && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, associationError), categoriesError && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, categoriesError));
+    }
+  }]);
+  return Categories;
+}(_react["default"].Component);
+
+exports.Categories = Categories;
+(0, _defineProperty2["default"])(Categories, "propTypes", {
+  defaultImageMaxHeight: _propTypes["default"].number,
+  defaultImageMaxWidth: _propTypes["default"].number,
+  imageSupport: _propTypes["default"].shape({
+    add: _propTypes["default"].func.isRequired,
+    "delete": _propTypes["default"].func.isRequired
+  }),
+  uploadSoundSupport: _propTypes["default"].shape({
+    add: _propTypes["default"].func.isRequired,
+    "delete": _propTypes["default"].func.isRequired
+  }),
+  classes: _propTypes["default"].object.isRequired,
+  className: _propTypes["default"].string,
+  categories: _propTypes["default"].array,
+  onModelChanged: _propTypes["default"].func,
+  model: _propTypes["default"].object.isRequired,
+  configuration: _propTypes["default"].object.isRequired,
+  toolbarOpts: _propTypes["default"].object,
+  spellCheck: _propTypes["default"].bool
+});
+
+var _default = (0, _styles.withStyles)(styles)(Categories);
+
+exports["default"] = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/design/categories/index.jsx"],"names":["styles","theme","categories","marginBottom","spacing","unit","categoriesHolder","display","gridRowGap","gridColumnGap","row","gridTemplateColumns","alignItems","width","marginTop","rowLabel","gridColumn","rowLabelHolder","tooltip","fontSize","typography","whiteSpace","maxWidth","errorText","color","palette","error","main","paddingTop","Categories","focusedEl","props","model","oldCategories","categoriesPerRow","id","utils","firstAvailableIndex","map","a","data","label","addRowLabel","length","rowLabels","push","setState","onModelChanged","concat","category","index","findIndex","splice","correctResponse","c","addedChoice","categoryId","choices","maxChoicesPerCategory","choice","find","undefined","categoryCount","maxCategoryChoices","choiceIndex","choiceId","from","to","val","newRowLabels","classes","className","imageSupport","uploadSoundSupport","toolbarOpts","spellCheck","configuration","defaultImageMaxHeight","defaultImageMaxWidth","mathMlOptions","errors","associationError","categoriesError","categoriesErrors","maxCategories","maxImageWidth","maxImageHeight","holderStyle","validationMessage","add","marginLeft","hasRowLabel","rowIndex","changeRowLabel","state","deleteFocusedEl","change","addChoiceToCategory","moveChoice","deleteChoiceFromCategory","categoryLabel","React","Component","PropTypes","number","shape","func","isRequired","object","string","array","bool"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { choiceUtils as utils } from '@pie-lib/pie-toolbox/config-ui';\nimport classNames from 'classnames';\nimport Info from '@material-ui/icons/Info';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport {\n  moveChoiceToCategory,\n  removeCategory,\n  removeChoiceFromCategory,\n  verifyAllowMultiplePlacements,\n} from '@pie-lib/pie-toolbox/categorize';\n\nimport Category from './category';\nimport Header from '../header';\nimport { generateValidationMessage, getMaxCategoryChoices } from '../../utils';\nimport { RowLabel } from './RowLabel';\n\nconst styles = (theme) => ({\n  categories: {\n    marginBottom: theme.spacing.unit * 3,\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  tooltip: {\n    fontSize: theme.typography.fontSize - 2,\n    whiteSpace: 'pre',\n    maxWidth: '500px',\n  },\n  errorText: {\n    fontSize: theme.typography.fontSize - 2,\n    color: theme.palette.error.main,\n    paddingTop: theme.spacing.unit / 2,\n  },\n});\n\nexport class Categories extends React.Component {\n  static propTypes = {\n    defaultImageMaxHeight: PropTypes.number,\n    defaultImageMaxWidth: PropTypes.number,\n    imageSupport: PropTypes.shape({\n      add: PropTypes.func.isRequired,\n      delete: PropTypes.func.isRequired,\n    }),\n    uploadSoundSupport: 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    configuration: PropTypes.object.isRequired,\n    toolbarOpts: PropTypes.object,\n    spellCheck: PropTypes.bool,\n  };\n\n  state = {\n    focusedEl: null,\n  };\n\n  add = () => {\n    const { model, categories: oldCategories } = this.props;\n    const { categoriesPerRow } = model;\n    const id = utils.firstAvailableIndex(\n      model.categories.map((a) => a.id),\n      0,\n    );\n    const data = { id, label: 'Category ' + id };\n    const addRowLabel = model.categories.length % categoriesPerRow === 0;\n    const rowLabels = [...model.rowLabels];\n\n    if (addRowLabel) {\n      rowLabels.push('');\n    }\n\n    this.setState(\n      {\n        focusedEl: oldCategories.length,\n      },\n      () => {\n        this.props.onModelChanged({\n          rowLabels,\n          categories: model.categories.concat([data]),\n        });\n      },\n    );\n  };\n\n  deleteFocusedEl = () => {\n    this.setState({\n      focusedEl: null,\n    });\n  };\n\n  delete = (category) => {\n    const { model, onModelChanged } = this.props;\n    const index = model.categories.findIndex((a) => a.id === category.id);\n\n    if (index !== -1) {\n      model.categories.splice(index, 1);\n      model.correctResponse = removeCategory(category.id, model.correctResponse);\n      onModelChanged(model);\n    }\n  };\n\n  change = (c) => {\n    const { categories } = this.props;\n    const index = categories.findIndex((a) => a.id === c.id);\n\n    if (index !== -1) {\n      categories.splice(index, 1, c);\n      this.props.onModelChanged({ categories });\n    }\n  };\n\n  addChoiceToCategory = (addedChoice, categoryId) => {\n    const { model, onModelChanged } = this.props;\n    let { choices = [], correctResponse = [], maxChoicesPerCategory = 0 } = model || {};\n    const choice = (choices || []).find((choice) => choice.id === addedChoice.id);\n    correctResponse = moveChoiceToCategory(addedChoice.id, undefined, categoryId, 0, model.correctResponse);\n    // if multiplePlacements not allowed, ensure the consistency in the other categories\n    if (choice.categoryCount !== 0) {\n      correctResponse = verifyAllowMultiplePlacements(addedChoice, categoryId, correctResponse);\n    }\n    const maxCategoryChoices = getMaxCategoryChoices(model);\n    // when maxChoicesPerCategory is set to 0, there is no limit so it should not be updated\n    onModelChanged({\n      correctResponse,\n      maxChoicesPerCategory:\n        maxChoicesPerCategory !== 0 && maxChoicesPerCategory < maxCategoryChoices\n          ? maxChoicesPerCategory + 1\n          : maxChoicesPerCategory,\n    });\n  };\n\n  deleteChoiceFromCategory = (category, choice, choiceIndex) => {\n    const { model, onModelChanged } = this.props;\n    const correctResponse = removeChoiceFromCategory(choice.id, category.id, choiceIndex, model.correctResponse);\n\n    onModelChanged({ correctResponse });\n  };\n\n  moveChoice = (choiceId, from, to, choiceIndex) => {\n    const { model, onModelChanged } = this.props;\n    let { choices, correctResponse = [], maxChoicesPerCategory = 0 } = model || {};\n    const choice = (choices || []).find((choice) => choice.id === choiceId);\n    if (to === from || !choice) {\n      return;\n    }\n    if (choice.categoryCount !== 0) {\n      correctResponse = moveChoiceToCategory(choice.id, from, to, choiceIndex, correctResponse);\n      correctResponse = verifyAllowMultiplePlacements(choice, to, correctResponse);\n    } else if (choice.categoryCount === 0) {\n      correctResponse = moveChoiceToCategory(choice.id, undefined, to, 0, correctResponse);\n    }\n    const maxCategoryChoices = getMaxCategoryChoices(model);\n    // when maxChoicesPerCategory is set to 0, there is no limit so it should not be updated\n    onModelChanged({\n      correctResponse,\n      maxChoicesPerCategory:\n        maxChoicesPerCategory !== 0 && maxChoicesPerCategory < maxCategoryChoices\n          ? maxChoicesPerCategory + 1\n          : maxChoicesPerCategory,\n    });\n  };\n\n  changeRowLabel = (val, index) => {\n    const { model } = this.props;\n    const { rowLabels } = model;\n    const newRowLabels = [...rowLabels];\n\n    if (newRowLabels.length < index) {\n      newRowLabels.push(val);\n    } else {\n      newRowLabels[index] = val;\n    }\n\n    this.props.onModelChanged({\n      rowLabels: newRowLabels,\n    });\n  };\n\n  render() {\n    const {\n      model,\n      classes,\n      className,\n      categories,\n      imageSupport,\n      uploadSoundSupport,\n      toolbarOpts,\n      spellCheck,\n      configuration,\n      defaultImageMaxHeight,\n      defaultImageMaxWidth,\n      mathMlOptions = {},\n    } = this.props;\n\n    const { categoriesPerRow, rowLabels, errors } = model;\n    const { associationError, categoriesError, categoriesErrors } = errors || {};\n    const { maxCategories, maxImageWidth = {}, maxImageHeight = {} } = configuration || {};\n    const holderStyle = {\n      gridTemplateColumns: `repeat(${categoriesPerRow}, 1fr)`,\n    };\n\n    const validationMessage = generateValidationMessage(configuration);\n\n    return (\n      <div className={classNames(classes.categories, className)}>\n        <Header\n          label=\"Categories\"\n          buttonLabel=\"ADD A CATEGORY\"\n          onAdd={this.add}\n          info={\n            <Tooltip\n              classes={{ tooltip: classes.tooltip }}\n              disableFocusListener\n              disableTouchListener\n              placement={'right'}\n              title={validationMessage}\n            >\n              <Info fontSize={'small'} color={'primary'} style={{ marginLeft: '5px' }} />\n            </Tooltip>\n          }\n          buttonDisabled={maxCategories && categories && maxCategories === categories.length}\n        />\n\n        <div className={classes.categoriesHolder} style={holderStyle}>\n          {categories.map((category, index) => {\n            const hasRowLabel = index % categoriesPerRow === 0;\n            const rowIndex = index / categoriesPerRow;\n\n            return (\n              <React.Fragment key={index}>\n                {hasRowLabel && (\n                  <RowLabel\n                    categoriesPerRow={categoriesPerRow}\n                    disabled={false}\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                    mathMlOptions={mathMlOptions}\n                    configuration={configuration}\n                  />\n                )}\n\n                <Category\n                  imageSupport={imageSupport}\n                  focusedEl={this.state.focusedEl}\n                  deleteFocusedEl={this.deleteFocusedEl}\n                  index={index}\n                  category={category}\n                  error={categoriesErrors && categoriesErrors[category.id]}\n                  onChange={this.change}\n                  onDelete={() => this.delete(category)}\n                  onAddChoice={this.addChoiceToCategory}\n                  onMoveChoice={(choiceId, from, to, choiceIndex) => this.moveChoice(choiceId, from, to, choiceIndex)}\n                  toolbarOpts={toolbarOpts}\n                  spellCheck={spellCheck}\n                  onDeleteChoice={(choice, choiceIndex) => this.deleteChoiceFromCategory(category, choice, choiceIndex)}\n                  maxImageWidth={(maxImageWidth && maxImageWidth.categoryLabel) || defaultImageMaxWidth}\n                  maxImageHeight={(maxImageHeight && maxImageHeight.categoryLabel) || defaultImageMaxHeight}\n                  uploadSoundSupport={uploadSoundSupport}\n                  configuration={configuration}\n                />\n              </React.Fragment>\n            );\n          })}\n        </div>\n\n        {associationError && <div className={classes.errorText}>{associationError}</div>}\n        {categoriesError && <div className={classes.errorText}>{categoriesError}</div>}\n      </div>\n    );\n  }\n}\n\nexport default withStyles(styles)(Categories);\n"],"file":"index.js"}